chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -47,6 +47,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -516,8 +517,8 @@ export class TimelineUIUtils {
     return functionName;
   }
 
-  static testContentMatching(
-      traceEvent: Trace.Types.Events.Event, regExp: RegExp, handlerData?: Trace.Handlers.Types.HandlerData): boolean {
+  static testContentMatching(traceEvent: Trace.Types.Events.Event, regExp: RegExp,
+                             handlerData?: Trace.Handlers.Types.HandlerData): boolean {
     const title = TimelineUIUtils.eventStyle(traceEvent).title;
     const tokens = [title];
 
@@ -640,9 +641,9 @@ export class TimelineUIUtils {
     return frame.scriptId !== '0' && !(frame.url?.startsWith('native '));
   }
 
-  static async buildDetailsNodeForTraceEvent(
-      event: Trace.Types.Events.Event, target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier,
-      isFreshOrEnhanced = false, parsedTrace: Trace.TraceModel.ParsedTrace): Promise<Node|null> {
+  static async buildDetailsNodeForTraceEvent(event: Trace.Types.Events.Event, target: SDK.Target.Target|null,
+                                             linkifier: LegacyComponents.Linkifier.Linkifier, isFreshOrEnhanced = false,
+                                             parsedTrace: Trace.TraceModel.ParsedTrace): Promise<Node|null> {
     let details: HTMLElement|HTMLSpanElement|(Element | null)|Text|null = null;
     let detailsText;
     // TODO(40287735): update this code with type-safe data checks.
@@ -767,15 +768,15 @@ export class TimelineUIUtils {
       omitOrigin,
     };
     if (isFreshOrEnhanced) {
-      return linkifier.linkifyScriptLocation(
-          target, scriptId, url as Platform.DevToolsPath.UrlString, lineNumber, options);
+      return linkifier.linkifyScriptLocation(target, scriptId, url as Platform.DevToolsPath.UrlString, lineNumber,
+                                             options);
     }
     return LegacyComponents.Linkifier.Linkifier.linkifyURL(url as Platform.DevToolsPath.UrlString, options);
   }
 
-  static linkifyTopCallFrame(
-      event: Trace.Types.Events.Event, target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier,
-      isFreshOrEnhanced = false, maxLength?: number): Element|null {
+  static linkifyTopCallFrame(event: Trace.Types.Events.Event, target: SDK.Target.Target|null,
+                             linkifier: LegacyComponents.Linkifier.Linkifier, isFreshOrEnhanced = false,
+                             maxLength?: number): Element|null {
     let frame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event)?.[0];
     if (Trace.Types.Events.isProfileCall(event)) {
       frame = event.callFrame;
@@ -831,29 +832,28 @@ export class TimelineUIUtils {
     return div;
   }
 
-  static buildConsumeCacheDetails(
-      eventData: {
-        consumedCacheSize?: number,
-        cacheRejected?: boolean,
-        cacheKind?: string,
-      },
-      contentHelper: TimelineDetailsContentHelper): void {
+  static buildConsumeCacheDetails(eventData: {
+    consumedCacheSize?: number,
+    cacheRejected?: boolean,
+    cacheKind?: string,
+  },
+                                  contentHelper: TimelineDetailsContentHelper): void {
     if (typeof eventData.consumedCacheSize === 'number') {
-      contentHelper.appendTextRow(
-          i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptLoadedFromCache));
-      contentHelper.appendTextRow(
-          i18nString(UIStrings.compilationCacheSize), i18n.ByteUtilities.bytesToString(eventData.consumedCacheSize));
+      contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheStatus),
+                                  i18nString(UIStrings.scriptLoadedFromCache));
+      contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheSize),
+                                  i18n.ByteUtilities.bytesToString(eventData.consumedCacheSize));
       const cacheKind = eventData.cacheKind;
       if (cacheKind) {
         contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheKind), cacheKind);
       }
     } else if ('cacheRejected' in eventData && eventData['cacheRejected']) {
       // Version mismatch or similar.
-      contentHelper.appendTextRow(
-          i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.failedToLoadScriptFromCache));
+      contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheStatus),
+                                  i18nString(UIStrings.failedToLoadScriptFromCache));
     } else {
-      contentHelper.appendTextRow(
-          i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptNotEligibleToBeLoadedFromCache));
+      contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheStatus),
+                                  i18nString(UIStrings.scriptNotEligibleToBeLoadedFromCache));
     }
   }
 
@@ -969,8 +969,8 @@ export class TimelineUIUtils {
           event,
           parsedTrace,
       );
-      contentHelper.appendTextRow(
-          i18nString(UIStrings.timestamp), i18n.TimeUtilities.preciseMillisToString(adjustedEventTimeStamp, 1));
+      contentHelper.appendTextRow(i18nString(UIStrings.timestamp),
+                                  i18n.TimeUtilities.preciseMillisToString(adjustedEventTimeStamp, 1));
     }
 
     // Only show total time and self time for events with non-zero durations.
@@ -1005,16 +1005,16 @@ export class TimelineUIUtils {
       if (url) {
         contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
       }
-      contentHelper.appendElementRow(
-          i18nString(UIStrings.details), TimelineUIUtils.buildDetailsNodeForMarkerEvents(event));
+      contentHelper.appendElementRow(i18nString(UIStrings.details),
+                                     TimelineUIUtils.buildDetailsNodeForMarkerEvents(event));
     }
 
     if (Trace.Types.Events.isV8Compile(event)) {
       url = event.args.data?.url as Platform.DevToolsPath.UrlString;
       if (url) {
         const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
-        contentHelper.appendLocationRow(
-            i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined, true);
+        contentHelper.appendLocationRow(i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined,
+                                        true);
         const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
         if (originWithEntity) {
           contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
@@ -1027,9 +1027,8 @@ export class TimelineUIUtils {
       }
 
       const isStreamed = Boolean(event.args.data?.streamed);
-      contentHelper.appendTextRow(
-          i18nString(UIStrings.streamed),
-          isStreamed + (isStreamed ? '' : `: ${event.args.data?.notStreamedReason || ''}`));
+      contentHelper.appendTextRow(i18nString(UIStrings.streamed),
+                                  isStreamed + (isStreamed ? '' : `: ${event.args.data?.notStreamedReason || ''}`));
       if (event.args.data) {
         TimelineUIUtils.buildConsumeCacheDetails(event.args.data, contentHelper);
       }
@@ -1069,8 +1068,7 @@ export class TimelineUIUtils {
       }
     }
 
-    const isFreshOrEnhanced =
-        Boolean(parsedTrace && Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace));
+    const isFreshOrEnhanced = Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace);
 
     switch (event.name) {
       case Trace.Types.Events.Name.GC:
@@ -1083,15 +1081,15 @@ export class TimelineUIUtils {
 
       case Trace.Types.Events.Name.PROFILE_CALL: {
         const profileCall = event as Trace.Types.Events.SyntheticProfileCall;
-        const resolvedURL = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, profileCall);
+        const resolvedURL = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(
+            parsedTrace, profileCall, Workspace.Workspace.WorkspaceImpl.instance());
         if (!resolvedURL) {
           break;
         }
         const callFrame = profileCall.callFrame;
         // Render the URL with its location content.
-        contentHelper.appendLocationRow(
-            i18nString(UIStrings.source), resolvedURL, callFrame.lineNumber || 0, callFrame.columnNumber, undefined,
-            true);
+        contentHelper.appendLocationRow(i18nString(UIStrings.source), resolvedURL, callFrame.lineNumber || 0,
+                                        callFrame.columnNumber, undefined, true);
         const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, profileCall);
         if (originWithEntity) {
           contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
@@ -1119,8 +1117,8 @@ export class TimelineUIUtils {
         contentHelper.appendTextRow(i18nString(UIStrings.timerId), unsafeEventData.timerId);
 
         if (event.name === Trace.Types.Events.Name.TIMER_INSTALL) {
-          contentHelper.appendTextRow(
-              i18nString(UIStrings.timeout), i18n.TimeUtilities.millisToString(unsafeEventData['timeout']));
+          contentHelper.appendTextRow(i18nString(UIStrings.timeout),
+                                      i18n.TimeUtilities.millisToString(unsafeEventData['timeout']));
           contentHelper.appendTextRow(i18nString(UIStrings.repeats), !unsafeEventData['singleShot']);
         }
         break;
@@ -1128,8 +1126,8 @@ export class TimelineUIUtils {
 
       case Trace.Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK:
       case Trace.Types.Events.Name.RUN_POST_TASK_CALLBACK: {
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.delay), i18n.TimeUtilities.millisToString(unsafeEventData['delay']));
+        contentHelper.appendTextRow(i18nString(UIStrings.delay),
+                                    i18n.TimeUtilities.millisToString(unsafeEventData['delay']));
         contentHelper.appendTextRow(i18nString(UIStrings.priority), unsafeEventData['priority']);
         break;
       }
@@ -1150,9 +1148,8 @@ export class TimelineUIUtils {
 
       case Trace.Types.Events.Name.CACHE_MODULE: {
         url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.compilationCacheSize),
-            i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
+        contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheSize),
+                                    i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
         break;
       }
 
@@ -1160,17 +1157,16 @@ export class TimelineUIUtils {
         url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
         if (url) {
           const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
-          contentHelper.appendLocationRow(
-              i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined, true);
+          contentHelper.appendLocationRow(i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined,
+                                          true);
           const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
           if (originWithEntity) {
             contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
           }
           entityAppended = true;
         }
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.compilationCacheSize),
-            i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
+        contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheSize),
+                                    i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
         break;
       }
 
@@ -1178,8 +1174,8 @@ export class TimelineUIUtils {
         url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
         if (url) {
           const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
-          contentHelper.appendLocationRow(
-              i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined, true);
+          contentHelper.appendLocationRow(i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined,
+                                          true);
           const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
           if (originWithEntity) {
             contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
@@ -1230,8 +1226,8 @@ export class TimelineUIUtils {
             tabStop: true,
             showColumnNumber: false,
           };
-          contentHelper.appendElementRow(
-              i18nString(UIStrings.imageUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
+          contentHelper.appendElementRow(i18nString(UIStrings.imageUrl),
+                                         LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
         }
         break;
       }
@@ -1243,8 +1239,8 @@ export class TimelineUIUtils {
             tabStop: true,
             showColumnNumber: false,
           };
-          contentHelper.appendElementRow(
-              i18nString(UIStrings.stylesheetUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
+          contentHelper.appendElementRow(i18nString(UIStrings.stylesheetUrl),
+                                         LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
         }
         break;
       }
@@ -1321,8 +1317,8 @@ export class TimelineUIUtils {
         // The failureReasons can be empty when Blink added a new failure reason that is
         // not supported by DevTools yet
         if (failureReasons.size === 0) {
-          contentHelper.appendElementRow(
-              i18nString(UIStrings.compositingFailed), i18nString(UIStrings.compositingFailedUnknownReason), true);
+          contentHelper.appendElementRow(i18nString(UIStrings.compositingFailed),
+                                         i18nString(UIStrings.compositingFailedUnknownReason), true);
         } else {
           for (const reason of failureReasons) {
             let str;
@@ -1411,9 +1407,8 @@ export class TimelineUIUtils {
 
       // @ts-expect-error Fall-through intended.
       case Trace.Types.Events.Name.FIRE_IDLE_CALLBACK: {
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.allottedTime),
-            i18n.TimeUtilities.millisToString(unsafeEventData['allottedMilliseconds']));
+        contentHelper.appendTextRow(i18nString(UIStrings.allottedTime),
+                                    i18n.TimeUtilities.millisToString(unsafeEventData['allottedMilliseconds']));
         contentHelper.appendTextRow(i18nString(UIStrings.invokedByTimeout), unsafeEventData['timedOut']);
       }
 
@@ -1422,9 +1417,8 @@ export class TimelineUIUtils {
         contentHelper.appendTextRow(i18nString(UIStrings.callbackId), unsafeEventData['id']);
 
         if (Trace.Types.Events.isRequestIdleCallback(event)) {
-          contentHelper.appendTextRow(
-              i18nString(UIStrings.requestIdleCallbackTimeout),
-              i18n.TimeUtilities.preciseMillisToString(event.args.data.timeout));
+          contentHelper.appendTextRow(i18nString(UIStrings.requestIdleCallbackTimeout),
+                                      i18n.TimeUtilities.preciseMillisToString(event.args.data.timeout));
         }
         break;
       }
@@ -1451,12 +1445,12 @@ export class TimelineUIUtils {
             parsedTrace,
         );
 
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.timestamp), i18n.TimeUtilities.preciseMillisToString(adjustedEventTimeStamp, 1));
+        contentHelper.appendTextRow(i18nString(UIStrings.timestamp),
+                                    i18n.TimeUtilities.preciseMillisToString(adjustedEventTimeStamp, 1));
 
         if (Trace.Types.Events.isMarkerEvent(event)) {
-          contentHelper.appendElementRow(
-              i18nString(UIStrings.details), TimelineUIUtils.buildDetailsNodeForMarkerEvents(event));
+          contentHelper.appendElementRow(i18nString(UIStrings.details),
+                                         TimelineUIUtils.buildDetailsNodeForMarkerEvents(event));
         }
 
         break;
@@ -1580,15 +1574,14 @@ export class TimelineUIUtils {
     return highlightContainer;
   }
 
-  static stackTraceFromCallFrames(callFrames: Protocol.Runtime.CallFrame[]|Trace.Types.Events.CallFrame[]):
-      Protocol.Runtime.StackTrace {
+  static stackTraceFromCallFrames(callFrames: Protocol.Runtime.CallFrame[]|
+                                  Trace.Types.Events.CallFrame[]): Protocol.Runtime.StackTrace {
     return {callFrames} as Protocol.Runtime.StackTrace;
   }
 
   /** This renders a stack trace... and other cool stuff. */
-  static async generateCauses(
-      event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
-      parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
+  static async generateCauses(event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
+                              parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
     const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
     let initiatorStackLabel = i18nString(UIStrings.initiatorStackTrace);
     await contentHelper.appendFunctionStackTraceSection(event, parsedTrace);
@@ -1620,8 +1613,9 @@ export class TimelineUIUtils {
       // and the time since the initiator (Pending For).
       const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(initiator);
       if (stackTrace) {
-        const traceElement =
-            await contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
+        const isFreshOrEnhanced = Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace);
+        const traceElement = await contentHelper.createChildStackTraceElement(
+            TimelineUIUtils.stackTraceFromCallFrames(stackTrace), isFreshOrEnhanced);
         contentHelper.appendSectionWithBodyIfExists(initiatorStackLabel, {body: traceElement});
       }
 
@@ -1699,9 +1693,8 @@ export class TimelineUIUtils {
     return link;
   }
 
-  private static async generateInvalidationsList(
-      invalidations: Trace.Types.Events.InvalidationTrackingEvent[],
-      contentHelper: TimelineDetailsContentHelper): Promise<void> {
+  private static async generateInvalidationsList(invalidations: Trace.Types.Events.InvalidationTrackingEvent[],
+                                                 contentHelper: TimelineDetailsContentHelper): Promise<void> {
     const {groupedByReason, backendNodeIds} = TimelineComponents.DetailsView.generateInvalidationsList(invalidations);
 
     let relatedNodesMap: Map<number, SDK.DOMModel.DOMNode|null>|null = null;
@@ -1716,9 +1709,10 @@ export class TimelineUIUtils {
     });
   }
 
-  private static generateInvalidationsForReason(
-      reason: string, invalidations: Trace.Types.Events.InvalidationTrackingEvent[],
-      relatedNodesMap: Map<number, SDK.DOMModel.DOMNode|null>|null, contentHelper: TimelineDetailsContentHelper): void {
+  private static generateInvalidationsForReason(reason: string,
+                                                invalidations: Trace.Types.Events.InvalidationTrackingEvent[],
+                                                relatedNodesMap: Map<number, SDK.DOMModel.DOMNode|null>|null,
+                                                contentHelper: TimelineDetailsContentHelper): void {
     function createLinkForInvalidationNode(invalidation: Trace.Types.Events.InvalidationTrackingEvent):
         HTMLSpanElement {
       const node = (invalidation.args.data.nodeId && relatedNodesMap) ?
@@ -1757,10 +1751,9 @@ export class TimelineUIUtils {
 
       const niceNodeLink = createLinkForInvalidationNode(invalidation);
 
-      const text = scriptLink ?
-          uiI18n.getFormatLocalizedString(
-              str_, UIStrings.invalidationWithCallFrame, {PH1: niceNodeLink, PH2: scriptLink}) as HTMLElement :
-          niceNodeLink;
+      const text = scriptLink ? uiI18n.getFormatLocalizedString(str_, UIStrings.invalidationWithCallFrame,
+                                                                {PH1: niceNodeLink, PH2: scriptLink}) as HTMLElement :
+                                niceNodeLink;
 
       // Sometimes we can get different Invalidation events which cause
       // the same text for the same element for the same reason to be
@@ -1778,9 +1771,8 @@ export class TimelineUIUtils {
   }
 
   /** Populates the passed object then returns true/false if it makes sense to show the pie chart */
-  private static aggregatedStatsForTraceEvent(
-      total: TimeRangeCategoryStats, parsedTrace: Trace.TraceModel.ParsedTrace,
-      event: Trace.Types.Events.Event): boolean {
+  private static aggregatedStatsForTraceEvent(total: TimeRangeCategoryStats, parsedTrace: Trace.TraceModel.ParsedTrace,
+                                              event: Trace.Types.Events.Event): boolean {
     const node = parsedTrace.data.Renderer.entryToNode.get(event);
     if (!node) {
       return false;
@@ -1829,9 +1821,8 @@ export class TimelineUIUtils {
     return true;
   }
 
-  static async buildPicturePreviewContent(
-      parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Paint,
-      target: SDK.Target.Target): Promise<Element|null> {
+  static async buildPicturePreviewContent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Paint,
+                                          target: SDK.Target.Target): Promise<Element|null> {
     const snapshotEvent = parsedTrace.data.LayerTree.paintsToSnapshots.get(event);
     if (!snapshotEvent) {
       return null;
@@ -1888,8 +1879,8 @@ export class TimelineUIUtils {
     const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
 
     const startTime = i18n.TimeUtilities.millisToString(eventStartTime - zeroTime);
-    UI.Tooltip.Tooltip.install(
-        eventDivider, i18nString(UIStrings.sAtS, {PH1: TimelineUIUtils.eventTitle(event), PH2: startTime}));
+    UI.Tooltip.Tooltip.install(eventDivider,
+                               i18nString(UIStrings.sAtS, {PH1: TimelineUIUtils.eventTitle(event), PH2: startTime}));
     const style = TimelineUIUtils.markerStyleForEvent(event);
     if (style.tall) {
       eventDivider.style.backgroundColor = style.color;
@@ -1907,9 +1898,8 @@ export class TimelineUIUtils {
     return Trace.Styles.getCategoryStyles();
   }
 
-  static generatePieChart(
-      aggregatedStats: TimeRangeCategoryStats, selfCategory?: Trace.Styles.TimelineCategory,
-      selfTime?: Trace.Types.Timing.Micro): Element {
+  static generatePieChart(aggregatedStats: TimeRangeCategoryStats, selfCategory?: Trace.Styles.TimelineCategory,
+                          selfTime?: Trace.Types.Timing.Micro): Element {
     let total = 0;
     for (const categoryName in aggregatedStats) {
       total += aggregatedStats[categoryName];
@@ -1981,9 +1971,9 @@ export class TimelineUIUtils {
     return element;
   }
 
-  static generateDetailsContentForFrame(
-      frame: Trace.Types.Events.LegacyTimelineFrame, filmStrip: Trace.Extras.FilmStrip.Data|null,
-      filmStripFrame: Trace.Extras.FilmStrip.Frame|null): DocumentFragment {
+  static generateDetailsContentForFrame(frame: Trace.Types.Events.LegacyTimelineFrame,
+                                        filmStrip: Trace.Extras.FilmStrip.Data|null,
+                                        filmStripFrame: Trace.Extras.FilmStrip.Frame|null): DocumentFragment {
     const contentHelper = new TimelineDetailsContentHelper(null, null);
     contentHelper.addSection(i18nString(UIStrings.frame));
 
@@ -2034,10 +2024,10 @@ export class TimelineUIUtils {
     const green = 'hsl(90,100%,40%)';
     const purple = 'hsl(256,100%,75%)';
     eventDispatchDesciptors = [
-      new EventDispatchTypeDescriptor(
-          1, lightOrange, ['mousemove', 'mouseenter', 'mouseleave', 'mouseout', 'mouseover']),
-      new EventDispatchTypeDescriptor(
-          1, lightOrange, ['pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointermove']),
+      new EventDispatchTypeDescriptor(1, lightOrange,
+                                      ['mousemove', 'mouseenter', 'mouseleave', 'mouseout', 'mouseover']),
+      new EventDispatchTypeDescriptor(1, lightOrange,
+                                      ['pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointermove']),
       new EventDispatchTypeDescriptor(2, green, ['wheel']),
       new EventDispatchTypeDescriptor(3, orange, ['click', 'mousedown', 'mouseup']),
       new EventDispatchTypeDescriptor(3, orange, ['touchstart', 'touchend', 'touchmove', 'touchcancel']),
@@ -2119,17 +2109,16 @@ export class TimelineUIUtils {
 
   static colorForId(id: string): string {
     if (!colorGenerator) {
-      colorGenerator = new Common.Color.Generator(
-          {
-            min: 30,
-            max: 330,
-          },
-          {
-            min: 50,
-            max: 80,
-            count: 3,
-          },
-          85);
+      colorGenerator = new Common.Color.Generator({
+        min: 30,
+        max: 330,
+      },
+                                                  {
+                                                    min: 50,
+                                                    max: 80,
+                                                    count: 3,
+                                                  },
+                                                  85);
       colorGenerator.setColorForID('', '#f2ecdc');
     }
     return colorGenerator.colorForID(id);
@@ -2141,10 +2130,10 @@ export class TimelineUIUtils {
                                                       frame.url.slice(0, trimAt);
   }
 
-  static getOriginWithEntity(
-      entityMapper: Trace.EntityMapper.EntityMapper|null, parsedTrace: Trace.TraceModel.ParsedTrace,
-      event: Trace.Types.Events.Event): string|null {
-    const resolvedURL = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, event);
+  static getOriginWithEntity(entityMapper: Trace.EntityMapper.EntityMapper|null,
+                             parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): string|null {
+    const resolvedURL = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(
+        parsedTrace, event, Workspace.Workspace.WorkspaceImpl.instance());
     if (!resolvedURL) {
       return null;
     }
@@ -2179,6 +2168,26 @@ export class EventDispatchTypeDescriptor {
   }
 }
 
+/**
+ * When loading a trace file (non-fresh recording), the scriptIds in the trace
+ * are from the recorded page and are guaranteed to collide with scriptIds of
+ * the currently active inspected page. We strip them from the stack trace
+ * to force the stack trace rendering machinery to fall back to URL-based resolution
+ * instead of incorrectly matching the active page's script IDs.
+ */
+export function stripScriptIds(stackTrace: Protocol.Runtime.StackTrace): Protocol.Runtime.StackTrace {
+  const callFrames = stackTrace.callFrames.map(frame => ({
+                                                 ...frame,
+                                                 scriptId: '' as Protocol.Runtime.ScriptId,
+                                               }));
+  const parent = stackTrace.parent ? stripScriptIds(stackTrace.parent) : undefined;
+  return {
+    ...stackTrace,
+    callFrames,
+    parent,
+  };
+}
+
 export class TimelineDetailsContentHelper {
   fragment: DocumentFragment;
   #linkifier: LegacyComponents.Linkifier.Linkifier|null;
@@ -2257,7 +2266,8 @@ export class TimelineDetailsContentHelper {
     if (!stackTraceForEvent) {
       return;
     }
-    const traceElement = await this.createChildStackTraceElement(stackTraceForEvent);
+    const isFreshOrEnhanced = Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace);
+    const traceElement = await this.createChildStackTraceElement(stackTraceForEvent, isFreshOrEnhanced);
     this.appendSectionWithBodyIfExists(i18nString(UIStrings.functionStack), {body: traceElement});
   }
 
@@ -2290,8 +2300,8 @@ export class TimelineDetailsContentHelper {
     }
   }
 
-  appendLocationRow(
-      title: string, url: string, startLine: number, startColumn?: number, text?: string, omitOrigin?: boolean): void {
+  appendLocationRow(title: string, url: string, startLine: number, startColumn?: number, text?: string,
+                    omitOrigin?: boolean): void {
     if (!this.#linkifier) {
       return;
     }
@@ -2303,8 +2313,8 @@ export class TimelineDetailsContentHelper {
       text,
       omitOrigin,
     };
-    const link = this.#linkifier.maybeLinkifyScriptLocation(
-        this.target, null, url as Platform.DevToolsPath.UrlString, startLine, options);
+    const link = this.#linkifier.maybeLinkifyScriptLocation(this.target, null, url as Platform.DevToolsPath.UrlString,
+                                                            startLine, options);
     if (!link) {
       return;
     }
@@ -2321,8 +2331,8 @@ export class TimelineDetailsContentHelper {
       return;
     }
     locationContent.appendChild(link);
-    UI.UIUtils.createTextChild(
-        locationContent, Platform.StringUtilities.sprintf(' [%s…%s]', startLine + 1, (endLine || 0) + 1 || ''));
+    UI.UIUtils.createTextChild(locationContent,
+                               Platform.StringUtilities.sprintf(' [%s…%s]', startLine + 1, (endLine || 0) + 1 || ''));
     this.appendElementRow(title, locationContent);
   }
 
@@ -2330,7 +2340,10 @@ export class TimelineDetailsContentHelper {
    * Creates a stack trace element for the given trace, but checks if it
    * contains any entries, and discards it if it's empty.
    */
-  async createChildStackTraceElement(runtimeStackTrace: Protocol.Runtime.StackTrace): Promise<HTMLElement|null> {
+  async createChildStackTraceElement(
+      runtimeStackTrace: Protocol.Runtime.StackTrace,
+      isFreshOrEnhanced?: boolean,
+      ): Promise<HTMLElement|null> {
     // Fallback to the main page/root target. Maybe the main page has a source map we need.
     // Worst case the stack is identity mapped.
     const targetManager = SDK.TargetManager.TargetManager.instance();
@@ -2339,9 +2352,14 @@ export class TimelineDetailsContentHelper {
       return null;
     }
 
+    // If the trace is non-fresh and not enhanced, this means that any active
+    // sourcemaps are not related to the trace, and therefore we do not want to
+    // use them.
+    const stackTraceToUse = isFreshOrEnhanced ? runtimeStackTrace : stripScriptIds(runtimeStackTrace);
+
     const stackTrace =
         await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
-            runtimeStackTrace, target);
+            stackTraceToUse, target);
     const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent();
     callFrameContents.options = {tabStops: true, showColumnNumber: true};
     callFrameContents.stackTrace = stackTrace;
@@ -2430,8 +2448,8 @@ export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event:
   return false;
 }
 
-function getEventSelfTime(
-    event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): Trace.Types.Timing.Micro {
+function getEventSelfTime(event: Trace.Types.Events.Event,
+                          parsedTrace: Trace.TraceModel.ParsedTrace): Trace.Types.Timing.Micro {
   const mapToUse = Trace.Types.Extensions.isSyntheticExtensionEntry(event) ?
       parsedTrace.data.ExtensionTraceData.entryToNode :
       parsedTrace.data.Renderer.entryToNode;

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

@@ -4,6 +4,7 @@
 
 import '../../../ui/components/request_link_icon/request_link_icon.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -157,7 +158,7 @@ export class NetworkRequestDetails extends UI.Widget.Widget {
       // while this feature is experimental, to enable easier trials.
       if (headerName === 'server-timing' || headerName === 'server-timing-test') {
         header.name = 'server-timing';
-        this.#serverTimings = SDK.ServerTiming.ServerTiming.parseHeaders([header]);
+        this.#serverTimings = SDK.ServerTiming.ServerTiming.parseHeaders([header], Common.Console.Console.instance());
         break;
       }
     }
@@ -273,7 +274,8 @@ function renderURL(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.Tem
       request.args.data.url as Platform.DevToolsPath.UrlString, options);
 
   // Potentially link to request within Network Panel
-  const networkRequest = SDK.TraceObject.RevealableNetworkRequest.create(request);
+  const networkRequest =
+      SDK.TraceObject.RevealableNetworkRequest.create(SDK.TargetManager.TargetManager.instance(), request);
   if (networkRequest) {
     linkifiedURL.addEventListener('contextmenu', (event: MouseEvent) => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);

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

@@ -172,7 +172,8 @@ export class NetworkRequestTooltip extends UI.Widget.Widget {
       backgroundColor: color,
     };
 
-    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(networkRequest);
+    const sdkNetworkRequest =
+        SDK.TraceObject.RevealableNetworkRequest.create(SDK.TargetManager.TargetManager.instance(), networkRequest);
     const wasThrottled = sdkNetworkRequest &&
         SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
             sdkNetworkRequest.networkRequest);
@@ -253,7 +254,8 @@ export class NetworkRequestTooltip extends UI.Widget.Widget {
     }
 
     // TODO(crbug.com/466124088): Seems broken.
-    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#networkRequest);
+    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(
+        SDK.TargetManager.TargetManager.instance(), this.#networkRequest);
     const networkConditions = sdkNetworkRequest &&
         SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
             sdkNetworkRequest.networkRequest);