lighthouse 9.5.0-dev.20230112 → 9.5.0-dev.20230113

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20230112",
+  "version": "9.5.0-dev.20230113",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/readme.md

@@ -105,6 +105,7 @@ Configuration:
   --only-categories              Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo  [array]
   --skip-audits                  Run everything except these audits  [array]
   --budget-path                  The path to the budget.json file for LightWallet.  [string]
+  --disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large  [boolean]
 
 Output:
   --output       Reporter for the results, supports multiple values. choices: "json", "html", "csv"  [array] [default: ["html"]]

package/report/renderer/details-renderer.js

@@ -34,7 +34,7 @@ const URL_PREFIXES = ['http://', 'https://', 'data:'];
 export class DetailsRenderer {
   /**
    * @param {DOM} dom
-   * @param {{fullPageScreenshot?: LH.Audit.Details.FullPageScreenshot}} [options]
+   * @param {{fullPageScreenshot?: LH.Result.FullPageScreenshot}} [options]
    */
   constructor(dom, options = {}) {
     this._dom = dom;
@@ -60,7 +60,6 @@ export class DetailsRenderer {
       // Internal-only details, not for rendering.
       case 'screenshot':
       case 'debugdata':
-      case 'full-page-screenshot':
       case 'treemap-data':
         return null;
 

package/report/renderer/element-screenshot-renderer.js

@@ -19,13 +19,13 @@
  * @property {DOM} dom
  * @property {Element} rootEl
  * @property {Element} overlayContainerEl
- * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
+ * @property {LH.Result.FullPageScreenshot} fullPageScreenshot
  */
 
 import {Util} from './util.js';
 
 /**
- * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+ * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
  * @param {LH.Audit.Details.Rect} rect
  * @return {boolean}
  */
@@ -131,7 +131,7 @@ export class ElementScreenshotRenderer {
    * Allows for multiple Lighthouse reports to be rendered on the page, each with their
    * own full page screenshot.
    * @param {HTMLElement} el
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
     el.style.setProperty('--element-screenshot-url', `url('${screenshot.data}')`);
@@ -213,7 +213,7 @@ export class ElementScreenshotRenderer {
    * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
    * Returns null if element rect is outside screenshot bounds.
    * @param {DOM} dom
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
    * @param {Rect} elementRectSC Region of screenshot to highlight.
    * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
    * @return {Element|null}

package/report/renderer/report-renderer.js

@@ -268,12 +268,8 @@ export class ReportRenderer {
     Util.i18n = i18n;
     Util.reportJson = report;
 
-    const fullPageScreenshot =
-      report.audits['full-page-screenshot']?.details &&
-      report.audits['full-page-screenshot'].details.type === 'full-page-screenshot' ?
-      report.audits['full-page-screenshot'].details : undefined;
     const detailsRenderer = new DetailsRenderer(this._dom, {
-      fullPageScreenshot,
+      fullPageScreenshot: report.fullPageScreenshot ?? undefined,
     });
 
     const categoryRenderer = new CategoryRenderer(this._dom, detailsRenderer);
@@ -344,9 +340,9 @@ export class ReportRenderer {
     reportSection.append(this._renderReportFooter(report));
     reportContainer.append(headerContainer, reportSection);
 
-    if (fullPageScreenshot) {
+    if (report.fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(
-        this._dom.rootEl, fullPageScreenshot.screenshot);
+        this._dom.rootEl, report.fullPageScreenshot.screenshot);
     }
 
     return reportFragment;

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

@@ -60,6 +60,7 @@ export class ReportUIFeatures {
    */
   initFeatures(lhr) {
     this.json = lhr;
+    this._fullPageScreenshot = Util.getFullPageScreenshot(lhr);
 
     if (this._topbar) {
       this._topbar.enable(lhr);
@@ -299,18 +300,13 @@ export class ReportUIFeatures {
    * @param {Element} rootEl
    */
   _setupElementScreenshotOverlay(rootEl) {
-    const fullPageScreenshot =
-      this.json.audits['full-page-screenshot'] &&
-      this.json.audits['full-page-screenshot'].details &&
-      this.json.audits['full-page-screenshot'].details.type === 'full-page-screenshot' &&
-      this.json.audits['full-page-screenshot'].details;
-    if (!fullPageScreenshot) return;
+    if (!this._fullPageScreenshot) return;
 
     ElementScreenshotRenderer.installOverlayFeature({
       dom: this._dom,
       rootEl: rootEl,
       overlayContainerEl: rootEl,
-      fullPageScreenshot,
+      fullPageScreenshot: this._fullPageScreenshot,
     });
   }
 

package/report/renderer/util.js

@@ -212,9 +212,39 @@ class Util {
       });
     }
 
+    // In 10.0, full-page-screenshot became a top-level property on the LHR.
+    if (clone.audits['full-page-screenshot']) {
+      const details = /** @type {LH.Result.FullPageScreenshot=} */ (
+        clone.audits['full-page-screenshot'].details);
+      if (details) {
+        clone.fullPageScreenshot = {
+          screenshot: details.screenshot,
+          nodes: details.nodes,
+        };
+      } else {
+        clone.fullPageScreenshot = null;
+      }
+      delete clone.audits['full-page-screenshot'];
+    }
+
     return clone;
   }
 
+  /**
+   * @param {LH.Result} lhr
+   * @return {LH.Result.FullPageScreenshot=}
+   */
+  static getFullPageScreenshot(lhr) {
+    if (lhr.fullPageScreenshot) {
+      return lhr.fullPageScreenshot;
+    }
+
+    // Prior to 10.0.
+    const details = /** @type {LH.Result.FullPageScreenshot=} */ (
+      lhr.audits['full-page-screenshot']?.details);
+    return details;
+  }
+
   /**
    * Used to determine if the "passed" for the purposes of showing up in the "failed" or "passed"
    * sections of the report.

package/report/test/renderer/util-test.js

@@ -168,6 +168,26 @@ describe('util helpers', () => {
         assert.deepStrictEqual(preparedResult.audits, sampleResult.audits);
       });
 
+      it('moves full-page-screenshot audit', () => {
+        const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+
+        clonedSampleResult.audits['full-page-screenshot'] = {
+          details: {
+            type: 'full-page-screenshot',
+            ...sampleResult.fullPageScreenshot,
+          },
+        };
+        delete clonedSampleResult.fullPageScreenshot;
+
+        assert.ok(clonedSampleResult.audits['full-page-screenshot'].details.nodes); // Make sure something's being tested.
+        assert.notDeepStrictEqual(clonedSampleResult.audits, sampleResult.audits);
+
+        // Original audit results should be restored.
+        const preparedResult = Util.prepareReportResult(clonedSampleResult);
+        assert.deepStrictEqual(preparedResult.audits, sampleResult.audits);
+        assert.deepStrictEqual(preparedResult.fullPageScreenshot, sampleResult.fullPageScreenshot);
+      });
+
       it('corrects performance category without hidden group', () => {
         const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
 

package/report/test-assets/faux-psi.js

@@ -134,9 +134,9 @@ async function distinguishLHR(lhr, tabId) {
     finalSSDetails.data = await decorateScreenshot(finalSSDetails.data, tabId);
   }
 
-  const fpSSDetails = lhr.audits['full-page-screenshot']?.details;
-  if (fpSSDetails && fpSSDetails.type === 'full-page-screenshot') {
-    fpSSDetails.screenshot.data = await decorateScreenshot(fpSSDetails.screenshot.data, tabId);
+  if (lhr.fullPageScreenshot) {
+    lhr.fullPageScreenshot.screenshot.data =
+      await decorateScreenshot(lhr.fullPageScreenshot.screenshot.data, tabId);
   }
 }
 

package/types/artifacts.d.ts

@@ -146,7 +146,7 @@ export interface GathererArtifacts extends PublicGathererArtifacts,LegacyBaseArt
   /** All the input elements, including associated form and label elements. */
   Inputs: {inputs: Artifacts.InputElement[]; forms: Artifacts.FormElement[]; labels: Artifacts.LabelElement[]};
   /** Screenshot of the entire page (rather than just the above the fold content). */
-  FullPageScreenshot: Artifacts.FullPageScreenshot | null;
+  FullPageScreenshot: LHResult.FullPageScreenshot | null;
   /** Information about event listeners registered on the global object. */
   GlobalListeners: Array<Artifacts.GlobalListener>;
   /** The issues surfaced in the devtools Issues panel */
@@ -770,16 +770,6 @@ declare module Artifacts {
     npm?: string;
   }
 
-  interface FullPageScreenshot {
-    screenshot: {
-      /** Base64 image data URL. */
-      data: string;
-      width: number;
-      height: number;
-    };
-    nodes: Record<string, Rect>;
-  }
-
   interface TimingSummary {
     firstContentfulPaint: number | undefined;
     firstContentfulPaintTs: number | undefined;

package/types/lhr/audit-details.d.ts

@@ -15,7 +15,6 @@ type Details =
   Details.List |
   Details.Opportunity |
   Details.Screenshot |
-  Details.FullPageScreenshot |
   Details.Table;
 
 // Details namespace.
@@ -79,22 +78,6 @@ declare module Details {
     data: string;
   }
 
-  /**
-   * A screenshot of the entire page, including width and height information,
-   * and the locations of interesting nodes.
-   * Used by element screenshots renderer.
-   */
-  interface FullPageScreenshot {
-    type: 'full-page-screenshot';
-    screenshot: {
-      /** Base64 image data URL. */
-      data: string;
-      width: number;
-      height: number;
-    };
-    nodes: Record<string, Rect>;
-  }
-
   interface Rect {
     width: number;
     height: number;

package/types/lhr/lhr.d.ts

@@ -5,6 +5,7 @@
  */
 
 import {Result as AuditResult} from './audit-result';
+import AuditDetails from './audit-details.js';
 import {ConfigSettings} from './settings';
 
 /**
@@ -55,6 +56,8 @@ interface Result {
   };
   /** An array containing the result of all stack packs. */
   stackPacks?: Result.StackPack[];
+  /** Screenshot taken of the full page, with node rects referencing audit results. If there was an error with collection, this is null. If disabled via the disableFullPageScreenshot setting, this is undefined. */
+  fullPageScreenshot?: Result.FullPageScreenshot | null;
 }
 
 // Result namespace
@@ -138,6 +141,16 @@ declare module Result {
     descriptions: Record<string, string>;
   }
 
+  interface FullPageScreenshot {
+    screenshot: {
+      /** Base64 image data URL. */
+      data: string;
+      width: number;
+      height: number;
+    };
+    nodes: Record<string, AuditDetails.Rect>;
+  }
+
   /**
    * Info about an `LH.IcuMessage` value that was localized to a string when
    * included in the LHR. Value is either a

package/types/lhr/settings.d.ts

@@ -112,6 +112,8 @@ export type ScreenEmulationSettings = {
   cpuQuietThresholdMs?: number;
   /** The URL to use for the "blank" neutral page in between navigations. Defaults to `about:blank`. */
   blankPage?: string;
+  /** Disables collection of the full page screenshot, which can be rather large and possibly leave the page in an undesirable state. */
+  disableFullPageScreenshot?: boolean;
 }
 
 export interface ConfigSettings extends Required<SharedFlagsSettings> {

package/types/smokehouse.d.ts

@@ -22,7 +22,8 @@ declare global {
       };
       timing?: {
         entries?: any
-      }
+      };
+      fullPageScreenshot?: any;
     }
 
     export type ExpectedRunnerResult = {

package/core/audits/full-page-screenshot.js

@@ -1,42 +0,0 @@
-/**
- * @license Copyright 2020 Google Inc. 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 {Audit} from './audit.js';
-
-class FullPageScreenshot extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'full-page-screenshot',
-      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
-      title: 'Full-page screenshot',
-      description: 'A full-height screenshot of the final rendered page',
-      requiredArtifacts: ['FullPageScreenshot'],
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts) {
-    if (!artifacts.FullPageScreenshot) {
-      return {score: 0, notApplicable: true};
-    }
-
-    return {
-      score: 1,
-      details: {
-        type: 'full-page-screenshot',
-        ...artifacts.FullPageScreenshot,
-      },
-    };
-  }
-}
-
-export default FullPageScreenshot;