lighthouse 9.0.0 → 9.1.0

package/lighthouse-core/computed/js-bundles.js

@@ -98,9 +98,7 @@ class JSBundles {
 
       const compiledUrl = SourceMap.scriptUrl || 'compiled.js';
       const mapUrl = SourceMap.sourceMapUrl || 'compiled.js.map';
-      // Hack: CDT expects undefined properties to be explicit.
-      const rawMapForCdt = /** @type {any} */ (rawMap);
-      const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMapForCdt);
+      const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMap);
 
       const content = scriptElement && scriptElement.content ? scriptElement.content : '';
       const sizes = computeGeneratedFileSizes(map, content);

package/lighthouse-core/fraggle-rock/gather/navigation-runner.js

@@ -142,8 +142,8 @@ async function _collectDebugData(navigationContext, phaseState) {
 /**
  * @param {NavigationContext} navigationContext
  * @param {PhaseState} phaseState
- * @param {UnPromise<ReturnType<typeof _setupNavigation>>} setupResult
- * @param {UnPromise<ReturnType<typeof _navigate>>} navigateResult
+ * @param {Awaited<ReturnType<typeof _setupNavigation>>} setupResult
+ * @param {Awaited<ReturnType<typeof _navigate>>} navigateResult
  * @return {Promise<{finalUrl: string, artifacts: Partial<LH.GathererArtifacts>, warnings: Array<LH.IcuMessage>, pageLoadError: LH.LighthouseError | undefined}>}
  */
 async function _computeNavigationResult(
@@ -195,7 +195,7 @@ async function _computeNavigationResult(
 async function _navigation(navigationContext) {
   const artifactState = getEmptyArtifactState();
   const phaseState = {
-    gatherMode: /** @type {'navigation'} */ ('navigation'),
+    gatherMode: /** @type {const} */ ('navigation'),
     driver: navigationContext.driver,
     computedCache: navigationContext.computedCache,
     artifactDefinitions: navigationContext.navigation.artifacts,

package/lighthouse-core/gather/driver/execution-context.js

@@ -166,7 +166,7 @@ class ExecutionContext {
    * @param {{args: T, useIsolation?: boolean, deps?: Array<Function|string>}} options `args` should
    *   match the args of `mainFn`, and can be any serializable value. `deps` are functions that must be
    *   defined for `mainFn` to work.
-   * @return {FlattenedPromise<R>}
+   * @return {Promise<Awaited<R>>}
    */
   evaluate(mainFn, options) {
     const argsSerialized = ExecutionContext.serializeArguments(options.args);

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

@@ -16,19 +16,19 @@ const pageFunctions = require('../../lib/page-functions.js');
 const FULL_PAGE_SCREENSHOT_QUALITY = 30;
 
 /**
- * @param {string} str
+ * @template {string} S
+ * @param {S} str
  */
-function snakeCaseToCamelCase(str) {
-  return str.replace(/(-\w)/g, m => m[1].toUpperCase());
+function kebabCaseToCamelCase(str) {
+  return /** @type {KebabToCamelCase<S>} */ (str.replace(/(-\w)/g, m => m[1].toUpperCase()));
 }
 
 /* c8 ignore start */
 
 // eslint-disable-next-line no-inner-declarations
 function getObservedDeviceMetrics() {
-  // Convert the Web API's snake case (landscape-primary) to camel case (landscapePrimary).
-  const screenOrientationType = /** @type {LH.Crdp.Emulation.ScreenOrientationType} */ (
-    snakeCaseToCamelCase(window.screen.orientation.type));
+  // Convert the Web API's kebab case (landscape-primary) to camel case (landscapePrimary).
+  const screenOrientationType = kebabCaseToCamelCase(window.screen.orientation.type);
   return {
     width: document.documentElement.clientWidth,
     height: document.documentElement.clientHeight,
@@ -168,7 +168,7 @@ class FullPageScreenshot extends FRGatherer {
       observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
         args: [],
         useIsolation: true,
-        deps: [snakeCaseToCamelCase],
+        deps: [kebabCaseToCamelCase],
       });
     }
 

package/lighthouse-core/gather/gatherers/stacks.js

@@ -82,9 +82,6 @@ class Stacks extends FRGatherer {
   constructor() {
     super();
 
-    // Because this file uses `fs.readFile` it gets parsed by a different branch of the browserify internals
-    // that cannot handle the latest ECMAScript features.
-    // See https://github.com/GoogleChrome/lighthouse/issues/12134
     /** @type {LH.Gatherer.GathererMeta} */
     this.meta = {
       supportedModes: ['snapshot', 'navigation'],

package/lighthouse-core/lib/page-functions.js

@@ -208,7 +208,8 @@ function computeBenchmarkIndex() {
 
     while (Date.now() - start < 500) {
       let s = '';
-      for (let j = 0; j < 10000; j++) s += 'a'; // eslint-disable-line no-unused-vars
+      for (let j = 0; j < 10000; j++) s += 'a';
+      if (s.length === 1) throw new Error('will never happen, but prevents compiler optimizations');
 
       iterations++;
     }

package/lighthouse-core/lib/stack-packs.js

@@ -23,14 +23,6 @@ const stackPacksToInclude = [
     packId: 'drupal',
     requiredStacks: ['js:drupal'],
   },
-  {
-    packId: 'react',
-    requiredStacks: ['js:react'],
-  },
-  {
-    packId: 'angular',
-    requiredStacks: ['js:@angular/core'],
-  },
   {
     packId: 'amp',
     requiredStacks: ['js:amp'],
@@ -47,6 +39,18 @@ const stackPacksToInclude = [
     packId: 'joomla',
     requiredStacks: ['js:joomla'],
   },
+  {
+    packId: 'next.js',
+    requiredStacks: ['js:next'],
+  },
+  {
+    packId: 'angular',
+    requiredStacks: ['js:@angular/core'],
+  },
+  {
+    packId: 'react',
+    requiredStacks: ['js:react'],
+  },
 ];
 
 /**

package/lighthouse-core/lib/statistics.js

@@ -5,6 +5,12 @@
  */
 'use strict';
 
+// The exact double values for the max and min scores possible in each range.
+const MIN_PASSING_SCORE = 0.90000000000000002220446049250313080847263336181640625;
+const MAX_AVERAGE_SCORE = 0.899999999999999911182158029987476766109466552734375;
+const MIN_AVERAGE_SCORE = 0.5;
+const MAX_FAILING_SCORE = 0.499999999999999944488848768742172978818416595458984375;
+
 /**
  * Approximates the Gauss error function, the probability that a random variable
  * from the standard normal distribution lies within [-x, x]. Moved from
@@ -28,37 +34,6 @@ function erf(x) {
   return sign * (1 - y * Math.exp(-x * x));
 }
 
-/**
- * Creates a log-normal distribution à la traceviewer's statistics package.
- * Specified by providing the median value, at which the score will be 0.5,
- * and the falloff, the initial point of diminishing returns where any
- * improvement in value will yield increasingly smaller gains in score. Both
- * values should be in the same units (e.g. milliseconds). See
- *   https://www.desmos.com/calculator/tx1wcjk8ch
- * for an interactive view of the relationship between these parameters and
- * the typical parameterization (location and shape) of the log-normal
- * distribution.
- * @param {number} median
- * @param {number} falloff
- * @return {{computeComplementaryPercentile: function(number): number}}
- */
-function getLogNormalDistribution(median, falloff) {
-  const location = Math.log(median);
-
-  // The "falloff" value specified the location of the smaller of the positive
-  // roots of the third derivative of the log-normal CDF. Calculate the shape
-  // parameter in terms of that value and the median.
-  const logRatio = Math.log(falloff / median);
-  const shape = Math.sqrt(1 - 3 * logRatio - Math.sqrt((logRatio - 3) * (logRatio - 3) - 8)) / 2;
-
-  return {
-    computeComplementaryPercentile(x) {
-      const standardizedX = (Math.log(x) - location) / (Math.SQRT2 * shape);
-      return (1 - erf(standardizedX)) / 2;
-    },
-  };
-}
-
 /**
  * Returns the score (1 - percentile) of `value` in a log-normal distribution
  * specified by the `median` value, at which the score will be 0.5, and a 10th
@@ -76,24 +51,37 @@ function getLogNormalScore({median, p10}, value) {
   // Required for the log-normal distribution.
   if (median <= 0) throw new Error('median must be greater than zero');
   if (p10 <= 0) throw new Error('p10 must be greater than zero');
-  // Not required, but if p10 > median, it flips around and becomes the p90 point.
+  // Not strictly required, but if p10 > median, it flips around and becomes the p90 point.
   if (p10 >= median) throw new Error('p10 must be less than the median');
 
   // Non-positive values aren't in the distribution, so always 1.
   if (value <= 0) return 1;
 
-  // Closest double to `erfc-1(2 * 1/10)`.
+  // Closest double to `erfc-1(1/5)`.
   const INVERSE_ERFC_ONE_FIFTH = 0.9061938024368232;
 
-  // Shape (σ) is `log(p10/median) / (sqrt(2)*erfc^-1(2 * 1/10))` and
+  // Shape (σ) is `|log(p10/median) / (sqrt(2)*erfc^-1(1/5))|` and
   // standardizedX is `1/2 erfc(log(value/median) / (sqrt(2)*σ))`, so simplify a bit.
-  const xLogRatio = Math.log(value / median);
-  const p10LogRatio = -Math.log(p10 / median); // negate to keep σ positive.
+  const xRatio = Math.max(Number.MIN_VALUE, value / median); // value and median are > 0, so is ratio.
+  const xLogRatio = Math.log(xRatio);
+  const p10Ratio = Math.max(Number.MIN_VALUE, p10 / median); // p10 and median are > 0, so is ratio.
+  const p10LogRatio = -Math.log(p10Ratio); // negate to keep σ positive.
   const standardizedX = xLogRatio * INVERSE_ERFC_ONE_FIFTH / p10LogRatio;
   const complementaryPercentile = (1 - erf(standardizedX)) / 2;
 
-  // Clamp to [0, 1] to avoid any floating-point out-of-bounds issues.
-  return Math.min(1, Math.max(0, complementaryPercentile));
+  // Clamp to avoid floating-point out-of-bounds issues and keep score in expected range.
+  let score;
+  if (value <= p10) {
+    // Passing. Clamp to [0.9, 1].
+    score = Math.max(MIN_PASSING_SCORE, Math.min(1, complementaryPercentile));
+  } else if (value <= median) {
+    // Average. Clamp to [0.5, 0.9).
+    score = Math.max(MIN_AVERAGE_SCORE, Math.min(MAX_AVERAGE_SCORE, complementaryPercentile));
+  } else {
+    // Failing. Clamp to [0, 0.5).
+    score = Math.max(0, Math.min(MAX_FAILING_SCORE, complementaryPercentile));
+  }
+  return score;
 }
 
 /**
@@ -112,6 +100,5 @@ function linearInterpolation(x0, y0, x1, y1, x) {
 
 module.exports = {
   linearInterpolation,
-  getLogNormalDistribution,
   getLogNormalScore,
 };

package/lighthouse-core/runner.js

@@ -132,7 +132,13 @@ class Runner {
 
       /** @type {LH.RawIcu<LH.Result>} */
       const i18nLhr = {
+        lighthouseVersion,
+        requestedUrl,
+        finalUrl: artifacts.URL.finalUrl,
+        fetchTime: artifacts.fetchTime,
         gatherMode: artifacts.GatherContext.gatherMode,
+        runtimeError: Runner.getArtifactRuntimeError(artifacts),
+        runWarnings: lighthouseRunWarnings,
         userAgent: artifacts.HostUserAgent,
         environment: {
           networkUserAgent: artifacts.NetworkUserAgent,
@@ -140,22 +146,16 @@ class Runner {
           benchmarkIndex: artifacts.BenchmarkIndex,
           credits,
         },
-        lighthouseVersion,
-        fetchTime: artifacts.fetchTime,
-        requestedUrl: requestedUrl,
-        finalUrl: artifacts.URL.finalUrl,
-        runWarnings: lighthouseRunWarnings,
-        runtimeError: Runner.getArtifactRuntimeError(artifacts),
         audits: auditResultsById,
         configSettings: settings,
         categories,
         categoryGroups: runOpts.config.groups || undefined,
+        stackPacks: stackPacks.getStackPacks(artifacts.Stacks),
         timing: this._getTiming(artifacts),
         i18n: {
           rendererFormattedStrings: format.getRendererFormattedStrings(settings.locale),
           icuMessagePaths: {},
         },
-        stackPacks: stackPacks.getStackPacks(artifacts.Stacks),
       };
 
       // Replace ICU message references with localized strings; save replaced paths in lhr.

package/lighthouse-core/scripts/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -108,7 +108,6 @@
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/archiver": "^2.1.2",
-    "@types/browserify": "^12.0.36",
     "@types/chrome": "^0.0.154",
     "@types/configstore": "^4.0.0",
     "@types/cpy": "^5.1.0",
@@ -138,7 +137,6 @@
     "acorn": "^8.5.0",
     "angular": "^1.7.4",
     "archiver": "^3.0.0",
-    "browserify": "^17.0.0",
     "c8": "^7.4.0",
     "chalk": "^2.4.1",
     "chrome-devtools-frontend": "1.0.922924",
@@ -181,8 +179,8 @@
     "tabulator-tables": "^4.9.3",
     "terser": "^5.3.8",
     "ts-jest": "^27.0.4",
-    "typed-query-selector": "^2.4.0",
-    "typescript": "4.4.3",
+    "typed-query-selector": "^2.6.1",
+    "typescript": "^4.5.2",
     "wait-for-expect": "^3.0.2",
     "webtreemap-cdt": "^3.2.1"
   },
@@ -198,7 +196,7 @@
     "jpeg-js": "^0.4.1",
     "js-library-detector": "^6.4.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "^1.5.0",
+    "lighthouse-stack-packs": "^1.6.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",

package/report/assets/styles.css

@@ -943,7 +943,7 @@
 
 
 .lh-audit--error .lh-audit__display-text {
-  color: var(--color-fail);
+  color: var(--color-fail-secondary);
 }
 
 /* Audit Group */
@@ -1055,7 +1055,7 @@
 }
 
 .lh-audit--fail .lh-audit-explanation {
-  color: var(--color-fail);
+  color: var(--color-fail-secondary);
 }
 
 /* Report */

package/report/generator/file-namer.js

@@ -43,4 +43,15 @@ function getLhrFilenamePrefix(lhr) {
   return getFilenamePrefix(hostname, lhr.fetchTime);
 }
 
-module.exports = {getLhrFilenamePrefix, getFilenamePrefix};
+/**
+ * Generate a filenamePrefix of name_YYYY-MM-DD_HH-MM-SS.
+ * @param {{name: string, steps: Array<{lhr: {fetchTime: string}}>}} flowResult
+ * @return {string}
+ */
+function getFlowResultFilenamePrefix(flowResult) {
+  const lhr = flowResult.steps[0].lhr;
+  const name = flowResult.name.replace(/\s/g, '-');
+  return getFilenamePrefix(name, lhr.fetchTime);
+}
+
+module.exports = {getLhrFilenamePrefix, getFilenamePrefix, getFlowResultFilenamePrefix};

package/report/generator/flow-report-assets.js

@@ -9,12 +9,13 @@ const fs = require('fs');
 
 /* eslint-disable max-len */
 const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${__dirname}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
+const REGULAR_REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
 const FLOW_REPORT_CSS = fs.readFileSync(`${__dirname}/../../flow-report/assets/styles.css`, 'utf8');
 const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${__dirname}/../../dist/report/flow.js`, 'utf8');
 /* eslint-enable max-len */
 
 module.exports = {
   FLOW_REPORT_TEMPLATE,
-  FLOW_REPORT_CSS,
+  FLOW_REPORT_CSS: [REGULAR_REPORT_CSS, FLOW_REPORT_CSS].join('\n'),
   FLOW_REPORT_JAVASCRIPT,
 };

package/report/generator/report-assets.js

@@ -12,15 +12,12 @@ const flowReportAssets = require('./flow-report-assets.js');
 const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',
     'utf8');
 const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../../dist/report/standalone.js', 'utf8');
-const REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
 
-// Changes to this export interface should be reflected in build/build-dt-report-resources.js
-// and clients/devtools-report-assets.js
 module.exports = {
   REPORT_TEMPLATE,
   REPORT_JAVASCRIPT,
-  REPORT_CSS,
   // Flow report assets are not needed for every bundle.
-  // Ignoring flow-report-assets.js (e.g. `browserify.ignore`) will remove the flow assets from the bundle.
+  // Replacing/ignoring flow-report-assets.js (e.g. `rollupPlugins.shim`) will
+  // remove the flow assets from the bundle.
   ...flowReportAssets,
 };

package/report/generator/report-generator.js

@@ -70,7 +70,6 @@ class ReportGenerator {
       {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: htmlReportAssets.FLOW_REPORT_JAVASCRIPT},
       {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: htmlReportAssets.FLOW_REPORT_CSS},
-      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
       /* eslint-enable max-len */
     ]);
   }

package/report/renderer/api.js

@@ -9,13 +9,15 @@
 import {DOM} from '../renderer/dom.js';
 import {ReportRenderer} from '../renderer/report-renderer.js';
 import {ReportUIFeatures} from '../renderer/report-ui-features.js';
+import {CategoryRenderer} from './category-renderer.js';
+import {DetailsRenderer} from './details-renderer.js';
 
 /**
  * @param {LH.Result} lhr
  * @param {LH.Renderer.Options} opts
  * @return {HTMLElement}
  */
-export function renderReport(lhr, opts = {}) {
+function renderReport(lhr, opts = {}) {
   const rootEl = document.createElement('article');
   rootEl.classList.add('lh-root', 'lh-vars');
 
@@ -30,3 +32,49 @@ export function renderReport(lhr, opts = {}) {
   features.initFeatures(lhr);
   return rootEl;
 }
+
+/**
+ * @param {LH.ReportResult.Category} category
+ * @param {Parameters<CategoryRenderer['renderCategoryScore']>[2]=} options
+ * @return {DocumentFragment}
+ */
+function renderCategoryScore(category, options) {
+  const dom = new DOM(document, document.documentElement);
+  const detailsRenderer = new DetailsRenderer(dom);
+  const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
+  return categoryRenderer.renderCategoryScore(category, {}, options);
+}
+
+/**
+ * @param {Blob} blob
+ * @param {string} filename
+ */
+function saveFile(blob, filename) {
+  const dom = new DOM(document, document.documentElement);
+  dom.saveFile(blob, filename);
+}
+
+/**
+ * @param {string} markdownText
+ * @return {Element}
+ */
+function convertMarkdownCodeSnippets(markdownText) {
+  const dom = new DOM(document, document.documentElement);
+  return dom.convertMarkdownCodeSnippets(markdownText);
+}
+
+/**
+ * @return {DocumentFragment}
+ */
+function createStylesElement() {
+  const dom = new DOM(document, document.documentElement);
+  return dom.createComponent('styles');
+}
+
+export {
+  renderReport,
+  renderCategoryScore,
+  saveFile,
+  convertMarkdownCodeSnippets,
+  createStylesElement,
+};

package/report/renderer/category-renderer.js

@@ -348,14 +348,28 @@ export class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
-   * @param {{gatherMode: LH.Result.GatherMode}=} options
+   * @param {{gatherMode: LH.Result.GatherMode, omitLabel?: boolean, onPageAnchorRendered?: (link: HTMLAnchorElement) => void}=} options
    * @return {DocumentFragment}
    */
   renderCategoryScore(category, groupDefinitions, options) {
+    let categoryScore;
     if (options && Util.shouldDisplayAsFraction(options.gatherMode)) {
-      return this.renderCategoryFraction(category);
+      categoryScore = this.renderCategoryFraction(category);
+    } else {
+      categoryScore = this.renderScoreGauge(category, groupDefinitions);
+    }
+
+    if (options?.omitLabel) {
+      const label = this.dom.find('.lh-gauge__label,.lh-fraction__label', categoryScore);
+      label.remove();
     }
-    return this.renderScoreGauge(category, groupDefinitions);
+
+    if (options?.onPageAnchorRendered) {
+      const anchor = this.dom.find('a', categoryScore);
+      options.onPageAnchorRendered(anchor);
+    }
+
+    return categoryScore;
   }
 
   /**