[RPP] Add scroll on 'Shift + Up/Down keys' and zoom on '+/-'

Those Shortcuts were initially proposed for the ‘Modern’ navigation only, however there is no reason to not also make them work with the ‘Classic’ navigation.
Therefore, this cl adds them to both navigation options.

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

Author: AlinaVarkki

front_end/panels/timeline/TimelinePanel.ts

@@ -1139,8 +1139,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   #getShortcutsInfo(isNavClassic: boolean): Dialogs.ShortcutDialog.Shortcut[] {
     if (isNavClassic) {
       return [
-        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Shift', 'Scroll']]},
-        {title: i18nString(UIStrings.timelineZoomInOut), bindings: [['Scroll'], ['W/S']]},
+        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Shift', 'Scroll'], ['Shift', '↑/↓']]},
+        {title: i18nString(UIStrings.timelineZoomInOut), bindings: [['Scroll'], ['W/S'], ['+/-']]},
         {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S']]},
         {title: i18nString(UIStrings.timelinePanLeftRight), bindings: [['A/D']]},
       ];
@@ -1155,7 +1155,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S'], ['Shift', '+/-']]},
       {
         title: i18nString(UIStrings.timelinePanLeftRight),
-        bindings: [['A/D'], ['Shift', 'Scroll'], ['Shift', '←/→']],
+        bindings: [['Shift', 'Scroll'], ['Shift', '←/→'], ['A/D']],
       },
     ];
   }

front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -364,42 +364,52 @@ export class ChartViewport extends UI.Widget.VBox {
     this.cursorElement.classList.toggle('hidden', !visible || this.isDraggingInternal);
   }
 
-  private onChartKeyDown(e: Event): void {
-    const mouseEvent = (e as MouseEvent);
-    this.showCursor(mouseEvent.shiftKey);
-    this.handleZoomPanKeys(e);
+  private onChartKeyDown(keyboardEvent: KeyboardEvent): void {
+    this.showCursor(keyboardEvent.shiftKey);
+    this.handleZoomPanScrollKeys(keyboardEvent);
   }
 
-  private onChartKeyUp(e: Event): void {
-    const mouseEvent = (e as MouseEvent);
-    this.showCursor(mouseEvent.shiftKey);
+  private onChartKeyUp(keyboardEvent: KeyboardEvent): void {
+    this.showCursor(keyboardEvent.shiftKey);
   }
 
-  private handleZoomPanKeys(e: Event): void {
-    const keyboardEvent = (e as KeyboardEvent);
-    // Do not zoom if the key combination has any modifiers other than shift key
-    if (UI.KeyboardShortcut.KeyboardShortcut.hasAtLeastOneModifier(e) && !keyboardEvent.shiftKey) {
+  private handleZoomPanScrollKeys(keyboardEvent: KeyboardEvent): void {
+    // Do not zoom, pan or scroll if the key combination has any modifiers other than shift key
+    if (UI.KeyboardShortcut.KeyboardShortcut.hasAtLeastOneModifier(keyboardEvent) && !keyboardEvent.shiftKey) {
       return;
     }
     const zoomFactor = keyboardEvent.shiftKey ? 0.8 : 0.3;
     const panOffset = keyboardEvent.shiftKey ? 320 : 160;
+    const scrollOffset = 50;
     switch (keyboardEvent.code) {
       case 'KeyA':
         this.handlePanGesture(-panOffset, /* animate */ true);
         break;
       case 'KeyD':
         this.handlePanGesture(panOffset, /* animate */ true);
         break;
+      case 'Equal':  // '+' key for zoom in
       case 'KeyW':
         this.handleZoomGesture(-zoomFactor);
         break;
+      case 'Minus':  // '-' key for zoom out
       case 'KeyS':
         this.handleZoomGesture(zoomFactor);
         break;
+      case 'ArrowUp':
+        if (keyboardEvent.shiftKey) {
+          this.vScrollElement.scrollTop -= scrollOffset;
+        }
+        break;
+      case 'ArrowDown':
+        if (keyboardEvent.shiftKey) {
+          this.vScrollElement.scrollTop += scrollOffset;
+        }
+        break;
       default:
         return;
     }
-    e.consume(true);
+    keyboardEvent.consume(true);
   }
 
   private handleZoomGesture(zoom: number): void {