chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -43,10 +43,10 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
 import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -66,7 +66,7 @@ const UIStrings = {
    *@description Text that only contain a placeholder
    *@example {100ms (at 200ms)} PH1
    */
-  emptyPlaceholder: '{PH1}',  // eslint-disable-line rulesdir/l10n_no_locked_or_placeholder_only_phrase
+  emptyPlaceholder: '{PH1}',  // eslint-disable-line rulesdir/l10n-no-locked-or-placeholder-only-phrase
   /**
    *@description Text for timestamps of items
    */
@@ -576,17 +576,19 @@ type LinkifyLocationOptions = {
 
 export class TimelineUIUtils {
   static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
+    const maybeResolvedData = Utils.SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(frame);
+    const functionName = maybeResolvedData?.name || frame.functionName;
     if (!Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
-      return UI.UIUtils.beautifyFunctionName(frame.functionName);
+      return UI.UIUtils.beautifyFunctionName(functionName);
     }
-    const nativeGroup = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(frame.functionName);
+    const nativeGroup = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(functionName);
     switch (nativeGroup) {
       case Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.COMPILE:
         return i18nString(UIStrings.compile);
       case Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.PARSE:
         return i18nString(UIStrings.parse);
     }
-    return frame.functionName;
+    return functionName;
   }
 
   static testContentMatching(
@@ -608,7 +610,7 @@ export class TimelineUIUtils {
       }
     }
     if (parsedTrace) {
-      const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, traceEvent);
+      const url = Trace.Handlers.Helpers.getNonResolvedURL(traceEvent, parsedTrace);
       if (url) {
         tokens.push(url);
       }
@@ -805,7 +807,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.PAINT_IMAGE:
       case Trace.Types.Events.Name.DECODE_IMAGE:
       case Trace.Types.Events.Name.DECODE_LAZY_PIXEL_REF: {
-        const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           detailsText = Bindings.ResourceUtils.displayNameForURL(url);
         }
@@ -887,7 +889,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.RESOURCE_RECEIVE_DATA:
       case Trace.Types.Events.Name.RESOURCE_RECEIVE_RESPONSE:
       case Trace.Types.Events.Name.RESOURCE_FINISH: {
-        const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           const options = {
             tabStop: true,
@@ -903,19 +905,18 @@ export class TimelineUIUtils {
         details = document.createElement('span');
 
         // FunctionCall events have an args.data that could be a CallFrame, if all the details are present, so we check for that.
-        if (Trace.Types.Events.isFunctionCall(event) && event.args.data &&
-            Trace.Types.Events.objectIsCallFrame(event.args.data)) {
+        const callFrame = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event)?.at(0);
+        if (Trace.Types.Events.isFunctionCall(event) && callFrame) {
           UI.UIUtils.createTextChild(
               details,
               TimelineUIUtils.frameDisplayName(
-                  {...event.args.data, scriptId: String(event.args.data.scriptId) as Protocol.Runtime.ScriptId}));
+                  {...callFrame, scriptId: String(callFrame.scriptId) as Protocol.Runtime.ScriptId}));
         }
-        const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
         const location = this.linkifyLocation({
           scriptId: unsafeEventData['scriptId'],
           url: unsafeEventData['url'],
-          lineNumber: lineNumber || 0,
-          columnNumber,
+          lineNumber: callFrame?.lineNumber || 0,
+          columnNumber: callFrame?.columnNumber,
           target,
           isFreshRecording,
           linkifier,
@@ -969,30 +970,6 @@ export class TimelineUIUtils {
         }
         break;
       }
-      case Trace.Types.Events.Name.PROFILE_CALL: {
-        details = document.createElement('span');
-        // This check is only added for convenience with the type checker.
-        if (!Trace.Types.Events.isProfileCall(event)) {
-          break;
-        }
-        const maybeResolvedData = Utils.SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForEntry(event);
-        const functionName = maybeResolvedData?.name || TimelineUIUtils.frameDisplayName(event.callFrame);
-        UI.UIUtils.createTextChild(details, functionName);
-        const location = this.linkifyLocation({
-          scriptId: event.callFrame['scriptId'],
-          url: event.callFrame['url'],
-          lineNumber: event.callFrame['lineNumber'],
-          columnNumber: event.callFrame['columnNumber'],
-          target,
-          isFreshRecording,
-          linkifier,
-        });
-        if (location) {
-          UI.UIUtils.createTextChild(details, ' @ ');
-          details.appendChild(location);
-        }
-        break;
-      }
 
       default: {
         /**
@@ -1000,7 +977,8 @@ export class TimelineUIUtils {
          * thus, we prevent extracting the stack trace again here.
          */
         if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
-            Trace.Types.Events.isUserTiming(event) || Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
+            Trace.Types.Events.isUserTiming(event) || Trace.Types.Extensions.isSyntheticExtensionEntry(event) ||
+            Trace.Types.Events.isProfileCall(event)) {
           detailsText = null;
         } else {
           details = this.linkifyTopCallFrame(event, target, linkifier, isFreshRecording) ?? null;
@@ -1122,7 +1100,7 @@ export class TimelineUIUtils {
       // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage.
       if (typeof event[previewElementSymbol] === 'undefined') {
         let previewElement: (Element|null)|null = null;
-        const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           previewElement = await LegacyComponents.ImagePreview.ImagePreview.build(maybeTarget, url, false, {
             imageAltText: LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(url),
@@ -1362,7 +1340,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.DECODE_IMAGE:
       case Trace.Types.Events.Name.DRAW_LAZY_PIXEL_REF: {
         relatedNodeLabel = i18nString(UIStrings.ownerElement);
-        url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           const options = {
             tabStop: true,
@@ -1684,7 +1662,8 @@ export class TimelineUIUtils {
     }
 
     const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
-    if (initiator || initiatorFor || stackTrace || parsedTrace?.Invalidations.invalidationsForEvent.get(event)) {
+    if (Trace.Types.Events.isProfileCall(event) || initiator || initiatorFor || stackTrace ||
+        parsedTrace?.Invalidations.invalidationsForEvent.get(event)) {
       await TimelineUIUtils.generateCauses(event, contentHelper, parsedTrace);
     }
 
@@ -1872,13 +1851,25 @@ export class TimelineUIUtils {
     return {callFrames} as Protocol.Runtime.StackTrace;
   }
 
-  private static async generateCauses(
+  static async generateCauses(
       event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
       parsedTrace: Trace.Handlers.Types.ParsedTrace): Promise<void> {
     const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
     let initiatorStackLabel = i18nString(UIStrings.initiatorStackTrace);
     let stackLabel = i18nString(UIStrings.stackTrace);
-
+    const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace);
+    if (stackTraceForEvent) {
+      contentHelper.addSection(i18nString(UIStrings.stackTrace));
+      contentHelper.createChildStackTraceElement(stackTraceForEvent);
+      // TODO(andoli): also build stack trace component for other events
+      // that have a stack trace using the StackTraceForEvent helper.
+    } else {
+      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
+      if (stackTrace && stackTrace.length) {
+        contentHelper.addSection(stackLabel);
+        contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
+      }
+    }
     switch (event.name) {
       case Trace.Types.Events.Name.TIMER_FIRE:
         initiatorStackLabel = i18nString(UIStrings.timerInstalled);
@@ -1899,12 +1890,6 @@ export class TimelineUIUtils {
         break;
     }
 
-    const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
-    if (stackTrace && stackTrace.length) {
-      contentHelper.addSection(stackLabel);
-      contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
-    }
-
     const initiator = parsedTrace.Initiators.eventToInitiator.get(event);
     const initiatorFor = parsedTrace.Initiators.initiatorToEvents.get(event);
     const invalidations = parsedTrace.Invalidations.invalidationsForEvent.get(event);
@@ -1979,7 +1964,7 @@ export class TimelineUIUtils {
       });
 
       link.addEventListener('keydown', event => {
-        if (event.key === 'Enter') {
+        if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
           TimelinePanel.instance().select(selectionFromEvent(entry));
           event.consume(true);
         }
@@ -2161,9 +2146,9 @@ export class TimelineUIUtils {
     const stylesContainer = document.createElement('div');
     const shadowRoot = stylesContainer.attachShadow({mode: 'open'});
     shadowRoot.adoptedStyleSheets = [imagePreviewStyles];
-    const container = shadowRoot.createChild('div') as HTMLDivElement;
+    const container = shadowRoot.createChild('div');
     container.classList.add('image-preview-container', 'vbox', 'link');
-    const img = (container.createChild('img') as HTMLImageElement);
+    const img = container.createChild('img');
     img.src = imageURL;
     img.alt = LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(imageURL);
     const paintProfilerButton = container.createChild('a');
@@ -2172,7 +2157,7 @@ export class TimelineUIUtils {
     container.tabIndex = 0;
     container.addEventListener('click', () => TimelinePanel.instance().select(selectionFromEvent(event)), false);
     container.addEventListener('keydown', keyEvent => {
-      if (keyEvent.key === 'Enter') {
+      if (keyEvent.key === Platform.KeyboardUtilities.ENTER_KEY) {
         TimelinePanel.instance().select(selectionFromEvent(event));
         keyEvent.consume(true);
       }
@@ -2180,7 +2165,7 @@ export class TimelineUIUtils {
     return stylesContainer;
   }
 
-  static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): Element {
+  static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): HTMLDivElement {
     const eventDivider = document.createElement('div');
     eventDivider.classList.add('resources-event-divider');
     const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
@@ -2275,6 +2260,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,
@@ -2345,12 +2374,14 @@ export class TimelineUIUtils {
   }
 
   static markerStyleForEvent(event: Trace.Types.Events.Event): TimelineMarkerStyle {
+    // Note: keep the colors matching that of `markerDetailsForEvent`.
+
     const tallMarkerDashStyle = [6, 4];
     const title = TimelineUIUtils.eventTitle(event);
 
     if (event.name !== Trace.Types.Events.Name.NAVIGATION_START &&
-            Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
-        Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming)) {
+        (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
+         Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming))) {
       return {
         title,
         dashStyle: tallMarkerDashStyle,
@@ -2364,7 +2395,7 @@ export class TimelineUIUtils {
     let color = 'grey';
     switch (event.name) {
       case Trace.Types.Events.Name.NAVIGATION_START:
-        color = '#FF9800';
+        color = 'var(--color-text-primary)';
         tall = true;
         break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
@@ -2372,11 +2403,11 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_DOM_CONTENT:
-        color = '#0867CB';
+        color = 'var(--color-text-disabled)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_LOAD:
-        color = '#B31412';
+        color = 'var(--color-text-disabled)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FIRST_PAINT:
@@ -2384,11 +2415,11 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FCP:
-        color = '#1A6937';
+        color = 'var(--sys-color-green-bright)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
-        color = '#1A3422';
+        color = 'var(--sys-color-green)';
         tall = true;
         break;
       case Trace.Types.Events.Name.TIME_STAMP:
@@ -2545,11 +2576,22 @@ export class TimelineDetailsContentHelper {
     if (!this.linkifierInternal) {
       return;
     }
-
+    const resolvedStackTrace: Protocol.Runtime.StackTrace = structuredClone(stackTrace);
+    let currentResolvedStackTrace: Protocol.Runtime.StackTrace|undefined = resolvedStackTrace;
+    while (currentResolvedStackTrace) {
+      currentResolvedStackTrace.callFrames = currentResolvedStackTrace.callFrames.map(
+          callFrame => ({
+            ...callFrame,
+            functionName:
+                Utils.SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(callFrame)?.name ||
+                callFrame.functionName,
+          }));
+      currentResolvedStackTrace = currentResolvedStackTrace.parent;
+    }
     const stackTraceElement =
         this.tableElement.createChild('div', 'timeline-details-view-row timeline-details-stack-values');
     const callFrameContents = LegacyComponents.JSPresentationUtils.buildStackTracePreviewContents(
-        this.target, this.linkifierInternal, {stackTrace, tabStops: true, showColumnNumber: true});
+        this.target, this.linkifierInternal, {stackTrace: resolvedStackTrace, tabStops: true, showColumnNumber: true});
     stackTraceElement.appendChild(callFrameContents.element);
   }
 }
@@ -2596,7 +2638,7 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
 export function isMarkerEvent(parsedTrace: Trace.Handlers.Types.ParsedTrace, event: Trace.Types.Events.Event): boolean {
   const {Name} = Trace.Types.Events;
 
-  if (event.name === Name.TIME_STAMP) {
+  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START) {
     return true;
   }
 

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -8,14 +8,14 @@ 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,
 } from './CompatibilityTracksAppender.js';
-import {ExtensionDataGatherer} from './ExtensionDataGatherer.js';
 import * as Extensions from './extensions/extensions.js';
 import {TimelineFlameChartMarker} from './TimelineFlameChartView.js';
+import {TimelinePanel} from './TimelinePanel.js';
 import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
@@ -28,8 +28,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimingsTrackAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-type TimelineMarkerEntry = Trace.Types.Extensions.SyntheticExtensionMarker|Trace.Types.Events.PageLoadEvent;
-
 /**
  * This defines the order these markers will be rendered if they are at the
  * same timestamp. The smaller number will be shown first - e.g. so if MarkFCP,
@@ -51,26 +49,15 @@ export class TimingsTrackAppender implements TrackAppender {
   #colorGenerator: Common.Color.Generator;
   #compatibilityBuilder: CompatibilityTracksAppender;
   #parsedTrace: Readonly<Trace.Handlers.Types.ParsedTrace>;
-
-  /**
-   * Before rendering the markers we group them by timestamp. This is because
-   * if we have multiple markers (e.g. FCP and LCP) at the same time, we want
-   * to ensure that we visually render FCP before LCP - else it's confusing
-   * to the user to see LCP appear before FCP, even though they are at the
-   * same timestamp.
-   * We only do this for PageLoadMarkers - any extension based markers are
-   * not sorted. If an extension marker happens to be at the same time as
-   * LCP, the native LCP event is preferred and shown first.
-   * Because we create an instance of an Appender per trace, we can cache this rather than calculate on each run.
-   */
-  #cachedMarkersByTimestamp: Map<Trace.Types.Timing.MicroSeconds, TimelineMarkerEntry[]>|null = null;
-
+  #extensionMarkers: readonly Trace.Types.Extensions.SyntheticExtensionMarker[];
   constructor(
       compatibilityBuilder: CompatibilityTracksAppender, parsedTrace: Trace.Handlers.Types.ParsedTrace,
       colorGenerator: Common.Color.Generator) {
     this.#compatibilityBuilder = compatibilityBuilder;
     this.#colorGenerator = colorGenerator;
     this.#parsedTrace = parsedTrace;
+    const extensionDataEnabled = TimelinePanel.extensionDataVisibilitySetting().get();
+    this.#extensionMarkers = extensionDataEnabled ? this.#parsedTrace.ExtensionTraceData.extensionMarkers : [];
   }
 
   /**
@@ -83,9 +70,7 @@ export class TimingsTrackAppender implements TrackAppender {
    * appended the track's events.
    */
   appendTrackAtLevel(trackStartLevel: number, expanded?: boolean): number {
-    const extensionMarkers = ExtensionDataGatherer.instance().getExtensionData().extensionMarkers;
-    const pageloadMarkers = this.#parsedTrace.PageLoadMetrics.allMarkerEvents;
-    const extensionMarkersAreEmpty = extensionMarkers.length === 0;
+    const extensionMarkersAreEmpty = this.#extensionMarkers.length === 0;
     const performanceMarks = this.#parsedTrace.UserTimings.performanceMarks.filter(
         m => !Trace.Handlers.ModelHandlers.ExtensionTraceData.extensionDataInTiming(m));
     const performanceMeasures = this.#parsedTrace.UserTimings.performanceMeasures.filter(
@@ -93,12 +78,12 @@ export class TimingsTrackAppender implements TrackAppender {
     const timestampEvents = this.#parsedTrace.UserTimings.timestampEvents;
     const consoleTimings = this.#parsedTrace.UserTimings.consoleTimings;
 
-    if (extensionMarkersAreEmpty && pageloadMarkers.length === 0 && performanceMarks.length === 0 &&
-        performanceMeasures.length === 0 && timestampEvents.length === 0 && consoleTimings.length === 0) {
+    if (extensionMarkersAreEmpty && performanceMarks.length === 0 && performanceMeasures.length === 0 &&
+        timestampEvents.length === 0 && consoleTimings.length === 0) {
       return trackStartLevel;
     }
     this.#appendTrackHeaderAtLevel(trackStartLevel, expanded);
-    let newLevel = this.#appendMarkersAtLevel(trackStartLevel);
+    let newLevel = this.#appendExtensionsAtLevel(trackStartLevel);
     newLevel = this.#compatibilityBuilder.appendEventsAtLevel(performanceMarks, newLevel, this);
     newLevel = this.#compatibilityBuilder.appendEventsAtLevel(performanceMeasures, newLevel, this);
     newLevel = this.#compatibilityBuilder.appendEventsAtLevel(timestampEvents, newLevel, this);
@@ -122,65 +107,24 @@ export class TimingsTrackAppender implements TrackAppender {
         expanded);
     this.#compatibilityBuilder.registerTrackForGroup(group, this);
   }
-
-  #sortMarkersForPreferredVisualOrder(markers: TimelineMarkerEntry[]): void {
-    markers.sort((m1, m2) => {
-      const m1Index = SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] ?? Infinity;
-      const m2Index = SORT_ORDER_PAGE_LOAD_MARKERS[m2.name] ?? Infinity;
-      return m1Index - m2Index;
-    });
-  }
-
-  /**
-   * Group markers into a map, where keys are timestamps and the values are markers that have the same timestamp.
-   */
-  #groupMarkersByTimestamp(markers: TimelineMarkerEntry[]):
-      Map<Trace.Types.Timing.MicroSeconds, TimelineMarkerEntry[]> {
-    if (this.#cachedMarkersByTimestamp) {
-      return this.#cachedMarkersByTimestamp;
-    }
-    const markersByTimestamp = new Map<Trace.Types.Timing.MicroSeconds, TimelineMarkerEntry[]>();
-
-    markers.forEach(marker => {
-      const forTime = markersByTimestamp.get(marker.ts) || [];
-      forTime.push(marker);
-      markersByTimestamp.set(marker.ts, forTime);
-    });
-
-    for (const markersAtTime of markersByTimestamp.values()) {
-      if (markersAtTime.length > 1) {
-        this.#sortMarkersForPreferredVisualOrder(markersAtTime);
-      }
-    }
-
-    this.#cachedMarkersByTimestamp = markersByTimestamp;
-    return this.#cachedMarkersByTimestamp;
-  }
-
   /**
-   * Adds into the flame chart data the trace events corresponding
-   * to page load markers (LCP, FCP, L, etc.). These are taken straight
-   * from the PageLoadMetrics handler.
+   * Adds into the flame chart data the ExtensionMarkers.
    * @param currentLevel the flame chart level from which markers will
    * be appended.
    * @returns the next level after the last occupied by the appended
-   * page load markers (the first available level to append more data).
+   * extension markers (the first available level to append more data).
    */
-  #appendMarkersAtLevel(currentLevel: number): number {
-    let markers: TimelineMarkerEntry[] = this.#parsedTrace.PageLoadMetrics.allMarkerEvents;
-    markers = markers.concat(ExtensionDataGatherer.instance().getExtensionData().extensionMarkers)
-                  .sort((m1, m2) => m1.ts - m2.ts);
+  #appendExtensionsAtLevel(currentLevel: number): number {
+    let markers: Trace.Types.Extensions.SyntheticExtensionMarker[] = [];
+    markers = markers.concat(this.#extensionMarkers).sort((m1, m2) => m1.ts - m2.ts);
     if (markers.length === 0) {
       return currentLevel;
     }
-    const markersByTimestamp = this.#groupMarkersByTimestamp(markers);
-    for (const markersAtTime of markersByTimestamp.values()) {
-      for (const marker of markersAtTime) {
-        const index = this.#compatibilityBuilder.appendEventAtLevel(marker, currentLevel, this);
-        // Marker events do not have a duration: rendering code in
-        // FlameChart.ts relies on us setting this to NaN
-        this.#compatibilityBuilder.getFlameChartTimelineData().entryTotalTimes[index] = Number.NaN;
-      }
+    for (const marker of markers) {
+      const index = this.#compatibilityBuilder.appendEventAtLevel(marker, currentLevel, this);
+      // Marker events do not have a duration: rendering code in
+      // FlameChart.ts relies on us setting this to NaN
+      this.#compatibilityBuilder.getFlameChartTimelineData().entryTotalTimes[index] = Number.NaN;
     }
 
     const minTimeMs = Trace.Helpers.Timing.microSecondsToMilliseconds(this.#parsedTrace.Meta.traceBounds.min);
@@ -191,9 +135,7 @@ export class TimingsTrackAppender implements TrackAppender {
       // directly.
       // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/performance_user_timing.cc;l=236;drc=494419358caf690316f160a1f27d9e771a14c033
       const startTimeMs = Trace.Helpers.Timing.microSecondsToMilliseconds(marker.ts);
-      const style = Trace.Types.Extensions.isSyntheticExtensionEntry(marker) ?
-          this.markerStyleForExtensionMarker(marker) :
-          this.markerStyleForPageLoadEvent(marker);
+      const style = this.markerStyleForExtensionMarker(marker);
       return new TimelineFlameChartMarker(startTimeMs, startTimeMs - minTimeMs, style);
     });
     this.#compatibilityBuilder.getFlameChartTimelineData().markers.push(...flameChartMarkers);
@@ -307,18 +249,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 +268,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/BreadcrumbsUI.test.ts

@@ -5,7 +5,7 @@
 import * as Trace from '../../../models/trace/trace.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as TimelineComponents from './components.js';
 
@@ -35,7 +35,6 @@ describeWithEnvironment('BreadcrumbsUI', () => {
   }
 
   it('renders one breadcrumb', async () => {
-    const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
     const component = new BreadcrumbsUI();
     renderElementIntoDOM(component);
 
@@ -52,16 +51,15 @@ describeWithEnvironment('BreadcrumbsUI', () => {
 
     component.data = {initialBreadcrumb: breadcrumb, activeBreadcrumb: breadcrumb};
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const breadcrumbsRanges = queryBreadcrumbs(component);
 
-    assert.deepStrictEqual(breadcrumbsRanges.length, 1);
-    assert.deepStrictEqual(breadcrumbsRanges, ['Full range (9.00 ms)']);
+    assert.lengthOf(breadcrumbsRanges, 1);
+    assert.deepEqual(breadcrumbsRanges, ['Full range (9.00 ms)']);
   });
 
   it('renders all the breadcrumbs provided', async () => {
-    const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
     const component = new BreadcrumbsUI();
     renderElementIntoDOM(component);
 
@@ -89,15 +87,15 @@ describeWithEnvironment('BreadcrumbsUI', () => {
 
     component.data = {initialBreadcrumb: breadcrumb, activeBreadcrumb: breadcrumb2};
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const breadcrumbsRanges = queryBreadcrumbs(component);
 
-    assert.deepStrictEqual(breadcrumbsRanges.length, 2);
-    assert.deepStrictEqual(breadcrumbsRanges, ['Full range (9.00 ms)', '7.00 ms']);
+    assert.lengthOf(breadcrumbsRanges, 2);
+    assert.deepEqual(breadcrumbsRanges, ['Full range (9.00 ms)', '7.00 ms']);
 
     // There should always be one active breadcrumb
     const activeRange = queryActiveBreadcrumb(component);
-    assert.deepStrictEqual(activeRange.length, 1);
+    assert.lengthOf(activeRange, 1);
   });
 });