Rehydrated session

This CL supports the launch of the rehydrated session, powered by connection layer previously implemented in both hosted and native mode.

- load the following trace file: https://drive.google.com/file/d/1XuKTJnxpM7HuYnxFhNlYQjAOgbSw9YTX/view?usp=drive_link

Bug: 337909145
Change-Id: Iabaff01007241e3ad05aa464d3de5b572814f734
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5837910
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Robert Paveza <[email protected]>

Author: Jayson Chen

front_end/core/sdk/Connections.ts

@@ -8,6 +8,8 @@ import type * as Platform from '../platform/platform.js';
 import * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
 
+import {RehydratingConnection} from './RehydratingConnection.js';
+
 export class MainConnection implements ProtocolClient.InspectorBackend.Connection {
   onMessage: ((arg0: (Object|string)) => void)|null;
   #onDisconnect: ((arg0: string) => void)|null;
@@ -271,6 +273,9 @@ export async function initMainConnection(
 }
 
 function createMainConnection(websocketConnectionLost: () => void): ProtocolClient.InspectorBackend.Connection {
+  if (Root.Runtime.getPathName().includes('rehydrated_devtools_app')) {
+    return new RehydratingConnection();
+  }
   const wsParam = Root.Runtime.Runtime.queryParam('ws');
   const wssParam = Root.Runtime.Runtime.queryParam('wss');
   if (wsParam || wssParam) {

front_end/core/sdk/EnhancedTracesParser.ts

@@ -12,6 +12,7 @@ import type {
 interface RehydratingTraceBase {
   cat: string;
   pid: number;
+  args: {data: object};
 }
 
 interface TraceEventTargetRundown extends RehydratingTraceBase {
@@ -208,7 +209,8 @@ export class EnhancedTracesParser {
   }
 
   private isTraceEvent(event: unknown): event is RehydratingTraceBase {
-    return 'cat' in (event as RehydratingTraceBase) && 'pid' in (event as RehydratingTraceBase);
+    return 'cat' in (event as RehydratingTraceBase) && 'pid' in (event as RehydratingTraceBase) &&
+        'args' in (event as RehydratingTraceBase) && 'data' in (event as RehydratingTraceBase).args;
   }
 
   private isTargetRundownEvent(event: unknown): event is TraceEventTargetRundown {

front_end/core/sdk/RehydratingConnection.ts

@@ -23,20 +23,31 @@
  *
  */
 
+import * as Common from '../../core/common/common.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as i18n from '../i18n/i18n.js';
+import {UserVisibleError} from '../platform/platform.js';
 import type * as ProtocolClient from '../protocol_client/protocol_client.js';
 
 import * as EnhancedTraces from './EnhancedTracesParser.js';
 import type {
   ProtocolMessage, RehydratingExecutionContext, RehydratingScript, RehydratingTarget, ServerMessage} from
   './RehydratingObject.js';
+import {TraceObject} from './TraceObject.js';
 
 const UIStrings = {
   /**
    * @description Text that appears when no source text is available for the given script
    */
   noSourceText: 'No source text available',
+  /**
+   * @description Text to indicate rehydrating connection cannot find host window
+   */
+  noHostWindow: 'Can not find host window',
+  /**
+   * @description Text to indicate that there is an error loading the log
+   */
+  errorLoadingLog: 'Error loading log',
 };
 const str_ = i18n.i18n.registerUIStrings('core/sdk/RehydratingConnection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -57,16 +68,40 @@ export class RehydratingConnection implements ProtocolClient.InspectorBackend.Co
   onMessage: ((arg0: Object) => void)|null = null;
   traceEvents: unknown[] = [];
   sessions: Map<number, RehydratingSessionBase> = new Map();
-  private static rehydratingConnectionInstance: RehydratingConnection|null = null;
+  #rehydratingWindow: Window&typeof globalThis;
+  #onReceiveHostWindowPayloadBound = this.#onReceiveHostWindowPayload.bind(this);
 
-  private constructor() {
+  constructor() {
+    // If we're invoking this class, we're in the rehydrating pop-up window. Rename window for clarity.
+    this.#rehydratingWindow = window;
+    this.#setupMessagePassing();
   }
 
-  static instance(): RehydratingConnection {
-    if (!this.rehydratingConnectionInstance) {
-      this.rehydratingConnectionInstance = new RehydratingConnection();
+  #setupMessagePassing(): void {
+    this.#rehydratingWindow.addEventListener('message', this.#onReceiveHostWindowPayloadBound);
+    if (!this.#rehydratingWindow.opener) {
+      throw new UserVisibleError.UserVisibleError(i18nString(UIStrings.noHostWindow));
     }
-    return this.rehydratingConnectionInstance;
+    this.#rehydratingWindow.opener.postMessage({type: 'REHYDRATING_WINDOW_READY'});
+  }
+
+  /**
+   * This is a callback for rehydrated session to receive payload from host window. Payload includes but not limited to
+   * the trace event and all necessary data to power a rehydrated session.
+   */
+  #onReceiveHostWindowPayload(event: MessageEvent): void {
+    if (event.data.type === 'REHYDRATING_TRACE_FILE') {
+      const {traceFile} = event.data;
+      const reader = new FileReader();
+      reader.onload = async(): Promise<void> => {
+        await this.startHydration(reader.result as string);
+      };
+      reader.onerror = (): void => {
+        throw new UserVisibleError.UserVisibleError(i18nString(UIStrings.errorLoadingLog));
+      };
+      reader.readAsText(traceFile);
+    }
+    this.#rehydratingWindow.removeEventListener('message', this.#onReceiveHostWindowPayloadBound);
   }
 
   async startHydration(logPayload: string): Promise<boolean> {
@@ -109,10 +144,17 @@ export class RehydratingConnection implements ProtocolClient.InspectorBackend.Co
       sessionId += 1;
       this.sessions.set(sessionId, new RehydratingSession(sessionId, target, executionContexts, scripts, this));
     }
-    this.rehydratingConnectionState = RehydratingConnectionState.REHYDRATED;
+    await this.#onRehydrated();
     return true;
   }
 
+  async #onRehydrated(): Promise<void> {
+    this.rehydratingConnectionState = RehydratingConnectionState.REHYDRATED;
+    // Use revealer to load trace into performance panel
+    const trace = new TraceObject(this.traceEvents);
+    await Common.Revealer.reveal(trace);
+  }
+
   setOnMessage(onMessage: (arg0: (Object|string)) => void): void {
     this.onMessage = onMessage;
     this.rehydratingConnectionState = RehydratingConnectionState.INITIALIZED;

front_end/models/trace/types/File.ts

@@ -189,8 +189,8 @@ export interface MetaData {
   cpuThrottling?: number;
   hardwareConcurrency?: number;
   dataOrigin?: DataOrigin;
-  modifications?: Modifications;
   enhancedTraceVersion?: number;
+  modifications?: Modifications;
   cruxFieldData?: CrUXManager.PageResult[];
 }
 

front_end/panels/timeline/TimelinePanel.ts

@@ -1393,11 +1393,44 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (this.state !== State.IDLE) {
       return;
     }
-    this.prepareToLoadTimeline();
-    this.loader = await TimelineLoader.loadFromFile(file, this);
+    const maximumTraceFileLengthToDetermineEnhancedTraces = 5000;
+    // We are expecting to locate the enhanced traces version within the first 5000
+    // characters of the trace file if the given trace file is enhanced traces.
+    // Doing so can avoid serializing the whole trace while needing to serialize
+    // it again in rehydrated session for enhanced traces.
+    const blob = file.slice(0, maximumTraceFileLengthToDetermineEnhancedTraces);
+    const content = await blob.text();
+    if (content.includes('enhancedTraceVersion')) {
+      await window.scheduler?.postTask(() => {
+        this.#launchRehydratedSession(file);
+      }, {priority: 'background'});
+    } else {
+      this.loader = await TimelineLoader.loadFromFile(file, this);
+      this.prepareToLoadTimeline();
+    }
     this.createFileSelector();
   }
 
+  #launchRehydratedSession(file: File): void {
+    let rehydratingWindow: Window|null = null;
+    let pathToLaunch: string|null = null;
+    const url = new URL(window.location.href);
+    const pathToEntrypoint = url.pathname.slice(0, url.pathname.lastIndexOf('/'));
+    url.pathname = `${pathToEntrypoint}/rehydrated_devtools_app.html`;
+    pathToLaunch = url.toString();
+
+    // Clarifying the window the code is referring to
+    const hostWindow = window;
+    function onMessageHandler(ev: MessageEvent): void {
+      if (url && ev.data && ev.data.type === 'REHYDRATING_WINDOW_READY') {
+        rehydratingWindow?.postMessage({type: 'REHYDRATING_TRACE_FILE', traceFile: file}, url.origin);
+      }
+      hostWindow.removeEventListener('message', onMessageHandler);
+    }
+    hostWindow.addEventListener('message', onMessageHandler);
+    rehydratingWindow = hostWindow.open(pathToLaunch, /* target: */ undefined, 'noopener=false,popup=true');
+  }
+
   async loadFromURL(url: Platform.DevToolsPath.UrlString): Promise<void> {
     if (this.state !== State.IDLE) {
       return;