lighthouse 12.5.1 → 12.6.0

package/flow-report/src/i18n/i18n.d.ts

@@ -81,7 +81,6 @@ declare function useI18n(): {
         dropdownViewer: string;
         dropdownSaveGist: string;
         dropdownDarkTheme: string;
-        dropdownInsightsToggle: string;
         dropdownViewUnthrottledTrace: string;
         runtimeSettingsDevice: string;
         runtimeSettingsNetworkThrottling: string;
@@ -110,6 +109,9 @@ declare function useI18n(): {
         firstPartyChipLabel: string;
         openInANewTabTooltip: string;
         unattributable: string;
+        insightsNotice: string;
+        tryInsights: string;
+        goBackToAudits: string;
     };
 };
 declare function useLocalizedStrings(): {
@@ -186,7 +188,6 @@ declare function useLocalizedStrings(): {
     dropdownViewer: string;
     dropdownSaveGist: string;
     dropdownDarkTheme: string;
-    dropdownInsightsToggle: string;
     dropdownViewUnthrottledTrace: string;
     runtimeSettingsDevice: string;
     runtimeSettingsNetworkThrottling: string;
@@ -215,6 +216,9 @@ declare function useLocalizedStrings(): {
     firstPartyChipLabel: string;
     openInANewTabTooltip: string;
     unattributable: string;
+    insightsNotice: string;
+    tryInsights: string;
+    goBackToAudits: string;
 };
 declare function useStringFormatter(): (str: string, values?: Record<string, string | number>) => string;
 declare const I18nProvider: FunctionComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.5.1",
+  "version": "12.6.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -10,20 +10,21 @@
     "smokehouse": "./cli/test/smokehouse/frontends/smokehouse-bin.js"
   },
   "engines": {
-    "node": ">=18.16"
+    "node": ">=18.20"
   },
   "scripts": {
     "prepack": "yarn build-report --standalone --flow --esm && yarn build-types",
     "postpack": "yarn clean-types",
     "build-all": "npm-run-posix-or-windows build-all:task",
-    "build-all:task": "yarn build-report && yarn build-cdt-strings && yarn build-devtools && concurrently 'yarn build-extension' 'yarn build-lr' 'yarn build-viewer' 'yarn build-treemap' 'yarn build-smokehouse-bundle' && yarn build-pack",
-    "build-all:task:windows": "yarn build-report && yarn build-cdt-strings && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
+    "build-all:task": "yarn build-report && yarn build-cdt-strings && yarn build-devtools && concurrently 'yarn build-extension' 'yarn build-lr' 'yarn build-viewer' 'yarn build-treemap' 'yarn build-smokehouse-bundle' 'yarn build-legacy-javascript' && yarn build-pack",
+    "build-all:task:windows": "yarn build-report && yarn build-cdt-strings && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle && yarn build-legacy-javascript",
     "build-cdt-lib": "node ./build/build-cdt-lib.js",
     "build-cdt-strings": "node ./build/build-cdt-strings.js",
     "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
     "build-extension-chrome": "node ./build/build-extension.js chrome",
     "build-extension-firefox": "node ./build/build-extension.js firefox",
     "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
+    "build-legacy-javascript": "node ./build/build-legacy-javascript.js",
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "yarn reset-link && node --max-old-space-size=4096 ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
@@ -116,6 +117,7 @@
     "@types/eslint": "^8.2.1",
     "@types/estree": "^0.0.50",
     "@types/gh-pages": "^2.0.0",
+    "@types/gtag.js": "0.0.20",
     "@types/google.analytics": "0.0.39",
     "@types/jpeg-js": "^0.3.7",
     "@types/jsdom": "^16.2.13",
@@ -126,7 +128,6 @@
     "@types/resize-observer-browser": "^0.1.1",
     "@types/resolve": "^1.20.2",
     "@types/semver": "^5.5.0",
-    "@types/tabulator-tables": "^4.9.1",
     "@types/ws": "^7.0.0",
     "@types/yargs": "^17.0.8",
     "@types/yargs-parser": "^20.2.1",
@@ -138,7 +139,7 @@
     "builtin-modules": "^3.3.0",
     "c8": "^7.11.3",
     "chalk": "^2.4.1",
-    "chrome-devtools-frontend": "1.0.1418433",
+    "chrome-devtools-frontend": "1.0.1445635",
     "colors": "^1.4.0",
     "concurrently": "^6.4.0",
     "conventional-changelog-cli": "^2.1.1",
@@ -171,27 +172,26 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^24.4.0",
+    "puppeteer": "^24.6.1",
     "resolve": "^1.22.1",
     "rollup": "^2.52.7",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "source-map-support": "^0.5.21",
-    "tabulator-tables": "^4.9.3",
     "terser": "^5.18.2",
     "testdouble": "^3.18.0",
     "typed-query-selector": "^2.11.2",
-    "typescript": "5.5.3",
+    "typescript": "5.8.2",
     "wait-for-expect": "^3.0.2",
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
-    "@paulirish/trace_engine": "0.0.50",
+    "@paulirish/trace_engine": "0.0.52",
     "@sentry/node": "^7.0.0",
     "axe-core": "^4.10.3",
     "chrome-launcher": "^1.1.2",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.5",
-    "devtools-protocol": "0.0.1436416",
+    "devtools-protocol": "0.0.1445099",
     "enquirer": "^2.3.6",
     "http-link-header": "^1.1.1",
     "intl-messageformat": "^10.5.3",
@@ -204,19 +204,19 @@
     "metaviewport-parser": "0.3.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
-    "puppeteer-core": "^24.4.0",
+    "puppeteer-core": "^24.6.1",
     "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.26.5",
+    "third-party-web": "^0.26.6",
     "tldts-icann": "^6.1.16",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.1436416",
-    "puppeteer-core/**/devtools-protocol": "0.0.1436416"
+    "puppeteer/**/devtools-protocol": "0.0.1445099",
+    "puppeteer-core/**/devtools-protocol": "0.0.1445099"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [
@@ -229,5 +229,6 @@
   "bugs": {
     "url": "https://github.com/GoogleChrome/lighthouse/issues"
   },
-  "homepage": "https://github.com/GoogleChrome/lighthouse#readme"
+  "homepage": "https://github.com/GoogleChrome/lighthouse#readme",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/readme.md

@@ -53,7 +53,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.
 
 > **Note**
-> Lighthouse requires Node 18 LTS (18.x) or later.
+> Lighthouse requires Node 18.20 or later.
 
 **Installation**:
 

package/report/README.md

@@ -11,7 +11,7 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](htt
 1. [`report/generator/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/main/report/generator/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
    - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `inline-fs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 1. [`report/renderer`](https://github.com/GoogleChrome/lighthouse/tree/main/report/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
-1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/main/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
+1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/main/report/assets/standalone-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
 
 
 ### Data Hydration

package/report/assets/styles.css

@@ -105,8 +105,8 @@
   --plugin-icon-size: 65%;
   --report-background-color: #fff;
   --report-border-color-secondary: #ebebeb;
-  --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --report-font-family: Roboto, Helvetica, Arial, sans-serif;
+  --report-font-family-monospace: monospace, 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console';
+  --report-font-family: system-ui, Roboto, Helvetica, Arial, sans-serif;
   --report-font-size: 14px;
   --report-font-size-secondary: 12px;
   --report-icon-size: var(--score-icon-background-size);
@@ -278,8 +278,6 @@
   --header-padding: 16px 0 16px 0;
   --screenshot-overlay-background: transparent;
   --plugin-icon-size: 75%;
-  --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --report-font-size: 12px;
   --report-line-height: 20px;
   --score-icon-margin-left: 2px;
@@ -392,8 +390,8 @@
 
   With that sorted, the next challenge is appropriate column sizing and text wrapping inside our
   .lh-details tables. Even more fun.
-    * We don't want table headers ("Potential Savings (ms)") to wrap or their column values, but
-    we'd be happy for the URL column to wrap if the URLs are particularly long.
+    * We don't want table headers ("Est Savings (ms)") to wrap or their column values, but
+      we'd be happy for the URL column to wrap if the URLs are particularly long.
     * We want the narrow columns to remain narrow, providing the most column width for URL
     * We don't want the table to extend past 100% width.
     * Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,
@@ -426,8 +424,6 @@
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
   margin-left: var(--audit-description-padding-left);
-  /* whatever the .lh-details side margins are */
-  width: 100%;
 }
 
 .lh-audit__stackpack {
@@ -487,6 +483,7 @@
 .lh-report-icon--treemap::before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="black"><path d="M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z"/></svg>');
 }
+
 .lh-report-icon--date::before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 11h2v2H7v-2zm14-5v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 012 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z"/></svg>');
 }
@@ -563,6 +560,10 @@
 }
 
 /* Node */
+.lh-node {
+  display: flow-root;
+}
+
 .lh-node__snippet {
   font-family: var(--report-font-family-monospace);
   color: var(--snippet-color);
@@ -988,6 +989,45 @@
   max-width: 120px;
 }
 
+/* Toggle Insights banner */
+.lh-perf-insights-toggle {
+  margin: calc(var(--default-padding) * 2) 0 var(--default-padding);
+  display: flex;
+  gap: var(--default-padding);
+  align-items: center;
+  background-color: rgba(30, 164, 70, 0.08);
+
+  padding: var(--toplevel-warning-padding);
+  border-radius: 8px;
+}
+
+.lh-perf-insights-toggle button {
+  cursor: pointer;
+  margin: 0;
+  flex: 1;
+}
+
+.lh-perf-toggle-text {
+  align-items: center;
+  flex: 5;
+}
+.lh-dark .lh-perf-toggle-text {
+  color: rgba(30, 164, 70, 1);
+}
+
+.lh-perf-toggle-text a {
+  color: var(--link-color);
+}
+
+.lh-perf-insights-icon svg {
+  margin: 4px;
+  background-repeat: no-repeat;
+  width: var(--report-icon-size);
+  height: var(--report-icon-size);
+  opacity: 0.7;
+  display: inline-block;
+  vertical-align: middle;
+}
 /* Audit */
 
 .lh-audit {
@@ -1077,8 +1117,12 @@
 }
 
 /* Report */
+.lh-list {
+  margin-right: calc(var(--default-padding) * 2);
+}
 .lh-list > :not(:last-child) {
   margin-bottom: calc(var(--default-padding) * 2);
+  border-bottom: 1px solid #A8C7FA;
 }
 
 .lh-header-container {
@@ -1611,7 +1655,10 @@
 }
 
 .lh-row--group ~ [data-entity]:not(.lh-row--group) ~ .lh-sub-item-row td:first-child {
-  padding-left: 40px;
+  margin-left: 20px;
+  padding-left: 10px;
+  border-left: 1px solid #A8C7FA;
+  display: block;
 }
 
 .lh-row--even {
@@ -1681,6 +1728,26 @@
   width: 12%;
 }
 
+/** Tweak styling for tables in insight audits. */
+.lh-audit[id$="-insight"] .lh-table {
+  border: none;
+}
+
+.lh-audit[id$="-insight"] .lh-table thead th {
+  font-weight: bold;
+  color: unset;
+}
+
+.lh-audit[id$="-insight"] .lh-table th,
+.lh-audit[id$="-insight"] .lh-table td {
+  padding: calc(var(--default-padding) / 2);
+}
+
+.lh-audit[id$="-insight"] .lh-table .lh-row--even,
+.lh-audit[id$="-insight"] .lh-table tr:not(.lh-row--group):hover {
+  background-color: unset;
+}
+
 .lh-text__url-host {
   display: inline;
 }

package/report/assets/templates.html

@@ -367,7 +367,6 @@ SPDX-License-Identifier: Apache-2.0
         <!-- Only enabled if Options.onViewTrace is set and we are on simulated throttling. -->
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open lh-hidden" data-i18n="dropdownViewUnthrottledTrace" data-action="view-unthrottled-trace"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--experiment" data-i18n="dropdownInsightsToggle" data-action="toggle-insights"></a>
       </div>
     </div>
   </div>
@@ -564,6 +563,9 @@ SPDX-License-Identifier: Apache-2.0
         line-height: 26px;
         white-space: nowrap;
       }
+      .lh-crc .lh-crc-node__longest {
+        color: var(--color-average-secondary);
+      }
       .lh-crc .lh-crc-node__tree-value {
         margin-left: 10px;
       }

package/report/clients/standalone.js

@@ -10,8 +10,6 @@
  * The renderer code is bundled and injected into the report HTML along with the JSON report.
  */
 
-/* global ga */
-
 import {renderReport} from '../renderer/api.js';
 import {Logger} from '../renderer/logger.js';
 
@@ -29,8 +27,12 @@ function __initLighthouseReport__() {
   document.body.append(reportRootEl);
 
   document.addEventListener('lh-analytics', /** @param {Event} e */ e => {
-    // @ts-expect-error
-    if (window.ga) ga(e.detail.cmd, e.detail.fields);
+    const ce = /** @type {CustomEvent<{name: string, data?: {}}>} */(e);
+
+    if ('gtag' in window) {
+      // @ts-expect-error
+      window.gtag('event', ce.detail.name, ce.detail.data ?? {});
+    }
   });
 
   document.addEventListener('lh-log', /** @param {Event} e */ e => {

package/report/renderer/category-renderer.d.ts

@@ -64,7 +64,7 @@ export class CategoryRenderer {
      * @return {Array<Element>}
      */
     _renderGroupedAudits(auditRefs: Array<LH.ReportResult.AuditRef>, groupDefinitions: {
-        [x: string]: LH.Result.ReportGroup;
+        [x: string]: import("../../types/lhr/lhr.js").default.ReportGroup;
     }): Array<Element>;
     /**
      * Take a set of audits, group them if they have groups, then render in a top-level
@@ -74,7 +74,7 @@ export class CategoryRenderer {
      * @return {Element}
      */
     renderUnexpandableClump(auditRefs: Array<LH.ReportResult.AuditRef>, groupDefinitions: {
-        [x: string]: LH.Result.ReportGroup;
+        [x: string]: import("../../types/lhr/lhr.js").default.ReportGroup;
     }): Element;
     /**
      * Take a set of audits and render in a top-level, expandable clump that starts