From d5624728345893b1e6c9d2e7e5f4c86dd0780311 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Thu, 18 Apr 2024 10:12:06 -0700
Subject: [PATCH 1/4] clients(viewer): stop using legacy DOM api

---
 viewer/app/index.html                      | 2 +-
 viewer/app/src/lighthouse-report-viewer.js | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/viewer/app/index.html b/viewer/app/index.html
index e9dd9431e3f8..48f0a7403285 100644
--- a/viewer/app/index.html
+++ b/viewer/app/index.html
@@ -20,7 +20,7 @@
 
 <div class="drop_zone"></div>
 
-<main><!-- report populated here --></main>
+<main class="lh-root lh-vars"><!-- report populated here --></main>
 
 <div class="viewer-placeholder">
   <div class="viewer-placeholder-inner">
diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 1e764b7cb640..b2eb86aa5ed5 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -15,8 +15,7 @@ import {ReportRenderer} from '../../../report/renderer/report-renderer.js';
 import {TextEncoding} from '../../../report/renderer/text-encoding.js';
 import {renderFlowReport} from '../../../flow-report/api';
 
-// @ts-expect-error Legacy use of report renderer
-const dom = new DOM(document);
+const dom = new DOM(document, document.documentElement);
 
 /* global logger ReportGenerator */
 
@@ -224,7 +223,6 @@ export class LighthouseReportViewer {
 
     const features = new ViewerUIFeatures(dom, {
       saveGist: saveGistCallback,
-      /** @param {LH.Result} newLhr */
       refresh: newLhr => {
         this._replaceReportHtml(newLhr);
       },
@@ -258,11 +256,11 @@ 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 = dom.find('main', document);
+    const container = dom.find('main');
 
     // Reset container content.
     container.textContent = '';
-    const rootEl = document.createElement('div');
+    const rootEl = dom.createElement('div', 'lh-root lh-vars');
     container.append(rootEl);
 
     // Only give gist-saving callback if current report isn't from a gist.

From b6a7037a35eec874626a44c961436af73563bcc6 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Thu, 18 Apr 2024 10:14:53 -0700
Subject: [PATCH 2/4] dont need that

---
 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 48f0a7403285..e9dd9431e3f8 100644
--- a/viewer/app/index.html
+++ b/viewer/app/index.html
@@ -20,7 +20,7 @@
 
 <div class="drop_zone"></div>
 
-<main class="lh-root lh-vars"><!-- report populated here --></main>
+<main><!-- report populated here --></main>
 
 <div class="viewer-placeholder">
   <div class="viewer-placeholder-inner">

From 51c93702c0a5da303fab4027166b2b5bfb6d619a Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Thu, 18 Apr 2024 10:30:37 -0700
Subject: [PATCH 3/4] fix

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

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index b2eb86aa5ed5..8298d5426acf 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -215,6 +215,7 @@ export class LighthouseReportViewer {
       return;
     }
 
+    const dom = new DOM(document, rootEl);
     const renderer = new ReportRenderer(dom);
 
     renderer.renderReport(json, rootEl, {

From 7dfd320e25361e46957c1d4b1b6cce5792014101 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Fri, 19 Apr 2024 14:14:08 -0700
Subject: [PATCH 4/4] pr

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

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
index 8298d5426acf..ef70e5819fe7 100644
--- a/viewer/app/src/lighthouse-report-viewer.js
+++ b/viewer/app/src/lighthouse-report-viewer.js
@@ -215,14 +215,15 @@ export class LighthouseReportViewer {
       return;
     }
 
-    const dom = new DOM(document, rootEl);
-    const renderer = new ReportRenderer(dom);
+    rootEl.classList.add('lh-root', 'lh-vars');
+    const reportDom = new DOM(document, rootEl);
+    const renderer = new ReportRenderer(reportDom);
 
     renderer.renderReport(json, rootEl, {
       occupyEntireViewport: true,
     });
 
-    const features = new ViewerUIFeatures(dom, {
+    const features = new ViewerUIFeatures(reportDom, {
       saveGist: saveGistCallback,
       refresh: newLhr => {
         this._replaceReportHtml(newLhr);
@@ -261,7 +262,7 @@ export class LighthouseReportViewer {
 
     // Reset container content.
     container.textContent = '';
-    const rootEl = dom.createElement('div', 'lh-root lh-vars');
+    const rootEl = dom.createElement('div');
     container.append(rootEl);
 
     // Only give gist-saving callback if current report isn't from a gist.