lighthouse 9.5.0-dev.20230111 → 9.5.0-dev.20230113

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20230111",
+  "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.
@@ -512,14 +542,24 @@ class Util {
         summary = cpuThrottling = networkThrottling = Util.i18n.strings.runtimeUnknown;
     }
 
+    // devtools-entry.js always sets `screenEmulation.disabled` when using mobile emulation,
+    // because we handle the emulation outside of Lighthouse. Since the screen truly is emulated
+    // as a mobile device, ignore `.disabled` in devtools and just check the form factor
+    const isScreenEmulationDisabled = settings.channel === 'devtools' ?
+      false :
+      settings.screenEmulation.disabled;
+    const isScreenEmulationMobile = settings.channel === 'devtools' ?
+      settings.formFactor === 'mobile' :
+      settings.screenEmulation.mobile;
+
     let deviceEmulation = Util.i18n.strings.runtimeMobileEmulation;
-    if (settings.screenEmulation.disabled) {
+    if (isScreenEmulationDisabled) {
       deviceEmulation = Util.i18n.strings.runtimeNoEmulation;
-    } else if (!settings.screenEmulation.mobile) {
+    } else if (!isScreenEmulationMobile) {
       deviceEmulation = Util.i18n.strings.runtimeDesktopEmulation;
     }
 
-    const screenEmulation = settings.screenEmulation.disabled ?
+    const screenEmulation = isScreenEmulationDisabled ?
       undefined :
       // eslint-disable-next-line max-len
       `${settings.screenEmulation.width}x${settings.screenEmulation.height}, DPR ${settings.screenEmulation.deviceScaleFactor}`;

package/report/test/generator/report-generator-test.js

@@ -108,7 +108,7 @@ describe('ReportGenerator', () => {
 category,score
 \\"performance\\",\\"0.26\\"
 \\"accessibility\\",\\"0.77\\"
-\\"best-practices\\",\\"0.27\\"
+\\"best-practices\\",\\"0.25\\"
 \\"seo\\",\\"0.67\\"
 \\"pwa\\",\\"0.33\\"
 

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

@@ -37,8 +37,10 @@ describe('util helpers', () => {
     /* eslint-disable max-len */
     assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: false, mobile: true}}), 'Emulated Moto G4');
     assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: true, mobile: true}}), 'No emulation');
+    assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: true, mobile: true}, channel: 'devtools'}), 'Emulated Moto G4');
     assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: false, mobile: false}}), 'Emulated Desktop');
     assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: true, mobile: false}}), 'No emulation');
+    assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: true, mobile: true}, channel: 'devtools'}), 'Emulated Desktop');
     /* eslint-enable max-len */
   });
 
@@ -166,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/config.d.ts

@@ -14,25 +14,25 @@ interface ClassOf<T> {
   new (): T;
 }
 
-declare module Config {
-  /**
-   * The pre-normalization Lighthouse Config format.
-   */
-  interface Json {
-    extends?: 'lighthouse:default' | string;
-    settings?: SharedFlagsSettings;
-    audits?: Config.AuditJson[] | null;
-    categories?: Record<string, CategoryJson> | null;
-    groups?: Record<string, Config.GroupJson> | null;
-    plugins?: Array<string>;
-
-    // Fraggle Rock Only
-    artifacts?: ArtifactJson[] | null;
-
-    // Legacy Only
-    passes?: PassJson[] | null;
-  }
+/**
+ * The Lighthouse Config format.
+ */
+interface Config {
+  extends?: 'lighthouse:default' | string;
+  settings?: SharedFlagsSettings;
+  audits?: Config.AuditJson[] | null;
+  categories?: Record<string, Config.CategoryJson> | null;
+  groups?: Record<string, Config.GroupJson> | null;
+  plugins?: Array<string>;
+
+  // Fraggle Rock Only
+  artifacts?: Config.ArtifactJson[] | null;
+
+  // Legacy Only
+  passes?: Config.PassJson[] | null;
+}
 
+declare module Config {
   /**
    * The normalized and fully resolved legacy config.
    */

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 = {
@@ -37,7 +38,7 @@ declare global {
       /** Expected test results. */
       expectations: ExpectedRunnerResult;
       /** An optional custom config. If none is present, uses the default Lighthouse config. */
-      config?: Config.Json;
+      config?: Config;
       /** If test is performance sensitive, set to true so that it won't be run parallel to other tests. */
       runSerially?: boolean;
     }
@@ -52,7 +53,7 @@ declare global {
       {expectations: Smokehouse.ExpectedRunnerResult | Array<Smokehouse.ExpectedRunnerResult>}
 
     export type LighthouseRunner =
-      {runnerName?: string} & ((url: string, configJson?: Config.Json, runnerOptions?: {isDebug?: boolean; useLegacyNavigation?: boolean}) => Promise<{lhr: LHResult, artifacts: Artifacts, log: string}>);
+      {runnerName?: string} & ((url: string, config?: Config, runnerOptions?: {isDebug?: boolean; useLegacyNavigation?: boolean}) => Promise<{lhr: LHResult, artifacts: Artifacts, log: string}>);
 
     export interface SmokehouseOptions {
       /** If true, performs extra logging from the test runs. */

package/types/user-flow.d.ts

@@ -8,7 +8,7 @@ declare module UserFlow {
 
   export interface Options {
     /** Config to use for each flow step. */
-    config?: LH.Config.Json;
+    config?: LH.Config;
     /** Base flags to use for each flow step. Step specific flags will override these flags. */
     flags?: LH.Flags;
     /** Display name for this user flow. */

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;