[RPP] Resolve source maps when running trace processor

For source maps that happen to already exist due to being associated
with the current primary target, no additional work is done. Otherwise,
for no-longer present frames or for non-fresh traces, the required maps
are fetched in parallel.

For now, only runs if experimental insights are enabled.

To give the debugger model ample time to have loaded the source maps
by the time the trace processor will request them,
`TimelineController.stopRecording` now resumes suspended targets as
early as possible.

Bug: 394373632
Change-Id: Idce8f7ec7a019243228bd1ae46fb2af2610d60e9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6266475
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/core/sdk/SourceMapManager.ts

@@ -174,7 +174,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }
 }
 
-async function loadSourceMap(
+export async function loadSourceMap(
     url: Platform.DevToolsPath.UrlString, initiator: PageResourceLoadInitiator): Promise<SourceMapV3> {
   try {
     const {content} = await PageResourceLoader.instance().loadResource(url, initiator);

front_end/models/trace/ModelImpl.ts

@@ -17,6 +17,7 @@ import * as Types from './types/types.js';
 export interface ParseConfig {
   metadata?: Types.File.MetaData;
   isFreshRecording?: boolean;
+  resolveSourceMap?: Types.Configuration.ParseOptions['resolveSourceMap'];
 }
 
 /**
@@ -117,6 +118,7 @@ export class Model extends EventTarget {
         isFreshRecording,
         isCPUProfile,
         metadata,
+        resolveSourceMap: config?.resolveSourceMap,
       });
       this.#storeParsedFileData(file, this.#processor.parsedTrace, this.#processor.insights);
       // We only push the file onto this.#traces here once we know it's valid

front_end/models/trace/handlers/ScriptsHandler.test.ts

@@ -9,17 +9,20 @@ import * as Trace from '../trace.js';
 
 describe('ScriptsHandler', () => {
   beforeEach(async function() {
+    Trace.Handlers.ModelHandlers.Meta.reset();
     Trace.Handlers.ModelHandlers.Scripts.reset();
     const events = await TraceLoader.rawEvents(this, 'enhanced-traces.json.gz');
     for (const event of events) {
+      Trace.Handlers.ModelHandlers.Meta.handleEvent(event);
       Trace.Handlers.ModelHandlers.Scripts.handleEvent(event);
     }
+    await Trace.Handlers.ModelHandlers.Meta.finalize();
     await Trace.Handlers.ModelHandlers.Scripts.finalize({
-      async resolveSourceMap(url: string): Promise<SDK.SourceMap.SourceMap> {
-        // Don't need to actually make a source map.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return {test: url} as any;
-      }
+      async resolveSourceMap(params: Trace.Types.Configuration.ResolveSourceMapParams):
+          Promise<SDK.SourceMap.SourceMap> {
+            // Don't need to actually make a source map.
+            return {test: params.sourceMapUrl} as unknown as SDK.SourceMap.SourceMap;
+          }
     });
   });
 

front_end/models/trace/handlers/ScriptsHandler.ts

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 // eslint-disable-next-line rulesdir/no-imports-in-directory
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
 
+import {data as metaHandlerData, type MetaHandlerData} from './MetaHandler.js';
+
 export interface ScriptsData {
   /** Note: this is only populated when the "Enhanced Traces" feature is enabled. */
   scripts: Map<Protocol.Runtime.ScriptId, Script>;
@@ -18,7 +21,9 @@ export interface Script {
   frame: string;
   ts: Types.Timing.Micro;
   url?: string;
+  sourceUrl?: string;
   content?: string;
+  /** Note: this is the literal text given as the sourceMappingURL value. It has not been resolved relative to the script url. */
   sourceMapUrl?: string;
   sourceMap?: SDK.SourceMap.SourceMap;
 }
@@ -30,8 +35,10 @@ export function reset(): void {
 }
 
 export function handleEvent(event: Types.Events.Event): void {
-  const getOrMakeScript = (scriptId: Protocol.Runtime.ScriptId): Script =>
-      Platform.MapUtilities.getWithDefault(scriptById, scriptId, () => ({scriptId, frame: '', ts: 0} as Script));
+  const getOrMakeScript = (scriptIdAsNumber: number): Script => {
+    const scriptId = String(scriptIdAsNumber) as Protocol.Runtime.ScriptId;
+    return Platform.MapUtilities.getWithDefault(scriptById, scriptId, () => ({scriptId, frame: '', ts: 0} as Script));
+  };
 
   if (Types.Events.isTargetRundownEvent(event) && event.args.data) {
     const {scriptId, frame} = event.args.data;
@@ -43,9 +50,12 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 
   if (Types.Events.isV8SourceRundownEvent(event)) {
-    const {scriptId, url, sourceMapUrl} = event.args.data;
+    const {scriptId, url, sourceUrl, sourceMapUrl} = event.args.data;
     const script = getOrMakeScript(scriptId);
     script.url = url;
+    if (sourceUrl) {
+      script.sourceUrl = sourceUrl;
+    }
     if (sourceMapUrl) {
       script.sourceMapUrl = sourceMapUrl;
     }
@@ -67,18 +77,65 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
+function findFrame(meta: MetaHandlerData, frameId: string): Types.Events.TraceFrame|null {
+  for (const frames of meta.frameByProcessId?.values()) {
+    const frame = frames.get(frameId);
+    if (frame) {
+      return frame;
+    }
+  }
+
+  return null;
+}
+
 export async function finalize(options: Types.Configuration.ParseOptions): Promise<void> {
   if (!options.resolveSourceMap) {
     return;
   }
 
+  const meta = metaHandlerData();
+
   const promises = [];
   for (const script of scriptById.values()) {
-    if (script.sourceMapUrl) {
-      promises.push(options.resolveSourceMap(script.sourceMapUrl).then(sourceMap => {
-        script.sourceMap = sourceMap;
-      }));
+    // No frame or url means the script came from somewhere we don't care about.
+    // Note: scripts from inline <SCRIPT> elements use the url of the HTML document,
+    // so aren't ignored.
+    if (!script.frame || !script.url || !script.sourceMapUrl) {
+      continue;
+    }
+
+    const frameUrl = findFrame(meta, script.frame)?.url as Platform.DevToolsPath.UrlString | undefined;
+    if (!frameUrl) {
+      continue;
+    }
+
+    // If there is a `sourceURL` magic comment, resolve the compiledUrl against the frame url.
+    // example: `// #sourceURL=foo.js` for target frame https://www.example.com/home -> https://www.example.com/home/foo.js
+    let sourceUrl = script.url;
+    if (script.sourceUrl) {
+      sourceUrl = Common.ParsedURL.ParsedURL.completeURL(frameUrl, script.sourceUrl) ?? script.sourceUrl;
     }
+
+    // Resolve the source map url. The value given by v8 may be relative, so resolve it here.
+    // This process should match the one in `SourceMapManager.attachSourceMap`.
+    const sourceMapUrl =
+        Common.ParsedURL.ParsedURL.completeURL(sourceUrl as Platform.DevToolsPath.UrlString, script.sourceMapUrl);
+    if (!sourceMapUrl) {
+      continue;
+    }
+
+    const params: Types.Configuration.ResolveSourceMapParams = {
+      scriptId: script.scriptId,
+      scriptUrl: sourceUrl as Platform.DevToolsPath.UrlString,
+      sourceMapUrl: sourceMapUrl as Platform.DevToolsPath.UrlString,
+      frame: script.frame as Protocol.Page.FrameId,
+    };
+    const promise = options.resolveSourceMap(params).then(sourceMap => {
+      if (sourceMap) {
+        script.sourceMap = sourceMap;
+      }
+    });
+    promises.push(promise);
   }
   await Promise.all(promises);
 }

front_end/models/trace/types/Configuration.ts

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 
 import type * as File from './File.js';
 
@@ -66,5 +68,12 @@ export interface ParseOptions {
    */
   isCPUProfile?: boolean;
   metadata?: File.MetaData;
-  resolveSourceMap?: (url: string) => Promise<SDK.SourceMap.SourceMap>;
+  resolveSourceMap?: (params: ResolveSourceMapParams) => Promise<SDK.SourceMap.SourceMap|null>;
+}
+
+export interface ResolveSourceMapParams {
+  scriptId: string;
+  scriptUrl: Platform.DevToolsPath.UrlString;
+  sourceMapUrl: Platform.DevToolsPath.UrlString;
+  frame: Protocol.Page.FrameId;
 }

front_end/models/trace/types/TraceEvents.ts

@@ -3083,7 +3083,7 @@ export interface TargetRundownEvent extends Event {
       isolate: string,
       v8context: string,
       origin: string,
-      scriptId: Protocol.Runtime.ScriptId,
+      scriptId: number,
       isDefault?: boolean,
       contextType?: string,
     },
@@ -3101,7 +3101,7 @@ export interface V8SourceRundownEvent extends Event {
     data: {
       isolate: string,
       executionContextId: Protocol.Runtime.ExecutionContextId,
-      scriptId: Protocol.Runtime.ScriptId,
+      scriptId: number,
       startLine: number,
       startColumn: number,
       endLine: number,
@@ -3126,7 +3126,7 @@ export interface V8SourceRundownSourcesScriptCatchupEvent extends Event {
   args: Args&{
     data: {
       isolate: string,
-      scriptId: Protocol.Runtime.ScriptId,
+      scriptId: number,
       length: number,
       sourceText: string,
     },
@@ -3144,7 +3144,7 @@ export interface V8SourceRundownSourcesLargeScriptCatchupEvent extends Event {
   args: Args&{
     data: {
       isolate: string,
-      scriptId: Protocol.Runtime.ScriptId,
+      scriptId: number,
       splitIndex: number,
       splitCount: number,
       sourceText: string,

front_end/panels/timeline/TimelineController.ts

@@ -177,8 +177,14 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
     throttlingManager.setCPUThrottlingOption(SDK.CPUThrottlingManager.NoThrottlingOption);
 
     this.client.loadingStarted();
-    this.#fieldData = await this.fetchFieldData();
-    await this.waitForTracingToStop();
+
+    const [fieldData] = await Promise.all([
+      this.fetchFieldData(),
+      // TODO(crbug.com/366072294): Report the progress of this resumption, as it can be lengthy on heavy pages.
+      SDK.TargetManager.TargetManager.instance().resumeAllTargets(),
+      this.waitForTracingToStop(),
+    ]);
+    this.#fieldData = fieldData;
 
     // Now we re-enable throttling again to maintain the setting being persistent.
     throttlingManager.setCPUThrottlingOption(optionDuringRecording);
@@ -259,8 +265,6 @@ export class TimelineController implements Trace.TracingManager.TracingManagerCl
   }
 
   private async allSourcesFinished(): Promise<void> {
-    // TODO(crbug.com/366072294): Report the progress of this resumption, as it can be lengthy on heavy pages.
-    await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
     Extensions.ExtensionServer.ExtensionServer.instance().profilingStopped();
 
     this.client.processingStarted();

front_end/panels/timeline/TimelinePanel.ts

@@ -2418,6 +2418,54 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     });
   }
 
+  #createSourceMapResolver(isFreshRecording: boolean): Trace.TraceModel.ParseConfig['resolveSourceMap'] {
+    // Currently, only experimental insights need source maps.
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS)) {
+      return;
+    }
+
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const debuggerModel = target?.model(SDK.DebuggerModel.DebuggerModel);
+    const resourceModel = target?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const activeFrameIds = (resourceModel?.frames() ?? []).map(frame => frame.id);
+
+    return async function resolveSourceMap(params: Trace.Types.Configuration.ResolveSourceMapParams) {
+      const {scriptId, scriptUrl, sourceMapUrl, frame} = params;
+
+      // For the still-active frame, the source map is likely already fetched.
+      // TODO(cjamcl): hook into in-flight requests for source maps (await on active SourceMapManager resolution, if present).
+      if (isFreshRecording && activeFrameIds.includes(frame)) {
+        const map = debuggerModel?.scriptForId(scriptId)?.sourceMap();
+        if (map && (!scriptUrl || map.compiledURL() === scriptUrl)) {
+          return map;
+        }
+
+        // Even for the still-active frame, it could be that the source map has not been fetched yet.
+        // There is no mechanism for waiting for an in-flight source map, so instead we fallback to
+        // fetching it again here.
+      }
+
+      // Else... fetch it!
+      if (!scriptUrl) {
+        return null;
+      }
+
+      // In all other cases, we must fetch the source map.
+      // For example, since the debugger model is disable during recording, any non-final navigations during
+      // the trace will never have their source maps fetched by the debugger model. That's only ever done here.
+
+      try {
+        const initiator = {target: null, frameId: frame, initiatorUrl: scriptUrl};
+        const payload = await SDK.SourceMapManager.loadSourceMap(sourceMapUrl, initiator);
+        return new SDK.SourceMap.SourceMap(scriptUrl, sourceMapUrl, payload);
+      } catch (cause) {
+        console.error(`Could not load content for ${sourceMapUrl}: ${cause.message}`, {cause});
+      }
+
+      return null;
+    };
+  }
+
   async #executeNewTrace(
       collectedEvents: Trace.Types.Events.Event[], isFreshRecording: boolean,
       metadata: Trace.Types.File.MetaData|null): Promise<void> {
@@ -2426,6 +2474,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         {
           metadata: metadata ?? undefined,
           isFreshRecording,
+          resolveSourceMap: this.#createSourceMapResolver(isFreshRecording),
         },
     );
   }