lighthouse 8.5.1 → 8.6.0-dev.20211013

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.5.1",
+  "version": "8.6.0-dev.20211013",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -9,7 +9,7 @@
     "smokehouse": "./lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=12.20.0 12 || >=14.13 14  || >=15"
   },
   "scripts": {
     "build-all": "npm-run-posix-or-windows build-all:task",
@@ -21,7 +21,7 @@
     "build-extension-firefox": "node ./build/build-extension.js firefox",
     "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
-    "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js && rollup lighthouse-cli/test/fixtures/static-server.js -o dist/lightrider/static-server.js -f commonjs -p commonjs -p node-resolve -e mime-types,glob",
+    "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 && yarn eslint --fix report/renderer/components.js && node build/build-report.js",
     "build-sample-reports": "yarn build-report && node build/build-sample-reports.js",
@@ -29,7 +29,7 @@
     "build-viewer": "node ./build/build-viewer.js",
     "reset-link": "(yarn unlink || true) && yarn link && yarn link lighthouse",
     "c8": "bash lighthouse-core/scripts/c8.sh",
-    "clean": "rm -r dist proto/scripts/*.json proto/scripts/*_pb2.* proto/scripts/*_pb.* proto/scripts/__pycache__ proto/scripts/*.pyc *.report.html *.report.dom.html *.report.json *.devtoolslog.json *.trace.json lighthouse-core/lib/i18n/locales/*.ctc.json || true",
+    "clean": "rm -r dist proto/scripts/*.json proto/scripts/*_pb2.* proto/scripts/*_pb.* proto/scripts/__pycache__ proto/scripts/*.pyc *.report.html *.report.dom.html *.report.json *.devtoolslog.json *.trace.json shared/localization/locales/*.ctc.json || true",
     "lint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe . || eslint .",
     "smoke": "node lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js",
     "debug": "node --inspect-brk ./lighthouse-cli/index.js",
@@ -37,12 +37,12 @@
     "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 -j=1 --retries=2 --invert-match forms",
-    "test-clients": "yarn jest \"$PWD/clients/\"",
-    "test-viewer": "yarn unit-viewer && yarn jest lighthouse-viewer/test/viewer-test-pptr.js",
-    "test-treemap": "yarn unit-treemap && yarn jest lighthouse-treemap/test/treemap-test-pptr.js",
+    "test-clients": "yarn jest \"$PWD/clients/\" && yarn jest --testMatch=\"**/clients/test/**/*-test-pptr.js\"",
+    "test-viewer": "yarn unit-viewer && yarn jest --testMatch=\"**/lighthouse-viewer/**/*-test-pptr.js\"",
+    "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/lighthouse-treemap/**/*-test-pptr.js\"",
     "test-lantern": "bash lighthouse-core/scripts/test-lantern.sh",
     "test-legacy-javascript": "bash lighthouse-core/scripts/test-legacy-javascript.sh",
-    "test-docs": "yarn --cwd docs/recipes/auth && yarn jest docs/recipes/integration-test && yarn --cwd docs/recipes/custom-gatherer-puppeteer test",
+    "test-docs": "yarn --cwd docs/recipes/ test",
     "test-proto": "yarn compile-proto && yarn build-proto-roundtrip",
     "unit-core": "yarn jest \"lighthouse-core\"",
     "unit-cli": "yarn jest \"lighthouse-cli/\"",
@@ -50,8 +50,8 @@
     "unit-treemap": "yarn jest \"lighthouse-treemap/.*-test.js\"",
     "unit-viewer": "yarn jest \"lighthouse-viewer/.*-test.js\"",
     "unit-flow": "yarn jest \"flow-report/.*-test.[tj]s[x]?\"",
-    "unit": "yarn unit-core && yarn unit-cli && yarn unit-report && yarn unit-viewer && yarn unit-treemap && yarn unit-flow",
-    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run unit-core -- --ci && npm run unit-cli -- --ci && npm run unit-report -- --ci && npm run unit-viewer -- --ci && npm run unit-treemap -- --ci && npm run unit-flow -- --ci",
+    "unit": "yarn jest",
+    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run jest -- --ci",
     "core-unit": "yarn unit-core",
     "cli-unit": "yarn unit-cli",
     "viewer-unit": "yarn unit-viewer",
@@ -74,6 +74,7 @@
     "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",
+    "update:flow-sample-json": "node ./lighthouse-core/scripts/update-flow-fixtures.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",
@@ -88,13 +89,12 @@
     "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"
+    "serve-viewer": "yarn serve-gh-pages",
+    "flow-report": "yarn build-report --flow && node ./lighthouse-core/scripts/build-test-flow-report.js"
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
-    "@firebase/app-types": "0.3.1",
-    "@firebase/auth-types": "0.3.2",
-    "@firebase/util": "0.2.1",
+    "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/preact": "^2.0.1",
@@ -134,7 +134,7 @@
     "browserify-banner": "^1.0.15",
     "c8": "^7.4.0",
     "chalk": "^2.4.1",
-    "chrome-devtools-frontend": "1.0.727089",
+    "chrome-devtools-frontend": "1.0.922924",
     "conventional-changelog-cli": "^1.3.4",
     "cpy": "^7.0.1",
     "cross-env": "^7.0.2",
@@ -147,6 +147,7 @@
     "eslint-plugin-local-rules": "0.1.0",
     "event-target-shim": "^6.0.2",
     "exorcist": "^1.0.1",
+    "firebase": "^9.0.2",
     "gh-pages": "^2.0.1",
     "glob": "^7.1.3",
     "idb-keyval": "2.2.0",
@@ -165,8 +166,9 @@
     "pretty-json-stringify": "^0.0.2",
     "puppeteer": "^10.2.0",
     "rollup": "^2.50.6",
-    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-polyfill-node": "^0.7.0",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-shim": "^1.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "tabulator-tables": "^4.9.3",
@@ -174,6 +176,7 @@
     "ts-jest": "^27.0.4",
     "typed-query-selector": "^2.4.0",
     "typescript": "4.4.3",
+    "wait-for-expect": "^3.0.2",
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {

package/readme.md

@@ -52,7 +52,7 @@ The Chrome extension was available prior to Lighthouse being available in Chrome
 
 The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported. Users who want more advanced usage, or want to run Lighthouse in an automated fashion should use the Node CLI.
 
-_Lighthouse requires Node 12 LTS (12.x) or later._
+_Lighthouse requires Node 12 LTS (12.20) or later._
 
 **Installation**:
 

package/report/assets/standalone-template.html

@@ -21,7 +21,6 @@ limitations under the License.
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
   <title>Lighthouse Report</title>
-  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
 </head>
 <body class="lh-root lh-vars">
   <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>

package/report/assets/styles.css

@@ -92,6 +92,7 @@
   --footer-padding-vertical: 16px;
   --gauge-circle-size-big: 112px;
   --gauge-circle-size: 80px;
+  --gauge-circle-size-sm: 36px;
   --gauge-label-font-size-big: 28px;
   --gauge-label-font-size: 20px;
   --gauge-label-line-height-big: 36px;
@@ -103,6 +104,7 @@
   --highlighter-background-color: var(--report-text-color);
   --icon-square-size: calc(var(--score-icon-size) * 0.88);
   --image-preview-size: 48px;
+  --locale-selector-background-color: var(--color-white);
   --metric-toggle-lines-fill: #7F7F7F;
   --metric-value-font-size: 28px;
   --metrics-toggle-background-color: var(--color-gray-200);
@@ -168,6 +170,8 @@
 
   --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%230CCE6B" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
   --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%230CCE6B" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></svg>');
+
+  --swap-locale-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>');
 }
 
 @media not print {
@@ -190,6 +194,7 @@
 
     /* Component variables */
     --env-item-background-color: var(--color-gray);
+    --locale-selector-background-color: var(--color-gray-200);
     --plugin-badge-background-color: var(--color-gray-800);
     --report-background-color: var(--color-gray-900);
     --report-border-color-secondary: var(--color-gray-200);
@@ -310,7 +315,6 @@
   margin: 0;
   line-height: var(--report-line-height);
   background: var(--report-background-color);
-  scroll-behavior: smooth;
   color: var(--report-text-color);
 }
 
@@ -334,6 +338,10 @@
   cursor: pointer;
 }
 
+.lh-hidden {
+  display: none !important;
+}
+
 .lh-container {
   /*
   Text wrapping in the report is so much FUN!
@@ -679,8 +687,8 @@
 
 .lh-metric__innerwrap {
   display: grid;
-  /** 
-   * Icon -- Metric Name 
+  /**
+   * Icon -- Metric Name
    *      -- Metric Value
    */
   grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;
@@ -724,7 +732,7 @@
 /* Change the grid to 3 columns for narrow viewport. */
 @media screen and (max-width: 535px) {
   .lh-metric__innerwrap {
-  /** 
+  /**
    * Icon -- Metric Name -- Metric Value
    */
     grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;
@@ -1402,6 +1410,10 @@
   padding: var(--category-padding);
   max-width: var(--report-width);
   margin: 0 auto;
+
+  --sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2);
+  --topbar-plus-sticky-header: calc(var(--topbar-height) + var(--sticky-header-height));
+  scroll-margin-top: var(--topbar-plus-sticky-header);
 }
 
 .lh-category-wrapper {
@@ -1412,18 +1424,6 @@
   border-top: 1px solid var(--color-gray-200);
 }
 
-/* section hash link jump should preserve fixed header
-   https://css-tricks.com/hash-tag-links-padding/
-*/
-.lh-category > .lh-permalink {
-  --sticky-header-height: calc(var(--gauge-circle-size) + var(--score-container-padding) * 2);
-  --topbar-plus-header: calc(var(--topbar-height) + var(--sticky-header-height));
-  margin-top: calc(var(--topbar-plus-header) * -1);
-  padding-bottom: var(--topbar-plus-header);
-  display: block;
-  visibility: hidden;
-}
-
 .lh-category-header {
   font-size: var(--category-header-font-size);
   min-height: var(--gauge-circle-size);
@@ -1441,31 +1441,6 @@
   line-height: var(--header-line-height);
 }
 
-#lh-log {
-  position: fixed;
-  background-color: #323232;
-  color: #fff;
-  min-height: 48px;
-  min-width: 288px;
-  padding: 16px 24px;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-  border-radius: 2px;
-  margin: 12px;
-  font-size: 14px;
-  cursor: default;
-  transition: transform 0.3s, opacity 0.3s;
-  transform: translateY(100px);
-  opacity: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 3;
-}
-
-#lh-log.lh-show {
-  opacity: 1;
-  transform: translateY(0);
-}
-
 /* 964 fits the min-width of the filmstrip */
 @media screen and (max-width: 964px) {
   .lh-report {

package/report/assets/templates.html

@@ -165,7 +165,7 @@ limitations under the License.
     }
 
     .lh-sticky-header {
-      --gauge-circle-size: 36px;
+      --gauge-circle-size: var(--gauge-circle-size-sm);
       --plugin-badge-size: 18px;
       --plugin-icon-size: 75%;
       --gauge-wrapper-width: 60px;
@@ -263,12 +263,15 @@ limitations under the License.
     }
 
     .lh-tools {
+      display: flex;
+      align-items: center;
       margin-left: auto;
       will-change: transform;
       min-width: var(--report-icon-size);
     }
     .lh-tools__button {
       width: var(--report-icon-size);
+      min-width: 24px;
       height: var(--report-icon-size);
       cursor: pointer;
       margin-right: 5px;
@@ -325,6 +328,32 @@ limitations under the License.
       display: none;
     }
 
+    .lh-locale-selector {
+      width: 100%;
+      color: var(--report-text-color);
+      background-color: var(--locale-selector-background-color);
+      padding: 2px;
+    }
+    .lh-tools-locale {
+      display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+    }
+    .lh-tools-locale__selector-wrapper {
+      transition: opacity 0.15s;
+      opacity: 0;
+      max-width: 200px;
+    }
+    .lh-button.lh-tool-locale__button {
+      height: unset;
+      color: var(--tools-icon-color);
+    }
+    .lh-tool-locale__button.lh-active + .lh-tools-locale__selector-wrapper {
+      opacity: 1;
+      clip: rect(-1px, 194px, 242px, -3px);
+      visibility: visible;
+    }
+
     @media screen and (max-width: 964px) {
       .lh-tools__dropdown {
         right: 0;
@@ -378,6 +407,15 @@ limitations under the License.
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
 
     <div class="lh-tools">
+      <div class="lh-tools-locale lh-hidden">
+        <button id="lh-button__swap-locales" class="lh-button lh-tool-locale__button" title="Show Language Picker" aria-label="Toggle language picker" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-locale__selector-wrapper">
+          <svg width="20px" height="20px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>
+        </button>
+        <div id="lh-tools-locale__selector-wrapper" class="lh-tools-locale__selector-wrapper" role="menu" aria-labelledby="lh-button__swap-locales" aria-hidden="true">
+          <!-- Select element created by ReportUIFeatures._enableSwapLocale: .lh-locale-selector -->
+        </div>
+      </div>
+
       <button id="lh-tools-button" class="lh-tools__button" title="Tools menu" aria-label="Toggle report tools menu" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-dropdown">
         <svg width="100%" height="100%" viewBox="0 0 24 24">
             <path d="M0 0h24v24H0z" fill="none"/>
@@ -549,7 +587,7 @@ limitations under the License.
 
 <!-- Lighthouse score gauge -->
 <template id="gauge">
-  <a href="#" class="lh-gauge__wrapper">
+  <a class="lh-gauge__wrapper">
     <!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. -->
     <div class="lh-gauge__svg-wrapper">
       <svg viewBox="0 0 120 120" class="lh-gauge">
@@ -565,7 +603,7 @@ limitations under the License.
 
 <!-- Lighthouse category fraction -->
 <template id="fraction">
-  <a href="#" class="lh-fraction__wrapper">
+  <a class="lh-fraction__wrapper">
     <div class="lh-fraction__content-wrapper">
       <div class="lh-fraction__content">
         <div class="lh-fraction__background"></div>
@@ -622,7 +660,7 @@ limitations under the License.
     }
   </style>
 
-  <a href="#" class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
+  <a class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
     <svg viewBox="0 0 60 60" class="lh-gauge lh-gauge--pwa">
       <defs>
         <linearGradient id="lh-gauge--pwa__check-circle__gradient" x1="50%" y1="0%" x2="50%" y2="100%">

package/report/clients/psi.js

@@ -77,6 +77,7 @@ export function prepareLabData(LHResult, document) {
     reportLHR.categoryGroups,
     {environment: 'PSI', gatherMode: lhResult.gatherMode}
   );
+  perfCategoryEl.append(dom.createComponent('styles'));
 
   const scoreGaugeEl = dom.find('.lh-score__gauge', perfCategoryEl);
   scoreGaugeEl.remove();

package/report/clients/standalone.js

@@ -40,8 +40,7 @@ function __initLighthouseReport__() {
   });
 
   document.addEventListener('lh-log', /** @param {Event} e */ e => {
-    const el = document.querySelector('#lh-log');
-    if (!el) return;
+    const el = dom.find('div#lh-log', document);
 
     const logger = new Logger(el);
     // @ts-expect-error

package/report/generator/file-namer.js

@@ -11,15 +11,14 @@
  */
 
 /**
- * Generate a filenamePrefix of hostname_YYYY-MM-DD_HH-MM-SS
+ * Generate a filenamePrefix of name_YYYY-MM-DD_HH-MM-SS
  * Date/time uses the local timezone, however Node has unreliable ICU
  * support, so we must construct a YYYY-MM-DD date format manually. :/
- * @param {{finalUrl: string, fetchTime: string}} lhr
- * @return {string}
+ * @param {string} name
+ * @param {string|undefined} fetchTime
  */
-function getFilenamePrefix(lhr) {
-  const hostname = new URL(lhr.finalUrl).hostname;
-  const date = (lhr.fetchTime && new Date(lhr.fetchTime)) || new Date();
+function getFilenamePrefix(name, fetchTime) {
+  const date = fetchTime ? new Date(fetchTime) : new Date();
 
   const timeStr = date.toLocaleTimeString('en-US', {hour12: false});
   const dateParts = date.toLocaleDateString('en-US', {
@@ -29,9 +28,19 @@ function getFilenamePrefix(lhr) {
   dateParts.unshift(dateParts.pop());
   const dateStr = dateParts.join('-');
 
-  const filenamePrefix = `${hostname}_${dateStr}_${timeStr}`;
+  const filenamePrefix = `${name}_${dateStr}_${timeStr}`;
   // replace characters that are unfriendly to filenames
   return filenamePrefix.replace(/[/?<>\\:*|"]/g, '-');
 }
 
-module.exports = {getFilenamePrefix};
+/**
+ * Generate a filenamePrefix of hostname_YYYY-MM-DD_HH-MM-SS.
+ * @param {{finalUrl: string, fetchTime: string}} lhr
+ * @return {string}
+ */
+function getLhrFilenamePrefix(lhr) {
+  const hostname = new URL(lhr.finalUrl).hostname;
+  return getFilenamePrefix(hostname, lhr.fetchTime);
+}
+
+module.exports = {getLhrFilenamePrefix, getFilenamePrefix};

package/report/generator/report-generator.js

@@ -55,7 +55,6 @@ class ReportGenerator {
     return ReportGenerator.replaceStrings(htmlReportAssets.REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
-      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
     ]);
   }
 

package/report/renderer/category-renderer.js

@@ -333,7 +333,6 @@ export class CategoryRenderer {
   renderScoreGauge(category, groupDefinitions) { // eslint-disable-line no-unused-vars
     const tmpl = this.dom.createComponent('gauge');
     const wrapper = this.dom.find('a.lh-gauge__wrapper', tmpl);
-    this.dom.safelySetHref(wrapper, `#${category.id}`);
 
     if (Util.isPluginCategory(category.id)) {
       wrapper.classList.add('lh-gauge__wrapper--plugin');
@@ -374,14 +373,13 @@ export class CategoryRenderer {
   renderCategoryFraction(category) {
     const tmpl = this.dom.createComponent('fraction');
     const wrapper = this.dom.find('a.lh-fraction__wrapper', tmpl);
-    this.dom.safelySetHref(wrapper, `#${category.id}`);
 
-    const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
+    const {numPassed, numPassableAudits, totalWeight} = Util.calculateCategoryFraction(category);
 
-    const fraction = numPassed / numAudits;
+    const fraction = numPassed / numPassableAudits;
     const content = this.dom.find('.lh-fraction__content', tmpl);
     const text = this.dom.createElement('span');
-    text.textContent = `${numPassed}/${numAudits}`;
+    text.textContent = `${numPassed}/${numPassableAudits}`;
     content.appendChild(text);
 
     let rating = Util.calculateRating(fraction);
@@ -485,7 +483,7 @@ export class CategoryRenderer {
    */
   render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
-    this.createPermalinkSpan(element, category.id);
+    element.id = category.id;
     element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
@@ -523,14 +521,4 @@ export class CategoryRenderer {
 
     return element;
   }
-
-  /**
-   * Create a non-semantic span used for hash navigation of categories
-   * @param {Element} element
-   * @param {string} id
-   */
-  createPermalinkSpan(element, id) {
-    const permalinkEl = this.dom.createChildOf(element, 'span', 'lh-permalink');
-    permalinkEl.id = id;
-  }
 }