lighthouse 8.4.0 → 8.5.0-dev.20210921

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.4.0",
+  "version": "8.5.0-dev.20210921",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -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",
+    "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-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",
@@ -68,7 +68,7 @@
     "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.js --infile changelog.md --same-file",
-    "type-check": "tsc --build ./ report/ lighthouse-viewer/ lighthouse-treemap/ flow-report/",
+    "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",
@@ -96,7 +96,7 @@
     "@firebase/auth-types": "0.3.2",
     "@firebase/util": "0.2.1",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-typescript": "^2.1.0",
+    "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/archiver": "^2.1.2",
@@ -123,7 +123,7 @@
     "@types/tabulator-tables": "^4.9.1",
     "@types/update-notifier": "^4.1.0",
     "@types/ws": "^7.0.0",
-    "@types/yargs": "^15.0.11",
+    "@types/yargs": "^16.0.0",
     "@types/yargs-parser": "^15.0.0",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
@@ -139,7 +139,8 @@
     "cpy": "^7.0.1",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.863986",
+    "devtools-protocol": "0.0.901419",
+    "es-main": "^1.0.2",
     "eslint": "^7.23.0",
     "eslint-config-google": "^0.9.1",
     "eslint-plugin-import": "^2.24.2",
@@ -150,7 +151,7 @@
     "glob": "^7.1.3",
     "idb-keyval": "2.2.0",
     "intl-messageformat-parser": "^1.8.1",
-    "jest": "^27.0.3",
+    "jest": "27.1.1",
     "jsdom": "^12.2.0",
     "jsonld": "^5.2.0",
     "jsonlint-mod": "^1.7.6",
@@ -162,15 +163,17 @@
     "pako": "^2.0.3",
     "preact": "^10.5.14",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^9.1.1",
+    "puppeteer": "^10.2.0",
     "rollup": "^2.50.6",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-shim": "^1.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "tabulator-tables": "^4.9.3",
     "terser": "^5.3.8",
     "ts-jest": "^27.0.4",
     "typed-query-selector": "^2.4.0",
-    "typescript": "4.4.2",
+    "typescript": "4.4.3",
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {

package/readme.md

@@ -363,6 +363,8 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Microlink](https://microlink.io)** — Microlink is a cloud browser as API. It offers Lighthouse reports on demand, making it easy to build any service on top. Similar functionality is available via the underlying open-source project named browserless.
 
+* **[Peyk](https://peyk.com)** - Peyk is a website change detection & monitoring service. Peyk can detect changes in cookies, network requests, technologies, local & session storage, lighthouse audits, screenshots and so much more. Peyk is offered via free and paid plans.
+
 * **[Wattspeed](https://wattspeed.com/)** — Wattspeed is a free tool that generates snapshots - historical captures of your web pages that include Lighthouse scores, a list of technologies, W3C HTML validator results, DOM size, mixed content info, and more.
 
 * **[AwesomeTechStack](https://awesometechstack.com)** — AwesomeTechStack is a free to use website tech stack analyzer. AwesomeTechStack provides insights into the security, modernity, and performance of any website's technology stack and guidance to improve performance. Lighthouse insights are a crucial part of a website's tech stack rating.

package/report/assets/styles.css

@@ -104,8 +104,8 @@
   --icon-square-size: calc(var(--score-icon-size) * 0.88);
   --image-preview-size: 48px;
   --metric-toggle-lines-fill: #7F7F7F;
+  --metric-value-font-size: 28px;
   --metrics-toggle-background-color: var(--color-gray-200);
-  --screenshot-overlay-background: rgba(0, 0, 0, 0.3);
   --plugin-badge-background-color: var(--color-white);
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
   --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
@@ -130,9 +130,11 @@
   --score-icon-margin-right: 12px;
   --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
   --score-icon-size: 12px;
+  --score-icon-size-big: 16px;
   --scores-container-padding: 20px 0 20px 0;
   --scorescale-height: 6px;
   --scorescale-width: 18px;
+  --screenshot-overlay-background: rgba(0, 0, 0, 0.3);
   --section-padding-vertical: 12px;
   --snippet-background-color: var(--color-gray-50);
   --snippet-color: #0938C2;
@@ -677,7 +679,11 @@
 
 .lh-metric__innerwrap {
   display: grid;
-  grid-template-columns: var(--audit-description-padding-left) 10fr 3fr;
+  /** 
+   * Icon -- Metric Name 
+   *      -- Metric Value
+   */
+  grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;
   align-items: center;
   padding: 10px 0;
 }
@@ -703,14 +709,30 @@
 .lh-metric__description {
   display: none;
   grid-column-start: 2;
-  grid-column-end: 3;
+  grid-column-end: 4;
   color: var(--report-text-color-secondary);
 }
 
 .lh-metric__value {
+  font-size: var(--metric-value-font-size);
+  margin: calc(var(--default-padding) / 2) 0;
   white-space: nowrap; /* No wrapping between metric value and the icon */
   font-weight: 500;
-  justify-self: end;
+  grid-column-start: 2;
+}
+
+/* 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;
+  }
+  .lh-metric__value {
+    justify-self: end;
+    grid-column-start: unset;
+  }
 }
 
 /* No-JS toggle switch */
@@ -777,7 +799,7 @@
   flex: 1;
 }
 
-.lh-metric .lh-metric__innerwrap::before,
+.lh-metric__icon,
 .lh-scorescale-range::before {
   content: '';
   width: var(--score-icon-size);
@@ -789,7 +811,7 @@
 .lh-metric--pass .lh-metric__value {
   color: var(--color-pass-secondary);
 }
-.lh-metric--pass .lh-metric__innerwrap::before {
+.lh-metric--pass .lh-metric__icon {
   border-radius: 100%;
   background: var(--color-pass);
 }
@@ -797,7 +819,7 @@
 .lh-metric--average .lh-metric__value {
   color: var(--color-average-secondary);
 }
-.lh-metric--average .lh-metric__innerwrap::before {
+.lh-metric--average .lh-metric__icon {
   background: var(--color-average);
   width: var(--icon-square-size);
   height: var(--icon-square-size);
@@ -806,8 +828,8 @@
 .lh-metric--fail .lh-metric__value {
   color: var(--color-fail-secondary);
 }
-.lh-metric--fail .lh-metric__innerwrap::before,
-.lh-metric--error .lh-metric__innerwrap::before {
+.lh-metric--fail .lh-metric__icon,
+.lh-metric--error .lh-metric__icon {
   border-left: calc(var(--score-icon-size) / 2) solid transparent;
   border-right: calc(var(--score-icon-size) / 2) solid transparent;
   border-bottom: var(--score-icon-size) solid var(--color-fail);
@@ -1153,6 +1175,80 @@
   stroke: var(--color-not-applicable);
 }
 
+.lh-fraction__wrapper .lh-fraction__content::before {
+  content: '';
+  height: var(--score-icon-size);
+  width: var(--score-icon-size);
+  margin: var(--score-icon-margin);
+  display: inline-block;
+}
+.lh-fraction__wrapper--pass .lh-fraction__content {
+  color: var(--color-pass);
+}
+.lh-fraction__wrapper--pass .lh-fraction__background {
+  background-color: var(--color-pass);
+}
+.lh-fraction__wrapper--pass .lh-fraction__content::before {
+  background-color: var(--color-pass);
+  border-radius: 50%;
+}
+.lh-fraction__wrapper--average .lh-fraction__content {
+  color: var(--color-average);
+}
+.lh-fraction__wrapper--average .lh-fraction__background {
+  background-color: var(--color-average);
+}
+.lh-fraction__wrapper--average .lh-fraction__content::before {
+  background-color: var(--color-average);
+}
+.lh-fraction__wrapper--fail .lh-fraction__content {
+  color: var(--color-fail);
+}
+.lh-fraction__wrapper--fail .lh-fraction__background {
+  background-color: var(--color-fail);
+}
+.lh-fraction__wrapper--fail .lh-fraction__content::before {
+  border-left: calc(var(--score-icon-size) / 2) solid transparent;
+  border-right: calc(var(--score-icon-size) / 2) solid transparent;
+  border-bottom: var(--score-icon-size) solid var(--color-fail);
+}
+.lh-fraction__wrapper--null .lh-fraction__content {
+  color: var(--color-gray-700);
+}
+.lh-fraction__wrapper--null .lh-fraction__background {
+  background-color: var(--color-gray-700);
+}
+.lh-fraction__wrapper--null .lh-fraction__content::before {
+  border-radius: 50%;
+  border: 2px solid var(--color-gray-700);
+}
+
+.lh-fraction__background {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: calc(var(--gauge-circle-size) / 2);
+  opacity: 0.1;
+  z-index: -1;
+}
+
+.lh-fraction__content-wrapper {
+  height: var(--gauge-circle-size);
+  display: flex;
+  align-items: center;
+}
+
+.lh-fraction__content {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--gauge-label-font-size);
+  width: max-content;
+  padding: 1em;
+  min-width: 6em;
+}
+
 .lh-gauge {
   stroke-linecap: round;
   width: var(--gauge-circle-size);
@@ -1181,6 +1277,10 @@
 .lh-category .lh-gauge__svg-wrapper {
   --gauge-circle-size: var(--gauge-circle-size-big);
 }
+.lh-category .lh-fraction__wrapper {
+  --gauge-circle-size: var(--gauge-circle-size-big);
+  --score-icon-size: var(--score-icon-size-big)
+}
 
 /* The plugin badge overlay */
 .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
@@ -1225,7 +1325,8 @@
   --gauge-percentage-font-size: var(--gauge-percentage-font-size-big);
 }
 
-.lh-gauge__wrapper {
+.lh-gauge__wrapper,
+.lh-fraction__wrapper {
   position: relative;
   display: flex;
   align-items: center;
@@ -1240,7 +1341,8 @@
   will-change: opacity; /* Only using for layer promotion */
 }
 
-.lh-gauge__label {
+.lh-gauge__label,
+.lh-fraction__label {
   font-size: var(--gauge-label-font-size);
   line-height: var(--gauge-label-line-height);
   margin-top: 10px;
@@ -1249,16 +1351,22 @@
 }
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
-.lh-category .lh-gauge__label {
+.lh-category .lh-gauge__label,
+.lh-category .lh-fraction__label {
   --gauge-label-font-size: var(--gauge-label-font-size-big);
   --gauge-label-line-height: var(--gauge-label-line-height-big);
   margin-top: 14px;
 }
+.lh-category .lh-fraction__content {
+  --gauge-label-font-size: var(--gauge-label-font-size-big);
+}
 
 
 .lh-scores-header .lh-gauge__wrapper,
+.lh-scores-header .lh-fraction__wrapper,
 .lh-scores-header .lh-gauge--pwa__wrapper,
 .lh-sticky-header .lh-gauge__wrapper,
+.lh-sticky-header .lh-fraction__wrapper,
 .lh-sticky-header .lh-gauge--pwa__wrapper {
   width: var(--gauge-wrapper-width);
 }

package/report/assets/templates.html

@@ -110,6 +110,7 @@ limitations under the License.
 <template id="metric">
   <div class="lh-metric">
     <div class="lh-metric__innerwrap">
+      <div class="lh-metric__icon"></div>
       <span class="lh-metric__title"></span>
       <div class="lh-metric__value"></div>
       <div class="lh-metric__description"></div>
@@ -562,6 +563,18 @@ limitations under the License.
   </a>
 </template>
 
+<!-- Lighthouse category fraction -->
+<template id="fraction">
+  <a href="#" class="lh-fraction__wrapper">
+    <div class="lh-fraction__content-wrapper">
+      <div class="lh-fraction__content">
+        <div class="lh-fraction__background"></div>
+      </div>
+    </div>
+    <div class="lh-fraction__label"></div>
+  </a>
+</template>
+
 
 <!-- Lighthouse PWA badge gauge -->
 <template id="gaugePwa">

package/report/clients/psi.js

@@ -72,7 +72,11 @@ export function prepareLabData(LHResult, document) {
   const detailsRenderer = new DetailsRenderer(dom, {fullPageScreenshot});
   const perfRenderer = new PerformanceCategoryRenderer(dom, detailsRenderer);
   // PSI environment string will ensure the categoryHeader and permalink elements are excluded
-  const perfCategoryEl = perfRenderer.render(perfCategory, reportLHR.categoryGroups, 'PSI');
+  const perfCategoryEl = perfRenderer.render(
+    perfCategory,
+    reportLHR.categoryGroups,
+    {environment: 'PSI', gatherMode: lhResult.gatherMode}
+  );
 
   const scoreGaugeEl = dom.find('.lh-score__gauge', perfCategoryEl);
   scoreGaugeEl.remove();

package/report/generator/tsconfig.json

@@ -1,23 +1,12 @@
 {
+  "extends": "../../tsconfig-base.json",
   "compilerOptions": {
-    "composite": true,
     "outDir": "../../.tmp/tsbuildinfo/report/generator",
-    "emitDeclarationOnly": true,
-    "declarationMap": true,
 
-    "target": "ES2020",
-    "module": "commonjs",
-    "moduleResolution": "node",
-
-    "allowJs": true,
-    "checkJs": true,
-    "strict": true,
-    // TODO: remove the next line to be fully `strict`.
-    "useUnknownInCatchVariables": false,
-
-    // "listFiles": true,
-    // "noErrorTruncation": true,
-    "extendedDiagnostics": true,
+    // Limit defs to base JS and DOM (for URL: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34960).
+    "lib": ["es2020", "dom"],
+    // Only include `@types/node` from node_modules/.
+    "types": ["node"],
   },
   "references": [
     {"path": "../../types/lhr/"},

package/report/renderer/category-renderer.js

@@ -171,13 +171,14 @@ export class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {DocumentFragment}
    */
-  renderCategoryHeader(category, groupDefinitions) {
+  renderCategoryHeader(category, groupDefinitions, options) {
     const component = this.dom.createComponent('categoryHeader');
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
-    const gaugeEl = this.renderScoreGauge(category, groupDefinitions);
+    const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
     gaugeContainerEl.appendChild(gaugeEl);
 
     if (category.description) {
@@ -311,6 +312,19 @@ export class CategoryRenderer {
     return clumpElement;
   }
 
+  /**
+   * @param {LH.ReportResult.Category} category
+   * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
+   * @return {DocumentFragment}
+   */
+  renderCategoryScore(category, groupDefinitions, options) {
+    if (options && (options.gatherMode === 'snapshot' || options.gatherMode === 'timespan')) {
+      return this.renderCategoryFraction(category);
+    }
+    return this.renderScoreGauge(category, groupDefinitions);
+  }
+
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
@@ -353,6 +367,44 @@ export class CategoryRenderer {
     return tmpl;
   }
 
+  /**
+   * @param {LH.ReportResult.Category} category
+   * @return {DocumentFragment}
+   */
+  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 numAudits = category.auditRefs.length;
+
+    let numPassed = 0;
+    let totalWeight = 0;
+    for (const auditRef of category.auditRefs) {
+      totalWeight += auditRef.weight;
+      if (Util.showAsPassed(auditRef.result)) numPassed++;
+    }
+
+    const fraction = numPassed / numAudits;
+    const content = this.dom.find('.lh-fraction__content', tmpl);
+    const text = this.dom.createElement('span');
+    text.textContent = `${numPassed}/${numAudits}`;
+    content.appendChild(text);
+
+    let rating = Util.calculateRating(fraction);
+
+    // If none of the available audits can affect the score, a rating isn't useful.
+    // The flow report should display the fraction with neutral icon and coloring in this case.
+    if (totalWeight === 0) {
+      rating = 'null';
+    }
+
+    wrapper.classList.add(`lh-fraction__wrapper--${rating}`);
+
+    this.dom.find('.lh-fraction__label', tmpl).textContent = category.title;
+    return tmpl;
+  }
+
   /**
    * Returns true if an LH category has any non-"notApplicable" audits.
    * @param {LH.ReportResult.Category} category
@@ -434,13 +486,14 @@ export class CategoryRenderer {
    *   ├── …
    *   ⋮
    * @param {LH.ReportResult.Category} category
-   * @param {Object<string, LH.Result.ReportGroup>} [groupDefinitions]
+   * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
+   * @param {{environment?: 'PSI', gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    */
-  render(category, groupDefinitions = {}) {
+  render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
     this.createPermalinkSpan(element, category.id);
-    element.appendChild(this.renderCategoryHeader(category, groupDefinitions));
+    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */

package/report/renderer/components.js

@@ -209,6 +209,24 @@ function createFooterComponent(dom) {
   return el0;
 }
 
+/**
+ * @param {DOM} dom
+ */
+function createFractionComponent(dom) {
+  const el0 = dom.document().createDocumentFragment();
+  const el1 = dom.createElement('a', 'lh-fraction__wrapper');
+  el1.setAttribute('href', '#');
+  const el2 = dom.createElement('div', 'lh-fraction__content-wrapper');
+  const el3 = dom.createElement('div', 'lh-fraction__content');
+  const el4 = dom.createElement('div', 'lh-fraction__background');
+  el3.append(' ', el4, ' ');
+  el2.append(' ', el3, ' ');
+  const el5 = dom.createElement('div', 'lh-fraction__label');
+  el1.append(' ', el2, ' ', el5, ' ');
+  el0.append(el1);
+  return el0;
+}
+
 /**
  * @param {DOM} dom
  */
@@ -361,10 +379,11 @@ function createMetricComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('div', 'lh-metric');
   const el2 = dom.createElement('div', 'lh-metric__innerwrap');
-  const el3 = dom.createElement('span', 'lh-metric__title');
-  const el4 = dom.createElement('div', 'lh-metric__value');
-  const el5 = dom.createElement('div', 'lh-metric__description');
-  el2.append(' ', el3, ' ', el4, ' ', el5, ' ');
+  const el3 = dom.createElement('div', 'lh-metric__icon');
+  const el4 = dom.createElement('span', 'lh-metric__title');
+  const el5 = dom.createElement('div', 'lh-metric__value');
+  const el6 = dom.createElement('div', 'lh-metric__description');
+  el2.append(' ', el3, ' ', el4, ' ', el5, ' ', el6, ' ');
   el1.append(' ', el2, ' ');
   el0.append(el1);
   return el0;
@@ -752,7 +771,7 @@ function createWarningsToplevelComponent(dom) {
 }
 
 
-/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'envItem'|'footer'|'gauge'|'gaugePwa'|'heading'|'metric'|'metricsToggle'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'topbar'|'warningsToplevel'} ComponentName */
+/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'envItem'|'footer'|'fraction'|'gauge'|'gaugePwa'|'heading'|'metric'|'metricsToggle'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'topbar'|'warningsToplevel'} ComponentName */
 /**
  * @param {DOM} dom
  * @param {ComponentName} componentName
@@ -770,6 +789,7 @@ export function createComponent(dom, componentName) {
     case 'elementScreenshot': return createElementScreenshotComponent(dom);
     case 'envItem': return createEnvItemComponent(dom);
     case 'footer': return createFooterComponent(dom);
+    case 'fraction': return createFractionComponent(dom);
     case 'gauge': return createGaugeComponent(dom);
     case 'gaugePwa': return createGaugePwaComponent(dom);
     case 'heading': return createHeadingComponent(dom);

package/report/renderer/performance-category-renderer.js

@@ -155,20 +155,20 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
-   * @param {'PSI'=} environment 'PSI' and undefined are the only valid values
+   * @param {{gatherMode: LH.Result.GatherMode, environment?: 'PSI'}=} options
    * @return {Element}
    * @override
    */
-  render(category, groups, environment) {
+  render(category, groups, options) {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
-    if (environment === 'PSI') {
+    if (options && options.environment === 'PSI') {
       const gaugeEl = this.dom.createElement('div', 'lh-score__gauge');
-      gaugeEl.appendChild(this.renderScoreGauge(category, groups));
+      gaugeEl.appendChild(this.renderCategoryScore(category, groups, options));
       element.appendChild(gaugeEl);
     } else {
       this.createPermalinkSpan(element, category.id);
-      element.appendChild(this.renderCategoryHeader(category, groups));
+      element.appendChild(this.renderCategoryHeader(category, groups, options));
     }
 
     // Metrics.

package/report/renderer/pwa-category-renderer.js

@@ -48,11 +48,21 @@ export class PwaCategoryRenderer extends CategoryRenderer {
   }
 
   /**
+   * Alias for backcompat.
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
    * @return {DocumentFragment}
    */
   renderScoreGauge(category, groupDefinitions) {
+    return this.renderCategoryScore(category, groupDefinitions);
+  }
+
+  /**
+   * @param {LH.ReportResult.Category} category
+   * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @return {DocumentFragment}
+   */
+  renderCategoryScore(category, groupDefinitions) {
     // Defer to parent-gauge style if category error.
     if (category.score === null) {
       return super.renderScoreGauge(category, groupDefinitions);

package/report/renderer/report-renderer.js

@@ -160,11 +160,15 @@ export class ReportRenderer {
 
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
-      const categoryGauge = renderer.renderScoreGauge(category, report.categoryGroups || {});
+      const categoryGauge = renderer.renderCategoryScore(
+        category,
+        report.categoryGroups || {},
+        {gatherMode: report.gatherMode}
+      );
 
       if (Util.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
-      } else if (renderer.renderScoreGauge === categoryRenderer.renderScoreGauge) {
+      } else if (renderer.renderCategoryScore === categoryRenderer.renderCategoryScore) {
         // The renderer for default categories is just the default CategoryRenderer.
         // If the functions are equal, then renderer is an instance of CategoryRenderer.
         // For example, the PWA category uses PwaCategoryRenderer, which overrides
@@ -238,12 +242,17 @@ export class ReportRenderer {
     }
 
     const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(category, report.categoryGroups));
+      wrapper.appendChild(renderer.render(
+        category,
+        report.categoryGroups,
+        categoryOptions
+      ));
     }
 
     const reportFragment = this._dom.createFragment();

package/report/renderer/report-ui-features.js

@@ -219,16 +219,14 @@ export class ReportUIFeatures {
         return !thirdPartyFilterAuditExclusions.includes(containingAudit.id);
       });
 
-    tablesWithUrls.forEach((tableEl, index) => {
+    tablesWithUrls.forEach((tableEl) => {
       const rowEls = getTableRows(tableEl);
       const thirdPartyRows = this._getThirdPartyRows(rowEls, this.json.finalUrl);
 
       // create input box
       const filterTemplate = this._dom.createComponent('3pFilter');
       const filterInput = this._dom.find('input', filterTemplate);
-      const id = `lh-3p-filter-label--${index}`;
 
-      filterInput.id = id;
       filterInput.addEventListener('change', e => {
         const shouldHideThirdParty = e.target instanceof HTMLInputElement && !e.target.checked;
         let even = true;
@@ -250,7 +248,6 @@ export class ReportUIFeatures {
         }
       });
 
-      this._dom.find('label', filterTemplate).setAttribute('for', id);
       this._dom.find('.lh-3p-filter-count', filterTemplate).textContent =
           `${thirdPartyRows.length}`;
       this._dom.find('.lh-3p-ui-string', filterTemplate).textContent =