chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/timeline/TimelinePanel.ts

@@ -40,6 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as EmulationModel from '../../models/emulation/emulation.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';
@@ -65,6 +66,7 @@ import {AnnotationModifiedEvent, ModificationsManager} from './ModificationsMana
 import * as Overlays from './overlays/overlays.js';
 import {cpuprofileJsonGenerator, traceJsonGenerator} from './SaveFileFormatter.js';
 import {type Client, TimelineController} from './TimelineController.js';
+import type {TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartView} from './TimelineFlameChartView.js';
 import {TimelineHistoryManager} from './TimelineHistoryManager.js';
 import {TimelineLandingPage} from './TimelineLandingPage.js';
@@ -316,6 +318,22 @@ const UIStrings = {
    * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
    */
   backToLiveMetrics: 'Go back to the live metrics page',
+  /**
+   * @description Description of the Timeline in/out zoom action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineZoomInOut: 'Timeline zoom in/out',
+  /**
+   * @description Description of the Timeline fast in/out zoom action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineFastZoomInOut: 'Timeline fast zoom in/out',
+  /**
+   * @description Description of the Timeline up/down scroll action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineScrollUpDown: 'Timeline up/down',
+  /**
+   * @description Description of the Timeline right/left panning action that appears in the Performance panel shortcuts dialog.
+   */
+  timelinePanLeftRight: 'Timeline right/left',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -445,6 +463,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   #pendingAriaMessage: string|null = null;
 
   #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+  #shortcutsDialog: ShortcutDialog.ShortcutDialog.ShortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
+
+  #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
 
   constructor() {
     super('timeline');
@@ -544,6 +565,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.getMainFlameChart().addEventListener(
         PerfUI.FlameChart.Events.CHART_PLAYABLE_STATE_CHANGED, this.#onChartPlayableStateChangeBound, this);
 
+    this.#onMainEntryHovered = this.#onEntryHovered.bind(this, this.flameChart.getMainDataProvider());
+    this.flameChart.getMainFlameChart().addEventListener(
+        PerfUI.FlameChart.Events.ENTRY_HOVERED, this.#onMainEntryHovered);
+
     this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
     this.searchableViewInternal.setMinimumSize(0, 100);
     this.searchableViewInternal.element.classList.add('searchable-view');
@@ -557,16 +582,23 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#splitWidget.enableShowModeSaving();
     this.#splitWidget.show(this.element);
 
+    this.flameChart.overlays().addEventListener(Overlays.Overlays.TimeRangeMouseOverEvent.eventName, event => {
+      const {overlay} = event as Overlays.Overlays.TimeRangeMouseOverEvent;
+      const overlayBounds = overlay && Overlays.Overlays.traceWindowContainingOverlays([overlay]);
+      this.#minimapComponent.highlightBounds(overlayBounds, /* withBracket */ false);
+    });
+
+    this.flameChart.overlays().addEventListener(Overlays.Overlays.TimeRangeMouseOutEvent.eventName, () => {
+      this.#minimapComponent.clearBoundsHighlight();
+    });
+
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightDeactivated.eventName, () => {
       this.#setActiveInsight(null);
     });
 
-    // TODO(crbug.com/372946179): when clicking on an insight chip, this event never fires if the insight tab
-    // is not on the DOM. That only happens when the sidebar tabbed pane component is set to Annotations.
-    // In that case, clicking on the insight chip will do nothing.
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightActivated.eventName, event => {
-      const {name, insightSetKey, overlays, relatedEvents} = event;
-      this.#setActiveInsight({name, insightSetKey, overlays, relatedEvents});
+      const {model, insightSetKey} = event;
+      this.#setActiveInsight({model, insightSetKey});
     });
 
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightProvideOverlays.eventName, event => {
@@ -576,25 +608,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
       const overlaysBounds = overlays && Overlays.Overlays.traceWindowContainingOverlays(overlays);
       if (overlaysBounds) {
-        this.#minimapComponent.highlightBounds(overlaysBounds);
+        this.#minimapComponent.highlightBounds(overlaysBounds, /* withBracket */ true);
       } else {
         this.#minimapComponent.clearBoundsHighlight();
       }
     });
 
-    this.#sideBar.element.addEventListener(
-        TimelineInsights.SidebarInsight.InsightProvideRelatedEvents.eventName, event => {
-          const relatedInsight = {
-            insightLabel: event.label,
-            activateInsight: event.activateInsight,
-          };
-          for (const traceEvent of event.events) {
-            const relatedInsights = this.#eventToRelatedInsights.get(traceEvent) ?? [];
-            relatedInsights.push(relatedInsight);
-            this.#eventToRelatedInsights.set(traceEvent, relatedInsights);
-          }
-        });
-
     this.flameChart.element.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
       const fromTraceEvent = selectionFromEvent(event.event);
       this.flameChart.setSelectionAndReveal(fromTraceEvent);
@@ -615,7 +634,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightSetHovered.eventName, event => {
       if (event.bounds) {
-        this.#minimapComponent.highlightBounds(event.bounds);
+        this.#minimapComponent.highlightBounds(event.bounds, /* withBracket */ true);
       } else {
         this.#minimapComponent.clearBoundsHighlight();
       }
@@ -913,6 +932,21 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
   }
 
+  #onEntryHovered(dataProvider: TimelineFlameChartDataProvider, event: Common.EventTarget.EventTargetEvent<number>):
+      void {
+    const entryIndex = event.data;
+    if (entryIndex === -1) {
+      this.#minimapComponent.clearBoundsHighlight();
+      return;
+    }
+    const traceEvent = dataProvider.eventByIndex(entryIndex);
+    if (!traceEvent) {
+      return;
+    }
+    const bounds = Trace.Helpers.Timing.traceWindowFromEvent(traceEvent);
+    this.#minimapComponent.highlightBounds(bounds, /* withBracket */ false);
+  }
+
   private loadFromCpuProfile(profile: Protocol.Profiler.Profile|null): void {
     if (this.state !== State.IDLE || profile === null) {
       return;
@@ -1073,14 +1107,57 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION)) {
-      // TODO: Fill the shortcuts dialog with shortcuts for the cuttently selected navigation option
-      const shortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
-      shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: ['Ctrl+E']}]};
-      const dialogToolbarItem = new UI.Toolbar.ToolbarItem(shortcutDialog);
+      this.#shortcutsDialog.prependElement(this.#getNavigationSetting());
+      const dialogToolbarItem = new UI.Toolbar.ToolbarItem(this.#shortcutsDialog);
       this.panelRightToolbar.appendToolbarItem(dialogToolbarItem);
     }
   }
 
+  #getNavigationSetting(): HTMLElement {
+    const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
+    this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(currentNavSetting === 'classic')};
+
+    const navigationRadioButtons = document.createElement('form');
+    navigationRadioButtons.classList.add('nav-radio-buttons');
+    UI.ARIAUtils.markAsRadioGroup(navigationRadioButtons);
+    const modernNavRadioButton = UI.UIUtils.createRadioLabel(
+        'flamechart-selected-navigation', 'Modern', /* checked */ currentNavSetting === 'modern');
+    // Change EventListener is only triggered when the radio button is selected
+    modernNavRadioButton.radioElement.addEventListener('change', () => {
+      this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ false)};
+      Common.Settings.moduleSetting('flamechart-selected-navigation').set('modern');
+    });
+    const classicNavRadioButton = UI.UIUtils.createRadioLabel(
+        'flamechart-selected-navigation', 'Classic', /* checked */ currentNavSetting === 'classic');
+    classicNavRadioButton.radioElement.addEventListener('change', () => {
+      this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ true)};
+      Common.Settings.moduleSetting('flamechart-selected-navigation').set('classic');
+    });
+
+    navigationRadioButtons.appendChild(modernNavRadioButton);
+    navigationRadioButtons.appendChild(classicNavRadioButton);
+
+    return navigationRadioButtons;
+  }
+
+  #getShortcutsInfo(isNavClassic: boolean): ShortcutDialog.ShortcutDialog.Shortcut[] {
+    if (isNavClassic) {
+      return [
+        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Shift Scroll']},
+        {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Scroll', 'W/S']},
+        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S']},
+        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D']},
+      ];
+    }
+
+    return [
+      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Scroll', 'Shift up/down']},
+      {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Cmd Scroll', 'W/S', '+/-']},
+      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S', 'Shift +/-']},
+      {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D', 'Shift Scroll', 'Shift left/right']},
+    ];
+  }
+
   private createSettingsPane(): void {
     this.showSettingsPaneSetting =
         Common.Settings.Settings.instance().createSetting('timeline-show-settings-toolbar', false);
@@ -1857,11 +1934,28 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#setActiveInsight(null);
 
-    this.#eventToRelatedInsights.clear();
     const traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
     this.flameChart.setInsights(traceInsightsSets, this.#eventToRelatedInsights);
     this.#sideBar.setInsights(traceInsightsSets);
 
+    this.#eventToRelatedInsights.clear();
+    if (traceInsightsSets) {
+      for (const [insightSetKey, insightSet] of traceInsightsSets) {
+        for (const model of Object.values(insightSet.model)) {
+          for (const event of model.relatedEvents ?? []) {
+            const relatedInsights = this.#eventToRelatedInsights.get(event) ?? [];
+            this.#eventToRelatedInsights.set(event, relatedInsights);
+            relatedInsights.push({
+              insightLabel: model.title,
+              activateInsight: () => {
+                this.#setActiveInsight({model, insightSetKey});
+              },
+            });
+          }
+        }
+      }
+    }
+
     this.#showSidebarIfRequired();
   }
 
@@ -2054,6 +2148,20 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.getMainFlameChart().update();
   }
 
+  #deviceModeModel(): EmulationModel.DeviceModeModel.DeviceModeModel|null {
+    // This is wrapped in a try/catch because in some DevTools entry points
+    // (such as worker_app.ts) the Emulation panel is not included and as such
+    // the below code fails; it tries to instantiate the model which requires
+    // reading the value of a setting which has not been registered.
+    // In this case, we fallback to 'ALL'. See crbug.com/361515458 for an
+    // example bug that this resolves.
+    try {
+      return EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * This is called with we are done loading a trace from a file, or after we
    * have recorded a fresh trace.
@@ -2094,8 +2202,17 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    metadata = metadata ? metadata :
-                          await Trace.Extras.Metadata.forNewRecording(isCpuProfile, recordingStartTime ?? undefined);
+    if (!metadata) {
+      const deviceModeModel = this.#deviceModeModel();
+      let emulatedDeviceTitle;
+      if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
+        emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
+      } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+        emulatedDeviceTitle = 'Responsive';
+      }
+      metadata = await Trace.Extras.Metadata.forNewRecording(
+          isCpuProfile, recordingStartTime ?? undefined, emulatedDeviceTitle);
+    }
 
     try {
       await this.#executeNewTrace(collectedEvents, recordingIsFresh, metadata);
@@ -2128,7 +2245,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         },
         filmStripForPreview: Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace),
         parsedTrace,
-        startTime: recordingStartTime ?? null,
+        metadata,
       });
     } catch (error) {
       // If we errored during the parsing stage, it

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -149,7 +149,9 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineTreeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableView.Searchable {
+export class TimelineTreeView extends
+    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+        implements UI.SearchableView.Searchable {
   #selectedEvents: Trace.Types.Events.Event[]|null;
   private searchResults: Trace.Extras.TraceTree.Node[];
   linkifier!: Components.Linkifier.Linkifier;
@@ -172,8 +174,9 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
   private caseSensitiveButton: UI.Toolbar.ToolbarToggle|undefined;
   private regexButton: UI.Toolbar.ToolbarToggle|undefined;
   private matchWholeWord: UI.Toolbar.ToolbarToggle|undefined;
-
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+  #lastHighlightedEvent: HTMLElement|null = null;
+  eventToTreeNode: WeakMap<Trace.Types.Events.Event, Trace.Extras.TraceTree.Node> = new WeakMap();
 
   constructor() {
     super();
@@ -237,6 +240,9 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     });
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortingChanged, this);
     this.dataGrid.element.addEventListener('mousemove', this.onMouseMove.bind(this), true);
+    this.dataGrid.element.addEventListener(
+        'mouseleave', () => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, null));
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.OPENED_NODE, this.onGridNodeOpened, this);
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.setRowContextMenuCallback(this.onContextMenu.bind(this));
     this.dataGrid.asWidget().show(mainView.element);
@@ -269,6 +275,22 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     this.refreshTree();
   }
 
+  highlightEventInTree(event: Trace.Types.Events.Event|null): void {
+    // Potentially clear last highlight
+    const dataGridElem = event && this.dataGridElementForEvent(event);
+    if (!event || (dataGridElem && dataGridElem !== this.#lastHighlightedEvent)) {
+      this.#lastHighlightedEvent?.style.setProperty('background-color', '');
+    }
+
+    if (event) {
+      const rowElem = dataGridElem;
+      if (rowElem) {
+        this.#lastHighlightedEvent = rowElem;
+        this.#lastHighlightedEvent.style.backgroundColor = 'var(--sys-color-yellow-container)';
+      }
+    }
+  }
+
   filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return [this.taskFilter, this.textFilterInternal, ...(ActiveFilters.instance().activeFilters())];
   }
@@ -318,9 +340,6 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     return this.#selectedEvents || [];
   }
 
-  onHover(_node: Trace.Extras.TraceTree.Node|null): void {
-  }
-
   appendContextMenuItems(_contextMenu: UI.ContextMenu.ContextMenu, _node: Trace.Extras.TraceTree.Node): void {
   }
 
@@ -370,6 +389,9 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     for (const child of children.values()) {
       // Exclude the idle time off the total calculation.
       const gridNode = new TreeGridNode(child, totalUsedTime, maxSelfTime, maxTotalTime, this);
+      for (const e of child.events) {
+        this.eventToTreeNode.set(e, child);
+      }
       this.dataGrid.insertChild(gridNode);
     }
     this.sortingChanged();
@@ -527,9 +549,7 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     const gridNode = event.target && (event.target instanceof Node) ?
         (this.dataGrid.dataGridNodeFromNode((event.target as Node))) :
         null;
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // @ts-expect-error
-    const profileNode = gridNode && gridNode._profileNode;
+    const profileNode = (gridNode as TreeGridNode)?.profileNode;
     if (profileNode === this.lastHoveredProfileNode) {
       return;
     }
@@ -537,6 +557,16 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     this.onHover(profileNode);
   }
 
+  onHover(node: Trace.Extras.TraceTree.Node|null): void {
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node);
+  }
+
+  // TODO: do this on selection (before opened)
+  onGridNodeOpened(): void {
+    const node = this.dataGrid.selectedNode as TreeGridNode;
+    this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, node.profileNode);
+  }
+
   private onContextMenu(
       contextMenu: UI.ContextMenu.ContextMenu, eventGridNode: DataGrid.DataGrid.DataGridNode<GridNode>): void {
     const gridNode = (eventGridNode as GridNode);
@@ -549,8 +579,16 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
     }
   }
 
+  dataGridElementForEvent(event: Trace.Types.Events.Event|null): HTMLElement|null {
+    if (!event) {
+      return null;
+    }
+    const treeNode = this.eventToTreeNode.get(event);
+    return (treeNode && this.dataGridNodeForTreeNode(treeNode)?.element()) ?? null;
+  }
+
   dataGridNodeForTreeNode(treeNode: Trace.Extras.TraceTree.Node): GridNode|null {
-    return profileNodeToTreeGridNode.get(treeNode) || null;
+    return treeNodeToGridNode.get(treeNode) || null;
   }
 
   // UI.SearchableView.Searchable implementation
@@ -597,6 +635,16 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
   }
 }
 
+export namespace TimelineTreeView {
+  export const enum Events {
+    TREE_ROW_HOVERED = 'TreeRowHovered',
+  }
+
+  export type EventTypes = {
+    [Events.TREE_ROW_HOVERED]: Trace.Extras.TraceTree.Node|null,
+  };
+}
+
 export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<GridNode> {
   protected populated: boolean;
   profileNode: Trace.Extras.TraceTree.Node;
@@ -651,10 +699,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       if (this.linkElement) {
         container.createChild('div', 'activity-link').appendChild(this.linkElement);
       }
-      const eventStyle = TimelineUIUtils.eventStyle(event);
-      const eventCategory = eventStyle.category;
-      UI.ARIAUtils.setLabel(icon, eventCategory.title);
-      icon.style.backgroundColor = eventCategory.getComputedColorValue();
+      UI.ARIAUtils.setLabel(icon, TimelineUIUtils.eventStyle(event).category.title);
+      icon.style.backgroundColor = TimelineUIUtils.eventColor(event);
       if (Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
         icon.style.backgroundColor = Extensions.ExtensionUI.extensionEntryColor(event);
       }
@@ -720,7 +766,7 @@ export class TreeGridNode extends GridNode {
       treeView: TimelineTreeView) {
     super(profileNode, grandTotalTime, maxSelfTime, maxTotalTime, treeView);
     this.setHasChildren(this.profileNode.hasChildren());
-    profileNodeToTreeGridNode.set(profileNode, this);
+    treeNodeToGridNode.set(profileNode, this);
   }
 
   override populate(): void {
@@ -733,12 +779,15 @@ export class TreeGridNode extends GridNode {
     }
     for (const node of this.profileNode.children().values()) {
       const gridNode = new TreeGridNode(node, this.grandTotalTime, this.maxSelfTime, this.maxTotalTime, this.treeView);
+      for (const e of node.events) {
+        this.treeView.eventToTreeNode.set(e, node);
+      }
       this.insertChildOrdered(gridNode);
     }
   }
 }
 
-const profileNodeToTreeGridNode = new WeakMap<Trace.Extras.TraceTree.Node, TreeGridNode>();
+const treeNodeToGridNode = new WeakMap<Trace.Extras.TraceTree.Node, TreeGridNode>();
 
 export class AggregatedTimelineTreeView extends TimelineTreeView {
   protected readonly groupBySetting: Common.Settings.Setting<AggregatedTimelineTreeView.GroupBy>;
@@ -794,7 +843,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     icon: (Element|undefined),
   } {
     const categories = Utils.EntryStyles.getCategoryStyles();
-    const color = node.id && node.event ? TimelineUIUtils.eventColor(node.event) : categories['other'].color;
+    const color = TimelineUIUtils.eventColor(node.event);
     const unattributed = i18nString(UIStrings.unattributed);
 
     const id = typeof node.id === 'symbol' ? undefined : node.id;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2275,6 +2275,50 @@ export class TimelineUIUtils {
 
     return element;
   }
+  // Generates a Summary component given a aggregated stats for categories.
+  static generateSummaryDetails(aggregatedStats: Record<string, number>, rangeStart: number, rangeEnd: number):
+      Element {
+    let total = 0;
+    // Calculate total of all categories.
+    for (const categoryName in aggregatedStats) {
+      total += aggregatedStats[categoryName];
+    }
+
+    const element = document.createElement('div');
+    element.classList.add('timeline-details-view-summary');
+
+    const summaryTable = new TimelineComponents.TimelineSummary.TimelineSummary();
+    let categories: TimelineComponents.TimelineSummary.CategoryData[] = [];
+
+    // Get stats values from categories.
+    for (const categoryName in Utils.EntryStyles.getCategoryStyles()) {
+      const category = Utils.EntryStyles.getCategoryStyles()[categoryName as keyof Utils.EntryStyles.CategoryPalette];
+      if (category.name === Utils.EntryStyles.EventCategory.IDLE) {
+        continue;
+      }
+      const value = aggregatedStats[category.name];
+      if (!value) {
+        continue;
+      }
+      const title = category.title;
+      const color = category.getCSSValue();
+      categories.push({value, color, title});
+    }
+
+    // Keeps the most useful categories on top.
+    categories = categories.sort((a, b) => b.value - a.value);
+    const start = Trace.Types.Timing.MilliSeconds(rangeStart);
+    const end = Trace.Types.Timing.MilliSeconds(rangeEnd);
+    summaryTable.data = {
+      rangeStart: start,
+      rangeEnd: end,
+      total,
+      categories,
+    };
+    const summaryTableContainer = element.createChild('div');
+    summaryTableContainer.appendChild(summaryTable);
+    return element;
+  }
 
   static generateDetailsContentForFrame(
       frame: Trace.Types.Events.LegacyTimelineFrame, filmStrip: Trace.Extras.FilmStrip.Data|null,

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -8,7 +8,7 @@ import * as Trace from '../../models/trace/trace.js';
 import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -307,18 +307,13 @@ export class TimingsTrackAppender implements TrackAppender {
     if (Trace.Types.Events.isPerformanceMark(event)) {
       return `[mark]: ${event.name}`;
     }
+    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText) {
+      return event.args.tooltipText;
+    }
     return event.name;
   }
 
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    const title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
-        event.args.tooltipText :
-        this.titleForEvent(event);
-
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     // If an event is a marker event, rather than show a duration of 0, we can instead show the time that the event happened, which is much more useful. We do this currently for:
     // Page load events: DCL, FCP and LCP
     // performance.mark() events
@@ -331,9 +326,7 @@ export class TimingsTrackAppender implements TrackAppender {
           this.#parsedTrace.Meta.navigationsByNavigationId,
           this.#parsedTrace.Meta.navigationsByFrameId,
       );
-      return {title, formattedTime: getFormattedTime(timeOfEvent)};
+      info.formattedTime = getFormattedTime(timeOfEvent);
     }
-
-    return {title, formattedTime: getFormattedTime(event.dur)};
   }
 }

package/front_end/panels/timeline/components/FieldSettingsDialog.test.ts

@@ -96,6 +96,7 @@ describeWithMockConnection('FieldSettingsDialog', () => {
       'url-DESKTOP': null,
       'url-PHONE': null,
       'url-TABLET': null,
+      warnings: [],
     };
 
     cruxManager.getConfigSetting().set({enabled: false, override: ''});

package/front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -188,7 +188,12 @@ export class FieldSettingsDialog extends HTMLElement {
   async #urlHasFieldData(url: string): Promise<boolean> {
     const cruxManager = CrUXManager.CrUXManager.instance();
     const result = await cruxManager.getFieldDataForPage(url);
-    return Object.values(result).some(v => v);
+    return Object.entries(result).some(([key, value]) => {
+      if (key === 'warnings') {
+        return false;
+      }
+      return Boolean(value);
+    });
   }
 
   async #submit(enabled: boolean): Promise<void> {

package/front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -707,6 +707,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         'url-DESKTOP': null,
         'url-PHONE': null,
         'url-TABLET': null,
+        warnings: [],
       };
 
       sinon.stub(CrUXManager.CrUXManager.instance(), 'getFieldDataForCurrentPage').callsFake(async () => mockFieldData);
@@ -787,6 +788,17 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.strictEqual(title.innerText, 'Local and field metrics');
     });
 
+    it('should display any warning from crux', async () => {
+      mockFieldData.warnings.push('Warning from crux');
+
+      const view = renderLiveMetrics();
+
+      await coordinator.done();
+
+      const fieldMessage = getFieldMessage(view);
+      assert.match(fieldMessage!.textContent!, /Warning from crux/);
+    });
+
     it('should make initial request on render when crux is enabled', async () => {
       mockFieldData['url-ALL'] = createMockFieldData();