Improved Sieve gui style

dev/Sieve/View/Script.js

@@ -7,6 +7,8 @@ import { parseScript } from 'Sieve/Parser';
 
 import { availableActions, availableControls, availableTests } from 'Sieve/Commands';
 
+import { ControlCommand, TestCommand, ActionCommand, GrammarComment } from 'Sieve/Grammar';
+
 import {
 	capa,
 	scripts,
@@ -137,6 +139,57 @@ export class SieveScriptPopupView extends rl.pluginPopupView {
 		return document.getElementById(id) ? id : 'SieveCommand';
 	}
 
+	styleClass(obj) {
+		if (obj instanceof ControlCommand) {
+			return 'sieve-control';
+		}
+		if (obj instanceof TestCommand) {
+			return 'sieve-test';
+		}
+		if (obj instanceof ActionCommand) {
+			return 'sieve-action';
+		}
+		if (obj instanceof GrammarComment) {
+			return 'sieve-comment';
+		}
+/*
+		if (obj instanceof GrammarString) {
+			return 'sieve-string';
+		}
+		if (obj instanceof GrammarCommand) {
+			return 'sieve-command';
+		}
+		if (obj instanceof GrammarCommands) {
+			return 'sieve-commands';
+		}
+		if (obj instanceof GrammarTestList {
+			return 'sieve-testlist';
+		}
+		if (obj instanceof GrammarBracketComment {
+			return 'sieve-bcomment';
+		}
+		if (obj instanceof GrammarHashComment {
+			return 'sieve-hcomment';
+		}
+		if (obj instanceof GrammarNumber {
+			return 'sieve-number';
+		}
+		if (obj instanceof GrammarStringList {
+			return 'sieve-stringlist';
+		}
+		if (obj instanceof GrammarQuotedString {
+			return 'sieve-qstring';
+		}
+		if (obj instanceof GrammarMultiLine {
+			return 'sieve-multiline';
+		}
+		if (obj instanceof UnknownCommand {
+			return 'sieve-string';
+		}
+*/
+		return 'sieve-' + obj.constructor.name;
+	}
+
 	beforeShow(oScript) {
 //	onShow(oScript) {
 		this.sieveCapabilities(capa.join(' '));

dev/Styles/User/SettingsFilters.less

@@ -35,15 +35,20 @@
 	font-family: var(--fontMono);
 }
 
-.sieve-block {
-	border: 1px solid var(--border-color, #ddd);
-	margin: 1em 0;
-	padding: 0.5em;
-}
-
-.sieve-block > div {
+.sieve-control > div,
+.sieve-test > div,
+.sieve-action > div {
 	padding-left:2em;
 }
-.sieve-block > details > div {
+
+.sieve-control > details > div,
+.sieve-test > details > div,
+.sieve-action > details > div {
 	padding-left:1em;
 }
+
+.sieve-control, .sieve-test, .sieve-action, .sieve-comment {
+	border: 1px solid var(--border-color, #ddd);
+	margin: 0.5em 0;
+	padding: 0.5em;
+}