Add accelerators and use native menu in Performance panel except on Mac

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

Author: Kateryna Prokopenko

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -29,6 +29,7 @@
  */
 
 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 Root from '../../core/root/root.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -213,7 +214,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
 
-    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+    // Differentiate between Mac and other platforms to use SoftContextMenu or native menus
+    // while we are gradually landing CLs to enable accelerators for native menus on Mac.
+    // We will use native menus disregarding of the platform once all CLs are in.
+    const useSoftMenu = Host.Platform.isMac();
+    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu});
 
     if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.performance-panel-context')) {
       const aiNode = this.getAIEventNodeTreeFromEntryIndex(entryIndex);
@@ -230,6 +235,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       jslogContext: 'hide-function',
     });
     hideEntryOption.setShortcut('H');
+    hideEntryOption.setAccelerator(UI.KeyboardShortcut.Keys.H, [UI.KeyboardShortcut.Modifiers.None]);
 
     const hideChildrenOption = contextMenu.defaultSection().appendItem(i18nString(UIStrings.hideChildren), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION, entryIndex);
@@ -238,6 +244,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       jslogContext: 'hide-children',
     });
     hideChildrenOption.setShortcut('C');
+    hideChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.C, [UI.KeyboardShortcut.Modifiers.None]);
 
     const hideRepeatingChildrenOption =
         contextMenu.defaultSection().appendItem(i18nString(UIStrings.hideRepeatingChildren), () => {
@@ -247,6 +254,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
           jslogContext: 'hide-repeating-children',
         });
     hideRepeatingChildrenOption.setShortcut('R');
+    hideRepeatingChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.R, [UI.KeyboardShortcut.Modifiers.None]);
 
     const resetChildrenOption = contextMenu.defaultSection().appendItem(i18nString(UIStrings.resetChildren), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.RESET_CHILDREN, entryIndex);
@@ -255,6 +263,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       jslogContext: 'reset-children',
     });
     resetChildrenOption.setShortcut('U');
+    resetChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.U, [UI.KeyboardShortcut.Modifiers.None]);
 
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.resetTrace), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.UNDO_ALL_ACTIONS, entryIndex);

front_end/ui/legacy/KeyboardShortcut.ts

@@ -324,9 +324,14 @@ export const Keys: {
   ArrowDown: downKey,
   Delete: {code: 46, name: 'Del'},
   Zero: {code: 48, name: '0'},
+  C: {code: 67, name: 'C'},
   H: {code: 72, name: 'H'},
   N: {code: 78, name: 'N'},
   P: {code: 80, name: 'P'},
+  R: {code: 82, name: 'R'},
+  U: {code: 85, name: 'U'},
+  V: {code: 86, name: 'V'},
+  X: {code: 88, name: 'X'},
   Meta: metaKey,
   F1: {code: 112, name: 'F1'},
   F2: {code: 113, name: 'F2'},