chrome-devtools-frontend 1.0.1660788 → 1.0.1661063

package/front_end/panels/timeline/TimelinePanel.ts

@@ -453,10 +453,15 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #hiddenTracksInfoBarByParsedTrace = new WeakMap<Trace.TraceModel.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
 
   readonly #resourceLoader: SDK.PageResourceLoader.ResourceLoader;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #isolateManager: SDK.IsolateManager.IsolateManager;
 
-  constructor(resourceLoader: SDK.PageResourceLoader.ResourceLoader, traceModel?: Trace.TraceModel.Model) {
+  constructor(resourceLoader: SDK.PageResourceLoader.ResourceLoader, targetManager: SDK.TargetManager.TargetManager,
+              isolateManager: SDK.IsolateManager.IsolateManager, traceModel?: Trace.TraceModel.Model) {
     super('timeline');
     this.#resourceLoader = resourceLoader;
+    this.#targetManager = targetManager;
+    this.#isolateManager = isolateManager;
     this.registerRequiredCSS(timelinePanelStyles);
     const adornerContent = document.createElement('span');
     adornerContent.innerHTML = `<div style="
@@ -717,10 +722,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   static instance(opts: {
     forceNew: true,
     resourceLoader: SDK.PageResourceLoader.ResourceLoader,
+    targetManager: SDK.TargetManager.TargetManager,
+    isolateManager: SDK.IsolateManager.IsolateManager,
     traceModel?: Trace.TraceModel.Model,
   }|undefined = undefined): TimelinePanel {
     if (opts) {
-      timelinePanelInstance = new TimelinePanel(opts.resourceLoader, opts.traceModel);
+      timelinePanelInstance =
+          new TimelinePanel(opts.resourceLoader, opts.targetManager, opts.isolateManager, opts.traceModel);
     }
 
     if (!timelinePanelInstance) {
@@ -1149,7 +1157,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Isolate selector
     if (this.#isNode) {
-      const isolateSelector = new IsolateSelector();
+      const isolateSelector = new IsolateSelector(this.#targetManager, this.#isolateManager);
       this.panelToolbar.appendSeparator();
       this.panelToolbar.appendToolbarItem(isolateSelector);
     }
@@ -2703,8 +2711,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const {scriptId, scriptUrl, sourceUrl, sourceMapUrl, frame, cachedRawSourceMap} = params;
 
       if (cachedRawSourceMap) {
-        return new SDK.SourceMap.SourceMap(
-            sourceUrl, sourceMapUrl ?? '' as Platform.DevToolsPath.UrlString, cachedRawSourceMap);
+        return new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl ?? '' as Platform.DevToolsPath.UrlString,
+                                           cachedRawSourceMap, Common.Console.Console.instance());
       }
 
       // For still-active frames, the source map is likely already fetched or at least in-flight.
@@ -2725,7 +2733,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       if (!isFreshRecording && metadata?.sourceMaps && !isDataUrl) {
         const cachedSourceMap = metadata.sourceMaps.find(m => m.sourceMapUrl === sourceMapUrl);
         if (cachedSourceMap) {
-          return new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, cachedSourceMap.sourceMap);
+          return new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, cachedSourceMap.sourceMap,
+                                             Common.Console.Console.instance());
         }
       }
 
@@ -2755,7 +2764,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       };
       const payload = await SDK.SourceMapManager.tryLoadSourceMap(
           TimelinePanel.instance().#resourceLoader, sourceMapUrl, initiator);
-      return payload ? new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload) : null;
+      return payload ?
+          new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload, Common.Console.Console.instance()) :
+          null;
     }
 
     const timeout = new Promise<null>(resolve => setTimeout(() => resolve(null), SOURCE_MAP_LOAD_TIMEOUT_MS));

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -517,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];
 
@@ -641,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.
@@ -768,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;
@@ -832,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));
     }
   }
 
@@ -970,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.
@@ -1006,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);
@@ -1028,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);
       }
@@ -1070,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:
@@ -1091,9 +1088,8 @@ export class TimelineUIUtils {
         }
         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);
@@ -1121,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;
@@ -1130,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;
       }
@@ -1152,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;
       }
 
@@ -1162,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;
       }
 
@@ -1180,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);
@@ -1232,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;
       }
@@ -1245,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;
       }
@@ -1323,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;
@@ -1413,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']);
       }
 
@@ -1424,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;
       }
@@ -1453,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;
@@ -1582,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);
@@ -1622,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});
       }
 
@@ -1701,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;
@@ -1718,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) ?
@@ -1759,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
@@ -1780,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;
@@ -1831,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;
@@ -1890,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;
@@ -1909,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];
@@ -1983,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));
 
@@ -2036,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']),
@@ -2121,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);
@@ -2143,9 +2130,8 @@ 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 {
+  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) {
@@ -2182,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;
@@ -2260,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});
   }
 
@@ -2293,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;
     }
@@ -2306,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;
     }
@@ -2324,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);
   }
 
@@ -2333,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();
@@ -2342,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;
@@ -2433,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;