Implements experimental inline suggestion hints.

src/vs/base/browser/dom.ts

@@ -1818,8 +1818,23 @@ export function h(tag: string, ...args: [] | [attributes: { $: string } & Partia
 		el.id = match.groups['id'];
 	}
 
+	const classNames = [];
 	if (match.groups['class']) {
-		el.className = match.groups['class'].replace(/\./g, ' ').trim();
+		for (const className of match.groups['class'].split('.')) {
+			if (className !== '') {
+				classNames.push(className);
+			}
+		}
+	}
+	if (attributes.className !== undefined) {
+		for (const className of attributes.className.split('.')) {
+			if (className !== '') {
+				classNames.push(className);
+			}
+		}
+	}
+	if (classNames.length > 0) {
+		el.className = classNames.join(' ');
 	}
 
 	const result: Record<string, HTMLElement> = {};
@@ -1842,7 +1857,9 @@ export function h(tag: string, ...args: [] | [attributes: { $: string } & Partia
 	}
 
 	for (const [key, value] of Object.entries(attributes)) {
-		if (key === 'style') {
+		if (key === 'className') {
+			continue;
+		} else if (key === 'style') {
 			for (const [cssKey, cssValue] of Object.entries(value)) {
 				el.style.setProperty(
 					camelCaseToHyphenCase(cssKey),

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

@@ -3784,6 +3784,9 @@ export interface IInlineSuggestOptions {
 	 * Defaults to `prefix`.
 	*/
 	mode?: 'prefix' | 'subword' | 'subwordSmart';
+
+	useExperimentalHints?: boolean;
+	hideHints?: boolean;
 }
 
 /**
@@ -3798,7 +3801,9 @@ class InlineEditorSuggest extends BaseEditorOption<EditorOption.inlineSuggest, I
 	constructor() {
 		const defaults: InternalInlineSuggestOptions = {
 			enabled: true,
-			mode: 'subwordSmart'
+			mode: 'subwordSmart',
+			useExperimentalHints: false,
+			hideHints: false,
 		};
 
 		super(
@@ -3808,7 +3813,17 @@ class InlineEditorSuggest extends BaseEditorOption<EditorOption.inlineSuggest, I
 					type: 'boolean',
 					default: defaults.enabled,
 					description: nls.localize('inlineSuggest.enabled', "Controls whether to automatically show inline suggestions in the editor.")
-				}
+				},
+				'editor.inlineSuggest.useExperimentalHints': {
+					type: 'boolean',
+					default: defaults.useExperimentalHints,
+					description: nls.localize('inlineSuggest.useExperimentalHints', "Controls whether to use experimental hints in the editor."),
+				},
+				'editor.inlineSuggest.hideHints': {
+					type: 'boolean',
+					default: defaults.hideHints,
+					description: nls.localize('inlineSuggest.hideHints', "Controls whether to hide hints in the editor."),
+				},
 			}
 		);
 	}
@@ -3821,6 +3836,8 @@ class InlineEditorSuggest extends BaseEditorOption<EditorOption.inlineSuggest, I
 		return {
 			enabled: boolean(input.enabled, this.defaultValue.enabled),
 			mode: stringSet(input.mode, this.defaultValue.mode, ['prefix', 'subword', 'subwordSmart']),
+			useExperimentalHints: boolean(input.useExperimentalHints, this.defaultValue.useExperimentalHints),
+			hideHints: boolean(input.hideHints, this.defaultValue.hideHints),
 		};
 	}
 }

src/vs/editor/contrib/inlineCompletions/browser/consts.ts

@@ -4,3 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 export const inlineSuggestCommitId = 'editor.action.inlineSuggest.commit';
+
+export const showPreviousInlineSuggestionActionId = 'editor.action.inlineSuggest.showPrevious';
+
+export const showNextInlineSuggestionActionId = 'editor.action.inlineSuggest.showNext';

src/vs/editor/contrib/inlineCompletions/browser/ghostText.contribution.ts

@@ -3,55 +3,19 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { KeyCode } from 'vs/base/common/keyCodes';
-import { EditorCommand, EditorContributionInstantiation, registerEditorAction, registerEditorCommand, registerEditorContribution } from 'vs/editor/browser/editorExtensions';
-import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
+import { EditorContributionInstantiation, registerEditorAction, registerEditorContribution } from 'vs/editor/browser/editorExtensions';
 import { HoverParticipantRegistry } from 'vs/editor/contrib/hover/browser/hoverTypes';
-import { inlineSuggestCommitId } from 'vs/editor/contrib/inlineCompletions/browser/consts';
-import { GhostTextController, AcceptNextWordOfInlineCompletion, ShowNextInlineSuggestionAction, ShowPreviousInlineSuggestionAction, TriggerInlineSuggestionAction } from 'vs/editor/contrib/inlineCompletions/browser/ghostTextController';
+import { AcceptInlineCompletion, AcceptNextWordOfInlineCompletion, DisableSuggestionHints, GhostTextController, HideInlineCompletion, ShowNextInlineSuggestionAction, ShowPreviousInlineSuggestionAction, TriggerInlineSuggestionAction, UndoAcceptPart } from 'vs/editor/contrib/inlineCompletions/browser/ghostTextController';
 import { InlineCompletionsHoverParticipant } from 'vs/editor/contrib/inlineCompletions/browser/ghostTextHoverParticipant';
-import { ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
-import { KeybindingsRegistry } from 'vs/platform/keybinding/common/keybindingsRegistry';
 
 registerEditorContribution(GhostTextController.ID, GhostTextController, EditorContributionInstantiation.Eventually);
 registerEditorAction(TriggerInlineSuggestionAction);
 registerEditorAction(ShowNextInlineSuggestionAction);
 registerEditorAction(ShowPreviousInlineSuggestionAction);
 registerEditorAction(AcceptNextWordOfInlineCompletion);
+registerEditorAction(AcceptInlineCompletion);
+registerEditorAction(HideInlineCompletion);
+registerEditorAction(UndoAcceptPart);
+registerEditorAction(DisableSuggestionHints);
 
 HoverParticipantRegistry.register(InlineCompletionsHoverParticipant);
-
-const GhostTextCommand = EditorCommand.bindToContribution(GhostTextController.get);
-
-export const commitInlineSuggestionAction = new GhostTextCommand({
-	id: inlineSuggestCommitId,
-	precondition: GhostTextController.inlineSuggestionVisible,
-	handler(x) {
-		x.commit();
-		x.editor.focus();
-	}
-});
-registerEditorCommand(commitInlineSuggestionAction);
-
-KeybindingsRegistry.registerKeybindingRule({
-	primary: KeyCode.Tab,
-	weight: 200,
-	id: commitInlineSuggestionAction.id,
-	when: ContextKeyExpr.and(
-		commitInlineSuggestionAction.precondition,
-		EditorContextKeys.tabMovesFocus.toNegated(),
-		GhostTextController.inlineSuggestionHasIndentationLessThanTabSize
-	),
-});
-
-registerEditorCommand(new GhostTextCommand({
-	id: 'editor.action.inlineSuggest.hide',
-	precondition: GhostTextController.inlineSuggestionVisible,
-	kbOpts: {
-		weight: 100,
-		primary: KeyCode.Escape,
-	},
-	handler(x) {
-		x.hide();
-	}
-}));

src/vs/editor/contrib/inlineCompletions/browser/ghostTextController.ts

@@ -14,12 +14,16 @@ import { CursorColumns } from 'vs/editor/common/core/cursorColumns';
 import { Range } from 'vs/editor/common/core/range';
 import { CursorChangeReason } from 'vs/editor/common/cursorEvents';
 import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
+import { inlineSuggestCommitId, showNextInlineSuggestionActionId, showPreviousInlineSuggestionActionId } from 'vs/editor/contrib/inlineCompletions/browser/consts';
 import { GhostTextModel } from 'vs/editor/contrib/inlineCompletions/browser/ghostTextModel';
 import { GhostTextWidget } from 'vs/editor/contrib/inlineCompletions/browser/ghostTextWidget';
+import { InlineSuggestionHintsWidget } from 'vs/editor/contrib/inlineCompletions/browser/inlineSuggestionHintsWidget';
 import * as nls from 'vs/nls';
+import { MenuId } from 'vs/platform/actions/common/actions';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { ContextKeyExpr, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { KeybindingsRegistry, KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
+import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 
 export class GhostTextController extends Disposable {
 	public static readonly inlineSuggestionVisible = new RawContextKey<boolean>('inlineSuggestionVisible', false, nls.localize('inlineSuggestionVisible', "Whether an inline suggestion is visible"));
@@ -140,9 +144,9 @@ export class GhostTextController extends Disposable {
 		this.activeModel?.showPreviousInlineCompletion();
 	}
 
-	public async hasMultipleInlineCompletions(): Promise<boolean> {
-		const result = await this.activeModel?.hasMultipleInlineCompletions();
-		return result !== undefined ? result : false;
+	public async getInlineCompletionsCount(): Promise<number> {
+		const result = await this.activeModel?.getInlineCompletionsCount();
+		return result ?? 0;
 	}
 }
 
@@ -165,6 +169,8 @@ export class ActiveGhostTextController extends Disposable {
 	public readonly model = this._register(this.instantiationService.createInstance(GhostTextModel, this.editor));
 	public readonly widget = this._register(this.instantiationService.createInstance(GhostTextWidget, this.editor, this.model));
 
+	public readonly hintsWidget = this._register(this.instantiationService.createInstance(InlineSuggestionHintsWidget, this.editor, this.model.inlineCompletionsModel));
+
 	constructor(
 		private readonly editor: IActiveCodeEditor,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
@@ -221,7 +227,7 @@ export class ActiveGhostTextController extends Disposable {
 
 
 export class ShowNextInlineSuggestionAction extends EditorAction {
-	public static ID = 'editor.action.inlineSuggest.showNext';
+	public static ID = showNextInlineSuggestionActionId;
 	constructor() {
 		super({
 			id: ShowNextInlineSuggestionAction.ID,
@@ -245,7 +251,7 @@ export class ShowNextInlineSuggestionAction extends EditorAction {
 }
 
 export class ShowPreviousInlineSuggestionAction extends EditorAction {
-	public static ID = 'editor.action.inlineSuggest.showPrevious';
+	public static ID = showPreviousInlineSuggestionActionId;
 	constructor() {
 		super({
 			id: ShowPreviousInlineSuggestionAction.ID,
@@ -294,7 +300,13 @@ export class AcceptNextWordOfInlineCompletion extends EditorAction {
 			kbOpts: {
 				weight: KeybindingWeight.EditorContrib + 1,
 				primary: KeyMod.CtrlCmd | KeyCode.RightArrow,
-			}
+			},
+			menuOpts: [{
+				menuId: MenuId.InlineSuggestionToolbar,
+				title: nls.localize('acceptPart', 'Accept Part'),
+				group: 'primary',
+				order: 2,
+			}],
 		});
 	}
 
@@ -306,9 +318,110 @@ export class AcceptNextWordOfInlineCompletion extends EditorAction {
 	}
 }
 
-KeybindingsRegistry.registerKeybindingRule({
-	id: 'undo',
-	weight: KeybindingWeight.EditorContrib + 1,
-	primary: KeyMod.CtrlCmd | KeyCode.LeftArrow,
-	when: ContextKeyExpr.and(EditorContextKeys.writable, GhostTextController.canUndoInlineSuggestion),
-});
+export class AcceptInlineCompletion extends EditorAction {
+	constructor() {
+		super({
+			id: inlineSuggestCommitId,
+			label: nls.localize('action.inlineSuggest.acceptNextWord', "Accept Next Word Of Inline Suggestion"),
+			alias: 'Accept Next Word Of Inline Suggestion',
+			precondition: GhostTextController.inlineSuggestionVisible,
+			menuOpts: [{
+				menuId: MenuId.InlineSuggestionToolbar,
+				title: nls.localize('accept', "Accept"),
+				group: 'primary',
+				order: 1,
+			}],
+			kbOpts: {
+				primary: KeyCode.Tab,
+				weight: 200,
+				kbExpr: ContextKeyExpr.and(
+					GhostTextController.inlineSuggestionVisible,
+					EditorContextKeys.tabMovesFocus.toNegated(),
+					GhostTextController.inlineSuggestionHasIndentationLessThanTabSize
+				),
+			}
+		});
+	}
+
+	public async run(accessor: ServicesAccessor | undefined, editor: ICodeEditor): Promise<void> {
+		const controller = GhostTextController.get(editor);
+		if (controller) {
+			controller.commit();
+			controller.editor.focus();
+		}
+	}
+}
+
+export class HideInlineCompletion extends EditorAction {
+	public static ID = 'editor.action.inlineSuggest.hide';
+
+	constructor() {
+		super({
+			id: HideInlineCompletion.ID,
+			label: nls.localize('action.inlineSuggest.acceptNextWord', "Accept Next Word Of Inline Suggestion"),
+			alias: 'Accept Next Word Of Inline Suggestion',
+			precondition: GhostTextController.inlineSuggestionVisible,
+			kbOpts: {
+				weight: 100,
+				primary: KeyCode.Escape,
+			}
+		});
+	}
+
+	public async run(accessor: ServicesAccessor | undefined, editor: ICodeEditor): Promise<void> {
+		const controller = GhostTextController.get(editor);
+		if (controller) {
+			controller.hide();
+		}
+	}
+}
+
+export class DisableSuggestionHints extends EditorAction {
+	public static ID = 'editor.action.inlineSuggest.disableHints';
+
+	constructor() {
+		super({
+			id: DisableSuggestionHints.ID,
+			label: nls.localize('action.inlineSuggest.disableHints', "Disable suggestion hints"),
+			alias: 'Disable suggestion hints',
+			precondition: undefined,
+			menuOpts: [{
+				menuId: MenuId.InlineSuggestionToolbar,
+				title: nls.localize('action.inlineSuggest.disableHints', "Disable suggestion hints"),
+				group: 'secondary',
+				order: 10,
+			}],
+		});
+	}
+
+	public async run(accessor: ServicesAccessor, editor: ICodeEditor): Promise<void> {
+		const configService = accessor.get(IConfigurationService);
+		configService.updateValue('editor.inlineSuggest.hideHints', true);
+	}
+}
+
+export class UndoAcceptPart extends EditorAction {
+	constructor() {
+		super({
+			id: 'editor.action.inlineSuggest.undo',
+			label: nls.localize('action.inlineSuggest.undo', "Undo Accept Part"),
+			alias: 'Undo Accept Part',
+			precondition: ContextKeyExpr.and(EditorContextKeys.writable, GhostTextController.canUndoInlineSuggestion),
+			kbOpts: {
+				weight: KeybindingWeight.EditorContrib + 1,
+				primary: KeyMod.CtrlCmd | KeyCode.LeftArrow,
+				kbExpr: ContextKeyExpr.and(EditorContextKeys.writable, GhostTextController.canUndoInlineSuggestion),
+			},
+			menuOpts: [{
+				menuId: MenuId.InlineSuggestionToolbar,
+				title: 'Undo Accept Part',
+				group: 'secondary',
+				order: 3,
+			}],
+		});
+	}
+
+	public async run(accessor: ServicesAccessor | undefined, editor: ICodeEditor): Promise<void> {
+		editor.getModel()?.undo();
+	}
+}

src/vs/editor/contrib/inlineCompletions/browser/ghostTextHoverParticipant.ts

@@ -21,6 +21,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { inlineSuggestCommitId } from 'vs/editor/contrib/inlineCompletions/browser/consts';
 import { Command } from 'vs/editor/common/languages';
+import { EditorOption } from 'vs/editor/common/config/editorOptions';
 
 export class InlineCompletionsHover implements IHoverPart {
 	constructor(
@@ -37,8 +38,8 @@ export class InlineCompletionsHover implements IHoverPart {
 		);
 	}
 
-	public hasMultipleSuggestions(): Promise<boolean> {
-		return this.controller.hasMultipleInlineCompletions();
+	public getInlineCompletionsCount(): Promise<number> {
+		return this.controller.getInlineCompletionsCount();
 	}
 
 	public get commands(): Command[] {
@@ -58,13 +59,18 @@ export class InlineCompletionsHoverParticipant implements IEditorHoverParticipan
 		@ILanguageService private readonly _languageService: ILanguageService,
 		@IOpenerService private readonly _openerService: IOpenerService,
 		@IAccessibilityService private readonly accessibilityService: IAccessibilityService,
-	) { }
+	) {
+	}
 
 	suggestHoverAnchor(mouseEvent: IEditorMouseEvent): HoverAnchor | null {
 		const controller = GhostTextController.get(this._editor);
 		if (!controller) {
 			return null;
 		}
+		if (this._editor.getOption(EditorOption.inlineSuggest).useExperimentalHints) {
+			return null;
+		}
+
 		const target = mouseEvent.target;
 		if (target.type === MouseTargetType.CONTENT_VIEW_ZONE) {
 			// handle the case where the mouse is over the view zone
@@ -131,9 +137,9 @@ export class InlineCompletionsHoverParticipant implements IEditorHoverParticipan
 		for (const action of actions) {
 			action.setEnabled(false);
 		}
-		part.hasMultipleSuggestions().then(hasMore => {
+		part.getInlineCompletionsCount().then(count => {
 			for (const action of actions) {
-				action.setEnabled(hasMore);
+				action.setEnabled(count > 1);
 			}
 		});