report: occupy entire viewport (#15664)

GoogleChrome · Dec 6, 2023 · 7cdff76 · 7cdff76
1 parent 4c5e1c2
commit 7cdff76
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 2 deletions.
diff --git a/report/assets/styles.css b/report/assets/styles.css
@@ -277,6 +277,13 @@
   --sticky-header-buffer: 0;
 }
 
+.lh-max-viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+}
+
 .lh-devtools.lh-root {
   height: 100%;
 }

diff --git a/report/clients/standalone.js b/report/clients/standalone.js
@@ -21,6 +21,7 @@ function __initLighthouseReport__() {
   const lhr = window.__LIGHTHOUSE_JSON__;
 
   const reportRootEl = renderReport(lhr, {
+    occupyEntireViewport: true,
     getStandaloneReportHTML() {
       return document.documentElement.outerHTML;
     },

diff --git a/report/renderer/components.js b/report/renderer/components.js
diff --git a/report/renderer/report-renderer.js b/report/renderer/report-renderer.js
@@ -61,6 +61,10 @@ export class ReportRenderer {
     this._dom.rootEl.textContent = ''; // Remove previous report.
     this._dom.rootEl.append(this._renderReport(report));
 
+    if (this._opts.occupyEntireViewport) {
+      this._dom.rootEl.classList.add('lh-max-viewport');
+    }
+
     return this._dom.rootEl;
   }
 

diff --git a/report/types/report-renderer.d.ts b/report/types/report-renderer.d.ts
@@ -28,6 +28,8 @@ declare module Renderer {
     omitTopbar?: boolean;
     /** Prevent injection of report styles. Set to true if these styles are already included by the environment. */
     omitGlobalStyles?: boolean;
+    /** Ensure the report occupies the entire viewport. This option should be enabled if the report represents the entire page content (i.e. standalone HTML & viewer app) */
+    occupyEntireViewport?: boolean;
     /**
      * Convert report anchor links to a different format.
      * Flow report uses this to convert `#seo` to `#index=0&anchor=seo`.

diff --git a/viewer/app/src/lighthouse-report-viewer.js b/viewer/app/src/lighthouse-report-viewer.js
@@ -232,7 +232,9 @@ export class LighthouseReportViewer {
     const dom = new DOM(document);
     const renderer = new ReportRenderer(dom);
 
-    renderer.renderReport(json, rootEl);
+    renderer.renderReport(json, rootEl, {
+      occupyEntireViewport: true,
+    });
 
     const features = new ViewerUIFeatures(dom, {
       saveGist: saveGistCallback,