chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/ui/legacy/components/inline_editor/FontEditor.ts

@@ -461,7 +461,7 @@ class FontPropertyInputs {
   private readonly boundUpdateCallback: (arg0: string, arg1: string) => void;
   private readonly boundResizeCallback: () => void;
   private readonly selectedNode: SDK.DOMModel.DOMNode|null;
-  private sliderInput: UI.UIUtils.DevToolsSlider;
+  private sliderInput: HTMLInputElement;
   private textBoxInput: HTMLInputElement;
   private unitInput: HTMLSelectElement;
   private selectorInput: HTMLSelectElement;
@@ -473,7 +473,7 @@ class FontPropertyInputs {
       resizeCallback: () => void, hasUnits?: boolean) {
     this.showSliderMode = true;
     const propertyField = field.createChild('div', 'shadow-editor-field shadow-editor-flex-field');
-    this.errorText = (field.createChild('div', 'error-text') as HTMLElement);
+    this.errorText = field.createChild('div', 'error-text');
     this.errorText.textContent = i18nString(UIStrings.PleaseEnterAValidValueForSText, {PH1: propertyName});
     this.errorText.hidden = true;
     UI.ARIAUtils.markAsAlert(this.errorText);
@@ -565,19 +565,19 @@ class FontPropertyInputs {
     return {min, max, step};
   }
 
-  private createSliderInput(field: Element, jslogContext: string): UI.UIUtils.DevToolsSlider {
+  private createSliderInput(field: Element, jslogContext: string): HTMLInputElement {
     const min = this.initialRange.min;
     const max = this.initialRange.max;
     const step = this.initialRange.step;
 
-    const slider = (UI.UIUtils.createSlider(min, max, -1) as UI.UIUtils.DevToolsSlider);
-    slider.sliderElement.step = step.toString();
-    slider.sliderElement.tabIndex = 0;
+    const slider = UI.UIUtils.createSlider(min, max, -1);
+    slider.step = step.toString();
+    slider.tabIndex = 0;
     if (this.propertyInfo.value) {
-      slider.value = parseFloat(this.propertyInfo.value);
+      slider.value = this.propertyInfo.value;
     } else {
       const newValue = (min + max) / 2;
-      slider.value = newValue;
+      slider.value = newValue.toString();
     }
     slider.addEventListener('input', event => {
       this.onSliderInput(event, /** apply= */ false);
@@ -597,8 +597,8 @@ class FontPropertyInputs {
       }
     });
     field.appendChild(slider);
-    UI.ARIAUtils.setLabel(slider.sliderElement, i18nString(UIStrings.sSliderInput, {PH1: this.propertyName}));
-    slider.sliderElement.setAttribute('jslog', `${VisualLogging.slider(jslogContext).track({change: true})}`);
+    UI.ARIAUtils.setLabel(slider, i18nString(UIStrings.sSliderInput, {PH1: this.propertyName}));
+    slider.setAttribute('jslog', `${VisualLogging.slider(jslogContext).track({change: true})}`);
     return slider;
   }
 
@@ -676,9 +676,8 @@ class FontPropertyInputs {
     if (event.currentTarget) {
       const value = (event.currentTarget as HTMLInputElement).value;
       this.textBoxInput.value = '';
-      const newValue =
-          (parseFloat(this.sliderInput.sliderElement.min) + parseFloat(this.sliderInput.sliderElement.max)) / 2;
-      this.sliderInput.value = newValue;
+      const newValue = (parseFloat(this.sliderInput.min) + parseFloat(this.sliderInput.max)) / 2;
+      this.sliderInput.value = newValue.toString();
       this.setInvalidTextBoxInput(false);
       this.boundUpdateCallback(this.propertyName, value);
     }
@@ -706,12 +705,12 @@ class FontPropertyInputs {
       const units = value === '' ? '' : this.unitInput.value;
       const valueString = value + units;
       if (this.staticParams.regex.test(valueString) || (value === '' && !target.validationMessage.length)) {
-        if (parseFloat(value) > parseFloat(this.sliderInput.sliderElement.max)) {
-          this.sliderInput.sliderElement.max = value;
-        } else if (parseFloat(value) < parseFloat(this.sliderInput.sliderElement.min)) {
-          this.sliderInput.sliderElement.min = value;
+        if (parseFloat(value) > parseFloat(this.sliderInput.max)) {
+          this.sliderInput.max = value;
+        } else if (parseFloat(value) < parseFloat(this.sliderInput.min)) {
+          this.sliderInput.min = value;
         }
-        this.sliderInput.value = parseFloat(value);
+        this.sliderInput.value = value;
         this.selectorInput.value = '';
         this.setInvalidTextBoxInput(false);
         this.boundUpdateCallback(this.propertyName, valueString);
@@ -741,7 +740,7 @@ class FontPropertyInputs {
   }
 
   private createTypeToggle(field: Element, jslogContext: string): void {
-    const displaySwitcher = field.createChild('div', 'spectrum-switcher') as HTMLDivElement;
+    const displaySwitcher = field.createChild('div', 'spectrum-switcher');
     const icon = new IconButton.Icon.Icon();
     icon.data = {iconName: 'fold-more', color: 'var(--icon-default)', width: '16px', height: '16px'};
     displaySwitcher.appendChild(icon);
@@ -794,13 +793,13 @@ class FontPropertyInputs {
       hasValue = true;
       newValue = parseFloat((parseFloat(this.textBoxInput.value) * multiplier).toFixed(roundingPrecision));
     }
-    this.sliderInput.sliderElement.min = Math.min(newValue, newMin).toString();
-    this.sliderInput.sliderElement.max = Math.max(newValue, newMax).toString();
-    this.sliderInput.sliderElement.step = newStep.toString();
+    this.sliderInput.min = Math.min(newValue, newMin).toString();
+    this.sliderInput.max = Math.max(newValue, newMax).toString();
+    this.sliderInput.step = newStep.toString();
     this.textBoxInput.step = newStep.toString();
     if (hasValue) {
       this.textBoxInput.value = newValue.toString();
     }
-    this.sliderInput.value = newValue;
+    this.sliderInput.value = newValue.toString();
   }
 }

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -13,52 +13,51 @@ import cssShadowSwatchStyles from './cssShadowSwatch.css.js';
 
 const {html} = LitHtml;
 
-export class BezierSwatch extends HTMLSpanElement {
-  private readonly iconElementInternal: IconButton.Icon.Icon;
-  private textElement: HTMLElement;
+export class BezierSwatch extends HTMLElement {
+  readonly #icon: IconButton.Icon.Icon;
+  readonly #text: HTMLSpanElement;
 
   constructor() {
     super();
-    const root = UI.UIUtils.createShadowRootWithCoreStyles(this, {
-      cssFile: [bezierSwatchStyles],
-      delegatesFocus: undefined,
-    });
-    this.iconElementInternal = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
-    this.iconElementInternal.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
-    root.appendChild(this.iconElementInternal);
-    this.textElement = this.createChild('span');
+    const root = UI.UIUtils.createShadowRootWithCoreStyles(this, {cssFile: [bezierSwatchStyles]});
+    this.#icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    this.#icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
+    root.appendChild(this.#icon);
+    this.#text = document.createElement('span');
     root.createChild('slot');
   }
 
-  static create(): BezierSwatch {
-    let constructor: (() => Element)|((() => Element) | null) = BezierSwatch.constructorInternal;
-    if (!constructor) {
-      constructor = UI.UIUtils.registerCustomElement('span', 'bezier-swatch', BezierSwatch);
-      BezierSwatch.constructorInternal = constructor;
-    }
+  connectedCallback(): void {
+    this.append(this.#text);
+  }
 
-    return constructor() as BezierSwatch;
+  disconnectedCallback(): void {
+    this.#text.remove();
+  }
+
+  static create(): BezierSwatch {
+    return document.createElement('devtools-bezier-swatch');
   }
 
   bezierText(): string {
-    return this.textElement.textContent || '';
+    return this.#text.textContent || '';
   }
 
   setBezierText(text: string): void {
-    this.textElement.textContent = text;
+    this.#text.textContent = text;
   }
 
   hideText(hide: boolean): void {
-    this.textElement.hidden = hide;
+    this.#text.hidden = hide;
   }
 
-  iconElement(): HTMLSpanElement {
-    return this.iconElementInternal;
+  iconElement(): IconButton.Icon.Icon {
+    return this.#icon;
   }
-
-  private static constructorInternal: (() => Element)|null = null;
 }
 
+customElements.define('devtools-bezier-swatch', BezierSwatch);
+
 export class CSSShadowSwatch extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #icon: IconButton.Icon.Icon;
@@ -82,7 +81,7 @@ export class CSSShadowSwatch extends HTMLElement {
     return this.#model;
   }
 
-  iconElement(): HTMLSpanElement {
+  iconElement(): IconButton.Icon.Icon {
     return this.#icon;
   }
 }
@@ -91,6 +90,7 @@ customElements.define('css-shadow-swatch', CSSShadowSwatch);
 
 declare global {
   interface HTMLElementTagNameMap {
+    'devtools-bezier-swatch': BezierSwatch;
     'css-shadow-swatch': CSSShadowSwatch;
   }
 }

package/front_end/ui/legacy/components/inline_editor/bezierSwatch.css

@@ -8,15 +8,15 @@
   white-space: nowrap;
 }
 
-devtools-icon.bezier-swatch-icon {
+devtools-icon {
   position: relative;
   transform: scale(0.7);
   margin: -5px -2px -3px -4px;
   user-select: none;
   color: var(--icon-css);
   cursor: default;
-}
 
-devtools-icon.bezier-swatch-icon:hover {
-  color: var(--icon-css-hover);
+  &:hover {
+    color: var(--icon-css-hover);
+  }
 }

package/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css

@@ -50,10 +50,7 @@
 .hand,
 .dial {
   margin: auto;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 .center {

package/front_end/ui/legacy/components/inline_editor/cssAngleSwatch.css

@@ -20,10 +20,7 @@
 .mini-hand {
   position: absolute;
   margin: auto;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   height: 55%;
   width: 2px;
   background-color: var(--sys-color-tonal-container);

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -192,10 +192,8 @@ export class CustomPreviewComponent {
     this.customPreviewSection = new CustomPreviewSection(object);
     this.element = document.createElement('span');
     this.element.classList.add('source-code');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(this.element, {
-      cssFile: [customPreviewComponentStyles],
-      delegatesFocus: undefined,
-    });
+    const shadowRoot =
+        UI.UIUtils.createShadowRootWithCoreStyles(this.element, {cssFile: [customPreviewComponentStyles]});
     this.element.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
     shadowRoot.appendChild(this.customPreviewSection.element());
   }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -192,10 +192,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       readOnly?: boolean): ObjectPropertiesSection {
     const titleElement = document.createElement('span');
     titleElement.classList.add('source-code');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(titleElement, {
-      cssFile: [objectValueStyles],
-      delegatesFocus: undefined,
-    });
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(titleElement, {cssFile: [objectValueStyles]});
     const propertyValue =
         ObjectPropertiesSection.createPropertyValue(object, /* wasThrown */ false, /* showPreview */ true);
     shadowRoot.appendChild(propertyValue.element);
@@ -1176,7 +1173,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt || !treeOutline || !treeOutline.editable || this.readOnly) {
       return;
     }
-    this.editableDiv = (this.rowContainer.createChild('span', 'editable-div') as HTMLElement);
+    this.editableDiv = this.rowContainer.createChild('span', 'editable-div');
 
     if (this.property.value) {
       let text: string|(string | undefined) = this.property.value.description;

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -108,7 +108,7 @@ const colorPallettes: ColorPalette[] = [
   },
 ];
 
-/* rulesdir/no_underscored_properties, rulesdir/ban_style_tags_in_lit_html, rulesdir/ban_a_tags_in_lit_html, rulesdir/lit_html_host_this */
+/* rulesdir/no-underscored-properties, rulesdir/no-style-tags-in-lit-html, rulesdir/no-a-tags-in-lit-html, rulesdir/lit-html-host-this */
 export class BrickBreaker extends HTMLElement {
   #canvas: HTMLCanvasElement;
   #ctx: CanvasRenderingContext2D;
@@ -149,13 +149,13 @@ export class BrickBreaker extends HTMLElement {
   #currentPalette: ColorPalette;
   constructor(private timelineFlameChart: FlameChart) {
     super();
-    this.#canvas = (this.createChild('canvas', 'fill') as HTMLCanvasElement);
+    this.#canvas = this.createChild('canvas', 'fill');
     this.#ctx = this.#canvas.getContext('2d') as CanvasRenderingContext2D;
     this.#helperCanvas = document.createElement('canvas');
     this.#helperCanvasCtx = this.#helperCanvas.getContext('2d') as CanvasRenderingContext2D;
     const randomPaletteIndex = Math.floor(Math.random() * colorPallettes.length);
     this.#currentPalette = colorPallettes[randomPaletteIndex];
-    this.#scorePanel = (this.createChild('div') as HTMLElement);
+    this.#scorePanel = this.createChild('div');
     this.#scorePanel.classList.add('scorePanel');
     this.#scorePanel.style.borderImage =
         'linear-gradient(' + this.#currentPalette.mediumDarker + ',' + this.#currentPalette.dark + ') 1';
@@ -163,7 +163,7 @@ export class BrickBreaker extends HTMLElement {
   }
 
   initButton(): void {
-    const button = (this.createChild('div') as HTMLElement);
+    const button = this.createChild('div');
     button.classList.add('game-close-button');
     button.innerHTML = '<b><span style=\'font-size: 1.2em; color: white\'>x</span></b>';
     button.style.background = this.#currentPalette.dark;

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

@@ -3,17 +3,13 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../../core/common/common.js';
-import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Root from '../../../../core/root/root.js';
-import * as Coordinator from '../../../components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../components/render_coordinator/render_coordinator.js';
 import * as UI from '../../legacy.js';
 
 import chartViewPortStyles from './chartViewport.css.legacy.js';
 import {MinimalTimeWindowMs} from './FlameChart.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export interface ChartViewportDelegate {
   windowChanged(startTime: number, endTime: number, animate: boolean): void;
   updateRangeSelection(startTime: number, endTime: number): void;
@@ -33,7 +29,6 @@ export class ChartViewport extends UI.Widget.VBox {
   private vScrollElement: HTMLElement;
   private vScrollContent: HTMLElement;
   private readonly selectionOverlay: HTMLElement;
-  private selectedTimeSpanLabel: HTMLElement;
   private cursorElement: HTMLElement;
   private isDraggingInternal!: boolean;
   private totalHeight!: number;
@@ -59,8 +54,6 @@ export class ChartViewport extends UI.Widget.VBox {
 
   #config: Config;
 
-  #usingNewOverlayForTimeRange = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
-
   constructor(delegate: ChartViewportDelegate, config: Config) {
     super();
     this.#config = config;
@@ -89,17 +82,11 @@ export class ChartViewport extends UI.Widget.VBox {
     this.vScrollElement.addEventListener('scroll', this.onScroll.bind(this), false);
 
     this.selectionOverlay = this.contentElement.createChild('div', 'chart-viewport-selection-overlay hidden');
-    this.selectedTimeSpanLabel = this.selectionOverlay.createChild('div', 'time-span');
 
     this.cursorElement = this.contentElement.createChild('div', 'chart-cursor-element hidden');
-    if (this.#usingNewOverlayForTimeRange) {
-      this.cursorElement.classList.add('using-new-overlays');
-    }
 
     this.reset();
-
     this.rangeSelectionStart = null;
-
     this.rangeSelectionEnd = null;
   }
 
@@ -112,7 +99,6 @@ export class ChartViewport extends UI.Widget.VBox {
     this.rangeSelectionEnabled = false;
     this.rangeSelectionStart = null;
     this.rangeSelectionEnd = null;
-    this.updateRangeSelectionOverlay();
   }
 
   isDragging(): boolean {
@@ -218,23 +204,46 @@ export class ChartViewport extends UI.Widget.VBox {
     this.totalTime = totalTime;
   }
 
-  private onMouseWheel(e: Event): void {
-    const wheelEvent = (e as WheelEvent);
-    const doZoomInstead = wheelEvent.shiftKey !==
-        (Common.Settings.Settings.instance().moduleSetting('flamechart-mouse-wheel-action').get() === 'zoom');
-    const panVertically = !doZoomInstead && (wheelEvent.deltaY || Math.abs(wheelEvent.deltaX) === 53);
-    const panHorizontally = doZoomInstead && Math.abs(wheelEvent.deltaX) > Math.abs(wheelEvent.deltaY);
-    if (panVertically) {
-      this.vScrollElement.scrollTop += (wheelEvent.deltaY || wheelEvent.deltaX) / 53 * this.offsetHeight / 8;
-    } else if (panHorizontally) {
-      this.handlePanGesture(wheelEvent.deltaX, /* animate */ true);
-    } else {  // Zoom.
-      const wheelZoomSpeed = 1 / 53;
-      this.handleZoomGesture(Math.pow(1.2, (wheelEvent.deltaY || wheelEvent.deltaX) * wheelZoomSpeed) - 1);
+  /**
+   * The mouse wheel can results in flamechart zoom, scroll and pan actions, depending on the scroll deltas and the selected navigation:
+   *
+   * Classic navigation:
+   * 1. Mouse Wheel --> Zoom
+   * 2. Mouse Wheel + Shift --> Scroll
+   * 3. Trackpad: Mouse Wheel AND horizontal scroll (deltaX > deltaY): --> Pan left/right
+   *
+   * Modern navigation:
+   * 1. Mouse Wheel -> Scroll
+   * 2. Mouse Wheel + Shift -> Pan left/right
+   * 3. Mouse Wheel + Ctrl/Cmd -> Zoom
+   * 4. Trackpad: Mouse Wheel AND horizontal scroll (deltaX > deltaY): --> Zoom
+   */
+  private onMouseWheel(wheelEvent: WheelEvent): void {
+    const navigation = Common.Settings.Settings.instance().moduleSetting('flamechart-selected-navigation').get();
+    const scrollDelta = (wheelEvent.deltaY || wheelEvent.deltaX) / 53 * this.offsetHeight / 8;
+    const zoomDelta = Math.pow(1.2, (wheelEvent.deltaY || wheelEvent.deltaX) * 1 / 53) - 1;
+
+    if (navigation === 'classic') {
+      if (wheelEvent.shiftKey) {  // Scroll
+        this.vScrollElement.scrollTop += scrollDelta;
+      } else if (Math.abs(wheelEvent.deltaX) > Math.abs(wheelEvent.deltaY)) {  // Pan left/right
+        this.handlePanGesture(wheelEvent.deltaX, /* animate */ true);
+      } else {  // Zoom
+        this.handleZoomGesture(zoomDelta);
+      }
+    } else if (navigation === 'modern') {
+      const isCtrlOrCmd = UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(wheelEvent);
+      if (wheelEvent.shiftKey) {  // Pan left/right
+        this.handlePanGesture(wheelEvent.deltaY, /* animate */ true);
+      } else if (isCtrlOrCmd || Math.abs(wheelEvent.deltaX) > Math.abs(wheelEvent.deltaY)) {  // Zoom
+        this.handleZoomGesture(zoomDelta);
+      } else {  // Scroll
+        this.vScrollElement.scrollTop += scrollDelta;
+      }
     }
 
     // Block swipe gesture.
-    e.consume(true);
+    wheelEvent.consume(true);
   }
 
   private startDragging(event: MouseEvent): boolean {
@@ -268,13 +277,6 @@ export class ChartViewport extends UI.Widget.VBox {
     this.isDraggingInternal = true;
     this.selectionOffsetShiftX = event.offsetX - event.pageX;
     this.selectionStartX = event.offsetX;
-    if (!this.#usingNewOverlayForTimeRange) {
-      const style = this.selectionOverlay.style;
-      style.left = this.selectionStartX + 'px';
-      style.width = '1px';
-      this.selectedTimeSpanLabel.textContent = '';
-      this.selectionOverlay.classList.remove('hidden');
-    }
     return true;
   }
 
@@ -300,7 +302,6 @@ export class ChartViewport extends UI.Widget.VBox {
     }
     this.rangeSelectionStart = Math.min(startTime, endTime);
     this.rangeSelectionEnd = Math.max(startTime, endTime);
-    this.updateRangeSelectionOverlay();
     this.delegate.updateRangeSelection(this.rangeSelectionStart, this.rangeSelectionEnd);
   }
 
@@ -321,25 +322,6 @@ export class ChartViewport extends UI.Widget.VBox {
     this.setRangeSelection(start, end);
   }
 
-  private updateRangeSelectionOverlay(): void {
-    if (this.#usingNewOverlayForTimeRange) {
-      return;
-    }
-
-    const rangeSelectionStart = this.rangeSelectionStart || 0;
-    const rangeSelectionEnd = this.rangeSelectionEnd || 0;
-    const margin = 100;
-    const left =
-        Platform.NumberUtilities.clamp(this.timeToPosition(rangeSelectionStart), -margin, this.offsetWidth + margin);
-    const right =
-        Platform.NumberUtilities.clamp(this.timeToPosition(rangeSelectionEnd), -margin, this.offsetWidth + margin);
-    const style = this.selectionOverlay.style;
-    style.left = left + 'px';
-    style.width = (right - left) + 'px';
-    const timeSpan = rangeSelectionEnd - rangeSelectionStart;
-    this.selectedTimeSpanLabel.textContent = i18n.TimeUtilities.preciseMillisToString(timeSpan, 2);
-  }
-
   private onScroll(): void {
     this.scrollTop = this.vScrollElement.scrollTop;
     this.scheduleUpdate();
@@ -381,25 +363,23 @@ 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 panOffset = 160;
+    const scrollOffset = 50;
     switch (keyboardEvent.code) {
       case 'KeyA':
         this.handlePanGesture(-panOffset, /* animate */ true);
@@ -407,16 +387,38 @@ export class ChartViewport extends UI.Widget.VBox {
       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;
+      case 'ArrowLeft':
+        if (keyboardEvent.shiftKey) {
+          this.handlePanGesture(-panOffset, /* animate */ true);
+        }
+        break;
+      case 'ArrowRight':
+        if (keyboardEvent.shiftKey) {
+          this.handlePanGesture(panOffset, /* animate */ true);
+        }
+        break;
       default:
         return;
     }
-    e.consume(true);
+    keyboardEvent.consume(true);
   }
 
   private handleZoomGesture(zoom: number): void {
@@ -465,14 +467,13 @@ export class ChartViewport extends UI.Widget.VBox {
       return;
     }
     this.isUpdateScheduled = true;
-    void coordinator.write(() => {
+    void RenderCoordinator.write(() => {
       this.isUpdateScheduled = false;
       this.update();
     });
   }
 
-  private update(): void {
-    this.updateRangeSelectionOverlay();
+  override update(): void {
     this.delegate.update();
   }
 

package/front_end/ui/legacy/components/perf_ui/FilmStripView.test.ts

@@ -51,7 +51,7 @@ describeWithEnvironment('FilmStripView', function() {
       // expected text.
       assert.strictEqual(timeElement.innerText.replace(/\s/, ''), expectedTimeLabelsForFrames[index]);
     });
-    assert.deepStrictEqual(1, 1);
+    assert.deepEqual(1, 1);
 
     filmStrip.detach();
   });

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -77,7 +77,7 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
     element.setAttribute('jslog', `${VisualLogging.preview('film-strip').track({click: true, dblclick: true})}`);
     element.setAttribute('aria-label', i18nString(UIStrings.screenshotForSSelectToView, {PH1: frameTime}));
     UI.ARIAUtils.markAsButton(element);
-    const imageElement = (element.createChild('div', 'thumbnail').createChild('img') as HTMLImageElement);
+    const imageElement = element.createChild('div', 'thumbnail').createChild('img');
     imageElement.alt = i18nString(UIStrings.screenshot);
     element.addEventListener('mousedown', this.onMouseEvent.bind(this, Events.FRAME_SELECTED, time), false);
     element.addEventListener('mouseenter', this.onMouseEvent.bind(this, Events.FRAME_ENTER, time), false);
@@ -90,7 +90,7 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return element;
   }
 
-  update(): void {
+  override update(): void {
     const frames = this.#filmStrip?.frames;
     if (!frames || frames.length < 1) {
       return;