Add option to add accelerators to context menus

Bug: 368240754
Change-Id: Iae0c701e42a17350744e036c66ade1c9fcf43b8f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5934529
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/core/host/InspectorFrontendHostAPI.ts

@@ -379,10 +379,16 @@ export interface InspectorFrontendHostAPI {
   recordKeyDown(event: KeyDownEvent): void;
 }
 
+export interface AcceleratorDescriptor {
+  keyCode: number;
+  modifiers: number;
+}
+
 export interface ContextMenuDescriptor {
   type: 'checkbox'|'item'|'separator'|'subMenu';
   id?: number;
   label?: string;
+  accelerator?: AcceleratorDescriptor;
   isExperimentalFeature?: boolean;
   enabled?: boolean;
   checked?: boolean;

front_end/panels/console/ConsoleView.ts

@@ -1363,7 +1363,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   private registerShortcuts(): void {
     this.shortcuts.set(
-        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl),
+        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl.value),
         this.clearPromptBackwards.bind(this));
   }
 

front_end/panels/elements/ElementsTreeElement.ts

@@ -797,7 +797,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isShadowRoot = this.nodeInternal.isShadowRoot();
 
     const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
-    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
+    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
     const treeOutline = this.treeOutline;
     if (!treeOutline) {
       return;

front_end/panels/recorder/models/RecordingSession.ts

@@ -92,10 +92,10 @@ const createShortcuts = (descriptors: number[][]): Shortcut[] => {
       shortcutBase.keyCode = keyCode;
       const modifiersMap = UI.KeyboardShortcut.Modifiers;
 
-      shortcutBase.ctrl = Boolean(modifiers & modifiersMap.Ctrl);
-      shortcutBase.meta = Boolean(modifiers & modifiersMap.Meta);
-      shortcutBase.shift = Boolean(modifiers & modifiersMap.Shift);
-      shortcutBase.shift = Boolean(modifiers & modifiersMap.Alt);
+      shortcutBase.ctrl = Boolean(modifiers & modifiersMap.Ctrl.value);
+      shortcutBase.meta = Boolean(modifiers & modifiersMap.Meta.value);
+      shortcutBase.shift = Boolean(modifiers & modifiersMap.Shift.value);
+      shortcutBase.shift = Boolean(modifiers & modifiersMap.Alt.value);
 
       if (shortcutBase.keyCode !== -1) {
         shortcuts.push(shortcutBase);

front_end/panels/screencast/ScreencastView.ts

@@ -193,7 +193,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.context = this.canvasElement.getContext('2d') as CanvasRenderingContext2D;
     this.checkerboardPattern = this.createCheckerboardPattern(this.context);
 
-    this.shortcuts[UI.KeyboardShortcut.KeyboardShortcut.makeKey('l', UI.KeyboardShortcut.Modifiers.Ctrl)] =
+    this.shortcuts[UI.KeyboardShortcut.KeyboardShortcut.makeKey('l', UI.KeyboardShortcut.Modifiers.Ctrl.value)] =
         this.focusNavigationBar.bind(this);
 
     SDK.TargetManager.TargetManager.instance().addEventListener(

front_end/ui/legacy/ContextMenu.ts

@@ -35,13 +35,15 @@ import * as Root from '../../core/root/root.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import {ActionRegistry} from './ActionRegistry.js';
+import type {Key, Modifier} from './KeyboardShortcut.js';
 import {ShortcutRegistry} from './ShortcutRegistry.js';
 import {SoftContextMenu, type SoftContextMenuDescriptor} from './SoftContextMenu.js';
 import {deepElementFromEvent} from './UIUtils.js';
 
 export class Item {
   private readonly typeInternal: string;
   protected readonly label: string|undefined;
+  protected accelerator?: Host.InspectorFrontendHostAPI.AcceleratorDescriptor;
   protected readonly previewFeature: boolean;
   protected disabled: boolean|undefined;
   private readonly checked: boolean|undefined;
@@ -54,11 +56,13 @@ export class Item {
 
   constructor(
       contextMenu: ContextMenu|null, type: 'checkbox'|'item'|'separator'|'subMenu', label?: string,
-      isPreviewFeature?: boolean, disabled?: boolean, checked?: boolean, tooltip?: Platform.UIString.LocalizedString,
+      isPreviewFeature?: boolean, disabled?: boolean, checked?: boolean,
+      accelerator?: Host.InspectorFrontendHostAPI.AcceleratorDescriptor, tooltip?: Platform.UIString.LocalizedString,
       jslogContext?: string) {
     this.typeInternal = type;
     this.label = label;
     this.previewFeature = Boolean(isPreviewFeature);
+    this.accelerator = accelerator;
     this.disabled = disabled;
     this.checked = checked;
     this.contextMenu = contextMenu;
@@ -113,6 +117,9 @@ export class Item {
         if (this.shortcut) {
           result.shortcut = this.shortcut;
         }
+        if (this.accelerator) {
+          result.accelerator = this.accelerator;
+        }
         return result;
       }
       case 'separator': {
@@ -145,6 +152,11 @@ export class Item {
     throw new Error('Invalid item type:' + this.typeInternal);
   }
 
+  setAccelerator(key: Key, modifiers: Modifier[]): void {
+    const modifierSum = modifiers.reduce((result, modifier) => result + modifier.value, 0);
+    this.accelerator = {keyCode: key.code, modifiers: modifierSum};
+  }
+
   setShortcut(shortcut: string): void {
     this.shortcut = shortcut;
   }
@@ -159,15 +171,16 @@ export class Section {
   }
 
   appendItem(label: string, handler: () => void, options?: {
+    accelerator?: Host.InspectorFrontendHostAPI.AcceleratorDescriptor,
     isPreviewFeature?: boolean,
     disabled?: boolean,
     additionalElement?: Element,
     tooltip?: Platform.UIString.LocalizedString,
     jslogContext?: string,
   }): Item {
     const item = new Item(
-        this.contextMenu, 'item', label, options?.isPreviewFeature, options?.disabled, undefined, options?.tooltip,
-        options?.jslogContext);
+        this.contextMenu, 'item', label, options?.isPreviewFeature, options?.disabled, undefined, options?.accelerator,
+        options?.tooltip, options?.jslogContext);
     if (options?.additionalElement) {
       item.customElement = options?.additionalElement;
     }
@@ -179,8 +192,8 @@ export class Section {
   }
 
   appendCustomItem(element: Element, jslogContext?: string): Item {
-    const item =
-        new Item(this.contextMenu, 'item', undefined, undefined, undefined, undefined, undefined, jslogContext);
+    const item = new Item(
+        this.contextMenu, 'item', undefined, undefined, undefined, undefined, undefined, undefined, jslogContext);
     item.customElement = element;
     this.items.push(item);
     return item;
@@ -225,8 +238,8 @@ export class Section {
     jslogContext?: string,
   }): Item {
     const item = new Item(
-        this.contextMenu, 'checkbox', label, undefined, options?.disabled, options?.checked, options?.tooltip,
-        options?.jslogContext);
+        this.contextMenu, 'checkbox', label, undefined, options?.disabled, options?.checked, undefined,
+        options?.tooltip, options?.jslogContext);
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
@@ -243,7 +256,7 @@ export class SubMenu extends Item {
   private readonly sectionList: Section[];
 
   constructor(contextMenu: ContextMenu|null, label?: string, disabled?: boolean, jslogContext?: string) {
-    super(contextMenu, 'subMenu', label, undefined, disabled, undefined, undefined, jslogContext);
+    super(contextMenu, 'subMenu', label, undefined, disabled, undefined, undefined, undefined, jslogContext);
     this.sections = new Map();
     this.sectionList = [];
   }
@@ -317,6 +330,7 @@ export class SubMenu extends Item {
     const result: Host.InspectorFrontendHostAPI.ContextMenuDescriptor|SoftContextMenuDescriptor = {
       type: 'subMenu',
       label: this.label,
+      accelerator: this.accelerator,
       isExperimentalFeature: this.previewFeature,
       enabled: !this.disabled,
       subItems: [],

front_end/ui/legacy/FilterBar.ts

@@ -282,7 +282,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
     ARIAUtils.markAsListBox(this.filtersElement);
     ARIAUtils.markAsMultiSelectable(this.filtersElement);
     Tooltip.install(this.filtersElement, i18nString(UIStrings.sclickToSelectMultipleTypes, {
-                      PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta),
+                      PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta.value),
                     }));
 
     this.typeFilterElementTypeNames = new WeakMap();

front_end/ui/legacy/KeyboardShortcut.ts

@@ -98,23 +98,23 @@ export class KeyboardShortcut {
     if (typeof keyCode === 'string') {
       keyCode = keyCode.charCodeAt(0) - (/^[a-z]/.test(keyCode) ? 32 : 0);
     }
-    modifiers = modifiers || Modifiers.None;
+    modifiers = modifiers || Modifiers.None.value;
     return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, modifiers);
   }
 
   static makeKeyFromEvent(keyboardEvent: KeyboardEvent): number {
-    let modifiers = Modifiers.None;
+    let modifiers = Modifiers.None.value;
     if (keyboardEvent.shiftKey) {
-      modifiers |= Modifiers.Shift;
+      modifiers |= Modifiers.Shift.value;
     }
     if (keyboardEvent.ctrlKey) {
-      modifiers |= Modifiers.Ctrl;
+      modifiers |= Modifiers.Ctrl.value;
     }
     if (keyboardEvent.altKey) {
-      modifiers |= Modifiers.Alt;
+      modifiers |= Modifiers.Alt.value;
     }
     if (keyboardEvent.metaKey) {
-      modifiers |= Modifiers.Meta;
+      modifiers |= Modifiers.Meta.value;
     }
 
     // Use either a real or a synthetic keyCode (for events originating from extensions).
@@ -126,7 +126,7 @@ export class KeyboardShortcut {
   static makeKeyFromEventIgnoringModifiers(keyboardEvent: KeyboardEvent): number {
     // @ts-ignore ExtensionServer.js installs '__keyCode' on some events.
     const keyCode = keyboardEvent.keyCode || keyboardEvent['__keyCode'];
-    return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None);
+    return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None.value);
   }
 
   // This checks if a "control equivalent" key is pressed. For non-mac platforms this means checking
@@ -159,7 +159,7 @@ export class KeyboardShortcut {
     const [keyString, ...modifierStrings] = shortcut.split(/\+(?!$)/).reverse();
     let modifiers = 0;
     for (const modifierString of modifierStrings) {
-      const modifier = Modifiers[modifierString];
+      const modifier = Modifiers[modifierString].value;
       console.assert(
           typeof modifier !== 'undefined', `Only one key other than modifier is allowed in shortcut <${shortcut}>`);
       modifiers |= modifier;
@@ -168,7 +168,7 @@ export class KeyboardShortcut {
 
     const key = Keys[keyString] || KeyBindings[keyString];
     if (key && 'shiftKey' in key && key.shiftKey) {
-      modifiers |= Modifiers.Shift;
+      modifiers |= Modifiers.Shift.value;
     }
     return KeyboardShortcut.makeDescriptor(key ? key : keyString, modifiers);
   }
@@ -218,28 +218,37 @@ export class KeyboardShortcut {
     ]);
     return [m.Meta, m.Ctrl, m.Alt, m.Shift].map(mapModifiers).join('');
 
-    function mapModifiers(m: number): string {
-      return (modifiers || 0) & m ? /** @type {string} */ modifierNames.get(m) as string : '';
+    function mapModifiers(m: Modifier): string {
+      return (modifiers || 0) & m.value ? /** @type {string} */ modifierNames.get(m) as string : '';
     }
   }
 }
 
+export interface Modifier {
+  value: number;
+  name: string;
+}
+
 /**
  * Constants for encoding modifier key set as a bit mask.
  * see #makeKeyFromCodeAndModifiers
  */
 export const Modifiers: {
-  [x: string]: number,
+  [x: string]: Modifier,
 } = {
-  None: 0,
-  Shift: 1,
-  Ctrl: 2,
-  Alt: 4,
-  Meta: 8,
-  // "default" command/ctrl key for platform, Command on Mac, Ctrl on other platforms
-  CtrlOrMeta: Host.Platform.isMac() ? 8 /* Meta */ : 2 /* Ctrl */,
-  // Option on Mac, Shift on other platforms
-  ShiftOrOption: Host.Platform.isMac() ? 4 /* Alt */ : 1 /* Shift */,
+  None: {value: 0, name: 'None'},
+  Shift: {value: 1, name: 'Shift'},
+  Ctrl: {value: 2, name: 'Ctrl'},
+  Alt: {value: 4, name: 'Alt'},
+  Meta: {value: 8, name: 'Meta'},
+  CtrlOrMeta: {
+    value: Host.Platform.isMac() ? 8 /* Meta */ : 2 /* Ctrl */,
+    name: Host.Platform.isMac() ? 'Meta' : 'Ctrl',
+  },
+  ShiftOrOption: {
+    value: Host.Platform.isMac() ? 4 /* Alt */ : 1 /* Shift */,
+    name: Host.Platform.isMac() ? 'Alt' : 'Shift',
+  },
 };
 
 const leftKey = {

front_end/ui/legacy/ShortcutRegistry.ts

@@ -227,29 +227,32 @@ export class ShortcutRegistry {
       const modifiers = Modifiers;
       // Undo/Redo will also cause input, so textual undo should take precedence over DevTools undo when editing.
       if (Host.Platform.isMac()) {
-        if (KeyboardShortcut.makeKey('z', modifiers.Meta) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Meta.value) === key) {
           return true;
         }
-        if (KeyboardShortcut.makeKey('z', modifiers.Meta | modifiers.Shift) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Meta.value | modifiers.Shift.value) === key) {
           return true;
         }
       } else {
-        if (KeyboardShortcut.makeKey('z', modifiers.Ctrl) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Ctrl.value) === key) {
           return true;
         }
-        if (KeyboardShortcut.makeKey('y', modifiers.Ctrl) === key) {
+        if (KeyboardShortcut.makeKey('y', modifiers.Ctrl.value) === key) {
           return true;
         }
-        if (!Host.Platform.isWin() && KeyboardShortcut.makeKey('z', modifiers.Ctrl | modifiers.Shift) === key) {
+        if (!Host.Platform.isWin() &&
+            KeyboardShortcut.makeKey('z', modifiers.Ctrl.value | modifiers.Shift.value) === key) {
           return true;
         }
       }
 
-      if ((keyModifiers & (modifiers.Ctrl | modifiers.Alt)) === (modifiers.Ctrl | modifiers.Alt)) {
+      if ((keyModifiers & (modifiers.Ctrl.value | modifiers.Alt.value)) ===
+          (modifiers.Ctrl.value | modifiers.Alt.value)) {
         return Host.Platform.isWin();
       }
 
-      return !hasModifier(modifiers.Ctrl) && !hasModifier(modifiers.Alt) && !hasModifier(modifiers.Meta);
+      return !hasModifier(modifiers.Ctrl.value) && !hasModifier(modifiers.Alt.value) &&
+          !hasModifier(modifiers.Meta.value);
     }
 
     function hasModifier(mod: number): boolean {

front_end/ui/legacy/SoftContextMenu.ts

@@ -640,6 +640,7 @@ export interface SoftContextMenuDescriptor {
   type: 'checkbox'|'item'|'separator'|'subMenu';
   id?: number;
   label?: string;
+  accelerator?: {keyCode: number, modifiers: number};
   isExperimentalFeature?: boolean;
   enabled?: boolean;
   checked?: boolean;