@codingame/monaco-vscode-api 4.0.0 → 4.1.0

package/vscode/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.js

@@ -0,0 +1,1237 @@
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import './media/keybindingsEditor.css.js';
+import { localizeWithPath } from '../../../../nls.js';
+import { Delayer } from '../../../../base/common/async.js';
+import { append, $ as $$1, getTotalWidth, getDomNodePagePosition, Dimension, addDisposableListener, finalHandler, EventType, EventHelper, clearNode } from '../../../../base/browser/dom.js';
+import { isIOS, OS } from '../../../../base/common/platform.js';
+import { DisposableStore, Disposable, toDisposable } from '../../../../base/common/lifecycle.js';
+import { ToggleActionViewItem } from '../../../../base/browser/ui/toggle/toggle.js';
+import { HighlightedLabel } from '../../../../base/browser/ui/highlightedlabel/highlightedLabel.js';
+import { KeybindingLabel } from '../../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
+import { Action, Separator } from '../../../../base/common/actions.js';
+import { ActionBar } from '../../../../base/browser/ui/actionbar/actionbar.js';
+import { EditorPane } from '../../../browser/parts/editor/editorPane.js';
+import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
+import { IClipboardService } from '../../../../platform/clipboard/common/clipboardService.js';
+import { KEYBINDING_ENTRY_TEMPLATE_ID } from '../../../services/preferences/browser/keybindingsEditorModel.js';
+import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+import { IKeybindingService } from '../../../../platform/keybinding/common/keybinding.js';
+import { DefineKeybindingWidget, KeybindingsSearchWidget } from './keybindingWidgets.js';
+import { CONTEXT_KEYBINDINGS_EDITOR, CONTEXT_KEYBINDINGS_SEARCH_FOCUS, CONTEXT_KEYBINDING_FOCUS, KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE, KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, KEYBINDINGS_EDITOR_COMMAND_DEFINE, KEYBINDINGS_EDITOR_COMMAND_ADD, KEYBINDINGS_EDITOR_COMMAND_DEFINE_WHEN, KEYBINDINGS_EDITOR_COMMAND_REMOVE, KEYBINDINGS_EDITOR_COMMAND_RESET, KEYBINDINGS_EDITOR_COMMAND_SHOW_SIMILAR, KEYBINDINGS_EDITOR_COMMAND_COPY, KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND, KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND_TITLE, CONTEXT_WHEN_FOCUS } from '../common/preferences.js';
+import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
+import { IKeybindingEditingService } from '../../../services/keybinding/common/keybindingEditing.js';
+import { registerThemingParticipant, IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import { RawContextKey, IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
+import { asCssVariable, registerColor } from '../../../../platform/theme/common/colorUtils.js';
+import { contrastBorder, foreground } from '../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../platform/theme/common/colors/chartsColors.js';
+import { editorBackground } from '../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../platform/theme/common/colors/inputColors.js';
+import { tableOddRowsBackgroundColor, listActiveSelectionForeground, listActiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionBackground, listFocusForeground, listFocusBackground, listHoverForeground, listHoverBackground } from '../../../../platform/theme/common/colors/listColors.js';
+import '../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../platform/theme/common/colors/minimapColors.js';
+import { badgeBackground, badgeForeground } from '../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../platform/theme/common/colors/searchColors.js';
+import { IEditorService } from '../../../services/editor/common/editorService.js';
+import { EditorExtensionsRegistry } from '../../../../editor/browser/editorExtensions.js';
+import { WorkbenchTable } from '../../../../platform/list/browser/listService.js';
+import { INotificationService } from '../../../../platform/notification/common/notification.js';
+import { IStorageService } from '../../../../platform/storage/common/storage.js';
+import { Emitter, Event } from '../../../../base/common/event.js';
+import { MenuRegistry, MenuId, isIMenuItem } from '../../../../platform/actions/common/actions.js';
+import { WORKBENCH_BACKGROUND } from '../../../common/theme.js';
+import { keybindingsRecordKeysIcon, keybindingsSortIcon, preferencesClearInputIcon, keybindingsEditIcon, keybindingsAddIcon } from './preferencesIcons.js';
+import { ToolBar } from '../../../../base/browser/ui/toolbar/toolbar.js';
+import { getInputBoxStyle, defaultToggleStyles, defaultKeybindingLabelStyles } from '../../../../platform/theme/browser/defaultStyles.js';
+import { IExtensionsWorkbenchService } from '../../extensions/common/extensions.js';
+import { StandardKeyboardEvent } from '../../../../base/browser/keyboardEvent.js';
+import { isString } from '../../../../base/common/types.js';
+import { SuggestEnabledInput } from '../../codeEditor/browser/suggestEnabledInput/suggestEnabledInput.js';
+import { settingsTextInputBorder } from '../common/settingsEditorColorRegistry.js';
+import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
+import { registerNavigableContainer } from '../../../browser/actions/widgetNavigationCommands.js';
+import { setupCustomHover } from '../../../../base/browser/ui/hover/updatableHoverWidget.js';
+import { getDefaultHoverDelegate } from '../../../../base/browser/ui/hover/hoverDelegateFactory.js';
+var KeybindingsEditor_1, ActionsColumnRenderer_1, SourceColumnRenderer_1, WhenColumnRenderer_1;
+const $ = $$1;
+let KeybindingsEditor = class KeybindingsEditor extends EditorPane {
+    static { KeybindingsEditor_1 = this; }
+    static { this.ID = 'workbench.editor.keybindings'; }
+    constructor(group, telemetryService, themeService, keybindingsService, contextMenuService, keybindingEditingService, contextKeyService, notificationService, clipboardService, instantiationService, editorService, storageService, configurationService) {
+        super(KeybindingsEditor_1.ID, group, telemetryService, themeService, storageService);
+        this.keybindingsService = keybindingsService;
+        this.contextMenuService = contextMenuService;
+        this.keybindingEditingService = keybindingEditingService;
+        this.contextKeyService = contextKeyService;
+        this.notificationService = notificationService;
+        this.clipboardService = clipboardService;
+        this.instantiationService = instantiationService;
+        this.editorService = editorService;
+        this.configurationService = configurationService;
+        this._onDefineWhenExpression = this._register(( new Emitter()));
+        this.onDefineWhenExpression = this._onDefineWhenExpression.event;
+        this._onRejectWhenExpression = this._register(( new Emitter()));
+        this.onRejectWhenExpression = this._onRejectWhenExpression.event;
+        this._onAcceptWhenExpression = this._register(( new Emitter()));
+        this.onAcceptWhenExpression = this._onAcceptWhenExpression.event;
+        this._onLayout = this._register(( new Emitter()));
+        this.onLayout = this._onLayout.event;
+        this.keybindingsEditorModel = null;
+        this.unAssignedKeybindingItemToRevealAndFocus = null;
+        this.tableEntries = [];
+        this.dimension = null;
+        this.latestEmptyFilters = [];
+        this.delayedFiltering = ( new Delayer(300));
+        this._register(keybindingsService.onDidUpdateKeybindings(() => this.render(!!this.keybindingFocusContextKey.get())));
+        this.keybindingsEditorContextKey = CONTEXT_KEYBINDINGS_EDITOR.bindTo(this.contextKeyService);
+        this.searchFocusContextKey = CONTEXT_KEYBINDINGS_SEARCH_FOCUS.bindTo(this.contextKeyService);
+        this.keybindingFocusContextKey = CONTEXT_KEYBINDING_FOCUS.bindTo(this.contextKeyService);
+        this.searchHistoryDelayer = ( new Delayer(500));
+        this.recordKeysAction = ( new Action(KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'recordKeysLabel',
+            "Record Keys"
+        )), ThemeIcon.asClassName(keybindingsRecordKeysIcon)));
+        this.recordKeysAction.checked = false;
+        this.sortByPrecedenceAction = ( new Action(KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE, ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'sortByPrecedeneLabel',
+            "Sort by Precedence (Highest first)"
+        )), ThemeIcon.asClassName(keybindingsSortIcon)));
+        this.sortByPrecedenceAction.checked = false;
+        this.overflowWidgetsDomNode = $('.keybindings-overflow-widgets-container.monaco-editor');
+    }
+    create(parent) {
+        super.create(parent);
+        this._register(registerNavigableContainer({
+            focusNotifiers: [this],
+            focusNextWidget: () => {
+                if (this.searchWidget.hasFocus()) {
+                    this.focusKeybindings();
+                }
+            },
+            focusPreviousWidget: () => {
+                if (!this.searchWidget.hasFocus()) {
+                    this.focusSearch();
+                }
+            }
+        }));
+    }
+    createEditor(parent) {
+        const keybindingsEditorElement = append(parent, $('div', { class: 'keybindings-editor' }));
+        this.createAriaLabelElement(keybindingsEditorElement);
+        this.createOverlayContainer(keybindingsEditorElement);
+        this.createHeader(keybindingsEditorElement);
+        this.createBody(keybindingsEditorElement);
+    }
+    setInput(input, options, context, token) {
+        this.keybindingsEditorContextKey.set(true);
+        return super.setInput(input, options, context, token)
+            .then(() => this.render(!!(options && options.preserveFocus)));
+    }
+    clearInput() {
+        super.clearInput();
+        this.keybindingsEditorContextKey.reset();
+        this.keybindingFocusContextKey.reset();
+    }
+    layout(dimension) {
+        this.dimension = dimension;
+        this.layoutSearchWidget(dimension);
+        this.overlayContainer.style.width = dimension.width + 'px';
+        this.overlayContainer.style.height = dimension.height + 'px';
+        this.defineKeybindingWidget.layout(this.dimension);
+        this.layoutKeybindingsTable();
+        this._onLayout.fire();
+    }
+    focus() {
+        super.focus();
+        const activeKeybindingEntry = this.activeKeybindingEntry;
+        if (activeKeybindingEntry) {
+            this.selectEntry(activeKeybindingEntry);
+        }
+        else if (!isIOS) {
+            this.searchWidget.focus();
+        }
+    }
+    get activeKeybindingEntry() {
+        const focusedElement = this.keybindingsTable.getFocusedElements()[0];
+        return focusedElement && focusedElement.templateId === KEYBINDING_ENTRY_TEMPLATE_ID ? focusedElement : null;
+    }
+    async defineKeybinding(keybindingEntry, add) {
+        this.selectEntry(keybindingEntry);
+        this.showOverlayContainer();
+        try {
+            const key = await this.defineKeybindingWidget.define();
+            if (key) {
+                await this.updateKeybinding(keybindingEntry, key, keybindingEntry.keybindingItem.when, add);
+            }
+        }
+        catch (error) {
+            this.onKeybindingEditingError(error);
+        }
+        finally {
+            this.hideOverlayContainer();
+            this.selectEntry(keybindingEntry);
+        }
+    }
+    defineWhenExpression(keybindingEntry) {
+        if (keybindingEntry.keybindingItem.keybinding) {
+            this.selectEntry(keybindingEntry);
+            this._onDefineWhenExpression.fire(keybindingEntry);
+        }
+    }
+    rejectWhenExpression(keybindingEntry) {
+        this._onRejectWhenExpression.fire(keybindingEntry);
+    }
+    acceptWhenExpression(keybindingEntry) {
+        this._onAcceptWhenExpression.fire(keybindingEntry);
+    }
+    async updateKeybinding(keybindingEntry, key, when, add) {
+        const currentKey = keybindingEntry.keybindingItem.keybinding ? keybindingEntry.keybindingItem.keybinding.getUserSettingsLabel() : '';
+        if (currentKey !== key || keybindingEntry.keybindingItem.when !== when) {
+            if (add) {
+                await this.keybindingEditingService.addKeybinding(keybindingEntry.keybindingItem.keybindingItem, key, when || undefined);
+            }
+            else {
+                await this.keybindingEditingService.editKeybinding(keybindingEntry.keybindingItem.keybindingItem, key, when || undefined);
+            }
+            if (!keybindingEntry.keybindingItem.keybinding) {
+                this.unAssignedKeybindingItemToRevealAndFocus = keybindingEntry;
+            }
+        }
+    }
+    async removeKeybinding(keybindingEntry) {
+        this.selectEntry(keybindingEntry);
+        if (keybindingEntry.keybindingItem.keybinding) {
+            try {
+                await this.keybindingEditingService.removeKeybinding(keybindingEntry.keybindingItem.keybindingItem);
+                this.focus();
+            }
+            catch (error) {
+                this.onKeybindingEditingError(error);
+                this.selectEntry(keybindingEntry);
+            }
+        }
+    }
+    async resetKeybinding(keybindingEntry) {
+        this.selectEntry(keybindingEntry);
+        try {
+            await this.keybindingEditingService.resetKeybinding(keybindingEntry.keybindingItem.keybindingItem);
+            if (!keybindingEntry.keybindingItem.keybinding) {
+                this.unAssignedKeybindingItemToRevealAndFocus = keybindingEntry;
+            }
+            this.selectEntry(keybindingEntry);
+        }
+        catch (error) {
+            this.onKeybindingEditingError(error);
+            this.selectEntry(keybindingEntry);
+        }
+    }
+    async copyKeybinding(keybinding) {
+        this.selectEntry(keybinding);
+        const userFriendlyKeybinding = {
+            key: keybinding.keybindingItem.keybinding ? keybinding.keybindingItem.keybinding.getUserSettingsLabel() || '' : '',
+            command: keybinding.keybindingItem.command
+        };
+        if (keybinding.keybindingItem.when) {
+            userFriendlyKeybinding.when = keybinding.keybindingItem.when;
+        }
+        await this.clipboardService.writeText(JSON.stringify(userFriendlyKeybinding, null, '  '));
+    }
+    async copyKeybindingCommand(keybinding) {
+        this.selectEntry(keybinding);
+        await this.clipboardService.writeText(keybinding.keybindingItem.command);
+    }
+    async copyKeybindingCommandTitle(keybinding) {
+        this.selectEntry(keybinding);
+        await this.clipboardService.writeText(keybinding.keybindingItem.commandLabel);
+    }
+    focusSearch() {
+        this.searchWidget.focus();
+    }
+    search(filter) {
+        this.focusSearch();
+        this.searchWidget.setValue(filter);
+        this.selectEntry(0);
+    }
+    clearSearchResults() {
+        this.searchWidget.clear();
+    }
+    showSimilarKeybindings(keybindingEntry) {
+        const value = `"${keybindingEntry.keybindingItem.keybinding.getAriaLabel()}"`;
+        if (value !== this.searchWidget.getValue()) {
+            this.searchWidget.setValue(value);
+        }
+    }
+    createAriaLabelElement(parent) {
+        this.ariaLabelElement = append(parent, $$1(''));
+        this.ariaLabelElement.setAttribute('id', 'keybindings-editor-aria-label-element');
+        this.ariaLabelElement.setAttribute('aria-live', 'assertive');
+    }
+    createOverlayContainer(parent) {
+        this.overlayContainer = append(parent, $('.overlay-container'));
+        this.overlayContainer.style.position = 'absolute';
+        this.overlayContainer.style.zIndex = '40';
+        this.defineKeybindingWidget = this._register(this.instantiationService.createInstance(DefineKeybindingWidget, this.overlayContainer));
+        this._register(this.defineKeybindingWidget.onDidChange(keybindingStr => this.defineKeybindingWidget.printExisting(this.keybindingsEditorModel.fetch(`"${keybindingStr}"`).length)));
+        this._register(this.defineKeybindingWidget.onShowExistingKeybidings(keybindingStr => this.searchWidget.setValue(`"${keybindingStr}"`)));
+        this.hideOverlayContainer();
+    }
+    showOverlayContainer() {
+        this.overlayContainer.style.display = 'block';
+    }
+    hideOverlayContainer() {
+        this.overlayContainer.style.display = 'none';
+    }
+    createHeader(parent) {
+        this.headerContainer = append(parent, $('.keybindings-header'));
+        const fullTextSearchPlaceholder = ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'SearchKeybindings.FullTextSearchPlaceholder',
+            "Type to search in keybindings"
+        ));
+        const keybindingsSearchPlaceholder = ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'SearchKeybindings.KeybindingsSearchPlaceholder',
+            "Recording Keys. Press Escape to exit"
+        ));
+        const clearInputAction = ( new Action(KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'clearInput',
+            "Clear Keybindings Search Input"
+        )), ThemeIcon.asClassName(preferencesClearInputIcon), false, async () => this.clearSearchResults()));
+        const searchContainer = append(this.headerContainer, $('.search-container'));
+        this.searchWidget = this._register(this.instantiationService.createInstance(KeybindingsSearchWidget, searchContainer, {
+            ariaLabel: fullTextSearchPlaceholder,
+            placeholder: fullTextSearchPlaceholder,
+            focusKey: this.searchFocusContextKey,
+            ariaLabelledBy: 'keybindings-editor-aria-label-element',
+            recordEnter: true,
+            quoteRecordedKeys: true,
+            history: this.getMemento(0 , 0 )['searchHistory'] || [],
+            inputBoxStyles: getInputBoxStyle({
+                inputBorder: settingsTextInputBorder
+            })
+        }));
+        this._register(this.searchWidget.onDidChange(searchValue => {
+            clearInputAction.enabled = !!searchValue;
+            this.delayedFiltering.trigger(() => this.filterKeybindings());
+            this.updateSearchOptions();
+        }));
+        this._register(this.searchWidget.onEscape(() => this.recordKeysAction.checked = false));
+        this.actionsContainer = append(searchContainer, $$1('.keybindings-search-actions-container'));
+        const recordingBadge = this.createRecordingBadge(this.actionsContainer);
+        this._register(this.sortByPrecedenceAction.onDidChange(e => {
+            if (e.checked !== undefined) {
+                this.renderKeybindingsEntries(false);
+            }
+            this.updateSearchOptions();
+        }));
+        this._register(this.recordKeysAction.onDidChange(e => {
+            if (e.checked !== undefined) {
+                recordingBadge.classList.toggle('disabled', !e.checked);
+                if (e.checked) {
+                    this.searchWidget.inputBox.setPlaceHolder(keybindingsSearchPlaceholder);
+                    this.searchWidget.inputBox.setAriaLabel(keybindingsSearchPlaceholder);
+                    this.searchWidget.startRecordingKeys();
+                    this.searchWidget.focus();
+                }
+                else {
+                    this.searchWidget.inputBox.setPlaceHolder(fullTextSearchPlaceholder);
+                    this.searchWidget.inputBox.setAriaLabel(fullTextSearchPlaceholder);
+                    this.searchWidget.stopRecordingKeys();
+                    this.searchWidget.focus();
+                }
+                this.updateSearchOptions();
+            }
+        }));
+        const actions = [this.recordKeysAction, this.sortByPrecedenceAction, clearInputAction];
+        const toolBar = this._register(( new ToolBar(this.actionsContainer, this.contextMenuService, {
+            actionViewItemProvider: (action, options) => {
+                if (action.id === this.sortByPrecedenceAction.id || action.id === this.recordKeysAction.id) {
+                    return ( new ToggleActionViewItem(
+                        null,
+                        action,
+                        { ...options, keybinding: this.keybindingsService.lookupKeybinding(action.id)?.getLabel(), toggleStyles: defaultToggleStyles }
+                    ));
+                }
+                return undefined;
+            },
+            getKeyBinding: action => this.keybindingsService.lookupKeybinding(action.id)
+        })));
+        toolBar.setActions(actions);
+        this._register(this.keybindingsService.onDidUpdateKeybindings(() => toolBar.setActions(actions)));
+    }
+    updateSearchOptions() {
+        const keybindingsEditorInput = this.input;
+        if (keybindingsEditorInput) {
+            keybindingsEditorInput.searchOptions = {
+                searchValue: this.searchWidget.getValue(),
+                recordKeybindings: !!this.recordKeysAction.checked,
+                sortByPrecedence: !!this.sortByPrecedenceAction.checked
+            };
+        }
+    }
+    createRecordingBadge(container) {
+        const recordingBadge = append(container, $$1('.recording-badge.monaco-count-badge.long.disabled'));
+        recordingBadge.textContent = ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'recording',
+            "Recording Keys"
+        ));
+        recordingBadge.style.backgroundColor = asCssVariable(badgeBackground);
+        recordingBadge.style.color = asCssVariable(badgeForeground);
+        recordingBadge.style.border = `1px solid ${asCssVariable(contrastBorder)}`;
+        return recordingBadge;
+    }
+    layoutSearchWidget(dimension) {
+        this.searchWidget.layout(dimension);
+        this.headerContainer.classList.toggle('small', dimension.width < 400);
+        this.searchWidget.inputBox.inputElement.style.paddingRight = `${getTotalWidth(this.actionsContainer) + 12}px`;
+    }
+    createBody(parent) {
+        const bodyContainer = append(parent, $('.keybindings-body'));
+        this.createTable(bodyContainer);
+    }
+    createTable(parent) {
+        this.keybindingsTableContainer = append(parent, $('.keybindings-table-container'));
+        this.keybindingsTable = this._register(this.instantiationService.createInstance(WorkbenchTable, 'KeybindingsEditor', this.keybindingsTableContainer, ( new Delegate()), [
+            {
+                label: '',
+                tooltip: '',
+                weight: 0,
+                minimumWidth: 40,
+                maximumWidth: 40,
+                templateId: ActionsColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localizeWithPath(
+                    'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                    'command',
+                    "Command"
+                )),
+                tooltip: '',
+                weight: 0.3,
+                templateId: CommandColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localizeWithPath(
+                    'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                    'keybinding',
+                    "Keybinding"
+                )),
+                tooltip: '',
+                weight: 0.2,
+                templateId: KeybindingColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localizeWithPath(
+                    'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                    'when',
+                    "When"
+                )),
+                tooltip: '',
+                weight: 0.35,
+                templateId: WhenColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localizeWithPath(
+                    'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                    'source',
+                    "Source"
+                )),
+                tooltip: '',
+                weight: 0.15,
+                templateId: SourceColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+        ], [
+            this.instantiationService.createInstance(ActionsColumnRenderer, this),
+            this.instantiationService.createInstance(CommandColumnRenderer),
+            this.instantiationService.createInstance(KeybindingColumnRenderer),
+            this.instantiationService.createInstance(WhenColumnRenderer, this),
+            this.instantiationService.createInstance(SourceColumnRenderer),
+        ], {
+            identityProvider: { getId: (e) => e.id },
+            horizontalScrolling: false,
+            accessibilityProvider: ( new AccessibilityProvider(this.configurationService)),
+            keyboardNavigationLabelProvider: { getKeyboardNavigationLabel: (e) => e.keybindingItem.commandLabel || e.keybindingItem.command },
+            overrideStyles: {
+                listBackground: editorBackground
+            },
+            multipleSelectionSupport: false,
+            setRowLineHeight: false,
+            openOnSingleClick: false,
+            transformOptimization: false
+        }));
+        this._register(this.keybindingsTable.onContextMenu(e => this.onContextMenu(e)));
+        this._register(this.keybindingsTable.onDidChangeFocus(e => this.onFocusChange()));
+        this._register(this.keybindingsTable.onDidFocus(() => {
+            this.keybindingsTable.getHTMLElement().classList.add('focused');
+            this.onFocusChange();
+        }));
+        this._register(this.keybindingsTable.onDidBlur(() => {
+            this.keybindingsTable.getHTMLElement().classList.remove('focused');
+            this.keybindingFocusContextKey.reset();
+        }));
+        this._register(this.keybindingsTable.onDidOpen((e) => {
+            if (e.browserEvent?.defaultPrevented) {
+                return;
+            }
+            const activeKeybindingEntry = this.activeKeybindingEntry;
+            if (activeKeybindingEntry) {
+                this.defineKeybinding(activeKeybindingEntry, false);
+            }
+        }));
+        append(this.keybindingsTableContainer, this.overflowWidgetsDomNode);
+    }
+    async render(preserveFocus) {
+        if (this.input) {
+            const input = this.input;
+            this.keybindingsEditorModel = await input.resolve();
+            await this.keybindingsEditorModel.resolve(this.getActionsLabels());
+            this.renderKeybindingsEntries(false, preserveFocus);
+            if (input.searchOptions) {
+                this.recordKeysAction.checked = input.searchOptions.recordKeybindings;
+                this.sortByPrecedenceAction.checked = input.searchOptions.sortByPrecedence;
+                this.searchWidget.setValue(input.searchOptions.searchValue);
+            }
+            else {
+                this.updateSearchOptions();
+            }
+        }
+    }
+    getActionsLabels() {
+        const actionsLabels = ( new Map());
+        for (const editorAction of EditorExtensionsRegistry.getEditorActions()) {
+            actionsLabels.set(editorAction.id, editorAction.label);
+        }
+        for (const menuItem of MenuRegistry.getMenuItems(MenuId.CommandPalette)) {
+            if (isIMenuItem(menuItem)) {
+                const title = typeof menuItem.command.title === 'string' ? menuItem.command.title : menuItem.command.title.value;
+                const category = menuItem.command.category ? typeof menuItem.command.category === 'string' ? menuItem.command.category : menuItem.command.category.value : undefined;
+                actionsLabels.set(menuItem.command.id, category ? `${category}: ${title}` : title);
+            }
+        }
+        return actionsLabels;
+    }
+    filterKeybindings() {
+        this.renderKeybindingsEntries(this.searchWidget.hasFocus());
+        this.searchHistoryDelayer.trigger(() => {
+            this.searchWidget.inputBox.addToHistory();
+            this.getMemento(0 , 0 )['searchHistory'] = this.searchWidget.inputBox.getHistory();
+            this.saveState();
+        });
+    }
+    clearKeyboardShortcutSearchHistory() {
+        this.searchWidget.inputBox.clearHistory();
+        this.getMemento(0 , 0 )['searchHistory'] = this.searchWidget.inputBox.getHistory();
+        this.saveState();
+    }
+    renderKeybindingsEntries(reset, preserveFocus) {
+        if (this.keybindingsEditorModel) {
+            const filter = this.searchWidget.getValue();
+            const keybindingsEntries = this.keybindingsEditorModel.fetch(filter, this.sortByPrecedenceAction.checked);
+            this.ariaLabelElement.setAttribute('aria-label', this.getAriaLabel(keybindingsEntries));
+            if (keybindingsEntries.length === 0) {
+                this.latestEmptyFilters.push(filter);
+            }
+            const currentSelectedIndex = this.keybindingsTable.getSelection()[0];
+            this.tableEntries = keybindingsEntries;
+            this.keybindingsTable.splice(0, this.keybindingsTable.length, this.tableEntries);
+            this.layoutKeybindingsTable();
+            if (reset) {
+                this.keybindingsTable.setSelection([]);
+                this.keybindingsTable.setFocus([]);
+            }
+            else {
+                if (this.unAssignedKeybindingItemToRevealAndFocus) {
+                    const index = this.getNewIndexOfUnassignedKeybinding(this.unAssignedKeybindingItemToRevealAndFocus);
+                    if (index !== -1) {
+                        this.keybindingsTable.reveal(index, 0.2);
+                        this.selectEntry(index);
+                    }
+                    this.unAssignedKeybindingItemToRevealAndFocus = null;
+                }
+                else if (currentSelectedIndex !== -1 && currentSelectedIndex < this.tableEntries.length) {
+                    this.selectEntry(currentSelectedIndex, preserveFocus);
+                }
+                else if (this.editorService.activeEditorPane === this && !preserveFocus) {
+                    this.focus();
+                }
+            }
+        }
+    }
+    getAriaLabel(keybindingsEntries) {
+        if (this.sortByPrecedenceAction.checked) {
+            return ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'show sorted keybindings',
+                "Showing {0} Keybindings in precedence order",
+                keybindingsEntries.length
+            ));
+        }
+        else {
+            return ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'show keybindings',
+                "Showing {0} Keybindings in alphabetical order",
+                keybindingsEntries.length
+            ));
+        }
+    }
+    layoutKeybindingsTable() {
+        if (!this.dimension) {
+            return;
+        }
+        const tableHeight = this.dimension.height - ((getDomNodePagePosition(this.headerContainer).height + 12) );
+        this.keybindingsTableContainer.style.height = `${tableHeight}px`;
+        this.keybindingsTable.layout(tableHeight);
+    }
+    getIndexOf(listEntry) {
+        const index = this.tableEntries.indexOf(listEntry);
+        if (index === -1) {
+            for (let i = 0; i < this.tableEntries.length; i++) {
+                if (this.tableEntries[i].id === listEntry.id) {
+                    return i;
+                }
+            }
+        }
+        return index;
+    }
+    getNewIndexOfUnassignedKeybinding(unassignedKeybinding) {
+        for (let index = 0; index < this.tableEntries.length; index++) {
+            const entry = this.tableEntries[index];
+            if (entry.templateId === KEYBINDING_ENTRY_TEMPLATE_ID) {
+                const keybindingItemEntry = entry;
+                if (keybindingItemEntry.keybindingItem.command === unassignedKeybinding.keybindingItem.command) {
+                    return index;
+                }
+            }
+        }
+        return -1;
+    }
+    selectEntry(keybindingItemEntry, focus = true) {
+        const index = typeof keybindingItemEntry === 'number' ? keybindingItemEntry : this.getIndexOf(keybindingItemEntry);
+        if (index !== -1 && index < this.keybindingsTable.length) {
+            if (focus) {
+                this.keybindingsTable.domFocus();
+                this.keybindingsTable.setFocus([index]);
+            }
+            this.keybindingsTable.setSelection([index]);
+        }
+    }
+    focusKeybindings() {
+        this.keybindingsTable.domFocus();
+        const currentFocusIndices = this.keybindingsTable.getFocus();
+        this.keybindingsTable.setFocus([currentFocusIndices.length ? currentFocusIndices[0] : 0]);
+    }
+    selectKeybinding(keybindingItemEntry) {
+        this.selectEntry(keybindingItemEntry);
+    }
+    recordSearchKeys() {
+        this.recordKeysAction.checked = true;
+    }
+    toggleSortByPrecedence() {
+        this.sortByPrecedenceAction.checked = !this.sortByPrecedenceAction.checked;
+    }
+    onContextMenu(e) {
+        if (!e.element) {
+            return;
+        }
+        if (e.element.templateId === KEYBINDING_ENTRY_TEMPLATE_ID) {
+            const keybindingItemEntry = e.element;
+            this.selectEntry(keybindingItemEntry);
+            this.contextMenuService.showContextMenu({
+                getAnchor: () => e.anchor,
+                getActions: () => [
+                    this.createCopyAction(keybindingItemEntry),
+                    this.createCopyCommandAction(keybindingItemEntry),
+                    this.createCopyCommandTitleAction(keybindingItemEntry),
+                    ( new Separator()),
+                    ...(keybindingItemEntry.keybindingItem.keybinding
+                        ? [this.createDefineKeybindingAction(keybindingItemEntry), this.createAddKeybindingAction(keybindingItemEntry)]
+                        : [this.createDefineKeybindingAction(keybindingItemEntry)]),
+                    ( new Separator()),
+                    this.createRemoveAction(keybindingItemEntry),
+                    this.createResetAction(keybindingItemEntry),
+                    ( new Separator()),
+                    this.createDefineWhenExpressionAction(keybindingItemEntry),
+                    ( new Separator()),
+                    this.createShowConflictsAction(keybindingItemEntry)
+                ]
+            });
+        }
+    }
+    onFocusChange() {
+        this.keybindingFocusContextKey.reset();
+        const element = this.keybindingsTable.getFocusedElements()[0];
+        if (!element) {
+            return;
+        }
+        if (element.templateId === KEYBINDING_ENTRY_TEMPLATE_ID) {
+            this.keybindingFocusContextKey.set(true);
+        }
+    }
+    createDefineKeybindingAction(keybindingItemEntry) {
+        return {
+            label: keybindingItemEntry.keybindingItem.keybinding ? ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'changeLabel',
+                "Change Keybinding..."
+            )) : ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'addLabel',
+                "Add Keybinding..."
+            )),
+            enabled: true,
+            id: KEYBINDINGS_EDITOR_COMMAND_DEFINE,
+            run: () => this.defineKeybinding(keybindingItemEntry, false)
+        };
+    }
+    createAddKeybindingAction(keybindingItemEntry) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'addLabel',
+                "Add Keybinding..."
+            )),
+            enabled: true,
+            id: KEYBINDINGS_EDITOR_COMMAND_ADD,
+            run: () => this.defineKeybinding(keybindingItemEntry, true)
+        };
+    }
+    createDefineWhenExpressionAction(keybindingItemEntry) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'editWhen',
+                "Change When Expression"
+            )),
+            enabled: !!keybindingItemEntry.keybindingItem.keybinding,
+            id: KEYBINDINGS_EDITOR_COMMAND_DEFINE_WHEN,
+            run: () => this.defineWhenExpression(keybindingItemEntry)
+        };
+    }
+    createRemoveAction(keybindingItem) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'removeLabel',
+                "Remove Keybinding"
+            )),
+            enabled: !!keybindingItem.keybindingItem.keybinding,
+            id: KEYBINDINGS_EDITOR_COMMAND_REMOVE,
+            run: () => this.removeKeybinding(keybindingItem)
+        };
+    }
+    createResetAction(keybindingItem) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'resetLabel',
+                "Reset Keybinding"
+            )),
+            enabled: !keybindingItem.keybindingItem.keybindingItem.isDefault,
+            id: KEYBINDINGS_EDITOR_COMMAND_RESET,
+            run: () => this.resetKeybinding(keybindingItem)
+        };
+    }
+    createShowConflictsAction(keybindingItem) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'showSameKeybindings',
+                "Show Same Keybindings"
+            )),
+            enabled: !!keybindingItem.keybindingItem.keybinding,
+            id: KEYBINDINGS_EDITOR_COMMAND_SHOW_SIMILAR,
+            run: () => this.showSimilarKeybindings(keybindingItem)
+        };
+    }
+    createCopyAction(keybindingItem) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'copyLabel',
+                "Copy"
+            )),
+            enabled: true,
+            id: KEYBINDINGS_EDITOR_COMMAND_COPY,
+            run: () => this.copyKeybinding(keybindingItem)
+        };
+    }
+    createCopyCommandAction(keybinding) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'copyCommandLabel',
+                "Copy Command ID"
+            )),
+            enabled: true,
+            id: KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND,
+            run: () => this.copyKeybindingCommand(keybinding)
+        };
+    }
+    createCopyCommandTitleAction(keybinding) {
+        return {
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'copyCommandTitleLabel',
+                "Copy Command Title"
+            )),
+            enabled: !!keybinding.keybindingItem.commandLabel,
+            id: KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND_TITLE,
+            run: () => this.copyKeybindingCommandTitle(keybinding)
+        };
+    }
+    onKeybindingEditingError(error) {
+        this.notificationService.error(typeof error === 'string' ? error : ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'error',
+            "Error '{0}' while editing the keybinding. Please open 'keybindings.json' file and check for errors.",
+            `${error}`
+        )));
+    }
+};
+KeybindingsEditor = KeybindingsEditor_1 = ( __decorate([
+    ( __param(1, ITelemetryService)),
+    ( __param(2, IThemeService)),
+    ( __param(3, IKeybindingService)),
+    ( __param(4, IContextMenuService)),
+    ( __param(5, IKeybindingEditingService)),
+    ( __param(6, IContextKeyService)),
+    ( __param(7, INotificationService)),
+    ( __param(8, IClipboardService)),
+    ( __param(9, IInstantiationService)),
+    ( __param(10, IEditorService)),
+    ( __param(11, IStorageService)),
+    ( __param(12, IConfigurationService))
+], KeybindingsEditor));
+class Delegate {
+    constructor() {
+        this.headerRowHeight = 30;
+    }
+    getHeight(element) {
+        if (element.templateId === KEYBINDING_ENTRY_TEMPLATE_ID) {
+            const commandIdMatched = element.keybindingItem.commandLabel && element.commandIdMatches;
+            const commandDefaultLabelMatched = !!element.commandDefaultLabelMatches;
+            const extensionIdMatched = !!element.extensionIdMatches;
+            if (commandIdMatched && commandDefaultLabelMatched) {
+                return 60;
+            }
+            if (extensionIdMatched || commandIdMatched || commandDefaultLabelMatched) {
+                return 40;
+            }
+        }
+        return 24;
+    }
+}
+let ActionsColumnRenderer = class ActionsColumnRenderer {
+    static { ActionsColumnRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'actions'; }
+    constructor(keybindingsEditor, keybindingsService) {
+        this.keybindingsEditor = keybindingsEditor;
+        this.keybindingsService = keybindingsService;
+        this.templateId = ActionsColumnRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const element = append(container, $('.actions'));
+        const actionBar = ( new ActionBar(element));
+        return { actionBar };
+    }
+    renderElement(keybindingItemEntry, index, templateData, height) {
+        templateData.actionBar.clear();
+        const actions = [];
+        if (keybindingItemEntry.keybindingItem.keybinding) {
+            actions.push(this.createEditAction(keybindingItemEntry));
+        }
+        else {
+            actions.push(this.createAddAction(keybindingItemEntry));
+        }
+        templateData.actionBar.push(actions, { icon: true });
+    }
+    createEditAction(keybindingItemEntry) {
+        const keybinding = this.keybindingsService.lookupKeybinding(KEYBINDINGS_EDITOR_COMMAND_DEFINE);
+        return {
+            class: ThemeIcon.asClassName(keybindingsEditIcon),
+            enabled: true,
+            id: 'editKeybinding',
+            tooltip: keybinding ? ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'editKeybindingLabelWithKey',
+                "Change Keybinding {0}",
+                `(${keybinding.getLabel()})`
+            )) : ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'editKeybindingLabel',
+                "Change Keybinding"
+            )),
+            run: () => this.keybindingsEditor.defineKeybinding(keybindingItemEntry, false)
+        };
+    }
+    createAddAction(keybindingItemEntry) {
+        const keybinding = this.keybindingsService.lookupKeybinding(KEYBINDINGS_EDITOR_COMMAND_DEFINE);
+        return {
+            class: ThemeIcon.asClassName(keybindingsAddIcon),
+            enabled: true,
+            id: 'addKeybinding',
+            tooltip: keybinding ? ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'addKeybindingLabelWithKey',
+                "Add Keybinding {0}",
+                `(${keybinding.getLabel()})`
+            )) : ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'addKeybindingLabel',
+                "Add Keybinding"
+            )),
+            run: () => this.keybindingsEditor.defineKeybinding(keybindingItemEntry, false)
+        };
+    }
+    disposeTemplate(templateData) {
+        templateData.actionBar.dispose();
+    }
+};
+ActionsColumnRenderer = ActionsColumnRenderer_1 = ( __decorate([
+    ( __param(1, IKeybindingService))
+], ActionsColumnRenderer));
+class CommandColumnRenderer {
+    constructor() {
+        this.templateId = CommandColumnRenderer.TEMPLATE_ID;
+    }
+    static { this.TEMPLATE_ID = 'commands'; }
+    renderTemplate(container) {
+        const commandColumn = append(container, $('.command'));
+        const commandColumnHover = setupCustomHover(getDefaultHoverDelegate('mouse'), commandColumn, '');
+        const commandLabelContainer = append(commandColumn, $('.command-label'));
+        const commandLabel = ( new HighlightedLabel(commandLabelContainer));
+        const commandDefaultLabelContainer = append(commandColumn, $('.command-default-label'));
+        const commandDefaultLabel = ( new HighlightedLabel(commandDefaultLabelContainer));
+        const commandIdLabelContainer = append(commandColumn, $('.command-id.code'));
+        const commandIdLabel = ( new HighlightedLabel(commandIdLabelContainer));
+        return { commandColumn, commandColumnHover, commandLabelContainer, commandLabel, commandDefaultLabelContainer, commandDefaultLabel, commandIdLabelContainer, commandIdLabel };
+    }
+    renderElement(keybindingItemEntry, index, templateData, height) {
+        const keybindingItem = keybindingItemEntry.keybindingItem;
+        const commandIdMatched = !!(keybindingItem.commandLabel && keybindingItemEntry.commandIdMatches);
+        const commandDefaultLabelMatched = !!keybindingItemEntry.commandDefaultLabelMatches;
+        templateData.commandColumn.classList.toggle('vertical-align-column', commandIdMatched || commandDefaultLabelMatched);
+        const title = keybindingItem.commandLabel ? ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'title',
+            "{0} ({1})",
+            keybindingItem.commandLabel,
+            keybindingItem.command
+        )) : keybindingItem.command;
+        templateData.commandColumn.setAttribute('aria-label', title);
+        templateData.commandColumnHover.update(title);
+        if (keybindingItem.commandLabel) {
+            templateData.commandLabelContainer.classList.remove('hide');
+            templateData.commandLabel.set(keybindingItem.commandLabel, keybindingItemEntry.commandLabelMatches);
+        }
+        else {
+            templateData.commandLabelContainer.classList.add('hide');
+            templateData.commandLabel.set(undefined);
+        }
+        if (keybindingItemEntry.commandDefaultLabelMatches) {
+            templateData.commandDefaultLabelContainer.classList.remove('hide');
+            templateData.commandDefaultLabel.set(keybindingItem.commandDefaultLabel, keybindingItemEntry.commandDefaultLabelMatches);
+        }
+        else {
+            templateData.commandDefaultLabelContainer.classList.add('hide');
+            templateData.commandDefaultLabel.set(undefined);
+        }
+        if (keybindingItemEntry.commandIdMatches || !keybindingItem.commandLabel) {
+            templateData.commandIdLabelContainer.classList.remove('hide');
+            templateData.commandIdLabel.set(keybindingItem.command, keybindingItemEntry.commandIdMatches);
+        }
+        else {
+            templateData.commandIdLabelContainer.classList.add('hide');
+            templateData.commandIdLabel.set(undefined);
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.commandColumnHover.dispose();
+        templateData.commandDefaultLabel.dispose();
+        templateData.commandIdLabel.dispose();
+        templateData.commandLabel.dispose();
+    }
+}
+class KeybindingColumnRenderer {
+    static { this.TEMPLATE_ID = 'keybindings'; }
+    constructor() {
+        this.templateId = KeybindingColumnRenderer.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const element = append(container, $('.keybinding'));
+        const keybindingLabel = ( new KeybindingLabel(
+            append(element, $('div.keybinding-label')),
+            OS,
+            defaultKeybindingLabelStyles
+        ));
+        return { keybindingLabel };
+    }
+    renderElement(keybindingItemEntry, index, templateData, height) {
+        if (keybindingItemEntry.keybindingItem.keybinding) {
+            templateData.keybindingLabel.set(keybindingItemEntry.keybindingItem.keybinding, keybindingItemEntry.keybindingMatches);
+        }
+        else {
+            templateData.keybindingLabel.set(undefined, undefined);
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.keybindingLabel.dispose();
+    }
+}
+function onClick(element, callback) {
+    const disposables = ( new DisposableStore());
+    disposables.add(addDisposableListener(element, EventType.CLICK, finalHandler(callback)));
+    disposables.add(addDisposableListener(element, EventType.KEY_UP, e => {
+        const keyboardEvent = ( new StandardKeyboardEvent(e));
+        if (keyboardEvent.equals(10 ) || keyboardEvent.equals(3 )) {
+            e.preventDefault();
+            e.stopPropagation();
+            callback();
+        }
+    }));
+    return disposables;
+}
+let SourceColumnRenderer = class SourceColumnRenderer {
+    static { SourceColumnRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'source'; }
+    constructor(extensionsWorkbenchService) {
+        this.extensionsWorkbenchService = extensionsWorkbenchService;
+        this.templateId = SourceColumnRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const sourceColumn = append(container, $('.source'));
+        const sourceColumnHover = setupCustomHover(getDefaultHoverDelegate('mouse'), sourceColumn, '');
+        const sourceLabel = ( new HighlightedLabel(append(sourceColumn, $('.source-label'))));
+        const extensionContainer = append(sourceColumn, $('.extension-container'));
+        const extensionLabel = append(extensionContainer, $('a.extension-label', { tabindex: 0 }));
+        const extensionId = ( new HighlightedLabel(append(extensionContainer, $('.extension-id-container.code'))));
+        return { sourceColumn, sourceColumnHover, sourceLabel, extensionLabel, extensionContainer, extensionId, disposables: ( new DisposableStore()) };
+    }
+    renderElement(keybindingItemEntry, index, templateData, height) {
+        if (isString(keybindingItemEntry.keybindingItem.source)) {
+            templateData.extensionContainer.classList.add('hide');
+            templateData.sourceLabel.element.classList.remove('hide');
+            templateData.sourceColumnHover.update('');
+            templateData.sourceLabel.set(keybindingItemEntry.keybindingItem.source || '-', keybindingItemEntry.sourceMatches);
+        }
+        else {
+            templateData.extensionContainer.classList.remove('hide');
+            templateData.sourceLabel.element.classList.add('hide');
+            const extension = keybindingItemEntry.keybindingItem.source;
+            const extensionLabel = extension.displayName ?? extension.identifier.value;
+            templateData.sourceColumnHover.update(( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'extension label',
+                "Extension ({0})",
+                extensionLabel
+            )));
+            templateData.extensionLabel.textContent = extensionLabel;
+            templateData.disposables.add(onClick(templateData.extensionLabel, () => {
+                this.extensionsWorkbenchService.open(extension.identifier.value);
+            }));
+            if (keybindingItemEntry.extensionIdMatches) {
+                templateData.extensionId.element.classList.remove('hide');
+                templateData.extensionId.set(extension.identifier.value, keybindingItemEntry.extensionIdMatches);
+            }
+            else {
+                templateData.extensionId.element.classList.add('hide');
+                templateData.extensionId.set(undefined);
+            }
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.sourceColumnHover.dispose();
+        templateData.disposables.dispose();
+        templateData.sourceLabel.dispose();
+        templateData.extensionId.dispose();
+    }
+};
+SourceColumnRenderer = SourceColumnRenderer_1 = ( __decorate([
+    ( __param(0, IExtensionsWorkbenchService))
+], SourceColumnRenderer));
+let WhenInputWidget = class WhenInputWidget extends Disposable {
+    constructor(parent, keybindingsEditor, instantiationService, contextKeyService) {
+        super();
+        this._onDidAccept = this._register(( new Emitter()));
+        this.onDidAccept = this._onDidAccept.event;
+        this._onDidReject = this._register(( new Emitter()));
+        this.onDidReject = this._onDidReject.event;
+        const focusContextKey = CONTEXT_WHEN_FOCUS.bindTo(contextKeyService);
+        this.input = this._register(instantiationService.createInstance(SuggestEnabledInput, 'keyboardshortcutseditor#wheninput', parent, {
+            provideResults: () => {
+                const result = [];
+                for (const contextKey of RawContextKey.all()) {
+                    result.push({ label: contextKey.key, documentation: contextKey.description, detail: contextKey.type, kind: 14  });
+                }
+                return result;
+            },
+            triggerCharacters: ['!', ' '],
+            wordDefinition: /[a-zA-Z.]+/,
+            alwaysShowSuggestions: true,
+        }, '', `keyboardshortcutseditor#wheninput`, { focusContextKey, overflowWidgetsDomNode: keybindingsEditor.overflowWidgetsDomNode }));
+        this._register((addDisposableListener(this.input.element, EventType.DBLCLICK, e => EventHelper.stop(e))));
+        this._register(toDisposable(() => focusContextKey.reset()));
+        this._register(keybindingsEditor.onAcceptWhenExpression(() => this._onDidAccept.fire(this.input.getValue())));
+        this._register(Event.any(keybindingsEditor.onRejectWhenExpression, this.input.onDidBlur)(() => this._onDidReject.fire()));
+    }
+    layout(dimension) {
+        this.input.layout(dimension);
+    }
+    show(value) {
+        this.input.setValue(value);
+        this.input.focus(true);
+    }
+};
+WhenInputWidget = ( __decorate([
+    ( __param(2, IInstantiationService)),
+    ( __param(3, IContextKeyService))
+], WhenInputWidget));
+let WhenColumnRenderer = class WhenColumnRenderer {
+    static { WhenColumnRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'when'; }
+    constructor(keybindingsEditor, instantiationService) {
+        this.keybindingsEditor = keybindingsEditor;
+        this.instantiationService = instantiationService;
+        this.templateId = WhenColumnRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const element = append(container, $('.when'));
+        const whenLabelContainer = append(element, $('div.when-label'));
+        const whenLabel = ( new HighlightedLabel(whenLabelContainer));
+        const whenInputContainer = append(element, $('div.when-input-container'));
+        return {
+            element,
+            whenLabelContainer,
+            whenLabel,
+            whenInputContainer,
+            disposables: ( new DisposableStore()),
+        };
+    }
+    renderElement(keybindingItemEntry, index, templateData, height) {
+        templateData.disposables.clear();
+        const whenInputDisposables = templateData.disposables.add(( new DisposableStore()));
+        templateData.disposables.add(this.keybindingsEditor.onDefineWhenExpression(e => {
+            if (keybindingItemEntry === e) {
+                templateData.element.classList.add('input-mode');
+                const inputWidget = whenInputDisposables.add(this.instantiationService.createInstance(WhenInputWidget, templateData.whenInputContainer, this.keybindingsEditor));
+                inputWidget.layout(new Dimension(templateData.element.parentElement.clientWidth, 18));
+                inputWidget.show(keybindingItemEntry.keybindingItem.when || '');
+                const hideInputWidget = () => {
+                    whenInputDisposables.clear();
+                    templateData.element.classList.remove('input-mode');
+                    templateData.element.parentElement.style.paddingLeft = '10px';
+                    clearNode(templateData.whenInputContainer);
+                };
+                whenInputDisposables.add(inputWidget.onDidAccept(value => {
+                    hideInputWidget();
+                    this.keybindingsEditor.updateKeybinding(keybindingItemEntry, keybindingItemEntry.keybindingItem.keybinding ? keybindingItemEntry.keybindingItem.keybinding.getUserSettingsLabel() || '' : '', value);
+                    this.keybindingsEditor.selectKeybinding(keybindingItemEntry);
+                }));
+                whenInputDisposables.add(inputWidget.onDidReject(() => {
+                    hideInputWidget();
+                    this.keybindingsEditor.selectKeybinding(keybindingItemEntry);
+                }));
+                templateData.element.parentElement.style.paddingLeft = '0px';
+            }
+        }));
+        templateData.whenLabelContainer.classList.toggle('code', !!keybindingItemEntry.keybindingItem.when);
+        templateData.whenLabelContainer.classList.toggle('empty', !keybindingItemEntry.keybindingItem.when);
+        if (keybindingItemEntry.keybindingItem.when) {
+            templateData.whenLabel.set(keybindingItemEntry.keybindingItem.when, keybindingItemEntry.whenMatches, keybindingItemEntry.keybindingItem.when);
+            templateData.disposables.add(setupCustomHover(getDefaultHoverDelegate('mouse'), templateData.element, keybindingItemEntry.keybindingItem.when));
+        }
+        else {
+            templateData.whenLabel.set('-');
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.disposables.dispose();
+        templateData.whenLabel.dispose();
+    }
+};
+WhenColumnRenderer = WhenColumnRenderer_1 = ( __decorate([
+    ( __param(1, IInstantiationService))
+], WhenColumnRenderer));
+class AccessibilityProvider {
+    constructor(configurationService) {
+        this.configurationService = configurationService;
+    }
+    getWidgetAriaLabel() {
+        return ( localizeWithPath(
+            'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+            'keybindingsLabel',
+            "Keybindings"
+        ));
+    }
+    getAriaLabel({ keybindingItem }) {
+        const ariaLabel = [
+            keybindingItem.commandLabel ? keybindingItem.commandLabel : keybindingItem.command,
+            keybindingItem.keybinding?.getAriaLabel() || ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'noKeybinding',
+                "No keybinding assigned"
+            )),
+            keybindingItem.when ? keybindingItem.when : ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'noWhen',
+                "No when context"
+            )),
+            isString(keybindingItem.source) ? keybindingItem.source : keybindingItem.source.description ?? keybindingItem.source.identifier.value,
+        ];
+        if (this.configurationService.getValue("accessibility.verbosity.keybindingsEditor" )) {
+            const kbEditorAriaLabel = ( localizeWithPath(
+                'vs/workbench/contrib/preferences/browser/keybindingsEditor',
+                'keyboard shortcuts aria label',
+                "use space or enter to change the keybinding."
+            ));
+            ariaLabel.push(kbEditorAriaLabel);
+        }
+        return ariaLabel.join(', ');
+    }
+}
+registerColor('keybindingTable.headerBackground', { dark: tableOddRowsBackgroundColor, light: tableOddRowsBackgroundColor, hcDark: tableOddRowsBackgroundColor, hcLight: tableOddRowsBackgroundColor }, 'Background color for the keyboard shortcuts table header.');
+registerColor('keybindingTable.rowsBackground', { light: tableOddRowsBackgroundColor, dark: tableOddRowsBackgroundColor, hcDark: tableOddRowsBackgroundColor, hcLight: tableOddRowsBackgroundColor }, 'Background color for the keyboard shortcuts table alternating rows.');
+registerThemingParticipant((theme, collector) => {
+    const foregroundColor = theme.getColor(foreground);
+    if (foregroundColor) {
+        const whenForegroundColor = ( foregroundColor.transparent(.8)).makeOpaque(WORKBENCH_BACKGROUND(theme));
+        collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-table-tr .monaco-table-td .code { color: ${whenForegroundColor}; }`);
+    }
+    const listActiveSelectionForegroundColor = theme.getColor(listActiveSelectionForeground);
+    const listActiveSelectionBackgroundColor = theme.getColor(listActiveSelectionBackground);
+    if (listActiveSelectionForegroundColor && listActiveSelectionBackgroundColor) {
+        const whenForegroundColor = ( listActiveSelectionForegroundColor.transparent(.8)).makeOpaque(listActiveSelectionBackgroundColor);
+        collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.selected .monaco-table-tr .monaco-table-td .code { color: ${whenForegroundColor}; }`);
+    }
+    const listInactiveSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground);
+    const listInactiveSelectionBackgroundColor = theme.getColor(listInactiveSelectionBackground);
+    if (listInactiveSelectionForegroundColor && listInactiveSelectionBackgroundColor) {
+        const whenForegroundColor = ( listInactiveSelectionForegroundColor.transparent(.8)).makeOpaque(listInactiveSelectionBackgroundColor);
+        collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row.selected .monaco-table-tr .monaco-table-td .code { color: ${whenForegroundColor}; }`);
+    }
+    const listFocusForegroundColor = theme.getColor(listFocusForeground);
+    const listFocusBackgroundColor = theme.getColor(listFocusBackground);
+    if (listFocusForegroundColor && listFocusBackgroundColor) {
+        const whenForegroundColor = ( listFocusForegroundColor.transparent(.8)).makeOpaque(listFocusBackgroundColor);
+        collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.focused .monaco-table-tr .monaco-table-td .code { color: ${whenForegroundColor}; }`);
+    }
+    const listHoverForegroundColor = theme.getColor(listHoverForeground);
+    const listHoverBackgroundColor = theme.getColor(listHoverBackground);
+    if (listHoverForegroundColor && listHoverBackgroundColor) {
+        const whenForegroundColor = ( listHoverForegroundColor.transparent(.8)).makeOpaque(listHoverBackgroundColor);
+        collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row:hover:not(.focused):not(.selected) .monaco-table-tr .monaco-table-td .code { color: ${whenForegroundColor}; }`);
+    }
+});
+export { KeybindingsEditor };