RPP: tidy up trace bounds usage in TimelineMiniMap

R=alinavarkki@chromium.org

Bug: none
Change-Id: I0cc0c334e52caeace180936e263d5b5e2be29d6f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6624559
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alina Varkki <alinavarkki@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Alina Varkki <alinavarkki@chromium.org>

Author: jackfranklin

front_end/panels/network/NetworkPanel.ts

@@ -821,7 +821,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
   private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
     const timestamp = event.data;
-    this.overviewPane.setWindowTimes(0, timestamp);
+    this.overviewPane.setWindowTimes(Trace.Types.Timing.Milli(0), Trace.Types.Timing.Milli(timestamp));
   }
 
   private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent<number>): void {

front_end/panels/timeline/TimelineMiniMap.test.ts

@@ -34,9 +34,6 @@ describeWithEnvironment('TimelineMiniMap', function() {
         showScreenshots: true,
       },
     });
-    // This needs to happen once the MiniMap is in the DOM in order to first set the trace bounds.
-    TraceBounds.TraceBounds.BoundsManager.instance().resetWithNewBounds(parsedTrace.Meta.traceBounds);
-
     // Now we can zoom into the main thread activity; this means the resize handles are
     // not both on the edge of the screen, so it's a more representative screenshot.
     const mainThread = getMainThread(parsedTrace.Renderer);

front_end/panels/timeline/TimelineMiniMap.ts

@@ -86,6 +86,14 @@ export class TimelineMiniMap extends
     this.#overviewComponent.enableCreateBreadcrumbsButton();
 
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);
+    // Set the initial bounds for the overview. Otherwise if we mount & there
+    // is not an immediate RESET event, then we don't render correctly.
+    const state = TraceBounds.TraceBounds.BoundsManager.instance().state();
+    if (state) {
+      const {timelineTraceWindow, minimapTraceBounds} = state.milli;
+      this.#overviewComponent.setWindowTimes(timelineTraceWindow.min, timelineTraceWindow.max);
+      this.#overviewComponent.setBounds(minimapTraceBounds.min, minimapTraceBounds.max);
+    }
   }
 
   #onOverviewPanelWindowChanged(

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

@@ -52,8 +52,8 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   private cursorEnabled = false;
   private cursorPosition = 0;
   private lastWidth = 0;
-  private windowStartTime = 0;
-  private windowEndTime = Infinity;
+  private windowStartTime = Trace.Types.Timing.Milli(0);
+  private windowEndTime = Trace.Types.Timing.Milli(Infinity);
   private muteOnWindowChanged = false;
   #dimHighlightSVG: Element;
 
@@ -239,8 +239,8 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   reset(): void {
-    this.windowStartTime = 0;
-    this.windowEndTime = Infinity;
+    this.windowStartTime = Trace.Types.Timing.Milli(0);
+    this.windowEndTime = Trace.Types.Timing.Milli(Infinity);
     this.overviewCalculator.reset();
     this.overviewGrid.reset();
     this.overviewGrid.setResizeEnabled(false);
@@ -274,10 +274,10 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
       return;
     }
 
-    this.windowStartTime =
-        event.data.rawStartValue === this.overviewCalculator.minimumBoundary() ? 0 : event.data.rawStartValue;
-    this.windowEndTime =
-        event.data.rawEndValue === this.overviewCalculator.maximumBoundary() ? Infinity : event.data.rawEndValue;
+    this.windowStartTime = Trace.Types.Timing.Milli(
+        event.data.rawStartValue === this.overviewCalculator.minimumBoundary() ? 0 : event.data.rawStartValue);
+    this.windowEndTime = Trace.Types.Timing.Milli(
+        event.data.rawEndValue === this.overviewCalculator.maximumBoundary() ? Infinity : event.data.rawEndValue);
 
     const windowTimes = {
       startTime: Trace.Types.Timing.Milli(this.windowStartTime),
@@ -287,7 +287,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.dispatchEventToListeners(Events.OVERVIEW_PANE_WINDOW_CHANGED, windowTimes);
   }
 
-  setWindowTimes(startTime: number, endTime: number): void {
+  setWindowTimes(startTime: Trace.Types.Timing.Milli, endTime: Trace.Types.Timing.Milli): void {
     if (startTime === this.windowStartTime && endTime === this.windowEndTime) {
       return;
     }