Welcome: Improve "keyboard tips" visual presentation (fixes #64901)

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts

@@ -4,12 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./keybindingLabel';
-import { IDisposable } from 'vs/base/common/lifecycle';
 import { equals } from 'vs/base/common/objects';
 import { OperatingSystem } from 'vs/base/common/platform';
 import { ResolvedKeybinding, ResolvedKeybindingPart } from 'vs/base/common/keyCodes';
 import { UILabelProvider } from 'vs/base/common/keybindingLabels';
 import * as dom from 'vs/base/browser/dom';
+import { localize } from 'vs/nls';
 
 const $ = dom.$;
 
@@ -26,14 +26,18 @@ export interface Matches {
 	chordPart: PartMatches;
 }
 
-export class KeybindingLabel implements IDisposable {
+export interface KeybindingLabelOptions {
+	renderUnboundKeybindings: boolean;
+}
+
+export class KeybindingLabel {
 
 	private domNode: HTMLElement;
 	private keybinding: ResolvedKeybinding;
 	private matches: Matches;
 	private didEverRender: boolean;
 
-	constructor(container: HTMLElement, private os: OperatingSystem) {
+	constructor(container: HTMLElement, private os: OperatingSystem, private options?: KeybindingLabelOptions) {
 		this.domNode = dom.append(container, $('.monaco-keybinding'));
 		this.didEverRender = false;
 		container.appendChild(this.domNode);
@@ -43,7 +47,7 @@ export class KeybindingLabel implements IDisposable {
 		return this.domNode;
 	}
 
-	set(keybinding: ResolvedKeybinding, matches: Matches) {
+	set(keybinding: ResolvedKeybinding, matches?: Matches) {
 		if (this.didEverRender && this.keybinding === keybinding && KeybindingLabel.areSame(this.matches, matches)) {
 			return;
 		}
@@ -66,6 +70,8 @@ export class KeybindingLabel implements IDisposable {
 				this.renderPart(this.domNode, chordPart, this.matches ? this.matches.chordPart : null);
 			}
 			this.domNode.title = this.keybinding.getAriaLabel() || '';
+		} else if (this.options && this.options.renderUnboundKeybindings) {
+			this.renderUnbound(this.domNode);
 		}
 
 		this.didEverRender = true;
@@ -98,7 +104,8 @@ export class KeybindingLabel implements IDisposable {
 		}
 	}
 
-	dispose() {
+	private renderUnbound(parent: HTMLElement): void {
+		dom.append(parent, $('span.monaco-keybinding-key', undefined, localize('unbound', "Unbound")));
 	}
 
 	private static areSame(a: Matches, b: Matches): boolean {

src/vs/base/parts/quickopen/browser/quickOpenModel.ts

@@ -474,7 +474,7 @@ class Renderer implements IRenderer<QuickOpenEntry> {
 			data.detail.set(entry.getDetail(), detailHighlights);
 
 			// Keybinding
-			data.keybinding.set(entry.getKeybinding(), null);
+			data.keybinding.set(entry.getKeybinding());
 		}
 	}
 
@@ -484,7 +484,6 @@ class Renderer implements IRenderer<QuickOpenEntry> {
 		data.actionBar = null;
 		data.container = null;
 		data.entry = null;
-		data.keybinding.dispose();
 		data.keybinding = null;
 		data.detail.dispose();
 		data.detail = null;

src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts

@@ -999,7 +999,7 @@ export class ExtensionEditor extends BaseEditor {
 
 		const renderKeybinding = (keybinding: ResolvedKeybinding): HTMLElement => {
 			const element = $('');
-			new KeybindingLabel(element, OS).set(keybinding, null);
+			new KeybindingLabel(element, OS).set(keybinding);
 			return element;
 		};
 

src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts

@@ -257,10 +257,10 @@ export class DefineKeybindingWidget extends Widget {
 		this._chordPart = chordPart;
 		dom.clearNode(this._outputNode);
 		dom.clearNode(this._showExistingKeybindingsNode);
-		new KeybindingLabel(this._outputNode, OS).set(this._firstPart, null);
+		new KeybindingLabel(this._outputNode, OS).set(this._firstPart);
 		if (this._chordPart) {
 			this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to")));
-			new KeybindingLabel(this._outputNode, OS).set(this._chordPart, null);
+			new KeybindingLabel(this._outputNode, OS).set(this._chordPart);
 		}
 		const label = this.getUserSettingsLabel();
 		if (label) {

src/vs/workbench/parts/watermark/electron-browser/watermark.css

@@ -50,25 +50,6 @@
 	text-align: left;
 }
 
-.monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts {
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-}
-
-.mac > .monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts {
-	letter-spacing: 0.15em;
-	font-family: "Lucida Grande", sans-serif;
-}
-
-.monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound {
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-}
-
-.mac > .monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound {
-	font-family: "Lucida Grande", sans-serif;
-}
-
 .monaco-workbench > .part.editor > .content.empty > .watermark dt,
 .monaco-workbench > .part.editor > .content.empty > .watermark dd {
 	display: table-cell;

src/vs/workbench/parts/watermark/electron-browser/watermark.ts

@@ -6,7 +6,7 @@
 import 'vs/css!./watermark';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { assign } from 'vs/base/common/objects';
-import { isMacintosh } from 'vs/base/common/platform';
+import { isMacintosh, OS } from 'vs/base/common/platform';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import * as nls from 'vs/nls';
 import { Registry } from 'vs/platform/registry/common/platform';
@@ -22,63 +22,63 @@ import { ShowAllCommandsAction } from 'vs/workbench/parts/quickopen/browser/comm
 import { Parts, IPartService, IDimension } from 'vs/workbench/services/part/common/partService';
 import { StartAction } from 'vs/workbench/parts/debug/browser/debugActions';
 import { FindInFilesActionId } from 'vs/workbench/parts/search/common/constants';
-import { escape } from 'vs/base/common/strings';
 import { QUICKOPEN_ACTION_ID } from 'vs/workbench/browser/parts/quickopen/quickopen';
 import { TERMINAL_COMMAND_ID } from 'vs/workbench/parts/terminal/common/terminalCommands';
 import * as dom from 'vs/base/browser/dom';
+import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
 
 const $ = dom.$;
 
 interface WatermarkEntry {
 	text: string;
-	ids: string[];
+	id: string;
 	mac?: boolean;
 }
 
 const showCommands: WatermarkEntry = {
 	text: nls.localize('watermark.showCommands', "Show All Commands"),
-	ids: [ShowAllCommandsAction.ID]
+	id: ShowAllCommandsAction.ID
 };
 const quickOpen: WatermarkEntry = {
 	text: nls.localize('watermark.quickOpen', "Go to File"),
-	ids: [QUICKOPEN_ACTION_ID]
+	id: QUICKOPEN_ACTION_ID
 };
 const openFileNonMacOnly: WatermarkEntry = {
 	text: nls.localize('watermark.openFile', "Open File"),
-	ids: [OpenFileAction.ID],
+	id: OpenFileAction.ID,
 	mac: false
 };
 const openFolderNonMacOnly: WatermarkEntry = {
 	text: nls.localize('watermark.openFolder', "Open Folder"),
-	ids: [OpenFolderAction.ID],
+	id: OpenFolderAction.ID,
 	mac: false
 };
 const openFileOrFolderMacOnly: WatermarkEntry = {
 	text: nls.localize('watermark.openFileFolder', "Open File or Folder"),
-	ids: [OpenFileFolderAction.ID],
+	id: OpenFileFolderAction.ID,
 	mac: true
 };
 const openRecent: WatermarkEntry = {
 	text: nls.localize('watermark.openRecent', "Open Recent"),
-	ids: [OpenRecentAction.ID]
+	id: OpenRecentAction.ID
 };
 const newUntitledFile: WatermarkEntry = {
 	text: nls.localize('watermark.newUntitledFile', "New Untitled File"),
-	ids: [GlobalNewUntitledFileAction.ID]
+	id: GlobalNewUntitledFileAction.ID
 };
 const newUntitledFileMacOnly: WatermarkEntry = assign({ mac: true }, newUntitledFile);
 const toggleTerminal: WatermarkEntry = {
 	text: nls.localize({ key: 'watermark.toggleTerminal', comment: ['toggle is a verb here'] }, "Toggle Terminal"),
-	ids: [TERMINAL_COMMAND_ID.TOGGLE]
+	id: TERMINAL_COMMAND_ID.TOGGLE
 };
 
 const findInFiles: WatermarkEntry = {
 	text: nls.localize('watermark.findInFiles', "Find in Files"),
-	ids: [FindInFilesActionId]
+	id: FindInFilesActionId
 };
 const startDebugging: WatermarkEntry = {
 	text: nls.localize('watermark.startDebugging', "Start Debugging"),
-	ids: [StartAction.ID]
+	id: StartAction.ID
 };
 
 const noFolderEntries = [
@@ -98,7 +98,6 @@ const folderEntries = [
 	toggleTerminal
 ];
 
-const UNBOUND = nls.localize('watermark.unboundCommand', "unbound");
 const WORKBENCH_TIPS_ENABLED_KEY = 'workbench.tips.enabled';
 
 export class WatermarkContribution implements IWorkbenchContribution {
@@ -161,15 +160,9 @@ export class WatermarkContribution implements IWorkbenchContribution {
 				const dt = dom.append(dl, $('dt'));
 				dt.textContent = entry.text;
 				const dd = dom.append(dl, $('dd'));
-				dd.innerHTML = entry.ids
-					.map(id => {
-						let k = this.keybindingService.lookupKeybinding(id);
-						if (k) {
-							return `<span class="shortcuts">${escape(k.getLabel())}</span>`;
-						}
-						return `<span class="unbound">${escape(UNBOUND)}</span>`;
-					})
-					.join(' / ');
+				const keybinding = new KeybindingLabel(dd, OS, { renderUnboundKeybindings: true });
+				keybinding.set(this.keybindingService.lookupKeybinding(entry.id));
+				dd.innerHTML = keybinding.element.outerHTML;
 			});
 		};
 		update();