simpler action rendering, render enter as symbol

microsoft#88749

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

@@ -35,7 +35,7 @@
 	justify-content: space-between;
 	width: 100%;
 	font-size: 80%;
-	padding: 0 8px 0 4px;
+	padding: 0 4px 0 4px;
 	border-top: 1px solid transparent;
 	overflow: hidden;
 }
@@ -44,6 +44,15 @@
 	display: flex;
 }
 
+.monaco-editor .suggest-widget .suggest-status-bar .left {
+	align-self: flex-start;
+	padding-right: 8px;
+}
+
+.monaco-editor .suggest-widget .suggest-status-bar .right {
+	align-self: flex-end;
+}
+
 .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label {
 	min-height: 18px;
 	opacity: 0.5;

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

@@ -649,19 +649,19 @@ KeybindingsRegistry.registerKeybindingRule({
 });
 
 MenuRegistry.appendMenuItem(suggestWidgetStatusbarMenu, {
-	command: { id: 'acceptSelectedSuggestion', title: nls.localize({ key: 'accept.accept', comment: ['{0} will be a keybinding, e.g "Enter to insert"'] }, "{0} to insert") },
+	command: { id: 'acceptSelectedSuggestion', title: nls.localize('accept.insert', "Insert") },
 	group: 'left',
 	order: 1,
 	when: SuggestContext.HasInsertAndReplaceRange.toNegated()
 });
 MenuRegistry.appendMenuItem(suggestWidgetStatusbarMenu, {
-	command: { id: 'acceptSelectedSuggestion', title: nls.localize({ key: 'accept.insert', comment: ['{0} will be a keybinding, e.g "Enter to insert"'] }, "{0} to insert") },
+	command: { id: 'acceptSelectedSuggestion', title: nls.localize('accept.insert', "Insert") },
 	group: 'left',
 	order: 1,
 	when: ContextKeyExpr.and(SuggestContext.HasInsertAndReplaceRange, ContextKeyExpr.equals('config.editor.suggest.insertMode', 'insert'))
 });
 MenuRegistry.appendMenuItem(suggestWidgetStatusbarMenu, {
-	command: { id: 'acceptSelectedSuggestion', title: nls.localize({ key: 'accept.replace', comment: ['{0} will be a keybinding, e.g "Enter to replace"'] }, "{0} to replace") },
+	command: { id: 'acceptSelectedSuggestion', title: nls.localize('accept.replace', "Replace") },
 	group: 'left',
 	order: 1,
 	when: ContextKeyExpr.and(SuggestContext.HasInsertAndReplaceRange, ContextKeyExpr.equals('config.editor.suggest.insertMode', 'replace'))
@@ -684,13 +684,13 @@ registerEditorCommand(new SuggestCommand({
 		group: 'left',
 		order: 2,
 		when: ContextKeyExpr.and(SuggestContext.HasInsertAndReplaceRange, ContextKeyExpr.equals('config.editor.suggest.insertMode', 'insert')),
-		title: nls.localize({ key: 'accept.replace', comment: ['{0} will be a keybinding, e.g "Enter to replace"'] }, "{0} to replace")
+		title: nls.localize('accept.replace', "Replace")
 	}, {
 		menuId: suggestWidgetStatusbarMenu,
 		group: 'left',
 		order: 2,
 		when: ContextKeyExpr.and(SuggestContext.HasInsertAndReplaceRange, ContextKeyExpr.equals('config.editor.suggest.insertMode', 'replace')),
-		title: nls.localize({ key: 'accept.insert', comment: ['{0} will be a keybinding, e.g "Enter to insert"'] }, "{0} to insert")
+		title: nls.localize('accept.insert', "Insert")
 	}]
 }));
 

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

@@ -5,15 +5,32 @@
 
 import * as dom from 'vs/base/browser/dom';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
-import { ActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { IActionViewItemProvider, IAction } from 'vs/base/common/actions';
-import { isFalsyOrEmpty } from 'vs/base/common/arrays';
+import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
 import { DisposableStore } from 'vs/base/common/lifecycle';
-import { format } from 'vs/base/common/strings';
 import { suggestWidgetStatusbarMenu } from 'vs/editor/contrib/suggest/suggest';
-import { IMenuService } from 'vs/platform/actions/common/actions';
+import { localize } from 'vs/nls';
+import { MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
+import { IMenuService, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+
+class StatusBarViewItem extends MenuEntryActionViewItem {
+
+	updateLabel() {
+		const kb = this._keybindingService.lookupKeybinding(this._action.id);
+		if (!kb) {
+			return super.updateLabel();
+		}
+		if (this.label) {
+			this.label.textContent = localize('ddd', '{0} ({1})', this._action.label, StatusBarViewItem.symbolPrintEnter(kb));
+		}
+	}
+
+	static symbolPrintEnter(kb: ResolvedKeybinding) {
+		return kb.getLabel()?.replace(/\benter\b/gi, '\u23CE');
+	}
+}
 
 export class SuggestWidgetStatus {
 
@@ -23,33 +40,24 @@ export class SuggestWidgetStatus {
 
 	constructor(
 		container: HTMLElement,
-		@IKeybindingService keybindingService: IKeybindingService,
+		@IInstantiationService instantiationService: IInstantiationService,
 		@IMenuService menuService: IMenuService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 	) {
 		this.element = dom.append(container, dom.$('.suggest-status-bar'));
 
-
 		const actionViewItemProvider = <IActionViewItemProvider>(action => {
-			const kb = keybindingService.lookupKeybindings(action.id);
-			return new class extends ActionViewItem {
-				constructor() {
-					super(undefined, action, { label: true, icon: false });
-				}
-				updateLabel() {
-					if (isFalsyOrEmpty(kb) || !this.label) {
-						return super.updateLabel();
-					}
-					const { label } = this.getAction();
-					this.label.textContent = /{\d}/.test(label)
-						? format(this.getAction().label, kb[0].getLabel())
-						: `${this.getAction().label} (${kb[0].getLabel()})`;
-				}
-			};
+			return action instanceof MenuItemAction
+				? instantiationService.createInstance(StatusBarViewItem, action)
+				: undefined;
 		});
 		const leftActions = new ActionBar(this.element, { actionViewItemProvider });
 		const rightActions = new ActionBar(this.element, { actionViewItemProvider });
 		const menu = menuService.createMenu(suggestWidgetStatusbarMenu, contextKeyService);
+
+		leftActions.domNode.classList.add('left');
+		rightActions.domNode.classList.add('right');
+
 		const renderMenu = () => {
 			const left: IAction[] = [];
 			const right: IAction[] = [];

src/vs/platform/actions/browser/menuEntryActionViewItem.ts

@@ -137,7 +137,7 @@ export class MenuEntryActionViewItem extends ActionViewItem {
 
 	constructor(
 		readonly _action: MenuItemAction,
-		@IKeybindingService private readonly _keybindingService: IKeybindingService,
+		@IKeybindingService protected readonly _keybindingService: IKeybindingService,
 		@INotificationService protected _notificationService: INotificationService,
 		@IContextMenuService _contextMenuService: IContextMenuService
 	) {