[RPP] Include HTML and CSS content in trace export

For enhanced traces with script contents, inline scripts within HTML
document did not show up correctly in the Sources panel. Only the last
inline script showed there, which is confusing.

Now, we export the contents of all HTML documents. To accommodate this,
the "script contents" checkbox is renamed to "resource contents".

Also now including CSS resources.

Fixed: 455942736
Change-Id: I44e7309d1df16f388307cfc20ea74c0cc8fd9fe1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7088202
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/core/sdk/EnhancedTracesParser.ts

@@ -8,7 +8,7 @@ import type * as Platform from '../platform/platform.js';
 import {UserVisibleError} from '../platform/platform.js';
 
 import type {
-  HydratingDataPerTarget, RehydratingExecutionContext, RehydratingScript, RehydratingTarget} from
+  HydratingDataPerTarget, RehydratingExecutionContext, RehydratingResource, RehydratingScript, RehydratingTarget} from
   './RehydratingObject.js';
 import type {SourceMapV3} from './SourceMap.js';
 import type {TraceObject} from './TraceObject.js';
@@ -142,6 +142,7 @@ export class EnhancedTracesParser {
   #targets: RehydratingTarget[] = [];
   #executionContexts: RehydratingExecutionContext[] = [];
   #scripts: RehydratingScript[] = [];
+  #resources: RehydratingResource[] = [];
   static readonly enhancedTraceVersion: number = 1;
 
   constructor(trace: TraceObject) {
@@ -319,7 +320,10 @@ export class EnhancedTracesParser {
       this.resolveSourceMap(script);
     }
 
-    return this.groupContextsAndScriptsUnderTarget(this.#targets, this.#executionContexts, this.#scripts);
+    this.#resources = this.#trace.metadata.resources ?? [];
+
+    return this.groupContextsAndScriptsUnderTarget(
+        this.#targets, this.#executionContexts, this.#scripts, this.#resources);
   }
 
   private resolveSourceMap(script: RehydratingScript): void {
@@ -411,8 +415,8 @@ export class EnhancedTracesParser {
   }
 
   private groupContextsAndScriptsUnderTarget(
-      targets: RehydratingTarget[], executionContexts: RehydratingExecutionContext[],
-      scripts: RehydratingScript[]): HydratingDataPerTarget[] {
+      targets: RehydratingTarget[], executionContexts: RehydratingExecutionContext[], scripts: RehydratingScript[],
+      resources: RehydratingResource[]): HydratingDataPerTarget[] {
     const data: HydratingDataPerTarget[] = [];
     const targetIds = new Set<Protocol.Target.TargetID>();
     const targetToExecutionContexts: Map<string, RehydratingExecutionContext[]> =
@@ -424,12 +428,15 @@ export class EnhancedTracesParser {
     const targetToScripts: Map<Protocol.Target.TargetID, RehydratingScript[]> =
         new Map<Protocol.Target.TargetID, RehydratingScript[]>();
     const orphanScripts: RehydratingScript[] = [];
+    const targetToResources: Map<Protocol.Target.TargetID, RehydratingResource[]> =
+        new Map<Protocol.Target.TargetID, RehydratingResource[]>();
 
     // Initialize all the mapping needed
     for (const target of targets) {
       targetIds.add(target.targetId);
       targetToExecutionContexts.set(target.targetId, []);
       targetToScripts.set(target.targetId, []);
+      targetToResources.set(target.targetId, []);
     }
 
     // Put all of the known execution contexts under respective targets
@@ -485,12 +492,20 @@ export class EnhancedTracesParser {
       }
     }
 
+    for (const resource of resources) {
+      const frameId = resource.frame as Protocol.Target.TargetID;
+      if (targetIds.has(frameId)) {
+        targetToResources.get(frameId)?.push(resource);
+      }
+    }
+
     // Now all the scripts are linked to a target, we want to make sure all the scripts are pointing to a valid
     // execution context. If not, we will create an artificial execution context for the script
     for (const target of targets) {
       const targetId = target.targetId;
       const executionContexts = targetToExecutionContexts.get(targetId) || [];
       const scripts = targetToScripts.get(targetId) || [];
+      const resources = targetToResources.get(targetId) || [];
       for (const script of scripts) {
         if (!executionContexts.find(context => context.id === script.executionContextId)) {
           const artificialContext: RehydratingExecutionContext = {
@@ -511,7 +526,7 @@ export class EnhancedTracesParser {
       }
 
       // Finally, we put all the information into the data structure we want to return as.
-      data.push({target, executionContexts, scripts});
+      data.push({target, executionContexts, scripts, resources});
     }
 
     return data;

front_end/core/sdk/RehydratingConnection.test.ts

@@ -10,7 +10,8 @@ import * as Common from '../common/common.js';
 import type {Message} from '../protocol_client/InspectorBackend.js';
 
 import type {
-  RehydratingExecutionContext, RehydratingScript, RehydratingTarget, ServerMessage} from './RehydratingObject.js';
+  RehydratingExecutionContext, RehydratingResource, RehydratingScript, RehydratingTarget, ServerMessage} from
+  './RehydratingObject.js';
 import * as SDK from './sdk.js';
 
 const mockTarget1: RehydratingTarget = {
@@ -60,7 +61,7 @@ const mockScript1: RehydratingScript = {
   endColumn: 10,
   hash: '',
   isModule: false,
-  url: 'example.com',
+  url: 'example.com',  // inline
   hasSourceURL: false,
   sourceMapURL: undefined,
   length: 10,
@@ -84,7 +85,7 @@ const mockScript2: RehydratingScript = {
   endColumn: 10,
   hash: '',
   isModule: false,
-  url: 'example.com',
+  url: 'example.com/script.js',
   hasSourceURL: false,
   sourceMapURL: undefined,
   length: 10,
@@ -97,6 +98,13 @@ const mockScript2: RehydratingScript = {
   buildId: ''
 };
 
+const mockResource: RehydratingResource = {
+  url: 'example.com',
+  frame: 'ABCDE',
+  content: '<html>',
+  mimeType: 'text/html',
+};
+
 describe('RehydratingSession', () => {
   const sessionId = 1;
   const messageId = 1;
@@ -105,6 +113,7 @@ describe('RehydratingSession', () => {
   let mockRehydratingSession: SDK.RehydratingConnection.RehydratingSession;
   const executionContextsForTarget1 = [mockExecutionContext1, mockExecutionContext2];
   const scriptsForTarget1 = [mockScript1, mockScript2];
+  const resourcesForTarget1 = [mockResource];
 
   class MockRehydratingConnection implements SDK.RehydratingConnection.RehydratingConnectionInterface {
     messageQueue: ServerMessage[] = [];
@@ -126,7 +135,8 @@ describe('RehydratingSession', () => {
   beforeEach(() => {
     mockRehydratingConnection = new MockRehydratingConnection();
     mockRehydratingSession = new RehydratingSessionForTest(
-        sessionId, target, executionContextsForTarget1, scriptsForTarget1, mockRehydratingConnection);
+        sessionId, target, executionContextsForTarget1, scriptsForTarget1, resourcesForTarget1,
+        mockRehydratingConnection);
     mockRehydratingSession.declareSessionAttachedToTarget();
   });
 
@@ -142,25 +152,6 @@ describe('RehydratingSession', () => {
         target.targetId.toString());
   });
 
-  it('sends script parsed and debugger id while handling debugger enable', async function() {
-    mockRehydratingConnection.clearMessageQueue();
-    mockRehydratingSession.handleFrontendMessageAsFakeCDPAgent({
-      id: messageId,
-      method: 'Debugger.enable',
-      sessionId,
-    });
-    assert.lengthOf(mockRehydratingConnection.messageQueue, 3);
-    const scriptParsedMessages = mockRehydratingConnection.messageQueue.slice(0, 2);
-    const resultMessage = mockRehydratingConnection.messageQueue.slice(2);
-    for (const scriptParsedMessage of scriptParsedMessages) {
-      assert.strictEqual(scriptParsedMessage.method, 'Debugger.scriptParsed');
-      assert.strictEqual((scriptParsedMessage.params as RehydratingScript).isolate, target.isolate);
-    }
-    assert.isNotNull(resultMessage[0]);
-    assert.strictEqual(resultMessage[0].id, messageId);
-    assert.isNotNull((resultMessage[0].result as Protocol.Debugger.EnableResponse).debuggerId);
-  });
-
   it('sends execution context created while handling runtime enable', async function() {
     mockRehydratingConnection.clearMessageQueue();
     mockRehydratingSession.handleFrontendMessageAsFakeCDPAgent({

front_end/core/sdk/RehydratingConnection.ts

@@ -32,8 +32,8 @@ import * as Root from '../root/root.js';
 
 import * as EnhancedTraces from './EnhancedTracesParser.js';
 import type {
-  ProtocolMessage, RehydratingExecutionContext, RehydratingScript, RehydratingTarget, ServerMessage} from
-  './RehydratingObject.js';
+  ProtocolMessage, RehydratingExecutionContext, RehydratingResource, RehydratingScript, RehydratingTarget,
+  ServerMessage} from './RehydratingObject.js';
 import {TraceObject} from './TraceObject.js';
 
 const UIStrings = {
@@ -157,6 +157,7 @@ export class RehydratingConnection implements ProtocolClient.ConnectionTransport
       const target = hydratingDataPerTarget.target;
       const executionContexts = hydratingDataPerTarget.executionContexts;
       const scripts = hydratingDataPerTarget.scripts;
+      const resources = hydratingDataPerTarget.resources;
       this.postToFrontend({
         method: 'Target.targetCreated',
         params: {
@@ -172,7 +173,7 @@ export class RehydratingConnection implements ProtocolClient.ConnectionTransport
       });
 
       sessionId += 1;
-      const session = new RehydratingSession(sessionId, target, executionContexts, scripts, this);
+      const session = new RehydratingSession(sessionId, target, executionContexts, scripts, resources, this);
       this.sessions.set(sessionId, session);
       session.declareSessionAttachedToTarget();
     }
@@ -267,15 +268,17 @@ export class RehydratingSession extends RehydratingSessionBase {
   target: RehydratingTarget;
   executionContexts: RehydratingExecutionContext[] = [];
   scripts: RehydratingScript[] = [];
+  resources: RehydratingResource[] = [];
 
   constructor(
       sessionId: number, target: RehydratingTarget, executionContexts: RehydratingExecutionContext[],
-      scripts: RehydratingScript[], connection: RehydratingConnectionInterface) {
+      scripts: RehydratingScript[], resources: RehydratingResource[], connection: RehydratingConnectionInterface) {
     super(connection);
     this.sessionId = sessionId;
     this.target = target;
     this.executionContexts = executionContexts;
     this.scripts = scripts;
+    this.resources = resources;
   }
 
   override sendMessageToFrontend(payload: ServerMessage, attachSessionId = true): void {
@@ -294,12 +297,31 @@ export class RehydratingSession extends RehydratingSessionBase {
       case 'Debugger.enable':
         this.handleDebuggerEnable(data.id);
         break;
+      case 'CSS.enable':
+        this.sendMessageToFrontend({
+          id: data.id,
+          result: {},
+        });
+        break;
       case 'Debugger.getScriptSource':
         if (data.params) {
           const params = data.params as Protocol.Debugger.GetScriptSourceRequest;
           this.handleDebuggerGetScriptSource(data.id, params.scriptId);
         }
         break;
+      case 'Page.getResourceTree':
+        this.handleGetResourceTree(data.id);
+        break;
+      case 'Page.getResourceContent': {
+        const request = data.params as unknown as Protocol.Page.GetResourceContentRequest;
+        this.handleGetResourceContent(request.frameId, request.url, data.id);
+        break;
+      }
+      case 'CSS.getStyleSheetText': {
+        const request = data.params as unknown as Protocol.CSS.GetStyleSheetTextRequest;
+        this.handleGetStyleSheetText(request.styleSheetId, data.id);
+        break;
+      }
       default:
         this.sendMessageToFrontend({
           id: data.id,
@@ -368,7 +390,22 @@ export class RehydratingSession extends RehydratingSessionBase {
   // script parsed event to communicate the current script state and respond with a mock
   // debugger id.
   private handleDebuggerEnable(id: number): void {
+    const htmlResourceUrls = new Set(this.resources.filter(r => r.mimeType === 'text/html').map(r => r.url));
+
     for (const script of this.scripts) {
+      // Handle inline scripts.
+      if (htmlResourceUrls.has(script.url)) {
+        script.embedderName = script.url;
+        // We don't have the actual embedded offset from this trace event. Non-zero
+        // values are important though: that is what `Script.isInlineScript()`
+        // checks. Otherwise these scripts would try to show individually within the
+        // Sources panel.
+        script.startColumn = 1;
+        script.startLine = 1;
+        script.endColumn = 1;
+        script.endLine = 1;
+      }
+
       this.sendMessageToFrontend({
         method: 'Debugger.scriptParsed',
         params: script,
@@ -383,4 +420,75 @@ export class RehydratingSession extends RehydratingSessionBase {
       },
     });
   }
+
+  private handleGetResourceTree(id: number): void {
+    const resources = this.resources.filter(r => r.mimeType === 'text/html' || r.mimeType === 'text/css');
+    if (!resources.length) {
+      return;
+    }
+
+    const frameTree = {
+      frame: {
+        id: this.target.targetId,
+        url: this.target.url,
+      },
+      childFrames: [],
+      resources: resources.map(r => ({
+                                 url: r.url,
+                                 type: r.mimeType === 'text/html' ? 'Document' : 'Stylesheet',
+                                 mimeType: r.mimeType,
+                                 contentSize: r.content.length,
+                               })),
+    };
+
+    this.sendMessageToFrontend({
+      id,
+      result: {
+        frameTree,
+      },
+    });
+
+    const stylesheets = this.resources.filter(r => r.mimeType === 'text/css');
+    for (const stylesheet of stylesheets) {
+      this.sendMessageToFrontend({
+        method: 'CSS.styleSheetAdded',
+        params: {
+          header: {
+            styleSheetId: `sheet.${stylesheet.frame}.${stylesheet.url}`,
+            frameId: stylesheet.frame,
+            sourceURL: stylesheet.url,
+          },
+        },
+      });
+    }
+  }
+
+  private handleGetResourceContent(frame: string, url: string, id: number): void {
+    const resource = this.resources.find(r => r.frame === frame && r.url === url);
+    if (!resource) {
+      return;
+    }
+
+    this.sendMessageToFrontend({
+      id,
+      result: {
+        content: resource.content,
+        base64Encoded: false,
+      },
+    });
+  }
+
+  private handleGetStyleSheetText(stylesheetId: string, id: number): void {
+    const resource = this.resources.find(r => `sheet.${r.frame}.${r.url}` === stylesheetId);
+    if (!resource) {
+      return;
+    }
+
+    this.sendMessageToFrontend({
+      id,
+      result: {
+        text: resource.content,
+      },
+    });
+  }
 }

front_end/core/sdk/RehydratingObject.ts

@@ -14,6 +14,13 @@ export interface RehydratingScript extends Protocol.Debugger.ScriptParsedEvent {
   pid: number;
 }
 
+export interface RehydratingResource {
+  url: string;
+  content: string;
+  frame: string;
+  mimeType: string;
+}
+
 export interface RehydratingExecutionContextAuxData {
   frameId?: Protocol.Page.FrameId;
   isDefault?: boolean;
@@ -39,6 +46,7 @@ export interface HydratingDataPerTarget {
   target: RehydratingTarget;
   executionContexts: RehydratingExecutionContext[];
   scripts: RehydratingScript[];
+  resources: RehydratingResource[];
 }
 
 export interface ProtocolMessage {

front_end/core/sdk/TraceObject.ts

@@ -7,13 +7,17 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {NetworkRequest} from './NetworkRequest.js';
+import type {RehydratingResource} from './RehydratingObject.js';
 import {ResourceTreeModel} from './ResourceTreeModel.js';
 import type {SourceMapV3} from './SourceMap.js';
 
 /** A thin wrapper class, mostly to enable instanceof-based revealing of traces to open in Timeline. **/
 export class TraceObject {
   readonly traceEvents: Protocol.Tracing.DataCollectedEvent['value'];
-  readonly metadata: {sourceMaps?: Array<{sourceMapUrl: string, sourceMap: SourceMapV3, url: string}>};
+  readonly metadata: {
+    sourceMaps?: Array<{sourceMapUrl: string, sourceMap: SourceMapV3, url: string}>,
+    resources?: RehydratingResource[],
+  };
   constructor(payload: Protocol.Tracing.DataCollectedEvent['value']|TraceObject, meta?: Object) {
     if (Array.isArray(payload)) {
       this.traceEvents = payload;