Editor doesn't render any problem markers anymore. Fixes #27076

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

@@ -30,10 +30,9 @@ 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 { 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";
+import { editorErrorForeground, editorErrorBorder, editorWarningForeground, editorWarningBorder } from 'vs/editor/common/view/editorColorRegistry';
+import { Color } from 'vs/base/common/color';
 
 export abstract class CodeEditorWidget extends CommonCodeEditor implements editorBrowser.ICodeEditor {
 
@@ -548,47 +547,29 @@ class CodeEditorWidgetFocusTracker extends Disposable {
 	}
 }
 
-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; }`);
-		}
+const squigglyStart = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='`);
+const squigglyEnd = encodeURIComponent(`'><polygon points='5.5,0 2.5,3 1.1,3 4.1,0'/><polygon points='4,0 6,2 6,0.6 5.4,0'/><polygon points='0,2 1,3 2.4,3 0,0.6'/></g></svg>`);
 
-		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; }`);
-		}
+function getSquigglySVGData(color: Color) {
+	return squigglyStart + encodeURIComponent(color.toString()) + squigglyEnd;
+}
 
-		let warningBorderColor = theme.getColor(editorWarningBorder);
-		if (warningBorderColor) {
-			collector.addRule(`.monaco-editor .greensquiggly { border-bottom: 4px double ${warningBorderColor}; -webkit-mask: none; background: none; }`);
-		}
+registerThemingParticipant((theme, collector) => {
+	let errorBorderColor = theme.getColor(editorErrorBorder);
+	if (errorBorderColor) {
+		collector.addRule(`.monaco-editor .redsquiggly { border-bottom: 4px double ${errorBorderColor}; }`);
+	}
+	let errorForeground = theme.getColor(editorErrorForeground);
+	if (errorForeground) {
+		collector.addRule(`.monaco-editor .redsquiggly { background: url("data:image/svg+xml,${getSquigglySVGData(errorForeground)}") repeat-x bottom left; }`);
 	}
 
-	// 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; }`);
-		}
+	let warningBorderColor = theme.getColor(editorWarningBorder);
+	if (warningBorderColor) {
+		collector.addRule(`.monaco-editor .greensquiggly { border-bottom: 4px double ${warningBorderColor}; }`);
+	}
+	let warningForeground = theme.getColor(editorWarningForeground);
+	if (warningForeground) {
+		collector.addRule(`.monaco-editor .greensquiggly { background: url("data:image/svg+xml;utf8,${getSquigglySVGData(warningForeground)}") repeat-x bottom left; }`);
 	}
 });
\ No newline at end of file

src/vs/editor/browser/widget/media/green-squiggly.svg

-<svg xmlns="http://www.w3.org/2000/svg" height="3" width="6"><g fill="#080"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></g></svg>
\ No newline at end of file

src/vs/editor/browser/widget/media/red-squiggly.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" height="3" width="6"><g fill="#F00"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></g></svg>
\ No newline at end of file