From 537b5bbc5af919365f188025443e6d970bb0435c Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Wed, 24 Aug 2016 11:16:41 +0200 Subject: [PATCH] extension editor: improve keybindings --- src/vs/base/browser/dom.ts | 24 ++++++++++++-- .../common/extensionManagement.ts | 4 +-- .../electron-browser/extensionEditor.ts | 32 +++++++++++++------ .../media/extensionEditor.css | 4 +-- 4 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts index c3abe4f4c9e..3276fbc1c93 100644 --- a/src/vs/base/browser/dom.ts +++ b/src/vs/base/browser/dom.ts @@ -944,7 +944,7 @@ export function prepend(parent: HTMLElement, child: T): T { const SELECTOR_REGEX = /([\w\-]+)?(#([\w\-]+))?((.([\w\-]+))*)/; // Similar to builder, but much more lightweight -export function $(description: string, attrs?: { [key: string]: any; }, ...children: (HTMLElement | string)[]): T { +export function $(description: string, attrs?: { [key: string]: any; }, ...children: (Node | string)[]): T { let match = SELECTOR_REGEX.exec(description); if (!match) { @@ -964,16 +964,34 @@ export function $(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 = ''; diff --git a/src/vs/platform/extensionManagement/common/extensionManagement.ts b/src/vs/platform/extensionManagement/common/extensionManagement.ts index f3c7ab99a24..57c8dfc78f4 100644 --- a/src/vs/platform/extensionManagement/common/extensionManagement.ts +++ b/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[]; diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts index 9e0ea3089ed..1aeab30b328 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts +++ b/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): void { this.contentDisposables = dispose(this.contentDisposables); diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css index 5e19c2138e8..5deb3149938 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css +++ b/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 -- GitLab