| // Copyright 2020 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| import * as Common from '../../core/common/common.js'; |
| import * as Host from '../../core/host/host.js'; |
| import * as i18n from '../../core/i18n/i18n.js'; |
| import * as Platform from '../../core/platform/platform.js'; |
| import * as Root from '../../core/root/root.js'; |
| import * as UI from '../../ui/legacy/legacy.js'; |
| |
| import keybindsSettingsTabStyles from './keybindsSettingsTab.css.js'; |
| |
| const UIStrings = { |
| /** |
| *@description Text for keyboard shortcuts |
| */ |
| shortcuts: 'Shortcuts', |
| /** |
| *@description Text appearing before a select control offering users their choice of keyboard shortcut presets. |
| */ |
| matchShortcutsFromPreset: 'Match shortcuts from preset', |
| /** |
| *@description Screen reader label for list of keyboard shortcuts in settings |
| */ |
| keyboardShortcutsList: 'Keyboard shortcuts list', |
| /** |
| *@description Screen reader label for an icon denoting a shortcut that has been changed from its default |
| */ |
| shortcutModified: 'Shortcut modified', |
| /** |
| *@description Screen reader label for an empty shortcut cell in custom shortcuts settings tab |
| */ |
| noShortcutForAction: 'No shortcut for action', |
| /** |
| *@description Link text in the settings pane to add another shortcut for an action |
| */ |
| addAShortcut: 'Add a shortcut', |
| /** |
| *@description Label for a button in the settings pane that confirms changes to a keyboard shortcut |
| */ |
| confirmChanges: 'Confirm changes', |
| /** |
| *@description Label for a button in the settings pane that discards changes to the shortcut being edited |
| */ |
| discardChanges: 'Discard changes', |
| /** |
| *@description Label for a button in the settings pane that removes a keyboard shortcut. |
| */ |
| removeShortcut: 'Remove shortcut', |
| /** |
| *@description Label for a button in the settings pane that edits a keyboard shortcut |
| */ |
| editShortcut: 'Edit shortcut', |
| /** |
| *@description Message shown in settings when the user inputs a modifier-only shortcut such as Ctrl+Shift. |
| */ |
| shortcutsCannotContainOnly: 'Shortcuts cannot contain only modifier keys.', |
| /** |
| *@description Messages shown in shortcuts settings when the user inputs a shortcut that is already in use. |
| *@example {Performance} PH1 |
| *@example {Start/stop recording} PH2 |
| */ |
| thisShortcutIsInUseByS: 'This shortcut is in use by {PH1}: {PH2}.', |
| /** |
| *@description Message shown in settings when to restore default shortcuts. |
| */ |
| RestoreDefaultShortcuts: 'Restore default shortcuts', |
| /** |
| *@description Message shown in settings to show the full list of keyboard shortcuts. |
| */ |
| FullListOfDevtoolsKeyboard: 'Full list of DevTools keyboard shortcuts and gestures', |
| /** |
| *@description Label for a button in the shortcut editor that resets all shortcuts for the current action. |
| */ |
| ResetShortcutsForAction: 'Reset shortcuts for action', |
| }; |
| const str_ = i18n.i18n.registerUIStrings('panels/settings/KeybindsSettingsTab.ts', UIStrings); |
| const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); |
| |
| let keybindsSettingsTabInstance: KeybindsSettingsTab; |
| export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListControl.ListDelegate<KeybindsItem> { |
| private readonly items: UI.ListModel.ListModel<KeybindsItem>; |
| private list: UI.ListControl.ListControl<string|UI.ActionRegistration.Action>; |
| private editingItem: UI.ActionRegistration.Action|null; |
| private editingRow: ShortcutListItem|null; |
| constructor() { |
| super(true); |
| |
| const header = this.contentElement.createChild('header'); |
| header.createChild('h1').textContent = i18nString(UIStrings.shortcuts); |
| const keybindsSetSetting = Common.Settings.Settings.instance().moduleSetting('activeKeybindSet'); |
| const userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('userShortcuts'); |
| userShortcutsSetting.addChangeListener(this.update, this); |
| keybindsSetSetting.addChangeListener(this.update, this); |
| const keybindsSetSelect = |
| UI.SettingsUI.createControlForSetting(keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset)); |
| if (keybindsSetSelect) { |
| keybindsSetSelect.classList.add('keybinds-set-select'); |
| this.contentElement.appendChild(keybindsSetSelect); |
| } |
| |
| this.items = new UI.ListModel.ListModel(); |
| this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport); |
| this.items.replaceAll(this.createListItems()); |
| UI.ARIAUtils.markAsList(this.list.element); |
| |
| this.contentElement.appendChild(this.list.element); |
| UI.ARIAUtils.setAccessibleName(this.list.element, i18nString(UIStrings.keyboardShortcutsList)); |
| const footer = this.contentElement.createChild('div'); |
| footer.classList.add('keybinds-footer'); |
| const docsLink = UI.XLink.XLink.create( |
| 'https://developer.chrome.com/docs/devtools/shortcuts/', i18nString(UIStrings.FullListOfDevtoolsKeyboard)); |
| docsLink.classList.add('docs-link'); |
| footer.appendChild(docsLink); |
| footer.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.RestoreDefaultShortcuts), () => { |
| userShortcutsSetting.set([]); |
| keybindsSetSetting.set(UI.ShortcutRegistry.DefaultShortcutSetting); |
| })); |
| this.editingItem = null; |
| this.editingRow = null; |
| |
| this.update(); |
| } |
| |
| static instance(opts = {forceNew: null}): KeybindsSettingsTab { |
| const {forceNew} = opts; |
| if (!keybindsSettingsTabInstance || forceNew) { |
| keybindsSettingsTabInstance = new KeybindsSettingsTab(); |
| } |
| |
| return keybindsSettingsTabInstance; |
| } |
| |
| createElementForItem(item: KeybindsItem): Element { |
| let itemElement = document.createElement('div'); |
| |
| if (typeof item === 'string') { |
| UI.ARIAUtils.setLevel(itemElement, 1); |
| itemElement.classList.add('keybinds-category-header'); |
| itemElement.textContent = item; |
| } else { |
| const listItem = new ShortcutListItem(item, this, item === this.editingItem); |
| itemElement = listItem.element; |
| UI.ARIAUtils.setLevel(itemElement, 2); |
| if (item === this.editingItem) { |
| this.editingRow = listItem; |
| } |
| } |
| |
| itemElement.classList.add('keybinds-list-item'); |
| UI.ARIAUtils.markAsListitem(itemElement); |
| itemElement.tabIndex = item === this.list.selectedItem() && item !== this.editingItem ? 0 : -1; |
| return itemElement; |
| } |
| |
| commitChanges( |
| item: UI.ActionRegistration.Action, |
| editedShortcuts: Map<UI.KeyboardShortcut.KeyboardShortcut, UI.KeyboardShortcut.Descriptor[]|null>): void { |
| for (const [originalShortcut, newDescriptors] of editedShortcuts) { |
| if (originalShortcut.type !== UI.KeyboardShortcut.Type.UnsetShortcut) { |
| UI.ShortcutRegistry.ShortcutRegistry.instance().removeShortcut(originalShortcut); |
| if (!newDescriptors) { |
| Host.userMetrics.actionTaken(Host.UserMetrics.Action.ShortcutRemoved); |
| } |
| } |
| if (newDescriptors) { |
| UI.ShortcutRegistry.ShortcutRegistry.instance().registerUserShortcut( |
| originalShortcut.changeKeys(newDescriptors as UI.KeyboardShortcut.Descriptor[]) |
| .changeType(UI.KeyboardShortcut.Type.UserShortcut)); |
| if (originalShortcut.type === UI.KeyboardShortcut.Type.UnsetShortcut) { |
| Host.userMetrics.actionTaken(Host.UserMetrics.Action.UserShortcutAdded); |
| } else { |
| Host.userMetrics.actionTaken(Host.UserMetrics.Action.ShortcutModified); |
| } |
| } |
| } |
| this.stopEditing(item); |
| } |
| |
| /** |
| * This method will never be called. |
| */ |
| heightForItem(_item: KeybindsItem): number { |
| return 0; |
| } |
| |
| isItemSelectable(_item: KeybindsItem): boolean { |
| return true; |
| } |
| |
| selectedItemChanged( |
| from: KeybindsItem|null, to: KeybindsItem|null, fromElement: HTMLElement|null, |
| toElement: HTMLElement|null): void { |
| if (fromElement) { |
| fromElement.tabIndex = -1; |
| } |
| if (toElement) { |
| if (to === this.editingItem && this.editingRow) { |
| this.editingRow.focus(); |
| } else { |
| toElement.tabIndex = 0; |
| if (this.list.element.hasFocus()) { |
| toElement.focus(); |
| } |
| } |
| this.setDefaultFocusedElement(toElement); |
| } |
| } |
| |
| updateSelectedItemARIA(_fromElement: Element|null, _toElement: Element|null): boolean { |
| return true; |
| } |
| |
| startEditing(action: UI.ActionRegistration.Action): void { |
| if (this.editingItem) { |
| this.stopEditing(this.editingItem); |
| } |
| UI.UIUtils.markBeingEdited(this.list.element, true); |
| this.editingItem = action; |
| this.list.refreshItem(action); |
| } |
| |
| stopEditing(action: UI.ActionRegistration.Action): void { |
| UI.UIUtils.markBeingEdited(this.list.element, false); |
| this.editingItem = null; |
| this.editingRow = null; |
| this.list.refreshItem(action); |
| this.focus(); |
| } |
| |
| private createListItems(): KeybindsItem[] { |
| const actions = UI.ActionRegistry.ActionRegistry.instance().actions().sort((actionA, actionB) => { |
| if (actionA.category() < actionB.category()) { |
| return -1; |
| } |
| if (actionA.category() > actionB.category()) { |
| return 1; |
| } |
| if (actionA.id() < actionB.id()) { |
| return -1; |
| } |
| if (actionA.id() > actionB.id()) { |
| return 1; |
| } |
| return 0; |
| }); |
| |
| const items: KeybindsItem[] = []; |
| |
| let currentCategory: string; |
| actions.forEach(action => { |
| if (action.id() === 'elements.toggle-element-search') { |
| return; |
| } |
| |
| if (currentCategory !== action.category()) { |
| items.push(action.category()); |
| } |
| items.push(action); |
| currentCategory = action.category(); |
| }); |
| return items; |
| } |
| |
| onEscapeKeyPressed(event: Event): void { |
| const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document); |
| if (this.editingRow && deepActiveElement && deepActiveElement.nodeName === 'INPUT') { |
| this.editingRow.onEscapeKeyPressed(event); |
| } |
| } |
| |
| update(): void { |
| if (this.editingItem) { |
| this.stopEditing(this.editingItem); |
| } |
| this.list.refreshAllItems(); |
| if (!this.list.selectedItem()) { |
| this.list.selectItem(this.items.at(0)); |
| } |
| } |
| |
| willHide(): void { |
| if (this.editingItem) { |
| this.stopEditing(this.editingItem); |
| } |
| } |
| wasShown(): void { |
| super.wasShown(); |
| this.registerCSSFiles([keybindsSettingsTabStyles]); |
| } |
| } |
| |
| export class ShortcutListItem { |
| private isEditing: boolean; |
| private settingsTab: KeybindsSettingsTab; |
| private item: UI.ActionRegistration.Action; |
| element: HTMLDivElement; |
| private editedShortcuts: Map<UI.KeyboardShortcut.KeyboardShortcut, UI.KeyboardShortcut.Descriptor[]|null>; |
| private readonly shortcutInputs: Map<UI.KeyboardShortcut.KeyboardShortcut, Element>; |
| private readonly shortcuts: UI.KeyboardShortcut.KeyboardShortcut[]; |
| private elementToFocus: HTMLElement|null; |
| private confirmButton: HTMLButtonElement|null; |
| private addShortcutLinkContainer: Element|null; |
| private errorMessageElement: Element|null; |
| private secondKeyTimeout: number|null; |
| constructor(item: UI.ActionRegistration.Action, settingsTab: KeybindsSettingsTab, isEditing?: boolean) { |
| this.isEditing = Boolean(isEditing); |
| this.settingsTab = settingsTab; |
| this.item = item; |
| this.element = document.createElement('div'); |
| this.editedShortcuts = new Map(); |
| this.shortcutInputs = new Map(); |
| this.shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(item.id()); |
| this.elementToFocus = null; |
| this.confirmButton = null; |
| this.addShortcutLinkContainer = null; |
| this.errorMessageElement = null; |
| this.secondKeyTimeout = null; |
| |
| this.update(); |
| } |
| |
| focus(): void { |
| if (this.elementToFocus) { |
| this.elementToFocus.focus(); |
| } |
| } |
| |
| private update(): void { |
| this.element.removeChildren(); |
| this.elementToFocus = null; |
| this.shortcutInputs.clear(); |
| |
| this.element.classList.toggle('keybinds-editing', this.isEditing); |
| this.element.createChild('div', 'keybinds-action-name keybinds-list-text').textContent = this.item.title(); |
| this.shortcuts.forEach(this.createShortcutRow, this); |
| if (this.shortcuts.length === 0) { |
| this.createEmptyInfo(); |
| } |
| if (this.isEditing) { |
| this.setupEditor(); |
| } |
| } |
| |
| private createEmptyInfo(): void { |
| if (UI.ShortcutRegistry.ShortcutRegistry.instance().actionHasDefaultShortcut(this.item.id())) { |
| const icon = UI.Icon.Icon.create('largeicon-shortcut-changed', 'keybinds-modified'); |
| UI.ARIAUtils.setAccessibleName(icon, i18nString(UIStrings.shortcutModified)); |
| this.element.appendChild(icon); |
| } |
| if (!this.isEditing) { |
| const emptyElement = this.element.createChild('div', 'keybinds-shortcut keybinds-list-text'); |
| UI.ARIAUtils.setAccessibleName(emptyElement, i18nString(UIStrings.noShortcutForAction)); |
| if (Root.Runtime.experiments.isEnabled('keyboardShortcutEditor')) { |
| this.element.appendChild(this.createEditButton()); |
| } |
| } |
| } |
| |
| private setupEditor(): void { |
| this.addShortcutLinkContainer = this.element.createChild('div', 'keybinds-shortcut devtools-link'); |
| const addShortcutLink = this.addShortcutLinkContainer.createChild('span', 'devtools-link') as HTMLDivElement; |
| addShortcutLink.textContent = i18nString(UIStrings.addAShortcut); |
| addShortcutLink.tabIndex = 0; |
| UI.ARIAUtils.markAsLink(addShortcutLink); |
| self.onInvokeElement(addShortcutLink, this.addShortcut.bind(this)); |
| if (!this.elementToFocus) { |
| this.elementToFocus = addShortcutLink; |
| } |
| |
| this.errorMessageElement = this.element.createChild('div', 'keybinds-info keybinds-error hidden'); |
| UI.ARIAUtils.markAsAlert(this.errorMessageElement); |
| this.element.appendChild(this.createIconButton( |
| i18nString(UIStrings.ResetShortcutsForAction), 'largeicon-undo', '', this.resetShortcutsToDefaults.bind(this))); |
| this.confirmButton = this.createIconButton( |
| i18nString(UIStrings.confirmChanges), 'largeicon-checkmark', 'keybinds-confirm-button', |
| () => this.settingsTab.commitChanges(this.item, this.editedShortcuts)); |
| this.element.appendChild(this.confirmButton); |
| this.element.appendChild(this.createIconButton( |
| i18nString(UIStrings.discardChanges), 'largeicon-delete', 'keybinds-cancel-button', |
| () => this.settingsTab.stopEditing(this.item))); |
| this.element.addEventListener('keydown', event => { |
| if (isEscKey(event)) { |
| this.settingsTab.stopEditing(this.item); |
| event.consume(true); |
| } |
| }); |
| } |
| |
| private addShortcut(): void { |
| const shortcut = |
| new UI.KeyboardShortcut.KeyboardShortcut([], this.item.id(), UI.KeyboardShortcut.Type.UnsetShortcut); |
| this.shortcuts.push(shortcut); |
| this.update(); |
| const shortcutInput = this.shortcutInputs.get(shortcut) as HTMLElement; |
| if (shortcutInput) { |
| shortcutInput.focus(); |
| } |
| } |
| |
| private createShortcutRow(shortcut: UI.KeyboardShortcut.KeyboardShortcut, index?: number): void { |
| if (this.editedShortcuts.has(shortcut) && !this.editedShortcuts.get(shortcut)) { |
| return; |
| } |
| let icon: UI.Icon.Icon; |
| if (shortcut.type !== UI.KeyboardShortcut.Type.UnsetShortcut && !shortcut.isDefault()) { |
| icon = UI.Icon.Icon.create('largeicon-shortcut-changed', 'keybinds-modified'); |
| UI.ARIAUtils.setAccessibleName(icon, i18nString(UIStrings.shortcutModified)); |
| this.element.appendChild(icon); |
| } |
| const shortcutElement = this.element.createChild('div', 'keybinds-shortcut keybinds-list-text'); |
| if (this.isEditing) { |
| const shortcutInput = shortcutElement.createChild('input', 'harmony-input') as HTMLInputElement; |
| shortcutInput.spellcheck = false; |
| shortcutInput.maxLength = 0; |
| this.shortcutInputs.set(shortcut, shortcutInput); |
| if (!this.elementToFocus) { |
| this.elementToFocus = shortcutInput; |
| } |
| shortcutInput.value = shortcut.title(); |
| const userDescriptors = this.editedShortcuts.get(shortcut); |
| if (userDescriptors) { |
| shortcutInput.value = this.shortcutInputTextForDescriptors(userDescriptors); |
| } |
| shortcutInput.addEventListener('keydown', this.onShortcutInputKeyDown.bind(this, shortcut, shortcutInput)); |
| shortcutInput.addEventListener('blur', () => { |
| if (this.secondKeyTimeout !== null) { |
| clearTimeout(this.secondKeyTimeout); |
| this.secondKeyTimeout = null; |
| } |
| }); |
| shortcutElement.appendChild(this.createIconButton( |
| i18nString(UIStrings.removeShortcut), 'largeicon-trash-bin', 'keybinds-delete-button', () => { |
| const index = this.shortcuts.indexOf(shortcut); |
| if (!shortcut.isDefault()) { |
| this.shortcuts.splice(index, 1); |
| } |
| this.editedShortcuts.set(shortcut, null); |
| this.update(); |
| this.focus(); |
| this.validateInputs(); |
| })); |
| } else { |
| const keys = shortcut.descriptors.flatMap(descriptor => descriptor.name.split(' + ')); |
| keys.forEach(key => { |
| shortcutElement.createChild('span', 'keybinds-key').textContent = key; |
| }); |
| if (Root.Runtime.experiments.isEnabled('keyboardShortcutEditor') && index === 0) { |
| this.element.appendChild(this.createEditButton()); |
| } |
| } |
| } |
| |
| private createEditButton(): Element { |
| return this.createIconButton( |
| i18nString(UIStrings.editShortcut), 'largeicon-edit', 'keybinds-edit-button', |
| () => this.settingsTab.startEditing(this.item)); |
| } |
| |
| private createIconButton(label: string, iconName: string, className: string, listener: () => void): |
| HTMLButtonElement { |
| const button = document.createElement('button') as HTMLButtonElement; |
| button.appendChild(UI.Icon.Icon.create(iconName)); |
| button.addEventListener('click', listener); |
| UI.ARIAUtils.setAccessibleName(button, label); |
| if (className) { |
| button.classList.add(className); |
| } |
| return button; |
| } |
| |
| private onShortcutInputKeyDown( |
| shortcut: UI.KeyboardShortcut.KeyboardShortcut, shortcutInput: HTMLInputElement, event: Event): void { |
| if ((event as KeyboardEvent).key !== 'Tab') { |
| const eventDescriptor = this.descriptorForEvent(event as KeyboardEvent); |
| const userDescriptors = this.editedShortcuts.get(shortcut) || []; |
| this.editedShortcuts.set(shortcut, userDescriptors); |
| const isLastKeyOfShortcut = |
| userDescriptors.length === 2 && UI.KeyboardShortcut.KeyboardShortcut.isModifier(userDescriptors[1].key); |
| const shouldClearOldShortcut = userDescriptors.length === 2 && !isLastKeyOfShortcut; |
| if (shouldClearOldShortcut) { |
| userDescriptors.splice(0, 2); |
| } |
| if (this.secondKeyTimeout) { |
| clearTimeout(this.secondKeyTimeout); |
| this.secondKeyTimeout = null; |
| userDescriptors.push(eventDescriptor); |
| } else if (isLastKeyOfShortcut) { |
| userDescriptors[1] = eventDescriptor; |
| } else if (!UI.KeyboardShortcut.KeyboardShortcut.isModifier(eventDescriptor.key)) { |
| userDescriptors[0] = eventDescriptor; |
| this.secondKeyTimeout = window.setTimeout(() => { |
| this.secondKeyTimeout = null; |
| }, UI.ShortcutRegistry.KeyTimeout); |
| } else { |
| userDescriptors[0] = eventDescriptor; |
| } |
| shortcutInput.value = this.shortcutInputTextForDescriptors(userDescriptors); |
| this.validateInputs(); |
| event.consume(true); |
| } |
| } |
| |
| private descriptorForEvent(event: KeyboardEvent): UI.KeyboardShortcut.Descriptor { |
| const userKey = UI.KeyboardShortcut.KeyboardShortcut.makeKeyFromEvent(event as KeyboardEvent); |
| const codeAndModifiers = UI.KeyboardShortcut.KeyboardShortcut.keyCodeAndModifiersFromKey(userKey); |
| let key: UI.KeyboardShortcut.Key|string = |
| UI.KeyboardShortcut.Keys[event.key] || UI.KeyboardShortcut.KeyBindings[event.key]; |
| |
| if (!key && !/^[a-z]$/i.test(event.key)) { |
| const keyCode = event.code; |
| // if we still don't have a key name, let's try the code before falling back to the raw key |
| key = UI.KeyboardShortcut.Keys[keyCode] || UI.KeyboardShortcut.KeyBindings[keyCode]; |
| if (keyCode.startsWith('Digit')) { |
| key = keyCode.slice(5); |
| } else if (keyCode.startsWith('Key')) { |
| key = keyCode.slice(3); |
| } |
| } |
| |
| return UI.KeyboardShortcut.KeyboardShortcut.makeDescriptor(key || event.key, codeAndModifiers.modifiers); |
| } |
| |
| private shortcutInputTextForDescriptors(descriptors: UI.KeyboardShortcut.Descriptor[]): string { |
| return descriptors.map(descriptor => descriptor.name).join(' '); |
| } |
| |
| private resetShortcutsToDefaults(): void { |
| this.editedShortcuts.clear(); |
| for (const shortcut of this.shortcuts) { |
| if (shortcut.type === UI.KeyboardShortcut.Type.UnsetShortcut) { |
| const index = this.shortcuts.indexOf(shortcut); |
| this.shortcuts.splice(index, 1); |
| } else if (shortcut.type === UI.KeyboardShortcut.Type.UserShortcut) { |
| this.editedShortcuts.set(shortcut, null); |
| } |
| } |
| const disabledDefaults = UI.ShortcutRegistry.ShortcutRegistry.instance().disabledDefaultsForAction(this.item.id()); |
| disabledDefaults.forEach(shortcut => { |
| this.shortcuts.push(shortcut); |
| this.editedShortcuts.set(shortcut, shortcut.descriptors); |
| }); |
| this.update(); |
| this.focus(); |
| } |
| |
| onEscapeKeyPressed(event: Event): void { |
| const activeElement = Platform.DOMUtilities.deepActiveElement(document); |
| for (const [shortcut, shortcutInput] of this.shortcutInputs.entries()) { |
| if (activeElement === shortcutInput) { |
| this.onShortcutInputKeyDown( |
| shortcut as UI.KeyboardShortcut.KeyboardShortcut, shortcutInput as HTMLInputElement, |
| event as KeyboardEvent); |
| } |
| } |
| } |
| |
| private validateInputs(): void { |
| const confirmButton = this.confirmButton; |
| const errorMessageElement = this.errorMessageElement; |
| if (!confirmButton || !errorMessageElement) { |
| return; |
| } |
| |
| confirmButton.disabled = false; |
| errorMessageElement.classList.add('hidden'); |
| this.shortcutInputs.forEach((shortcutInput, shortcut) => { |
| const userDescriptors = this.editedShortcuts.get(shortcut); |
| if (!userDescriptors) { |
| return; |
| } |
| if (userDescriptors.some(descriptor => UI.KeyboardShortcut.KeyboardShortcut.isModifier(descriptor.key))) { |
| confirmButton.disabled = true; |
| shortcutInput.classList.add('error-input'); |
| UI.ARIAUtils.setInvalid(shortcutInput, true); |
| errorMessageElement.classList.remove('hidden'); |
| errorMessageElement.textContent = i18nString(UIStrings.shortcutsCannotContainOnly); |
| return; |
| } |
| const conflicts = UI.ShortcutRegistry.ShortcutRegistry.instance() |
| .actionsForDescriptors(userDescriptors) |
| .filter(actionId => actionId !== this.item.id()); |
| if (conflicts.length) { |
| confirmButton.disabled = true; |
| shortcutInput.classList.add('error-input'); |
| UI.ARIAUtils.setInvalid(shortcutInput, true); |
| errorMessageElement.classList.remove('hidden'); |
| const action = UI.ActionRegistry.ActionRegistry.instance().action(conflicts[0]); |
| if (!action) { |
| return; |
| } |
| const actionTitle = action.title(); |
| const actionCategory = action.category(); |
| errorMessageElement.textContent = |
| i18nString(UIStrings.thisShortcutIsInUseByS, {PH1: actionCategory, PH2: actionTitle}); |
| return; |
| } |
| shortcutInput.classList.remove('error-input'); |
| UI.ARIAUtils.setInvalid(shortcutInput, false); |
| }); |
| } |
| } |
| |
| export type KeybindsItem = string|UI.ActionRegistration.Action; |
