[RPP] Pass array of bindings to the Shortcuts Dialog instead of one string that needs to be split

We might have multiple shortcuts for one actions that consists of multiple keys.
Intead of splitting the keys in ShortcutsDialog component, let's just pass an array of them

This allows to add '+' as a key : https://screenshot.googleplex.com/inueasKW4wVVPh7

Bug: 313757601
Change-Id: I797125f564b736508dc377fa90414681ccb83d63
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6039160
Reviewed-by: Nancy Li <[email protected]>
Auto-Submit: Alina Varkki <[email protected]>
Commit-Queue: Nancy Li <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: AlinaVarkki

front_end/panels/recorder/RecorderController.ts

@@ -1038,10 +1038,11 @@ export class RecorderController extends LitElement {
   }
 
   #getShortcutsInfo(): Dialogs.ShortcutDialog.Shortcut[] {
-    const getBindingForAction = (action: Actions.RecorderActions): string[] => {
+    const getBindingForAction = (action: Actions.RecorderActions): string[][] => {
       const shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(action);
-
-      return shortcuts.map(shortcut => shortcut.title());
+      const shortcutsWithSplitBindings =
+          shortcuts.map(shortcut => shortcut.title().split(/[\s+]+/).map(word => word.trim()));
+      return shortcutsWithSplitBindings;
     };
 
     return [
@@ -1053,7 +1054,7 @@ export class RecorderController extends LitElement {
         title: i18nString(UIStrings.replayRecording),
         bindings: getBindingForAction(Actions.RecorderActions.REPLAY_RECORDING),
       },
-      {title: i18nString(UIStrings.copyShortcut), bindings: [`${Host.Platform.isMac() ? '⌘ C' : 'Ctrl+C'}`]},
+      {title: i18nString(UIStrings.copyShortcut), bindings: Host.Platform.isMac() ? [['⌘', 'C']] : [['Ctrl', 'C']]},
       {
         title: i18nString(UIStrings.toggleCode),
         bindings: getBindingForAction(Actions.RecorderActions.TOGGLE_CODE_VIEW),

front_end/panels/timeline/TimelinePanel.ts

@@ -1143,18 +1143,21 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   #getShortcutsInfo(isNavClassic: boolean): ShortcutDialog.ShortcutDialog.Shortcut[] {
     if (isNavClassic) {
       return [
-        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Shift Scroll']},
-        {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Scroll', 'W/S']},
-        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S']},
-        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D']},
+        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Shift', 'Scroll']]},
+        {title: i18nString(UIStrings.timelineZoomInOut), bindings: [['Scroll'], ['W/S']]},
+        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S']]},
+        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: [['A/D']]},
       ];
     }
 
     return [
-      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Scroll', 'Shift up/down']},
-      {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Cmd Scroll', 'W/S', '+/-']},
-      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S', 'Shift +/-']},
-      {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D', 'Shift Scroll', 'Shift left/right']},
+      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Scroll'], ['Shift', 'up/down']]},
+      {title: i18nString(UIStrings.timelineZoomInOut), bindings: [['Cmd', 'Scroll'], ['W/S'], ['+/-']]},
+      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S'], ['Shift', '+/-']]},
+      {
+        title: i18nString(UIStrings.timelinePanLeftRight),
+        bindings: [['A/D'], ['Shift', 'Scroll'], ['Shift', 'left/right']],
+      },
     ];
   }
 

front_end/ui/components/dialogs/ShortcutDialog.test.ts

@@ -18,7 +18,7 @@ describeWithLocale('ShortcutDialog', () => {
     if (prependedElement) {
       shortcutDialog.prependElement(prependedElement);
     }
-    shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: ['Ctrl+E']}], open};
+    shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: [['Ctrl+E']]}], open};
     Helpers.renderElementIntoDOM(shortcutDialog);
     await coordinator.done();
 

front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -37,7 +37,7 @@ declare global {
 
 export interface Shortcut {
   title: string|Platform.UIString.LocalizedString;
-  bindings: string[];
+  bindings: string[][];
 }
 export interface ShortcutDialogData {
   shortcuts: Shortcut[];
@@ -65,10 +65,6 @@ export class ShortcutDialog extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
   }
 
-  #getKeysFromBinding(binding: string): string[] {
-    return binding.split(/[\s+]+/).map(word => word.trim());  // Split on one or more spaces or + symbols
-  }
-
   prependElement(element: HTMLElement): void {
     this.#prependedElement = element;
   }
@@ -99,7 +95,7 @@ export class ShortcutDialog extends HTMLElement {
                   ${shortcut.bindings.map(binding => {
                     return html`
                     <div class="keys-container">
-                      ${this.#getKeysFromBinding(binding).map(key => html`
+                      ${binding.map(key => html`
                           <span class="keybinds-key">${key}</span>
                       `)}
                     </div>

front_end/ui/components/docs/dialog/shortcut_dialog.ts

@@ -14,11 +14,11 @@ shortcutDialog.data = {
   shortcuts: [
     {
       title: 'First Shortcut Title',
-      bindings: ['Ctrl+E'],
+      bindings: [['Ctrl+E']],
     },
     {
       title: 'Second Shortcut Title',
-      bindings: ['Ctrl+Enter', 'F8'],
+      bindings: [['Ctrl', 'Enter'], ['F8']],
     },
   ],
 };