Update to VS Code 1.52.1

lib/vscode/src/vs/editor/contrib/suggest/resizable.ts

@@ -6,7 +6,7 @@
 import { Event, Emitter } from 'vs/base/common/event';
 import { DisposableStore } from 'vs/base/common/lifecycle';
 import { Dimension } from 'vs/base/browser/dom';
-import { Orientation, Sash, SashState } from 'vs/base/browser/ui/sash/sash';
+import { Orientation, OrthogonalEdge, Sash, SashState } from 'vs/base/browser/ui/sash/sash';
 
 
 export interface IResizeEvent {
@@ -43,8 +43,8 @@ export class ResizableHTMLElement {
 		this.domNode = document.createElement('div');
 		this._eastSash = new Sash(this.domNode, { getVerticalSashLeft: () => this._size.width }, { orientation: Orientation.VERTICAL });
 		this._westSash = new Sash(this.domNode, { getVerticalSashLeft: () => 0 }, { orientation: Orientation.VERTICAL });
-		this._northSash = new Sash(this.domNode, { getHorizontalSashTop: () => 0 }, { orientation: Orientation.HORIZONTAL });
-		this._southSash = new Sash(this.domNode, { getHorizontalSashTop: () => this._size.height }, { orientation: Orientation.HORIZONTAL });
+		this._northSash = new Sash(this.domNode, { getHorizontalSashTop: () => 0 }, { orientation: Orientation.HORIZONTAL, orthogonalEdge: OrthogonalEdge.North });
+		this._southSash = new Sash(this.domNode, { getHorizontalSashTop: () => this._size.height }, { orientation: Orientation.HORIZONTAL, orthogonalEdge: OrthogonalEdge.South });
 
 		this._northSash.orthogonalStartSash = this._westSash;
 		this._northSash.orthogonalEndSash = this._eastSash;

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

@@ -6,7 +6,6 @@
 import { onUnexpectedExternalError, canceled, isPromiseCanceledError } from 'vs/base/common/errors';
 import { IEditorContribution } from 'vs/editor/common/editorCommon';
 import { ITextModel } from 'vs/editor/common/model';
-import { registerDefaultLanguageCommand } from 'vs/editor/browser/editorExtensions';
 import * as modes from 'vs/editor/common/modes';
 import { Position, IPosition } from 'vs/editor/common/core/position';
 import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
@@ -18,6 +17,10 @@ import { isDisposable, DisposableStore, IDisposable } from 'vs/base/common/lifec
 import { MenuId } from 'vs/platform/actions/common/actions';
 import { SnippetParser } from 'vs/editor/contrib/snippet/snippetParser';
 import { StopWatch } from 'vs/base/common/stopwatch';
+import { CommandsRegistry } from 'vs/platform/commands/common/commands';
+import { assertType } from 'vs/base/common/types';
+import { URI } from 'vs/base/common/uri';
+import { ITextModelService } from 'vs/editor/common/services/resolverService';
 
 export const Context = {
 	Visible: new RawContextKey<boolean>('suggestWidgetVisible', false),
@@ -341,31 +344,42 @@ export function getSuggestionComparator(snippetConfig: SnippetSortOrder): (a: Co
 	return _snippetComparators.get(snippetConfig)!;
 }
 
-registerDefaultLanguageCommand('_executeCompletionItemProvider', async (model, position, args) => {
-
-	const result: modes.CompletionList = {
-		incomplete: false,
-		suggestions: []
-	};
-
-	const resolving: Promise<any>[] = [];
-	const maxItemsToResolve = args['maxItemsToResolve'] || 0;
-
-	const completions = await provideSuggestionItems(model, position);
-	for (const item of completions.items) {
-		if (resolving.length < maxItemsToResolve) {
-			resolving.push(item.resolve(CancellationToken.None));
-		}
-		result.incomplete = result.incomplete || item.container.incomplete;
-		result.suggestions.push(item.completion);
-	}
+CommandsRegistry.registerCommand('_executeCompletionItemProvider', async (accessor, ...args: [URI, IPosition, string?, number?]) => {
+	const [uri, position, triggerCharacter, maxItemsToResolve] = args;
+	assertType(URI.isUri(uri));
+	assertType(Position.isIPosition(position));
+	assertType(typeof triggerCharacter === 'string' || !triggerCharacter);
+	assertType(typeof maxItemsToResolve === 'number' || !maxItemsToResolve);
 
+	const ref = await accessor.get(ITextModelService).createModelReference(uri);
 	try {
-		await Promise.all(resolving);
-		return result;
+
+		const result: modes.CompletionList = {
+			incomplete: false,
+			suggestions: []
+		};
+
+		const resolving: Promise<any>[] = [];
+		const completions = await provideSuggestionItems(ref.object.textEditorModel, Position.lift(position), undefined, { triggerCharacter, triggerKind: triggerCharacter ? modes.CompletionTriggerKind.TriggerCharacter : modes.CompletionTriggerKind.Invoke });
+		for (const item of completions.items) {
+			if (resolving.length < (maxItemsToResolve ?? 0)) {
+				resolving.push(item.resolve(CancellationToken.None));
+			}
+			result.incomplete = result.incomplete || item.container.incomplete;
+			result.suggestions.push(item.completion);
+		}
+
+		try {
+			await Promise.all(resolving);
+			return result;
+		} finally {
+			setTimeout(() => completions.disposable.dispose(), 100);
+		}
+
 	} finally {
-		setTimeout(() => completions.disposable.dispose(), 100);
+		ref.dispose();
 	}
+
 });
 
 interface SuggestController extends IEditorContribution {

lib/vscode/src/vs/editor/contrib/suggest/suggestMemory.ts

@@ -5,7 +5,7 @@
 
 
 import { LRUCache, TernarySearchTree } from 'vs/base/common/map';
-import { IStorageService, StorageScope, WillSaveStateReason } from 'vs/platform/storage/common/storage';
+import { IStorageService, StorageScope, StorageTarget, WillSaveStateReason } from 'vs/platform/storage/common/storage';
 import { ITextModel } from 'vs/editor/common/model';
 import { IPosition } from 'vs/editor/common/core/position';
 import { CompletionItemKind, completionKindFromString } from 'vs/editor/common/modes';
@@ -82,8 +82,7 @@ export class LRUMemory extends Memory {
 	private _seq = 0;
 
 	memorize(model: ITextModel, pos: IPosition, item: CompletionItem): void {
-		const { label } = item.completion;
-		const key = `${model.getLanguageIdentifier().language}/${label}`;
+		const key = `${model.getLanguageIdentifier().language}/${item.textLabel}`;
 		this._cache.set(key, {
 			touch: this._seq++,
 			type: item.completion.kind,
@@ -111,7 +110,7 @@ export class LRUMemory extends Memory {
 				// consider only top items
 				break;
 			}
-			const key = `${model.getLanguageIdentifier().language}/${items[i].completion.label}`;
+			const key = `${model.getLanguageIdentifier().language}/${items[i].textLabel}`;
 			const item = this._cache.peek(key);
 			if (item && item.touch > seq && item.type === items[i].completion.kind && item.insertText === items[i].completion.insertText) {
 				seq = item.touch;
@@ -295,7 +294,7 @@ export class SuggestMemoryService implements ISuggestMemoryService {
 			const share = this._configService.getValue<boolean>('editor.suggest.shareSuggestSelections');
 			const scope = share ? StorageScope.GLOBAL : StorageScope.WORKSPACE;
 			const raw = JSON.stringify(this._strategy);
-			this._storageService.store(`${SuggestMemoryService._storagePrefix}/${this._strategy.name}`, raw, scope);
+			this._storageService.store(`${SuggestMemoryService._storagePrefix}/${this._strategy.name}`, raw, scope, StorageTarget.MACHINE);
 		}
 	}
 }

lib/vscode/src/vs/editor/contrib/suggest/suggestModel.ts

@@ -20,7 +20,7 @@ import { CancellationTokenSource } from 'vs/base/common/cancellation';
 import { IEditorWorkerService } from 'vs/editor/common/services/editorWorkerService';
 import { WordDistance } from 'vs/editor/contrib/suggest/wordDistance';
 import { EditorOption } from 'vs/editor/common/config/editorOptions';
-import { isLowSurrogate, isHighSurrogate } from 'vs/base/common/strings';
+import { isLowSurrogate, isHighSurrogate, getLeadingWhitespace } from 'vs/base/common/strings';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { ILogService } from 'vs/platform/log/common/log';
@@ -486,8 +486,14 @@ export class SuggestModel implements IDisposable {
 		}).catch(onUnexpectedError);
 	}
 
+	private _telemetryGate: number = 0;
+
 	private _reportDurationsTelemetry(durations: CompletionDurations): void {
 
+		if (this._telemetryGate++ % 230 !== 0) {
+			return;
+		}
+
 		setTimeout(() => {
 			type Durations = { data: string; };
 			type DurationsClassification = { data: { classification: 'SystemMetaData', purpose: 'PerformanceAndHealth' } };
@@ -553,7 +559,8 @@ export class SuggestModel implements IDisposable {
 			return;
 		}
 
-		if (ctx.leadingWord.startColumn < this._context.leadingWord.startColumn) {
+		if (getLeadingWhitespace(ctx.leadingLineContent) !== getLeadingWhitespace(this._context.leadingLineContent)) {
+			// cancel IntelliSense when line start changes
 			// happens when the current word gets outdented
 			this.cancel();
 			return;

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

@@ -11,7 +11,7 @@ import * as strings from 'vs/base/common/strings';
 import * as dom from 'vs/base/browser/dom';
 import { Event, Emitter } from 'vs/base/common/event';
 import { onUnexpectedError } from 'vs/base/common/errors';
-import { IDisposable, DisposableStore, Disposable } from 'vs/base/common/lifecycle';
+import { IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { IListEvent, IListMouseEvent, IListGestureEvent } from 'vs/base/browser/ui/list/list';
 import { List } from 'vs/base/browser/ui/list/listWidget';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -22,7 +22,7 @@ import { CompletionModel } from './completionModel';
 import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService, IColorTheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { registerColor, editorWidgetBackground, listFocusBackground, activeContrastBorder, listHighlightForeground, editorForeground, editorWidgetBorder, focusBorder, textLinkForeground, textCodeBlockBackground } from 'vs/platform/theme/common/colorRegistry';
-import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
+import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
 import { TimeoutTimer, CancelablePromise, createCancelablePromise, disposableTimeout } from 'vs/base/common/async';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -32,6 +32,7 @@ import { getAriaId, ItemRenderer } from './suggestWidgetRenderer';
 import { ResizableHTMLElement } from './resizable';
 import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget';
 import { IPosition } from 'vs/editor/common/core/position';
+import { clamp } from 'vs/base/common/numbers';
 
 /**
  * Suggest widget colors
@@ -82,7 +83,7 @@ class PersistedWidgetSize {
 	}
 
 	store(size: dom.Dimension) {
-		this._service.store(this._key, JSON.stringify(size), StorageScope.GLOBAL);
+		this._service.store(this._key, JSON.stringify(size), StorageScope.GLOBAL, StorageTarget.MACHINE);
 	}
 
 	reset(): void {
@@ -95,49 +96,48 @@ export class SuggestWidget implements IDisposable {
 	private static LOADING_MESSAGE: string = nls.localize('suggestWidget.loading', "Loading...");
 	private static NO_SUGGESTIONS_MESSAGE: string = nls.localize('suggestWidget.noSuggestions', "No suggestions.");
 
-	private state: State = State.Hidden;
-	private isAuto: boolean = false;
-	private loadingTimeout: IDisposable = Disposable.None;
-	private currentSuggestionDetails?: CancelablePromise<void>;
-	private focusedItem?: CompletionItem;
-	private ignoreFocusEvents: boolean = false;
-	private completionModel?: CompletionModel;
+	private _state: State = State.Hidden;
+	private _isAuto: boolean = false;
+	private _loadingTimeout?: IDisposable;
+	private _currentSuggestionDetails?: CancelablePromise<void>;
+	private _focusedItem?: CompletionItem;
+	private _ignoreFocusEvents: boolean = false;
+	private _completionModel?: CompletionModel;
 	private _cappedHeight?: { wanted: number, capped: number };
+	private _explainMode: boolean = false;
 
 	readonly element: ResizableHTMLElement;
-	private readonly messageElement: HTMLElement;
-	private readonly listElement: HTMLElement;
-	private readonly list: List<CompletionItem>;
-	private readonly status: SuggestWidgetStatus;
+	private readonly _messageElement: HTMLElement;
+	private readonly _listElement: HTMLElement;
+	private readonly _list: List<CompletionItem>;
+	private readonly _status: SuggestWidgetStatus;
 	private readonly _details: SuggestDetailsOverlay;
 	private readonly _contentWidget: SuggestContentWidget;
-
-	private readonly ctxSuggestWidgetVisible: IContextKey<boolean>;
-	private readonly ctxSuggestWidgetDetailsVisible: IContextKey<boolean>;
-	private readonly ctxSuggestWidgetMultipleSuggestions: IContextKey<boolean>;
-
-	private readonly showTimeout = new TimeoutTimer();
-	private readonly _disposables = new DisposableStore();
-
 	private readonly _persistedSize: PersistedWidgetSize;
 
-	private readonly onDidSelectEmitter = new Emitter<ISelectedSuggestion>();
-	private readonly onDidFocusEmitter = new Emitter<ISelectedSuggestion>();
-	private readonly onDidHideEmitter = new Emitter<this>();
-	private readonly onDidShowEmitter = new Emitter<this>();
+	private readonly _ctxSuggestWidgetVisible: IContextKey<boolean>;
+	private readonly _ctxSuggestWidgetDetailsVisible: IContextKey<boolean>;
+	private readonly _ctxSuggestWidgetMultipleSuggestions: IContextKey<boolean>;
 
-	readonly onDidSelect: Event<ISelectedSuggestion> = this.onDidSelectEmitter.event;
-	readonly onDidFocus: Event<ISelectedSuggestion> = this.onDidFocusEmitter.event;
-	readonly onDidHide: Event<this> = this.onDidHideEmitter.event;
-	readonly onDidShow: Event<this> = this.onDidShowEmitter.event;
+	private readonly _showTimeout = new TimeoutTimer();
+	private readonly _disposables = new DisposableStore();
 
-	private detailsFocusBorderColor?: string;
-	private detailsBorderColor?: string;
 
-	private explainMode: boolean = false;
+	private readonly _onDidSelect = new Emitter<ISelectedSuggestion>();
+	private readonly _onDidFocus = new Emitter<ISelectedSuggestion>();
+	private readonly _onDidHide = new Emitter<this>();
+	private readonly _onDidShow = new Emitter<this>();
+
+	readonly onDidSelect: Event<ISelectedSuggestion> = this._onDidSelect.event;
+	readonly onDidFocus: Event<ISelectedSuggestion> = this._onDidFocus.event;
+	readonly onDidHide: Event<this> = this._onDidHide.event;
+	readonly onDidShow: Event<this> = this._onDidShow.event;
 
 	private readonly _onDetailsKeydown = new Emitter<IKeyboardEvent>();
-	public readonly onDetailsKeyDown: Event<IKeyboardEvent> = this._onDetailsKeydown.event;
+	readonly onDetailsKeyDown: Event<IKeyboardEvent> = this._onDetailsKeydown.event;
+
+	private _detailsFocusBorderColor?: string;
+	private _detailsBorderColor?: string;
 
 	constructor(
 		private readonly editor: ICodeEditor,
@@ -152,47 +152,55 @@ export class SuggestWidget implements IDisposable {
 		this._contentWidget = new SuggestContentWidget(this, editor);
 		this._persistedSize = new PersistedWidgetSize(_storageService, editor);
 
-		let persistedSize: dom.Dimension | undefined;
-		let currentSize: dom.Dimension | undefined;
-		let persistHeight = false;
-		let persistWidth = false;
+		class ResizeState {
+			constructor(
+				readonly persistedSize: dom.Dimension | undefined,
+				readonly currentSize: dom.Dimension,
+				public persistHeight = false,
+				public persistWidth = false,
+			) { }
+		}
+
+		let state: ResizeState | undefined;
 		this._disposables.add(this.element.onDidWillResize(() => {
 			this._contentWidget.lockPreference();
-			persistedSize = this._persistedSize.restore();
-			currentSize = this.element.size;
+			state = new ResizeState(this._persistedSize.restore(), this.element.size);
 		}));
 		this._disposables.add(this.element.onDidResize(e => {
 
 			this._resize(e.dimension.width, e.dimension.height);
 
-			persistHeight = persistHeight || !!e.north || !!e.south;
-			persistWidth = persistWidth || !!e.east || !!e.west;
-			if (e.done) {
+			if (state) {
+				state.persistHeight = state.persistHeight || !!e.north || !!e.south;
+				state.persistWidth = state.persistWidth || !!e.east || !!e.west;
+			}
+
+			if (!e.done) {
+				return;
+			}
+
+			if (state) {
 				// only store width or height value that have changed and also
 				// only store changes that are above a certain threshold
-				const threshold = Math.floor(this.getLayoutInfo().itemHeight / 2);
+				const { itemHeight, defaultSize } = this.getLayoutInfo();
+				const threshold = Math.round(itemHeight / 2);
 				let { width, height } = this.element.size;
-				if (persistedSize && currentSize) {
-					if (!persistHeight || Math.abs(currentSize.height - height) <= threshold) {
-						height = persistedSize.height;
-					}
-					if (!persistWidth || Math.abs(currentSize.width - width) <= threshold) {
-						width = persistedSize.width;
-					}
+				if (!state.persistHeight || Math.abs(state.currentSize.height - height) <= threshold) {
+					height = state.persistedSize?.height ?? defaultSize.height;
+				}
+				if (!state.persistWidth || Math.abs(state.currentSize.width - width) <= threshold) {
+					width = state.persistedSize?.width ?? defaultSize.width;
 				}
 				this._persistedSize.store(new dom.Dimension(width, height));
-
-				// reset working state
-				this._contentWidget.unlockPreference();
-				persistedSize = undefined;
-				currentSize = undefined;
-				persistHeight = false;
-				persistWidth = false;
 			}
+
+			// reset working state
+			this._contentWidget.unlockPreference();
+			state = undefined;
 		}));
 
-		this.messageElement = dom.append(this.element.domNode, dom.$('.message'));
-		this.listElement = dom.append(this.element.domNode, dom.$('.tree'));
+		this._messageElement = dom.append(this.element.domNode, dom.$('.message'));
+		this._listElement = dom.append(this.element.domNode, dom.$('.tree'));
 
 		const details = instantiationService.createInstance(SuggestDetailsWidget, this.editor);
 		details.onDidClose(this.toggleDetails, this, this._disposables);
@@ -205,7 +213,7 @@ export class SuggestWidget implements IDisposable {
 		this._disposables.add(renderer);
 		this._disposables.add(renderer.onDidToggleDetails(() => this.toggleDetails()));
 
-		this.list = new List('SuggestWidget', this.listElement, {
+		this._list = new List('SuggestWidget', this._listElement, {
 			getHeight: (_element: CompletionItem): number => this.getLayoutInfo().itemHeight,
 			getTemplateId: (_element: CompletionItem): string => 'suggestion'
 		}, [renderer], {
@@ -232,22 +240,22 @@ export class SuggestWidget implements IDisposable {
 			}
 		});
 
-		this.status = instantiationService.createInstance(SuggestWidgetStatus, this.element.domNode);
+		this._status = instantiationService.createInstance(SuggestWidgetStatus, this.element.domNode);
 		const applyStatusBarStyle = () => this.element.domNode.classList.toggle('with-status-bar', this.editor.getOption(EditorOption.suggest).showStatusBar);
 		applyStatusBarStyle();
 
-		this._disposables.add(attachListStyler(this.list, _themeService, {
+		this._disposables.add(attachListStyler(this._list, _themeService, {
 			listInactiveFocusBackground: editorSuggestWidgetSelectedBackground,
 			listInactiveFocusOutline: activeContrastBorder
 		}));
-		this._disposables.add(_themeService.onDidColorThemeChange(t => this.onThemeChange(t)));
-		this.onThemeChange(_themeService.getColorTheme());
+		this._disposables.add(_themeService.onDidColorThemeChange(t => this._onThemeChange(t)));
+		this._onThemeChange(_themeService.getColorTheme());
 
-		this._disposables.add(this.list.onMouseDown(e => this.onListMouseDownOrTap(e)));
-		this._disposables.add(this.list.onTap(e => this.onListMouseDownOrTap(e)));
-		this._disposables.add(this.list.onDidChangeSelection(e => this.onListSelection(e)));
-		this._disposables.add(this.list.onDidChangeFocus(e => this.onListFocus(e)));
-		this._disposables.add(this.editor.onDidChangeCursorSelection(() => this.onCursorSelectionChanged()));
+		this._disposables.add(this._list.onMouseDown(e => this._onListMouseDownOrTap(e)));
+		this._disposables.add(this._list.onTap(e => this._onListMouseDownOrTap(e)));
+		this._disposables.add(this._list.onDidChangeSelection(e => this._onListSelection(e)));
+		this._disposables.add(this._list.onDidChangeFocus(e => this._onListFocus(e)));
+		this._disposables.add(this.editor.onDidChangeCursorSelection(() => this._onCursorSelectionChanged()));
 		this._disposables.add(this.editor.onDidChangeConfiguration(e => {
 			if (e.hasChanged(EditorOption.suggest)) {
 				applyStatusBarStyle();
@@ -255,31 +263,31 @@ export class SuggestWidget implements IDisposable {
 			}
 		}));
 
-		this.ctxSuggestWidgetVisible = SuggestContext.Visible.bindTo(_contextKeyService);
-		this.ctxSuggestWidgetDetailsVisible = SuggestContext.DetailsVisible.bindTo(_contextKeyService);
-		this.ctxSuggestWidgetMultipleSuggestions = SuggestContext.MultipleSuggestions.bindTo(_contextKeyService);
+		this._ctxSuggestWidgetVisible = SuggestContext.Visible.bindTo(_contextKeyService);
+		this._ctxSuggestWidgetDetailsVisible = SuggestContext.DetailsVisible.bindTo(_contextKeyService);
+		this._ctxSuggestWidgetMultipleSuggestions = SuggestContext.MultipleSuggestions.bindTo(_contextKeyService);
 
 
 		this._disposables.add(dom.addStandardDisposableListener(this._details.widget.domNode, 'keydown', e => {
 			this._onDetailsKeydown.fire(e);
 		}));
 
-		this._disposables.add(this.editor.onMouseDown((e: IEditorMouseEvent) => this.onEditorMouseDown(e)));
+		this._disposables.add(this.editor.onMouseDown((e: IEditorMouseEvent) => this._onEditorMouseDown(e)));
 	}
 
 	dispose(): void {
 		this._details.widget.dispose();
 		this._details.dispose();
-		this.list.dispose();
-		this.status.dispose();
+		this._list.dispose();
+		this._status.dispose();
 		this._disposables.dispose();
-		this.loadingTimeout.dispose();
-		this.showTimeout.dispose();
+		this._loadingTimeout?.dispose();
+		this._showTimeout.dispose();
 		this._contentWidget.dispose();
 		this.element.dispose();
 	}
 
-	private onEditorMouseDown(mouseEvent: IEditorMouseEvent): void {
+	private _onEditorMouseDown(mouseEvent: IEditorMouseEvent): void {
 		if (this._details.widget.domNode.contains(mouseEvent.target.element)) {
 			// Clicking inside details
 			this._details.widget.domNode.focus();
@@ -291,13 +299,13 @@ export class SuggestWidget implements IDisposable {
 		}
 	}
 
-	private onCursorSelectionChanged(): void {
-		if (this.state !== State.Hidden) {
+	private _onCursorSelectionChanged(): void {
+		if (this._state !== State.Hidden) {
 			this._contentWidget.layout();
 		}
 	}
 
-	private onListMouseDownOrTap(e: IListMouseEvent<CompletionItem> | IListGestureEvent<CompletionItem>): void {
+	private _onListMouseDownOrTap(e: IListMouseEvent<CompletionItem> | IListGestureEvent<CompletionItem>): void {
 		if (typeof e.element === 'undefined' || typeof e.index === 'undefined') {
 			return;
 		}
@@ -306,83 +314,78 @@ export class SuggestWidget implements IDisposable {
 		e.browserEvent.preventDefault();
 		e.browserEvent.stopPropagation();
 
-		this.select(e.element, e.index);
+		this._select(e.element, e.index);
 	}
 
-	private onListSelection(e: IListEvent<CompletionItem>): void {
-		if (!e.elements.length) {
-			return;
+	private _onListSelection(e: IListEvent<CompletionItem>): void {
+		if (e.elements.length) {
+			this._select(e.elements[0], e.indexes[0]);
 		}
-
-		this.select(e.elements[0], e.indexes[0]);
 	}
 
-	private select(item: CompletionItem, index: number): void {
-		const completionModel = this.completionModel;
-
-		if (!completionModel) {
-			return;
+	private _select(item: CompletionItem, index: number): void {
+		const completionModel = this._completionModel;
+		if (completionModel) {
+			this._onDidSelect.fire({ item, index, model: completionModel });
+			this.editor.focus();
 		}
-
-		this.onDidSelectEmitter.fire({ item, index, model: completionModel });
-		this.editor.focus();
 	}
 
-	private onThemeChange(theme: IColorTheme) {
+	private _onThemeChange(theme: IColorTheme) {
 		const backgroundColor = theme.getColor(editorSuggestWidgetBackground);
 		if (backgroundColor) {
 			this.element.domNode.style.backgroundColor = backgroundColor.toString();
-			this.messageElement.style.backgroundColor = backgroundColor.toString();
+			this._messageElement.style.backgroundColor = backgroundColor.toString();
 			this._details.widget.domNode.style.backgroundColor = backgroundColor.toString();
 		}
 		const borderColor = theme.getColor(editorSuggestWidgetBorder);
 		if (borderColor) {
 			this.element.domNode.style.borderColor = borderColor.toString();
-			this.messageElement.style.borderColor = borderColor.toString();
-			this.status.element.style.borderTopColor = borderColor.toString();
+			this._messageElement.style.borderColor = borderColor.toString();
+			this._status.element.style.borderTopColor = borderColor.toString();
 			this._details.widget.domNode.style.borderColor = borderColor.toString();
-			this.detailsBorderColor = borderColor.toString();
+			this._detailsBorderColor = borderColor.toString();
 		}
 		const focusBorderColor = theme.getColor(focusBorder);
 		if (focusBorderColor) {
-			this.detailsFocusBorderColor = focusBorderColor.toString();
+			this._detailsFocusBorderColor = focusBorderColor.toString();
 		}
 		this._details.widget.borderWidth = theme.type === 'hc' ? 2 : 1;
 	}
 
-	private onListFocus(e: IListEvent<CompletionItem>): void {
-		if (this.ignoreFocusEvents) {
+	private _onListFocus(e: IListEvent<CompletionItem>): void {
+		if (this._ignoreFocusEvents) {
 			return;
 		}
 
 		if (!e.elements.length) {
-			if (this.currentSuggestionDetails) {
-				this.currentSuggestionDetails.cancel();
-				this.currentSuggestionDetails = undefined;
-				this.focusedItem = undefined;
+			if (this._currentSuggestionDetails) {
+				this._currentSuggestionDetails.cancel();
+				this._currentSuggestionDetails = undefined;
+				this._focusedItem = undefined;
 			}
 
 			this.editor.setAriaOptions({ activeDescendant: undefined });
 			return;
 		}
 
-		if (!this.completionModel) {
+		if (!this._completionModel) {
 			return;
 		}
 
 		const item = e.elements[0];
 		const index = e.indexes[0];
 
-		if (item !== this.focusedItem) {
+		if (item !== this._focusedItem) {
 
-			this.currentSuggestionDetails?.cancel();
-			this.currentSuggestionDetails = undefined;
+			this._currentSuggestionDetails?.cancel();
+			this._currentSuggestionDetails = undefined;
 
-			this.focusedItem = item;
+			this._focusedItem = item;
 
-			this.list.reveal(index);
+			this._list.reveal(index);
 
-			this.currentSuggestionDetails = createCancelablePromise(async token => {
+			this._currentSuggestionDetails = createCancelablePromise(async token => {
 				const loading = disposableTimeout(() => {
 					if (this._isDetailsVisible()) {
 						this.showDetails(true);
@@ -394,16 +397,16 @@ export class SuggestWidget implements IDisposable {
 				return result;
 			});
 
-			this.currentSuggestionDetails.then(() => {
-				if (index >= this.list.length || item !== this.list.element(index)) {
+			this._currentSuggestionDetails.then(() => {
+				if (index >= this._list.length || item !== this._list.element(index)) {
 					return;
 				}
 
 				// item can have extra information, so re-render
-				this.ignoreFocusEvents = true;
-				this.list.splice(index, 1, [item]);
-				this.list.setFocus([index]);
-				this.ignoreFocusEvents = false;
+				this._ignoreFocusEvents = true;
+				this._list.splice(index, 1, [item]);
+				this._list.setFocus([index]);
+				this._ignoreFocusEvents = false;
 
 				if (this._isDetailsVisible()) {
 					this.showDetails(false);
@@ -416,63 +419,63 @@ export class SuggestWidget implements IDisposable {
 		}
 
 		// emit an event
-		this.onDidFocusEmitter.fire({ item, index, model: this.completionModel });
+		this._onDidFocus.fire({ item, index, model: this._completionModel });
 	}
 
 	private _setState(state: State): void {
 
-		if (this.state === state) {
+		if (this._state === state) {
 			return;
 		}
-		this.state = state;
+		this._state = state;
 
 		this.element.domNode.classList.toggle('frozen', state === State.Frozen);
 		this.element.domNode.classList.remove('message');
 
 		switch (state) {
 			case State.Hidden:
-				dom.hide(this.messageElement, this.listElement, this.status.element);
+				dom.hide(this._messageElement, this._listElement, this._status.element);
 				this._details.hide(true);
 				this._contentWidget.hide();
-				this.ctxSuggestWidgetVisible.reset();
-				this.ctxSuggestWidgetMultipleSuggestions.reset();
+				this._ctxSuggestWidgetVisible.reset();
+				this._ctxSuggestWidgetMultipleSuggestions.reset();
 				this.element.domNode.classList.remove('visible');
-				this.list.splice(0, this.list.length);
-				this.focusedItem = undefined;
+				this._list.splice(0, this._list.length);
+				this._focusedItem = undefined;
 				this._cappedHeight = undefined;
-				this.explainMode = false;
+				this._explainMode = false;
 				break;
 			case State.Loading:
 				this.element.domNode.classList.add('message');
-				this.messageElement.textContent = SuggestWidget.LOADING_MESSAGE;
-				dom.hide(this.listElement, this.status.element);
-				dom.show(this.messageElement);
+				this._messageElement.textContent = SuggestWidget.LOADING_MESSAGE;
+				dom.hide(this._listElement, this._status.element);
+				dom.show(this._messageElement);
 				this._details.hide();
 				this._show();
-				this.focusedItem = undefined;
+				this._focusedItem = undefined;
 				break;
 			case State.Empty:
 				this.element.domNode.classList.add('message');
-				this.messageElement.textContent = SuggestWidget.NO_SUGGESTIONS_MESSAGE;
-				dom.hide(this.listElement, this.status.element);
-				dom.show(this.messageElement);
+				this._messageElement.textContent = SuggestWidget.NO_SUGGESTIONS_MESSAGE;
+				dom.hide(this._listElement, this._status.element);
+				dom.show(this._messageElement);
 				this._details.hide();
 				this._show();
-				this.focusedItem = undefined;
+				this._focusedItem = undefined;
 				break;
 			case State.Open:
-				dom.hide(this.messageElement);
-				dom.show(this.listElement, this.status.element);
+				dom.hide(this._messageElement);
+				dom.show(this._listElement, this._status.element);
 				this._show();
 				break;
 			case State.Frozen:
-				dom.hide(this.messageElement);
-				dom.show(this.listElement, this.status.element);
+				dom.hide(this._messageElement);
+				dom.show(this._listElement, this._status.element);
 				this._show();
 				break;
 			case State.Details:
-				dom.hide(this.messageElement);
-				dom.show(this.listElement, this.status.element);
+				dom.hide(this._messageElement);
+				dom.show(this._listElement, this._status.element);
 				this._details.show();
 				this._show();
 				break;
@@ -482,176 +485,176 @@ export class SuggestWidget implements IDisposable {
 	private _show(): void {
 		this._contentWidget.show();
 		this._layout(this._persistedSize.restore());
-		this.ctxSuggestWidgetVisible.set(true);
+		this._ctxSuggestWidgetVisible.set(true);
 
-		this.showTimeout.cancelAndSet(() => {
+		this._showTimeout.cancelAndSet(() => {
 			this.element.domNode.classList.add('visible');
-			this.onDidShowEmitter.fire(this);
+			this._onDidShow.fire(this);
 		}, 100);
 	}
 
 	showTriggered(auto: boolean, delay: number) {
-		if (this.state !== State.Hidden) {
+		if (this._state !== State.Hidden) {
 			return;
 		}
 		this._contentWidget.setPosition(this.editor.getPosition());
-		this.isAuto = !!auto;
+		this._isAuto = !!auto;
 
-		if (!this.isAuto) {
-			this.loadingTimeout = disposableTimeout(() => this._setState(State.Loading), delay);
+		if (!this._isAuto) {
+			this._loadingTimeout = disposableTimeout(() => this._setState(State.Loading), delay);
 		}
 	}
 
 	showSuggestions(completionModel: CompletionModel, selectionIndex: number, isFrozen: boolean, isAuto: boolean): void {
 
 		this._contentWidget.setPosition(this.editor.getPosition());
-		this.loadingTimeout.dispose();
+		this._loadingTimeout?.dispose();
 
-		this.currentSuggestionDetails?.cancel();
-		this.currentSuggestionDetails = undefined;
+		this._currentSuggestionDetails?.cancel();
+		this._currentSuggestionDetails = undefined;
 
-		if (this.completionModel !== completionModel) {
-			this.completionModel = completionModel;
+		if (this._completionModel !== completionModel) {
+			this._completionModel = completionModel;
 		}
 
-		if (isFrozen && this.state !== State.Empty && this.state !== State.Hidden) {
+		if (isFrozen && this._state !== State.Empty && this._state !== State.Hidden) {
 			this._setState(State.Frozen);
 			return;
 		}
 
-		const visibleCount = this.completionModel.items.length;
+		const visibleCount = this._completionModel.items.length;
 		const isEmpty = visibleCount === 0;
-		this.ctxSuggestWidgetMultipleSuggestions.set(visibleCount > 1);
+		this._ctxSuggestWidgetMultipleSuggestions.set(visibleCount > 1);
 
 		if (isEmpty) {
 			this._setState(isAuto ? State.Hidden : State.Empty);
-			this.completionModel = undefined;
+			this._completionModel = undefined;
 			return;
 		}
 
-		this.focusedItem = undefined;
-		this.list.splice(0, this.list.length, this.completionModel.items);
+		this._focusedItem = undefined;
+		this._list.splice(0, this._list.length, this._completionModel.items);
 		this._setState(isFrozen ? State.Frozen : State.Open);
-		this.list.reveal(selectionIndex, 0);
-		this.list.setFocus([selectionIndex]);
+		this._list.reveal(selectionIndex, 0);
+		this._list.setFocus([selectionIndex]);
 
 		this._layout(this.element.size);
 		// Reset focus border
-		if (this.detailsBorderColor) {
-			this._details.widget.domNode.style.borderColor = this.detailsBorderColor;
+		if (this._detailsBorderColor) {
+			this._details.widget.domNode.style.borderColor = this._detailsBorderColor;
 		}
 	}
 
 	selectNextPage(): boolean {
-		switch (this.state) {
+		switch (this._state) {
 			case State.Hidden:
 				return false;
 			case State.Details:
 				this._details.widget.pageDown();
 				return true;
 			case State.Loading:
-				return !this.isAuto;
+				return !this._isAuto;
 			default:
-				this.list.focusNextPage();
+				this._list.focusNextPage();
 				return true;
 		}
 	}
 
 	selectNext(): boolean {
-		switch (this.state) {
+		switch (this._state) {
 			case State.Hidden:
 				return false;
 			case State.Loading:
-				return !this.isAuto;
+				return !this._isAuto;
 			default:
-				this.list.focusNext(1, true);
+				this._list.focusNext(1, true);
 				return true;
 		}
 	}
 
 	selectLast(): boolean {
-		switch (this.state) {
+		switch (this._state) {
 			case State.Hidden:
 				return false;
 			case State.Details:
 				this._details.widget.scrollBottom();
 				return true;
 			case State.Loading:
-				return !this.isAuto;
+				return !this._isAuto;
 			default:
-				this.list.focusLast();
+				this._list.focusLast();
 				return true;
 		}
 	}
 
 	selectPreviousPage(): boolean {
-		switch (this.state) {
+		switch (this._state) {
 			case State.Hidden:
 				return false;
 			case State.Details:
 				this._details.widget.pageUp();
 				return true;
 			case State.Loading:
-				return !this.isAuto;
+				return !this._isAuto;
 			default:
-				this.list.focusPreviousPage();
+				this._list.focusPreviousPage();
 				return true;
 		}
 	}
 
 	selectPrevious(): boolean {
-		switch (this.state) {
+		switch (this._state) {
 			case State.Hidden:
 				return false;
 			case State.Loading:
-				return !this.isAuto;
+				return !this._isAuto;
 			default:
-				this.list.focusPrevious(1, true);
+				this._list.focusPrevious(1, true);
 				return false;
 		}
 	}
 
 	selectFirst(): boolean {
-		switch (this.state) {
+		switch (this._state) {
 			case State.Hidden:
 				return false;
 			case State.Details:
 				this._details.widget.scrollTop();
 				return true;
 			case State.Loading:
-				return !this.isAuto;
+				return !this._isAuto;
 			default:
-				this.list.focusFirst();
+				this._list.focusFirst();
 				return true;
 		}
 	}
 
 	getFocusedItem(): ISelectedSuggestion | undefined {
-		if (this.state !== State.Hidden
-			&& this.state !== State.Empty
-			&& this.state !== State.Loading
-			&& this.completionModel
+		if (this._state !== State.Hidden
+			&& this._state !== State.Empty
+			&& this._state !== State.Loading
+			&& this._completionModel
 		) {
 
 			return {
-				item: this.list.getFocusedElements()[0],
-				index: this.list.getFocus()[0],
-				model: this.completionModel
+				item: this._list.getFocusedElements()[0],
+				index: this._list.getFocus()[0],
+				model: this._completionModel
 			};
 		}
 		return undefined;
 	}
 
 	toggleDetailsFocus(): void {
-		if (this.state === State.Details) {
+		if (this._state === State.Details) {
 			this._setState(State.Open);
-			if (this.detailsBorderColor) {
-				this._details.widget.domNode.style.borderColor = this.detailsBorderColor;
+			if (this._detailsBorderColor) {
+				this._details.widget.domNode.style.borderColor = this._detailsBorderColor;
 			}
-		} else if (this.state === State.Open && this._isDetailsVisible()) {
+		} else if (this._state === State.Open && this._isDetailsVisible()) {
 			this._setState(State.Details);
-			if (this.detailsFocusBorderColor) {
-				this._details.widget.domNode.style.borderColor = this.detailsFocusBorderColor;
+			if (this._detailsFocusBorderColor) {
+				this._details.widget.domNode.style.borderColor = this._detailsFocusBorderColor;
 			}
 		}
 	}
@@ -659,14 +662,14 @@ export class SuggestWidget implements IDisposable {
 	toggleDetails(): void {
 		if (this._isDetailsVisible()) {
 			// hide details widget
-			this.ctxSuggestWidgetDetailsVisible.set(false);
+			this._ctxSuggestWidgetDetailsVisible.set(false);
 			this._setDetailsVisible(false);
 			this._details.hide();
 			this.element.domNode.classList.remove('shows-details');
 
-		} else if (canExpandCompletionItem(this.list.getFocusedElements()[0]) && (this.state === State.Open || this.state === State.Details || this.state === State.Frozen)) {
+		} else if (canExpandCompletionItem(this._list.getFocusedElements()[0]) && (this._state === State.Open || this._state === State.Details || this._state === State.Frozen)) {
 			// show details widget (iff possible)
-			this.ctxSuggestWidgetDetailsVisible.set(true);
+			this._ctxSuggestWidgetDetailsVisible.set(true);
 			this._setDetailsVisible(true);
 			this.showDetails(false);
 		}
@@ -677,7 +680,7 @@ export class SuggestWidget implements IDisposable {
 		if (loading) {
 			this._details.widget.renderLoading();
 		} else {
-			this._details.widget.renderItem(this.list.getFocusedElements()[0], this.explainMode);
+			this._details.widget.renderItem(this._list.getFocusedElements()[0], this._explainMode);
 		}
 		this._positionDetails();
 		this.editor.focus();
@@ -685,8 +688,8 @@ export class SuggestWidget implements IDisposable {
 	}
 
 	toggleExplainMode(): void {
-		if (this.list.getFocusedElements()[0] && this._isDetailsVisible()) {
-			this.explainMode = !this.explainMode;
+		if (this._list.getFocusedElements()[0] && this._isDetailsVisible()) {
+			this._explainMode = !this._explainMode;
 			this.showDetails(false);
 		}
 	}
@@ -696,13 +699,13 @@ export class SuggestWidget implements IDisposable {
 	}
 
 	hideWidget(): void {
-		this.loadingTimeout.dispose();
+		this._loadingTimeout?.dispose();
 		this._setState(State.Hidden);
-		this.onDidHideEmitter.fire(this);
+		this._onDidHide.fire(this);
 	}
 
 	isFrozen(): boolean {
-		return this.state === State.Frozen;
+		return this._state === State.Frozen;
 	}
 
 	_afterRender(position: ContentWidgetPositionPreference | null) {
@@ -712,7 +715,7 @@ export class SuggestWidget implements IDisposable {
 			}
 			return;
 		}
-		if (this.state === State.Empty || this.state === State.Loading) {
+		if (this._state === State.Empty || this._state === State.Loading) {
 			// no special positioning when widget isn't showing list
 			return;
 		}
@@ -738,12 +741,12 @@ export class SuggestWidget implements IDisposable {
 		const info = this.getLayoutInfo();
 
 		// status bar
-		this.status.element.style.lineHeight = `${info.itemHeight}px`;
+		this._status.element.style.lineHeight = `${info.itemHeight}px`;
 
-		if (this.state === State.Empty || this.state === State.Loading) {
+		if (this._state === State.Empty || this._state === State.Loading) {
 			// showing a message only
 			height = info.itemHeight + info.borderHeight;
-			width = 230;
+			width = info.defaultSize.width / 2;
 			this.element.enableSashes(false, false, false, false);
 			this.element.minSize = this.element.maxSize = new dom.Dimension(width, height);
 			this._contentWidget.setPreference(ContentWidgetPositionPreference.BELOW);
@@ -754,16 +757,16 @@ export class SuggestWidget implements IDisposable {
 			// width math
 			const maxWidth = bodyBox.width - info.borderHeight - 2 * info.horizontalPadding;
 			if (width === undefined) {
-				width = 430;
+				width = info.defaultSize.width;
 			}
 			if (width > maxWidth) {
 				width = maxWidth;
 			}
-			const preferredWidth = this.completionModel ? this.completionModel.stats.pLabelLen * info.typicalHalfwidthCharacterWidth : width;
+			const preferredWidth = this._completionModel ? this._completionModel.stats.pLabelLen * info.typicalHalfwidthCharacterWidth : width;
 
 			// height math
-			const fullHeight = info.statusBarHeight + this.list.contentHeight + info.borderHeight;
-			const preferredHeight = info.statusBarHeight + 12 * info.itemHeight + info.borderHeight;
+			const fullHeight = info.statusBarHeight + this._list.contentHeight + info.borderHeight;
+			const preferredHeight = info.defaultSize.height;
 			const minHeight = info.itemHeight + info.statusBarHeight;
 			const editorBox = dom.getDomNodePagePosition(this.editor.getDomNode());
 			const cursorBox = this.editor.getScrolledVisiblePosition(this.editor.getPosition());
@@ -819,8 +822,8 @@ export class SuggestWidget implements IDisposable {
 		height = Math.min(maxHeight, height);
 
 		const { statusBarHeight } = this.getLayoutInfo();
-		this.list.layout(height - statusBarHeight, width);
-		this.listElement.style.height = `${height - statusBarHeight}px`;
+		this._list.layout(height - statusBarHeight, width);
+		this._listElement.style.height = `${height - statusBarHeight}px`;
 		this.element.layout(height, width);
 		this._contentWidget.layout();
 
@@ -835,8 +838,8 @@ export class SuggestWidget implements IDisposable {
 
 	getLayoutInfo() {
 		const fontInfo = this.editor.getOption(EditorOption.fontInfo);
-		const itemHeight = this.editor.getOption(EditorOption.suggestLineHeight) || fontInfo.lineHeight;
-		const statusBarHeight = !this.editor.getOption(EditorOption.suggest).showStatusBar || this.state === State.Empty || this.state === State.Loading ? 0 : itemHeight;
+		const itemHeight = clamp(this.editor.getOption(EditorOption.suggestLineHeight) || fontInfo.lineHeight, 8, 1000);
+		const statusBarHeight = !this.editor.getOption(EditorOption.suggest).showStatusBar || this._state === State.Empty || this._state === State.Loading ? 0 : itemHeight;
 		const borderWidth = this._details.widget.borderWidth;
 		const borderHeight = 2 * borderWidth;
 
@@ -847,7 +850,8 @@ export class SuggestWidget implements IDisposable {
 			borderHeight,
 			typicalHalfwidthCharacterWidth: fontInfo.typicalHalfwidthCharacterWidth,
 			verticalPadding: 22,
-			horizontalPadding: 14
+			horizontalPadding: 14,
+			defaultSize: new dom.Dimension(430, statusBarHeight + 12 * itemHeight + borderHeight)
 		};
 	}
 
@@ -856,7 +860,7 @@ export class SuggestWidget implements IDisposable {
 	}
 
 	private _setDetailsVisible(value: boolean) {
-		this._storageService.store('expandSuggestionDocs', value, StorageScope.GLOBAL);
+		this._storageService.store('expandSuggestionDocs', value, StorageScope.GLOBAL, StorageTarget.USER);
 	}
 }
 

lib/vscode/src/vs/editor/contrib/suggest/suggestWidgetDetails.ts

@@ -91,6 +91,7 @@ export class SuggestDetailsWidget {
 		const lineHeightPx = `${lineHeight}px`;
 
 		this.domNode.style.fontSize = fontSizePx;
+		this.domNode.style.lineHeight = lineHeightPx;
 		this.domNode.style.fontWeight = fontWeight;
 		this.domNode.style.fontFeatureSettings = fontInfo.fontFeatureSettings;
 		this._type.style.fontFamily = fontFamily;
@@ -127,9 +128,10 @@ export class SuggestDetailsWidget {
 
 		if (explainMode) {
 			let md = '';
-			md += `score: ${item.score[0]}${item.word ? `, compared '${item.completion.filterText && (item.completion.filterText + ' (filterText)') || item.completion.label}' with '${item.word}'` : ' (no prefix)'}\n`;
+			md += `score: ${item.score[0]}${item.word ? `, compared '${item.completion.filterText && (item.completion.filterText + ' (filterText)') || typeof item.completion.label === 'string' ? item.completion.label : item.completion.label.name}' with '${item.word}'` : ' (no prefix)'}\n`;
 			md += `distance: ${item.distance}, see localityBonus-setting\n`;
 			md += `index: ${item.idx}, based on ${item.completion.sortText && `sortText: "${item.completion.sortText}"` || 'label'}\n`;
+			md += `commit characters: ${item.completion.commitCharacters}\n`;
 			documentation = new MarkdownString().appendCodeblock('empty', md);
 			detail = `Provider: ${item.provider._debugDisplayName}`;
 		}
@@ -168,7 +170,7 @@ export class SuggestDetailsWidget {
 			const renderedContents = this._markdownRenderer.render(documentation);
 			this._docs.appendChild(renderedContents.element);
 			this._renderDisposeable.add(renderedContents);
-			this._renderDisposeable.add(this._markdownRenderer.onDidRenderCodeBlock(() => {
+			this._renderDisposeable.add(this._markdownRenderer.onDidRenderAsync(() => {
 				this.layout(this._size.width, this._type.clientHeight + this._docs.clientHeight);
 				this._onDidChangeContents.fire(this);
 			}));

lib/vscode/src/vs/editor/contrib/suggest/suggestWidgetRenderer.ts

@@ -11,7 +11,7 @@ import { IListRenderer } from 'vs/base/browser/ui/list/list';
 import { EditorOption } from 'vs/editor/common/config/editorOptions';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { CompletionItem } from './suggest';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { CompletionItemKind, completionKindToCssClass, CompletionItemTag } from 'vs/editor/common/modes';
 import { IconLabel, IIconLabelValueOptions } from 'vs/base/browser/ui/iconLabel/iconLabel';
@@ -21,32 +21,40 @@ import { URI } from 'vs/base/common/uri';
 import { FileKind } from 'vs/platform/files/common/files';
 import { flatten } from 'vs/base/common/arrays';
 import { canExpandCompletionItem } from './suggestWidgetDetails';
-import { Codicon, registerIcon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
 import { Emitter, Event } from 'vs/base/common/event';
+import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 
 export function getAriaId(index: number): string {
 	return `suggest-aria-id:${index}`;
 }
 
-export const suggestMoreInfoIcon = registerIcon('suggest-more-info', Codicon.chevronRight);
+export const suggestMoreInfoIcon = registerIcon('suggest-more-info', Codicon.chevronRight, nls.localize('suggestMoreInfoIcon', 'Icon for more information in the suggest widget.'));
 
-const colorRegExp = /^(#([\da-f]{3}){1,2}|(rgb|hsl)a\(\s*(\d{1,3}%?\s*,\s*){3}(1|0?\.\d+)\)|(rgb|hsl)\(\s*\d{1,3}%?(\s*,\s*\d{1,3}%?){2}\s*\))$/i;
+const _completionItemColor = new class ColorExtractor {
 
-function extractColor(item: CompletionItem, out: string[]): boolean {
-	const label = typeof item.completion.label === 'string'
-		? item.completion.label
-		: item.completion.label.name;
+	private static _regexRelaxed = /(#([\da-fA-F]{3}){1,2}|(rgb|hsl)a\(\s*(\d{1,3}%?\s*,\s*){3}(1|0?\.\d+)\)|(rgb|hsl)\(\s*\d{1,3}%?(\s*,\s*\d{1,3}%?){2}\s*\))/;
+	private static _regexStrict = new RegExp(`^${ColorExtractor._regexRelaxed.source}$`, 'i');
 
-	if (label.match(colorRegExp)) {
-		out[0] = label;
-		return true;
+	extract(item: CompletionItem, out: string[]): boolean {
+		if (item.textLabel.match(ColorExtractor._regexStrict)) {
+			out[0] = item.textLabel;
+			return true;
+		}
+		if (item.completion.detail && item.completion.detail.match(ColorExtractor._regexStrict)) {
+			out[0] = item.completion.detail;
+			return true;
+		}
+		if (typeof item.completion.documentation === 'string') {
+			const match = ColorExtractor._regexRelaxed.exec(item.completion.documentation);
+			if (match && (match.index === 0 || match.index + match[0].length === item.completion.documentation.length)) {
+				out[0] = match[0];
+				return true;
+			}
+		}
+		return false;
 	}
-	if (typeof item.completion.documentation === 'string' && item.completion.documentation.match(colorRegExp)) {
-		out[0] = item.completion.documentation;
-		return true;
-	}
-	return false;
-}
+};
 
 
 export interface ISuggestionTemplateData {
@@ -116,7 +124,7 @@ export class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTe
 		data.qualifierLabel = append(data.left, $('span.qualifier-label'));
 		data.detailsLabel = append(data.right, $('span.details-label'));
 
-		data.readMore = append(data.right, $('span.readMore' + suggestMoreInfoIcon.cssSelector));
+		data.readMore = append(data.right, $('span.readMore' + ThemeIcon.asCSSSelector(suggestMoreInfoIcon)));
 		data.readMore.title = nls.localize('readMore', "Read More");
 
 		const configureFont = () => {
@@ -165,7 +173,7 @@ export class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTe
 		};
 
 		let color: string[] = [];
-		if (completion.kind === CompletionItemKind.Color && extractColor(element, color)) {
+		if (completion.kind === CompletionItemKind.Color && _completionItemColor.extract(element, color)) {
 			// special logic for 'color' completion items
 			data.icon.className = 'icon customcolor';
 			data.iconContainer.className = 'icon hide';
@@ -214,6 +222,12 @@ export class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTe
 			data.root.title = `${textLabel}${completion.label.parameters ?? ''}  ${completion.label.qualifier ?? ''}  ${completion.label.type ?? ''}`;
 		}
 
+		if (this._editor.getOption(EditorOption.suggest).showInlineDetails) {
+			show(data.detailsLabel);
+		} else {
+			hide(data.detailsLabel);
+		}
+
 		if (canExpandCompletionItem(element)) {
 			data.right.classList.add('can-expand-details');
 			show(data.readMore);