chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/sources/NavigatorView.ts

@@ -1766,7 +1766,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     }
   }
 
-  rename(callback?: ((arg0: boolean) => void)): void {
+  rename(callback?: ((committed: boolean) => void)): void {
     if (!this.treeElement) {
       return;
     }
@@ -1781,21 +1781,19 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     const treeOutlineElement = this.treeElement.treeOutline.element;
     UI.UIUtils.markBeingEdited(treeOutlineElement, true);
 
-    function commitHandler(
-        this: NavigatorUISourceCodeTreeNode, element: Element, newTitle: string, oldTitle: string): void {
+    const commitHandler = (_element: Element, newTitle: string, oldTitle: string|null): void => {
       if (newTitle !== oldTitle) {
         if (this.treeElement) {
           this.treeElement.title = newTitle;
         }
         // necessary cast to RawPathString as alternative would be altering type of Config<T>
-        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString)
-            .then(renameCallback.bind(this));
+        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString).then(renameCallback);
         return;
       }
-      afterEditing.call(this, true);
-    }
+      afterEditing(true);
+    };
 
-    function renameCallback(this: NavigatorUISourceCodeTreeNode, success: boolean): void {
+    const renameCallback = (success: boolean): void => {
       if (!success) {
         UI.UIUtils.markBeingEdited(treeOutlineElement, false);
         this.updateTitle();
@@ -1810,20 +1808,20 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
           this.treeElement.select();
         }
       }
-      afterEditing.call(this, true);
-    }
+      afterEditing(true);
+    };
 
-    function afterEditing(this: NavigatorUISourceCodeTreeNode, committed: boolean): void {
+    const afterEditing = (committed: boolean): void => {
       UI.UIUtils.markBeingEdited(treeOutlineElement, false);
       this.updateTitle();
       if (callback) {
         callback(committed);
       }
-    }
+    };
 
     this.updateTitle(true);
     this.treeElement.startEditingTitle(
-        new UI.InplaceEditor.Config(commitHandler.bind(this), afterEditing.bind(this, false)));
+        new UI.InplaceEditor.Config(commitHandler, () => afterEditing(false), undefined));
   }
 }
 

package/front_end/panels/timeline/ActiveFilters.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import type * as Trace from '../../models/trace/trace.js';
 
 let instance: ActiveFilters|null = null;
@@ -23,13 +22,13 @@ export class ActiveFilters {
     instance = null;
   }
 
-  #activeFilters: TimelineModel.TimelineModelFilter.TimelineModelFilter[] = [];
+  #activeFilters: Trace.Extras.TraceFilter.TraceFilter[] = [];
 
-  activeFilters(): readonly TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  activeFilters(): readonly Trace.Extras.TraceFilter.TraceFilter[] {
     return this.#activeFilters;
   }
 
-  setFilters(newFilters: TimelineModel.TimelineModelFilter.TimelineModelFilter[]): void {
+  setFilters(newFilters: Trace.Extras.TraceFilter.TraceFilter[]): void {
     this.#activeFilters = newFilters;
   }
 

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -58,8 +58,7 @@ export class AnimationsTrackAppender implements TrackAppender {
 
   #eventAppendedCallbackFunction(event: Trace.Types.Events.Event, index: number): void {
     if (event && Trace.Types.Events.isSyntheticAnimation(event)) {
-      const CLSInsight = Trace.Insights.InsightRunners.CumulativeLayoutShift;
-      const failures = CLSInsight.getNonCompositedFailure(event);
+      const failures = Trace.Insights.Models.CLSCulprits.getNonCompositedFailure(event);
       if (failures.length) {
         addDecorationToEvent(this.#compatibilityBuilder.getFlameChartTimelineData(), index, {
           type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,

package/front_end/panels/timeline/CountersGraph.ts

@@ -141,8 +141,7 @@ export class CountersGraph extends UI.Widget.VBox {
     this.countersByName.set(
         'jsHeapSizeUsed',
         this.createCounter(
-            i18nString(UIStrings.jsHeap), 'js-heap-size-used', 'hsl(220, 90%, 43%)',
-            Platform.NumberUtilities.bytesToString));
+            i18nString(UIStrings.jsHeap), 'js-heap-size-used', 'hsl(220, 90%, 43%)', i18n.ByteUtilities.bytesToString));
     this.countersByName.set(
         'documents', this.createCounter(i18nString(UIStrings.documents), 'documents', 'hsl(0, 90%, 43%)'));
     this.countersByName.set('nodes', this.createCounter(i18nString(UIStrings.nodes), 'nodes', 'hsl(120, 90%, 43%)'));
@@ -151,8 +150,7 @@ export class CountersGraph extends UI.Widget.VBox {
         this.createCounter(i18nString(UIStrings.listeners), 'js-event-listeners', 'hsl(38, 90%, 43%)'));
 
     this.gpuMemoryCounter = this.createCounter(
-        i18nString(UIStrings.gpuMemory), 'gpu-memory-used-kb', 'hsl(300, 90%, 43%)',
-        Platform.NumberUtilities.bytesToString);
+        i18nString(UIStrings.gpuMemory), 'gpu-memory-used-kb', 'hsl(300, 90%, 43%)', i18n.ByteUtilities.bytesToString);
     this.countersByName.set('gpuMemoryUsedKB', this.gpuMemoryCounter);
 
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -41,7 +40,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class EventsTimelineTreeView extends TimelineTreeView {
   private readonly filtersControl: Filters;
   private readonly delegate: TimelineModeViewDelegate;
-  private currentTree!: TimelineModel.TimelineProfileTree.Node;
+  private currentTree!: Trace.Extras.TraceTree.Node;
   constructor(delegate: TimelineModeViewDelegate) {
     super();
     this.element.setAttribute('jslog', `${VisualLogging.pane('event-log').track({resize: true})}`);
@@ -53,7 +52,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     this.splitWidget.showBoth();
   }
 
-  override filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  override filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return [...super.filters(), ...this.filtersControl.filters()];
   }
 
@@ -64,7 +63,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  override buildTree(): TimelineModel.TimelineProfileTree.Node {
+  override buildTree(): Trace.Extras.TraceTree.Node {
     this.currentTree = this.buildTopDownTree(true, null);
     return this.currentTree;
   }
@@ -78,7 +77,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  private findNodeWithEvent(event: Trace.Types.Events.Event): TimelineModel.TimelineProfileTree.Node|null {
+  private findNodeWithEvent(event: Trace.Types.Events.Event): Trace.Extras.TraceTree.Node|null {
     if (event.name === Trace.Types.Events.Name.RUN_TASK) {
       // No node is ever created for the top level RunTask event, so
       // bail out preemptively
@@ -132,7 +131,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     this.filtersControl.populateToolbar(toolbar);
   }
 
-  override showDetailsForNode(node: TimelineModel.TimelineProfileTree.Node): boolean {
+  override showDetailsForNode(node: Trace.Extras.TraceTree.Node): boolean {
     const parsedTrace = this.parsedTrace();
     if (!parsedTrace) {
       return false;
@@ -146,7 +145,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     return true;
   }
 
-  override onHover(node: TimelineModel.TimelineProfileTree.Node|null): void {
+  override onHover(node: Trace.Extras.TraceTree.Node|null): void {
     this.delegate.highlightEvent(node && node.event);
   }
 }
@@ -162,7 +161,7 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.filtersInternal = [this.categoryFilter, this.durationFilter];
   }
 
-  filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return this.filtersInternal;
   }
 

package/front_end/panels/timeline/README.md

@@ -100,7 +100,7 @@ To remove one or some overlays, check out the `remove()` or `removeOverlaysOfTyp
 
 ### Creating a new overlay
 
-To create a new overlay, first define its type. This is done as an interface, and must contain a `type` field.
+To create a new overlay, add it in the `OverlaysImpl.ts` file, first define its type. This is done as an interface, and must contain a `type` field.
 
 All other fields are completely custom and depend on the specifics of the overlay.
 
@@ -115,6 +115,7 @@ export interface EntrySelected {
 ```
 
 Once you have done this, add the interface to the union type `TimelineOverlay`. This will likely trigger some TypeScript errors because there are some places in the code where we check we have exhaustively dealt with every possible overlay type.
+Also if you want to make this overlay a singleton, add the interface to the union type `SingletonOverlay`.
 
 When you create an overlay by default it will be created as a `div` with a class, and no contents. Sometimes this is all you need (for example, the `ENTRY_SELECTED` outline has no other HTML), but if you need more you can tell the Overlays class what DOM to create for your overlay. To do this, modify the `#createElementForNewOverlay` method. You will see examples there of how we use custom elements to build out overlays.
 

package/front_end/panels/timeline/TimelineController.ts

@@ -8,7 +8,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
 const UIStrings = {
@@ -144,11 +143,23 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     if (this.tracingManager) {
       this.tracingManager.stop();
     }
+    // When throttling is applied to the main renderer, it can slow down the
+    // collection of trace events once tracing has completed. Therefore we
+    // temporarily disable throttling whilst the final trace event collection
+    // takes place. Once it is done, we re-enable it (this is the existing
+    // behaviour within DevTools; the throttling settling is sticky + global).
+    const throttlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
+    const rateDuringRecording = throttlingManager.cpuThrottlingRate();
+    // 1 = no throttling (CPU is 1x'd)
+    throttlingManager.setCPUThrottlingRate(1);
 
     this.client.loadingStarted();
     await this.waitForTracingToStop();
     await this.allSourcesFinished();
 
+    // Now we re-enable throttling again to maintain the setting being persistent.
+    throttlingManager.setCPUThrottlingRate(rateDuringRecording);
+
     await LiveMetrics.LiveMetrics.instance().enable();
   }
 
@@ -228,9 +239,8 @@ export interface Client {
   processingStarted(): void;
   loadingProgress(progress?: number): void;
   loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[],
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null, isCpuProfile: boolean,
-      recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
+      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null,
+      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void>;
   loadingCompleteForTest(): void;
 }
 export interface RecordingOptions {

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -29,7 +29,6 @@
  */
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
@@ -516,7 +515,7 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
     if (!calculator) {
       return null;
     }
-    const timeMilliSeconds = Trace.Types.Timing.MilliSeconds(calculator.positionToTime(x));
+    const timeMilliSeconds = calculator.positionToTime(x);
     const timeMicroSeconds = Trace.Helpers.Timing.millisecondsToMicroseconds(timeMilliSeconds);
     const frame = Trace.Extras.FilmStrip.frameClosestToTimestamp(this.#filmStrip, timeMicroSeconds);
     if (frame === this.lastFrame) {
@@ -660,8 +659,8 @@ export class TimelineEventOverviewMemory extends TimelineEventOverview {
     ctx.stroke();
 
     this.heapSizeLabel.textContent = i18nString(UIStrings.sSDash, {
-      PH1: Platform.NumberUtilities.bytesToString(minUsedHeapSize),
-      PH2: Platform.NumberUtilities.bytesToString(maxUsedHeapSize),
+      PH1: i18n.ByteUtilities.bytesToString(minUsedHeapSize),
+      PH2: i18n.ByteUtilities.bytesToString(maxUsedHeapSize),
     });
   }
 }

package/front_end/panels/timeline/TimelineFilters.ts

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 
-export class IsLong extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class IsLong extends Trace.Extras.TraceFilter.TraceFilter {
   #minimumRecordDurationMilli = Trace.Types.Timing.MilliSeconds(0);
   constructor() {
     super();
@@ -23,7 +22,7 @@ export class IsLong extends TimelineModel.TimelineModelFilter.TimelineModelFilte
   }
 }
 
-export class Category extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class Category extends Trace.Extras.TraceFilter.TraceFilter {
   constructor() {
     super();
   }
@@ -33,7 +32,7 @@ export class Category extends TimelineModel.TimelineModelFilter.TimelineModelFil
   }
 }
 
-export class TimelineRegExp extends TimelineModel.TimelineModelFilter.TimelineModelFilter {
+export class TimelineRegExp extends Trace.Extras.TraceFilter.TraceFilter {
   private regExpInternal!: RegExp|null;
   constructor(regExp?: RegExp) {
     super();

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

@@ -214,7 +214,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     const filter = new Timeline.TimelineFilters.TimelineRegExp(/Evaluate script/);
     const results = dataProvider.search(bounds, filter);
     assert.lengthOf(results, 12);
-    assert.deepEqual(results[0], {index: 154, startTimeMilli: 122411041.395, provider: 'main'});
+    assert.deepEqual(results[0], {index: 153, startTimeMilli: 122411041.395, provider: 'main'});
   });
 
   it('delete annotations associated with an event', async function() {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -32,7 +32,6 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -218,8 +217,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
 
-    // TODO(crbug.com/368240754): Temporarily use soft menu for the shortcuts to show, till the accelerators backend CLs land.
-    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
     // This action and its 'execute' is defined in `freestyler-meta`
     const actionIdDrJ = 'drjones.performance-panel-context';
@@ -245,7 +243,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.MERGE_FUNCTION],
       jslogContext: 'hide-function',
     });
-    hideEntryOption.setShortcut('H');
     hideEntryOption.setAccelerator(UI.KeyboardShortcut.Keys.H, [UI.KeyboardShortcut.Modifiers.None]);
     hideEntryOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -255,7 +252,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION],
       jslogContext: 'hide-children',
     });
-    hideChildrenOption.setShortcut('C');
     hideChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.C, [UI.KeyboardShortcut.Modifiers.None]);
     hideChildrenOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -266,7 +262,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
           disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.COLLAPSE_REPEATING_DESCENDANTS],
           jslogContext: 'hide-repeating-children',
         });
-    hideRepeatingChildrenOption.setShortcut('R');
     hideRepeatingChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.R, [UI.KeyboardShortcut.Modifiers.None]);
     hideRepeatingChildrenOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -276,7 +271,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       disabled: !possibleActions?.[PerfUI.FlameChart.FilterAction.RESET_CHILDREN],
       jslogContext: 'reset-children',
     });
-    resetChildrenOption.setShortcut('U');
     resetChildrenOption.setAccelerator(UI.KeyboardShortcut.Keys.U, [UI.KeyboardShortcut.Modifiers.None]);
     resetChildrenOption.setIsDevToolsPerformanceMenuItem(true);
 
@@ -643,9 +637,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return this.timeSpan;
   }
 
-  search(
-      visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter): PerfUI.FlameChart.DataProviderSearchResult[] {
+  search(visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds, filter?: Trace.Extras.TraceFilter.TraceFilter):
+      PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     this.timelineData();
     for (let i = 0; i < this.entryData.length; ++i) {

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -4,7 +4,6 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -489,7 +488,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
    */
   search(
       visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter,
+      filter?: Trace.Extras.TraceFilter.TraceFilter,
       ): PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     for (let i = 0; i < this.#events.length; i++) {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -524,25 +524,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 +1146,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();

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

@@ -8,7 +8,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.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 +35,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 +87,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 () => {
@@ -249,7 +248,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);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -40,12 +40,12 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as ShortcutDialog from '../../ui/components/dialogs/dialogs.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -368,7 +368,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * we store the filters by the trace index, so if the user then navigates back
    * to a previous trace we can reinstate the filters from this map.
    */
-  #exclusiveFilterPerTrace: Map<number, TimelineModel.TimelineModelFilter.TimelineModelFilter> = new Map();
+  #exclusiveFilterPerTrace: Map<number, Trace.Extras.TraceFilter.TraceFilter> = new Map();
   /**
    * This widget holds the timeline sidebar which shows Insights & Annotations,
    * and the main UI which shows the timeline
@@ -522,6 +522,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     topPaneElement.id = 'timeline-overview-panel';
 
     this.#minimapComponent.show(topPaneElement);
+    this.#minimapComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_MOVE, event => {
+      this.flameChart.addTimestampMarkerOverlay(event.data.timeInMicroSeconds);
+    });
+    this.#minimapComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_LEAVE, async () => {
+      await this.flameChart.removeTimestampMarkerOverlay();
+    });
 
     this.statusPaneContainer = this.timelinePane.element.createChild('div', 'status-pane-container fill');
 
@@ -1065,6 +1071,14 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.panelRightToolbar.appendSeparator();
       this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
     }
+
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION)) {
+      // TODO: Fill the shortcuts dialog with shortcuts for the cuttently selected navigation option
+      const shortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
+      shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: ['Ctrl+E']}]};
+      const dialogToolbarItem = new UI.Toolbar.ToolbarItem(shortcutDialog);
+      this.panelRightToolbar.appendToolbarItem(dialogToolbarItem);
+    }
   }
 
   private createSettingsPane(): void {
@@ -1663,9 +1677,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.runBrickBreakerGame();
   }
 
-  #applyActiveFilters(
-      traceIsGeneric: boolean,
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null = null): void {
+  #applyActiveFilters(traceIsGeneric: boolean, exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null):
+      void {
     if (traceIsGeneric || Root.Runtime.experiments.isEnabled('timeline-show-all-events')) {
       return;
     }
@@ -2051,9 +2064,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * code in there.
    **/
   async loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[],
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null = null, isCpuProfile: boolean,
-      recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void> {
+      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null,
+      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void> {
     this.#traceEngineModel.resetProcessor();
 
     delete this.loader;