@yuebai008/cli/dist/cli-server/client/front_end/panels/settings/KeybindsSettingsTab.js

Command line interface for rapid qg-minigame development

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={shortcuts:"Shortcuts",matchShortcutsFromPreset:"Match shortcuts from preset",keyboardShortcutsList:"Keyboard shortcuts list",shortcutModified:"Shortcut modified",noShortcutForAction:"No shortcut for action",addAShortcut:"Add a shortcut",confirmChanges:"Confirm changes",discardChanges:"Discard changes",removeShortcut:"Remove shortcut",editShortcut:"Edit shortcut",shortcutsCannotContainOnly:"Shortcuts cannot contain only modifier keys.",thisShortcutIsInUseByS:"This shortcut is in use by {PH1}: {PH2}.",RestoreDefaultShortcuts:"Restore default shortcuts",FullListOfDevtoolsKeyboard:"Full list of DevTools keyboard shortcuts and gestures",ResetShortcutsForAction:"Reset shortcuts for action"},str_=i18n.i18n.registerUIStrings("panels/settings/KeybindsSettingsTab.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let keybindsSettingsTabInstance;export class KeybindsSettingsTab extends UI.Widget.VBox{items;list;editingItem;editingRow;constructor(){super(!0);this.contentElement.createChild("header").createChild("h1").textContent=i18nString(UIStrings.shortcuts);const t=Common.Settings.Settings.instance().moduleSetting("activeKeybindSet"),e=Common.Settings.Settings.instance().moduleSetting("userShortcuts");e.addChangeListener(this.update,this),t.addChangeListener(this.update,this);const s=UI.SettingsUI.createControlForSetting(t,i18nString(UIStrings.matchShortcutsFromPreset));s&&(s.classList.add("keybinds-set-select"),this.contentElement.appendChild(s)),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.setLabel(this.list.element,i18nString(UIStrings.keyboardShortcutsList));const i=this.contentElement.createChild("div");i.classList.add("keybinds-footer");const o=UI.XLink.XLink.create("https://developer.chrome.com/docs/devtools/shortcuts/",i18nString(UIStrings.FullListOfDevtoolsKeyboard));o.classList.add("docs-link"),i.appendChild(o),i.appendChild(UI.UIUtils.createTextButton(i18nString(UIStrings.RestoreDefaultShortcuts),(()=>{e.set([]),t.set(UI.ShortcutRegistry.DefaultShortcutSetting)}))),this.editingItem=null,this.editingRow=null,this.update()}static instance(t={forceNew:null}){const{forceNew:e}=t;return keybindsSettingsTabInstance&&!e||(keybindsSettingsTabInstance=new KeybindsSettingsTab),keybindsSettingsTabInstance}createElementForItem(t){let e=document.createElement("div");if("string"==typeof t)UI.ARIAUtils.setLevel(e,1),e.classList.add("keybinds-category-header"),e.textContent=UI.ActionRegistration.getLocalizedActionCategory(t);else{const s=new ShortcutListItem(t,this,t===this.editingItem);e=s.element,UI.ARIAUtils.setLevel(e,2),t===this.editingItem&&(this.editingRow=s)}return e.classList.add("keybinds-list-item"),UI.ARIAUtils.markAsListitem(e),e.tabIndex=t===this.list.selectedItem()&&t!==this.editingItem?0:-1,e}commitChanges(t,e){for(const[t,s]of e)t.type!==UI.KeyboardShortcut.Type.UnsetShortcut&&(UI.ShortcutRegistry.ShortcutRegistry.instance().removeShortcut(t),s||Host.userMetrics.actionTaken(Host.UserMetrics.Action.ShortcutRemoved)),s&&(UI.ShortcutRegistry.ShortcutRegistry.instance().registerUserShortcut(t.changeKeys(s).changeType(UI.KeyboardShortcut.Type.UserShortcut)),t.type===UI.KeyboardShortcut.Type.UnsetShortcut?Host.userMetrics.actionTaken(Host.UserMetrics.Action.UserShortcutAdded):Host.userMetrics.actionTaken(Host.UserMetrics.Action.ShortcutModified));this.stopEditing(t)}heightForItem(t){return 0}isItemSelectable(t){return!0}selectedItemChanged(t,e,s,i){s&&(s.tabIndex=-1),i&&(e===this.editingItem&&this.editingRow?this.editingRow.focus():(i.tabIndex=0,this.list.element.hasFocus()&&i.focus()),this.setDefaultFocusedElement(i))}updateSelectedItemARIA(t,e){return!0}startEditing(t){this.list.selectItem(t),this.editingItem&&this.stopEditing(this.editingItem),UI.UIUtils.markBeingEdited(this.list.element,!0),this.editingItem=t,this.list.refreshItem(t)}stopEditing(t){UI.UIUtils.markBeingEdited(this.list.element,!1),this.editingItem=null,this.editingRow=null,this.list.refreshItem(t),this.focus()}createListItems(){const t=UI.ActionRegistry.ActionRegistry.instance().actions().sort(((t,e)=>t.category()<e.category()?-1:t.category()>e.category()?1:t.id()<e.id()?-1:t.id()>e.id()?1:0)),e=[];let s;return t.forEach((t=>{"elements.toggle-element-search"!==t.id()&&(s!==t.category()&&e.push(t.category()),e.push(t),s=t.category())})),e}onEscapeKeyPressed(t){const e=Platform.DOMUtilities.deepActiveElement(document);this.editingRow&&e&&"INPUT"===e.nodeName&&this.editingRow.onEscapeKeyPressed(t)}update(){this.editingItem&&this.stopEditing(this.editingItem),this.list.refreshAllItems(),this.list.selectedItem()||this.list.selectItem(this.items.at(0))}willHide(){this.editingItem&&this.stopEditing(this.editingItem)}wasShown(){super.wasShown(),this.registerCSSFiles([keybindsSettingsTabStyles])}}export class ShortcutListItem{isEditing;settingsTab;item;element;editedShortcuts;shortcutInputs;shortcuts;elementToFocus;confirmButton;addShortcutLinkContainer;errorMessageElement;secondKeyTimeout;constructor(t,e,s){this.isEditing=Boolean(s),this.settingsTab=e,this.item=t,this.element=document.createElement("div"),this.editedShortcuts=new Map,this.shortcutInputs=new Map,this.shortcuts=UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(t.id()),this.elementToFocus=null,this.confirmButton=null,this.addShortcutLinkContainer=null,this.errorMessageElement=null,this.secondKeyTimeout=null,this.update()}focus(){this.elementToFocus&&this.elementToFocus.focus()}update(){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),0===this.shortcuts.length&&this.createEmptyInfo(),this.isEditing&&this.setupEditor()}createEmptyInfo(){if(UI.ShortcutRegistry.ShortcutRegistry.instance().actionHasDefaultShortcut(this.item.id())){const t=UI.Icon.Icon.create("keyboard-pen","keybinds-modified");UI.ARIAUtils.setLabel(t,i18nString(UIStrings.shortcutModified)),this.element.appendChild(t)}if(!this.isEditing){const t=this.element.createChild("div","keybinds-shortcut keybinds-list-text");UI.ARIAUtils.setLabel(t,i18nString(UIStrings.noShortcutForAction)),Root.Runtime.experiments.isEnabled("keyboardShortcutEditor")&&this.element.appendChild(this.createEditButton())}}setupEditor(){this.addShortcutLinkContainer=this.element.createChild("div","keybinds-shortcut devtools-link");const t=this.addShortcutLinkContainer.createChild("span","devtools-link");t.textContent=i18nString(UIStrings.addAShortcut),t.tabIndex=0,UI.ARIAUtils.markAsLink(t),self.onInvokeElement(t,this.addShortcut.bind(this)),this.elementToFocus||(this.elementToFocus=t),this.errorMessageElement=this.element.createChild("div","keybinds-info keybinds-error hidden"),UI.ARIAUtils.markAsAlert(this.errorMessageElement),this.element.appendChild(this.createIconButton(i18nString(UIStrings.ResetShortcutsForAction),"undo","",this.resetShortcutsToDefaults.bind(this))),this.confirmButton=this.createIconButton(i18nString(UIStrings.confirmChanges),"checkmark","keybinds-confirm-button",(()=>this.settingsTab.commitChanges(this.item,this.editedShortcuts))),this.element.appendChild(this.confirmButton),this.element.appendChild(this.createIconButton(i18nString(UIStrings.discardChanges),"cross","keybinds-cancel-button",(()=>this.settingsTab.stopEditing(this.item)))),this.element.addEventListener("keydown",(t=>{Platform.KeyboardUtilities.isEscKey(t)&&(this.settingsTab.stopEditing(this.item),t.consume(!0))}))}addShortcut(){const t=new UI.KeyboardShortcut.KeyboardShortcut([],this.item.id(),UI.KeyboardShortcut.Type.UnsetShortcut);this.shortcuts.push(t),this.update();const e=this.shortcutInputs.get(t);e&&e.focus()}createShortcutRow(t,e){if(this.editedShortcuts.has(t)&&!this.editedShortcuts.get(t))return;let s;t.type===UI.KeyboardShortcut.Type.UnsetShortcut||t.isDefault()||(s=UI.Icon.Icon.create("keyboard-pen","keybinds-modified"),UI.ARIAUtils.setLabel(s,i18nString(UIStrings.shortcutModified)),this.element.appendChild(s));const i=this.element.createChild("div","keybinds-shortcut keybinds-list-text");if(this.isEditing){const e=i.createChild("input","harmony-input");e.spellcheck=!1,e.maxLength=0,this.shortcutInputs.set(t,e),this.elementToFocus||(this.elementToFocus=e),e.value=t.title();const s=this.editedShortcuts.get(t);s&&(e.value=this.shortcutInputTextForDescriptors(s)),e.addEventListener("keydown",this.onShortcutInputKeyDown.bind(this,t,e)),e.addEventListener("blur",(()=>{null!==this.secondKeyTimeout&&(clearTimeout(this.secondKeyTimeout),this.secondKeyTimeout=null)})),i.appendChild(this.createIconButton(i18nString(UIStrings.removeShortcut),"bin","keybinds-delete-button",(()=>{const e=this.shortcuts.indexOf(t);t.isDefault()||this.shortcuts.splice(e,1),this.editedShortcuts.set(t,null),this.update(),this.focus(),this.validateInputs()})))}else{t.descriptors.flatMap((t=>t.name.split(" + "))).forEach((t=>{i.createChild("span","keybinds-key").textContent=t})),Root.Runtime.experiments.isEnabled("keyboardShortcutEditor")&&0===e&&this.element.appendChild(this.createEditButton())}}createEditButton(){return this.createIconButton(i18nString(UIStrings.editShortcut),"edit","keybinds-edit-button",(()=>this.settingsTab.startEditing(this.item)))}createIconButton(t,e,s,i){const o=document.createElement("button");return o.setAttribute("title",t),o.appendChild(UI.Icon.Icon.create(e)),o.addEventListener("click",i),UI.ARIAUtils.setLabel(o,t),s&&o.classList.add(s),o}onShortcutInputKeyDown(t,e,s){if("Tab"!==s.key){const i=this.descriptorForEvent(s),o=this.editedShortcuts.get(t)||[];this.editedShortcuts.set(t,o);const n=2===o.length&&UI.KeyboardShortcut.KeyboardShortcut.isModifier(o[1].key);2===o.length&&!n&&o.splice(0,2),this.secondKeyTimeout?(clearTimeout(this.secondKeyTimeout),this.secondKeyTimeout=null,o.push(i)):n?o[1]=i:UI.KeyboardShortcut.KeyboardShortcut.isModifier(i.key)?o[0]=i:(o[0]=i,this.secondKeyTimeout=window.setTimeout((()=>{this.secondKeyTimeout=null}),UI.ShortcutRegistry.KeyTimeout)),e.value=this.shortcutInputTextForDescriptors(o),this.validateInputs(),s.consume(!0)}}descriptorForEvent(t){const e=UI.KeyboardShortcut.KeyboardShortcut.makeKeyFromEvent(t),s=UI.KeyboardShortcut.KeyboardShortcut.keyCodeAndModifiersFromKey(e);let i=UI.KeyboardShortcut.Keys[t.key]||UI.KeyboardShortcut.KeyBindings[t.key];if(!i&&!/^[a-z]$/i.test(t.key)){const e=t.code;i=UI.KeyboardShortcut.Keys[e]||UI.KeyboardShortcut.KeyBindings[e],e.startsWith("Digit")?i=e.slice(5):e.startsWith("Key")&&(i=e.slice(3))}return UI.KeyboardShortcut.KeyboardShortcut.makeDescriptor(i||t.key,s.modifiers)}shortcutInputTextForDescriptors(t){return t.map((t=>t.name)).join(" ")}resetShortcutsToDefaults(){this.editedShortcuts.clear();for(const t of this.shortcuts)if(t.type===UI.KeyboardShortcut.Type.UnsetShortcut){const e=this.shortcuts.indexOf(t);this.shortcuts.splice(e,1)}else t.type===UI.KeyboardShortcut.Type.UserShortcut&&this.editedShortcuts.set(t,null);UI.ShortcutRegistry.ShortcutRegistry.instance().disabledDefaultsForAction(this.item.id()).forEach((t=>{this.shortcuts.includes(t)||(this.shortcuts.push(t),this.editedShortcuts.set(t,t.descriptors))})),this.update(),this.focus()}onEscapeKeyPressed(t){const e=Platform.DOMUtilities.deepActiveElement(document);for(const[s,i]of this.shortcutInputs.entries())e===i&&this.onShortcutInputKeyDown(s,i,t)}validateInputs(){const t=this.confirmButton,e=this.errorMessageElement;t&&e&&(t.disabled=!1,e.classList.add("hidden"),this.shortcutInputs.forEach(((s,i)=>{const o=this.editedShortcuts.get(i);if(!o)return;if(o.some((t=>UI.KeyboardShortcut.KeyboardShortcut.isModifier(t.key))))return t.disabled=!0,s.classList.add("error-input"),UI.ARIAUtils.setInvalid(s,!0),e.classList.remove("hidden"),void(e.textContent=i18nString(UIStrings.shortcutsCannotContainOnly));const n=UI.ShortcutRegistry.ShortcutRegistry.instance().actionsForDescriptors(o).filter((t=>t!==this.item.id()));if(n.length){t.disabled=!0,s.classList.add("error-input"),UI.ARIAUtils.setInvalid(s,!0),e.classList.remove("hidden");const i=UI.ActionRegistry.ActionRegistry.instance().action(n[0]);if(!i)return;const o=i.title(),r=i.category();e.textContent=i18nString(UIStrings.thisShortcutIsInUseByS,{PH1:r,PH2:o})}else s.classList.remove("error-input"),UI.ARIAUtils.setInvalid(s,!1)})))}}