first cut of rendering diagnostics severity hint, #44141

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

@@ -28,7 +28,7 @@ import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { IPosition } from 'vs/editor/common/core/position';
 import { CoreEditorCommand } from 'vs/editor/browser/controller/coreCommands';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { editorErrorForeground, editorErrorBorder, editorWarningForeground, editorWarningBorder, editorInfoBorder, editorInfoForeground } from 'vs/editor/common/view/editorColorRegistry';
+import { editorErrorForeground, editorErrorBorder, editorWarningForeground, editorWarningBorder, editorInfoBorder, editorInfoForeground, editorHintForeground, editorHintBorder } from 'vs/editor/common/view/editorColorRegistry';
 import { Color } from 'vs/base/common/color';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
 import { ClassName } from 'vs/editor/common/model/intervalTree';
@@ -569,4 +569,13 @@ registerThemingParticipant((theme, collector) => {
 	if (infoForeground) {
 		collector.addRule(`.monaco-editor .${ClassName.EditorInfoDecoration} { background: url("data:image/svg+xml;utf8,${getSquigglySVGData(infoForeground)}") repeat-x bottom left; }`);
 	}
+
+	let hintBorderColor = theme.getColor(editorHintBorder);
+	if (hintBorderColor) {
+		collector.addRule(`.monaco-editor .${ClassName.EditorHintDecoration} { border-bottom: 4px dotted no-repeat ${hintBorderColor}; }`);
+	}
+	let hintForeground = theme.getColor(editorHintForeground);
+	if (hintForeground) {
+		collector.addRule(`.monaco-editor .${ClassName.EditorHintDecoration} { background: url("data:image/svg+xml;utf8,${getSquigglySVGData(hintForeground)}") no-repeat bottom left; }`);
+	}
 });

src/vs/editor/common/model/intervalTree.ts

@@ -16,9 +16,10 @@ import { IModelDecoration } from 'vs/editor/common/model';
  * The class name sort order must match the severity order. Highest severity last.
  */
 export const ClassName = {
-	EditorInfoDecoration: 'squiggly-a-info',
-	EditorWarningDecoration: 'squiggly-b-warning',
-	EditorErrorDecoration: 'squiggly-c-error'
+	EditorHintDecoration: 'squiggly-a-hint',
+	EditorInfoDecoration: 'squiggly-b-info',
+	EditorWarningDecoration: 'squiggly-c-warning',
+	EditorErrorDecoration: 'squiggly-d-error'
 };
 
 /**

src/vs/editor/common/services/modelServiceImpl.ts

@@ -120,7 +120,7 @@ class ModelMarkerHandler {
 
 		switch (marker.severity) {
 			case MarkerSeverity.Hint:
-				// do something
+				className = ClassName.EditorHintDecoration;
 				break;
 			case MarkerSeverity.Warning:
 				className = ClassName.EditorWarningDecoration;

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

@@ -42,6 +42,9 @@ export const editorWarningBorder = registerColor('editorWarning.border', { dark:
 export const editorInfoForeground = registerColor('editorInfo.foreground', { dark: '#008000', light: '#008000', hc: null }, nls.localize('infoForeground', 'Foreground color of info squigglies in the editor.'));
 export const editorInfoBorder = registerColor('editorInfo.border', { dark: null, light: null, hc: Color.fromHex('#71B771').transparent(0.8) }, nls.localize('infoBorder', 'Border color of info squigglies in the editor.'));
 
+export const editorHintForeground = registerColor('editorHint.foreground', { dark: Color.fromHex('#eeeeee').transparent(0.7), light: '#6c6c6c', hc: null }, nls.localize('hintForeground', 'Foreground color of hint squigglies in the editor.'));
+export const editorHintBorder = registerColor('editorHint.border', { dark: null, light: null, hc: Color.fromHex('#eeeeee').transparent(0.8) }, nls.localize('hintBorder', 'Border color of hint squigglies in the editor.'));
+
 const rulerRangeDefault = new Color(new RGBA(0, 122, 204, 0.6));
 export const overviewRulerRangeHighlight = registerColor('editorOverviewRuler.rangeHighlightForeground', { dark: rulerRangeDefault, light: rulerRangeDefault, hc: rulerRangeDefault }, nls.localize('overviewRulerRangeHighlight', 'Overview ruler marker color for range highlights. The color must not be opaque to not hide underlying decorations.'), true);
 export const overviewRulerError = registerColor('editorOverviewRuler.errorForeground', { dark: new Color(new RGBA(255, 18, 18, 0.7)), light: new Color(new RGBA(255, 18, 18, 0.7)), hc: new Color(new RGBA(255, 50, 50, 1)) }, nls.localize('overviewRuleError', 'Overview ruler marker color for errors.'));
@@ -74,4 +77,4 @@ registerThemingParticipant((theme, collector) => {
 	if (invisibles) {
 		collector.addRule(`.vs-whitespace { color: ${invisibles} !important; }`);
 	}
-});
+});

src/vs/editor/standalone/browser/standalone-tokens.css

@@ -192,19 +192,23 @@
 	}
 
 	/* squiggles */
-	.monaco-editor.vs .squiggly-c-error,
-	.monaco-editor.vs-dark .squiggly-c-error {
+	.monaco-editor.vs .squiggly-d-error,
+	.monaco-editor.vs-dark .squiggly-d-error {
 		background: transparent !important;
 		border-bottom: 4px double #E47777;
 	}
-	.monaco-editor.vs .squiggly-b-warning,
-	.monaco-editor.vs-dark .squiggly-b-warning {
+	.monaco-editor.vs .squiggly-c-warning,
+	.monaco-editor.vs-dark .squiggly-c-warning {
 		border-bottom: 4px double #71B771;
 	}
-	.monaco-editor.vs .squiggly-a-info,
-	.monaco-editor.vs-dark .squiggly-a-info {
+	.monaco-editor.vs .squiggly-b-info,
+	.monaco-editor.vs-dark .squiggly-b-info {
 		border-bottom: 4px double #71B771;
 	}
+	.monaco-editor.vs .squiggly-a-hint,
+	.monaco-editor.vs-dark .squiggly-a-hint {
+		border-bottom: 4px double #6c6c6c;
+	}
 
 	/* contextmenu */
 	.monaco-editor.vs .monaco-menu .monaco-action-bar.vertical .action-item .action-label:focus,

test/smoke/src/areas/problems/problems.ts

@@ -47,7 +47,7 @@ export class Problems {
 	}
 
 	public static getSelectorInEditor(problemType: ProblemSeverity): string {
-		let selector = problemType === ProblemSeverity.WARNING ? 'squiggly-b-warning' : 'squiggly-c-error';
+		let selector = problemType === ProblemSeverity.WARNING ? 'squiggly-c-warning' : 'squiggly-d-error';
 		return `.view-overlays .cdr.${selector}`;
 	}
-}
+}