lighthouse 9.5.0-dev.20220509 → 9.6.1

package/lighthouse-core/util-commonjs.js

@@ -1,7 +1,6 @@
 // @ts-nocheck
 // Auto-generated by lighthouse-core/scripts/copy-util-commonjs.sh
 // Temporary solution until all our code uses esmodules
-'use strict';
 /**
  * @license
  * Copyright 2017 The Lighthouse Authors. All Rights Reserved.
@@ -18,6 +17,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @template T @typedef {import('./i18n').I18n<T>} I18n */
 
@@ -318,26 +318,24 @@ class Util {
     }
 
     const MAX_LENGTH = 64;
-    if (parsedUrl.protocol !== 'data:') {
-      // Always elide hexadecimal hash
-      name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
-      // Also elide other hash-like mixed-case strings
-      name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
-        `$1${ELLIPSIS}`);
-      // Also elide long number sequences
-      name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
-      // Merge any adjacent ellipses
-      name = name.replace(/\u2026+/g, ELLIPSIS);
-
-      // Elide query params first
-      if (name.length > MAX_LENGTH && name.includes('?')) {
-        // Try to leave the first query parameter intact
-        name = name.replace(/\?([^=]*)(=)?.*/, `?$1$2${ELLIPSIS}`);
-
-        // Remove it all if it's still too long
-        if (name.length > MAX_LENGTH) {
-          name = name.replace(/\?.*/, `?${ELLIPSIS}`);
-        }
+    // Always elide hexadecimal hash
+    name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
+    // Also elide other hash-like mixed-case strings
+    name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
+      `$1${ELLIPSIS}`);
+    // Also elide long number sequences
+    name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
+    // Merge any adjacent ellipses
+    name = name.replace(/\u2026+/g, ELLIPSIS);
+
+    // Elide query params first
+    if (name.length > MAX_LENGTH && name.includes('?')) {
+      // Try to leave the first query parameter intact
+      name = name.replace(/\?([^=]*)(=)?.*/, `?$1$2${ELLIPSIS}`);
+
+      // Remove it all if it's still too long
+      if (name.length > MAX_LENGTH) {
+        name = name.replace(/\?.*/, `?${ELLIPSIS}`);
       }
     }
 
@@ -433,11 +431,10 @@ class Util {
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
-        // eslint-disable-next-line max-len
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs)} HTTP RTT, ` +
-          `${Util.i18n.formatKbps(throttling.downloadThroughputKbps)} down, ` +
-          `${Util.i18n.formatKbps(throttling.uploadThroughputKbps)} up (DevTools)`;
+        networkThrottling = `${Util.i18n.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` +
+          `${Util.i18n.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` +
+          `${Util.i18n.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`;
 
         const isSlow4G = () => {
           return requestLatencyMs === 150 * 3.75 &&
@@ -449,10 +446,9 @@ class Util {
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
-        // eslint-disable-next-line max-len
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(rttMs)} TCP RTT, ` +
-          `${Util.i18n.formatKbps(throughputKbps)} throughput (Simulated)`;
+        networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
+          `${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
 
         const isSlow4G = () => {
           return rttMs === 150 && throughputKbps === 1.6 * 1024;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220509",
+  "version": "9.6.1",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -24,7 +24,7 @@
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
-    "build-report": "node build/build-report-components.js && bash lighthouse-core/scripts/copy-util-commonjs.sh && node build/build-report.js",
+    "build-report": "node build/build-report-components.js && yarn eslint --fix report/renderer/components.js && bash lighthouse-core/scripts/copy-util-commonjs.sh && node build/build-report.js",
     "build-sample-reports": "yarn build-report && node build/build-sample-reports.js",
     "build-treemap": "node ./build/build-treemap.js",
     "build-viewer": "node ./build/build-viewer.js",
@@ -37,7 +37,7 @@
     "start": "yarn build-report --standalone && node ./lighthouse-cli/index.js",
     "jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
     "test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check",
-    "test-bundle": "yarn smoke --runner bundle --retries=2",
+    "test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 --invert-match forms",
     "test-clients": "yarn jest \"$PWD/clients/\" && yarn jest --testMatch=\"**/clients/test/**/*-test-pptr.js\"",
     "test-viewer": "yarn unit-viewer && yarn jest --testMatch=\"**/viewer/**/*-test-pptr.js\"",
     "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/treemap/**/*-test-pptr.js\"",
@@ -68,28 +68,28 @@
     "vercel-build": "yarn build-sample-reports && yarn build-viewer && yarn build-treemap",
     "dogfood-lhci": "./lighthouse-core/scripts/dogfood-lhci.sh",
     "timing-trace": "node lighthouse-core/scripts/generate-timing-trace.js",
-    "changelog": "conventional-changelog --config ./build/changelog-generator/index.cjs --infile changelog.md --same-file",
+    "changelog": "conventional-changelog --config ./build/changelog-generator/index.js --infile changelog.md --same-file",
     "type-check": "tsc --build ./tsconfig-all.json",
     "i18n:checks": "./lighthouse-core/scripts/i18n/assert-strings-collected.sh",
     "i18n:collect-strings": "node lighthouse-core/scripts/i18n/collect-strings.js",
     "update:lantern-baseline": "node lighthouse-core/scripts/lantern/update-baseline-lantern-values.js",
     "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 && node ./lighthouse-core/scripts/update-flow-fixtures.js",
-    "update:flow-sample-json": "yarn i18n:collect-strings && node ./lighthouse-core/scripts/update-flow-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",
     "run-devtools": "node lighthouse-core/scripts/pptr-run-devtools.js",
     "diff:sample-json": "yarn i18n:checks && bash lighthouse-core/scripts/assert-golden-lhr-unchanged.sh",
-    "diff:flow-sample-json": "yarn i18n:collect-strings && bash lighthouse-core/scripts/assert-baseline-flow-result-unchanged.sh",
     "computeBenchmarkIndex": "./lighthouse-core/scripts/benchmark.js",
     "minify-latest-run": "./lighthouse-core/scripts/lantern/minify-trace.js ./latest-run/defaultPass.trace.json ./latest-run/defaultPass.trace.min.json && ./lighthouse-core/scripts/lantern/minify-devtoolslog.js ./latest-run/defaultPass.devtoolslog.json ./latest-run/defaultPass.devtoolslog.min.json",
     "save-latest-run": "./lighthouse-core/scripts/save-latest-run.sh",
     "compile-proto": "protoc --python_out=./ ./proto/lighthouse-result.proto && mv ./proto/*_pb2.py ./proto/scripts || (echo \"❌ Install protobuf ≥ 3.7.1 to compile the proto file.\" && false)",
     "build-proto-roundtrip": "mkdir -p .tmp && cross-env PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION_VERSION=2 python proto/scripts/json_roundtrip_via_proto.py",
     "static-server": "node lighthouse-cli/test/fixtures/static-server.js",
-    "serve-dist": "cd dist && python3 -m http.server",
-    "serve-gh-pages": "cd dist/gh-pages && python3 -m http.server",
+    "serve-dist": "cd dist && python -m SimpleHTTPServer",
+    "serve-gh-pages": "cd dist/gh-pages && python -m SimpleHTTPServer",
     "serve-treemap": "yarn serve-gh-pages",
     "serve-viewer": "yarn serve-gh-pages",
     "flow-report": "yarn build-report --flow && node ./lighthouse-core/scripts/build-test-flow-report.js"
@@ -138,7 +138,7 @@
     "cpy": "^8.1.2",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.995287",
+    "devtools-protocol": "0.0.999451",
     "es-main": "^1.0.2",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
@@ -209,8 +209,8 @@
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.995287",
-    "puppeteer-core/**/devtools-protocol": "0.0.995287"
+    "puppeteer/**/devtools-protocol": "0.0.999451",
+    "puppeteer-core/**/devtools-protocol": "0.0.999451"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [

package/readme.md

@@ -99,7 +99,7 @@ Configuration:
   --screenEmulation              Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
   --emulatedUserAgent            Sets useragent emulation  [string]
   --max-wait-for-load            The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability  [number]
-  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/master/docs/error-reporting.md  [boolean]
+  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO  [boolean]
   --gather-mode, -G              Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
   --audit-mode, -A               Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
   --only-audits                  Only run the specified audits  [array]

package/report/.eslintrc.cjs

@@ -3,6 +3,7 @@
  * 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.
  */
+'use strict';
 
 /**
  * eslint does not support ESM rc files, so this must be a .cjs file.
@@ -31,7 +32,4 @@ module.exports = {
     'import/group-exports': 2,
     'import/exports-last': 2,
   },
-  parserOptions: {
-    sourceType: 'module',
-  },
 };

package/report/assets/styles.css

@@ -300,6 +300,9 @@
   /* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */
   top: 0;
 }
+.lh-devtools .lh-element-screenshot__overlay {
+  position: absolute;
+}
 
 @keyframes fadeIn {
   0% { opacity: 0;}
@@ -695,10 +698,11 @@
   border-top: 1px solid var(--report-border-color-secondary);
 }
 
-.lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(-n+2) {
+.lh-metric:nth-last-child(-n+2) {
   border-bottom: 1px solid var(--report-border-color-secondary);
 }
 
+
 .lh-metric__innerwrap {
   display: grid;
   /**
@@ -745,7 +749,7 @@
   .lh-metric {
     border-bottom: none !important;
   }
-  .lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(1) {
+  .lh-metric:nth-last-child(1) {
     border-bottom: 1px solid var(--report-border-color-secondary) !important;
   }
 
@@ -1061,8 +1065,8 @@
 }
 
 /* Report */
-.lh-list > div:not(:last-child) {
-  padding-bottom: 20px;
+.lh-list > :not(:last-child) {
+  margin-bottom: calc(var(--default-padding) * 2);
 }
 
 .lh-header-container {
@@ -1418,9 +1422,6 @@
 .lh-category-wrapper {
   border-bottom: 1px solid var(--color-gray-200);
 }
-.lh-category-wrapper:last-of-type {
-  border-bottom: 0;
-}
 
 .lh-category-header {
   margin-bottom: var(--section-padding-vertical);
@@ -1747,18 +1748,15 @@ details[open] .lh-clump-toggletext--hide { display: block;}
 
 /* Element screenshot */
 .lh-element-screenshot {
+  position: relative;
+  overflow: hidden;
   float: left;
   margin-right: 20px;
 }
 .lh-element-screenshot__content {
   overflow: hidden;
-  min-width: 110px;
-  display: flex;
-  justify-content: center;
-  background-color: var(--report-background-color);
 }
 .lh-element-screenshot__image {
-  position: relative;
   /* Set by ElementScreenshotRenderer.installFullPageScreenshotCssVariable */
   background-image: var(--element-screenshot-url);
   outline: 2px solid #777;

package/report/assets/templates.html

@@ -893,17 +893,16 @@ limitations under the License.
 <template id="elementScreenshot">
   <div class="lh-element-screenshot">
     <div class="lh-element-screenshot__content">
-      <div class="lh-element-screenshot__image">
-        <div class="lh-element-screenshot__mask">
-          <svg height="0" width="0">
-            <defs>
-              <clipPath clipPathUnits="objectBoundingBox"></clipPath>
-              <!-- clipPath filled by ElementScreenshotRenderer.renderClipPath -->
-            </defs>
-          </svg>
-        </div>
-        <div class="lh-element-screenshot__element-marker"></div>
+      <div class="lh-element-screenshot__mask">
+        <svg height="0" width="0">
+          <defs>
+            <clipPath clipPathUnits="objectBoundingBox"></clipPath>
+            <!-- clipPath filled by ElementScreenshotRenderer.renderClipPath -->
+          </defs>
+        </svg>
       </div>
+      <div class="lh-element-screenshot__image"></div>
+      <div class="lh-element-screenshot__element-marker"></div>
     </div>
   </div>
 </template>

package/report/clients/bundle.js

@@ -3,6 +3,7 @@
  * 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.
  */
+'use strict';
 
 // This file is used to generate a bundle that can be imported
 // into an esmodules codebase to render the lighthouse report.

package/report/clients/standalone.js

@@ -3,6 +3,7 @@
  * 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.
  */
+'use strict';
 
 /**
  * @fileoverview The entry point for rendering the Lighthouse report for the HTML

package/report/generator/report-generator.js

@@ -93,54 +93,29 @@ class ReportGenerator {
     const separator = ',';
     /** @param {string} value @return {string} */
     const escape = value => `"${value.replace(/"/g, '""')}"`;
-    /** @param {ReadonlyArray<string | number | null>} row @return {string[]} */
-    const rowFormatter = row => row.map(value => {
-      if (value === null) return 'null';
-      return value.toString();
-    }).map(escape);
-
-    const rows = [];
-    const topLevelKeys = /** @type {const} */(
-      ['requestedUrl', 'finalUrl', 'fetchTime', 'gatherMode']);
-
-    // First we have metadata about the LHR.
-    rows.push(rowFormatter(topLevelKeys));
-    rows.push(rowFormatter(topLevelKeys.map(key => lhr[key] ?? null)));
-
-    // Some spacing.
-    rows.push([]);
-
-    // Categories.
-    rows.push(['category', 'score']);
-    for (const category of Object.values(lhr.categories)) {
-      rows.push(rowFormatter([
-        category.id,
-        category.score,
-      ]));
-    }
-
-    rows.push([]);
-
-    // Audits.
-    rows.push(['category', 'audit', 'score', 'displayValue', 'description']);
-    for (const category of Object.values(lhr.categories)) {
-      for (const auditRef of category.auditRefs) {
+    /** @param {Array<string | number>} row @return {string[]} */
+    const rowFormatter = row => row.map(value => value.toString()).map(escape);
+
+    // Possible TODO: tightly couple headers and row values
+    const header = ['requestedUrl', 'finalUrl', 'category', 'name', 'title', 'type', 'score'];
+    const table = Object.keys(lhr.categories).map(categoryId => {
+      const rows = [];
+      const category = lhr.categories[categoryId];
+      const overallCategoryScore = category.score === null ? -1 : category.score;
+      rows.push(rowFormatter([lhr.requestedUrl, lhr.finalUrl, category.title,
+        `${categoryId}-score`, `Overall ${category.title} Category Score`, 'numeric',
+        overallCategoryScore]));
+      return rows.concat(category.auditRefs.map(auditRef => {
         const audit = lhr.audits[auditRef.id];
-        if (!audit) continue;
-
-        rows.push(rowFormatter([
-          category.id,
-          auditRef.id,
-          audit.score,
-          audit.displayValue || '',
-          audit.description,
-        ]));
-      }
-    }
+        // CSV validator wants all scores to be numeric, use -1 for now
+        const numericScore = audit.score === null ? -1 : audit.score;
+        return rowFormatter([lhr.requestedUrl, lhr.finalUrl, category.title, audit.id, audit.title,
+          audit.scoreDisplayMode, numericScore]);
+      }));
+    });
 
-    return rows
-      .map(row => row.join(separator))
-      .join(CRLF);
+    return [header].concat(...table)
+      .map(row => row.join(separator)).join(CRLF);
   }
 
   /**

package/report/renderer/api.js

@@ -3,6 +3,7 @@
  * 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.
  */
+'use strict';
 
 
 import {DOM} from '../renderer/dom.js';

package/report/renderer/category-renderer.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {import('./report-renderer.js').ReportRenderer} ReportRenderer */