From 2a007a23737183b7ffa2ff1914d329933caa7b7c Mon Sep 17 00:00:00 2001 From: Johannes Rieken Date: Wed, 21 Mar 2018 11:33:06 +0100 Subject: [PATCH] first cut of rendering diagnostics severity hint, #44141 --- src/vs/editor/browser/widget/codeEditorWidget.ts | 11 ++++++++++- src/vs/editor/common/model/intervalTree.ts | 7 ++++--- .../editor/common/services/modelServiceImpl.ts | 2 +- src/vs/editor/common/view/editorColorRegistry.ts | 5 ++++- .../standalone/browser/standalone-tokens.css | 16 ++++++++++------ test/smoke/src/areas/problems/problems.ts | 4 ++-- 6 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/vs/editor/browser/widget/codeEditorWidget.ts b/src/vs/editor/browser/widget/codeEditorWidget.ts index e44646527386..af41a71d5dd3 100644 --- a/src/vs/editor/browser/widget/codeEditorWidget.ts +++ b/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; }`); + } }); diff --git a/src/vs/editor/common/model/intervalTree.ts b/src/vs/editor/common/model/intervalTree.ts index b01fe79ccde6..07f7200be6e5 100644 --- a/src/vs/editor/common/model/intervalTree.ts +++ b/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' }; /** diff --git a/src/vs/editor/common/services/modelServiceImpl.ts b/src/vs/editor/common/services/modelServiceImpl.ts index 0f4aedb089cb..cfe1274ad74e 100644 --- a/src/vs/editor/common/services/modelServiceImpl.ts +++ b/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; diff --git a/src/vs/editor/common/view/editorColorRegistry.ts b/src/vs/editor/common/view/editorColorRegistry.ts index b9c749cdb4fa..e92db6d8195a 100644 --- a/src/vs/editor/common/view/editorColorRegistry.ts +++ b/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; }`); } -}); \ No newline at end of file +}); diff --git a/src/vs/editor/standalone/browser/standalone-tokens.css b/src/vs/editor/standalone/browser/standalone-tokens.css index 4333f0c608a3..c5860572a8ee 100644 --- a/src/vs/editor/standalone/browser/standalone-tokens.css +++ b/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, diff --git a/test/smoke/src/areas/problems/problems.ts b/test/smoke/src/areas/problems/problems.ts index 6cf5241a0f86..64156eced8e5 100644 --- a/test/smoke/src/areas/problems/problems.ts +++ b/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}`; } -} \ No newline at end of file +}