lighthouse 9.2.0-dev.20211226 → 9.2.0-dev.20211230

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.2.0-dev.20211226",
+  "version": "9.2.0-dev.20211230",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/report/assets/templates.html

@@ -417,7 +417,8 @@ limitations under the License.
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintSummary" data-action="print-summary"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintExpanded" data-action="print-expanded"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--copy" data-i18n="dropdownCopyJSON" data-action="copy"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
+        <!-- Only enabled if Options.getStandaloneReportHTML is set. -->
+        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download lh-hidden" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>

package/report/clients/standalone.js

@@ -21,7 +21,11 @@ function __initLighthouseReport__() {
   // @ts-expect-error
   const lhr = window.__LIGHTHOUSE_JSON__;
 
-  const reportRootEl = renderReport(lhr);
+  const reportRootEl = renderReport(lhr, {
+    getStandaloneReportHTML() {
+      return document.documentElement.outerHTML;
+    },
+  });
   document.body.append(reportRootEl);
 
   document.addEventListener('lh-analytics', /** @param {Event} e */ e => {

package/report/renderer/components.js

@@ -706,7 +706,7 @@ function createTopbarComponent(dom) {
   el40.setAttribute('href', '#');
   el40.setAttribute('data-i18n', 'dropdownCopyJSON');
   el40.setAttribute('data-action', 'copy');
-  const el41 = dom.createElement('a', 'lh-report-icon lh-report-icon--download');
+  const el41 = dom.createElement('a', 'lh-report-icon lh-report-icon--download lh-hidden');
   el41.setAttribute('role', 'menuitem');
   el41.setAttribute('tabindex', '-1');
   el41.setAttribute('href', '#');
@@ -736,7 +736,7 @@ function createTopbarComponent(dom) {
   el45.setAttribute('href', '#');
   el45.setAttribute('data-i18n', 'dropdownDarkTheme');
   el45.setAttribute('data-action', 'toggle-dark');
-  el37.append(' ', el38, ' ', el39, ' ', el40, ' ', el41, ' ', el42, ' ', el43, ' ', el44, ' ', el45, ' ');
+  el37.append(' ', el38, ' ', el39, ' ', el40, ' ', ' ', el41, ' ', el42, ' ', el43, ' ', el44, ' ', el45, ' ');
   el26.append(' ', el27, ' ', el33, ' ', el37, ' ');
   el2.append(' ', ' ', el3, ' ', el25, ' ', el26, ' ');
   el0.append(el2);

package/report/renderer/report-ui-features.js

@@ -112,6 +112,10 @@ export class ReportUIFeatures {
       });
     }
 
+    if (this._opts.getStandaloneReportHTML) {
+      this._dom.find('a[data-action="save-html"]', this._dom.rootEl).classList.remove('lh-hidden');
+    }
+
     // Fill in all i18n data.
     for (const node of this._dom.findAll('[data-i18n]', this._dom.rootEl)) {
       // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
@@ -146,15 +150,23 @@ export class ReportUIFeatures {
     return buttonEl;
   }
 
+  resetUIState() {
+    if (this._topbar) {
+      this._topbar.resetUIState();
+    }
+  }
+
   /**
    * Returns the html that recreates this report.
    * @return {string}
    */
   getReportHtml() {
-    if (this._topbar) {
-      this._topbar.resetUIState();
+    if (!this._opts.getStandaloneReportHTML) {
+      throw new Error('`getStandaloneReportHTML` is not set');
     }
-    return `<!doctype html><body style="margin: 0">${this._dom.rootEl.outerHTML}`;
+
+    this.resetUIState();
+    return this._opts.getStandaloneReportHTML();
   }
 
   /**

package/report/test/renderer/report-ui-features-test.js

@@ -27,15 +27,16 @@ describe('ReportUIFeatures', () => {
 
   /**
    * @param {LH.JSON} lhr
+   * @param {LH.Renderer.Options=} opts
    * @return {HTMLElement}
    */
-  function render(lhr) {
+  function render(lhr, opts) {
     const detailsRenderer = new DetailsRenderer(dom);
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     const renderer = new ReportRenderer(dom, categoryRenderer);
-    const reportUIFeatures = new ReportUIFeatures(dom);
+    const reportUIFeatures = new ReportUIFeatures(dom, opts);
     const container = dom.find('body', dom.document());
-    renderer.renderReport(lhr, container);
+    renderer.renderReport(lhr, container, opts);
     reportUIFeatures.initFeatures(lhr);
     return container;
   }
@@ -60,6 +61,7 @@ describe('ReportUIFeatures', () => {
 
     global.HTMLElement = document.window.HTMLElement;
     global.HTMLInputElement = document.window.HTMLInputElement;
+    global.CustomEvent = document.window.CustomEvent;
 
     global.window = document.window;
     global.window.requestAnimationFrame = fn => fn();
@@ -83,6 +85,7 @@ describe('ReportUIFeatures', () => {
     global.window = undefined;
     global.HTMLElement = undefined;
     global.HTMLInputElement = undefined;
+    global.CustomEvent = undefined;
   });
 
   describe('initFeatures', () => {
@@ -275,6 +278,22 @@ describe('ReportUIFeatures', () => {
         expect(filterControl.hidden).toEqual(true);
       });
     });
+
+    it('save-html option enabled if callback present', () => {
+      let container = render(sampleResults);
+      const getSaveEl = () => dom.find('a[data-action="save-html"]', container);
+      expect(getSaveEl().classList.contains('lh-hidden')).toBeTruthy();
+
+      const getHtmlMock = jest.fn();
+      container = render(sampleResults, {
+        getStandaloneReportHTML: getHtmlMock,
+      });
+      expect(getSaveEl().classList.contains('lh-hidden')).toBeFalsy();
+
+      expect(getHtmlMock).not.toBeCalled();
+      getSaveEl().click();
+      expect(getHtmlMock).toBeCalled();
+    });
   });
 
   describe('fireworks', () => {
@@ -351,7 +370,6 @@ describe('ReportUIFeatures', () => {
       assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
     });
 
-
     it('Escape key removes active class', () => {
       dropDown._toggleEl.click();
       assert.ok(dropDown._toggleEl.classList.contains('lh-active'));

package/report/types/report-renderer.d.ts

@@ -24,6 +24,8 @@ declare module Renderer {
      * Flow report uses this to convert `#seo` to `#index=0&anchor=seo`.
      */
     onPageAnchorRendered?: (link: HTMLAnchorElement) => void;
+    /** If defined, `Save as HTML` option is shown in dropdown menu. */
+    getStandaloneReportHTML?: () => string;
   }
 }