[RPP] Show progress bar when downloading trace

Preparing the trace for download can take awhile. This CL shows the
status dialog as the trace is being prepared for download, including a
progress bar to track the compression stage.

Bug: 457771800
Bypass-Check-License: I didn't add a new license comment.
Change-Id: Ie6a28b8331a6a44555120558a478266d737e83ff
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7268421
Auto-Submit: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>

Author: Connor Clark

front_end/core/common/Gzip.ts

@@ -68,7 +68,22 @@ export function decompressStream(stream: ReadableStream): ReadableStream {
   const ds = new DecompressionStream('gzip');
   return stream.pipeThrough(ds);
 }
+
 export function compressStream(stream: ReadableStream): ReadableStream {
   const cs = new CompressionStream('gzip');
   return stream.pipeThrough(cs);
 }
+
+export function createMonitoredStream(stream: ReadableStream, onProgress: (bytesRead: number) => void): ReadableStream {
+  let bytesRead = 0;
+
+  const progressTransformer = new TransformStream({
+    transform(chunk, controller) {
+      bytesRead += chunk.byteLength;
+      onProgress(bytesRead);
+      controller.enqueue(chunk);
+    }
+  });
+
+  return stream.pipeThrough(progressTransformer);
+}

front_end/panels/timeline/StatusDialog.ts

@@ -145,14 +145,15 @@ export class StatusDialog extends UI.Widget.VBox {
   }
 
   remove(): void {
-    (this.element.parentNode as HTMLElement)?.classList.remove('tinted');
+    (this.element.parentNode as HTMLElement)?.classList.remove('opaque', 'tinted');
     this.stopTimer();
     this.element.remove();
   }
 
-  showPane(parent: Element): void {
+  showPane(parent: Element, mode: 'tinted'|'opaque' = 'opaque'): void {
     this.show(parent);
-    parent.classList.add('tinted');
+    parent.classList.toggle('tinted', mode === 'tinted');
+    parent.classList.toggle('opaque', mode === 'opaque');
   }
 
   enableAndFocusButton(): void {

front_end/panels/timeline/TimelinePanel.ts

@@ -232,6 +232,18 @@ const UIStrings = {
    * @description Text in Timeline Panel of the Performance panel
    */
   initializingTracing: 'Initializing tracing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  preparingTraceForDownload: 'Preparing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  compressingTraceForDownload: 'Compressing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  encodingTraceForDownload: 'Encoding…',
   /**
    * @description Tooltip description for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
    */
@@ -1455,6 +1467,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       this.#showExportTraceErrorDialog(error);
+    } finally {
+      this.statusDialog?.remove();
+      this.statusDialog = null;
     }
   }
 
@@ -1464,6 +1479,24 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     addModifications: boolean,
     shouldCompress: boolean,
   }): Promise<void> {
+    this.statusDialog = new StatusDialog(
+        {
+          hideStopButton: true,
+          showProgress: true,
+        },
+        async () => {
+          this.statusDialog?.remove();
+          this.statusDialog = null;
+        });
+    this.statusDialog.showPane(this.statusPaneContainer, 'tinted');
+    this.statusDialog.updateStatus(i18nString(UIStrings.preparingTraceForDownload));
+    this.statusDialog.updateProgressBar(i18nString(UIStrings.preparingTraceForDownload), 0);
+    this.statusDialog.requestUpdate();
+    await this.statusDialog.updateComplete;
+    // Not sure why the above isn't sufficient.
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
     // Base the filename on the trace's time of recording
     const isoDate =
         Platform.DateUtilities.toISO8601Compact(metadata.startTime ? new Date(metadata.startTime) : new Date());
@@ -1499,8 +1532,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     let blob = new Blob(blobParts, {type: 'application/json'});
 
     if (config.shouldCompress) {
+      this.statusDialog.updateStatus(i18nString(UIStrings.compressingTraceForDownload));
+      this.statusDialog.updateProgressBar(i18nString(UIStrings.compressingTraceForDownload), 0);
+
       fileName = `${fileName}.gz` as Platform.DevToolsPath.RawPathString;
-      const gzStream = Common.Gzip.compressStream(blob.stream());
+      const inputSize = blob.size;
+      const monitoredStream = Common.Gzip.createMonitoredStream(blob.stream(), bytesRead => {
+        this.statusDialog?.updateProgressBar(
+            i18nString(UIStrings.compressingTraceForDownload), bytesRead / inputSize * 100);
+      });
+      const gzStream = Common.Gzip.compressStream(monitoredStream);
       blob = await new Response(gzStream, {
                headers: {'Content-Type': 'application/gzip'},
              }).blob();
@@ -1515,9 +1556,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     try {
       // The maximum string length in v8 is `2 ** 29 - 23`, aka 538 MB.
       // If the gzipped&base64-encoded trace is larger than that, this'll throw a RangeError.
+      this.statusDialog.updateStatus(i18nString(UIStrings.encodingTraceForDownload));
+      this.statusDialog.updateProgressBar(i18nString(UIStrings.encodingTraceForDownload), 100);
       bytesAsB64 = await Common.Base64.encode(blob);
     } catch {
     }
+
     if (bytesAsB64?.length) {
       const contentData = new TextUtils.ContentData.ContentData(bytesAsB64, /* isBase64=*/ true, blob.type);
       await Workspace.FileManager.FileManager.instance().save(fileName, contentData, /* forceSaveAs=*/ true);
@@ -1531,6 +1575,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       a.click();
       URL.revokeObjectURL(url);
     }
+
+    this.statusDialog.remove();
+    this.statusDialog = null;
   }
 
   async handleSaveToFileAction(): Promise<void> {

front_end/panels/timeline/timelinePanel.css

@@ -90,11 +90,18 @@
   pointer-events: none;
 }
 
-.timeline.panel .status-pane-container.tinted {
+.timeline.panel .status-pane-container.opaque {
   background-color: var(--sys-color-cdt-base-container);
   pointer-events: auto;
 }
 
+.timeline.panel .status-pane-container.tinted {
+  /* stylelint-disable-next-line plugin/use_theme_colors */
+  background-color: #0005;
+  background-blend-mode: multiply;
+  pointer-events: auto;
+}
+
 .timeline-landing-page.legacy > div > p {
   flex: none;
   white-space: pre-line;