chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -7,9 +7,9 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../models/trace/trace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 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';
@@ -44,14 +44,13 @@ import {
 } from './TimelineSelection.js';
 import {AggregatedTimelineTreeView, TimelineTreeView} from './TimelineTreeView.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
-import {keyForTraceConfig} from './TrackConfiguration.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart View of the Performance panel
-   *@example {Frame} PH1
-   *@example {10ms} PH2
+   * @description Text in Timeline Flame Chart View of the Performance panel
+   * @example {Frame} PH1
+   * @example {10ms} PH2
    */
   sAtS: '{PH1} at {PH2}',
 } as const;
@@ -151,9 +150,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   // 'EntryTo' selection still needs to be updated.
   #linkSelectionAnnotation: Trace.Types.File.EntriesLinkAnnotation|null = null;
 
-  #currentInsightOverlays: Overlays.Overlays.TimelineOverlay[] = [];
+  #currentInsightOverlays: Trace.Types.Overlays.Overlay[] = [];
   #activeInsight: TimelineComponents.Sidebar.ActiveInsight|null = null;
-  #markers: Overlays.Overlays.TimingsMarker[] = [];
+  #markers: Trace.Types.Overlays.TimingsMarker[] = [];
 
   #tooltipElement = document.createElement('div');
 
@@ -188,12 +187,16 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
   /**
    * Persist the visual configuration of the tracks/groups into memory.
+   * Note that the user cannot hide/show/re-order the network track; so storing
+   * its configuration like this is a little overkill. But we use the
+   * configuration to check if the network track is collapsed or expanded, and
+   * it's easier to use the same configuration types for both.
    */
-  #networkPersistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>;
-  #mainPersistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>;
+  #networkPersistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedGroupConfig[]|null>;
+  #mainPersistedGroupConfigSetting: Common.Settings.Setting<PerfUI.FlameChart.PersistedGroupConfig[]|null>;
 
   constructor(delegate: TimelineModeViewDelegate) {
-    super();
+    super({jslog: `${VisualLogging.section('timeline.flame-chart-view')}`});
     this.registerRequiredCSS(timelineFlameChartViewStyles);
     this.element.classList.add('timeline-flamechart');
 
@@ -219,12 +222,12 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.networkSplitWidget.sidebarElement().style.zIndex = '120';
 
     this.#mainPersistedGroupConfigSetting =
-        Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedConfigPerTrace>(
-            'timeline-main-flame-group-config', {});
+        Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedGroupConfig[]|null>(
+            'timeline-persisted-main-flamechart-track-config', null);
 
     this.#networkPersistedGroupConfigSetting =
-        Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedConfigPerTrace>(
-            'timeline-network-flame-group-config', {});
+        Common.Settings.Settings.instance().createSetting<PerfUI.FlameChart.PersistedGroupConfig[]|null>(
+            'timeline-persisted-network-flamechart-track-config', null);
 
     this.mainDataProvider = new TimelineFlameChartDataProvider();
     this.mainDataProvider.setPersistedGroupConfigSetting(this.#mainPersistedGroupConfigSetting);
@@ -239,6 +242,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       selectedElementOutline: false,
       tooltipElement: this.#tooltipElement,
       useOverlaysForCursorRuler: true,
+      canvasVELogContext: 'timeline.flamechart.main'
     });
     this.mainFlameChart.alwaysShowVerticalScroll();
     this.mainFlameChart.enableRuler(false);
@@ -256,6 +260,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       selectedElementOutline: false,
       tooltipElement: this.#tooltipElement,
       useOverlaysForCursorRuler: true,
+      canvasVELogContext: 'timeline.flamechart.network'
     });
     this.networkFlameChart.alwaysShowVerticalScroll();
     this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.LATEST_DRAW_DIMENSIONS, dimensions => {
@@ -357,8 +362,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       this.focus();
     });
 
-    this.element.setAttribute('jslog', `${VisualLogging.section('timeline.flame-chart-view')}`);
-
     this.networkPane = new UI.Widget.VBox();
     this.networkPane.setMinimumSize(23, 23);
     this.networkFlameChart.show(this.networkPane.element);
@@ -394,6 +397,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         this.onEntriesLinkAnnotationCreate(this.networkDataProvider, event.data.entryFromIndex);
     this.mainFlameChart.addEventListener(
         PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onMainAddEntryLabelAnnotation, this);
+    this.mainDataProvider.addEventListener(
+        TimelineFlameChartDataProviderEvents.ENTRY_LABEL_ANNOTATION_ADDED, this.onMainAddEntryLabelAnnotation, this);
     this.networkFlameChart.addEventListener(
         PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onNetworkAddEntryLabelAnnotation, this);
 
@@ -670,7 +675,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
             event.name === Trace.Types.Events.Name.MARK_LOAD);
 
     this.#sortMarkersForPreferredVisualOrder(markers);
-    const overlayByTs = new Map<Trace.Types.Timing.Micro, Overlays.Overlays.TimingsMarker>();
+    const overlayByTs = new Map<Trace.Types.Timing.Micro, Trace.Types.Overlays.TimingsMarker>();
     markers.forEach(marker => {
       const adjustedTimestamp = Trace.Helpers.Timing.timeStampForEventAdjustedByClosestNavigation(
           marker,
@@ -688,7 +693,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         }
       }
       if (!matchingOverlay) {
-        const overlay: Overlays.Overlays.TimingsMarker = {
+        const overlay: Trace.Types.Overlays.TimingsMarker = {
           type: 'TIMINGS_MARKER',
           entries: [marker],
           entryToFieldResult: new Map(),
@@ -697,7 +702,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         overlayByTs.set(marker.ts, overlay);
       }
     });
-    const markerOverlays: Overlays.Overlays.TimingsMarker[] = [...overlayByTs.values()];
+    const markerOverlays: Trace.Types.Overlays.TimingsMarker[] = [...overlayByTs.values()];
     this.#markers = markerOverlays;
     if (this.#markers.length === 0) {
       return;
@@ -707,8 +712,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.bulkAddOverlays(this.#markers);
   }
 
-  setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):
-      void {
+  setOverlays(overlays: Trace.Types.Overlays.Overlay[], options: Overlays.Overlays.TimelineOverlaySetOptions): void {
     this.bulkRemoveOverlays(this.#currentInsightOverlays);
 
     this.#currentInsightOverlays = overlays;
@@ -748,7 +752,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       }
       const overlaysBounds = Overlays.Overlays.traceWindowContainingOverlays(this.#currentInsightOverlays);
       if (overlaysBounds) {
-        // Trace window covering all overlays expanded by 50% so that the overlays cover 2/3 (100/150) of the visible window.
+        // Trace window covering all overlays expanded by 50% so that the overlays cover 2/3 (100/150) of the visible window. (Or use provided override)
         const percentage = options.updateTraceWindowPercentage ?? 50;
         const expandedBounds =
             Trace.Helpers.Timing.expandWindowByPercentOrToOneMillisecond(overlaysBounds, traceBounds, percentage);
@@ -771,6 +775,17 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  hoverAnnotationInSidebar(annotation: Trace.Types.File.Annotation): void {
+    const overlay = ModificationsManager.activeManager()?.getOverlaybyAnnotation(annotation);
+    if (overlay && overlay.type === 'ENTRY_LABEL') {
+      this.#overlays.highlightOverlay(overlay);
+    }
+  }
+
+  sidebarAnnotationHoverOut(): void {
+    this.#overlays.undimAllEntryLabels();
+  }
+
   revealAnnotation(annotation: Trace.Types.File.Annotation): void {
     const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
     if (!traceBounds) {
@@ -903,12 +918,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       type: 'TIME_RANGE',
       label: '',
     };
-    ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
+    ModificationsManager.activeManager()?.createAnnotation(
+        this.#timeRangeSelectionAnnotation, {muteAriaNotifications: false, loadedFromFile: false});
   }
 
   /**
    * Handles key presses that could impact the creation of a time range overlay with the keyboard.
-   * @returns `true` if the event should not be propogated + have its default behaviour stopped.
+   * @returns `true` if the event should not be propagated + have its default behaviour stopped.
    */
   #handleTimeRangeKeyboardCreation(event: KeyboardEvent): boolean {
     const visibleWindow = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.timelineTraceWindow;
@@ -1015,7 +1031,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     if (this.#linkSelectionAnnotation &&
         this.#linkSelectionAnnotation.state === Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED) {
       this.#clearLinkSelectionAnnotation(true);
-      // We have dealt with the keypress as the user is typing into the label, so do not let it propogate up.
+      // We have dealt with the keypress as the user is typing into the label, so do not let it propagate up.
       // This also ensures that if the user uses "Escape" they don't toggle the DevTools drawer.
       event.stopPropagation();
     }
@@ -1120,8 +1136,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   }
 
   /**
-   * @param startTime - the start time of the selection in MilliSeconds
-   * @param endTime - the end time of the selection in MilliSeconds
+   * @param startTime the start time of the selection in MilliSeconds
+   * @param endTime the end time of the selection in MilliSeconds
    * TODO(crbug.com/346312365): update the type definitions in ChartViewport.ts
    */
   updateRangeSelection(startTime: number, endTime: number): void {
@@ -1151,7 +1167,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       };
       // Before creating a new range, make sure to delete the empty ranges.
       ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
-      ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
+      ModificationsManager.activeManager()?.createAnnotation(
+          this.#timeRangeSelectionAnnotation, {muteAriaNotifications: false, loadedFromFile: false});
     }
   }
 
@@ -1180,44 +1197,24 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
     this.#parsedTrace = newParsedTrace;
     this.#traceMetadata = traceMetadata;
-    if (traceMetadata?.visualTrackConfig) {
-      this.#addPersistedConfigToSettings(newParsedTrace, traceMetadata.visualTrackConfig);
-    }
     for (const dimmer of this.#flameChartDimmers) {
       dimmer.active = false;
       dimmer.mainChartIndices = [];
       dimmer.networkChartIndices = [];
     }
-    this.rebuildDataForTrace();
-  }
-
-  /**
-   * When the user imports a new trace and it has the visual config metadata, we add that data into the DevTools setting.
-   * NOTE: if the user has modifications for this trace already in memory,
-   * those are preferred over the modifications stored in the trace file itself.
-   */
-  #addPersistedConfigToSettings(
-      trace: Trace.Handlers.Types.ParsedTrace,
-      visualConfigForTrace: Trace.Types.File.PersistedTraceVisualConfig): void {
-    const key = keyForTraceConfig(trace);
-
-    if (visualConfigForTrace.main) {
-      const mainSetting = this.#mainPersistedGroupConfigSetting.get();
-      mainSetting[key] = mainSetting[key] ?? visualConfigForTrace.main;
-      this.#mainPersistedGroupConfigSetting.set(mainSetting);
-    }
-    if (visualConfigForTrace.network) {
-      const networkSetting = this.#networkPersistedGroupConfigSetting.get();
-      networkSetting[key] = networkSetting[key] ?? visualConfigForTrace.network;
-      this.#networkPersistedGroupConfigSetting.set(networkSetting);
-    }
+    this.rebuildDataForTrace({updateType: 'NEW_TRACE'});
   }
 
   /**
    * Resets the state of the UI data and initializes it again with the
    * current parsed trace.
+   * @param opts.updateType determines if we are redrawing because we need to show a new trace,
+   * or redraw an existing trace (if the user changed a setting).
+   * This distinction is needed because in the latter case we do not want to
+   * trigger some code such as Aria announcements for annotations if we are
+   * just redrawing.
    */
-  rebuildDataForTrace(): void {
+  rebuildDataForTrace(opts: {updateType: 'NEW_TRACE'|'REDRAW_EXISTING_TRACE'}): void {
     if (!this.#parsedTrace) {
       return;
     }
@@ -1236,12 +1233,11 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     // any state in the flame charts. We then need to provide it with any
     // persisted group settings here, before it recalculates the timeline data
     // and draws the UI.
-    const mainChartConfig = this.#getPersistedConfigForTrace(this.#parsedTrace, this.#mainPersistedGroupConfigSetting);
+    const mainChartConfig = this.#mainPersistedGroupConfigSetting.get();
     if (mainChartConfig) {
       this.mainFlameChart.setPersistedConfig(mainChartConfig);
     }
-    const networkChartConfig =
-        this.#getPersistedConfigForTrace(this.#parsedTrace, this.#networkPersistedGroupConfigSetting);
+    const networkChartConfig = this.#networkPersistedGroupConfigSetting.get();
     if (networkChartConfig) {
       this.networkFlameChart.setPersistedConfig(networkChartConfig);
     }
@@ -1253,33 +1249,20 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.resizeToPreferredHeights();
     this.setMarkers(this.#parsedTrace);
     this.dimThirdPartiesIfRequired();
-    ModificationsManager.activeManager()?.applyAnnotationsFromCache();
+    ModificationsManager.activeManager()?.applyAnnotationsFromCache(
+        {muteAriaNotifications: opts.updateType === 'REDRAW_EXISTING_TRACE'});
   }
 
   /**
    * Gets the persisted config (if the user has made any visual changes) in
    * order to save it to disk as part of the trace.
    */
-  getPersistedConfigMetadata(
-      trace: Trace.Handlers.Types.ParsedTrace,
-      ): Trace.Types.File.PersistedTraceVisualConfig {
-    const main = this.#getPersistedConfigForTrace(trace, this.#mainPersistedGroupConfigSetting);
-    const network = this.#getPersistedConfigForTrace(trace, this.#networkPersistedGroupConfigSetting);
+  getPersistedConfigMetadata(): Trace.Types.File.PersistedTraceVisualConfig {
+    const main = this.#mainPersistedGroupConfigSetting.get();
+    const network = this.#networkPersistedGroupConfigSetting.get();
     return {main, network};
   }
 
-  #getPersistedConfigForTrace(
-      trace: Trace.Handlers.Types.ParsedTrace,
-      setting: Common.Settings.Setting<PerfUI.FlameChart.PersistedConfigPerTrace>):
-      PerfUI.FlameChart.PersistedGroupConfig[]|null {
-    const value = setting.get();
-    const key = trace.Meta.traceBounds.min;
-    if (value[key]) {
-      return value[key];
-    }
-    return null;
-  }
-
   setInsights(
       insights: Trace.Insights.Types.TraceInsightSets|null,
       eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap): void {
@@ -1345,6 +1328,15 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#registerLoggableGroups();
   }
 
+  hasHiddenTracks(): boolean {
+    const groups = [
+      ...this.mainFlameChart.timelineData()?.groups ?? [],
+      ...this.networkFlameChart.timelineData()?.groups ?? [],
+    ];
+
+    return groups.some(g => g.hidden);
+  }
+
   #registerLoggableGroups(): void {
     const groups = [
       ...this.mainFlameChart.timelineData()?.groups ?? [],
@@ -1412,7 +1404,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       return;
     }
 
-    const nodeIds = Trace.Extras.FetchNodes.nodeIdsForEvent(this.#parsedTrace, event);
+    const nodeIds = Utils.EntryNodes.nodeIdsForEvent(this.#parsedTrace, event);
     for (const nodeId of nodeIds) {
       new SDK.DOMModel.DeferredDOMNode(target, nodeId).highlight();
     }
@@ -1429,13 +1421,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
   override willHide(): void {
     this.#networkPersistedGroupConfigSetting.removeChangeListener(this.resizeToPreferredHeights, this);
-    Bindings.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.#boundRefreshAfterIgnoreList);
+    Workspace.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.#boundRefreshAfterIgnoreList);
   }
 
   override wasShown(): void {
     super.wasShown();
     this.#networkPersistedGroupConfigSetting.addChangeListener(this.resizeToPreferredHeights, this);
-    Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.#boundRefreshAfterIgnoreList);
+    Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.#boundRefreshAfterIgnoreList);
     if (this.needsResizeToPreferredHeights) {
       this.resizeToPreferredHeights();
     }
@@ -1541,14 +1533,15 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         }
         const aiCallTree = Utils.AICallTree.AICallTree.fromEvent(selection.event, this.#parsedTrace);
         if (aiCallTree) {
-          UI.Context.Context.instance().setFlavor(Utils.AICallTree.AICallTree, aiCallTree);
+          const context = Utils.AIContext.AgentFocus.fromCallTree(aiCallTree);
+          UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
         }
       });
     }
   }
 
   // Only opens the details view of a selection. This is used for Timing Markers. Timing markers replace
-  // their entry with a new UI. Becuase of that, thier entries can no longer be "selected" in the timings track,
+  // their entry with a new UI. Because of that, their entries can no longer be "selected" in the timings track,
   // so if clicked, we only open their details view.
   openSelectionDetailsView(selection: TimelineSelection|null): void {
     if (this.detailsView) {
@@ -1559,20 +1552,20 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   /**
    * Used to create multiple overlays at once without triggering a redraw for each one.
    */
-  bulkAddOverlays(overlays: Overlays.Overlays.TimelineOverlay[]): void {
+  bulkAddOverlays(overlays: Trace.Types.Overlays.Overlay[]): void {
     for (const overlay of overlays) {
       this.#overlays.add(overlay);
     }
     void this.#overlays.update();
   }
 
-  addOverlay<T extends Overlays.Overlays.TimelineOverlay>(newOverlay: T): T {
+  addOverlay<T extends Trace.Types.Overlays.Overlay>(newOverlay: T): T {
     const overlay = this.#overlays.add(newOverlay);
     void this.#overlays.update();
     return overlay;
   }
 
-  bulkRemoveOverlays(overlays: Overlays.Overlays.TimelineOverlay[]): void {
+  bulkRemoveOverlays(overlays: Trace.Types.Overlays.Overlay[]): void {
     if (!overlays.length) {
       return;
     }
@@ -1583,31 +1576,45 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     void this.#overlays.update();
   }
 
-  removeOverlay(removedOverlay: Overlays.Overlays.TimelineOverlay): void {
+  removeOverlay(removedOverlay: Trace.Types.Overlays.Overlay): void {
     this.#overlays.remove(removedOverlay);
     void this.#overlays.update();
   }
 
-  updateExistingOverlay<T extends Overlays.Overlays.TimelineOverlay>(existingOverlay: T, newData: Partial<T>): void {
+  updateExistingOverlay<T extends Trace.Types.Overlays.Overlay>(existingOverlay: T, newData: Partial<T>): void {
     this.#overlays.updateExisting(existingOverlay, newData);
     void this.#overlays.update();
   }
 
-  enterLabelEditMode(overlay: Overlays.Overlays.EntryLabel): void {
+  enterLabelEditMode(overlay: Trace.Types.Overlays.EntryLabel): void {
     this.#overlays.enterLabelEditMode(overlay);
   }
 
+  bringLabelForward(overlay: Trace.Types.Overlays.EntryLabel): void {
+    this.#overlays.bringLabelForward(overlay);
+  }
+
+  enterMainChartTrackConfigurationMode(): void {
+    this.mainFlameChart.enterTrackConfigurationMode();
+  }
+
+  showAllMainChartTracks(): void {
+    this.mainFlameChart.showAllGroups();
+  }
+
   private onAddEntryLabelAnnotation(
       dataProvider: TimelineFlameChartDataProvider|TimelineFlameChartNetworkDataProvider,
       event: Common.EventTarget.EventTargetEvent<{entryIndex: number, withLinkCreationButton: boolean}>): void {
     const selection = dataProvider.createSelection(event.data.entryIndex);
     if (selectionIsEvent(selection)) {
       this.setSelectionAndReveal(selection);
-      ModificationsManager.activeManager()?.createAnnotation({
-        type: 'ENTRY_LABEL',
-        entry: selection.event,
-        label: '',
-      });
+      ModificationsManager.activeManager()?.createAnnotation(
+          {
+            type: 'ENTRY_LABEL',
+            entry: selection.event,
+            label: '',
+          },
+          {loadedFromFile: false, muteAriaNotifications: false});
       if (event.data.withLinkCreationButton) {
         this.onEntriesLinkAnnotationCreate(dataProvider, event.data.entryIndex, true);
       }
@@ -1627,7 +1634,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
                                     Trace.Types.File.EntriesLinkState.PENDING_TO_EVENT,
       });
       if (this.#linkSelectionAnnotation) {
-        ModificationsManager.activeManager()?.createAnnotation(this.#linkSelectionAnnotation);
+        ModificationsManager.activeManager()?.createAnnotation(
+            this.#linkSelectionAnnotation, {loadedFromFile: false, muteAriaNotifications: false});
       }
     }
   }
@@ -1664,7 +1672,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       return;
     }
     const entryIndex = event.data;
-
     const entryLevel = data.entryLevels[entryIndex];
 
     // Find the group that contains this level and log a click for it.
@@ -1676,8 +1683,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       }
     }
 
-    dataProvider.buildFlowForInitiator(entryIndex);
     this.delegate.select(dataProvider.createSelection(entryIndex));
+
+    // If the selected entry has a label, bring it forward.
+    const traceEventForSelection = dataProvider.eventByIndex(entryIndex);
+    if (traceEventForSelection) {
+      ModificationsManager.activeManager()?.bringEntryLabelForwardIfExists(traceEventForSelection);
+    }
   }
 
   /**
@@ -1741,13 +1753,6 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
   // UI.SearchableView.Searchable implementation
 
-  searchResultIndexForEntryIndex(index: number): number {
-    if (!this.searchResults) {
-      return -1;
-    }
-    return this.searchResults.findIndex(result => result.index === index);
-  }
-
   jumpToNextSearchResult(): void {
     if (!this.searchResults?.length) {
       return;

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -30,13 +30,13 @@ export const LANDING_PAGE_INDEX_DROPDOWN_CHOICE = Infinity;
 
 const UIStrings = {
   /**
-   *@description Screen reader label for the Timeline History dropdown button
-   *@example {example.com #3} PH1
-   *@example {Show recent timeline sessions} PH2
+   * @description Screen reader label for the Timeline History dropdown button
+   * @example {example.com #3} PH1
+   * @example {Show recent timeline sessions} PH2
    */
   currentSessionSS: 'Current session: {PH1}. {PH2}',
   /**
-   *@description the title shown when the user is viewing the landing page which is showing live performance metrics that are updated automatically.
+   * @description the title shown when the user is viewing the landing page which is showing live performance metrics that are updated automatically.
    */
   landingPageTitle: 'Live metrics',
   /**
@@ -44,13 +44,13 @@ const UIStrings = {
    */
   nodeLandingPageTitle: 'New recording',
   /**
-   *@description Text in Timeline History Manager of the Performance panel
-   *@example {example.com} PH1
-   *@example {2} PH2
+   * @description Text in Timeline History Manager of the Performance panel
+   * @example {example.com} PH1
+   * @example {2} PH2
    */
   sD: '{PH1} #{PH2}',
   /**
-   *@description Accessible label for the timeline session selection menu
+   * @description Accessible label for the timeline session selection menu
    */
   selectTimelineSession: 'Select timeline session',
   /**

package/front_end/panels/timeline/TimelineLoader.ts

@@ -11,12 +11,13 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Trace from '../../models/trace/trace.js';
 
+import * as RecordingMetadata from './RecordingMetadata.js';
 import type {Client} from './TimelineController.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Loader of the Performance panel
-   *@example {Unknown JSON format} PH1
+   * @description Text in Timeline Loader of the Performance panel
+   * @example {Unknown JSON format} PH1
    */
   malformedTimelineDataS: 'Malformed timeline data: {PH1}',
 } as const;
@@ -75,6 +76,24 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     return loader;
   }
 
+  static loadFromParsedJsonFile(contents: ParsedJSONFile, client: Client): TimelineLoader {
+    const loader = new TimelineLoader(client);
+
+    window.setTimeout(async () => {
+      client.loadingStarted();
+      try {
+        loader.#processParsedFile(contents);
+        await loader.close();
+      } catch (e: unknown) {
+        await loader.close();
+        const message = e instanceof Error ? e.message : '';
+        return loader.reportErrorAndCancelLoading(i18nString(UIStrings.malformedTimelineDataS, {PH1: message}));
+      }
+    });
+
+    return loader;
+  }
+
   static loadFromEvents(events: Trace.Types.Events.Event[], client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
     window.setTimeout(async () => {
@@ -258,7 +277,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
 
   private async finalizeTrace(): Promise<void> {
     if (!this.#metadata && this.#traceIsCPUProfile) {
-      this.#metadata = {dataOrigin: Trace.Types.File.DataOrigin.CPU_PROFILE};
+      this.#metadata = RecordingMetadata.forCPUProfile();
     }
 
     await (this.client as Client).loadingComplete(this.#collectedEvents, this.filter, this.#metadata);

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -34,7 +34,7 @@ export interface OverviewData {
 /**
  * This component wraps the generic PerfUI Overview component and configures it
  * specifically for the Performance Panel, including injecting the CSS we use
- * to customise how the components render within the Performance Panel.
+ * to customize how the components render within the Performance Panel.
  *
  * It is also responsible for listening to events from the OverviewPane to
  * update the visible trace window, and when this happens it will update the
@@ -53,7 +53,7 @@ export class TimelineMiniMap extends
   constructor() {
     super();
     this.registerRequiredCSS(miniMapStyles);
-    this.element.classList.add('timeline-minimap');
+    this.element.classList.add('timeline-minimap', 'no-trace-active');
     this.#breadcrumbsUI = new TimelineComponents.BreadcrumbsUI.BreadcrumbsUI();
     this.element.prepend(this.#breadcrumbsUI);
 
@@ -221,8 +221,8 @@ export class TimelineMiniMap extends
 
   /**
    * Activates a given breadcrumb.
-   * @param options.removeChildBreadcrumbs - if true, any child breadcrumbs will be removed.
-   * @param options.updateVisibleWindow - if true, the visible window will be updated to match the bounds of the breadcrumb
+   * @param options.removeChildBreadcrumbs if true, any child breadcrumbs will be removed.
+   * @param options.updateVisibleWindow if true, the visible window will be updated to match the bounds of the breadcrumb
    */
   #activateBreadcrumb(
       breadcrumb: Trace.Types.File.Breadcrumb,
@@ -269,7 +269,15 @@ export class TimelineMiniMap extends
     return this.#controls;
   }
 
-  setData(data: OverviewData): void {
+  setData(data: OverviewData|null): void {
+    this.element.classList.toggle('no-trace-active', data === null);
+
+    if (data === null) {
+      this.#data = null;
+      this.#controls = [];
+      return;
+    }
+
     if (this.#data?.parsedTrace === data.parsedTrace) {
       return;
     }

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -5,6 +5,7 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LayerViewer from '../layer_viewer/layer_viewer.js';
@@ -210,7 +211,7 @@ export class TimelinePaintImageView extends UI.Widget.Widget {
   private transformController: LayerViewer.TransformController.TransformController;
   private maskRectangle?: Protocol.DOM.Rect|null;
   constructor() {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(timelinePaintProfilerStyles);
 
     this.contentElement.classList.add('fill', 'paint-profiler-image-view');
@@ -257,7 +258,7 @@ export class TimelinePaintImageView extends UI.Widget.Widget {
                      .translate(clientWidth / 2, clientHeight / 2)
                      .scale(scale, scale)
                      .translate(-width / 2, -height / 2);
-    const bounds = UI.Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
+    const bounds = Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
     this.transformController.clampOffsets(
         paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, paddingY - bounds.maxY,
         clientHeight - paddingY - bounds.minY);