From d346fdcdfeecf76e56433dedfaf8df32126ad9ad Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Tue, 20 Jan 2026 12:29:04 +0100 Subject: [PATCH] make small ghosttext suggestions more visible --- .../browser/view/ghostText/ghostTextView.css | 7 ++++++ .../browser/view/ghostText/ghostTextView.ts | 25 ++++++++++++++++--- .../browser/view/inlineSuggestionsView.ts | 1 + 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.css b/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.css index 16148bd87b0..e46dca6d726 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.css +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.css @@ -64,6 +64,13 @@ border-bottom: 4px double var(--vscode-editorWarning-border); } +.monaco-editor .ghost-text-decoration.short-text, +.monaco-editor .ghost-text-decoration-preview.short-text, +.monaco-editor .suggest-preview-text .ghost-text.short-text { + text-decoration: underline dotted var(--vscode-editorGhostText-foreground); + text-underline-position: under; +} + .ghost-text-view-warning-widget-icon { .codicon { color: var(--vscode-editorWarning-foreground) !important; diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.ts index e244d37aaf2..96053b4e19a 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.ts @@ -78,6 +78,7 @@ export class GhostTextView extends Disposable { private readonly _shouldKeepCursorStable: boolean; private readonly _minReservedLineCount: IObservable; private readonly _useSyntaxHighlighting: IObservable; + private readonly _highlightShortText: boolean; constructor( private readonly _editor: ICodeEditor, @@ -88,6 +89,7 @@ export class GhostTextView extends Disposable { shouldKeepCursorStable?: boolean; minReservedLineCount?: IObservable; useSyntaxHighlighting?: IObservable; + highlightShortSuggestions?: boolean; }, @ILanguageService private readonly _languageService: ILanguageService ) { @@ -98,6 +100,7 @@ export class GhostTextView extends Disposable { this._shouldKeepCursorStable = options.shouldKeepCursorStable ?? false; this._minReservedLineCount = options.minReservedLineCount ?? constObservable(0); this._useSyntaxHighlighting = options.useSyntaxHighlighting ?? constObservable(true); + this._highlightShortText = options.highlightShortSuggestions ?? false; this._editorObs = observableCodeEditor(this._editor); this._additionalLinesWidget = this._register( @@ -203,14 +206,25 @@ export class GhostTextView extends Disposable { return undefined; } + private readonly _nonWhitespaceCount = derived(this, reader => { + const data = this._data.read(reader); + if (!data) { return undefined; } + const ghostText = data.ghostText; + const allText = ghostText.parts.map(p => p.lines.map(l => l.line).join('')).join(''); + return allText.replace(/\s/g, '').length; + }); + private readonly _extraClassNames = derived(this, reader => { const extraClasses = this._extraClasses.slice(); - if (this._useSyntaxHighlighting.read(reader)) { - extraClasses.push('syntax-highlighted'); - } if (USE_SQUIGGLES_FOR_WARNING && this._warningState.read(reader)) { extraClasses.push('warning'); } + const nonWhitespaceCount = this._nonWhitespaceCount.read(reader); + if (this._highlightShortText && nonWhitespaceCount && nonWhitespaceCount < 3) { + extraClasses.push('short-text'); + } else if (this._useSyntaxHighlighting.read(reader)) { + extraClasses.push('syntax-highlighted'); + } const extraClassNames = extraClasses.map(c => ` ${c}`).join(''); return extraClassNames; }); @@ -301,6 +315,10 @@ export class GhostTextView extends Disposable { } for (const p of uiState.inlineTexts) { + let inlineExtraClassNames = ''; + if (this._highlightShortText && p.text.length < 5) { + inlineExtraClassNames += ' short-text'; + } decorations.push({ range: Range.fromPositions(new Position(uiState.lineNumber, p.column)), options: { @@ -311,6 +329,7 @@ export class GhostTextView extends Disposable { inlineClassName: (p.preview ? 'ghost-text-decoration-preview' : 'ghost-text-decoration') + (this._isClickable ? ' clickable' : '') + extraClassNames + + inlineExtraClassNames + p.lineDecorations.map(d => ' ' + d.className).join(' '), // TODO: take the ranges into account for line decorations cursorStops: InjectedTextCursorStops.Left, attachedData: new GhostTextAttachedData(this), diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineSuggestionsView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineSuggestionsView.ts index 2b18dfa6d15..21a2c598aa0 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineSuggestionsView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineSuggestionsView.ts @@ -146,6 +146,7 @@ export class InlineSuggestionsView extends Disposable { }), { useSyntaxHighlighting: this._editorObs.getOption(EditorOption.inlineSuggest).map(v => v.syntaxHighlightingEnabled), + highlightShortSuggestions: true, }, ); }