chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -31,7 +31,6 @@
 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 Trace from '../../../../models/trace/trace.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -59,6 +58,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class OverviewGrid {
   element: HTMLDivElement;
   private readonly grid: TimelineGrid;
+  // The |window| will manage the html element of resizers, the left/right blue-colour curtain, and handle the resizing,
+  // zooming, and breadcrumb creation.
   private readonly window: Window;
   constructor(prefix: string, calculator?: Calculator) {
     this.element = document.createElement('div');
@@ -101,16 +102,30 @@ export class OverviewGrid {
     this.window.reset();
   }
 
-  windowLeft(): number {
-    return this.window.windowLeft || 0;
+  // The ratio of the left slider position compare to the whole overview grid.
+  // It should be a number between 0 and 1.
+  windowLeftRatio(): number {
+    return this.window.windowLeftRatio || 0;
   }
 
-  windowRight(): number {
-    return this.window.windowRight || 0;
+  // The ratio of the right slider position compare to the whole overview grid.
+  // It should be a number between 0 and 1.
+  windowRightRatio(): number {
+    return this.window.windowRightRatio || 0;
   }
 
-  setWindow(left: number, right: number): void {
-    this.window.setWindow(left, right);
+  /**
+   * This function will return the raw value of the slider window.
+   * Since the OverviewGrid is used in Performance panel or Memory panel, the raw value can be in milliseconds or bytes.
+   *
+   * @returns the pair of start/end value of the slider window in milliseconds or bytes
+   */
+  calculateWindowValue(): {rawStartValue: number, rawEndValue: number} {
+    return this.window.calculateWindowValue();
+  }
+
+  setWindowRatio(leftRatio: number, rightRatio: number): void {
+    this.window.setWindowRatio(leftRatio, rightRatio);
   }
 
   addEventListener<T extends keyof EventTypes>(
@@ -128,14 +143,14 @@ export class OverviewGrid {
   }
 
   setResizeEnabled(enabled: boolean): void {
-    this.window.setEnabled(enabled);
+    this.window.setResizeEnabled(enabled);
   }
 }
 
-export const MinSelectableSize = 14;
-export const WindowScrollSpeedFactor = .3;
-export const ResizerOffset = 5;
-export const OffsetFromWindowEnds = 10;
+const MinSelectableSize = 14;
+const WindowScrollSpeedFactor = .3;
+const ResizerOffset = 5;
+const OffsetFromWindowEnds = 10;
 
 export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private parentElement: Element;
@@ -151,12 +166,16 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   private overviewWindowSelector!: WindowSelector|undefined;
   private offsetLeft!: number;
-  private dragStartPoint!: number;
-  private dragStartLeft!: number;
-  private dragStartRight!: number;
-  windowLeft?: number;
-  windowRight?: number;
-  private enabled?: boolean;
+  private dragStartPointPixel!: number;
+  private dragStartLeftRatio!: number;
+  private dragStartRightRatio!: number;
+
+  // The ratio of the left/right resizer position compare to the whole overview grid.
+  // They should be a number between 0 and 1.
+  windowLeftRatio = 0;
+  windowRightRatio = 1;
+
+  private resizeEnabled?: boolean;
   private clickHandler?: ((arg0: Event) => boolean)|null;
   private resizerParentOffsetLeft?: number;
   #breadcrumbsEnabled: boolean = false;
@@ -248,7 +267,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
     element.addEventListener('mouseover', () => {
-      if ((this.windowLeft ?? 0) <= 0 && (this.windowRight ?? 1) >= 1) {
+      if (this.windowLeftRatio <= 0 && this.windowRightRatio >= 1) {
         this.breadcrumbButtonContainerElement.classList.toggle('is-breadcrumb-button-visible', false);
         this.#mouseOverGridOverview = false;
       } else {
@@ -275,16 +294,16 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   reset(): void {
-    this.windowLeft = 0.0;
-    this.windowRight = 1.0;
-    this.setEnabled(true);
+    this.windowLeftRatio = 0;
+    this.windowRightRatio = 1;
+    this.setResizeEnabled(true);
     this.updateCurtains();
   }
 
-  setEnabled(enabled: boolean): void {
-    this.enabled = enabled;
-    this.rightResizeElement.tabIndex = enabled ? 0 : -1;
-    this.leftResizeElement.tabIndex = enabled ? 0 : -1;
+  setResizeEnabled(resizeEnabled: boolean): void {
+    this.resizeEnabled = resizeEnabled;
+    this.rightResizeElement.tabIndex = resizeEnabled ? 0 : -1;
+    this.leftResizeElement.tabIndex = resizeEnabled ? 0 : -1;
   }
 
   setClickHandler(clickHandler: ((arg0: Event) => boolean)|null): void {
@@ -294,7 +313,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private resizerElementStartDragging(event: Event): boolean {
     const mouseEvent = (event as MouseEvent);
     const target = (event.target as HTMLElement);
-    if (!this.enabled) {
+    if (!this.resizeEnabled) {
       return false;
     }
     this.resizerParentOffsetLeft = mouseEvent.pageX - mouseEvent.offsetX - target.offsetLeft;
@@ -351,7 +370,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   private startWindowSelectorDragging(event: Event): boolean {
-    if (!this.enabled) {
+    if (!this.resizeEnabled) {
       return false;
     }
     const mouseEvent = (event as MouseEvent);
@@ -404,9 +423,9 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   private startWindowDragging(event: Event): boolean {
     const mouseEvent = (event as MouseEvent);
-    this.dragStartPoint = mouseEvent.pageX;
-    this.dragStartLeft = this.windowLeft || 0;
-    this.dragStartRight = this.windowRight || 0;
+    this.dragStartPointPixel = mouseEvent.pageX;
+    this.dragStartLeftRatio = this.windowLeftRatio;
+    this.dragStartRightRatio = this.windowRightRatio;
     event.stopPropagation();
     return true;
   }
@@ -418,16 +437,16 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     }
     const mouseEvent = (event as MouseEvent);
     mouseEvent.preventDefault();
-    let delta: number = (mouseEvent.pageX - this.dragStartPoint) / this.parentElement.clientWidth;
-    if (this.dragStartLeft + delta < 0) {
-      delta = -this.dragStartLeft;
+    let delta: number = (mouseEvent.pageX - this.dragStartPointPixel) / this.parentElement.clientWidth;
+    if (this.dragStartLeftRatio + delta < 0) {
+      delta = -this.dragStartLeftRatio;
     }
 
-    if (this.dragStartRight + delta > 1) {
-      delta = 1 - this.dragStartRight;
+    if (this.dragStartRightRatio + delta > 1) {
+      delta = 1 - this.dragStartRightRatio;
     }
 
-    this.setWindow(this.dragStartLeft + delta, this.dragStartRight + delta);
+    this.setWindowRatio(this.dragStartLeftRatio + delta, this.dragStartRightRatio + delta);
   }
 
   private resizeWindowLeft(start: number): void {
@@ -456,6 +475,12 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.setWindowPosition(0, this.parentElement.clientWidth);
   }
 
+  /**
+   * This function will return the raw value of the give slider.
+   * Since the OverviewGrid is used in Performance panel or Memory panel, the raw value can be in milliseconds or bytes.
+   * @param leftSlider if this slider is the left one
+   * @returns the value in milliseconds or bytes
+   */
   private getRawSliderValue(leftSlider?: boolean): number {
     if (!this.calculator) {
       throw new Error('No calculator to calculate boundaries');
@@ -464,14 +489,14 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     const minimumValue = this.calculator.minimumBoundary();
     const valueSpan = this.calculator.maximumBoundary() - minimumValue;
     if (leftSlider) {
-      return minimumValue + valueSpan * (this.windowLeft || 0);
+      return minimumValue + valueSpan * this.windowLeftRatio;
     }
-    return minimumValue + valueSpan * (this.windowRight || 0);
+    return minimumValue + valueSpan * this.windowRightRatio;
   }
 
-  private updateResizeElementPositionValue(leftValue: number, rightValue: number): void {
-    const roundedLeftValue = leftValue.toFixed(2);
-    const roundedRightValue = rightValue.toFixed(2);
+  private updateResizeElementAriaValue(leftPercentValue: number, rightPercentValue: number): void {
+    const roundedLeftValue = leftPercentValue.toFixed(2);
+    const roundedRightValue = rightPercentValue.toFixed(2);
     UI.ARIAUtils.setAriaValueNow(this.leftResizeElement, roundedLeftValue);
     UI.ARIAUtils.setAriaValueNow(this.rightResizeElement, roundedRightValue);
 
@@ -486,10 +511,8 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     if (!this.calculator) {
       return;
     }
-    const startValue =
-        this.calculator.formatValue(Trace.Types.Timing.MilliSeconds(this.getRawSliderValue(/* leftSlider */ true)));
-    const endValue =
-        this.calculator.formatValue(Trace.Types.Timing.MilliSeconds(this.getRawSliderValue(/* leftSlider */ false)));
+    const startValue = this.calculator.formatValue(this.getRawSliderValue(/* leftSlider */ true));
+    const endValue = this.calculator.formatValue(this.getRawSliderValue(/* leftSlider */ false));
     UI.ARIAUtils.setAriaValueText(this.leftResizeElement, String(startValue));
     UI.ARIAUtils.setAriaValueText(this.rightResizeElement, String(endValue));
   }
@@ -499,34 +522,40 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     UI.ARIAUtils.setAriaValueText(this.rightResizeElement, rightValue);
   }
 
-  private calculateWindowPosition(): {
+  /**
+   * This function will return the raw value of the slider window.
+   * Since the OverviewGrid is used in Performance panel or Memory panel, the raw value can be in milliseconds or bytes.
+   *
+   * @returns the pair of start/end value of the slider window in milliseconds or bytes
+   */
+  calculateWindowValue(): {
     rawStartValue: number,
     rawEndValue: number,
   } {
     return {
-      rawStartValue: Number(this.getRawSliderValue(/* leftSlider */ true)),
-      rawEndValue: Number(this.getRawSliderValue(/* leftSlider */ false)),
+      rawStartValue: this.getRawSliderValue(/* leftSlider */ true),
+      rawEndValue: this.getRawSliderValue(/* leftSlider */ false),
     };
   }
 
-  setWindow(windowLeft: number, windowRight: number): void {
-    this.windowLeft = windowLeft;
-    this.windowRight = windowRight;
+  setWindowRatio(windowLeftRatio: number, windowRightRatio: number): void {
+    this.windowLeftRatio = windowLeftRatio;
+    this.windowRightRatio = windowRightRatio;
     this.updateCurtains();
     if (this.calculator) {
-      this.dispatchEventToListeners(Events.WINDOW_CHANGED_WITH_POSITION, this.calculateWindowPosition());
+      this.dispatchEventToListeners(Events.WINDOW_CHANGED_WITH_POSITION, this.calculateWindowValue());
     }
     this.dispatchEventToListeners(Events.WINDOW_CHANGED);
-    this.#changeBreadcrumbButtonVisibility(windowLeft, windowRight);
+    this.#changeBreadcrumbButtonVisibility(windowLeftRatio, windowRightRatio);
   }
 
   // "Create breadcrumb" button is only visible when the window is set to
   // something other than the full range and mouse is hovering over the MiniMap
-  #changeBreadcrumbButtonVisibility(windowLeft: number, windowRight: number): void {
+  #changeBreadcrumbButtonVisibility(windowLeftRatio: number, windowRightRatio: number): void {
     if (!this.#breadcrumbsEnabled) {
       return;
     }
-    if ((windowRight >= 1 && windowLeft <= 0) || !this.#mouseOverGridOverview) {
+    if ((windowRightRatio >= 1 && windowLeftRatio <= 0) || !this.#mouseOverGridOverview) {
       this.breadcrumbButtonContainerElement.classList.toggle('is-breadcrumb-button-visible', false);
     } else {
       this.breadcrumbButtonContainerElement.classList.toggle('is-breadcrumb-button-visible', true);
@@ -534,30 +563,30 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   #createBreadcrumb(): void {
-    this.dispatchEventToListeners(Events.BREADCRUMB_ADDED, this.calculateWindowPosition());
+    this.dispatchEventToListeners(Events.BREADCRUMB_ADDED, this.calculateWindowValue());
   }
 
   private updateCurtains(): void {
-    const windowLeft = this.windowLeft || 0;
-    const windowRight = this.windowRight || 0;
-    let left = windowLeft;
-    let right = windowRight;
-    const width = right - left;
+    const windowLeftRatio = this.windowLeftRatio;
+    const windowRightRatio = this.windowRightRatio;
+    let leftRatio = windowLeftRatio;
+    let rightRatio = windowRightRatio;
+    const widthRatio = rightRatio - leftRatio;
 
     // OverviewGrids that are instantiated before the parentElement is shown will have a parent element client width of 0 which throws off the 'factor' calculation
     if (this.parentElement.clientWidth !== 0) {
       // We allow actual time window to be arbitrarily small but don't want the UI window to be too small.
-      const widthInPixels = width * this.parentElement.clientWidth;
+      const widthInPixels = widthRatio * this.parentElement.clientWidth;
       const minWidthInPixels = MinSelectableSize / 2;
       if (widthInPixels < minWidthInPixels) {
         const factor = minWidthInPixels / widthInPixels;
-        left = ((windowRight + windowLeft) - width * factor) / 2;
-        right = ((windowRight + windowLeft) + width * factor) / 2;
+        leftRatio = ((windowRightRatio + windowLeftRatio) - widthRatio * factor) / 2;
+        rightRatio = ((windowRightRatio + windowLeftRatio) + widthRatio * factor) / 2;
       }
     }
-    const leftResizerPercLeftOffset = (100 * left);
-    const rightResizerPercLeftOffset = (100 * right);
-    const rightResizerPercRightOffset = (100 - (100 * right));
+    const leftResizerPercLeftOffset = (100 * leftRatio);
+    const rightResizerPercLeftOffset = (100 * rightRatio);
+    const rightResizerPercRightOffset = (100 - (100 * rightRatio));
 
     const leftResizerPercLeftOffsetString = leftResizerPercLeftOffset + '%';
     const rightResizerPercLeftOffsetString = rightResizerPercLeftOffset + '%';
@@ -577,17 +606,17 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       this.curtainsRange.textContent = this.getWindowRange().toFixed(0) + ' ms';
     }
 
-    this.updateResizeElementPositionValue(leftResizerPercLeftOffset, rightResizerPercLeftOffset);
+    this.updateResizeElementAriaValue(leftResizerPercLeftOffset, rightResizerPercLeftOffset);
     if (this.calculator) {
       this.updateResizeElementPositionLabels();
     } else {
       this.updateResizeElementPercentageLabels(leftResizerPercLeftOffsetString, rightResizerPercLeftOffsetString);
     }
 
-    this.toggleZoomButtonDisplay();
+    this.toggleBreadcrumbZoomButtonDisplay();
   }
 
-  private toggleZoomButtonDisplay(): void {
+  private toggleBreadcrumbZoomButtonDisplay(): void {
     if (this.breadcrumbZoomIcon) {
       // disable button that creates breadcrumbs and hide the zoom icon
       // when the selected window is smaller than 4.5 ms
@@ -607,21 +636,21 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       throw new Error('No calculator to calculate window range');
     }
 
-    const left = (this.windowLeft && this.windowLeft > 0) ? this.windowLeft : 0;
-    const right = (this.windowRight && this.windowRight < 1) ? this.windowRight : 1;
-    return (this.calculator.boundarySpan() * (right - left));
+    const leftRatio = this.windowLeftRatio > 0 ? this.windowLeftRatio : 0;
+    const rightRatio = this.windowRightRatio < 1 ? this.windowRightRatio : 1;
+    return (this.calculator.boundarySpan() * (rightRatio - leftRatio));
   }
 
-  private setWindowPosition(start: number|null, end: number|null): void {
+  private setWindowPosition(startPixel: number|null, endPixel: number|null): void {
     const clientWidth = this.parentElement.clientWidth;
-    const windowLeft = typeof start === 'number' ? start / clientWidth : this.windowLeft;
-    const windowRight = typeof end === 'number' ? end / clientWidth : this.windowRight;
-    this.setWindow(windowLeft || 0, windowRight || 0);
+    const windowLeft = typeof startPixel === 'number' ? startPixel / clientWidth : this.windowLeftRatio;
+    const windowRight = typeof endPixel === 'number' ? endPixel / clientWidth : this.windowRightRatio;
+    this.setWindowRatio(windowLeft || 0, windowRight || 0);
   }
 
   private onMouseWheel(event: Event): void {
     const wheelEvent = (event as WheelEvent);
-    if (!this.enabled) {
+    if (!this.resizeEnabled) {
       return;
     }
     if (wheelEvent.deltaY) {
@@ -633,38 +662,38 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     }
     if (wheelEvent.deltaX) {
       let offset = Math.round(wheelEvent.deltaX * WindowScrollSpeedFactor);
-      const windowLeft = this.leftResizeElement.offsetLeft + ResizerOffset;
-      const windowRight = this.rightResizeElement.offsetLeft + ResizerOffset;
+      const windowLeftPixel = this.leftResizeElement.offsetLeft + ResizerOffset;
+      const windowRightPixel = this.rightResizeElement.offsetLeft + ResizerOffset;
 
-      if (windowLeft - offset < 0) {
-        offset = windowLeft;
+      if (windowLeftPixel - offset < 0) {
+        offset = windowLeftPixel;
       }
 
-      if (windowRight - offset > this.parentElement.clientWidth) {
-        offset = windowRight - this.parentElement.clientWidth;
+      if (windowRightPixel - offset > this.parentElement.clientWidth) {
+        offset = windowRightPixel - this.parentElement.clientWidth;
       }
 
-      this.setWindowPosition(windowLeft - offset, windowRight - offset);
+      this.setWindowPosition(windowLeftPixel - offset, windowRightPixel - offset);
 
       wheelEvent.preventDefault();
     }
   }
 
   zoom(factor: number, reference: number): void {
-    let left: number = this.windowLeft || 0;
-    let right: number = this.windowRight || 0;
-    const windowSize = right - left;
-    let newWindowSize: 1|number = factor * windowSize;
-    if (newWindowSize > 1) {
-      newWindowSize = 1;
-      factor = newWindowSize / windowSize;
-    }
-    left = reference + (left - reference) * factor;
-    left = Platform.NumberUtilities.clamp(left, 0, 1 - newWindowSize);
-
-    right = reference + (right - reference) * factor;
-    right = Platform.NumberUtilities.clamp(right, newWindowSize, 1);
-    this.setWindow(left, right);
+    let leftRatio: number = this.windowLeftRatio || 0;
+    let rightRatio: number = this.windowRightRatio || 0;
+    const windowSizeRatio = rightRatio - leftRatio;
+    let newWindowSizeRatio: 1|number = factor * windowSizeRatio;
+    if (newWindowSizeRatio > 1) {
+      newWindowSizeRatio = 1;
+      factor = newWindowSizeRatio / windowSizeRatio;
+    }
+    leftRatio = reference + (leftRatio - reference) * factor;
+    leftRatio = Platform.NumberUtilities.clamp(leftRatio, 0, 1 - newWindowSizeRatio);
+
+    rightRatio = reference + (rightRatio - reference) * factor;
+    rightRatio = Platform.NumberUtilities.clamp(rightRatio, newWindowSizeRatio, 1);
+    this.setWindowRatio(leftRatio, rightRatio);
   }
 }
 

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

@@ -38,7 +38,6 @@ export interface PieChartData {
 // the correct initial size. This avoids a layout shift when the slices are
 // later populated.
 export class PieChart extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-perf-piechart`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private chartName = '';
   private size = 0;

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

@@ -275,9 +275,11 @@ export class TimelineGrid {
   }
 }
 
+// The TimelineGrid is used in the Performance panel and Memory panel -> Allocating sampling, so the value can be either
+// milliseconds or bytes
 export interface Calculator {
-  computePosition(time: number): number;
-  formatValue(time: number, precision?: number): string;
+  computePosition(value: number): number;
+  formatValue(value: number, precision?: number): string;
   minimumBoundary(): number;
   zeroTime(): number;
   maximumBoundary(): number;

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

@@ -23,14 +23,14 @@ describeWithLocale('TimelineOverviewCalculator', () => {
     calculator.setDisplayWidth(200);
     calculator.setBounds(MilliSeconds(0), MilliSeconds(100));
 
-    assert.strictEqual(calculator.positionToTime(100), 50);
+    assert.strictEqual(calculator.positionToTime(100), MilliSeconds(50));
   });
 
   it('formats time values', async () => {
     const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator();
     calculator.setDisplayWidth(200);
     calculator.setBounds(MilliSeconds(0), MilliSeconds(100));
-    const result = calculator.formatValue(55.234);
+    const result = calculator.formatValue(MilliSeconds(55.234));
     assert.deepEqual(result, '55\u00A0ms');
   });
 
@@ -38,7 +38,7 @@ describeWithLocale('TimelineOverviewCalculator', () => {
     const calculator = new PerfUI.TimelineOverviewCalculator.TimelineOverviewCalculator();
     calculator.setDisplayWidth(200);
     calculator.setBounds(MilliSeconds(0), MilliSeconds(100));
-    const result = calculator.formatValue(55.234, 2);
+    const result = calculator.formatValue(MilliSeconds(55.234), 2);
     assert.deepEqual(result, '55.23\u00A0ms');
   });
 
@@ -49,10 +49,15 @@ describeWithLocale('TimelineOverviewCalculator', () => {
     const fakeNavStart = {
       // Trace Engine events are in microseconds
       ts: 100_000,
+      args: {
+        data: {
+          documentLoaderURL: 'https://example.com',
+        },
+      },
     } as unknown as Trace.Types.Events.NavigationStart;
     calculator.setNavStartTimes([fakeNavStart]);
     // There is a navigation at 100ms, so this time gets changed to 5ms
-    const result = calculator.formatValue(105);
+    const result = calculator.formatValue(MilliSeconds(105));
     assert.deepEqual(result, '5\u00A0ms');
   });
 

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

@@ -17,8 +17,8 @@ export class TimelineOverviewCalculator implements Calculator {
     return (time - this.#minimumBoundary) / this.boundarySpan() * this.workingArea;
   }
 
-  positionToTime(position: number): number {
-    return position / this.workingArea * this.boundarySpan() + this.#minimumBoundary;
+  positionToTime(position: number): Trace.Types.Timing.MilliSeconds {
+    return Trace.Types.Timing.MilliSeconds(position / this.workingArea * this.boundarySpan() + this.#minimumBoundary);
   }
 
   setBounds(minimumBoundary: Trace.Types.Timing.MilliSeconds, maximumBoundary: Trace.Types.Timing.MilliSeconds): void {
@@ -41,7 +41,7 @@ export class TimelineOverviewCalculator implements Calculator {
     );
   }
 
-  formatValue(value: number, precision?: number): string {
+  formatValue(time: Trace.Types.Timing.MilliSeconds, precision?: number): string {
     // If there are nav start times the value needs to be remapped.
     if (this.navStartTimes) {
       // Find the latest possible nav start time which is considered earlier
@@ -51,14 +51,14 @@ export class TimelineOverviewCalculator implements Calculator {
             this.navStartTimes[i].ts,
         );
 
-        if (value > startTimeMilliseconds) {
-          value -= (startTimeMilliseconds - this.zeroTime());
+        if (time > startTimeMilliseconds) {
+          time = Trace.Types.Timing.MilliSeconds(time - (startTimeMilliseconds - this.zeroTime()));
           break;
         }
       }
     }
 
-    return i18n.TimeUtilities.preciseMillisToString(value - this.zeroTime(), precision);
+    return i18n.TimeUtilities.preciseMillisToString(time - this.zeroTime(), precision);
   }
 
   maximumBoundary(): Trace.Types.Timing.MilliSeconds {

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

@@ -92,9 +92,9 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   enableCreateBreadcrumbsButton(): void {
-    const breacrumbsElement = this.overviewGrid.enableCreateBreadcrumbsButton();
-    breacrumbsElement.addEventListener('mousemove', this.onMouseMove.bind(this), true);
-    breacrumbsElement.addEventListener('mouseleave', this.hideCursor.bind(this), true);
+    const breadcrumbsElement = this.overviewGrid.enableCreateBreadcrumbsButton();
+    breadcrumbsElement.addEventListener('mousemove', this.onMouseMove.bind(this), true);
+    breadcrumbsElement.addEventListener('mouseleave', this.hideCursor.bind(this), true);
   }
 
   private onMouseMove(event: Event): void {
@@ -108,6 +108,19 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.cursorPosition = mouseEvent.offsetX + offsetLeftRelativeToCursorArea;
     this.cursorElement.style.left = this.cursorPosition + 'px';
     this.cursorElement.style.visibility = 'visible';
+
+    // Dispatch an event to notify the flame chart to show a timestamp marker for the current timestamp if it's visible
+    // in the flame chart.
+    const timeInMilliSeconds = this.overviewCalculator.positionToTime(this.cursorPosition);
+    const timeWindow = this.overviewGrid.calculateWindowValue();
+    if (Trace.Types.Timing.MilliSeconds(timeWindow.rawStartValue) <= timeInMilliSeconds &&
+        timeInMilliSeconds <= Trace.Types.Timing.MilliSeconds(timeWindow.rawEndValue)) {
+      const timeInMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(timeInMilliSeconds);
+      this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_MOVE, {timeInMicroSeconds});
+    } else {
+      this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_LEAVE);
+    }
+
     void this.overviewInfo.setContent(this.buildOverviewInfo());
   }
 
@@ -123,6 +136,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 
   private hideCursor(): void {
     this.cursorElement.style.visibility = 'hidden';
+    this.dispatchEventToListeners(Events.OVERVIEW_PANE_MOUSE_LEAVE);
     this.overviewInfo.hide();
   }
 
@@ -290,7 +304,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     const left = haveRecords && this.windowStartTime ? Math.min((this.windowStartTime - absoluteMin) / timeSpan, 1) : 0;
     const right = haveRecords && this.windowEndTime < Infinity ? (this.windowEndTime - absoluteMin) / timeSpan : 1;
     this.muteOnWindowChanged = true;
-    this.overviewGrid.setWindow(left, right);
+    this.overviewGrid.setWindowRatio(left, right);
     this.muteOnWindowChanged = false;
   }
 
@@ -351,7 +365,8 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 export const enum Events {
   OVERVIEW_PANE_WINDOW_CHANGED = 'OverviewPaneWindowChanged',
   OVERVIEW_PANE_BREADCRUMB_ADDED = 'OverviewPaneBreadcrumbAdded',
-  OPEN_SIDEBAR_BUTTON_CLICKED = 'OpenSidebarButtonClicked',
+  OVERVIEW_PANE_MOUSE_MOVE = 'OverviewPaneMouseMove',
+  OVERVIEW_PANE_MOUSE_LEAVE = 'OverviewPaneMouseLeave',
 }
 
 export interface OverviewPaneWindowChangedEvent {
@@ -364,12 +379,15 @@ export interface OverviewPaneBreadcrumbAddedEvent {
   endTime: Trace.Types.Timing.MilliSeconds;
 }
 
-export interface OpenSidebarButtonClicked {}
+export interface OverviewPaneMouseMoveEvent {
+  timeInMicroSeconds: Trace.Types.Timing.MicroSeconds;
+}
 
 export type EventTypes = {
   [Events.OVERVIEW_PANE_WINDOW_CHANGED]: OverviewPaneWindowChangedEvent,
   [Events.OVERVIEW_PANE_BREADCRUMB_ADDED]: OverviewPaneBreadcrumbAddedEvent,
-  [Events.OPEN_SIDEBAR_BUTTON_CLICKED]: OpenSidebarButtonClicked,
+  [Events.OVERVIEW_PANE_MOUSE_MOVE]: OverviewPaneMouseMoveEvent,
+  [Events.OVERVIEW_PANE_MOUSE_LEAVE]: void,
 };
 
 export interface TimelineOverview {

package/front_end/ui/legacy/components/perf_ui/flameChart.css

@@ -7,12 +7,10 @@
 .flame-chart-main-pane {
   overflow: hidden;
 
-  --selected-group-background: hsl(215deg 85% 98%);
   --selected-group-border: hsl(216deg 68% 54%);
 }
 
 :host-context(.theme-with-dark-background) .flame-chart-main-pane {
-  --selected-group-background: hsl(215deg 85% 15%);
   --selected-group-border: hsl(216deg 68% 46%);
 }