WIP for #39441

extensions/css-language-features/client/src/cssMain.ts

@@ -45,8 +45,8 @@ export function activate(context: ExtensionContext) {
 			dataPaths
 		},
 		middleware: {
-			// testing the replace / insert mode
 			provideCompletionItem(document: TextDocument, position: Position, context: CompletionContext, token: CancellationToken, next: ProvideCompletionItemsSignature): ProviderResult<CompletionItem[] | CompletionList> {
+				// testing the replace / insert mode
 				function updateRanges(item: CompletionItem) {
 					const range = item.range;
 					if (range && range.end.isAfter(position) && range.start.isBeforeOrEqual(position)) {
@@ -54,10 +54,23 @@ export function activate(context: ExtensionContext) {
 						item.range = undefined;
 					}
 				}
+
 				function updateProposals(r: CompletionItem[] | CompletionList | null | undefined): CompletionItem[] | CompletionList | null | undefined {
 					if (r) {
 						(Array.isArray(r) ? r : r.items).forEach(updateRanges);
+
+						if (!Array.isArray(r)) {
+							r.isDetailsResolved = true;
+							r.items.forEach(i => {
+								if (i.kind === CompletionItemKind.Color) {
+									i.detail = i.documentation?.toString();
+								} else {
+									i.detail = i.label;
+								}
+							});
+						}
 					}
+
 					return r;
 				}
 				const isThenable = <T>(obj: ProviderResult<T>): obj is Thenable<T> => obj && (<any>obj)['then'];

src/vs/editor/common/config/editorOptions.ts

@@ -2495,6 +2495,10 @@ export interface ISuggestOptions {
 	 * Max suggestions to show in suggestions. Defaults to 12.
 	 */
 	maxVisibleSuggestions?: number;
+	/**
+	 * Always show inline details
+	 */
+	alwaysRevealInlineDetails?: boolean;
 	/**
 	 * Show method-suggestions.
 	 */
@@ -2614,6 +2618,7 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
 			shareSuggestSelections: false,
 			showIcons: true,
 			maxVisibleSuggestions: 12,
+			alwaysRevealInlineDetails: false,
 			showMethods: true,
 			showFunctions: true,
 			showConstructors: true,
@@ -2676,7 +2681,7 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
 				'editor.suggest.snippetsPreventQuickSuggestions': {
 					type: 'boolean',
 					default: defaults.snippetsPreventQuickSuggestions,
-					description: nls.localize('suggest.snippetsPreventQuickSuggestions', "Control whether an active snippet prevents quick suggestions.")
+					description: nls.localize('suggest.snippetsPreventQuickSuggestions', "Controls whether an active snippet prevents quick suggestions.")
 				},
 				'editor.suggest.showIcons': {
 					type: 'boolean',
@@ -2690,6 +2695,11 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
 					maximum: 15,
 					description: nls.localize('suggest.maxVisibleSuggestions', "Controls how many suggestions IntelliSense will show before showing a scrollbar (maximum 15).")
 				},
+				'editor.suggest.alwaysRevealInlineDetails': {
+					type: 'boolean',
+					default: defaults.alwaysRevealInlineDetails,
+					description: nls.localize('suggest.alwaysRevealInlineDetails', "Controls whether to always show inline details")
+				},
 				'editor.suggest.filteredTypes': {
 					type: 'object',
 					deprecationMessage: nls.localize('deprecated', "This setting is deprecated, please use separate settings like 'editor.suggest.showKeywords' or 'editor.suggest.showSnippets' instead.")
@@ -2842,6 +2852,7 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
 			shareSuggestSelections: EditorBooleanOption.boolean(input.shareSuggestSelections, this.defaultValue.shareSuggestSelections),
 			showIcons: EditorBooleanOption.boolean(input.showIcons, this.defaultValue.showIcons),
 			maxVisibleSuggestions: EditorIntOption.clampedInt(input.maxVisibleSuggestions, this.defaultValue.maxVisibleSuggestions, 1, 15),
+			alwaysRevealInlineDetails: EditorBooleanOption.boolean(input.alwaysRevealInlineDetails, this.defaultValue.alwaysRevealInlineDetails),
 			showMethods: EditorBooleanOption.boolean(input.showMethods, this.defaultValue.showMethods),
 			showFunctions: EditorBooleanOption.boolean(input.showFunctions, this.defaultValue.showFunctions),
 			showConstructors: EditorBooleanOption.boolean(input.showConstructors, this.defaultValue.showConstructors),

src/vs/editor/contrib/suggest/media/suggest.css

@@ -143,16 +143,39 @@
 	display: inline;
 }
 
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore,
+/** Inline type Label (details) **/
+
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label,
+.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
+	display: none;
+}
+
+.monaco-editor .suggest-widget.always-reveal-inline-details .monaco-list .monaco-list-row > .contents > .main > .type-label,
+.monaco-editor .suggest-widget.always-reveal-inline-details.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
+	display: inline;
+}
+
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
+	display: inline;
+}
+
+/** readMore icon **/
+
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore,
 .monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
-.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused > .contents > .main > .type-label,
 .monaco-editor .suggest-widget.docs-below .monaco-list .monaco-list-row.focused > .contents > .main > .readMore {
 	display: none;
 }
 
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore {
+	display: inline;
+}
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused) > .contents > .main > .readMore {
+	display: inline;
+	visibility: hidden;
+}
+
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore {
 	display: inline;
 }
 

src/vs/editor/contrib/suggest/suggest.ts

@@ -47,7 +47,7 @@ export class CompletionItem {
 	idx?: number;
 	word?: string;
 
-	//
+	// all details resolved, we can show them all
 	readonly isDetailsResolved: boolean;
 
 	constructor(

src/vs/editor/contrib/suggest/suggestController.ts

@@ -43,7 +43,7 @@ import { SuggestRangeHighlighter } from 'vs/editor/contrib/suggest/suggestRangeH
  * Stop suggest widget from disappearing when clicking into other areas
  * For development purpose only
  */
-const _sticky = false;
+const _sticky = true;
 
 class LineSuffix {
 

src/vs/editor/contrib/suggest/suggestWidget.ts

@@ -517,7 +517,9 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 		this.details = instantiationService.createInstance(SuggestionDetails, this.element, this, this.editor, markdownRenderer, triggerKeybindingLabel);
 
 		const applyIconStyle = () => toggleClass(this.element, 'no-icons', !this.editor.getOption(EditorOption.suggest).showIcons);
+		const applyAlwaysRevealInlineDetailsStyle = () => toggleClass(this.element, 'always-reveal-inline-details', this.editor.getOption(EditorOption.suggest).alwaysRevealInlineDetails);
 		applyIconStyle();
+		applyAlwaysRevealInlineDetailsStyle();
 
 		let renderer = instantiationService.createInstance(Renderer, this, this.editor, triggerKeybindingLabel);
 
@@ -538,7 +540,12 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 		this.toDispose.add(this.list.onSelectionChange(e => this.onListSelection(e)));
 		this.toDispose.add(this.list.onFocusChange(e => this.onListFocus(e)));
 		this.toDispose.add(this.editor.onDidChangeCursorSelection(() => this.onCursorSelectionChanged()));
-		this.toDispose.add(this.editor.onDidChangeConfiguration(e => e.hasChanged(EditorOption.suggest) && applyIconStyle()));
+		this.toDispose.add(this.editor.onDidChangeConfiguration(e => {
+			if (e.hasChanged(EditorOption.suggest)) {
+				applyIconStyle();
+				applyAlwaysRevealInlineDetailsStyle();
+			}
+		}));
 
 		this.suggestWidgetVisible = SuggestContext.Visible.bindTo(contextKeyService);
 		this.suggestWidgetMultipleSuggestions = SuggestContext.MultipleSuggestions.bindTo(contextKeyService);

src/vs/editor/contrib/suggest/test/completionModel.test.ts

@@ -41,6 +41,7 @@ suite('CompletionModel', function () {
 		shareSuggestSelections: false,
 		showIcons: true,
 		maxVisibleSuggestions: 12,
+		alwaysRevealInlineDetails: false,
 		showMethods: true,
 		showFunctions: true,
 		showConstructors: true,

src/vs/monaco.d.ts

@@ -3381,6 +3381,10 @@ declare namespace monaco.editor {
 		 * Max suggestions to show in suggestions. Defaults to 12.
 		 */
 		maxVisibleSuggestions?: number;
+		/**
+		 * Always show inline details
+		 */
+		alwaysRevealInlineDetails?: boolean;
 		/**
 		 * Show method-suggestions.
 		 */