group feature specific styling rules #11095

src/vs/workbench/services/themes/electron-browser/editorStyles.ts

@@ -69,17 +69,15 @@ export class EditorStylesContribution {
 	public contributeStyles(themeId: string, themeDocument: IThemeDocument): string[] {
 		let cssRules = [];
 		let editorStyleRules = [
-			new EditorBackgroundStyleRule(),
-			new EditorForegroundStyleRule(),
-			new EditorSelectionStyleRule(),
-			new EditorSelectionHighlightStyleRule(),
-			new EditorWordHighlightStyleRule(),
-			new EditorWordHighlightStrongStyleRule(),
-			new EditorFindLineHighlightStyleRule(),
-			new EditorCurrentLineHighlightStyleRule(),
-			new EditorCursorStyleRule(),
-			new EditorWhiteSpaceStyleRule(),
-			new EditorIndentGuidesStyleRule()
+			new EditorBackgroundStyleRules(),
+			new EditorForegroundStyleRules(),
+			new EditorCursorStyleRules(),
+			new EditorWhiteSpaceStyleRules(),
+			new EditorIndentGuidesStyleRules(),
+			new EditorCurrentLineHighlightStyleRules(),
+			new EditorSelectionStyleRules(),
+			new EditorWordHighlightStyleRules(),
+			new EditorFindStyleRules()
 		];
 		let editorStyles = new EditorStyles(themeId, themeDocument);
 		if (editorStyles.hasEditorStyleSettings()) {
@@ -99,9 +97,14 @@ interface EditorStyleSettings {
 	invisibles?: string;
 	guide?: string;
 	lineHighlight?: string;
+
 	selection?: string;
 	selectionHighlight?: string;
+
 	findLineHighlight?: string;
+	findMatch?: string;
+	currentFindMatch?: string;
+
 	wordHighlight?: string;
 	wordHighlightStrong?: string;
 }
@@ -133,24 +136,32 @@ class EditorStyles {
 }
 
 abstract class EditorStyleRule {
+
+	protected addBackgroundColorRule(editorStyles: EditorStyles, selector: string, color: string | Color, rules: string[]): void {
+		if (color) {
+			color = color instanceof Color ? color : new Color(color);
+			rules.push(`.monaco-editor.${editorStyles.getThemeSelector()} ${selector} { background-color: ${color}; }`);
+		}
+	}
+
 	public abstract getCssRules(editorStyles: EditorStyles): string[];
 }
 
-class EditorBackgroundStyleRule extends EditorStyleRule {
+class EditorBackgroundStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
 		let themeSelector = editorStyles.getThemeSelector();
 		if (editorStyles.getEditorStyleSettings().background) {
 			let background = new Color(editorStyles.getEditorStyleSettings().background);
-			cssRules.push(`.monaco-editor.${themeSelector} .monaco-editor-background { background-color: ${background}; }`);
-			cssRules.push(`.monaco-editor.${themeSelector} .glyph-margin { background-color: ${background}; }`);
+			this.addBackgroundColorRule(editorStyles, '.monaco-editor-background', background, cssRules);
+			this.addBackgroundColorRule(editorStyles, '.glyph-margin', background, cssRules);
 			cssRules.push(`.${themeSelector} .monaco-workbench .monaco-editor-background { background-color: ${background}; }`);
 		}
 		return cssRules;
 	}
 }
 
-class EditorForegroundStyleRule extends EditorStyleRule {
+class EditorForegroundStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
 		let themeSelector = editorStyles.getThemeSelector();
@@ -162,80 +173,48 @@ class EditorForegroundStyleRule extends EditorStyleRule {
 	}
 }
 
-class EditorSelectionStyleRule extends EditorStyleRule {
+class EditorSelectionStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
-		let themeSelector = editorStyles.getThemeSelector();
 		if (editorStyles.getEditorStyleSettings().selection) {
 			let selection = new Color(editorStyles.getEditorStyleSettings().selection);
-			cssRules.push(`.monaco-editor.${themeSelector} .focused .selected-text { background-color: ${selection}; }`);
-			cssRules.push(`.monaco-editor.${themeSelector} .selected-text { background-color: ${selection.transparent(0.5)}; }`);
+			this.addBackgroundColorRule(editorStyles, '.focused .selected-text', selection, cssRules);
+			this.addBackgroundColorRule(editorStyles, '.selected-text', selection.transparent(0.5), cssRules);
 		}
-		return cssRules;
-	}
-}
 
-class EditorSelectionHighlightStyleRule extends EditorStyleRule {
-	public getCssRules(editorStyles: EditorStyles): string[] {
-		let cssRules = [];
-		let themeSelector = editorStyles.getThemeSelector();
-		if (editorStyles.getEditorStyleSettings().selectionHighlight) {
-			let selection = new Color(editorStyles.getEditorStyleSettings().selectionHighlight);
-			cssRules.push(`.monaco-editor.${themeSelector} .selectionHighlight { background-color: ${selection}; }`);
-		}
+		this.addBackgroundColorRule(editorStyles, '.selectionHighlight', editorStyles.getEditorStyleSettings().selectionHighlight, cssRules);
 		return cssRules;
 	}
 }
 
-class EditorWordHighlightStyleRule extends EditorStyleRule {
+class EditorWordHighlightStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
-		let themeSelector = editorStyles.getThemeSelector();
-		if (editorStyles.getEditorStyleSettings().wordHighlight) {
-			let selection = new Color(editorStyles.getEditorStyleSettings().wordHighlight);
-			cssRules.push(`.monaco-editor.${themeSelector} .wordHighlight { background-color: ${selection}; }`);
-		}
-		return cssRules;
-	}
-}
-
-class EditorWordHighlightStrongStyleRule extends EditorStyleRule {
-	public getCssRules(editorStyles: EditorStyles): string[] {
-		let cssRules = [];
-		let themeSelector = editorStyles.getThemeSelector();
-		if (editorStyles.getEditorStyleSettings().wordHighlightStrong) {
-			let selection = new Color(editorStyles.getEditorStyleSettings().wordHighlightStrong);
-			cssRules.push(`.monaco-editor.${themeSelector} .wordHighlightStrong { background-color: ${selection}; }`);
-		}
+		this.addBackgroundColorRule(editorStyles, '.wordHighlight', editorStyles.getEditorStyleSettings().wordHighlight, cssRules);
+		this.addBackgroundColorRule(editorStyles, '.wordHighlightStrong', editorStyles.getEditorStyleSettings().wordHighlightStrong, cssRules);
 		return cssRules;
 	}
 }
 
-class EditorFindLineHighlightStyleRule extends EditorStyleRule {
+class EditorFindStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
-		let themeSelector = editorStyles.getThemeSelector();
-		if (editorStyles.getEditorStyleSettings().findLineHighlight) {
-			let selection = new Color(editorStyles.getEditorStyleSettings().findLineHighlight);
-			cssRules.push(`.monaco-editor.${themeSelector} .findLineHighlight { background-color: ${selection}; }`);
-		}
+		this.addBackgroundColorRule(editorStyles, '.findLineHighlight', editorStyles.getEditorStyleSettings().findLineHighlight, cssRules);
+		this.addBackgroundColorRule(editorStyles, '.findMatch', editorStyles.getEditorStyleSettings().findMatch, cssRules);
+		this.addBackgroundColorRule(editorStyles, '.currentFindMatch', editorStyles.getEditorStyleSettings().currentFindMatch, cssRules);
 		return cssRules;
 	}
 }
 
-class EditorCurrentLineHighlightStyleRule extends EditorStyleRule {
+class EditorCurrentLineHighlightStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
-		let themeSelector = editorStyles.getThemeSelector();
-		if (editorStyles.getEditorStyleSettings().lineHighlight) {
-			let lineHighlight = new Color(editorStyles.getEditorStyleSettings().lineHighlight);
-			cssRules.push(`.monaco-editor.${themeSelector} .current-line { background-color: ${lineHighlight}; border:0; }`);
-		}
+		this.addBackgroundColorRule(editorStyles, '.current-line', editorStyles.getEditorStyleSettings().lineHighlight, cssRules);
 		return cssRules;
 	}
 }
 
-class EditorCursorStyleRule extends EditorStyleRule {
+class EditorCursorStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
 		let themeSelector = editorStyles.getThemeSelector();
@@ -248,7 +227,7 @@ class EditorCursorStyleRule extends EditorStyleRule {
 	}
 }
 
-class EditorWhiteSpaceStyleRule extends EditorStyleRule {
+class EditorWhiteSpaceStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
 		let themeSelector = editorStyles.getThemeSelector();
@@ -260,7 +239,7 @@ class EditorWhiteSpaceStyleRule extends EditorStyleRule {
 	}
 }
 
-class EditorIndentGuidesStyleRule extends EditorStyleRule {
+class EditorIndentGuidesStyleRules extends EditorStyleRule {
 	public getCssRules(editorStyles: EditorStyles): string[] {
 		let cssRules = [];
 		let themeSelector = editorStyles.getThemeSelector();