chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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';
@@ -37,7 +36,7 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import * as Components from './components/components.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -147,7 +146,7 @@ export class TimelineEventOverviewNetwork extends TimelineEventOverview {
   }
 }
 
-const categoryToIndex = new WeakMap<Components.EntryStyles.TimelineCategory, number>();
+const categoryToIndex = new WeakMap<Utils.EntryStyles.TimelineCategory, number>();
 
 export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
   private backgroundCanvas: HTMLCanvasElement;
@@ -168,16 +167,16 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     this.#end = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds).max;
   }
 
-  #entryCategory(entry: Trace.Types.Events.Event): Components.EntryStyles.EventCategory|undefined {
+  #entryCategory(entry: Trace.Types.Events.Event): Utils.EntryStyles.EventCategory|undefined {
     // Special case: in CPU Profiles we get a lot of ProfileCalls that
     // represent Idle time. We typically represent ProfileCalls in the
     // Scripting Category, but if they represent idle time, we do not want
     // that.
     if (Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === '(idle)') {
-      return Components.EntryStyles.EventCategory.IDLE;
+      return Utils.EntryStyles.EventCategory.IDLE;
     }
-    const eventStyle = Components.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name)?.category ||
-        Components.EntryStyles.getCategoryStyles().other;
+    const eventStyle = Utils.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name)?.category ||
+        Utils.EntryStyles.getCategoryStyles().other;
     const categoryName = eventStyle.name;
     return categoryName;
   }
@@ -197,11 +196,11 @@ export class TimelineEventOverviewCPUActivity extends TimelineEventOverview {
     const timeRange = this.#end - this.#start;
     const scale = width / timeRange;
     const quantTime = quantSizePx / scale;
-    const categories = Components.EntryStyles.getCategoryStyles();
-    const categoryOrder = Components.EntryStyles.getTimelineMainEventCategories();
-    const otherIndex = categoryOrder.indexOf(Components.EntryStyles.EventCategory.OTHER);
+    const categories = Utils.EntryStyles.getCategoryStyles();
+    const categoryOrder = Utils.EntryStyles.getTimelineMainEventCategories();
+    const otherIndex = categoryOrder.indexOf(Utils.EntryStyles.EventCategory.OTHER);
     const idleIndex = 0;
-    console.assert(idleIndex === categoryOrder.indexOf(Components.EntryStyles.EventCategory.IDLE));
+    console.assert(idleIndex === categoryOrder.indexOf(Utils.EntryStyles.EventCategory.IDLE));
     for (let i = 0; i < categoryOrder.length; ++i) {
       categoryToIndex.set(categories[categoryOrder[i]], i);
     }
@@ -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.test.ts

@@ -7,8 +7,8 @@ import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {getMainThread} from '../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
-import * as Components from './components/components.js';
 import * as Timeline from './timeline.js';
+import * as Utils from './utils/utils.js';
 
 describeWithEnvironment('TimelineFilters', () => {
   describe('IsLong', () => {
@@ -49,7 +49,7 @@ describeWithEnvironment('TimelineFilters', () => {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
       // These events are usually visible, so make the category hidden before
       // running this test.
-      Components.EntryStyles.getCategoryStyles()['scripting'].hidden = true;
+      Utils.EntryStyles.getCategoryStyles()['scripting'].hidden = true;
 
       const userTimingEvent = parsedTrace.UserTimings.performanceMeasures.at(0);
       if (!userTimingEvent) {
@@ -57,7 +57,7 @@ describeWithEnvironment('TimelineFilters', () => {
       }
       const filter = new Timeline.TimelineFilters.Category();
       assert.isFalse(filter.accept(userTimingEvent));
-      Components.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
+      Utils.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
     });
 
     it('returns true for a new event if it has a category that is visible', async function() {
@@ -68,7 +68,7 @@ describeWithEnvironment('TimelineFilters', () => {
       }
       const filter = new Timeline.TimelineFilters.Category();
       assert.isTrue(filter.accept(userTimingEvent));
-      Components.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
+      Utils.EntryStyles.getCategoryStyles()['scripting'].hidden = false;
     });
   });
 });

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';
@@ -45,7 +44,12 @@ import {ModificationsManager} from './ModificationsManager.js';
 import {ThreadAppender} from './ThreadAppender.js';
 import timelineFlamechartPopoverStyles from './timelineFlamechartPopover.css.js';
 import {FlameChartStyle, Selection} from './TimelineFlameChartView.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {
+  selectionFromEvent,
+  selectionIsRange,
+  selectionsEqual,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
@@ -101,9 +105,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartDataProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// Frames are special cased because we don't render them as a normal track, hence the distinction here.
-export type TimelineFlameChartEntry = Trace.Handlers.ModelHandlers.Frames.TimelineFrame|Trace.Types.Events.Event;
-
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
   private droppedFramePatternCanvas: HTMLCanvasElement;
@@ -132,7 +133,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   // all - will not appear in this array and it will change per-render. For
   // example, if a user collapses an icicle in the flamechart, those entries
   // that are now hidden will no longer be in this array.
-  private entryData: TimelineFlameChartEntry[] = [];
+  // This also includes entrys that used to be special cased (e.g.
+  // TimelineFrames) that are now of type Types.Events.Event and so the old
+  // `TimelineFlameChartEntry` type has been removed in faovur of using
+  // Trace.Types.Events.Event directly. See crrev.com/c/5973695 for details.
+  private entryData: Trace.Types.Events.Event[] = [];
 
   private entryTypeByLevel!: EntryType[];
   private entryIndexToTitle!: string[];
@@ -140,8 +145,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private lastInitiatorsData: PerfUI.FlameChart.FlameChartInitiatorData[] = [];
   private lastSelection?: Selection;
   #font: string;
-  #eventIndexByEvent: WeakMap<Trace.Types.Events.Event|Trace.Handlers.ModelHandlers.Frames.TimelineFrame, number|null> =
-      new WeakMap();
+  #eventIndexByEvent: WeakMap<Trace.Types.Events.Event, number|null> = new WeakMap();
 
   constructor() {
     super();
@@ -213,14 +217,24 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
 
-    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';
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction(actionIdDrJ)) {
+      const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionIdDrJ);
+      contextMenu.headerSection().appendItem(action.title(), () => {
+        const event = this.eventByIndex(entryIndex);
+        if (!event || !this.parsedTrace) {
+          return;
+        }
+        const allEvents = Array.from(this.entryData.values());
+        const aiCallTree = Utils.AICallTree.AICallTree.from(event, allEvents, this.parsedTrace);
 
-    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.performance-panel-context')) {
-      const traceEntryNodeForAI = this.getTraceEntryTreeForAIFromEntryIndex(entryIndex);
-      UI.Context.Context.instance().setFlavor(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, traceEntryNodeForAI);
-      contextMenu.headerSection().appendAction(
-          'drjones.performance-panel-context',
-      );
+        // The other side of setFlavor is handleTraceEntryNodeFlavorChange() in FreestylerPanel
+        UI.Context.Context.instance().setFlavor(Utils.AICallTree.AICallTree, aiCallTree);
+        return action.execute();
+      }, {jslogContext: actionIdDrJ});
     }
 
     const hideEntryOption = contextMenu.defaultSection().appendItem(i18nString(UIStrings.hideFunction), () => {
@@ -229,7 +243,8 @@ 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);
 
     const hideChildrenOption = contextMenu.defaultSection().appendItem(i18nString(UIStrings.hideChildren), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION, entryIndex);
@@ -237,7 +252,8 @@ 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);
 
     const hideRepeatingChildrenOption =
         contextMenu.defaultSection().appendItem(i18nString(UIStrings.hideRepeatingChildren), () => {
@@ -246,7 +262,8 @@ 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);
 
     const resetChildrenOption = contextMenu.defaultSection().appendItem(i18nString(UIStrings.resetChildren), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.RESET_CHILDREN, entryIndex);
@@ -254,7 +271,8 @@ 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);
 
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.resetTrace), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.UNDO_ALL_ACTIONS, entryIndex);
@@ -264,7 +282,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     });
 
     const entry = this.eventByIndex(entryIndex);
-    if (!entry || entry instanceof Trace.Handlers.ModelHandlers.Frames.TimelineFrame || !this.parsedTrace) {
+    if (!entry || !this.parsedTrace || Trace.Types.Events.isLegacyTimelineFrame(entry)) {
       return contextMenu;
     }
     const url = Utils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(this.parsedTrace, entry);
@@ -274,6 +292,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeScriptFromIgnoreList), () => {
         Bindings.IgnoreListManager.IgnoreListManager.instance().unIgnoreListURL(url);
+        this.timelineData(/* rebuild= */ true);
         this.dispatchEventToListeners(Events.DATA_CHANGED);
       }, {
         jslogContext: 'remove-from-ignore-list',
@@ -281,6 +300,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     } else {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.addScriptToIgnoreList), () => {
         Bindings.IgnoreListManager.IgnoreListManager.instance().ignoreListURL(url);
+        this.timelineData(/* rebuild= */ true);
         this.dispatchEventToListeners(Events.DATA_CHANGED);
       }, {
         jslogContext: 'add-to-ignore-list',
@@ -316,15 +336,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.dispatchEventToListeners(Events.DATA_CHANGED);
   }
 
-  getTraceEntryTreeForAIFromEntryIndex(entryIndex: number): Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null {
-    const entry = this.entryData[entryIndex] as Trace.Types.Events.Event;
-    const manager = ModificationsManager.activeManager();
-    if (!manager) {
-      return null;
-    }
-    return manager.getEntriesFilter().getTraceEntryTreeForAI(entry);
-  }
-
   findPossibleContextMenuActions(entryIndex: number): PerfUI.FlameChart.PossibleFilterActions|void {
     const entry = this.entryData[entryIndex] as Trace.Types.Events.Event;
     return ModificationsManager.activeManager()?.getEntriesFilter().findPossibleActions(entry);
@@ -469,9 +480,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   textColor(index: number): string {
     const event = this.entryData[index];
-    if (!TimelineFlameChartDataProvider.timelineEntryIsTraceEvent(event)) {
-      return FlameChartStyle.textColor;
-    }
     return Utils.IgnoreList.isIgnoreListedEntry(event) ? '#888' : FlameChartStyle.textColor;
   }
 
@@ -629,13 +637,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return this.timeSpan;
   }
 
-  static timelineEntryIsTraceEvent(entry: TimelineFlameChartEntry): entry is Trace.Types.Events.Event {
-    return entry instanceof Trace.Handlers.ModelHandlers.Frames.TimelineFrame === false;
-  }
-
-  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) {
@@ -644,8 +647,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
         continue;
       }
 
-      if (!TimelineFlameChartDataProvider.timelineEntryIsTraceEvent(entry)) {
-        // We only search for events, not for frames, hence this early exit.
+      if (Trace.Types.Events.isLegacyTimelineFrame(entry)) {
         continue;
       }
 
@@ -656,7 +658,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (!Trace.Helpers.Timing.eventIsInBounds(entry, visibleWindow)) {
         continue;
       }
-      if (filter.accept(entry, this.parsedTrace || undefined)) {
+      if (!filter || filter.accept(entry, this.parsedTrace || undefined)) {
         const startTimeMilli = Trace.Helpers.Timing.microSecondsToMilliseconds(entry.ts);
         results.push({index: i, startTimeMilli, provider: 'main'});
       }
@@ -689,7 +691,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     this.entryTypeByLevel[this.currentLevel] = EntryType.FRAME;
     for (const frame of this.parsedTrace.Frames.frames) {
-      this.#appendNewEngineFrame(frame);
+      this.#appendFrame(frame);
     }
     ++this.currentLevel;
 
@@ -756,7 +758,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       }
 
     } else if (entryType === EntryType.FRAME) {
-      const frame = (this.entryData[entryIndex] as Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
+      const frame = (this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame);
       time =
           i18n.TimeUtilities.preciseMillisToString(Trace.Helpers.Timing.microSecondsToMilliseconds(frame.duration), 1);
 
@@ -829,7 +831,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   #entryColorForFrame(entryIndex: number): string {
-    const frame = (this.entryData[entryIndex] as Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
+    const frame = (this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame);
     if (frame.idle) {
       return 'white';
     }
@@ -897,10 +899,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private drawFrame(
-      entryIndex: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number,
-      barWidth: number, barHeight: number): void {
+      entryIndex: number, context: CanvasRenderingContext2D, barX: number, barY: number, barWidth: number,
+      barHeight: number): void {
     const hPadding = 1;
-    const frame = (this.entryData[entryIndex] as Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
+    const frame = this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame;
     barX += hPadding;
     barWidth -= 2 * hPadding;
     context.fillStyle = this.entryColor(entryIndex);
@@ -962,7 +964,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const entryType = this.#entryTypeForIndex(entryIndex);
 
     if (entryType === EntryType.FRAME) {
-      this.drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight);
+      this.drawFrame(entryIndex, context, barX, barY, barWidth, barHeight);
       return true;
     }
 
@@ -1111,7 +1113,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return group;
   }
 
-  #appendNewEngineFrame(frame: Trace.Handlers.ModelHandlers.Frames.TimelineFrame): void {
+  #appendFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
     const index = this.entryData.length;
     this.entryData.push(frame);
     const durationMilliseconds = Trace.Helpers.Timing.microSecondsToMilliseconds(frame.duration);
@@ -1125,22 +1127,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   createSelection(entryIndex: number): TimelineSelection|null {
-    const entryType = this.#entryTypeForIndex(entryIndex);
-    let timelineSelection: TimelineSelection|null = null;
     const entry = this.entryData[entryIndex];
-    if (entry && TimelineFlameChartDataProvider.timelineEntryIsTraceEvent(entry)) {
-      timelineSelection = TimelineSelection.fromTraceEvent(entry);
-    } else if (entryType === EntryType.FRAME) {
-      timelineSelection = TimelineSelection.fromFrame(
-          (this.entryData[entryIndex] as Trace.Handlers.ModelHandlers.Frames.TimelineFrame));
-    }
+    const timelineSelection: TimelineSelection|null = entry ? selectionFromEvent(entry) : null;
     if (timelineSelection) {
       this.lastSelection = new Selection(timelineSelection, entryIndex);
     }
-    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.performance-panel-context')) {
-      const traceEntryNodeForAI = this.getTraceEntryTreeForAIFromEntryIndex(entryIndex);
-      UI.Context.Context.instance().setFlavor(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, traceEntryNodeForAI);
-    }
     return timelineSelection;
   }
 
@@ -1168,27 +1159,25 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   entryIndexForSelection(selection: TimelineSelection|null): number {
-    if (!selection || TimelineSelection.isRangeSelection(selection.object) ||
-        TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selection.object)) {
+    if (!selection || selectionIsRange(selection) || Trace.Types.Events.isNetworkTrackEntry(selection.event)) {
       return -1;
     }
 
-    if (this.lastSelection && this.lastSelection.timelineSelection.object === selection.object) {
+    if (this.lastSelection && selectionsEqual(this.lastSelection.timelineSelection, selection)) {
       return this.lastSelection.entryIndex;
     }
 
+    const index = this.entryData.indexOf(selection.event);
     // If the index is -1 and the selection is a TraceEvent, it might be
     // the case that this Entry is hidden by the Context Menu action.
     // Try revealing the entry and getting the index again.
-    if (this.entryData.indexOf(selection.object) === -1 && TimelineSelection.isTraceEventSelection(selection.object)) {
+    if (index > -1) {
       if (this.timelineDataInternal?.selectedGroup) {
-        ModificationsManager.activeManager()?.getEntriesFilter().revealEntry(
-            selection.object as Trace.Types.Events.Event);
+        ModificationsManager.activeManager()?.getEntriesFilter().revealEntry(selection.event);
         this.timelineData(true);
       }
     }
 
-    const index = this.entryData.indexOf(selection.object);
     if (index !== -1) {
       this.lastSelection = new Selection(selection, index);
     }
@@ -1200,7 +1189,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
    * timelineData() has been generated. If it hasn't, this method will return
    * null.
    */
-  indexForEvent(targetEvent: Trace.Types.Events.Event|Trace.Handlers.ModelHandlers.Frames.TimelineFrame): number|null {
+  indexForEvent(targetEvent: Trace.Types.Events.Event): number|null {
     // Gets the index for the given event by walking through the array of entryData.
     // This may seem inefficient - but we have seen that by building up large
     // maps keyed by trace events that this has a significant impact on the

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';
@@ -16,7 +15,12 @@ import {ModificationsManager} from './ModificationsManager.js';
 import {NetworkTrackAppender, type NetworkTrackEvent} from './NetworkTrackAppender.js';
 import timelineFlamechartPopoverStyles from './timelineFlamechartPopover.css.js';
 import {FlameChartStyle, Selection} from './TimelineFlameChartView.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {
+  selectionFromEvent,
+  selectionIsRange,
+  selectionsEqual,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import * as TimelineUtils from './utils/utils.js';
 
 export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.FlameChartDataProvider {
@@ -120,7 +124,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
       return null;
     }
     const event = this.#events[index];
-    this.#lastSelection = new Selection(TimelineSelection.fromTraceEvent(event), index);
+    this.#lastSelection = new Selection(selectionFromEvent(event), index);
     return this.#lastSelection.timelineSelection;
   }
 
@@ -136,11 +140,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     return contextMenu;
   }
 
-  indexForEvent(event: Trace.Types.Events.Event|Trace.Handlers.ModelHandlers.Frames.TimelineFrame): number|null {
-    // In the NetworkDataProvider we will never be dealing with frames, but we need to satisfy the interface for a DataProvider.
-    if (event instanceof Trace.Handlers.ModelHandlers.Frames.TimelineFrame) {
-      return null;
-    }
+  indexForEvent(event: Trace.Types.Events.Event): number|null {
     if (!Trace.Types.Events.isNetworkTrackEntry(event)) {
       return null;
     }
@@ -177,21 +177,21 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
   }
 
   entryIndexForSelection(selection: TimelineSelection|null): number {
-    if (!selection) {
+    if (!selection || selectionIsRange(selection)) {
       return -1;
     }
 
-    if (this.#lastSelection && this.#lastSelection.timelineSelection.object === selection.object) {
+    if (this.#lastSelection && selectionsEqual(this.#lastSelection.timelineSelection, selection)) {
       return this.#lastSelection.entryIndex;
     }
 
-    if (!TimelineSelection.isNetworkEventSelection(selection.object)) {
+    if (!Trace.Types.Events.isNetworkTrackEntry(selection.event)) {
       return -1;
     }
 
-    const index = this.#events.indexOf(selection.object);
+    const index = this.#events.indexOf(selection.event);
     if (index !== -1) {
-      this.#lastSelection = new Selection(TimelineSelection.fromTraceEvent(selection.object), index);
+      this.#lastSelection = new Selection(selectionFromEvent(selection.event), index);
     }
     return index;
   }
@@ -216,7 +216,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
 
   entryTitle(index: number): string|null {
     const event = this.#events[index];
-    return TimelineComponents.EntryName.nameForEntry(event);
+    return TimelineUtils.EntryName.nameForEntry(event);
   }
 
   entryFont(_index: number): string|null {
@@ -488,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++) {
@@ -501,7 +501,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
         continue;
       }
 
-      if (filter.accept(entry, this.#parsedTrace ?? undefined)) {
+      if (!filter || filter.accept(entry, this.#parsedTrace ?? undefined)) {
         const startTimeMilli = Trace.Helpers.Timing.microSecondsToMilliseconds(entry.ts);
         results.push({startTimeMilli, index: i, provider: 'network'});
       }

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

@@ -93,11 +93,10 @@ describeWithEnvironment('TimelineFlameChartView', function() {
 
     function assertSelectionName(name: string) {
       const selection = mockViewDelegate.selection;
-      if (!selection || !Timeline.TimelineSelection.TimelineSelection.isTraceEventSelection(selection.object)) {
+      if (!selection || !Timeline.TimelineSelection.selectionIsEvent(selection)) {
         throw new Error('Selection is not present or not a Trace Event');
       }
-      const object = selection.object;
-      assert.strictEqual(object.name, name);
+      assert.strictEqual(selection.event.name, name);
     }
   });