chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -39,14 +39,18 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {CompatibilityTracksAppender, type DrawOverride, type TrackAppenderName} from './CompatibilityTracksAppender.js';
-import * as Components from './components/components.js';
 import {ExtensionDataGatherer} from './ExtensionDataGatherer.js';
 import {initiatorsDataToDraw} from './Initiators.js';
 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 = {
@@ -102,9 +106,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;
@@ -133,17 +134,19 @@ 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 screenshotImageCache!: Map<Trace.Types.Events.SyntheticScreenshot, HTMLImageElement|null>;
   private entryIndexToTitle!: string[];
   private lastInitiatorEntry!: number;
   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();
@@ -180,6 +183,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
             ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container');
       }
     });
+    Utils.ImageCache.emitter.addEventListener(
+        'screenshot-loaded', () => this.dispatchEventToListeners(Events.DATA_CHANGED));
   }
 
   hasTrackConfigurationMode(): boolean {
@@ -213,8 +218,27 @@ 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});
 
+    // 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);
+
+        // 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), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.MERGE_FUNCTION, entryIndex);
     }, {
@@ -222,6 +246,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       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);
@@ -230,6 +256,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       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), () => {
@@ -239,6 +267,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
           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);
@@ -247,6 +277,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       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);
@@ -256,7 +288,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);
@@ -266,6 +298,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',
@@ -273,6 +306,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',
@@ -282,6 +316,23 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return contextMenu;
   }
 
+  entryHasAnnotations(entryIndex: number): boolean {
+    const event = this.eventByIndex(entryIndex);
+    if (!event) {
+      return false;
+    }
+    const annotations = ModificationsManager.activeManager()?.annotationsForEntry(event);
+    return annotations ? annotations.length > 0 : false;
+  }
+
+  deleteAnnotationsForEntry(entryIndex: number): void {
+    const event = this.eventByIndex(entryIndex);
+    if (!event) {
+      return;
+    }
+    ModificationsManager.activeManager()?.deleteEntryAnnotations(event);
+  }
+
   modifyTree(action: PerfUI.FlameChart.FilterAction, entryIndex: number): void {
     const entry = this.entryData[entryIndex] as Trace.Types.Events.Event;
 
@@ -435,9 +486,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;
   }
 
@@ -451,9 +499,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.entryData = [];
     this.entryTypeByLevel = [];
     this.entryIndexToTitle = [];
-    this.screenshotImageCache = new Map();
     this.#eventIndexByEvent = new Map();
+
     if (resetCompatibilityTracksAppender) {
+      this.compatibilityTracksAppender?.reset();
       this.compatibilityTracksAppender = null;
       this.timelineDataInternal = null;
     } else if (!resetCompatibilityTracksAppender && this.timelineDataInternal) {
@@ -462,6 +511,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       this.compatibilityTracksAppender?.threadAppenders().forEach(
           threadAppender => threadAppender.setHeaderAppended(false));
     }
+
+    ExtensionDataGatherer.removeInstance();
   }
 
   maxStackDepth(): number {
@@ -592,13 +643,9 @@ 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[] {
+      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter): PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     this.timelineData();
     for (let i = 0; i < this.entryData.length; ++i) {
@@ -607,8 +654,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;
       }
 
@@ -619,7 +665,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'});
       }
@@ -652,7 +698,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;
 
@@ -700,7 +746,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     let title;
     let warningElements: Element[] = [];
     let nameSpanTimelineInfoTime = 'timeline-info-time';
-
     const additionalContent: HTMLElement[] = [];
 
     const entryType = this.#entryTypeForIndex(entryIndex);
@@ -715,13 +760,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       title = highlightedEntryInfo.title;
       time = highlightedEntryInfo.formattedTime;
       warningElements = highlightedEntryInfo.warningElements || warningElements;
-      if (Trace.Types.Events.isSyntheticInteraction(event)) {
-        const breakdown = new Components.InteractionBreakdown.InteractionBreakdown();
-        breakdown.entry = event;
-        additionalContent.push(breakdown);
+      if (highlightedEntryInfo.additionalElement) {
+        additionalContent.push(highlightedEntryInfo.additionalElement);
       }
+
     } 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);
 
@@ -794,7 +838,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';
     }
@@ -862,10 +906,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);
@@ -902,16 +946,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       entryIndex: number, context: CanvasRenderingContext2D, barX: number, barY: number, barWidth: number,
       barHeight: number): Promise<void> {
     const screenshot = (this.entryData[entryIndex] as Trace.Types.Events.SyntheticScreenshot);
-    if (!this.screenshotImageCache.has(screenshot)) {
-      this.screenshotImageCache.set(screenshot, null);
-      const data = screenshot.args.dataUri;
-      const image = await UI.UIUtils.loadImage(data);
-      this.screenshotImageCache.set(screenshot, image);
-      this.dispatchEventToListeners(Events.DATA_CHANGED);
-      return;
-    }
-
-    const image = this.screenshotImageCache.get(screenshot);
+    const image = Utils.ImageCache.getOrQueue(screenshot);
     if (!image) {
       return;
     }
@@ -936,7 +971,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;
     }
 
@@ -1085,7 +1120,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);
@@ -1099,15 +1134,8 @@ 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);
     }
@@ -1138,27 +1166,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);
     }
@@ -1170,7 +1196,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
@@ -1266,7 +1292,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return true;
   }
 
-  eventByIndex(entryIndex: number): Trace.Types.Events.Event|Trace.Handlers.ModelHandlers.Frames.TimelineFrame|null {
+  eventByIndex(entryIndex: number): Trace.Types.Events.Event|null {
     if (entryIndex < 0) {
       return null;
     }
@@ -1275,7 +1301,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return this.entryData[entryIndex] as Trace.Types.Events.Event;
     }
     if (entryType === EntryType.FRAME) {
-      return this.entryData[entryIndex] as Trace.Handlers.ModelHandlers.Frames.TimelineFrame;
+      return this.entryData[entryIndex] as Trace.Types.Events.LegacyTimelineFrame;
     }
     return null;
   }

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

@@ -188,6 +188,63 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
     assert.lengthOf(results, 1);
     assert.deepEqual(results[0], {index: 8, startTimeMilli: 122411056.533, provider: 'network'});
   });
+
+  it('delete annotations associated with an event', async function() {
+    const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    dataProvider.setModel(parsedTrace);
+    const entryIndex = 0;
+    const eventToFindAssociatedEntriesFor = dataProvider.eventByIndex(entryIndex);
+    const event = dataProvider.eventByIndex(1);
+    assert.exists(eventToFindAssociatedEntriesFor);
+    assert.exists(event);
+
+    // This link annotation should be deleted
+    Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+      type: 'ENTRIES_LINK',
+      entryFrom: eventToFindAssociatedEntriesFor,
+      entryTo: event,
+      state: Trace.Types.File.EntriesLinkState.CONNECTED,
+    });
+
+    Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+      type: 'ENTRY_LABEL',
+      entry: event,
+      label: 'label',
+    });
+
+    dataProvider.deleteAnnotationsForEntry(entryIndex);
+    // Make sure one of the annotations was deleted
+    assert.deepEqual(Timeline.ModificationsManager.ModificationsManager.activeManager()?.getAnnotations().length, 1);
+  });
+
+  it('correctly identifies if an event has annotations', async function() {
+    const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    dataProvider.setModel(parsedTrace);
+    const eventIndex = 0;
+    const event = dataProvider.eventByIndex(eventIndex);
+    const event2 = dataProvider.eventByIndex(1);
+    assert.exists(event);
+    assert.exists(event2);
+
+    // Create a link between events
+    Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+      type: 'ENTRIES_LINK',
+      entryFrom: event,
+      entryTo: event2,
+      state: Trace.Types.File.EntriesLinkState.CONNECTED,
+    });
+
+    // Made sure the event has annotations
+    assert.isTrue(dataProvider.entryHasAnnotations(eventIndex));
+
+    // Delete annotations for the event
+    dataProvider.deleteAnnotationsForEntry(eventIndex);
+
+    // Made sure the event does not have annotations
+    assert.isFalse(dataProvider.entryHasAnnotations(eventIndex));
+  });
 });
 
 function assertTimestampEqual(actual: number, expected: number): void {

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -12,10 +12,16 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import * as TimelineComponents from './components/components.js';
 import {initiatorsDataToDrawForNetwork} from './Initiators.js';
+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 {
@@ -119,7 +125,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;
   }
 
@@ -135,11 +141,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;
     }
@@ -158,22 +160,39 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     return this.#events.at(entryIndex) ?? null;
   }
 
+  entryHasAnnotations(entryIndex: number): boolean {
+    const event = this.eventByIndex(entryIndex);
+    if (!event) {
+      return false;
+    }
+    const entryAnnotations = ModificationsManager.activeManager()?.annotationsForEntry(event);
+    return entryAnnotations !== undefined && entryAnnotations.length > 0;
+  }
+
+  deleteAnnotationsForEntry(entryIndex: number): void {
+    const event = this.eventByIndex(entryIndex);
+    if (!event) {
+      return;
+    }
+    ModificationsManager.activeManager()?.deleteEntryAnnotations(event);
+  }
+
   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;
   }
@@ -198,7 +217,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 {
@@ -470,7 +489,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
    */
   search(
       visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter: TimelineModel.TimelineModelFilter.TimelineModelFilter,
+      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter,
       ): PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     for (let i = 0; i < this.#events.length; i++) {
@@ -483,7 +502,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);
     }
   });