[RPP] Change shortcut for creating Time Range annotations and add a keyboard only panning

Change the shortcut for the time range annotion in order to free the 'Shift + left/right arrows' for panning, which likely is a more common action and will work well together with 'Shift + down/up arrows' for scrolling.

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

Author: AlinaVarkki

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -125,7 +125,7 @@ export class TimelineFlameChartView extends
   #overlaysContainer: HTMLElement = document.createElement('div');
   #overlays: Overlays.Overlays.Overlays;
 
-  // Tracks the in-progress time range annotation when the user shift clicks + drags, or when the user uses the keyboard
+  // Tracks the in-progress time range annotation when the user alt/option clicks + drags, or when the user uses the keyboard
   #timeRangeSelectionAnnotation: Trace.Types.File.TimeRangeAnnotation|null = null;
 
   // Keep track of the link annotation that hasn't been fully selected yet.
@@ -703,10 +703,10 @@ export class TimelineFlameChartView extends
 
     switch (event.key) {
       // ArrowLeft + ArrowRight adjusts the right hand bound (the max) of the time range
-      // Shift + ArrowRight also starts a range if there isn't one already
+      // alt/option + ArrowRight also starts a range if there isn't one already
       case 'ArrowRight': {
         if (!this.#timeRangeSelectionAnnotation) {
-          if (event.shiftKey) {
+          if (event.altKey) {
             let startTime = visibleWindow.min;
             // Prefer the start time of the selected event, if there is one.
             if (this.#currentSelection) {

front_end/panels/timeline/TimelinePanel.ts

@@ -1141,8 +1141,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return [
         {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']]},
+        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S'], ['Shift', '+/-']]},
+        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: [['Shift', '←/→'], ['A/D']]},
       ];
     }
 

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

@@ -379,7 +379,7 @@ export class ChartViewport extends UI.Widget.VBox {
       return;
     }
     const zoomFactor = keyboardEvent.shiftKey ? 0.8 : 0.3;
-    const panOffset = keyboardEvent.shiftKey ? 320 : 160;
+    const panOffset = 160;
     const scrollOffset = 50;
     switch (keyboardEvent.code) {
       case 'KeyA':
@@ -406,6 +406,16 @@ export class ChartViewport extends UI.Widget.VBox {
           this.vScrollElement.scrollTop += scrollOffset;
         }
         break;
+      case 'ArrowLeft':
+        if (keyboardEvent.shiftKey) {
+          this.handlePanGesture(-panOffset, /* animate */ true);
+        }
+        break;
+      case 'ArrowRight':
+        if (keyboardEvent.shiftKey) {
+          this.handlePanGesture(panOffset, /* animate */ true);
+        }
+        break;
       default:
         return;
     }