report: add options onPrintOverride and onSaveFileOverride (#13529)

flow-report/src/topbar.tsx

@@ -16,7 +16,7 @@ import {saveFile} from '../../report/renderer/api';
 
 function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
-  const filename = getFlowResultFilenamePrefix(flowResult);
+  const filename = getFlowResultFilenamePrefix(flowResult) + '.html';
   saveFile(blob, filename);
 }
 

flow-report/test/topbar-test.tsx

@@ -56,7 +56,7 @@ it('save button opens save dialog for HTML file', async () => {
 
   expect(mockSaveFile).toHaveBeenCalledWith(
     expect.any(Blob),
-    'User-flow_2021-09-14_22-24-22'
+    'User-flow_2021-09-14_22-24-22.html'
   );
 });
 

report/renderer/dom.js

@@ -293,10 +293,8 @@ export class DOM {
    * @param {string} filename
    */
   saveFile(blob, filename) {
-    const ext = blob.type.match('json') ? '.json' : '.html';
-
     const a = this.createElement('a');
-    a.download = `${filename}${ext}`;
+    a.download = filename;
     this.safelySetBlobHref(a, blob);
     this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
     a.click();

report/renderer/report-ui-features.js

@@ -345,13 +345,15 @@ export class ReportUIFeatures {
   }
 
   /**
-   * DevTools uses its own file manager to download files, so it redefines this function.
-   * Wrapper is necessary so DevTools can still override this function.
-   *
    * @param {Blob|File} blob
    */
   _saveFile(blob) {
-    const filename = getLhrFilenamePrefix(this.json);
-    this._dom.saveFile(blob, filename);
+    const ext = blob.type.match('json') ? '.json' : '.html';
+    const filename = getLhrFilenamePrefix(this.json) + ext;
+    if (this._opts.onSaveFileOverride) {
+      this._opts.onSaveFileOverride(blob, filename);
+    } else {
+      this._dom.saveFile(blob, filename);
+    }
   }
 }

report/renderer/topbar-features.js

@@ -199,7 +199,11 @@ export class TopbarFeatures {
   }
 
   _print() {
-    self.print();
+    if (this._reportUIFeatures._opts.onPrintOverride) {
+      this._reportUIFeatures._opts.onPrintOverride(this._dom.rootEl);
+    } else {
+      self.print();
+    }
   }
 
   /**

report/types/report-renderer.d.ts

@@ -35,6 +35,10 @@ declare module Renderer {
     onPageAnchorRendered?: (link: HTMLAnchorElement) => void;
     /** If defined, `Save as HTML` option is shown in dropdown menu. */
     getStandaloneReportHTML?: () => string;
+    /** If defined, renderer will call this instead of `self.print()` */
+    onPrintOverride?: (rootEl: HTMLElement) => Promise<void>;
+    /** If defined, renderer will call this instead of using a `<a download>.click()>` to trigger a JSON/HTML download. Blob will be either json or html. */
+    onSaveFileOverride?: (blob: Blob, suggestedFilename: string) => Promise<void>;
     /**
      * If defined, adds a `View Trace` button to the report, and calls this callback when clicked.
      * The callback should do something to present the user with a visualization of the trace