chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -19,7 +19,7 @@ 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 type {TimelineModeViewDelegate} from './TimelinePanel.js';
 import {TimelineSelection} from './TimelineSelection.js';
 import {TimelineSelectorStatsView} from './TimelineSelectorStatsView.js';
 import {BottomUpTimelineTreeView, CallTreeTimelineTreeView, type TimelineTreeView} from './TimelineTreeView.js';
@@ -78,10 +78,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 +166,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 +206,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 {
@@ -284,6 +297,7 @@ 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.
@@ -295,16 +309,24 @@ export class TimelineDetailsView extends UI.Widget.VBox {
       const networkRequest = selectionObject;
       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);
     } else if (TimelineSelection.isTraceEventSelection(selectionObject)) {
       const event = selectionObject;
+      this.#relatedInsightChips.activeEvent = event;
+      if (this.#eventToRelatedInsightsMap) {
+        this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+      }
       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);
-
       } else {
         const traceEventDetails =
             await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -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/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));
+  });
 });

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -39,7 +39,6 @@ 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';
@@ -136,7 +135,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private entryData: TimelineFlameChartEntry[] = [];
 
   private entryTypeByLevel!: EntryType[];
-  private screenshotImageCache!: Map<Trace.Types.Events.SyntheticScreenshot, HTMLImageElement|null>;
   private entryIndexToTitle!: string[];
   private lastInitiatorEntry!: number;
   private lastInitiatorsData: PerfUI.FlameChart.FlameChartInitiatorData[] = [];
@@ -180,6 +178,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 {
@@ -215,6 +215,14 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
 
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.performance-panel-context')) {
+      const traceEntryNodeForAI = this.getTraceEntryTreeForAIFromEntryIndex(entryIndex);
+      UI.Context.Context.instance().setFlavor(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, traceEntryNodeForAI);
+      contextMenu.headerSection().appendAction(
+          'drjones.performance-panel-context',
+      );
+    }
+
     const hideEntryOption = contextMenu.defaultSection().appendItem(i18nString(UIStrings.hideFunction), () => {
       this.modifyTree(PerfUI.FlameChart.FilterAction.MERGE_FUNCTION, entryIndex);
     }, {
@@ -282,6 +290,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;
 
@@ -291,6 +316,15 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.dispatchEventToListeners(Events.DATA_CHANGED);
   }
 
+  getTraceEntryTreeForAIFromEntryIndex(entryIndex: number): Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null {
+    const entry = this.entryData[entryIndex] as Trace.Types.Events.Event;
+    const manager = ModificationsManager.activeManager();
+    if (!manager) {
+      return null;
+    }
+    return manager.getEntriesFilter().getTraceEntryTreeForAI(entry);
+  }
+
   findPossibleContextMenuActions(entryIndex: number): PerfUI.FlameChart.PossibleFilterActions|void {
     const entry = this.entryData[entryIndex] as Trace.Types.Events.Event;
     return ModificationsManager.activeManager()?.getEntriesFilter().findPossibleActions(entry);
@@ -451,9 +485,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 +497,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       this.compatibilityTracksAppender?.threadAppenders().forEach(
           threadAppender => threadAppender.setHeaderAppended(false));
     }
+
+    ExtensionDataGatherer.removeInstance();
   }
 
   maxStackDepth(): number {
@@ -700,7 +737,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,11 +751,10 @@ 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);
       time =
@@ -902,16 +937,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;
     }
@@ -1111,6 +1137,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     if (timelineSelection) {
       this.lastSelection = new Selection(timelineSelection, entryIndex);
     }
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.performance-panel-context')) {
+      const traceEntryNodeForAI = this.getTraceEntryTreeForAIFromEntryIndex(entryIndex);
+      UI.Context.Context.instance().setFlavor(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, traceEntryNodeForAI);
+    }
     return timelineSelection;
   }
 
@@ -1266,7 +1296,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 +1305,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,6 +12,7 @@ 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';
@@ -158,6 +159,23 @@ 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) {
       return -1;