From 9a49a607acc4cc082a4ccc94ea9ae3ba898b6c09 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Wed, 13 Oct 2021 14:24:26 -0400
Subject: [PATCH 01/19] start

---
 build/build-viewer.js                         | 10 +++++
 .../assets/standalone-flow-template.html      |  1 -
 flow-report/render-flow.js                    | 17 ++++++++
 flow-report/src/app.tsx                       |  2 +
 flow-report/src/wrappers/report-renderer.tsx  |  4 +-
 flow-report/src/wrappers/styles.tsx           | 26 +++++++++++++
 lighthouse-viewer/app/index.html              |  2 +-
 .../app/src/lighthouse-report-viewer.js       | 37 ++++++++++++++++--
 lighthouse-viewer/tsconfig.json               |  3 +-
 lighthouse-viewer/types/viewer.d.ts           |  2 +
 package.json                                  |  1 +
 report/generator/report-generator.js          |  1 -
 report/renderer/report-renderer.js            | 11 +++++-
 yarn.lock                                     | 39 ++++++++++++++++---
 14 files changed, 139 insertions(+), 17 deletions(-)
 create mode 100644 flow-report/render-flow.js
 create mode 100644 flow-report/src/wrappers/styles.tsx

diff --git a/build/build-viewer.js b/build/build-viewer.js
index 28ecaa1bb15b..5a94b264f57c 100644
--- a/build/build-viewer.js
+++ b/build/build-viewer.js
@@ -45,11 +45,21 @@ async function run() {
     html: {path: 'index.html'},
     stylesheets: [
       {path: 'styles/*'},
+      {path: '../../flow-report/assets/styles.css'},
     ],
     javascripts: [
       await generatorJsPromise,
       {path: require.resolve('pako/dist/pako_inflate.js')},
       {path: 'src/main.js', rollup: true, rollupPlugins: [
+        rollupPlugins.typescript({
+          tsconfig: 'flow-report/tsconfig.json',
+          // Plugin struggles with custom outDir, so revert it from tsconfig value
+          // as well as any options that require an outDir is set.
+          outDir: null,
+          composite: false,
+          emitDeclarationOnly: false,
+          declarationMap: false,
+        }),
         rollupPlugins.replace({
           // Default delimiters are word boundraries. Setting them to nothing (empty strings)
           // makes this plugin replace any subtring found.
diff --git a/flow-report/assets/standalone-flow-template.html b/flow-report/assets/standalone-flow-template.html
index 7b72f95fc9b1..b8d7d6df0365 100644
--- a/flow-report/assets/standalone-flow-template.html
+++ b/flow-report/assets/standalone-flow-template.html
@@ -21,7 +21,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
   <title>Lighthouse Flow Report</title>
-  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
   <style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
 </head>
 <body class="flow-vars lh-root lh-vars">
diff --git a/flow-report/render-flow.js b/flow-report/render-flow.js
new file mode 100644
index 000000000000..b5ad5b622ba6
--- /dev/null
+++ b/flow-report/render-flow.js
@@ -0,0 +1,17 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {render, h} from 'preact';
+
+import {App} from './src/app';
+
+/**
+ * @param {LH.FlowResult} flowResult
+ * @param {HTMLElement} container
+ */
+export default function renderFlow(flowResult, container) {
+  render(h(App, {flowResult}), container);
+}
diff --git a/flow-report/src/app.tsx b/flow-report/src/app.tsx
index 280caadc540f..66c690be7008 100644
--- a/flow-report/src/app.tsx
+++ b/flow-report/src/app.tsx
@@ -15,6 +15,7 @@ import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
+import {Styles} from './wrappers/styles';
 
 const Content: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
@@ -54,6 +55,7 @@ export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
         <I18nProvider>
+          <Styles/>
           <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
             <Topbar onMenuClick={() => setCollapsed(c => !c)} />
             <Sidebar/>
diff --git a/flow-report/src/wrappers/report-renderer.tsx b/flow-report/src/wrappers/report-renderer.tsx
index 63a60e961d37..08fb939fcdcd 100644
--- a/flow-report/src/wrappers/report-renderer.tsx
+++ b/flow-report/src/wrappers/report-renderer.tsx
@@ -32,7 +32,9 @@ export const ReportRendererProvider: FunctionComponent = ({children}) => {
     const dom = new DOM(document);
     const detailsRenderer = new DetailsRenderer(dom);
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-    const reportRenderer = new ReportRenderer(dom);
+    const reportRenderer = new ReportRenderer(dom, {
+      disableGlobalStyles: true,
+    });
     return {
       dom,
       detailsRenderer,
diff --git a/flow-report/src/wrappers/styles.tsx b/flow-report/src/wrappers/styles.tsx
new file mode 100644
index 000000000000..f3bf565a1028
--- /dev/null
+++ b/flow-report/src/wrappers/styles.tsx
@@ -0,0 +1,26 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {FunctionComponent} from 'preact';
+import {useLayoutEffect, useRef} from 'preact/hooks';
+
+import {useReportRenderer} from './report-renderer';
+
+export const Styles: FunctionComponent = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const {dom} = useReportRenderer();
+
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+    const styles = dom.createComponent('styles');
+    ref.current.appendChild(styles);
+    return () => {
+      if (ref.current) ref.current.innerHTML = '';
+    };
+  }, []);
+
+  return <div ref={ref}/>;
+};
diff --git a/lighthouse-viewer/app/index.html b/lighthouse-viewer/app/index.html
index 3cf83009ad3f..2bdfaa8f2beb 100644
--- a/lighthouse-viewer/app/index.html
+++ b/lighthouse-viewer/app/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="styles/bundled.css">
   <link rel="canonical" href="https://googlechrome.github.io/lighthouse/viewer/">
 </head>
-<body class="lh-root lh-vars">
+<body class="flow-vars lh-root lh-vars">
 
 <div class="drop_zone"></div>
 
diff --git a/lighthouse-viewer/app/src/lighthouse-report-viewer.js b/lighthouse-viewer/app/src/lighthouse-report-viewer.js
index 1c94f3eea1e6..27228a1d79ed 100644
--- a/lighthouse-viewer/app/src/lighthouse-report-viewer.js
+++ b/lighthouse-viewer/app/src/lighthouse-report-viewer.js
@@ -14,6 +14,7 @@ import {ViewerUIFeatures} from './viewer-ui-features.js';
 import {DOM} from '../../../report/renderer/dom.js';
 import {ReportRenderer} from '../../../report/renderer/report-renderer.js';
 import {TextEncoding} from '../../../report/renderer/text-encoding.js';
+import renderFlow from '../../../flow-report/render-flow.js';
 
 /* global logger */
 
@@ -189,13 +190,18 @@ export class LighthouseReportViewer {
     }
   }
 
+  /**
+   * @param {LH.Result | LH.FlowResult} json
+   * @return {json is LH.FlowResult}
+   */
+  _isFlowReport(json) {
+    return 'steps' in json && Array.isArray(json.steps);
+  }
+
   /**
    * @param {LH.Result} json
-   * @private
    */
-  // TODO: Really, `json` should really have type `unknown` and
-  // we can have _validateReportJson verify that it's an LH.Result
-  _replaceReportHtml(json) {
+  _renderLhr(json) {
     // Allow users to view the runnerResult
     if ('lhr' in json) {
       const runnerResult = /** @type {{lhr: LH.Result}} */ (/** @type {unknown} */ (json));
@@ -254,6 +260,29 @@ export class LighthouseReportViewer {
     } finally {
       this._reportIsFromGist = this._reportIsFromPSI = this._reportIsFromJSON = false;
     }
+  }
+
+  /**
+   * @param {LH.FlowResult} json
+   */
+  _renderFlowResult(json) {
+    const container = find('main', document);
+    renderFlow(json, container);
+  }
+
+  /**
+   * @param {LH.Result | LH.FlowResult} json
+   * @private
+   */
+  // TODO: Really, `json` should really have type `unknown` and
+  // we can have _validateReportJson verify that it's an LH.Result
+  _replaceReportHtml(json) {
+    if (this._isFlowReport(json)) {
+      this._renderFlowResult(json);
+    } else {
+      console.log('######');
+      this._renderLhr(json);
+    }
 
     // Remove the placeholder UI once the user has loaded a report.
     const placeholder = document.querySelector('.viewer-placeholder');
diff --git a/lighthouse-viewer/tsconfig.json b/lighthouse-viewer/tsconfig.json
index 926844a0d556..ad5fb6bca75b 100644
--- a/lighthouse-viewer/tsconfig.json
+++ b/lighthouse-viewer/tsconfig.json
@@ -10,7 +10,8 @@
   },
   "references": [
     {"path": "../types/lhr/"},
-    {"path": "../report/"}
+    {"path": "../report/"},
+    {"path": "../flow-report/"}
   ],
   "include": [
     "app/src/**/*.js",
diff --git a/lighthouse-viewer/types/viewer.d.ts b/lighthouse-viewer/types/viewer.d.ts
index 45255d5e8137..8618b3adfcf1 100644
--- a/lighthouse-viewer/types/viewer.d.ts
+++ b/lighthouse-viewer/types/viewer.d.ts
@@ -15,6 +15,8 @@ import '../../report/types/augment-dom';
 // Import for LH globals needed for report files.
 import '../../report/types/html-renderer';
 
+import '../../flow-report/types/flow-report';
+
 declare global {
   var ReportGenerator: typeof _ReportGenerator;
   var logger: _Logger;
diff --git a/package.json b/package.json
index 2ac8a4ae8ba0..394b9647b065 100644
--- a/package.json
+++ b/package.json
@@ -174,6 +174,7 @@
     "tabulator-tables": "^4.9.3",
     "terser": "^5.3.8",
     "ts-jest": "^27.0.4",
+    "tsify": "^5.0.4",
     "typed-query-selector": "^2.4.0",
     "typescript": "4.4.3",
     "wait-for-expect": "^3.0.2",
diff --git a/report/generator/report-generator.js b/report/generator/report-generator.js
index ee5bff09709a..ae6737648095 100644
--- a/report/generator/report-generator.js
+++ b/report/generator/report-generator.js
@@ -70,7 +70,6 @@ class ReportGenerator {
       {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: htmlReportAssets.FLOW_REPORT_JAVASCRIPT},
       {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: htmlReportAssets.FLOW_REPORT_CSS},
-      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
       /* eslint-enable max-len */
     ]);
   }
diff --git a/report/renderer/report-renderer.js b/report/renderer/report-renderer.js
index 1282d11af2a2..579f389f2c55 100644
--- a/report/renderer/report-renderer.js
+++ b/report/renderer/report-renderer.js
@@ -20,6 +20,7 @@
 'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
+/** @typedef {{disableGlobalStyles?: boolean}} Options */
 
 import {CategoryRenderer} from './category-renderer.js';
 import {DetailsRenderer} from './details-renderer.js';
@@ -29,11 +30,15 @@ import {PerformanceCategoryRenderer} from './performance-category-renderer.js';
 import {PwaCategoryRenderer} from './pwa-category-renderer.js';
 import {Util} from './util.js';
 
+
 export class ReportRenderer {
   /**
    * @param {DOM} dom
+   * @param {Options=} options
    */
-  constructor(dom) {
+  constructor(dom, options) {
+    /** @type {Options|undefined} */
+    this.options = options;
     /** @type {DOM} */
     this._dom = dom;
   }
@@ -276,7 +281,9 @@ export class ReportRenderer {
     }
 
     const reportFragment = this._dom.createFragment();
-    reportFragment.append(this._dom.createComponent('styles'));
+    if (!this.options || !this.options.disableGlobalStyles) {
+      reportFragment.append(this._dom.createComponent('styles'));
+    }
     const topbarDocumentFragment = this._renderReportTopbar(report);
 
     reportFragment.appendChild(topbarDocumentFragment);
diff --git a/yarn.lock b/yarn.lock
index 5edfc820dca8..598bb24c6ad1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1974,6 +1974,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+any-promise@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
+
 anymatch@^3.0.3:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -8188,7 +8193,7 @@ semver@7.x, semver@^7.2.1, semver@^7.3.2, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.0, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -8673,16 +8678,16 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 strip-outer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
@@ -9035,6 +9040,28 @@ tsconfig-paths@^3.11.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tsconfig@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-5.0.3.tgz#5f4278e701800967a8fc383fd19648878f2a6e3a"
+  integrity sha1-X0J45wGACWeo/Dg/0ZZIh48qbjo=
+  dependencies:
+    any-promise "^1.3.0"
+    parse-json "^2.2.0"
+    strip-bom "^2.0.0"
+    strip-json-comments "^2.0.0"
+
+tsify@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/tsify/-/tsify-5.0.4.tgz#22163648d04c0c90bdb15704fb14947df2328547"
+  integrity sha512-XAZtQ5OMPsJFclkZ9xMZWkSNyMhMxEPsz3D2zu79yoKorH9j/DT4xCloJeXk5+cDhosEibu4bseMVjyPOAyLJA==
+  dependencies:
+    convert-source-map "^1.1.0"
+    fs.realpath "^1.0.0"
+    object-assign "^4.1.0"
+    semver "^6.1.0"
+    through2 "^2.0.0"
+    tsconfig "^5.0.3"
+
 tslib@^1.8.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"

From 6f168fb3490889c020d4bf7de472e84a2195883c Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Thu, 18 Nov 2021 15:21:56 -0500
Subject: [PATCH 02/19] rm consloe

---
 viewer/app/src/lighthouse-report-viewer.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index f43348cc3fc3..4d5d02114c77 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -281,7 +281,6 @@ export class LighthouseReportViewer {
     if (this._isFlowReport(json)) {
       this._renderFlowResult(json);
     } else {
-      console.log('######');
       this._renderLhr(json);
     }
 

From 80d1431b804ab7a24fb5bfe0c0c7d77e7631e611 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Thu, 18 Nov 2021 15:31:53 -0500
Subject: [PATCH 03/19] api

---
 flow-report/{render-flow.js => api.js}     | 2 +-
 viewer/app/src/lighthouse-report-viewer.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename flow-report/{render-flow.js => api.js} (92%)

diff --git a/flow-report/render-flow.js b/flow-report/api.js
similarity index 92%
rename from flow-report/render-flow.js
rename to flow-report/api.js
index b5ad5b622ba6..ec54aa4c79be 100644
--- a/flow-report/render-flow.js
+++ b/flow-report/api.js
@@ -12,6 +12,6 @@ import {App} from './src/app';
  * @param {LH.FlowResult} flowResult
  * @param {HTMLElement} container
  */
-export default function renderFlow(flowResult, container) {
+export function renderFlowReport(flowResult, container) {
   render(h(App, {flowResult}), container);
 }
diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 4d5d02114c77..5381a29f4650 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -14,7 +14,7 @@ import {ViewerUIFeatures} from './viewer-ui-features.js';
 import {DOM} from '../../../report/renderer/dom.js';
 import {ReportRenderer} from '../../../report/renderer/report-renderer.js';
 import {TextEncoding} from '../../../report/renderer/text-encoding.js';
-import renderFlow from '../../../flow-report/render-flow.js';
+import {renderFlowReport} from '../../../flow-report/api.js';
 
 /* global logger */
 
@@ -268,7 +268,7 @@ export class LighthouseReportViewer {
    */
   _renderFlowResult(json) {
     const container = find('main', document);
-    renderFlow(json, container);
+    renderFlowReport(json, container);
   }
 
   /**

From 031a7b245e9d47bbb2fe61325bed0e1361328258 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Thu, 18 Nov 2021 20:53:38 -0500
Subject: [PATCH 04/19] yeet

---
 build/gh-pages-app.js | 1 +
 viewer/app/index.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/build/gh-pages-app.js b/build/gh-pages-app.js
index fd0de19b7305..9bbc459f7806 100644
--- a/build/gh-pages-app.js
+++ b/build/gh-pages-app.js
@@ -153,6 +153,7 @@ class GhPagesApp {
     ];
     if (!process.env.DEBUG) plugins.push(rollupPlugins.terser());
     const bundle = await rollup.rollup({
+      preserveEntrySignatures: 'strict',
       input,
       plugins,
     });
diff --git a/viewer/app/index.html b/viewer/app/index.html
index b8a058f625c7..29015bb1ed33 100644
--- a/viewer/app/index.html
+++ b/viewer/app/index.html
@@ -43,7 +43,7 @@ <h1 class="viewer-placeholder__heading">Lighthouse Report Viewer</h1>
 
 <input id="hidden-file-input" type="file" hidden accept="application/json">
 
-<script src="src/bundled.js"></script>
+<script src="src/bundled.js" type="module"></script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

From bc498218f3faf336c9275997d20624989b8a733d Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Thu, 18 Nov 2021 21:32:21 -0500
Subject: [PATCH 05/19] shim

---
 build/build-viewer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/build/build-viewer.js b/build/build-viewer.js
index 4a0eee42634c..133292756f22 100644
--- a/build/build-viewer.js
+++ b/build/build-viewer.js
@@ -43,6 +43,9 @@ async function run() {
       await generatorJsPromise,
       {path: require.resolve('pako/dist/pako_inflate.js')},
       {path: 'src/main.js', rollup: true, rollupPlugins: [
+        rollupPlugins.shim({
+          './locales.js': 'export default {}',
+        }),
         rollupPlugins.typescript({
           tsconfig: 'flow-report/tsconfig.json',
           // Plugin struggles with custom outDir, so revert it from tsconfig value
@@ -52,9 +55,6 @@ async function run() {
           emitDeclarationOnly: false,
           declarationMap: false,
         }),
-        rollupPlugins.shim({
-          './locales.js': 'export default {}',
-        }),
         rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
         rollupPlugins.replace({
           values: {

From 5f6b600d54f72efe2dc592902c8d61bfee54b031 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Thu, 18 Nov 2021 21:55:26 -0500
Subject: [PATCH 06/19] lh-root

---
 viewer/app/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/viewer/app/index.html b/viewer/app/index.html
index 29015bb1ed33..8b3ff71662d3 100644
--- a/viewer/app/index.html
+++ b/viewer/app/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="styles/bundled.css">
   <link rel="canonical" href="https://googlechrome.github.io/lighthouse/viewer/">
 </head>
-<body class="flow-vars lh-vars">
+<body class="flow-vars lh-root lh-vars">
 
 <div class="drop_zone"></div>
 

From 0159b3e5a05de3bb1eeb09d6893c1f679bfbf893 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Thu, 18 Nov 2021 22:06:56 -0500
Subject: [PATCH 07/19] omit styles

---
 flow-report/src/wrappers/report.tsx | 1 +
 report/renderer/report-renderer.js  | 8 ++------
 report/types/report-renderer.d.ts   | 2 ++
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/flow-report/src/wrappers/report.tsx b/flow-report/src/wrappers/report.tsx
index d9c9138b6ef4..4bc9b546d8eb 100644
--- a/flow-report/src/wrappers/report.tsx
+++ b/flow-report/src/wrappers/report.tsx
@@ -35,6 +35,7 @@ export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
     return renderReport(hashState.currentLhr, {
       disableAutoDarkModeAndFireworks: true,
       omitTopbar: true,
+      omitGlobalStyles: true,
       onPageAnchorRendered: link => convertAnchor(link, hashState.index),
     });
   }, [hashState]);
diff --git a/report/renderer/report-renderer.js b/report/renderer/report-renderer.js
index e52c1b831881..296c8a57e6ee 100644
--- a/report/renderer/report-renderer.js
+++ b/report/renderer/report-renderer.js
@@ -20,7 +20,6 @@
 'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
-/** @typedef {{disableGlobalStyles?: boolean}} Options */
 
 import {CategoryRenderer} from './category-renderer.js';
 import {DetailsRenderer} from './details-renderer.js';
@@ -34,11 +33,8 @@ import {Util} from './util.js';
 export class ReportRenderer {
   /**
    * @param {DOM} dom
-   * @param {Options=} options
    */
-  constructor(dom, options) {
-    /** @type {Options|undefined} */
-    this.options = options;
+  constructor(dom) {
     /** @type {DOM} */
     this._dom = dom;
     /** @type {LH.Renderer.Options} */
@@ -327,7 +323,7 @@ export class ReportRenderer {
     categoryRenderer.injectFinalScreenshot(categories, report.audits, scoreScale);
 
     const reportFragment = this._dom.createFragment();
-    if (!this.options || !this.options.disableGlobalStyles) {
+    if (!this._opts.omitGlobalStyles) {
       reportFragment.append(this._dom.createComponent('styles'));
     }
 
diff --git a/report/types/report-renderer.d.ts b/report/types/report-renderer.d.ts
index 7c4a5f139a58..9ea1a74271d9 100644
--- a/report/types/report-renderer.d.ts
+++ b/report/types/report-renderer.d.ts
@@ -17,6 +17,8 @@ declare module Renderer {
 
     /** Disable the topbar UI component */
     omitTopbar?: boolean;
+    /** Prevent injection of report styles if they are already included by the environment. */
+    omitGlobalStyles?: boolean;
     /**
      * Convert report anchor links to a different format.
      * Flow report uses this to convert `#seo` to `#index=0&anchor=seo`.

From 305d29bc67fe075c53acf2d493cded4296a9af5e Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Fri, 19 Nov 2021 10:42:28 -0500
Subject: [PATCH 08/19] reorg

---
 build/build-report.js                                      | 2 +-
 flow-report/{standalone-flow.tsx => clients/standalone.js} | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)
 rename flow-report/{standalone-flow.tsx => clients/standalone.js} (89%)

diff --git a/build/build-report.js b/build/build-report.js
index 385a9021c5c5..35bc9ce008a1 100644
--- a/build/build-report.js
+++ b/build/build-report.js
@@ -58,7 +58,7 @@ async function buildStandaloneReport() {
 
 async function buildFlowReport() {
   const bundle = await rollup.rollup({
-    input: 'flow-report/standalone-flow.tsx',
+    input: 'flow-report/clients/standalone.js',
     plugins: [
       rollupPlugins.inlineFs({verbose: true}),
       rollupPlugins.replace({
diff --git a/flow-report/standalone-flow.tsx b/flow-report/clients/standalone.js
similarity index 89%
rename from flow-report/standalone-flow.tsx
rename to flow-report/clients/standalone.js
index faf8f54df744..43894c4f5ffa 100644
--- a/flow-report/standalone-flow.tsx
+++ b/flow-report/clients/standalone.js
@@ -9,15 +9,13 @@
  * The renderer code is bundled and injected into the report HTML along with the JSON report.
  */
 
-import {render} from 'preact';
-
-import {App} from './src/app';
+import {renderFlowReport} from '../api';
 
 function __initLighthouseFlowReport__() {
   const container = document.body.querySelector('main');
   if (!container) throw Error('Container element not found');
   container.classList.add('flow-vars', 'lh-root', 'lh-vars');
-  render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, container);
+  renderFlowReport(window.__LIGHTHOUSE_FLOW_JSON__, container);
 }
 
 window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;

From 5557323c8b2ccf947d50f4daf9ba84bf26b93c3f Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Fri, 19 Nov 2021 10:47:07 -0500
Subject: [PATCH 09/19] log

---
 viewer/app/src/lighthouse-report-viewer.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 5381a29f4650..9d94e3304078 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -269,6 +269,10 @@ export class LighthouseReportViewer {
   _renderFlowResult(json) {
     const container = find('main', document);
     renderFlowReport(json, container);
+    // Install as global for easier debugging.
+    window.__LIGHTHOUSE_FLOW_JSON__ = json;
+    // eslint-disable-next-line no-console
+    console.log('window.__LIGHTHOUSE_FLOW_JSON__', json);
   }
 
   /**

From 963648bd82dc36f6ec466233fdef4b3532ceb510 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Mon, 22 Nov 2021 15:35:31 -0500
Subject: [PATCH 10/19] fix tests

---
 flow-report/api.js                         |  7 +++---
 flow-report/clients/standalone.js          |  1 -
 viewer/app/index.html                      |  2 +-
 viewer/app/src/lighthouse-report-viewer.js | 25 ++++++++++++--------
 viewer/test/viewer-test-pptr.js            | 27 ++++++++++++++++++++++
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/flow-report/api.js b/flow-report/api.js
index ec54aa4c79be..02eadaf6daf1 100644
--- a/flow-report/api.js
+++ b/flow-report/api.js
@@ -10,8 +10,9 @@ import {App} from './src/app';
 
 /**
  * @param {LH.FlowResult} flowResult
- * @param {HTMLElement} container
+ * @param {HTMLElement} root
  */
-export function renderFlowReport(flowResult, container) {
-  render(h(App, {flowResult}), container);
+export function renderFlowReport(flowResult, root) {
+  root.classList.add('flow-vars', 'lh-vars', 'lh-root');
+  render(h(App, {flowResult}), root);
 }
diff --git a/flow-report/clients/standalone.js b/flow-report/clients/standalone.js
index 43894c4f5ffa..a33092def0cd 100644
--- a/flow-report/clients/standalone.js
+++ b/flow-report/clients/standalone.js
@@ -14,7 +14,6 @@ import {renderFlowReport} from '../api';
 function __initLighthouseFlowReport__() {
   const container = document.body.querySelector('main');
   if (!container) throw Error('Container element not found');
-  container.classList.add('flow-vars', 'lh-root', 'lh-vars');
   renderFlowReport(window.__LIGHTHOUSE_FLOW_JSON__, container);
 }
 
diff --git a/viewer/app/index.html b/viewer/app/index.html
index 8b3ff71662d3..b16f1f371358 100644
--- a/viewer/app/index.html
+++ b/viewer/app/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="styles/bundled.css">
   <link rel="canonical" href="https://googlechrome.github.io/lighthouse/viewer/">
 </head>
-<body class="flow-vars lh-root lh-vars">
+<body>
 
 <div class="drop_zone"></div>
 
diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 9d94e3304078..a299ce4aad7d 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -200,8 +200,9 @@ export class LighthouseReportViewer {
 
   /**
    * @param {LH.Result} json
+   * @param {HTMLElement} root
    */
-  _renderLhr(json) {
+  _renderLhr(json, root) {
     // Allow users to view the runnerResult
     if ('lhr' in json) {
       const runnerResult = /** @type {{lhr: LH.Result}} */ (/** @type {unknown} */ (json));
@@ -231,9 +232,8 @@ export class LighthouseReportViewer {
     const dom = new DOM(document);
     const renderer = new ReportRenderer(dom);
 
-    const container = find('main', document);
     try {
-      renderer.renderReport(json, container);
+      renderer.renderReport(json, root);
 
       // Only give gist-saving callback if current report isn't from a gist.
       let saveGistCallback;
@@ -256,7 +256,7 @@ export class LighthouseReportViewer {
       features.initFeatures(json);
     } catch (e) {
       logger.error(`Error rendering report: ${e.message}`);
-      container.textContent = '';
+      root.textContent = '';
       throw e;
     } finally {
       this._reportIsFromGist = this._reportIsFromPSI = this._reportIsFromJSON = false;
@@ -265,10 +265,10 @@ export class LighthouseReportViewer {
 
   /**
    * @param {LH.FlowResult} json
+   * @param {HTMLElement} root
    */
-  _renderFlowResult(json) {
-    const container = find('main', document);
-    renderFlowReport(json, container);
+  _renderFlowResult(json, root) {
+    renderFlowReport(json, root);
     // Install as global for easier debugging.
     window.__LIGHTHOUSE_FLOW_JSON__ = json;
     // eslint-disable-next-line no-console
@@ -282,10 +282,17 @@ export class LighthouseReportViewer {
   // TODO: Really, `json` should really have type `unknown` and
   // we can have _validateReportJson verify that it's an LH.Result
   _replaceReportHtml(json) {
+    const container = find('main', document);
+
+    // Reset container content.
+    container.innerHTML = '';
+    const root = document.createElement('div');
+    container.appendChild(root);
+
     if (this._isFlowReport(json)) {
-      this._renderFlowResult(json);
+      this._renderFlowResult(json, root);
     } else {
-      this._renderLhr(json);
+      this._renderLhr(json, root);
     }
 
     // Remove the placeholder UI once the user has loaded a report.
diff --git a/viewer/test/viewer-test-pptr.js b/viewer/test/viewer-test-pptr.js
index ffbf0f840750..44cb32bad05b 100644
--- a/viewer/test/viewer-test-pptr.js
+++ b/viewer/test/viewer-test-pptr.js
@@ -21,6 +21,8 @@ import {getCanonicalLocales} from '../../shared/localization/format.js';
 const portNumber = 10200;
 const viewerUrl = `http://localhost:${portNumber}/dist/gh-pages/viewer/index.html`;
 const sampleLhr = LH_ROOT + '/lighthouse-core/test/results/sample_v2.json';
+// eslint-disable-next-line max-len
+const sampleFlowResult = LH_ROOT + '/lighthouse-core/test/fixtures/fraggle-rock/reports/sample-flow-result.json';
 
 const lighthouseCategories = Object.keys(defaultConfig.categories);
 const getAuditsOfCategory = category => defaultConfig.categories[category].auditRefs;
@@ -83,6 +85,31 @@ describe('Lighthouse Viewer', () => {
     ]);
   });
 
+  describe('Renders the flow report', () => {
+    beforeAll(async () => {
+      await viewerPage.goto(viewerUrl, {waitUntil: 'networkidle2', timeout: 30000});
+      const fileInput = await viewerPage.$('#hidden-file-input');
+      await fileInput.uploadFile(sampleFlowResult);
+      await viewerPage.waitForSelector('.App', {timeout: 30000});
+    });
+
+    it('should load with no errors', async () => {
+      assert.deepStrictEqual(pageErrors, []);
+    });
+
+    it('renders the summary page', async () => {
+      const summary = await viewerPage.evaluate(() => document.querySelector('.Summary'));
+      assert.ok(summary);
+
+      const scores = await viewerPage.evaluate(() =>
+        Array.from(document.querySelectorAll('.lh-gauge__wrapper, .lh-fraction__wrapper'))
+      );
+      assert.equal(scores.length, 14);
+
+      assert.deepStrictEqual(pageErrors, []);
+    });
+  });
+
   describe('Renders the report', () => {
     beforeAll(async function() {
       await viewerPage.goto(viewerUrl, {waitUntil: 'networkidle2', timeout: 30000});

From 44cb1b36866fb8b3ad949490c79902dc56931e04 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Mon, 22 Nov 2021 16:03:14 -0500
Subject: [PATCH 11/19] fix sample updater

---
 build/build-report.js                                | 2 +-
 flow-report/{api.js => api.ts}                       | 6 +-----
 flow-report/clients/{standalone.js => standalone.ts} | 0
 viewer/app/src/lighthouse-report-viewer.js           | 2 +-
 4 files changed, 3 insertions(+), 7 deletions(-)
 rename flow-report/{api.js => api.ts} (85%)
 rename flow-report/clients/{standalone.js => standalone.ts} (100%)

diff --git a/build/build-report.js b/build/build-report.js
index 35bc9ce008a1..7645789345b7 100644
--- a/build/build-report.js
+++ b/build/build-report.js
@@ -58,7 +58,7 @@ async function buildStandaloneReport() {
 
 async function buildFlowReport() {
   const bundle = await rollup.rollup({
-    input: 'flow-report/clients/standalone.js',
+    input: 'flow-report/clients/standalone.ts',
     plugins: [
       rollupPlugins.inlineFs({verbose: true}),
       rollupPlugins.replace({
diff --git a/flow-report/api.js b/flow-report/api.ts
similarity index 85%
rename from flow-report/api.js
rename to flow-report/api.ts
index 02eadaf6daf1..1c80c354543f 100644
--- a/flow-report/api.js
+++ b/flow-report/api.ts
@@ -8,11 +8,7 @@ import {render, h} from 'preact';
 
 import {App} from './src/app';
 
-/**
- * @param {LH.FlowResult} flowResult
- * @param {HTMLElement} root
- */
-export function renderFlowReport(flowResult, root) {
+export function renderFlowReport(flowResult: LH.FlowResult, root: HTMLElement) {
   root.classList.add('flow-vars', 'lh-vars', 'lh-root');
   render(h(App, {flowResult}), root);
 }
diff --git a/flow-report/clients/standalone.js b/flow-report/clients/standalone.ts
similarity index 100%
rename from flow-report/clients/standalone.js
rename to flow-report/clients/standalone.ts
diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index a299ce4aad7d..cb494c462332 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -14,7 +14,7 @@ import {ViewerUIFeatures} from './viewer-ui-features.js';
 import {DOM} from '../../../report/renderer/dom.js';
 import {ReportRenderer} from '../../../report/renderer/report-renderer.js';
 import {TextEncoding} from '../../../report/renderer/text-encoding.js';
-import {renderFlowReport} from '../../../flow-report/api.js';
+import {renderFlowReport} from '../../../flow-report/api';
 
 /* global logger */
 

From ad8585ec17ac8cae24eb3db522f95a4fb4061941 Mon Sep 17 00:00:00 2001
From: Adam Raine <6752989+adamraine@users.noreply.github.com>
Date: Mon, 22 Nov 2021 17:39:37 -0500
Subject: [PATCH 12/19] Update report/types/report-renderer.d.ts

Co-authored-by: Connor Clark <cjamcl@google.com>
---
 report/types/report-renderer.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report/types/report-renderer.d.ts b/report/types/report-renderer.d.ts
index 9ea1a74271d9..e9efa855ab33 100644
--- a/report/types/report-renderer.d.ts
+++ b/report/types/report-renderer.d.ts
@@ -17,7 +17,7 @@ declare module Renderer {
 
     /** Disable the topbar UI component */
     omitTopbar?: boolean;
-    /** Prevent injection of report styles if they are already included by the environment. */
+    /** Prevent injection of report styles. Set to true if these styles are already included by the environment. */
     omitGlobalStyles?: boolean;
     /**
      * Convert report anchor links to a different format.

From 6e591697306121687c19a47c784d6cdbbabb1ae8 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Mon, 22 Nov 2021 17:40:52 -0500
Subject: [PATCH 13/19] rootEl

---
 viewer/app/src/lighthouse-report-viewer.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index cb494c462332..e69a141a137c 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -200,9 +200,9 @@ export class LighthouseReportViewer {
 
   /**
    * @param {LH.Result} json
-   * @param {HTMLElement} root
+   * @param {HTMLElement} rootEl
    */
-  _renderLhr(json, root) {
+  _renderLhr(json, rootEl) {
     // Allow users to view the runnerResult
     if ('lhr' in json) {
       const runnerResult = /** @type {{lhr: LH.Result}} */ (/** @type {unknown} */ (json));
@@ -233,7 +233,7 @@ export class LighthouseReportViewer {
     const renderer = new ReportRenderer(dom);
 
     try {
-      renderer.renderReport(json, root);
+      renderer.renderReport(json, rootEl);
 
       // Only give gist-saving callback if current report isn't from a gist.
       let saveGistCallback;
@@ -256,7 +256,7 @@ export class LighthouseReportViewer {
       features.initFeatures(json);
     } catch (e) {
       logger.error(`Error rendering report: ${e.message}`);
-      root.textContent = '';
+      rootEl.textContent = '';
       throw e;
     } finally {
       this._reportIsFromGist = this._reportIsFromPSI = this._reportIsFromJSON = false;
@@ -265,10 +265,10 @@ export class LighthouseReportViewer {
 
   /**
    * @param {LH.FlowResult} json
-   * @param {HTMLElement} root
+   * @param {HTMLElement} rootEl
    */
-  _renderFlowResult(json, root) {
-    renderFlowReport(json, root);
+  _renderFlowResult(json, rootEl) {
+    renderFlowReport(json, rootEl);
     // Install as global for easier debugging.
     window.__LIGHTHOUSE_FLOW_JSON__ = json;
     // eslint-disable-next-line no-console
@@ -286,13 +286,13 @@ export class LighthouseReportViewer {
 
     // Reset container content.
     container.innerHTML = '';
-    const root = document.createElement('div');
-    container.appendChild(root);
+    const rootEl = document.createElement('div');
+    container.appendChild(rootEl);
 
     if (this._isFlowReport(json)) {
-      this._renderFlowResult(json, root);
+      this._renderFlowResult(json, rootEl);
     } else {
-      this._renderLhr(json, root);
+      this._renderLhr(json, rootEl);
     }
 
     // Remove the placeholder UI once the user has loaded a report.

From 68056a3014b0021a347409aba41e30052347a4f2 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Mon, 22 Nov 2021 17:53:29 -0500
Subject: [PATCH 14/19] hash fix

---
 viewer/app/src/lighthouse-report-viewer.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index e69a141a137c..6083eca37171 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -117,12 +117,16 @@ export class LighthouseReportViewer {
     const gzip = params.get('gzip') === '1';
 
     if (location.hash) {
-      const hashParams = JSON.parse(TextEncoding.fromBase64(location.hash.substr(1), {gzip}));
-      if (hashParams.lhr) {
-        this._replaceReportHtml(hashParams.lhr);
-        return Promise.resolve();
-      } else {
-        console.warn('URL hash is populated, but not decoded successfully', hashParams);
+      try {
+        const hashParams = JSON.parse(TextEncoding.fromBase64(location.hash.substr(1), {gzip}));
+        if (hashParams.lhr) {
+          this._replaceReportHtml(hashParams.lhr);
+          return Promise.resolve();
+        } else {
+          console.warn('URL hash is populated, but no LHR was found', hashParams);
+        }
+      } catch {
+        console.warn('URL hash is populated, but not decoded successfully');
       }
     }
 

From 48d2f7a01b4cdfda315d8736eaf8a88a404abf81 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Mon, 22 Nov 2021 18:30:25 -0500
Subject: [PATCH 15/19] preloads

---
 build/gh-pages-app.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/build/gh-pages-app.js b/build/gh-pages-app.js
index 9bbc459f7806..d3f4fca95896 100644
--- a/build/gh-pages-app.js
+++ b/build/gh-pages-app.js
@@ -84,15 +84,15 @@ class GhPagesApp {
   async build() {
     fs.rmSync(this.distDir, {recursive: true, force: true});
 
+    const bundledJs = await this._compileJs();
+    safeWriteFile(`${this.distDir}/src/bundled.js`, bundledJs);
+
     const html = await this._compileHtml();
     safeWriteFile(`${this.distDir}/index.html`, html);
 
     const css = await this._compileCss();
     safeWriteFile(`${this.distDir}/styles/bundled.css`, css);
 
-    const bundledJs = await this._compileJs();
-    safeWriteFile(`${this.distDir}/src/bundled.js`, bundledJs);
-
     for (const {path, destDir, rename} of this.opts.assets) {
       const dir = destDir ? `${this.distDir}/${destDir}` : this.distDir;
       await cpy(path, dir, {
@@ -167,6 +167,7 @@ class GhPagesApp {
         safeWriteFile(`${this.distDir}/src/${output[i].fileName}`, code);
       }
     }
+    this.preloadScripts = output[0].imports.map(fileName => `src/${fileName}`);
     return output[0].code;
   }
 
@@ -180,6 +181,16 @@ class GhPagesApp {
       }
     }
 
+    if (this.preloadScripts?.length) {
+      const preloads = this.preloadScripts.map(fileName =>
+        `<link rel="preload" href="${fileName}" as="script" crossorigin="anonymous" />`
+      ).join('\n');
+      const endHeadIndex = htmlSrc.indexOf('</head>');
+      if (endHeadIndex !== -1) {
+        htmlSrc = htmlSrc.slice(0, endHeadIndex) + preloads + htmlSrc.slice(endHeadIndex);
+      }
+    }
+
     return htmlSrc;
   }
 

From d00406c2c3e2c9091256591180d6e0b6dc113ce5 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Mon, 22 Nov 2021 18:54:32 -0500
Subject: [PATCH 16/19] comments

---
 build/gh-pages-app.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/build/gh-pages-app.js b/build/gh-pages-app.js
index d3f4fca95896..53d0444ce71f 100644
--- a/build/gh-pages-app.js
+++ b/build/gh-pages-app.js
@@ -79,6 +79,8 @@ class GhPagesApp {
   constructor(opts) {
     this.opts = opts;
     this.distDir = `${ghPagesDistDir}/${opts.name}`;
+    /** @type {string[]} */
+    this.preloadScripts = [];
   }
 
   async build() {
@@ -167,7 +169,8 @@ class GhPagesApp {
         safeWriteFile(`${this.distDir}/src/${output[i].fileName}`, code);
       }
     }
-    this.preloadScripts = output[0].imports.map(fileName => `src/${fileName}`);
+    const scripts = output[0].imports.map(fileName => `src/${fileName}`);
+    this.preloadScripts.push(...scripts);
     return output[0].code;
   }
 
@@ -181,14 +184,15 @@ class GhPagesApp {
       }
     }
 
-    if (this.preloadScripts?.length) {
+    if (this.preloadScripts.length) {
       const preloads = this.preloadScripts.map(fileName =>
         `<link rel="preload" href="${fileName}" as="script" crossorigin="anonymous" />`
       ).join('\n');
       const endHeadIndex = htmlSrc.indexOf('</head>');
-      if (endHeadIndex !== -1) {
-        htmlSrc = htmlSrc.slice(0, endHeadIndex) + preloads + htmlSrc.slice(endHeadIndex);
+      if (endHeadIndex === -1) {
+        throw new Error('HTML file needs a <head> element to inject preloads');
       }
+      htmlSrc = htmlSrc.slice(0, endHeadIndex) + preloads + htmlSrc.slice(endHeadIndex);
     }
 
     return htmlSrc;

From ee2f83fe31b9e13b684388dff56f5133705b78d2 Mon Sep 17 00:00:00 2001
From: Adam Raine <6752989+adamraine@users.noreply.github.com>
Date: Tue, 23 Nov 2021 19:07:52 -0500
Subject: [PATCH 17/19] clients(viewer): save flow as gist (#13419)

---
 flow-report/api.ts                         |  8 +++--
 flow-report/clients/standalone.ts          |  4 ++-
 flow-report/src/app.tsx                    | 32 ++++++++++++--------
 flow-report/src/sidebar/flow.tsx           |  4 +--
 flow-report/src/sidebar/sidebar.tsx        |  4 +--
 flow-report/src/topbar.tsx                 | 35 ++++++++++++++--------
 flow-report/src/util.ts                    |  7 +++++
 flow-report/test/topbar-test.tsx           | 28 +++++++++++++----
 flow-report/types/flow-report.d.ts         |  4 +++
 report/generator/file-namer.js             | 13 +++++++-
 treemap/types/treemap.d.ts                 |  2 ++
 viewer/app/src/github-api.js               | 18 +++++++----
 viewer/app/src/lighthouse-report-viewer.js |  7 +++--
 13 files changed, 116 insertions(+), 50 deletions(-)

diff --git a/flow-report/api.ts b/flow-report/api.ts
index 1c80c354543f..c0621d18d87a 100644
--- a/flow-report/api.ts
+++ b/flow-report/api.ts
@@ -8,7 +8,11 @@ import {render, h} from 'preact';
 
 import {App} from './src/app';
 
-export function renderFlowReport(flowResult: LH.FlowResult, root: HTMLElement) {
+export function renderFlowReport(
+  flowResult: LH.FlowResult,
+  root: HTMLElement,
+  options?: LH.FlowReportOptions
+) {
   root.classList.add('flow-vars', 'lh-vars', 'lh-root');
-  render(h(App, {flowResult}), root);
+  render(h(App, {flowResult, options}), root);
 }
diff --git a/flow-report/clients/standalone.ts b/flow-report/clients/standalone.ts
index a33092def0cd..7016b7dea5e7 100644
--- a/flow-report/clients/standalone.ts
+++ b/flow-report/clients/standalone.ts
@@ -14,7 +14,9 @@ import {renderFlowReport} from '../api';
 function __initLighthouseFlowReport__() {
   const container = document.body.querySelector('main');
   if (!container) throw Error('Container element not found');
-  renderFlowReport(window.__LIGHTHOUSE_FLOW_JSON__, container);
+  renderFlowReport(window.__LIGHTHOUSE_FLOW_JSON__, container, {
+    getReportHtml: () => document.documentElement.outerHTML,
+  });
 }
 
 window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;
diff --git a/flow-report/src/app.tsx b/flow-report/src/app.tsx
index 1a55be31d644..c1402e495970 100644
--- a/flow-report/src/app.tsx
+++ b/flow-report/src/app.tsx
@@ -5,11 +5,11 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useLayoutEffect, useRef, useState} from 'preact/hooks';
+import {useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
 
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {classNames, FlowResultContext, useHashState} from './util';
+import {classNames, FlowResultContext, OptionsContext, useHashState} from './util';
 import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
@@ -48,18 +48,24 @@ const Content: FunctionComponent = () => {
   );
 };
 
-export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => {
+export const App: FunctionComponent<{
+  flowResult: LH.FlowResult,
+  options?: LH.FlowReportOptions
+}> = ({flowResult, options}) => {
   const [collapsed, setCollapsed] = useState(false);
+  const optionsValue = useMemo(() => options || {}, [options]);
   return (
-    <FlowResultContext.Provider value={flowResult}>
-      <I18nProvider>
-        <Styles/>
-        <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
-          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
-          <Sidebar/>
-          <Content/>
-        </div>
-      </I18nProvider>
-    </FlowResultContext.Provider>
+    <OptionsContext.Provider value={optionsValue}>
+      <FlowResultContext.Provider value={flowResult}>
+        <I18nProvider>
+          <Styles/>
+          <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
+            <Topbar onMenuClick={() => setCollapsed(c => !c)} />
+            <Sidebar/>
+            <Content/>
+          </div>
+        </I18nProvider>
+      </FlowResultContext.Provider>
+    </OptionsContext.Provider>
   );
 };
diff --git a/flow-report/src/sidebar/flow.tsx b/flow-report/src/sidebar/flow.tsx
index f7b2e919e6f9..9931a62e192c 100644
--- a/flow-report/src/sidebar/flow.tsx
+++ b/flow-report/src/sidebar/flow.tsx
@@ -48,8 +48,6 @@ export const SidebarFlow: FunctionComponent = () => {
       {
         flowResult.steps.map((step, index) => {
           const {lhr, name} = step;
-          const url = new URL(location.href);
-          url.hash = `#index=${index}`;
           return <>
             {
               lhr.gatherMode === 'navigation' && index !== 0 ?
@@ -59,7 +57,7 @@ export const SidebarFlow: FunctionComponent = () => {
             <SidebarFlowStep
               key={lhr.fetchTime}
               mode={lhr.gatherMode}
-              href={url.href}
+              href={`#index=${index}`}
               label={name}
               isCurrent={index === (hashState && hashState.index)}
             />
diff --git a/flow-report/src/sidebar/sidebar.tsx b/flow-report/src/sidebar/sidebar.tsx
index 3c39aa77a8ef..a92ec1229d1a 100644
--- a/flow-report/src/sidebar/sidebar.tsx
+++ b/flow-report/src/sidebar/sidebar.tsx
@@ -17,11 +17,9 @@ const SidebarSummary: FunctionComponent = () => {
   const hashState = useHashState();
   const strings = useLocalizedStrings();
 
-  const url = new URL(location.href);
-  url.hash = '#';
   return (
     <a
-      href={url.href}
+      href="#"
       className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
       data-testid="SidebarSummary"
     >
diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx
index 9ec8848ed202..167d162658a0 100644
--- a/flow-report/src/topbar.tsx
+++ b/flow-report/src/topbar.tsx
@@ -8,20 +8,15 @@ import {FunctionComponent, JSX} from 'preact';
 import {useState} from 'preact/hooks';
 
 import {HelpDialog} from './help-dialog';
-import {getFilenamePrefix} from '../../report/generator/file-namer';
+import {getFlowResultFilenamePrefix} from '../../report/generator/file-namer';
 import {useLocalizedStrings} from './i18n/i18n';
 import {HamburgerIcon, InfoIcon} from './icons';
-import {useFlowResult} from './util';
+import {useFlowResult, useOptions} from './util';
 import {saveFile} from '../../report/renderer/api';
 
-function saveHtml(flowResult: LH.FlowResult) {
-  const htmlStr = document.documentElement.outerHTML;
+function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
-
-  const lhr = flowResult.steps[0].lhr;
-  const name = flowResult.name.replace(/\s/g, '-');
-  const filename = getFilenamePrefix(name, lhr.fetchTime);
-
+  const filename = getFlowResultFilenamePrefix(flowResult);
   saveFile(blob, filename);
 }
 
@@ -78,6 +73,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
+  const {getReportHtml, saveAsGist} = useOptions();
 
   return (
     <div className="Topbar">
@@ -88,10 +84,23 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
         <Logo/>
       </div>
       <div className="Topbar__title">{strings.title}</div>
-      <TopbarButton
-        onClick={() => saveHtml(flowResult)}
-        label="Button that saves the report as HTML"
-      >{strings.save}</TopbarButton>
+      {
+        getReportHtml &&
+          <TopbarButton
+            onClick={() => {
+              const htmlStr = getReportHtml(flowResult);
+              saveHtml(flowResult, htmlStr);
+            }}
+            label="Button that saves the report as HTML"
+          >{strings.save}</TopbarButton>
+      }
+      {
+        saveAsGist &&
+          <TopbarButton
+            onClick={() => saveAsGist(flowResult)}
+            label="Button that saves the report to a gist"
+          >Save as Gist</TopbarButton>
+      }
       <div style={{flexGrow: 1}} />
       <TopbarButton
         onClick={() => setShowHelpDialog(previous => !previous)}
diff --git a/flow-report/src/util.ts b/flow-report/src/util.ts
index ead12f051bd5..fc76c4c32ff4 100644
--- a/flow-report/src/util.ts
+++ b/flow-report/src/util.ts
@@ -10,6 +10,7 @@ import {useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from
 import type {UIStringsType} from './i18n/ui-strings';
 
 const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
+const OptionsContext = createContext<LH.FlowReportOptions>({});
 
 function getHashParam(param: string): string|null {
   const params = new URLSearchParams(location.hash.replace('#', '?'));
@@ -147,8 +148,13 @@ function useExternalRenderer<T extends Element>(
   return ref;
 }
 
+function useOptions() {
+  return useContext(OptionsContext);
+}
+
 export {
   FlowResultContext,
+  OptionsContext,
   classNames,
   getScreenDimensions,
   getFullPageScreenshot,
@@ -158,4 +164,5 @@ export {
   useHashParams,
   useHashState,
   useExternalRenderer,
+  useOptions,
 };
diff --git a/flow-report/test/topbar-test.tsx b/flow-report/test/topbar-test.tsx
index e48072c93b7e..488a391bae81 100644
--- a/flow-report/test/topbar-test.tsx
+++ b/flow-report/test/topbar-test.tsx
@@ -8,7 +8,7 @@ import {jest} from '@jest/globals';
 import {FunctionComponent} from 'preact';
 import {act, render} from '@testing-library/preact';
 
-import {FlowResultContext} from '../src/util';
+import {FlowResultContext, OptionsContext} from '../src/util';
 import {I18nProvider} from '../src/i18n/i18n';
 
 const mockSaveFile = jest.fn();
@@ -31,19 +31,24 @@ const flowResult = {
 } as any;
 
 let wrapper: FunctionComponent;
+let options: LH.FlowReportOptions;
 
 beforeEach(() => {
   mockSaveFile.mockReset();
+  options = {};
   wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>
-      <I18nProvider>
-        {children}
-      </I18nProvider>
-    </FlowResultContext.Provider>
+    <OptionsContext.Provider value={options}>
+      <FlowResultContext.Provider value={flowResult}>
+        <I18nProvider>
+          {children}
+        </I18nProvider>
+      </FlowResultContext.Provider>
+    </OptionsContext.Provider>
   );
 });
 
 it('save button opens save dialog for HTML file', async () => {
+  options = {getReportHtml: () => '<html></html>'};
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
 
   const saveButton = root.getByText('Save');
@@ -55,6 +60,17 @@ it('save button opens save dialog for HTML file', async () => {
   );
 });
 
+it('provides save as gist option if defined', async () => {
+  const saveAsGist = jest.fn();
+  options = {saveAsGist};
+  const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
+
+  const saveButton = root.getByText('Save as Gist');
+  saveButton.click();
+
+  expect(saveAsGist).toHaveBeenCalledWith(flowResult);
+});
+
 it('toggles help dialog', async () => {
   const root = render(<Topbar onMenuClick={() => {}}/>, {wrapper});
 
diff --git a/flow-report/types/flow-report.d.ts b/flow-report/types/flow-report.d.ts
index 74fae2534016..0d74b325f66b 100644
--- a/flow-report/types/flow-report.d.ts
+++ b/flow-report/types/flow-report.d.ts
@@ -20,6 +20,10 @@ declare global {
   // Expose global types in LH namespace.
   module LH {
     export type ConfigSettings = Settings.ConfigSettings;
+    export interface FlowReportOptions {
+      getReportHtml?: (flowResult: FlowResult_) => string;
+      saveAsGist?: (flowResult: FlowResult_) => void;
+    }
 
     export import FlowResult = FlowResult_;
   }
diff --git a/report/generator/file-namer.js b/report/generator/file-namer.js
index 67203ef946be..ce1aa8749c1a 100644
--- a/report/generator/file-namer.js
+++ b/report/generator/file-namer.js
@@ -43,4 +43,15 @@ function getLhrFilenamePrefix(lhr) {
   return getFilenamePrefix(hostname, lhr.fetchTime);
 }
 
-module.exports = {getLhrFilenamePrefix, getFilenamePrefix};
+/**
+ * Generate a filenamePrefix of name_YYYY-MM-DD_HH-MM-SS.
+ * @param {{name: string, steps: Array<{lhr: {fetchTime: string}}>}} flowResult
+ * @return {string}
+ */
+function getFlowResultFilenamePrefix(flowResult) {
+  const lhr = flowResult.steps[0].lhr;
+  const name = flowResult.name.replace(/\s/g, '-');
+  return getFilenamePrefix(name, lhr.fetchTime);
+}
+
+module.exports = {getLhrFilenamePrefix, getFilenamePrefix, getFlowResultFilenamePrefix};
diff --git a/treemap/types/treemap.d.ts b/treemap/types/treemap.d.ts
index 6013261b7b3e..a56a6f3e41bd 100644
--- a/treemap/types/treemap.d.ts
+++ b/treemap/types/treemap.d.ts
@@ -5,6 +5,7 @@ import * as Settings from '../../types/lhr/settings';
 import 'google.analytics';
 import LHResult from '../../types/lhr/lhr';
 import {TreemapUtil} from '../app/src/util';
+import FlowResult_ from '../../types/lhr/flow';
 
 // Import for needed DOM type augmentation.
 import '../../report/types/augment-dom';
@@ -15,6 +16,7 @@ declare global {
     export import Treemap = Treemap_;
     export import Result = LHResult;
     export import Locale = Settings.Locale;
+    export import FlowResult = FlowResult_;
   }
 
   class WebTreeMap {
diff --git a/viewer/app/src/github-api.js b/viewer/app/src/github-api.js
index 7d7443593048..af499acd874f 100644
--- a/viewer/app/src/github-api.js
+++ b/viewer/app/src/github-api.js
@@ -12,7 +12,8 @@
 import idbKeyval from 'idb-keyval';
 
 import {FirebaseAuth} from './firebase-auth.js';
-import {getLhrFilenamePrefix} from '../../../report/generator/file-namer.js';
+// eslint-disable-next-line max-len
+import {getLhrFilenamePrefix, getFlowResultFilenamePrefix} from '../../../report/generator/file-namer.js';
 
 /**
  * Wrapper around the GitHub API for reading/writing gists.
@@ -33,7 +34,7 @@ export class GithubApi {
 
   /**
    * Creates a gist under the users account.
-   * @param {LH.Result} jsonFile The gist file body.
+   * @param {LH.Result|LH.FlowResult} jsonFile The gist file body.
    * @return {Promise<string>} id of the created gist.
    */
   async createGist(jsonFile) {
@@ -46,10 +47,15 @@ export class GithubApi {
 
     try {
       const accessToken = await this._auth.getAccessToken();
-      const filename = getLhrFilenamePrefix({
-        finalUrl: jsonFile.finalUrl,
-        fetchTime: jsonFile.fetchTime,
-      });
+      let filename;
+      if ('steps' in jsonFile) {
+        filename = getFlowResultFilenamePrefix(jsonFile);
+      } else {
+        filename = getLhrFilenamePrefix({
+          finalUrl: jsonFile.finalUrl,
+          fetchTime: jsonFile.fetchTime,
+        });
+      }
       const body = {
         description: 'Lighthouse json report',
         public: false,
diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 6083eca37171..3aed57b14a1a 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -272,7 +272,10 @@ export class LighthouseReportViewer {
    * @param {HTMLElement} rootEl
    */
   _renderFlowResult(json, rootEl) {
-    renderFlowReport(json, rootEl);
+    // TODO: Add save HTML functionality with ReportGenerator loaded async.
+    renderFlowReport(json, rootEl, {
+      saveAsGist: () => this._onSaveJson(json),
+    });
     // Install as global for easier debugging.
     window.__LIGHTHOUSE_FLOW_JSON__ = json;
     // eslint-disable-next-line no-console
@@ -351,7 +354,7 @@ export class LighthouseReportViewer {
 
   /**
    * Saves the current report by creating a gist on GitHub.
-   * @param {LH.Result} reportJson
+   * @param {LH.Result|LH.FlowResult} reportJson
    * @return {Promise<string|void>} id of the created gist.
    * @private
    */

From 30b1a3f3d9d223aaebd381d08f607440fa082161 Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Wed, 24 Nov 2021 14:27:38 -0500
Subject: [PATCH 18/19] reorg

---
 viewer/app/src/lighthouse-report-viewer.js | 72 +++++++++++-----------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 3aed57b14a1a..8929b347c338 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -205,8 +205,9 @@ export class LighthouseReportViewer {
   /**
    * @param {LH.Result} json
    * @param {HTMLElement} rootEl
+   * @param {(json: LH.Result|LH.FlowResult) => void} [saveGistCallback]
    */
-  _renderLhr(json, rootEl) {
+  _renderLhr(json, rootEl, saveGistCallback) {
     // Allow users to view the runnerResult
     if ('lhr' in json) {
       const runnerResult = /** @type {{lhr: LH.Result}} */ (/** @type {unknown} */ (json));
@@ -236,45 +237,27 @@ export class LighthouseReportViewer {
     const dom = new DOM(document);
     const renderer = new ReportRenderer(dom);
 
-    try {
-      renderer.renderReport(json, rootEl);
-
-      // Only give gist-saving callback if current report isn't from a gist.
-      let saveGistCallback;
-      if (!this._reportIsFromGist) {
-        saveGistCallback = this._onSaveJson;
-      }
-
-      // Only clear query string if current report isn't from a gist or PSI.
-      if (!this._reportIsFromGist && !this._reportIsFromPSI && !this._reportIsFromJSON) {
-        history.pushState({}, '', LighthouseReportViewer.APP_URL);
-      }
+    renderer.renderReport(json, rootEl);
 
-      const features = new ViewerUIFeatures(dom, {
-        saveGist: saveGistCallback,
-        /** @param {LH.Result} newLhr */
-        refresh: newLhr => {
-          this._replaceReportHtml(newLhr);
-        },
-      });
-      features.initFeatures(json);
-    } catch (e) {
-      logger.error(`Error rendering report: ${e.message}`);
-      rootEl.textContent = '';
-      throw e;
-    } finally {
-      this._reportIsFromGist = this._reportIsFromPSI = this._reportIsFromJSON = false;
-    }
+    const features = new ViewerUIFeatures(dom, {
+      saveGist: saveGistCallback,
+      /** @param {LH.Result} newLhr */
+      refresh: newLhr => {
+        this._replaceReportHtml(newLhr);
+      },
+    });
+    features.initFeatures(json);
   }
 
   /**
    * @param {LH.FlowResult} json
    * @param {HTMLElement} rootEl
+   * @param {(json: LH.Result|LH.FlowResult) => void} [saveGistCallback]
    */
-  _renderFlowResult(json, rootEl) {
+  _renderFlowResult(json, rootEl, saveGistCallback) {
     // TODO: Add save HTML functionality with ReportGenerator loaded async.
     renderFlowReport(json, rootEl, {
-      saveAsGist: () => this._onSaveJson(json),
+      saveAsGist: saveGistCallback,
     });
     // Install as global for easier debugging.
     window.__LIGHTHOUSE_FLOW_JSON__ = json;
@@ -296,10 +279,29 @@ export class LighthouseReportViewer {
     const rootEl = document.createElement('div');
     container.appendChild(rootEl);
 
-    if (this._isFlowReport(json)) {
-      this._renderFlowResult(json, rootEl);
-    } else {
-      this._renderLhr(json, rootEl);
+    // Only give gist-saving callback if current report isn't from a gist.
+    let saveGistCallback;
+    if (!this._reportIsFromGist) {
+      saveGistCallback = this._onSaveJson;
+    }
+
+    try {
+      if (this._isFlowReport(json)) {
+        this._renderFlowResult(json, rootEl, saveGistCallback);
+      } else {
+        this._renderLhr(json, rootEl, saveGistCallback);
+      }
+
+      // Only clear query string if current report isn't from a gist or PSI.
+      if (!this._reportIsFromGist && !this._reportIsFromPSI && !this._reportIsFromJSON) {
+        history.pushState({}, '', LighthouseReportViewer.APP_URL);
+      }
+    } catch (e) {
+      logger.error(`Error rendering report: ${e.message}`);
+      container.innerHTML = '';
+      throw e;
+    } finally {
+      this._reportIsFromGist = this._reportIsFromPSI = this._reportIsFromJSON = false;
     }
 
     // Remove the placeholder UI once the user has loaded a report.

From 0ccc6e3d2fdf60f648b3e43d4b0e1af069867efe Mon Sep 17 00:00:00 2001
From: Adam Raine <ad.st.raine@gmail.com>
Date: Wed, 24 Nov 2021 15:00:01 -0500
Subject: [PATCH 19/19] ui string

---
 flow-report/src/topbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx
index 167d162658a0..71e50756d7ec 100644
--- a/flow-report/src/topbar.tsx
+++ b/flow-report/src/topbar.tsx
@@ -99,7 +99,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
           <TopbarButton
             onClick={() => saveAsGist(flowResult)}
             label="Button that saves the report to a gist"
-          >Save as Gist</TopbarButton>
+          >{strings.dropdownSaveGist}</TopbarButton>
       }
       <div style={{flexGrow: 1}} />
       <TopbarButton