chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/EntriesFilter.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 
@@ -76,6 +77,20 @@ export class EntriesFilter {
     return possibleActions;
   }
 
+  /**
+   * Returns the trace entry tree for the specified event, simplified for input to AI Assistance.
+   * The tree is rooted at the top-level task that contains the event, with the node for specified event marked as selected.
+   */
+  getAIEventNodeTree(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.AINode|null {
+    const node = this.#entryToNode.get(entry);
+    if (!node) {
+      return null;
+    }
+
+    return Trace.Helpers.TreeHelpers.AINode.fromEntryNode(
+        node, Root.Runtime.experiments.isEnabled('timeline-show-all-events') ? () => true : entryIsVisibleInTimeline);
+  }
+
   /**
    * Returns the amount of entry descendants that belong to the hidden entries array.
    * */

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -10,12 +10,12 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.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 {Category, IsLong} from './TimelineFilters.js';
-import {type TimelineModeViewDelegate} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import type {TimelineModeViewDelegate} from './TimelinePanel.js';
+import {selectionIsEvent, type TimelineSelection} from './TimelineSelection.js';
 import {TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -59,8 +59,8 @@ export class EventsTimelineTreeView extends TimelineTreeView {
 
   override updateContents(selection: TimelineSelection): void {
     super.updateContents(selection);
-    if (TimelineSelection.isTraceEventSelection(selection.object)) {
-      this.selectEvent(selection.object, true);
+    if (selectionIsEvent(selection)) {
+      this.selectEvent(selection.event, true);
     }
   }
 
@@ -177,15 +177,15 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     toolbar.appendToolbarItem(durationFilterUI);
 
     const categoryFiltersUI = new Map<string, UI.Toolbar.ToolbarCheckbox>();
-    const categories = Components.EntryStyles.getCategoryStyles();
+    const categories = Utils.EntryStyles.getCategoryStyles();
     for (const categoryName in categories) {
-      const category = categories[categoryName as Components.EntryStyles.EventCategory];
+      const category = categories[categoryName as Utils.EntryStyles.EventCategory];
       if (!category.visible) {
         continue;
       }
       const checkbox = new UI.Toolbar.ToolbarCheckbox(
           category.title, undefined,
-          categoriesFilterChanged.bind(this, categoryName as Components.EntryStyles.EventCategory), categoryName);
+          categoriesFilterChanged.bind(this, categoryName as Utils.EntryStyles.EventCategory), categoryName);
       checkbox.setChecked(true);
       checkbox.inputElement.style.backgroundColor = category.color;
       categoryFiltersUI.set(category.name, checkbox);
@@ -199,8 +199,8 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       this.notifyFiltersChanged();
     }
 
-    function categoriesFilterChanged(this: Filters, name: Components.EntryStyles.EventCategory): void {
-      const categories = Components.EntryStyles.getCategoryStyles();
+    function categoriesFilterChanged(this: Filters, name: Utils.EntryStyles.EventCategory): void {
+      const categories = Utils.EntryStyles.getCategoryStyles();
       const checkBox = categoryFiltersUI.get(name);
       categories[name].hidden = !checkBox || !checkBox.checked();
       this.notifyFiltersChanged();

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -9,11 +9,13 @@ import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
+  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
 import * as Components from './components/components.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -137,7 +139,7 @@ export class InteractionsTrackAppender implements TrackAppender {
    * Gets the color an event added by this appender should be rendered with.
    */
   colorForEvent(event: Trace.Types.Events.Event): string {
-    let idForColorGeneration = Components.EntryName.nameForEntry(event, this.#parsedTrace);
+    let idForColorGeneration = Utils.EntryName.nameForEntry(event, this.#parsedTrace);
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
       // Append the ID so that we vary the colours, ensuring that two events of
       // the same type are coloured differently.
@@ -145,4 +147,13 @@ export class InteractionsTrackAppender implements TrackAppender {
     }
     return this.#colorGenerator.colorForID(idForColorGeneration);
   }
+
+  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
+    if (Trace.Types.Events.isSyntheticInteraction(event)) {
+      const breakdown = new Components.InteractionBreakdown.InteractionBreakdown();
+      breakdown.entry = event;
+      return {title: '', formattedTime: '', additionalElement: breakdown};
+    }
+    return {title: '', formattedTime: ''};
+  }
 }

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -5,6 +5,8 @@ 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 Trace from '../../models/trace/trace.js';
+import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -16,6 +18,7 @@ import {
   type TrackAppenderName,
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -104,6 +107,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       this.#compatibilityBuilder.appendEventsAtLevel(allClusters, currentLevel, this);
     }
 
+    void this.preloadScreenshots(allLayoutShifts);
     return this.#compatibilityBuilder.appendEventsAtLevel(allLayoutShifts, currentLevel, this);
   }
 
@@ -150,8 +154,20 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
     const title = Trace.Types.Events.isLayoutShift(event)       ? i18nString(UIStrings.layoutShift) :
         Trace.Types.Events.isSyntheticLayoutShiftCluster(event) ? i18nString(UIStrings.layoutShiftCluster) :
                                                                   event.name;
+
+    let additionalElement;
+    if (Trace.Types.Events.isSyntheticLayoutShift(event)) {
+      // Screenshots are max 500x500 naturally, but on a laptop in dock-to-right, 500px tall usually doesn't fit.
+      // In the future, we may investigate a way to dynamically scale this tooltip content per available space.
+      const maxSize = new UI.Geometry.Size(510, 400);
+      const vizElem = LayoutShiftsTrackAppender.createShiftViz(event, this.#parsedTrace, maxSize);
+      if (vizElem) {
+        additionalElement = vizElem;
+      }
+    }
+
     // Score isn't a duration, but the UI works anyhow.
-    return {title, formattedTime: score.toFixed(4)};
+    return {title, formattedTime: score.toFixed(4), additionalElement};
   }
 
   getDrawOverride(event: Trace.Types.Events.Event): DrawOverride|undefined {
@@ -159,12 +175,12 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       // If the new CLS experience isn't on.. Continue to present that Shifts are 5ms long. (but now via drawOverrides)
       // TODO: Remove this when the experiment ships
       if (Trace.Types.Events.isLayoutShift(event)) {
-        return (context, x, y, _width, levelHeight, timeToPosition) => {
+        return (context, x, y, _width, levelHeight, timeToPosition, transformColor) => {
           const fakeDurMs = Trace.Helpers.Timing.microSecondsToMilliseconds(
               Trace.Types.Timing.MicroSeconds(event.ts + LAYOUT_SHIFT_SYNTHETIC_DURATION));
           const barEnd = timeToPosition(fakeDurMs);
           const barWidth = barEnd - x;
-          context.fillStyle = this.colorForEvent(event);
+          context.fillStyle = transformColor(this.colorForEvent(event));
           context.fillRect(x, y, barWidth - 0.5, levelHeight - 1);
           return {
             x,
@@ -186,7 +202,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       // A LS score of ~0 will create a diamond of minimum size (exactly 0 should not happen in practice)
       const bufferScale = 1 - Math.min(score / 0.10, 1);
 
-      return (context, x, y, _width, levelHeight) => {
+      return (context, x, y, _width, levelHeight, _, transformColor) => {
         // levelHeight is 17px, so this math translates to a minimum diamond size of 5.6px tall.
         const maxBuffer = levelHeight / 3;
         const buffer = bufferScale * maxBuffer;
@@ -200,7 +216,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
         context.lineTo(x, y + levelHeight - buffer);
         context.lineTo(x - halfSize + buffer, y + halfSize);
         context.closePath();
-        context.fillStyle = this.colorForEvent(event);
+        context.fillStyle = transformColor(this.colorForEvent(event));
 
         context.fill();
         context.restore();
@@ -211,14 +227,132 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       };
     }
     if (Trace.Types.Events.isSyntheticLayoutShiftCluster(event)) {
-      return (context, x, y, width, levelHeight) => {
+      return (context, x, y, width, levelHeight, _, transformColor) => {
         const barHeight = levelHeight * 0.2;
         const barY = y + (levelHeight - barHeight) / 2 + 0.5;
-        context.fillStyle = this.colorForEvent(event);
+        context.fillStyle = transformColor(this.colorForEvent(event));
         context.fillRect(x, barY, width - 0.5, barHeight - 1);
         return {x, width, z: -1};
       };
     }
     return;
   }
+
+  preloadScreenshots(events: Trace.Types.Events.SyntheticLayoutShift[]): Promise<(void|undefined)[]> {
+    const screenshotsToLoad: Set<Trace.Types.Events.SyntheticScreenshot> = new Set();
+    for (const event of events) {
+      const shots = event.parsedData.screenshots;
+      shots.before && screenshotsToLoad.add(shots.before);
+      shots.after && screenshotsToLoad.add(shots.after);
+    }
+
+    const screenshots = Array.from(screenshotsToLoad);
+    return Utils.ImageCache.preload(screenshots);
+  }
+
+  static createShiftViz(
+      event: Trace.Types.Events.SyntheticLayoutShift, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      maxSize: UI.Geometry.Size): HTMLElement|undefined {
+    const screenshots = event.parsedData.screenshots;
+    const {viewportRect, devicePixelRatio: dpr} = parsedTrace.Meta;
+    const vizContainer = document.createElement('div');
+    vizContainer.classList.add('layout-shift-viz');
+
+    const beforeImg = screenshots.before && Utils.ImageCache.getOrQueue(screenshots.before);
+    const afterImg = screenshots.after && Utils.ImageCache.getOrQueue(screenshots.after);
+
+    if (!beforeImg || !afterImg || !viewportRect || dpr === undefined) {
+      return;
+    }
+
+    /** 1 of 3 scaling factors.
+     * The Layout Instability API in Blink, which reports the LayoutShift trace events, is not based on CSS pixels but
+     * physical pixels. As such the values in the impacted_nodes field need to be normalized to CSS units in order to
+     * map them to the viewport dimensions, which we get in CSS pixels. We do that by dividing the values by the devicePixelRatio.
+     * See https://crbug.com/1300309
+     */
+    const toCssPixelRect = (rect: Trace.Types.Events.TraceRect): DOMRect => {
+      return new DOMRect(rect[0] / dpr, rect[1] / dpr, rect[2] / dpr, rect[3] / dpr);
+    };
+
+    // 2 of 3 scaling factors. Turns CSS pixels into pixels relative to the size of the screenshot image's natural size.
+    const screenshotImageScaleFactor =
+        Math.min(beforeImg.naturalWidth / viewportRect.width, beforeImg.naturalHeight / viewportRect.height, 1);
+
+    // 3 of 3 scaling factors. We can constrain this UI by a maxSize in case we want it smaller.
+    // If this is being size constrained, it needs to be done in JS (rather than css max-width, etc)....
+    // That's because this function is complete before it's added to the DOM.. so we can't query offsetHeight for its resolved size…
+    const maxSizeScaleFactor =
+        Math.min(maxSize.width / beforeImg.naturalWidth, maxSize.height / beforeImg.naturalHeight, 1);
+    for (const elem of [vizContainer, afterImg, beforeImg]) {
+      elem.style.width = `${beforeImg.naturalWidth * maxSizeScaleFactor}px`;
+      elem.style.height = `${beforeImg.naturalHeight * maxSizeScaleFactor}px`;
+    }
+
+    const beforeRects = event.args.data?.impacted_nodes?.map(node => toCssPixelRect(node.old_rect)) ?? [];
+    const afterRects = event.args.data?.impacted_nodes?.map(node => toCssPixelRect(node.new_rect)) ?? [];
+
+    function startVizAnimation(): void {
+      if (!beforeImg || !afterImg) {
+        return;
+      }
+
+      // If image is reused, drop existing anims
+      [beforeImg, afterImg].flatMap(img => img.getAnimations()).forEach(a => a.cancel());
+
+      const easing = 'ease-out';
+      const vizAnimOpts: KeyframeAnimationOptions = {
+        duration: 3000,
+        iterations: Infinity,
+        fill: 'forwards',
+        easing,
+      };
+      // Using keyframe offsets to add "delay" to both the start and the end.
+      // https://drafts.csswg.org/web-animations-1/#:~:text=Keyframe%20offsets%20can%20be%20specified%20using%20either%20form%20as%20illustrated%20below%3A
+      // Animate the "after" screenshot's opacity in.
+      afterImg.animate({opacity: [0, 0, 1, 1, 1], easing}, vizAnimOpts);
+
+      const getRectPosition = (rect: DOMRect): Keyframe => ({
+        left: `${rect.x * maxSizeScaleFactor * screenshotImageScaleFactor}px`,
+        top: `${rect.y * maxSizeScaleFactor * screenshotImageScaleFactor}px`,
+        width: `${rect.width * maxSizeScaleFactor * screenshotImageScaleFactor}px`,
+        height: `${rect.height * maxSizeScaleFactor * screenshotImageScaleFactor}px`,
+        opacity: 0.7,
+        outlineWidth: '1px',
+        easing,
+      });
+
+      // Create and position individual rects representing each impacted_node within a shift
+      beforeRects.forEach((beforeRect, i) => {
+        const afterRect = afterRects[i];
+        const rectEl = document.createElement('div');
+        rectEl.classList.add('layout-shift-viz-rect');
+        vizContainer.appendChild(rectEl);
+
+        let beforePos = getRectPosition(beforeRect);
+        let afterPos = getRectPosition(afterRect);
+        afterPos.opacity = 0.4;
+
+        // Edge case: if either before or after is 0x0x0x0, then we'll fade it in/out in the same location.
+        if ([beforeRect.width, beforeRect.height, beforeRect.x, beforeRect.y].every(v => v === 0)) {
+          beforePos = {...afterPos};
+          beforePos.opacity = '0';
+        }
+        if ([afterRect.width, afterRect.height, afterRect.x, afterRect.y].every(v => v === 0)) {
+          afterPos = {...beforePos};
+          afterPos.opacity = '0';
+        }
+
+        // Keep these keyframe offsets sync'd with other animate() ones above.
+        // The 4px outline slightly pulses the rect so it's easier to distinguish
+        rectEl.animate([beforePos, beforePos, {...afterPos, outlineWidth: '4px'}, afterPos, afterPos], vizAnimOpts);
+      });
+    }
+
+    // If not done within the render lifecycle, getAnimations() falsely returns [] which allows animations to pile up on the same screenshot
+    void ComponentHelpers.ScheduledRender.scheduleRender(vizContainer, () => startVizAnimation());
+
+    vizContainer.append(beforeImg, afterImg);
+    return vizContainer;
+  }
 }

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

@@ -181,4 +181,164 @@ describeWithEnvironment('ModificationsManager', () => {
     // Make sure the link exists
     assert.isTrue(existsBetween2And1);
   });
+
+  it('deletes time ranges with an empty label from the annotations list', async function() {
+    await TraceLoader.traceEngine(null, 'web-dev-with-commit.json.gz');
+    const modificationsManager = Timeline.ModificationsManager.ModificationsManager.activeManager();
+    assert.isOk(modificationsManager);
+
+    modificationsManager.createAnnotation({
+      type: 'TIME_RANGE',
+      bounds: {
+        min: Trace.Types.Timing.MicroSeconds(0),
+        max: Trace.Types.Timing.MicroSeconds(10),
+        range: Trace.Types.Timing.MicroSeconds(10),
+      },
+      label: 'label',
+    });
+
+    // Create time range with empty label that shoud be removed
+    modificationsManager.createAnnotation({
+      type: 'TIME_RANGE',
+      bounds: {
+        min: Trace.Types.Timing.MicroSeconds(3),
+        max: Trace.Types.Timing.MicroSeconds(10),
+        range: Trace.Types.Timing.MicroSeconds(7),
+      },
+      label: '',
+    });
+
+    // Create time range with empty label that shoud be removed
+    modificationsManager.createAnnotation({
+      type: 'TIME_RANGE',
+      bounds: {
+        min: Trace.Types.Timing.MicroSeconds(5),
+        max: Trace.Types.Timing.MicroSeconds(10),
+        range: Trace.Types.Timing.MicroSeconds(5),
+      },
+      label: '',
+    });
+
+    modificationsManager.deleteEmptyRangeAnnotations();
+    const modifications = modificationsManager.toJSON().annotations;
+
+    // Make sure that the annotations with an empty label were deleted
+    assert.deepEqual(modifications.labelledTimeRanges, [{
+                       bounds: {
+                         min: Trace.Types.Timing.MicroSeconds(0),
+                         max: Trace.Types.Timing.MicroSeconds(10),
+                         range: Trace.Types.Timing.MicroSeconds(10),
+                       },
+                       label: 'label',
+                     }]);
+  });
+
+  it('correctly gets all annotations associated with an entry', async function() {
+    const parsedTrace = (await TraceLoader.traceEngine(null, 'web-dev-with-commit.json.gz')).parsedTrace;
+    const modificationsManager = Timeline.ModificationsManager.ModificationsManager.activeManager();
+    assert.isOk(modificationsManager);
+
+    // Get any entry to create annotations with.
+    const entryToFindAnnotationsFor = parsedTrace.Renderer.allTraceEntries[0];
+    const entry2 = parsedTrace.Renderer.allTraceEntries[1];
+    const entry3 = parsedTrace.Renderer.allTraceEntries[2];
+
+    // Create a connection between entry we are looking for annotations for and another entry.
+    // This link should be a part of associated with the entry annotations.
+    modificationsManager.createAnnotation({
+      type: 'ENTRIES_LINK',
+      state: Trace.Types.File.EntriesLinkState.CONNECTED,
+      entryFrom: entry2,
+      entryTo: entryToFindAnnotationsFor,
+    });
+
+    // Create a link between random entries
+    modificationsManager.createAnnotation({
+      type: 'ENTRIES_LINK',
+      state: Trace.Types.File.EntriesLinkState.CONNECTED,
+      entryFrom: entry3,
+      entryTo: entry2,
+    });
+
+    // Label for the entry we are looking for annotations for.
+    // This label should be a part of associated with the entry annotations.
+    modificationsManager.createAnnotation({
+      type: 'ENTRY_LABEL',
+      entry: entryToFindAnnotationsFor,
+      label: 'entry label',
+    });
+
+    const annotationsForEntry = modificationsManager.annotationsForEntry(entryToFindAnnotationsFor);
+
+    // Make sure the method returns annotations that `entryToFindAnnotationsFor` is a part of
+    assert.deepEqual(
+        annotationsForEntry,
+        [
+          {
+            type: 'ENTRIES_LINK',
+            state: Trace.Types.File.EntriesLinkState.CONNECTED,
+            entryFrom: entry2,
+            entryTo: entryToFindAnnotationsFor,
+          },
+          {
+            type: 'ENTRY_LABEL',
+            entry: entryToFindAnnotationsFor,
+            label: 'entry label',
+          },
+        ],
+    );
+  });
+
+  it('deletes all annotations associated with an entry', async function() {
+    const parsedTrace = (await TraceLoader.traceEngine(null, 'web-dev-with-commit.json.gz')).parsedTrace;
+    const modificationsManager = Timeline.ModificationsManager.ModificationsManager.activeManager();
+    assert.isOk(modificationsManager);
+
+    // Get any entry to create annotations with.
+    const entryToFindAnnotationsFor = parsedTrace.Renderer.allTraceEntries[0];
+    const entry2 = parsedTrace.Renderer.allTraceEntries[1];
+    const entry3 = parsedTrace.Renderer.allTraceEntries[2];
+
+    // Create a connection between entry we are looking for annotations for and another entry.
+    // This link should be deleted.
+    modificationsManager.createAnnotation({
+      type: 'ENTRIES_LINK',
+      state: Trace.Types.File.EntriesLinkState.CONNECTED,
+      entryFrom: entry2,
+      entryTo: entryToFindAnnotationsFor,
+    });
+
+    // Create a link between random entries.
+    // This annotation should not be deleted/
+    modificationsManager.createAnnotation({
+      type: 'ENTRIES_LINK',
+      state: Trace.Types.File.EntriesLinkState.CONNECTED,
+      entryFrom: entry3,
+      entryTo: entry2,
+    });
+
+    // Label for the entry we are looking for annotations for.
+    // This link should be deleted.
+    modificationsManager.createAnnotation({
+      type: 'ENTRY_LABEL',
+      entry: entryToFindAnnotationsFor,
+      label: 'entry label',
+    });
+
+    modificationsManager.deleteEntryAnnotations(entryToFindAnnotationsFor);
+    const annotationsForEntry = modificationsManager.getAnnotations();
+
+    // Make sure the method deleted all annotations that `entryToFindAnnotationsFor` is a part of
+    assert.deepEqual(
+        annotationsForEntry,
+        [
+          {
+            type: 'ENTRIES_LINK',
+            state: Trace.Types.File.EntriesLinkState.CONNECTED,
+            entryFrom: entry3,
+            entryTo: entry2,
+          },
+        ],
+    );
+  });
 });

package/front_end/panels/timeline/ModificationsManager.ts

@@ -126,6 +126,14 @@ export class ModificationsManager extends EventTarget {
     return this.#timelineBreadcrumbs;
   }
 
+  deleteEmptyRangeAnnotations(): void {
+    for (const annotation of this.#overlayForAnnotation.keys()) {
+      if (annotation.type === 'TIME_RANGE' && annotation.label.length === 0) {
+        this.removeAnnotation(annotation);
+      }
+    }
+  }
+
   createAnnotation(newAnnotation: Trace.Types.File.Annotation, loadedFromFile: boolean = false): void {
     // If a label already exists on an entry and a user is trying to create a new one, start editing an existing label instead.
     if (newAnnotation.type === 'ENTRY_LABEL') {
@@ -150,6 +158,29 @@ export class ModificationsManager extends EventTarget {
     this.dispatchEvent(new AnnotationModifiedEvent(newOverlay, 'Add'));
   }
 
+  annotationsForEntry(entry: Trace.Types.Events.Event): Trace.Types.File.Annotation[] {
+    const annotationsForEntry = [];
+
+    for (const [annotation] of this.#overlayForAnnotation.entries()) {
+      if (annotation.type === 'ENTRY_LABEL' && annotation.entry === entry) {
+        annotationsForEntry.push(annotation);
+      } else if (
+          annotation.type === 'ENTRIES_LINK' && (annotation.entryFrom === entry || annotation.entryTo === entry)) {
+        annotationsForEntry.push(annotation);
+      }
+    }
+
+    return annotationsForEntry;
+  }
+
+  // Deletes all annotations associated with an entry
+  deleteEntryAnnotations(entry: Trace.Types.Events.Event): void {
+    const annotationsForEntry = this.annotationsForEntry(entry);
+    annotationsForEntry.forEach(annotation => {
+      this.removeAnnotation(annotation);
+    });
+  }
+
   linkAnnotationBetweenEntriesExists(entryFrom: Trace.Types.Events.Event, entryTo: Trace.Types.Events.Event): boolean {
     for (const annotation of this.#overlayForAnnotation.keys()) {
       if (annotation.type === 'ENTRIES_LINK' &&

package/front_end/panels/timeline/NetworkTrackAppender.ts

@@ -99,16 +99,9 @@ export class NetworkTrackAppender implements TrackAppender {
       useFirstLineForOverview: false,
       useDecoratorsForOverview: true,
     });
-    const legends: PerfUI.FlameChart.Legend[] = [];
-    for (const category of Object.values(Components.Utils.NetworkCategory)) {
-      legends.push({
-        color: Components.Utils.colorForNetworkCategory(category),
-        category,
-      });
-    }
     this.#group = buildTrackHeader(
         VisualLoggingTrackName.NETWORK, 0, i18nString(UIStrings.network), style, /* selectable= */ true, expanded,
-        /* showStackContextMenu= */ false, legends);
+        /* showStackContextMenu= */ false);
     this.#flameChartData.groups.push(this.#group);
   }
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -24,7 +24,6 @@ import {
   type TrackAppenderName,
   VisualLoggingTrackName,
 } from './CompatibilityTracksAppender.js';
-import * as Components from './components/components.js';
 import * as ModificationsManager from './ModificationsManager.js';
 import * as Utils from './utils/utils.js';
 
@@ -552,19 +551,19 @@ export class ThreadAppender implements TrackAppender {
 
     if (Trace.Types.Events.isProfileCall(event)) {
       if (event.callFrame.functionName === '(idle)') {
-        return Components.EntryStyles.getCategoryStyles().idle.getComputedColorValue();
+        return Utils.EntryStyles.getCategoryStyles().idle.getComputedColorValue();
       }
       if (event.callFrame.scriptId === '0') {
         // If we can not match this frame to a script, return the
         // generic "scripting" color.
-        return Components.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
+        return Utils.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
       }
       // Otherwise, return a color created based on its URL.
       return this.#colorGenerator.colorForID(event.callFrame.url);
     }
     const defaultColor =
-        Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name)?.category.getComputedColorValue();
-    return defaultColor || Components.EntryStyles.getCategoryStyles().other.getComputedColorValue();
+        Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name)?.category.getComputedColorValue();
+    return defaultColor || Utils.EntryStyles.getCategoryStyles().other.getComputedColorValue();
   }
 
   /**
@@ -574,7 +573,7 @@ export class ThreadAppender implements TrackAppender {
     if (Utils.IgnoreList.isIgnoreListedEntry(entry)) {
       return i18nString(UIStrings.onIgnoreList);
     }
-    return Components.EntryName.nameForEntry(entry, this.#parsedTrace);
+    return Utils.EntryName.nameForEntry(entry, this.#parsedTrace);
   }
 
   /**