[RPP] Support loading compressed enhanced traces

Bug: 432043263
Change-Id: Id5bacaa55e6b32d06b8eb4e8a19e1a4321bbb6f9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6761382
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/core/sdk/RehydratingConnection.ts

@@ -93,34 +93,33 @@ export class RehydratingConnection implements ProtocolClient.InspectorBackend.Co
    */
   #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 => {
+      const traceJson = event.data.traceJson as string;
+      let trace;
+      try {
+        trace = JSON.parse(traceJson) as TraceFile;
+      } catch {
         this.#onConnectionLost(i18nString(UIStrings.errorLoadingLog));
-      };
-      reader.readAsText(traceFile);
+        return;
+      }
+      void this.startHydration(trace);
     }
     this.#rehydratingWindow.removeEventListener('message', this.#onReceiveHostWindowPayloadBound);
   }
 
-  async startHydration(logPayload: string): Promise<boolean> {
+  async startHydration(trace: TraceFile): Promise<boolean> {
     // OnMessage should've been set before hydration, and the connection should
     // be initialized and not hydrated already.
     if (!this.onMessage || this.rehydratingConnectionState !== RehydratingConnectionState.INITIALIZED) {
       return false;
     }
 
-    const payload = JSON.parse(logPayload) as TraceFile;
-    if (!('traceEvents' in payload)) {
+    if (!('traceEvents' in trace)) {
       console.error('RehydratingConnection failed to initialize due to missing trace events in payload');
       return false;
     }
 
-    this.trace = payload;
-    const enhancedTracesParser = new EnhancedTraces.EnhancedTracesParser(payload);
+    this.trace = trace;
+    const enhancedTracesParser = new EnhancedTraces.EnhancedTracesParser(trace);
     const hydratingData = enhancedTracesParser.data();
 
     let sessionId = 0;

front_end/panels/timeline/TimelineLoader.ts

@@ -76,6 +76,24 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     return loader;
   }
 
+  static loadFromParsedJsonFile(contents: ParsedJSONFile, client: Client): TimelineLoader {
+    const loader = new TimelineLoader(client);
+
+    window.setTimeout(async () => {
+      client.loadingStarted();
+      try {
+        loader.#processParsedFile(contents);
+        await loader.close();
+      } catch (e: unknown) {
+        await loader.close();
+        const message = e instanceof Error ? e.message : '';
+        return loader.reportErrorAndCancelLoading(i18nString(UIStrings.malformedTimelineDataS, {PH1: message}));
+      }
+    });
+
+    return loader;
+  }
+
   static loadFromEvents(events: Trace.Types.Events.Event[], client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
     window.setTimeout(async () => {

front_end/panels/timeline/TimelinePanel.ts

@@ -1538,25 +1538,20 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (this.state !== State.IDLE) {
       return;
     }
-    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();
+
+    const content = await Common.Gzip.fileToString(file);
     if (content.includes('enhancedTraceVersion')) {
       await window.scheduler.postTask(() => {
-        this.#launchRehydratedSession(file);
+        this.#launchRehydratedSession(content);
       }, {priority: 'background'});
     } else {
-      this.loader = await TimelineLoader.loadFromFile(file, this);
+      this.loader = TimelineLoader.loadFromParsedJsonFile(JSON.parse(content), this);
       this.prepareToLoadTimeline();
     }
     this.createFileSelector();
   }
 
-  #launchRehydratedSession(file: File): void {
+  #launchRehydratedSession(traceJson: string): void {
     let rehydratingWindow: Window|null = null;
     let pathToLaunch: string|null = null;
     const url = new URL(window.location.href);
@@ -1568,7 +1563,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     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);
+        rehydratingWindow?.postMessage({type: 'REHYDRATING_TRACE_FILE', traceJson}, url.origin);
       }
       hostWindow.removeEventListener('message', onMessageHandler);
     }