[RPP] Populate shortcuts dialog with the default Timeline shortcuts

In the future we will populate it depending on the current navigation setting.
Screenshot: https://screenshot.googleplex.com/3S9S7PEVJ87LLcE

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

Author: AlinaVarkki

front_end/panels/timeline/TimelinePanel.ts

@@ -317,6 +317,22 @@ const UIStrings = {
    * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
    */
   backToLiveMetrics: 'Go back to the live metrics page',
+  /**
+   * @description Description of the Timeline in/out zoom action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineZoomInOut: 'Timeline zoom in/out',
+  /**
+   * @description Description of the Timeline fast in/out zoom action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineFastZoomInOut: 'Timeline fast zoom in/out',
+  /**
+   * @description Description of the Timeline up/down scroll action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineScrollUpDown: 'Timeline up/down',
+  /**
+   * @description Description of the Timeline right/left panning action that appears in the Performance panel shortcuts dialog.
+   */
+  timelinePanLeftRight: 'Timeline right/left',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1091,12 +1107,21 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION)) {
       // TODO: Fill the shortcuts dialog with shortcuts for the cuttently selected navigation option
       const shortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
-      shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: ['Ctrl+E']}]};
+      shortcutDialog.data = {shortcuts: this.#getShortcutsInfo()};
       const dialogToolbarItem = new UI.Toolbar.ToolbarItem(shortcutDialog);
       this.panelRightToolbar.appendToolbarItem(dialogToolbarItem);
     }
   }
 
+  #getShortcutsInfo(): ShortcutDialog.ShortcutDialog.Shortcut[] {
+    return [
+      {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Scroll', 'W/S']},
+      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S']},
+      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Shift Scroll']},
+      {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D']},
+    ];
+  }
+
   private createSettingsPane(): void {
     this.showSettingsPaneSetting =
         Common.Settings.Settings.instance().createSetting('timeline-show-settings-toolbar', false);

front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -159,15 +159,17 @@ export class ShortcutDialog extends HTMLElement {
             html`
               <li class="keybinds-list-item">
                 <div>${shortcut.title}</div>
-                ${shortcut.bindings.map(binding => {
-                  return html`
-                  <div class="keys-container">
-                    ${this.#getKeysFromBinding(binding).map(key => html`
-                        <span class="keybinds-key">${key}</span>
-                    `)}
+                <div class="shortcuts-for-actions">
+                  ${shortcut.bindings.map(binding => {
+                    return html`
+                    <div class="keys-container">
+                      ${this.#getKeysFromBinding(binding).map(key => html`
+                          <span class="keybinds-key">${key}</span>
+                      `)}
+                    </div>
+                  `;
+                    })}
                   </div>
-                `;
-                  })}
               </li>`,
           )}
         </ul>

front_end/ui/components/dialogs/shortcutDialog.css

@@ -13,7 +13,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sys-size-4) var(--sys-size-6) var(--sys-size-6) var(--sys-size-8);
+  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-8);
 }
 
 .keybinds-category-header-text {
@@ -26,7 +26,7 @@
   flex-direction: column;
   gap: var(--sys-size-4);
   margin: 0;
-  padding: 0 var(--sys-size-8);
+  padding: 0 var(--sys-size-8) var(--sys-size-3) var(--sys-size-8);
 }
 
 .keybinds-list-item {
@@ -50,6 +50,13 @@
   gap: var(--sys-size-3);
 }
 
+.shortcuts-for-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--sys-size-3);
+}
+
 .keybinds-key {
   display: flex;
   align-items: center;