diff --git a/src/vs/editor/browser/widget/codeEditorWidget.ts b/src/vs/editor/browser/widget/codeEditorWidget.ts index e35b26ddd3a4c..41b902c22ab4b 100644 --- a/src/vs/editor/browser/widget/codeEditorWidget.ts +++ b/src/vs/editor/browser/widget/codeEditorWidget.ts @@ -46,12 +46,14 @@ import { IMouseEvent } from 'vs/base/browser/mouseEvent'; import { InternalEditorAction } from 'vs/editor/common/editorAction'; import { ICommandDelegate } from 'vs/editor/browser/view/viewController'; import { CoreEditorCommand } from 'vs/editor/browser/controller/coreCommands'; -import { editorErrorForeground, editorErrorBorder, editorWarningForeground, editorWarningBorder, editorInfoBorder, editorInfoForeground, editorHintForeground, editorHintBorder, editorUnnecessaryForeground } from 'vs/editor/common/view/editorColorRegistry'; +import { editorErrorForeground, editorErrorBorder, editorWarningForeground, editorWarningBorder, editorInfoBorder, editorInfoForeground, editorHintForeground, editorHintBorder, editorUnnecessaryCodeOpacity } from 'vs/editor/common/view/editorColorRegistry'; import { Color } from 'vs/base/common/color'; import { ClassName } from 'vs/editor/common/model/intervalTree'; let EDITOR_ID = 0; +const SHOW_UNUSED_ENABLED_CLASS = 'showUnused'; + export interface ICodeEditorWidgetOptions { /** * Is this a simple widget (not a real code editor) ? @@ -227,6 +229,11 @@ export class CodeEditorWidget extends Disposable implements editorBrowser.ICodeE if (e.layoutInfo) { this._onDidLayoutChange.fire(this._configuration.editor.layoutInfo); } + if (this._configuration.editor.showUnused) { + this.domElement.classList.add(SHOW_UNUSED_ENABLED_CLASS); + } else { + this.domElement.classList.remove(SHOW_UNUSED_ENABLED_CLASS); + } })); this._contextKeyService = this._register(contextKeyService.createScoped(this.domElement)); @@ -1796,8 +1803,8 @@ registerThemingParticipant((theme, collector) => { collector.addRule(`.monaco-editor .${ClassName.EditorHintDecoration} { background: url("data:image/svg+xml,${getDotDotDotSVGData(hintForeground)}") no-repeat bottom left; }`); } - const unnecessaryForeground = theme.getColor(editorUnnecessaryForeground); + const unnecessaryForeground = theme.getColor(editorUnnecessaryCodeOpacity); if (unnecessaryForeground) { - collector.addRule(`.monaco-editor .${ClassName.EditorUnnecessaryDecoration} { color: ${unnecessaryForeground}; }`); + collector.addRule(`.${SHOW_UNUSED_ENABLED_CLASS} .monaco-editor .${ClassName.EditorUnnecessaryDecoration} { opacity: ${unnecessaryForeground.rgba.a}; }`); } }); diff --git a/src/vs/editor/common/config/commonEditorConfig.ts b/src/vs/editor/common/config/commonEditorConfig.ts index 05859b26f37ad..9077cbe130a6a 100644 --- a/src/vs/editor/common/config/commonEditorConfig.ts +++ b/src/vs/editor/common/config/commonEditorConfig.ts @@ -645,6 +645,11 @@ const editorConfiguration: IConfigurationNode = { 'default': EDITOR_DEFAULTS.accessibilitySupport, 'description': nls.localize('accessibilitySupport', "Controls whether the editor should run in a mode where it is optimized for screen readers.") }, + 'editor.showUnused': { + 'type': 'boolean', + 'default': EDITOR_DEFAULTS.showUnused, + 'description': nls.localize('showUnused', "Controls fading out of unused code.") + }, 'editor.links': { 'type': 'boolean', 'default': EDITOR_DEFAULTS.contribInfo.links, diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts index af780797a47f0..8a7b483c0e23e 100644 --- a/src/vs/editor/common/config/editorOptions.ts +++ b/src/vs/editor/common/config/editorOptions.ts @@ -581,6 +581,10 @@ export interface IEditorOptions { * The letter spacing */ letterSpacing?: number; + /** + * Controls fading out of unused variables. + */ + showUnused?: boolean; } /** @@ -909,6 +913,7 @@ export interface IValidatedEditorOptions { readonly multiCursorModifier: 'altKey' | 'ctrlKey' | 'metaKey'; readonly multiCursorMergeOverlapping: boolean; readonly accessibilitySupport: 'auto' | 'off' | 'on'; + readonly showUnused: boolean; readonly viewInfo: InternalEditorViewOptions; readonly contribInfo: EditorContribOptions; @@ -931,6 +936,7 @@ export class InternalEditorOptions { readonly accessibilitySupport: platform.AccessibilitySupport; readonly multiCursorModifier: 'altKey' | 'ctrlKey' | 'metaKey'; readonly multiCursorMergeOverlapping: boolean; + readonly showUnused: boolean; // ---- cursor options readonly wordSeparators: string; @@ -972,6 +978,7 @@ export class InternalEditorOptions { viewInfo: InternalEditorViewOptions; wrappingInfo: EditorWrappingInfo; contribInfo: EditorContribOptions; + showUnused: boolean; }) { this.canUseLayerHinting = source.canUseLayerHinting; this.pixelRatio = source.pixelRatio; @@ -993,6 +1000,7 @@ export class InternalEditorOptions { this.viewInfo = source.viewInfo; this.wrappingInfo = source.wrappingInfo; this.contribInfo = source.contribInfo; + this.showUnused = source.showUnused; } /** @@ -1014,6 +1022,7 @@ export class InternalEditorOptions { && this.useTabStops === other.useTabStops && this.tabFocusMode === other.tabFocusMode && this.dragAndDrop === other.dragAndDrop + && this.showUnused === other.showUnused && this.emptySelectionClipboard === other.emptySelectionClipboard && InternalEditorOptions._equalsLayoutInfo(this.layoutInfo, other.layoutInfo) && this.fontInfo.equals(other.fontInfo) @@ -1585,6 +1594,7 @@ export class EditorOptionsValidator { multiCursorModifier: multiCursorModifier, multiCursorMergeOverlapping: _boolean(opts.multiCursorMergeOverlapping, defaults.multiCursorMergeOverlapping), accessibilitySupport: _stringSet<'auto' | 'on' | 'off'>(opts.accessibilitySupport, defaults.accessibilitySupport, ['auto', 'on', 'off']), + showUnused: _boolean(opts.showUnused, defaults.showUnused), viewInfo: viewInfo, contribInfo: contribInfo, }; @@ -1824,6 +1834,7 @@ export class InternalEditorOptionsFactory { multiCursorModifier: opts.multiCursorModifier, multiCursorMergeOverlapping: opts.multiCursorMergeOverlapping, accessibilitySupport: opts.accessibilitySupport, + showUnused: opts.showUnused, viewInfo: { extraEditorClassName: opts.viewInfo.extraEditorClassName, @@ -2045,7 +2056,8 @@ export class InternalEditorOptionsFactory { fontInfo: env.fontInfo, viewInfo: opts.viewInfo, wrappingInfo: wrappingInfo, - contribInfo: opts.contribInfo + contribInfo: opts.contribInfo, + showUnused: opts.showUnused, }); } } @@ -2275,6 +2287,7 @@ export const EDITOR_DEFAULTS: IValidatedEditorOptions = { multiCursorModifier: 'altKey', multiCursorMergeOverlapping: true, accessibilitySupport: 'auto', + showUnused: true, viewInfo: { extraEditorClassName: '', diff --git a/src/vs/editor/common/view/editorColorRegistry.ts b/src/vs/editor/common/view/editorColorRegistry.ts index c8b310fb7debd..419da627d31b0 100644 --- a/src/vs/editor/common/view/editorColorRegistry.ts +++ b/src/vs/editor/common/view/editorColorRegistry.ts @@ -49,7 +49,7 @@ export const editorInfoBorder = registerColor('editorInfo.border', { dark: null, 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.')); -export const editorUnnecessaryForeground = registerColor('editorUnnecessary.foreground', { dark: Color.fromHex('#eeeeee').transparent(0.7), light: '#6c6c6c', hc: null }, nls.localize('unnecessaryForeground', 'Foreground color of unnecessary code in the editor.')); +export const editorUnnecessaryCodeOpacity = registerColor('editorUnnecessaryCode.opacity', { dark: Color.fromHex('#0009'), light: Color.fromHex('#0007'), hc: null }, nls.localize('unnecessaryCodeOpacity', 'Opacity of unnecessary code 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); diff --git a/src/vs/monaco.d.ts b/src/vs/monaco.d.ts index acd7200170a16..511e6725cded3 100644 --- a/src/vs/monaco.d.ts +++ b/src/vs/monaco.d.ts @@ -2923,6 +2923,10 @@ declare namespace monaco.editor { * The letter spacing */ letterSpacing?: number; + /** + * Controls fading out of unused variables. + */ + showUnused?: boolean; } /** @@ -3175,6 +3179,7 @@ declare namespace monaco.editor { readonly readOnly: boolean; readonly multiCursorModifier: 'altKey' | 'ctrlKey' | 'metaKey'; readonly multiCursorMergeOverlapping: boolean; + readonly showUnused: boolean; readonly wordSeparators: string; readonly autoClosingBrackets: boolean; readonly autoIndent: boolean;