extension editor: improve keybindings

src/vs/base/browser/dom.ts

@@ -944,7 +944,7 @@ export function prepend<T extends Node>(parent: HTMLElement, child: T): T {
 const SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((.([\w\-]+))*)/;
 
 // Similar to builder, but much more lightweight
-export function $<T extends HTMLElement>(description: string, attrs?: { [key: string]: any; }, ...children: (HTMLElement | string)[]): T {
+export function $<T extends HTMLElement>(description: string, attrs?: { [key: string]: any; }, ...children: (Node | string)[]): T {
 	let match = SELECTOR_REGEX.exec(description);
 
 	if (!match) {
@@ -964,16 +964,34 @@ export function $<T extends HTMLElement>(description: string, attrs?: { [key: st
 		.forEach(name => result.setAttribute(name, attrs[name]));
 
 	children.forEach(child => {
-		if (child instanceof HTMLElement) {
+		if (child instanceof Node) {
 			result.appendChild(child);
 		} else {
-			result.appendChild(document.createTextNode(child));
+			result.appendChild(document.createTextNode(child as string));
 		}
 	});
 
 	return result as T;
 }
 
+export function join(nodes: Node[], separator: Node | string): Node[] {
+	const result: Node[] = [];
+
+	nodes.forEach((node, index) => {
+		if (index > 0) {
+			if (separator instanceof Node) {
+				result.push(separator.cloneNode());
+			} else {
+				result.push(document.createTextNode(separator));
+			}
+		}
+
+		result.push(node);
+	});
+
+	return result;
+}
+
 export function show(...elements: HTMLElement[]): void {
 	for (let element of elements) {
 		element.style.display = '';

src/vs/platform/extensionManagement/common/extensionManagement.ts

@@ -41,7 +41,7 @@ export interface IJSONValidation {
 	fileMatch: string;
 }
 
-export interface IKeyBindings {
+export interface IKeyBinding {
 	command: string;
 	key: string;
 	when?: string;
@@ -77,7 +77,7 @@ export interface IExtensionContributions {
 	debuggers?: IDebugger[];
 	grammars?: IGrammar[];
 	jsonValidation?: IJSONValidation[];
-	keybindings?: IKeyBindings[];
+	keybindings?: IKeyBinding[];
 	languages?: ILanguage[];
 	menus?: { [context: string]: IMenu[] };
 	snippets?: ISnippet[];

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

@@ -18,13 +18,13 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { IDisposable, empty, dispose, toDisposable } from 'vs/base/common/lifecycle';
 import { Builder } from 'vs/base/browser/builder';
 import { domEvent } from 'vs/base/browser/event';
-import { append, $, addClass, removeClass, finalHandler } from 'vs/base/browser/dom';
+import { append, $, addClass, removeClass, finalHandler, join } from 'vs/base/browser/dom';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { IViewlet } from 'vs/workbench/common/viewlet';
 import { IViewletService } from 'vs/workbench/services/viewlet/common/viewletService';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { IExtensionGalleryService, IExtensionManifest } from 'vs/platform/extensionManagement/common/extensionManagement';
+import { IExtensionGalleryService, IExtensionManifest, IKeyBinding } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { IThemeService } from 'vs/workbench/services/themes/common/themeService';
 import { ExtensionsInput } from './extensionsInput';
 import { IExtensionsWorkbenchService, IExtensionsViewlet, VIEWLET_ID, IExtension } from './extensions';
@@ -385,17 +385,16 @@ export class ExtensionEditor extends BaseEditor {
 
 		const rawKeybindings = manifest.contributes.keybindings || [];
 
-		rawKeybindings.forEach(userString => {
-			let command = allCommands[userString.command];
-			const keybinding = new Keybinding(Keybinding.fromUserSettingsLabel(userString.key));
-			const key = this.keybindingService.getLabelFor(keybinding);
+		rawKeybindings.forEach(rawKeybinding => {
+			const keyLabel = this.keybindingToLabel(rawKeybinding);
+			let command = allCommands[rawKeybinding.command];
 
 			if (!command) {
-				command = { id: userString.command, title: '', keybindings: [key], menus: [] };
+				command = { id: rawKeybinding.command, title: '', keybindings: [keyLabel], menus: [] };
 				allCommands[command.id] = command;
 				commands.push(command);
 			} else {
-				command.keybindings.push(key);
+				command.keybindings.push(keyLabel);
 			}
 		});
 
@@ -413,15 +412,28 @@ export class ExtensionEditor extends BaseEditor {
 					$('th', null, localize('menuContexts', "Menu Contexts"))
 				),
 				...commands.map(c => $('tr', null,
-					$('td', null, c.id),
+					$('td', null, $('code', null, c.id)),
 					$('td', null, c.title),
-					$('td', null, ...c.keybindings.map(keybinding => $('code', null, keybinding))),
+					$('td', null, ...join(c.keybindings.map(keybinding => $('code', null, keybinding)), ' ')),
 					$('td', null, ...c.menus.map(context => $('code', null, context)))
 				))
 			)
 		));
 	}
 
+	private keybindingToLabel(rawKeyBinding: IKeyBinding): string {
+		let key: string;
+
+		switch(process.platform) {
+			case 'win32': key = rawKeyBinding.win; break;
+			case 'linux': key = rawKeyBinding.linux; break;
+			case 'darwin': key = rawKeyBinding.mac; break;
+		}
+
+		const keyBinding = new Keybinding(Keybinding.fromUserSettingsLabel(key || rawKeyBinding.key));
+		return this.keybindingService.getLabelFor(keyBinding);
+	}
+
 	private loadContents(loadingTask: ()=>TPromise<any>): void {
 		this.contentDisposables = dispose(this.contentDisposables);
 

src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css

@@ -192,8 +192,8 @@
 
 .extension-editor > .body > .content table code {
 	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
-	font-size: 80%;
+	font-size: 90%;
 	background-color: rgba(128, 128, 128, 0.17);
 	border-radius: 4px;
 	padding: 1px 4px;
-}
+}
\ No newline at end of file