chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/timeline/AnnotationHelpers.ts

@@ -8,7 +8,7 @@ import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 
 import * as TimelineComponents from './components/components.js';
-import {type AnnotationModifiedEvent} from './ModificationsManager.js';
+import type {AnnotationModifiedEvent} from './ModificationsManager.js';
 import type * as Overlays from './overlays/overlays.js';
 
 const UIStrings = {

package/front_end/panels/timeline/AppenderUtils.ts

@@ -7,7 +7,7 @@ import * as Trace from '../../models/trace/trace.js';
 import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {type VisualLoggingTrackName} from './CompatibilityTracksAppender.js';
+import type {VisualLoggingTrackName} from './CompatibilityTracksAppender.js';
 
 const UIStrings = {
   /**

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -29,6 +29,7 @@ export type HighlightedEntryInfo = {
   title: string,
   formattedTime: string,
   warningElements?: HTMLSpanElement[],
+  additionalElement?: HTMLElement,
 };
 
 export function entryIsVisibleInTimeline(
@@ -232,14 +233,14 @@ export class CompatibilityTracksAppender {
     this.#allTrackAppenders.push(this.#serverTimingsTrackAppender);
     this.#addThreadAppenders();
     this.#addExtensionAppenders();
-    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
-      for (const group of this.#flameChartData.groups) {
-        // We only need to update the color here, because FlameChart will call `scheduleUpdate()` when theme is changed.
-        group.style.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface');
-        group.style.backgroundColor =
-            ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container');
-      }
-    });
+
+    this.onThemeChange = this.onThemeChange.bind(this);
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, this.onThemeChange);
+  }
+
+  reset(): void {
+    ThemeSupport.ThemeSupport.instance().removeEventListener(
+        ThemeSupport.ThemeChangeEvent.eventName, this.onThemeChange);
   }
 
   setFlameChartDataAndEntryData(
@@ -255,6 +256,15 @@ export class CompatibilityTracksAppender {
     return this.#flameChartData;
   }
 
+  private onThemeChange(): void {
+    for (const group of this.#flameChartData.groups) {
+      // We only need to update the color here, because FlameChart will call `scheduleUpdate()` when theme is changed.
+      group.style.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface');
+      group.style.backgroundColor =
+          ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container');
+    }
+  }
+
   #addExtensionAppenders(): void {
     const tracks = ExtensionDataGatherer.instance().getExtensionData().extensionTrackData;
     for (const trackData of tracks) {
@@ -638,11 +648,16 @@ export class CompatibilityTracksAppender {
 
     let title = this.titleForEvent(event, level);
     let formattedTime = getFormattedTime(event.dur);
+    let additionalElement;
 
     // If the track defines a custom highlight, call it and use its values.
     if (track.highlightedEntryInfo) {
-      const {title: customTitle, formattedTime: customFormattedTime, warningElements: extraWarningElements} =
-          track.highlightedEntryInfo(event);
+      const {
+        title: customTitle,
+        formattedTime: customFormattedTime,
+        warningElements: extraWarningElements,
+        additionalElement: element,
+      } = track.highlightedEntryInfo(event);
       if (customTitle) {
         title = customTitle;
       }
@@ -652,11 +667,13 @@ export class CompatibilityTracksAppender {
       if (extraWarningElements) {
         warningElements.push(...extraWarningElements);
       }
+      additionalElement = element;
     }
     return {
       title,
       formattedTime,
       warningElements,
+      additionalElement,
     };
   }
 }

package/front_end/panels/timeline/CountersGraph.ts

@@ -36,7 +36,7 @@ import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type TimelineModeViewDelegate} from './TimelinePanel.js';
+import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 
 const UIStrings = {
   /**

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

@@ -700,4 +700,72 @@ describeWithEnvironment('EntriesFilter', function() {
     assert.strictEqual(stack.expandableEntries().length, 1);
     assert.isTrue(stack.expandableEntries().includes(taskEntry));
   });
+
+  it('returns the trace entry tree starting from the root task, highlighting the selected event', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-functions-recursion.json.gz');
+    const mainThread = getMainThread(parsedTrace.Renderer);
+    /** This stack looks roughly like so (with some events omitted):
+     * ===========RunTask===========
+     * ...
+     * ======== onclick ============
+     * =========== foo =============
+     *               ==== foo2 =====
+     *               ===== foo =====
+     *               ==== foo2 =====
+     *               ===== foo =====
+     *               ==== foo2 =====
+     *               ===== foo =====
+     *
+     * In this test we want to test if for a selected entry, the tree for AI processing
+     * is generated correctly such that the root RunTask is the root node and the
+     * node for the selected event has property selected set as true.
+     **/
+
+    const firstFooCallEntry = findFirstEntry(mainThread.entries, entry => {
+      return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'foo' && entry.dur === 233;
+    });
+
+    const stack = new Timeline.EntriesFilter.EntriesFilter(parsedTrace.Renderer.entryToNode);
+    if (!stack) {
+      throw new Error('EntriesFilter does not exist');
+    }
+
+    const traceEntryTree = stack.getTraceEntryTreeForAI(firstFooCallEntry);
+
+    assert.exists(traceEntryTree);
+
+    const selectedNode =
+        Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(traceEntryTree);
+    assert.exists(selectedNode);
+
+    // delete for smaller deepStrictEqual comparison
+    selectedNode.children = traceEntryTree.children = [];
+
+    const expectedTraceEntryTree = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
+        'RunTask',
+        Trace.Types.Timing.MilliSeconds(336772948.813),
+        Trace.Types.Timing.MilliSeconds(4.614),
+        undefined,
+        Trace.Types.Timing.MilliSeconds(0.162),
+    );
+    expectedTraceEntryTree.id = 368 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
+    expectedTraceEntryTree.children = [];
+    assert.deepStrictEqual(traceEntryTree, expectedTraceEntryTree);
+
+    const expectedselectedNode = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI(
+        'ProfileCall',
+        Trace.Types.Timing.MilliSeconds(336772953.044),
+        Trace.Types.Timing.MilliSeconds(0.233),
+        undefined,
+        Trace.Types.Timing.MilliSeconds(0.162),
+    );
+    expectedselectedNode.id = 408 as Trace.Helpers.TreeHelpers.TraceEntryNodeId;
+    expectedselectedNode.column = 12;
+    expectedselectedNode.function = 'foo';
+    expectedselectedNode.line = 8;
+    expectedselectedNode.selected = true;
+    expectedselectedNode.domain = 'file://';
+    expectedselectedNode.children = [];
+    assert.deepStrictEqual(selectedNode, expectedselectedNode);
+  });
 });

package/front_end/panels/timeline/EntriesFilter.ts

@@ -76,6 +76,19 @@ 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.
+   */
+  getTraceEntryTreeForAI(entry: Trace.Types.Events.Event): Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null {
+    const entryNode = this.#entryToNode.get(entry);
+    if (!entryNode) {
+      return null;
+    }
+
+    return Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.fromSelectedEntryNode(entryNode);
+  }
+
   /**
    * Returns the amount of entry descendants that belong to the hidden entries array.
    * */

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -12,7 +12,7 @@ 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 type {TimelineModeViewDelegate} from './TimelinePanel.js';
 import {TimelineSelection} from './TimelineSelection.js';
 import {TimelineTreeView} from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -9,6 +9,7 @@ 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,
@@ -145,4 +146,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 {
@@ -221,4 +237,122 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
     }
     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/TimelineDetailsView.test.ts

@@ -45,11 +45,13 @@ describeWithEnvironment('TimelineDetailsView', function() {
     }
     const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(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);
+    // NetworkRequestDetails and RelatedInsightsChips nodes.
+    assert.strictEqual(detailsContentElement.childNodes.length, 2);
     const detailsElementShadowRoot = (detailsContentElement.childNodes[0] as HTMLElement).shadowRoot;
     if (!detailsElementShadowRoot) {
       throw new Error('Could not find expected element to test.');