Theming: Allow to change the colour of warning/error squiggles (fixes #9819)

src/vs/editor/browser/widget/codeEditorWidget.ts

@@ -5,7 +5,6 @@
 'use strict';
 
 import 'vs/css!./media/editor';
-import 'vs/editor/common/view/editorColorRegistry'; // initialze editor theming partcicpants
 import 'vs/css!./media/tokens';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { TPromise } from 'vs/base/common/winjs.base';
@@ -31,7 +30,10 @@ import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { IPosition } from 'vs/editor/common/core/position';
 import { IEditorWhitespace } from 'vs/editor/common/viewLayout/whitespaceComputer';
 import { CoreEditorCommand } from 'vs/editor/common/controller/coreCommands';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { isChrome } from "vs/base/browser/browser";
+import URI from "vs/base/common/uri";
+import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { editorErrorForeground, editorErrorBorder, editorWarningForeground, editorWarningBorder } from "vs/editor/common/view/editorColorRegistry";
 
 export abstract class CodeEditorWidget extends CommonCodeEditor implements editorBrowser.ICodeEditor {
 
@@ -545,3 +547,48 @@ class CodeEditorWidgetFocusTracker extends Disposable {
 		return this._hasFocus;
 	}
 }
+
+const errorIconPath = URI.parse(require.toUrl('vs/editor/browser/widget/media/red-squiggly.svg')).fsPath;
+const warningIconPath = URI.parse(require.toUrl('vs/editor/browser/widget/media/green-squiggly.svg')).fsPath;
+registerThemingParticipant((theme, collector) => {
+
+	// webkit-mask only supported in chrome
+	if (isChrome) {
+		let errorForeground = theme.getColor(editorErrorForeground);
+		if (errorForeground) {
+			collector.addRule(`.monaco-editor .redsquiggly { background-color: ${errorForeground}; -webkit-mask: url("${errorIconPath}") repeat-x bottom left; }`);
+		}
+
+		let errorBorderColor = theme.getColor(editorErrorBorder);
+		if (errorBorderColor) {
+			collector.addRule(`.monaco-editor .redsquiggly { border-bottom: 4px double ${errorBorderColor}; -webkit-mask: none; background: none; }`);
+		}
+
+		let warningForeground = theme.getColor(editorWarningForeground);
+		if (warningForeground) {
+			collector.addRule(`.monaco-editor .greensquiggly { background-color: ${warningForeground}; -webkit-mask: url("${warningIconPath}") repeat-x bottom left; }`);
+		}
+
+		let warningBorderColor = theme.getColor(editorWarningBorder);
+		if (warningBorderColor) {
+			collector.addRule(`.monaco-editor .greensquiggly { border-bottom: 4px double ${warningBorderColor}; -webkit-mask: none; background: none; }`);
+		}
+	}
+
+	// Any other browser
+	else {
+		let errorBorderColor = theme.getColor(editorErrorBorder);
+		if (errorBorderColor) {
+			collector.addRule(`.monaco-editor .redsquiggly { border-bottom: 4px double ${errorBorderColor}; }`);
+		} else {
+			collector.addRule(`.monaco-editor .redsquiggly { background: url("${errorIconPath}") repeat-x bottom left; }`);
+		}
+
+		let warningBorderColor = theme.getColor(editorWarningBorder);
+		if (warningBorderColor) {
+			collector.addRule(`.monaco-editor .greensquiggly { border-bottom: 4px double ${warningBorderColor}; }`);
+		} else {
+			collector.addRule(`.monaco-editor .greensquiggly { background: url("${warningIconPath}") repeat-x bottom left; }`);
+		}
+	}
+});

src/vs/editor/browser/widget/media/editor.css

@@ -40,14 +40,4 @@
 .monaco-editor .view-overlays {
 	position: absolute;
 	top: 0;
-}
-
-/* -------------------- Squigglies -------------------- */
-
-.monaco-editor.vs		.redsquiggly,
-.monaco-editor.vs-dark	.redsquiggly { background: url("red-squiggly.svg") repeat-x bottom left; }
-.monaco-editor.hc-black .redsquiggly { border-bottom: 4px double #E47777; opacity: 0.8; }
-
-.monaco-editor.vs		.greensquiggly,
-.monaco-editor.vs-dark	.greensquiggly { background: url("green-squiggly.svg") repeat-x bottom left; }
-.monaco-editor.hc-black .greensquiggly { border-bottom: 4px double #71B771; opacity: 0.8; }
+}

src/vs/editor/common/view/editorColorRegistry.ts

@@ -29,10 +29,14 @@ export const editorOverviewRulerBorder = registerColor('editorOverviewRuler.bord
 
 export const editorGutter = registerColor('editorGutter.background', { dark: editorBackground, light: editorBackground, hc: editorBackground }, nls.localize('editorGutter', 'Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.'));
 
+export const editorErrorForeground = registerColor('editorError.foreground', { dark: '#FF0000', light: '#FF0000', hc: null }, nls.localize('errorForeground', 'Foreground color of error squigglies in the editor.'));
+export const editorErrorBorder = registerColor('editorError.border', { dark: null, light: null, hc: Color.fromHex('#E47777').transparent(0.8) }, nls.localize('errorBorder', 'Border color of error squigglies in the editor.'));
+
+export const editorWarningForeground = registerColor('editorWarning.foreground', { dark: '#008000', light: '#008000', hc: null }, nls.localize('warningForeground', 'Foreground color of warning squigglies in the editor.'));
+export const editorWarningBorder = registerColor('editorWarning.border', { dark: null, light: null, hc: Color.fromHex('#71B771').transparent(0.8) }, nls.localize('warningBorder', 'Border color of warning squigglies in the editor.'));
 
 // contains all color rules that used to defined in editor/browser/widget/editor.css
 registerThemingParticipant((theme, collector) => {
-
 	let background = theme.getColor(editorBackground);
 	if (background) {
 		collector.addRule(`.monaco-editor, .monaco-editor .monaco-editor-background, .monaco-editor .inputarea.ime-input { background-color: ${background}; }`);
@@ -60,6 +64,4 @@ registerThemingParticipant((theme, collector) => {
 	if (invisibles) {
 		collector.addRule(`.vs-whitespace { color: ${invisibles} !important; }`);
 	}
-});
-
-
+});