chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -39,7 +39,7 @@ import {
   selectionIsRange,
   type TimelineSelection,
 } from './TimelineSelection.js';
-import {AggregatedTimelineTreeView} from './TimelineTreeView.js';
+import {AggregatedTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
@@ -53,8 +53,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate,
-                                                                      UI.SearchableView.Searchable {
+export class TimelineFlameChartView extends
+    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+        implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
   /**
    * Tracks the indexes of matched entries when the user searches the panel.
@@ -165,6 +166,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainDataProvider = new TimelineFlameChartDataProvider();
     this.mainDataProvider.addEventListener(
         TimelineFlameChartDataProviderEvents.DATA_CHANGED, () => this.mainFlameChart.scheduleUpdate());
+    this.mainDataProvider.addEventListener(
+        TimelineFlameChartDataProviderEvents.FLAME_CHART_ITEM_HOVERED,
+        e => this.detailsView.revealEventInTreeView(e.data));
+
     this.mainFlameChart = new PerfUI.FlameChart.FlameChart(this.mainDataProvider, this, {
       groupExpansionSetting: mainViewGroupExpansionSetting,
       // The TimelineOverlays are used for selected elements
@@ -312,6 +317,19 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
           PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
     }
 
+    this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
+      if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+        return;
+      }
+      const events = node?.data?.events;
+      if (events) {
+        this.#dimInsightRelatedEvents(events);
+      } else {
+        this.mainFlameChart.disableDimming();
+        this.networkFlameChart.disableDimming();
+      }
+    });
+
     /**
      * NOTE: ENTRY_SELECTED, ENTRY_INVOKED and ENTRY_HOVERED are not always super obvious:
      * ENTRY_SELECTED: is KEYBOARD ONLY selection of events (e.g. navigating through the flamechart with your arrow keys)
@@ -355,8 +373,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
   #dimInsightRelatedEvents(relatedEvents: Trace.Types.Events.Event[]): void {
     // Dim all events except those related to the active insight.
-    const relevantMainEvents = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
-    const relevantNetworkEvents = relatedEvents.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
+    const relatedMainIndices = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relatedNetworkIndices = relatedEvents.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
 
     // Further, overlays defining a trace bounds do not dim an event that falls within those bounds.
     for (const overlay of this.#currentInsightOverlays) {
@@ -382,15 +400,15 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       if (overlayEvent) {
         if (this.mainDataProvider.indexForEvent(overlayEvent) !== null) {
           provider = this.mainDataProvider;
-          relevantEvents = relevantMainEvents;
+          relevantEvents = relatedMainIndices;
         } else if (this.networkDataProvider.indexForEvent(overlayEvent) !== null) {
           provider = this.networkDataProvider;
-          relevantEvents = relevantNetworkEvents;
+          relevantEvents = relatedNetworkIndices;
         }
       } else if (overlay.type === 'TIMESPAN_BREAKDOWN') {
         // For this overlay type, if there is no associated event it is rendered on mainFlameChart.
         provider = this.mainDataProvider;
-        relevantEvents = relevantMainEvents;
+        relevantEvents = relatedMainIndices;
       }
 
       if (!provider || !relevantEvents) {
@@ -399,8 +417,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
       relevantEvents.push(...provider.search(bounds).map(r => r.index));
     }
-    this.mainFlameChart.enableDimming(relevantMainEvents);
-    this.networkFlameChart.enableDimming(relevantNetworkEvents);
+    this.mainFlameChart.enableDimming(relatedMainIndices);
+    this.networkFlameChart.enableDimming(relatedNetworkIndices);
   }
 
   setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):
@@ -432,7 +450,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
       // The insight's `relatedEvents` property likely already includes the events associated with
       // and overlay, but just in case not, include both arrays. Duplicates are fine.
-      const relatedEvents = [...entries, ...this.#activeInsight?.relatedEvents || []];
+      const relatedEvents = [...entries, ...this.#activeInsight?.model.relatedEvents || []];
       this.#dimInsightRelatedEvents(relatedEvents);
     }
 
@@ -494,10 +512,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     if (!this.#activeInsight) {
       this.mainFlameChart.disableDimming();
       this.networkFlameChart.disableDimming();
-      return;
     }
-
-    this.setOverlays(this.#activeInsight.overlays, {updateTraceWindow: true});
   }
 
   /**
@@ -524,25 +539,33 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     }
   }
 
+  addTimestampMarkerOverlay(timestamp: Trace.Types.Timing.MicroSeconds): void {
+    // TIMESTAMP_MARKER is a singleton. If one already exists, it will
+    // be updated instead of creating a new one.
+    this.addOverlay({
+      type: 'TIMESTAMP_MARKER',
+      timestamp,
+    });
+  }
+
+  async removeTimestampMarkerOverlay(): Promise<void> {
+    const removedCount = this.#overlays.removeOverlaysOfType('TIMESTAMP_MARKER');
+    if (removedCount > 0) {
+      // Don't trigger lots of updates on a mouse move if we didn't actually
+      // remove any overlays.
+      await this.#overlays.update();
+    }
+  }
+
   async #processFlameChartMouseMoveEvent(data: PerfUI.FlameChart.EventTypes['MouseMove']): Promise<void> {
     const {mouseEvent, timeInMicroSeconds} = data;
     // If the user is no longer holding shift, remove any existing marker.
     if (!mouseEvent.shiftKey) {
-      const removedCount = this.#overlays.removeOverlaysOfType('CURSOR_TIMESTAMP_MARKER');
-      if (removedCount > 0) {
-        // Don't trigger lots of updates on a mouse move if we didn't actually
-        // remove any overlays.
-        await this.#overlays.update();
-      }
+      await this.removeTimestampMarkerOverlay();
     }
 
     if (!mouseEvent.metaKey && mouseEvent.shiftKey) {
-      // CURSOR_TIMESTAMP_MARKER is a singleton; if one already exists it will
-      // be updated rather than create an entirely new one.
-      this.addOverlay({
-        type: 'CURSOR_TIMESTAMP_MARKER',
-        timestamp: timeInMicroSeconds,
-      });
+      this.addTimestampMarkerOverlay(timeInMicroSeconds);
     }
   }
 
@@ -1138,6 +1161,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     }
     void this.#overlays.update();
   }
+
   removeOverlay(removedOverlay: Overlays.Overlays.TimelineOverlay): void {
     this.#overlays.remove(removedOverlay);
     void this.#overlays.update();
@@ -1452,6 +1476,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       this.mainFlameChart.hideHighlight();
     }
   }
+
+  overlays(): Overlays.Overlays.Overlays {
+    return this.#overlays;
+  }
 }
 
 export class Selection {

package/front_end/panels/timeline/TimelineHistoryManager.test.ts

@@ -22,11 +22,12 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   afterEach(() => {
     UI.ActionRegistry.ActionRegistry.reset();
     Root.Runtime.experiments.disableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
+    historyManager.cancelIfShowing();
   });
 
   it('shows the dropdown including a landing page link if the observations experiment is enabled', async function() {
     Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS);
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -35,7 +36,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace,
-          startTime: null,
+          metadata,
         },
     );
 
@@ -48,7 +49,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     const menuItemText = Array.from(dropdown.querySelectorAll<HTMLDivElement>('[role="menuitem"]'), elem => {
       return elem.innerText.replaceAll('\n', '');
     });
-    assert.deepEqual(menuItemText, ['Live metrics', 'web.dev5.39 s']);
+    assert.deepEqual(menuItemText, ['Live metrics', 'web.dev1× slowdown, No throttling']);
 
     // Cancel the dropdown, which also resolves the show() promise, meaning we
     // don't leak it into other tests.
@@ -57,7 +58,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   });
 
   it('does not show if observations experiment is disabled + the user has not imported 2 traces', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -66,7 +67,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace,
-          startTime: null,
+          metadata,
         },
     );
 
@@ -79,7 +80,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   });
 
   it('does not show the landing page link if the observations experiment is disabled', async function() {
-    const {parsedTrace: parsedTrace1} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace: parsedTrace1, metadata: metadata1} =
+        await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -88,10 +90,11 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: parsedTrace1,
-          startTime: null,
+          metadata: metadata1,
         },
     );
-    const {parsedTrace: parsedTrace2} = await TraceLoader.traceEngine(this, 'timings-track.json.gz');
+    const {parsedTrace: parsedTrace2, metadata: metadata2} =
+        await TraceLoader.traceEngine(this, 'timings-track.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -100,7 +103,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: parsedTrace2,
-          startTime: null,
+          metadata: metadata2,
         },
     );
 
@@ -114,8 +117,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
       return elem.innerText.replaceAll('\n', '');
     });
     assert.deepEqual(menuItemText, [
-      'localhost3.16 s',
-      'web.dev5.39 s',
+      'localhost',
+      'web.dev1× slowdown, No throttling',
     ]);
 
     // Cancel the dropdown, which also resolves the show() promise, meaning we
@@ -126,7 +129,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
 
   it('can select from multiple parsed data objects', async function() {
     // Add two parsed data objects to the history manager.
-    const {parsedTrace: trace1Data} = await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
+    const {parsedTrace: trace1Data, metadata: metadata1} =
+        await TraceLoader.traceEngine(this, 'slow-interaction-button-click.json.gz');
     historyManager.addRecording(
         {
           data: {
@@ -135,11 +139,12 @@ describeWithEnvironment('TimelineHistoryManager', function() {
           },
           filmStripForPreview: null,
           parsedTrace: trace1Data,
-          startTime: null,
+          metadata: metadata1,
         },
     );
 
-    const {parsedTrace: trace2Data} = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
+    const {parsedTrace: trace2Data, metadata: metadata2} =
+        await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
     historyManager.addRecording({
       data: {
         parsedTraceIndex: 2,
@@ -147,7 +152,7 @@ describeWithEnvironment('TimelineHistoryManager', function() {
       },
       filmStripForPreview: null,
       parsedTrace: trace2Data,
-      startTime: null,
+      metadata: metadata2,
     });
 
     // Make sure the correct model is returned when

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -7,7 +7,7 @@ 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 CrUXManager from '../../models/crux-manager/crux-manager.js';
-import * as Trace from '../../models/trace/trace.js';
+import type * as Trace from '../../models/trace/trace.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -44,27 +44,6 @@ const UIStrings = {
    *@description Text that shows there is no recording
    */
   noRecordings: '(no recordings)',
-  /**
-   *@description Text in Timeline History Manager of the Performance panel
-   *@example {2s} PH1
-   */
-  sAgo: '({PH1} ago)',
-  /**
-   *@description Text in Timeline History Manager of the Performance panel
-   */
-  moments: 'moments',
-  /**
-   * @description Text in Timeline History Manager of the Performance panel.
-   * Placeholder is a number and the 'm' is the short form for 'minutes'.
-   * @example {2} PH1
-   */
-  sM: '{PH1} m',
-  /**
-   * @description Text in Timeline History Manager of the Performance panel.
-   * Placeholder is a number and the 'h' is the short form for 'hours'.
-   * @example {2} PH1
-   */
-  sH: '{PH1} h',
   /**
    *@description Text in Timeline History Manager of the Performance panel
    *@example {example.com} PH1
@@ -75,6 +54,11 @@ const UIStrings = {
    *@description Accessible label for the timeline session selection menu
    */
   selectTimelineSession: 'Select timeline session',
+  /**
+   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
+   * @example {2} PH1
+   */
+  dSlowdown: '{PH1}× slowdown',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineHistoryManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -102,10 +86,24 @@ export interface NewHistoryRecordingData {
   filmStripForPreview: Trace.Extras.FilmStrip.Data|null;
   // Also not stored, but used to create the preview overview for a new trace.
   parsedTrace: Trace.Handlers.Types.ParsedTrace;
-  // Used for the preview text
-  startTime: number|null;
+  metadata: Trace.Types.File.MetaData|null;
 }
 
+// Lazily instantiate the formatter as the constructor takes 50ms+
+// TODO: move me and others like me to i18n module
+const listFormatter = (function defineFormatter() {
+  let intlListFormat: Intl.ListFormat;
+  return {
+    format(...args: Parameters<Intl.ListFormat['format']>): ReturnType<Intl.ListFormat['format']> {
+      if (!intlListFormat) {
+        const opts: Intl.ListFormatOptions = {type: 'unit', style: 'short'};
+        intlListFormat = new Intl.ListFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, opts);
+      }
+      return intlListFormat.format(...args);
+    },
+  };
+})();
+
 export class TimelineHistoryManager {
   private recordings: TraceRecordingHistoryItem[];
   private readonly action: UI.ActionRegistration.Action;
@@ -195,7 +193,7 @@ export class TimelineHistoryManager {
 
     // Order is important: this needs to happen first because lots of the
     // subsequent code depends on us storing the preview data into the map.
-    this.#buildAndStorePreviewData(newInput.data.parsedTraceIndex, newInput.parsedTrace, filmStrip, newInput.startTime);
+    this.#buildAndStorePreviewData(newInput.data.parsedTraceIndex, newInput.parsedTrace, newInput.metadata, filmStrip);
 
     const modelTitle = this.title(newInput.data);
     this.buttonInternal.setText(modelTitle);
@@ -232,7 +230,11 @@ export class TimelineHistoryManager {
     this.recordings = [];
     this.lastActiveTrace = null;
     this.updateState();
-    this.buttonInternal.setText(i18nString(UIStrings.noRecordings));
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
+      this.buttonInternal.setText(i18nString(UIStrings.landingPageTitle));
+    } else {
+      this.buttonInternal.setText(i18nString(UIStrings.noRecordings));
+    }
     this.nextNumberByDomain.clear();
   }
 
@@ -352,25 +354,9 @@ export class TimelineHistoryManager {
     if (!data) {
       throw new Error('Unable to find data for model');
     }
-    const startedAt = data.startTime;
-    data.time.textContent =
-        startedAt ? i18nString(UIStrings.sAgo, {PH1: TimelineHistoryManager.coarseAge(startedAt)}) : '';
     return data.preview;
   }
 
-  private static coarseAge(time: number): string {
-    const seconds = Math.round((Date.now() - time) / 1000);
-    if (seconds < 50) {
-      return i18nString(UIStrings.moments);
-    }
-    const minutes = Math.round(seconds / 60);
-    if (minutes < 50) {
-      return i18nString(UIStrings.sM, {PH1: minutes});
-    }
-    const hours = Math.round(minutes / 60);
-    return i18nString(UIStrings.sH, {PH1: hours});
-  }
-
   private title(item: RecordingData): string {
     if (item.type === 'LANDING_PAGE') {
       return i18nString(UIStrings.landingPageTitle);
@@ -384,49 +370,51 @@ export class TimelineHistoryManager {
   }
 
   #buildAndStorePreviewData(
-      parsedTraceIndex: number, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      filmStrip: Trace.Extras.FilmStrip.Data|null, startTime: number|null): HTMLDivElement {
+      parsedTraceIndex: number, parsedTrace: Trace.Handlers.Types.ParsedTrace, metadata: Trace.Types.File.MetaData|null,
+      filmStrip: Trace.Extras.FilmStrip.Data|null): HTMLDivElement {
     const parsedURL = Common.ParsedURL.ParsedURL.fromString(parsedTrace.Meta.mainFrameURL);
     const domain = parsedURL ? parsedURL.host : '';
 
     const sequenceNumber = this.nextNumberByDomain.get(domain) || 1;
     const titleWithSequenceNumber = i18nString(UIStrings.sD, {PH1: domain, PH2: sequenceNumber});
     this.nextNumberByDomain.set(domain, sequenceNumber + 1);
-    const timeElement = document.createElement('span');
-    timeElement.classList.add('time');
 
     const preview = document.createElement('div');
     preview.classList.add('preview-item');
     preview.classList.add('vbox');
     preview.setAttribute('jslog', `${VisualLogging.dropDown('timeline.history-item').track({click: true})}`);
+    preview.style.width = `${previewWidth}px`;
     const data = {
       preview,
       title: titleWithSequenceNumber,
-      time: timeElement,
       lastUsed: Date.now(),
-      startTime,
     };
     parsedTraceIndexToPerformancePreviewData.set(parsedTraceIndex, data);
 
-    preview.appendChild(this.#buildTextDetails(parsedTrace, domain, timeElement));
+    preview.appendChild(this.#buildTextDetails(metadata, domain));
     const screenshotAndOverview = preview.createChild('div', 'hbox');
     screenshotAndOverview.appendChild(this.#buildScreenshotThumbnail(filmStrip));
     screenshotAndOverview.appendChild(this.#buildOverview(parsedTrace));
     return data.preview;
   }
 
-  #buildTextDetails(parsedTrace: Trace.Handlers.Types.ParsedTrace, title: string, timeElement: Element): Element {
+  #buildTextDetails(metadata: Trace.Types.File.MetaData|null, title: string): Element {
     const container = document.createElement('div');
     container.classList.add('text-details');
     container.classList.add('hbox');
     const nameSpan = container.createChild('span', 'name');
     nameSpan.textContent = title;
     UI.ARIAUtils.setLabel(nameSpan, title);
-    const bounds = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds);
-    const duration = i18n.TimeUtilities.millisToString(bounds.range, false);
-    const timeContainer = container.createChild('span', 'time');
-    timeContainer.appendChild(document.createTextNode(duration));
-    timeContainer.appendChild(timeElement);
+
+    if (metadata) {
+      const parts = [
+        metadata.emulatedDeviceTitle,
+        metadata.cpuThrottling ? i18nString(UIStrings.dSlowdown, {PH1: metadata.cpuThrottling}) : undefined,
+        metadata.networkThrottling,
+      ].filter(Boolean);
+      container.createChild('span', 'metadata').textContent = listFormatter.format(parts as string[]);
+    }
+
     return container;
   }
 
@@ -482,16 +470,14 @@ export class TimelineHistoryManager {
 }
 
 export const maxRecordings = 5;
-export const previewWidth = 450;
+export const previewWidth = 500;
 // The reason we store a global map is because the Dropdown component needs to
 // be able to read the preview data in order to show a preview in the dropdown.
 const parsedTraceIndexToPerformancePreviewData = new Map<number, PreviewData>();
 
 export interface PreviewData {
   preview: Element;
-  time: Element;
   lastUsed: number;
-  startTime: number|null;
   title: string;
 }
 
@@ -621,6 +607,8 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     div.classList.add('preview-item');
     div.classList.add('landing-page-item');
 
+    div.style.width = `${previewWidth}px`;
+
     const icon = IconButton.Icon.create('arrow-back');
     div.appendChild(icon);
 

package/front_end/panels/timeline/TimelineLayersView.ts

@@ -68,7 +68,7 @@ export class TimelineLayersView extends UI.SplitWidget.SplitWidget {
     }
   }
 
-  private update(): void {
+  override update(): void {
     if (this.frameLayerTree) {
       void this.frameLayerTree.layerTreePromise().then(layerTree => this.layerViewHost.setLayerTree(layerTree));
     }

package/front_end/panels/timeline/TimelineLoader.test.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Protocol from '../../generated/protocol.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import type * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {makeInstantEvent} from '../../testing/TraceHelpers.js';
@@ -50,7 +49,7 @@ describeWithEnvironment('TimelineLoader', () => {
     },
     async loadingComplete(
         collectedEvents: Trace.Types.Events.Event[],
-        exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null,
+        exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
         isCpuProfile: boolean,
     ) {
       loadingCompleteSpy(collectedEvents, exclusiveFilter, isCpuProfile);

package/front_end/panels/timeline/TimelineLoader.ts

@@ -6,9 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
 import type {Client} from './TimelineController.js';
@@ -36,7 +36,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
   private buffer: string;
   private firstRawChunk: boolean;
   private totalSize!: number;
-  private filter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null;
+  private filter: Trace.Extras.TraceFilter.TraceFilter|null;
   #traceIsCPUProfile: boolean;
   #collectedEvents: Trace.Types.Events.Event[] = [];
   #metadata: Trace.Types.File.MetaData|null;
@@ -88,7 +88,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     loader.#traceIsCPUProfile = true;
 
     try {
-      const events = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
+      const events = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
           profile, Trace.Types.Events.ThreadID(1));
 
       window.setTimeout(async () => {
@@ -148,6 +148,21 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
 
     if ('metadata' in trace) {
       this.#metadata = trace.metadata;
+
+      // Older traces set these fields even when throttling is not active, while newer traces do not.
+      // Clear them out on load to simplify usage.
+      if (this.#metadata.cpuThrottling === 1) {
+        this.#metadata.cpuThrottling = undefined;
+      }
+      // This string is translated, so this only covers the english case and the current locale.
+      // Due to this, older traces in other locales will end up displaying "No throttling" in the trace history selector.
+      const noThrottlingString = typeof SDK.NetworkManager.NoThrottlingConditions.title === 'string' ?
+          SDK.NetworkManager.NoThrottlingConditions.title :
+          SDK.NetworkManager.NoThrottlingConditions.title();
+      if (this.#metadata.networkThrottling === 'No throttling' ||
+          this.#metadata.networkThrottling === noThrottlingString) {
+        this.#metadata.networkThrottling = undefined;
+      }
     }
   }
 
@@ -249,7 +264,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
   }
 
   #parseCPUProfileFormatFromFile(parsedTrace: Protocol.Profiler.Profile): void {
-    const traceEvents = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
+    const traceEvents = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.createFakeTraceFromCpuProfile(
         parsedTrace, Trace.Types.Events.ThreadID(1));
 
     this.#collectEvents(traceEvents);

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -65,6 +65,16 @@ export class TimelineMiniMap extends
           this.addBreadcrumb(event.data);
         });
 
+    // We want to add/remove an overlay for these two events, and the overlay system is controlled by
+    // `TimelineFlameChartView`, so we need to dispatch them up to the `TimelinePanel` level to call
+    // `TimelineFlameChartView` -> `addOverlay()/removeOverlay()`.
+    this.#overviewComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_MOVE, event => {
+      this.dispatchEventToListeners(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_MOVE, event.data);
+    });
+    this.#overviewComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_LEAVE, () => {
+      this.dispatchEventToListeners(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_LEAVE);
+    });
+
     this.#breadcrumbsUI.addEventListener(TimelineComponents.BreadcrumbsUI.BreadcrumbActivatedEvent.eventName, event => {
       const {breadcrumb, childBreadcrumbsRemoved} =
           (event as TimelineComponents.BreadcrumbsUI.BreadcrumbActivatedEvent);
@@ -192,8 +202,8 @@ export class TimelineMiniMap extends
     };
   }
 
-  highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds): void {
-    this.#overviewComponent.highlightBounds(bounds);
+  highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds, withBracket: boolean = false): void {
+    this.#overviewComponent.highlightBounds(bounds, withBracket);
   }
   clearBoundsHighlight(): void {
     this.#overviewComponent.clearBoundsHighlight();

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -137,7 +137,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
     return tracingLayerTree ? tracingLayerTree.pictureForRasterTile(data.tileId.id_ref) : null;
   }
 
-  private update(): void {
+  override update(): void {
     this.logTreeView.setCommandLog([]);
     void this.paintProfilerView.setSnapshotAndLog(null, [], null);