chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Trace from '../../models/trace/trace.js';
+import * as Root from '../../core/root/root.js';
+import * as Trace from '../../models/trace/trace.js';
+import {doubleRaf} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
@@ -18,20 +20,9 @@ class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegat
   element = document.createElement('div');
 }
 
-function getRowDataForNetworkDetailsElement(details: ShadowRoot) {
-  return Array.from(details.querySelectorAll<HTMLDivElement>('.network-request-details-row')).map(row => {
-    const title = row.querySelector<HTMLDivElement>('.title')?.innerText;
-    // The innerText in here will contain a `\n` and a few space for each child <div> tag, so just remove these empty
-    // characters for easier test.
-    const regExpForLineBreakAndFollowingSpaces = /\n[\s]+/g;
-    const value =
-        row.querySelector<HTMLDivElement>('.value')?.innerText.replaceAll(regExpForLineBreakAndFollowingSpaces, '');
-    return {title, value};
-  });
-}
-
 describeWithEnvironment('TimelineDetailsView', function() {
   const mockViewDelegate = new MockViewDelegate();
+
   it('displays the details of a network request event correctly', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'lcp-web-font.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
@@ -43,41 +34,95 @@ describeWithEnvironment('TimelineDetailsView', function() {
     if (!cssRequest) {
       throw new Error('Could not find expected network request.');
     }
-    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(cssRequest);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(cssRequest);
 
-    await detailsView.setModel(parsedTrace, null, insights);
+    await detailsView.setModel(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: insights, eventToRelatedInsightsMap: null});
     await detailsView.setSelection(selection);
 
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
-    assert.strictEqual(detailsContentElement.childNodes.length, 1);
-    const detailsElementShadowRoot = (detailsContentElement.childNodes[0] as HTMLElement).shadowRoot;
-    if (!detailsElementShadowRoot) {
-      throw new Error('Could not find expected element to test.');
-    }
-    const rowData = getRowDataForNetworkDetailsElement(detailsElementShadowRoot);
-
-    const durationInnerText = '12.58 ms' +
-        'Queuing and connecting1.83 ms' +
-        'Request sent and waiting4.80 ms' +
-        'Content downloading1.66 ms' +
-        'Waiting on main thread4.29 ms';
-    assert.deepEqual(
-        rowData,
-        [
-          {title: 'URL', value: 'chromedevtools.github.io/performance-stories/lcp-web-font/app.css'},
-          {title: 'Request method', value: 'GET'},
-          {title: 'Initial priority', value: 'Highest'},
-          {title: 'Priority', value: 'Highest'},
-          {title: 'MIME type', value: 'text/css'},
-          {title: 'Encoded data', value: ' (from cache)'},
-          {title: 'Decoded body', value: '96 B'},
-          {
-            title: 'Initiated by',
-            value: 'chromedevtools.github.io/performance-stories/lcp-web-font/index.html',
-          },
-          {title: 'From cache', value: 'Yes'},
-          {title: 'Duration', value: durationInnerText},
-        ],
+    // NetworkRequestDetails and RelatedInsightsChips nodes.
+    assert.strictEqual(detailsContentElement.childNodes.length, 2);
+  });
+
+  it('displays the details for a frame correctly', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const frame = parsedTrace.Frames.frames.at(0);
+    assert.isOk(frame);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(frame);
+    await detailsView.setSelection(selection);
+    await doubleRaf();  // to let the image be fetched + rendered.
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    const frameImg = detailsContentElement.querySelector('.timeline-filmstrip-preview img');
+    assert.instanceOf(frameImg, HTMLImageElement);
+    assert.isDefined(frameImg.src);
+
+    const duration = detailsContentElement.querySelector<HTMLElement>('[data-row-title="Duration"]');
+    assert.isOk(duration);
+    assert.strictEqual(duration.innerText, 'Duration37.85 ms (at 109.82 ms)');
+  });
+
+  it('renders the layout shift component for a single layout shift', async function() {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
+
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const layoutShift = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
+    assert.isOk(layoutShift);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(layoutShift);
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    // Assert that the right component is rendered. This component has its own
+    // tests for its contents so no need to duplicate those here.
+    const layoutShiftDetails = detailsContentElement.querySelector('devtools-performance-layout-shift-details');
+    assert.isNotNull(layoutShiftDetails);
+  });
+
+  it('renders the layout shift component for a selected cluster', async function() {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
+
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const layoutShiftCluster = parsedTrace.LayoutShifts.clusters.at(0);
+    assert.isOk(layoutShiftCluster);
+    const selection = Timeline.TimelineSelection.selectionFromEvent(layoutShiftCluster);
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    // Assert that the right component is rendered. This component has its own
+    // tests for its contents so no need to duplicate those here.
+    const layoutShiftDetails = detailsContentElement.querySelector('devtools-performance-layout-shift-details');
+    assert.isNotNull(layoutShiftDetails);
+  });
+
+  it('updates the range details when the user has a range selected', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel({
+      parsedTrace,
+      // We have to set selected events for the range selection UI to be drawn
+      // (without the set of events we can't generate the range stats)
+      selectedEvents: parsedTrace.Renderer.allTraceEntries,
+      traceInsightsSets: null,
+      eventToRelatedInsightsMap: null,
+    });
+    const bounds = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds);
+    const selection = Timeline.TimelineSelection.selectionFromRangeMilliSeconds(
+        bounds.min,
+        bounds.max,
     );
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    const title = detailsContentElement.querySelector<HTMLElement>('.timeline-details-chip-title');
+    assert.strictEqual(title?.innerText, 'Range:  0 ms – 5.39 s');
   });
 });

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -19,8 +19,13 @@ import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelineLayersView} from './TimelineLayersView.js';
 import {TimelinePaintProfilerView} from './TimelinePaintProfilerView.js';
-import {type TimelineModeViewDelegate} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import type {TimelineModeViewDelegate} from './TimelinePanel.js';
+import {
+  selectionFromRangeMilliSeconds,
+  selectionIsEvent,
+  selectionIsRange,
+  type TimelineSelection,
+} from './TimelineSelection.js';
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
 import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, type TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineDetailsContentHelper, TimelineUIUtils} from './TimelineUIUtils.js';
@@ -78,10 +83,13 @@ export class TimelineDetailsView extends UI.Widget.VBox {
   private lazySelectorStatsView: TimelineSelectorStatsView|null;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  /* eslint-disable-next-line no-unused-private-class-members */
+  #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #filmStrip: Trace.Extras.FilmStrip.Data|null = null;
   #networkRequestDetails: TimelineComponents.NetworkRequestDetails.NetworkRequestDetails;
   #layoutShiftDetails: TimelineComponents.LayoutShiftDetails.LayoutShiftDetails;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
+  #relatedInsightChips = new TimelineComponents.RelatedInsightChips.RelatedInsightChips();
 
   constructor(delegate: TimelineModeViewDelegate) {
     super();
@@ -163,24 +171,31 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     }
   }
 
-  async setModel(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace|null, selectedEvents: Trace.Types.Events.Event[]|null,
-      traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null): Promise<void> {
-    if (this.#parsedTrace !== parsedTrace) {
+  async setModel(data: {
+    parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+    selectedEvents: Trace.Types.Events.Event[]|null,
+    traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null,
+    eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null,
+  }): Promise<void> {
+    if (this.#parsedTrace !== data.parsedTrace) {
       // Clear the selector stats view, so the next time the user views it we
       // reconstruct it with the new trace data.
       this.lazySelectorStatsView = null;
 
-      this.#parsedTrace = parsedTrace;
+      this.#parsedTrace = data.parsedTrace;
     }
-    if (parsedTrace) {
-      this.#filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace);
+    if (data.parsedTrace) {
+      this.#filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(data.parsedTrace);
+    }
+    this.#selectedEvents = data.selectedEvents;
+    this.#traceInsightsSets = data.traceInsightsSets;
+    this.#eventToRelatedInsightsMap = data.eventToRelatedInsightsMap;
+    if (data.eventToRelatedInsightsMap) {
+      this.#relatedInsightChips.eventToRelatedInsightsMap = data.eventToRelatedInsightsMap;
     }
-    this.#selectedEvents = selectedEvents;
-    this.#traceInsightsSets = traceInsightsSets;
     this.tabbedPane.closeTabs([Tab.PaintProfiler, Tab.LayerViewer], false);
     for (const view of this.rangeDetailViews.values()) {
-      view.setModelWithEvents(selectedEvents, parsedTrace);
+      view.setModelWithEvents(data.selectedEvents, data.parsedTrace);
     }
     this.lazyPaintProfilerView = null;
     this.lazyLayersView = null;
@@ -196,6 +211,9 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     }
     this.defaultDetailsContentElement.removeChildren();
     this.defaultDetailsContentElement.appendChild(node);
+    if (this.#relatedInsightChips) {
+      this.defaultDetailsContentElement.appendChild(this.#relatedInsightChips);
+    }
   }
 
   private updateContents(): void {
@@ -206,7 +224,7 @@ export class TimelineDetailsView extends UI.Widget.VBox {
         return;
       }
       const visibleWindow = traceBoundsState.milli.timelineTraceWindow;
-      view.updateContents(this.selection || TimelineSelection.fromRange(visibleWindow.min, visibleWindow.max));
+      view.updateContents(this.selection || selectionFromRangeMilliSeconds(visibleWindow.min, visibleWindow.max));
     }
   }
 
@@ -277,6 +295,61 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     return frameTimeMilliSeconds - frame.endTime < 10 ? filmStripFrame : null;
   }
 
+  #setSelectionForTimelineFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
+    const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
+    this.setContent(TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
+    const target = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (frame.layerTree && target) {
+      const layerTreeForFrame = new TimelineModel.TracingLayerTree.TracingFrameLayerTree(target, frame.layerTree);
+      const layersView = this.layersView();
+      layersView.showLayerTree(layerTreeForFrame);
+      if (!this.tabbedPane.hasTab(Tab.LayerViewer)) {
+        this.appendTab(Tab.LayerViewer, i18nString(UIStrings.layers), layersView);
+      }
+    }
+  }
+
+  async #setSelectionForNetworkEvent(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): Promise<void> {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
+    await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
+    this.#relatedInsightChips.activeEvent = networkRequest;
+    if (this.#eventToRelatedInsightsMap) {
+      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    }
+
+    this.setContent(this.#networkRequestDetails);
+  }
+
+  async #setSelectionForTraceEvent(event: Trace.Types.Events.Event): Promise<void> {
+    if (!this.#parsedTrace) {
+      return;
+    }
+
+    this.#relatedInsightChips.activeEvent = event;
+    if (this.#eventToRelatedInsightsMap) {
+      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    }
+
+    // Special case: if Insights experiment is enabled (on by default in M131)
+    // and the user selects a layout shift or a layout shift cluster, render
+    // the new layout shift details component.
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
+        (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event))) {
+      const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
+      this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
+      this.setContent(this.#layoutShiftDetails);
+      return;
+    }
+
+    // Otherwise, build the generic trace event details UI.
+    const traceEventDetails =
+        await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
+    this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
+  }
+
   async setSelection(selection: TimelineSelection|null): Promise<void> {
     if (!this.#parsedTrace) {
       // You can't make a selection if we have no trace data.
@@ -284,47 +357,25 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     }
     this.detailsLinkifier.reset();
     this.selection = selection;
+    this.#relatedInsightChips.activeEvent = null;
     if (!this.selection) {
       // Update instantly using forceImmediateUpdate, since we are only
       // making a single call and don't need to debounce.
       this.scheduleUpdateContentsFromWindow(/* forceImmediateUpdate */ true);
       return;
     }
-    const selectionObject = this.selection.object;
-    if (TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selectionObject)) {
-      const networkRequest = selectionObject;
-      const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
-      await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
-      this.setContent(this.#networkRequestDetails);
-    } else if (TimelineSelection.isTraceEventSelection(selectionObject)) {
-      const event = selectionObject;
-      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
-          (Trace.Types.Events.isSyntheticLayoutShift(event) ||
-           Trace.Types.Events.isSyntheticLayoutShiftCluster(event))) {
-        const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
-        this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
-        this.setContent(this.#layoutShiftDetails);
 
+    if (selectionIsEvent(selection)) {
+      if (Trace.Types.Events.isSyntheticNetworkRequest(selection.event)) {
+        await this.#setSelectionForNetworkEvent(selection.event);
+      } else if (Trace.Types.Events.isLegacyTimelineFrame(selection.event)) {
+        this.#setSelectionForTimelineFrame(selection.event);
       } else {
-        const traceEventDetails =
-            await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
-        this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
-      }
-    } else if (TimelineSelection.isLegacyTimelineFrame(selectionObject)) {
-      const frame = selectionObject;
-      const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
-      this.setContent(TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
-      const target = SDK.TargetManager.TargetManager.instance().rootTarget();
-      if (frame.layerTree && target) {
-        const layerTreeForFrame = new TimelineModel.TracingLayerTree.TracingFrameLayerTree(target, frame.layerTree);
-        const layersView = this.layersView();
-        layersView.showLayerTree(layerTreeForFrame);
-        if (!this.tabbedPane.hasTab(Tab.LayerViewer)) {
-          this.appendTab(Tab.LayerViewer, i18nString(UIStrings.layers), layersView);
-        }
+        await this.#setSelectionForTraceEvent(selection.event);
       }
-    } else if (TimelineSelection.isRangeSelection(selectionObject)) {
-      this.updateSelectedRangeStats(this.selection.startTime, this.selection.endTime);
+    } else if (selectionIsRange(selection)) {
+      const timings = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds(selection.bounds);
+      this.updateSelectedRangeStats(timings.min, timings.max);
     }
 
     this.updateContents();

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -37,7 +37,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 +147,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 +168,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 +197,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);
     }
@@ -458,6 +458,7 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
   private async imageByFrame(frame: Trace.Extras.FilmStrip.Frame): Promise<HTMLImageElement|null> {
     let imagePromise: Promise<HTMLImageElement|null>|undefined = this.frameToImagePromise.get(frame);
     if (!imagePromise) {
+      // TODO(paulirish): Adopt Util.ImageCache
       imagePromise = UI.UIUtils.loadImage(frame.screenshotEvent.args.dataUri);
       this.frameToImagePromise.set(frame, (imagePromise as Promise<HTMLImageElement>));
     }

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/TimelineFlameChartDataProvider.test.ts

@@ -216,4 +216,57 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     assert.lengthOf(results, 12);
     assert.deepEqual(results[0], {index: 154, startTimeMilli: 122411041.395, provider: 'main'});
   });
+
+  it('delete annotations associated with an event', async function() {
+    const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
+    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 label annotation should be deleted
+    Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+      type: 'ENTRY_LABEL',
+      entry: eventToFindAssociatedEntriesFor,
+      label: 'label',
+    });
+
+    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.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    dataProvider.setModel(parsedTrace);
+    const eventIndex = 0;
+    const event = dataProvider.eventByIndex(eventIndex);
+    assert.exists(event);
+
+    // Create a label for an event
+    Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+      type: 'ENTRY_LABEL',
+      entry: event,
+      label: 'label',
+    });
+
+    // 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));
+  });
 });