lighthouse 9.4.0-dev.20220307 → 9.5.0

package/lighthouse-cli/test/smokehouse/lighthouse-runners/devtools.js

@@ -75,10 +75,13 @@ async function runLighthouse(url, configJson, testRunnerOptions = {}) {
   await buildDevtoolsPromise;
 
   const outputDir = fs.mkdtempSync(os.tmpdir() + '/lh-smoke-cdt-runner-');
+  const chromeFlags = [
+    `--custom-devtools-frontend=file://${devtoolsDir}/out/Default/gen/front_end`,
+  ];
   const args = [
     'run-devtools',
     url,
-    `--custom-devtools-frontend=file://${devtoolsDir}/out/Default/gen/front_end`,
+    `--chrome-flags=${chromeFlags.join(' ')}`,
     '--output-dir', outputDir,
   ];
   if (configJson) {

package/lighthouse-core/fraggle-rock/api.js

@@ -5,16 +5,16 @@
  */
 'use strict';
 
+const {UserFlow, auditGatherSteps} = require('./user-flow.js');
 const {snapshotGather} = require('./gather/snapshot-runner.js');
 const {startTimespanGather} = require('./gather/timespan-runner.js');
 const {navigationGather} = require('./gather/navigation-runner.js');
 const {generateFlowReportHtml} = require('../../report/generator/report-generator.js');
 const Runner = require('../runner.js');
-const UserFlow = require('./user-flow.js');
 
 /**
  * @param {import('puppeteer').Page} page
- * @param {UserFlow.UserFlowOptions} [options]
+ * @param {ConstructorParameters<LH.UserFlow>[1]} [options]
  */
 async function startFlow(page, options) {
   return new UserFlow(page, options);
@@ -58,10 +58,20 @@ async function generateFlowReport(flowResult) {
   return generateFlowReportHtml(flowResult);
 }
 
+/**
+ * @param {LH.UserFlow.FlowArtifacts} flowArtifacts
+ * @param {LH.Config.Json} [config]
+ */
+async function auditFlowArtifacts(flowArtifacts, config) {
+  const {gatherSteps, name} = flowArtifacts;
+  return await auditGatherSteps(gatherSteps, {name, config});
+}
+
 module.exports = {
   snapshot,
   startTimespan,
   navigation,
   startFlow,
   generateFlowReport,
+  auditFlowArtifacts,
 };

package/lighthouse-core/fraggle-rock/user-flow.js

@@ -10,11 +10,12 @@ const {snapshotGather} = require('./gather/snapshot-runner.js');
 const {startTimespanGather} = require('./gather/timespan-runner.js');
 const {navigationGather} = require('./gather/navigation-runner.js');
 const Runner = require('../runner.js');
+const {initializeConfig} = require('./config/config.js');
 
 /** @typedef {Parameters<snapshotGather>[0]} FrOptions */
 /** @typedef {Omit<FrOptions, 'page'> & {name?: string}} UserFlowOptions */
 /** @typedef {Omit<FrOptions, 'page'> & {stepName?: string}} StepOptions */
-/** @typedef {{gatherResult: LH.Gatherer.FRGatherResult, name: string}} StepArtifact */
+/** @typedef {WeakMap<LH.UserFlow.GatherStep, LH.Gatherer.FRGatherResult['runnerOptions']>} GatherStepRunnerOptions */
 
 class UserFlow {
   /**
@@ -26,8 +27,10 @@ class UserFlow {
     this.options = {page, ...options};
     /** @type {string|undefined} */
     this.name = options?.name;
-    /** @type {StepArtifact[]} */
-    this.stepArtifacts = [];
+    /** @type {LH.UserFlow.GatherStep[]} */
+    this._gatherSteps = [];
+    /** @type {GatherStepRunnerOptions} */
+    this._gatherStepRunnerOptions = new WeakMap();
   }
 
   /**
@@ -68,8 +71,8 @@ class UserFlow {
     }
 
     // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
-    const isSubsequentNavigation = this.stepArtifacts
-      .some(step => step.gatherResult.artifacts.GatherContext.gatherMode === 'navigation');
+    const isSubsequentNavigation = this._gatherSteps
+      .some(step => step.artifacts.GatherContext.gatherMode === 'navigation');
     if (isSubsequentNavigation) {
       if (settingsOverrides.disableStorageReset === undefined) {
         settingsOverrides.disableStorageReset = true;
@@ -82,6 +85,23 @@ class UserFlow {
     return options;
   }
 
+  /**
+   *
+   * @param {LH.Gatherer.FRGatherResult} gatherResult
+   * @param {StepOptions} options
+   */
+  _addGatherStep(gatherResult, options) {
+    const providedName = options?.stepName;
+    const gatherStep = {
+      artifacts: gatherResult.artifacts,
+      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
+      config: options.config,
+      configContext: options.configContext,
+    };
+    this._gatherSteps.push(gatherStep);
+    this._gatherStepRunnerOptions.set(gatherStep, gatherResult.runnerOptions);
+  }
+
   /**
    * @param {LH.NavigationRequestor} requestor
    * @param {StepOptions=} stepOptions
@@ -89,16 +109,10 @@ class UserFlow {
   async navigate(requestor, stepOptions) {
     if (this.currentTimespan) throw new Error('Timespan already in progress');
 
-    const gatherResult = await navigationGather(
-      requestor,
-      this._getNextNavigationOptions(stepOptions)
-    );
+    const options = this._getNextNavigationOptions(stepOptions);
+    const gatherResult = await navigationGather(requestor, options);
 
-    const providedName = stepOptions?.stepName;
-    this.stepArtifacts.push({
-      gatherResult,
-      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
-    });
+    this._addGatherStep(gatherResult, options);
 
     return gatherResult;
   }
@@ -121,11 +135,7 @@ class UserFlow {
     const gatherResult = await timespan.endTimespanGather();
     this.currentTimespan = undefined;
 
-    const providedName = options?.stepName;
-    this.stepArtifacts.push({
-      gatherResult,
-      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
-    });
+    this._addGatherStep(gatherResult, options);
 
     return gatherResult;
   }
@@ -139,11 +149,7 @@ class UserFlow {
     const options = {...this.options, ...stepOptions};
     const gatherResult = await snapshotGather(options);
 
-    const providedName = stepOptions?.stepName;
-    this.stepArtifacts.push({
-      gatherResult,
-      name: providedName || this._getDefaultStepName(gatherResult.artifacts),
-    });
+    this._addGatherStep(gatherResult, options);
 
     return gatherResult;
   }
@@ -152,21 +158,11 @@ class UserFlow {
    * @returns {Promise<LH.FlowResult>}
    */
   async createFlowResult() {
-    if (!this.stepArtifacts.length) {
-      throw new Error('Need at least one step before getting the result');
-    }
-    const url = new URL(this.stepArtifacts[0].gatherResult.artifacts.URL.finalUrl);
-    const flowName = this.name || `User flow (${url.hostname})`;
-
-    /** @type {LH.FlowResult['steps']} */
-    const steps = [];
-    for (const {gatherResult, name} of this.stepArtifacts) {
-      const result = await Runner.audit(gatherResult.artifacts, gatherResult.runnerOptions);
-      if (!result) throw new Error(`Step "${name}" did not return a result`);
-      steps.push({lhr: result.lhr, name});
-    }
-
-    return {steps, name: flowName};
+    return auditGatherSteps(this._gatherSteps, {
+      name: this.name,
+      config: this.options.config,
+      gatherStepRunnerOptions: this._gatherStepRunnerOptions,
+    });
   }
 
   /**
@@ -176,6 +172,58 @@ class UserFlow {
     const flowResult = await this.createFlowResult();
     return generateFlowReportHtml(flowResult);
   }
+
+  /**
+   * @return {LH.UserFlow.FlowArtifacts}
+   */
+  createArtifactsJson() {
+    return {
+      gatherSteps: this._gatherSteps,
+      name: this.name,
+    };
+  }
+}
+
+/**
+ * @param {Array<LH.UserFlow.GatherStep>} gatherSteps
+ * @param {{name?: string, config?: LH.Config.Json, gatherStepRunnerOptions?: GatherStepRunnerOptions}} options
+ */
+async function auditGatherSteps(gatherSteps, options) {
+  if (!gatherSteps.length) {
+    throw new Error('Need at least one step before getting the result');
+  }
+
+  /** @type {LH.FlowResult['steps']} */
+  const steps = [];
+  for (const gatherStep of gatherSteps) {
+    const {artifacts, name, configContext} = gatherStep;
+
+    let runnerOptions = options.gatherStepRunnerOptions?.get(gatherStep);
+
+    // If the gather step is not active, we must recreate the runner options.
+    if (!runnerOptions) {
+      // Step specific configs take precedence over a config for the entire flow.
+      const configJson = gatherStep.config || options.config;
+      const {gatherMode} = artifacts.GatherContext;
+      const {config} = initializeConfig(configJson, {...configContext, gatherMode});
+      runnerOptions = {
+        config,
+        computedCache: new Map(),
+      };
+    }
+
+    const result = await Runner.audit(artifacts, runnerOptions);
+    if (!result) throw new Error(`Step "${name}" did not return a result`);
+    steps.push({lhr: result.lhr, name});
+  }
+
+  const url = new URL(gatherSteps[0].artifacts.URL.finalUrl);
+  const flowName = options.name || `User flow (${url.hostname})`;
+  return {steps, name: flowName};
 }
 
-module.exports = UserFlow;
+
+module.exports = {
+  UserFlow,
+  auditGatherSteps,
+};

package/lighthouse-core/gather/gatherers/full-page-screenshot.js

@@ -70,21 +70,22 @@ class FullPageScreenshot extends FRGatherer {
 
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
+   * @param {{height: number, width: number, mobile: boolean}} deviceMetrics
    * @return {Promise<LH.Artifacts.FullPageScreenshot['screenshot']>}
    */
-  async _takeScreenshot(context) {
+  async _takeScreenshot(context, deviceMetrics) {
     const session = context.driver.defaultSession;
     const maxTextureSize = await this.getMaxTextureSize(context);
     const metrics = await session.sendCommand('Page.getLayoutMetrics');
 
-    // Width should match emulated width, without considering content overhang.
-    // Both layoutViewport and visualViewport capture this. visualViewport accounts
-    // for page zoom/scale, which we currently don't account for (or expect). So we use layoutViewport.width.
-    // Note: If the page is zoomed, many assumptions fail.
-    //
-    // Height should be as tall as the content. So we use contentSize.height
-    const width = Math.min(metrics.layoutViewport.clientWidth, maxTextureSize);
-    const height = Math.min(metrics.contentSize.height, maxTextureSize);
+    // Height should be as tall as the content.
+    // Scale the emulated height to reach the content height.
+    const fullHeight = Math.round(
+      deviceMetrics.height *
+      metrics.contentSize.height /
+      metrics.layoutViewport.clientHeight
+    );
+    const height = Math.min(fullHeight, maxTextureSize);
 
     // Setup network monitor before we change the viewport.
     const networkMonitor = new NetworkMonitor(session);
@@ -98,13 +99,10 @@ class FullPageScreenshot extends FRGatherer {
     await networkMonitor.enable();
 
     await session.sendCommand('Emulation.setDeviceMetricsOverride', {
-      // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
-      mobile: context.settings.screenEmulation.mobile,
-      height,
-      width,
+      mobile: deviceMetrics.mobile,
       deviceScaleFactor: 1,
-      scale: 1,
-      screenOrientation: {angle: 0, type: 'portraitPrimary'},
+      height,
+      width: 0, // Leave width unchanged
     });
 
     // Now that the viewport is taller, give the page some time to fetch new resources that
@@ -127,7 +125,7 @@ class FullPageScreenshot extends FRGatherer {
 
     return {
       data,
-      width,
+      width: deviceMetrics.width,
       height,
     };
   }
@@ -185,29 +183,37 @@ class FullPageScreenshot extends FRGatherer {
     const session = context.driver.defaultSession;
     const executionContext = context.driver.executionContext;
     const settings = context.settings;
-
-    // In case some other program is controlling emulation, remember what the device looks
-    // like now and reset after gatherer is done.
-    let observedDeviceMetrics;
     const lighthouseControlsEmulation = !settings.screenEmulation.disabled;
+
+    // Make a copy so we don't modify the config settings.
+    /** @type {{width: number, height: number, deviceScaleFactor: number, mobile: boolean}} */
+    const deviceMetrics = {...settings.screenEmulation};
+
+    // In case some other program is controlling emulation, remember what the device looks like now and reset after gatherer is done.
+    // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
     if (!lighthouseControlsEmulation) {
-      observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
+      const observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
         args: [],
         useIsolation: true,
         deps: [kebabCaseToCamelCase],
       });
+      deviceMetrics.height = observedDeviceMetrics.height;
+      deviceMetrics.width = observedDeviceMetrics.width;
+      deviceMetrics.deviceScaleFactor = observedDeviceMetrics.deviceScaleFactor;
+      // If screen emulation is disabled, use formFactor to determine if we are on mobile.
+      deviceMetrics.mobile = settings.formFactor === 'mobile';
     }
 
     try {
       return {
-        screenshot: await this._takeScreenshot(context),
+        screenshot: await this._takeScreenshot(context, deviceMetrics),
         nodes: await this._resolveNodes(context),
       };
     } finally {
       // Revert resized page.
       if (lighthouseControlsEmulation) {
         await emulation.emulate(session, settings);
-      } else if (observedDeviceMetrics) {
+      } else {
         // Best effort to reset emulation to what it was.
         // https://github.com/GoogleChrome/lighthouse/pull/10716#discussion_r428970681
         // TODO: seems like this would be brittle. Should at least work for devtools, but what
@@ -216,8 +222,10 @@ class FullPageScreenshot extends FRGatherer {
         // and then just call that to reset?
         // https://github.com/GoogleChrome/lighthouse/issues/11122
         await session.sendCommand('Emulation.setDeviceMetricsOverride', {
-          mobile: settings.formFactor === 'mobile',
-          ...observedDeviceMetrics,
+          mobile: deviceMetrics.mobile,
+          deviceScaleFactor: deviceMetrics.deviceScaleFactor,
+          height: deviceMetrics.height,
+          width: 0, // Leave width unchanged
         });
       }
     }

package/lighthouse-core/lib/asset-saver.js

@@ -313,6 +313,20 @@ async function saveLanternNetworkData(devtoolsLog, outputPath) {
   fs.writeFileSync(outputPath, JSON.stringify(lanternData));
 }
 
+/**
+ * Normalize timing data so it doesn't change every update.
+ * @param {LH.Result.MeasureEntry[]} timings
+ */
+function normalizeTimingEntries(timings) {
+  let baseTime = 0;
+  for (const timing of timings) {
+    // @ts-expect-error: Value actually is writeable at this point.
+    timing.startTime = baseTime++;
+    // @ts-expect-error: Value actually is writeable at this point.
+    timing.duration = 1;
+  }
+}
+
 module.exports = {
   saveArtifacts,
   saveLhr,
@@ -323,4 +337,5 @@ module.exports = {
   saveDevtoolsLog,
   saveLanternNetworkData,
   stringifyReplacer,
+  normalizeTimingEntries,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.4.0-dev.20220307",
+  "version": "9.5.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -76,6 +76,7 @@
     "update:sample-artifacts": "node lighthouse-core/scripts/update-report-fixtures.js",
     "update:sample-json": "yarn i18n:collect-strings && node ./lighthouse-cli -A=./lighthouse-core/test/results/artifacts --config-path=./lighthouse-core/test/results/sample-config.js --output=json --output-path=./lighthouse-core/test/results/sample_v2.json && node lighthouse-core/scripts/cleanup-LHR-for-diff.js ./lighthouse-core/test/results/sample_v2.json --only-remove-timing",
     "update:flow-sample-json": "node ./lighthouse-core/scripts/update-flow-fixtures.js",
+    "update:snapshot-sample-json": "node ./lighthouse-core/scripts/update-snapshot-sample.js",
     "update:test-devtools": "bash lighthouse-core/test/chromium-web-tests/test-locally.sh --reset-results",
     "test-devtools": "bash lighthouse-core/test/chromium-web-tests/test-locally.sh",
     "open-devtools": "bash lighthouse-core/scripts/open-devtools.sh",

package/report/assets/templates.html

@@ -189,7 +189,8 @@ limitations under the License.
       animation: none;
     }
 
-    .lh-sticky-header .lh-gauge__label {
+    .lh-sticky-header .lh-gauge__label,
+    .lh-sticky-header .lh-fraction__label {
       display: none;
     }
 

package/report/renderer/components.js

@@ -445,7 +445,7 @@ function createScorescaleComponent(dom) {
 function createScoresWrapperComponent(dom) {
   const el0 = dom.createFragment();
   const el1 = dom.createElement('style');
-  el1.append('\n    .lh-scores-container {\n      display: flex;\n      flex-direction: column;\n      padding: var(--default-padding) 0;\n      position: relative;\n      width: 100%;\n    }\n\n    .lh-sticky-header {\n      --gauge-circle-size: var(--gauge-circle-size-sm);\n      --plugin-badge-size: 16px;\n      --plugin-icon-size: 75%;\n      --gauge-wrapper-width: 60px;\n      --gauge-percentage-font-size: 13px;\n      position: fixed;\n      left: 0;\n      right: 0;\n      top: var(--topbar-height);\n      font-weight: 500;\n      display: none;\n      justify-content: center;\n      background-color: var(--sticky-header-background-color);\n      border-bottom: 1px solid var(--color-gray-200);\n      padding-top: var(--score-container-padding);\n      padding-bottom: 4px;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .lh-devtools .lh-sticky-header {\n      /* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */\n      position: sticky;\n    }\n\n    .lh-sticky-header--visible {\n      display: grid;\n      grid-auto-flow: column;\n      pointer-events: auto;\n    }\n\n    /* Disable the gauge arc animation for the sticky header, so toggling display: none\n       does not play the animation. */\n    .lh-sticky-header .lh-gauge-arc {\n      animation: none;\n    }\n\n    .lh-sticky-header .lh-gauge__label {\n      display: none;\n    }\n\n    .lh-highlighter {\n      width: var(--gauge-wrapper-width);\n      height: 1px;\n      background-color: var(--highlighter-background-color);\n      /* Position at bottom of first gauge in sticky header. */\n      position: absolute;\n      grid-column: 1;\n      bottom: -1px;\n    }\n\n    .lh-gauge__wrapper:first-of-type {\n      contain: none;\n    }\n  ');
+  el1.append('\n    .lh-scores-container {\n      display: flex;\n      flex-direction: column;\n      padding: var(--default-padding) 0;\n      position: relative;\n      width: 100%;\n    }\n\n    .lh-sticky-header {\n      --gauge-circle-size: var(--gauge-circle-size-sm);\n      --plugin-badge-size: 16px;\n      --plugin-icon-size: 75%;\n      --gauge-wrapper-width: 60px;\n      --gauge-percentage-font-size: 13px;\n      position: fixed;\n      left: 0;\n      right: 0;\n      top: var(--topbar-height);\n      font-weight: 500;\n      display: none;\n      justify-content: center;\n      background-color: var(--sticky-header-background-color);\n      border-bottom: 1px solid var(--color-gray-200);\n      padding-top: var(--score-container-padding);\n      padding-bottom: 4px;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .lh-devtools .lh-sticky-header {\n      /* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */\n      position: sticky;\n    }\n\n    .lh-sticky-header--visible {\n      display: grid;\n      grid-auto-flow: column;\n      pointer-events: auto;\n    }\n\n    /* Disable the gauge arc animation for the sticky header, so toggling display: none\n       does not play the animation. */\n    .lh-sticky-header .lh-gauge-arc {\n      animation: none;\n    }\n\n    .lh-sticky-header .lh-gauge__label,\n    .lh-sticky-header .lh-fraction__label {\n      display: none;\n    }\n\n    .lh-highlighter {\n      width: var(--gauge-wrapper-width);\n      height: 1px;\n      background-color: var(--highlighter-background-color);\n      /* Position at bottom of first gauge in sticky header. */\n      position: absolute;\n      grid-column: 1;\n      bottom: -1px;\n    }\n\n    .lh-gauge__wrapper:first-of-type {\n      contain: none;\n    }\n  ');
   el0.append(el1);
   const el2 = dom.createElement('div', 'lh-scores-wrapper');
   const el3 = dom.createElement('div', 'lh-scores-container');

package/report/renderer/topbar-features.js

@@ -306,7 +306,8 @@ export class TopbarFeatures {
       categoriesAboveTheMiddle.length > 0 ? categoriesAboveTheMiddle.length - 1 : 0;
 
     // Category order matches gauge order in sticky header.
-    const gaugeWrapperEls = this.stickyHeaderEl.querySelectorAll('.lh-gauge__wrapper');
+    const gaugeWrapperEls =
+      this.stickyHeaderEl.querySelectorAll('.lh-gauge__wrapper, .lh-fraction__wrapper');
     const gaugeToHighlight = gaugeWrapperEls[highlightIndex];
     const origin = gaugeWrapperEls[0].getBoundingClientRect().left;
     const offset = gaugeToHighlight.getBoundingClientRect().left - origin;

package/third-party/snyk/snapshot.json

@@ -133,6 +133,7 @@
       {"id":"npm:mustache:20110814","severity":"medium","semver":{"vulnerable":["< 0.3.1"]}}
     ],
     "next":[
+      {"id":"SNYK-JS-NEXT-2405694","severity":"medium","semver":{"vulnerable":[">=10.0.0 <12.1.0"]}},
       {"id":"SNYK-JS-NEXT-2388583","severity":"medium","semver":{"vulnerable":[">=12.0.0 <12.0.9"]}},
       {"id":"SNYK-JS-NEXT-2312745","severity":"high","semver":{"vulnerable":[">=12.0.0 <12.0.5",">=11.1.0 <11.1.3"]}},
       {"id":"SNYK-JS-NEXT-1577139","severity":"medium","semver":{"vulnerable":[">=10.0.0 <11.1.1"]}},

package/types/global-lh.d.ts

@@ -21,6 +21,7 @@ import Protocol_ from './protocol';
 import * as Settings from './lhr/settings';
 import StructuredData_ from './structured-data';
 import Treemap_ from './lhr/treemap';
+import UserFlow_ from './user-flow';
 
 // Construct hierarchy of global types under the LH namespace.
 declare global {
@@ -46,6 +47,8 @@ declare global {
     export import CrdpEvents = _CrdpMappings.Events;
     export import CrdpCommands = _CrdpMappings.Commands;
 
+    export import UserFlow = UserFlow_;
+
     // externs.d.ts
     export import Flags = Externs.Flags;
     export import CliFlags = Externs.CliFlags;

package/types/user-flow.d.ts

@@ -0,0 +1,19 @@
+import {UserFlow as UserFlow_} from '../lighthouse-core/fraggle-rock/user-flow';
+
+declare module UserFlow {
+  export interface FlowArtifacts {
+    gatherSteps: GatherStep[];
+    name?: string;
+  }
+
+  export interface GatherStep {
+    artifacts: LH.Artifacts;
+    name: string;
+    config?: LH.Config.Json;
+    configContext?: LH.Config.FRContext;
+  }
+}
+
+type UserFlow = typeof UserFlow_;
+
+export default UserFlow;