lighthouse 8.6.0-dev.20211021 → 8.6.0

package/lighthouse-core/util-commonjs.js

@@ -170,8 +170,6 @@ class Util {
 
   /**
    * Convert a score to a rating label.
-   * TODO: Return `'error'` for `score === null && !scoreDisplayMode`.
-   *
    * @param {number|null} score
    * @param {string=} scoreDisplayMode
    * @return {string}
@@ -392,21 +390,43 @@ class Util {
     return hostname.split('.').slice(-splitTld.length).join('.');
   }
 
+  /**
+   * @param {LH.Result['configSettings']} settings
+   * @return {!Array<{name: string, description: string}>}
+   */
+  static getEnvironmentDisplayValues(settings) {
+    const emulationDesc = Util.getEmulationDescriptions(settings);
+
+    return [
+      {
+        name: Util.i18n.strings.runtimeSettingsDevice,
+        description: emulationDesc.deviceEmulation,
+      },
+      {
+        name: Util.i18n.strings.runtimeSettingsNetworkThrottling,
+        description: emulationDesc.networkThrottling,
+      },
+      {
+        name: Util.i18n.strings.runtimeSettingsCPUThrottling,
+        description: emulationDesc.cpuThrottling,
+      },
+    ];
+  }
 
   /**
    * @param {LH.Result['configSettings']} settings
-   * @return {!{deviceEmulation: string, networkThrottling: string, cpuThrottling: string, summary: string}}
+   * @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
    */
   static getEmulationDescriptions(settings) {
     let cpuThrottling;
     let networkThrottling;
-    let summary;
 
     const throttling = settings.throttling;
 
     switch (settings.throttlingMethod) {
       case 'provided':
-        summary = networkThrottling = cpuThrottling = Util.i18n.strings.throttlingProvided;
+        cpuThrottling = Util.i18n.strings.throttlingProvided;
+        networkThrottling = Util.i18n.strings.throttlingProvided;
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
@@ -414,13 +434,6 @@ class Util {
         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 &&
-            throttling.downloadThroughputKbps === 1.6 * 1024 * 0.9 &&
-            throttling.uploadThroughputKbps === 750 * 0.9;
-        };
-        summary = `${isSlow4G() ? 'Slow 4G' : 'Custom'} throttling by DevTools`;
         break;
       }
       case 'simulate': {
@@ -428,15 +441,11 @@ class Util {
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (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;
-        };
-        summary = isSlow4G() ? 'Simulated slow 4G' : 'Custom simulated throttling';
         break;
       }
       default:
-        summary = cpuThrottling = networkThrottling = Util.i18n.strings.runtimeUnknown;
+        cpuThrottling = Util.i18n.strings.runtimeUnknown;
+        networkThrottling = Util.i18n.strings.runtimeUnknown;
     }
 
     // TODO(paulirish): revise Runtime Settings strings: https://github.com/GoogleChrome/lighthouse/pull/11796
@@ -449,7 +458,6 @@ class Util {
       deviceEmulation,
       cpuThrottling,
       networkThrottling,
-      summary,
     };
   }
 
@@ -632,12 +640,22 @@ Util.UIStrings = {
   /** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
   dropdownDarkTheme: 'Toggle Dark Theme',
 
+  /** Title of the Runtime settings table in a Lighthouse report.  Runtime settings are the environment configurations that a specific report used at auditing time. */
+  runtimeSettingsTitle: 'Runtime Settings',
+  /** Label for a row in a table that shows the URL that was audited during a Lighthouse run. */
+  runtimeSettingsUrl: 'URL',
+  /** Label for a row in a table that shows the time at which a Lighthouse run was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC. */
+  runtimeSettingsFetchTime: 'Fetch Time',
   /** Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run.  Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. */
   runtimeSettingsDevice: 'Device',
   /** Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any. */
   runtimeSettingsNetworkThrottling: 'Network throttling',
   /** Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any.*/
   runtimeSettingsCPUThrottling: 'CPU throttling',
+  /** Label for a row in a table that shows in what tool Lighthouse is being run (e.g. The lighthouse CLI, Chrome DevTools, Lightrider, WebPageTest, etc). */
+  runtimeSettingsChannel: 'Channel',
+  /** Label for a row in a table that shows the User Agent that was detected on the Host machine that ran Lighthouse. */
+  runtimeSettingsUA: 'User agent (host)',
   /** Label for a row in a table that shows the User Agent that was used to send out all network requests during the Lighthouse run. */
   runtimeSettingsUANetwork: 'User agent (network)',
   /** Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783. */
@@ -656,12 +674,6 @@ Util.UIStrings = {
   runtimeDesktopEmulation: 'Emulated Desktop',
   /** Descriptive explanation for a runtime setting that is set to an unknown value. */
   runtimeUnknown: 'Unknown',
-  /** Descriptive label that this analysis run was from a single pageload of a browser (not a summary of hundreds of loads) */
-  runtimeSingleLoad: 'Single page load',
-  /** Descriptive label that this analysis only considers the initial load of the page, and no interaction beyond when the page had "fully loaded" */
-  runtimeAnalysisWindow: 'Initial page load',
-  /** Descriptive explanation that this analysis run was from a single pageload of a browser, whereas field data often summarizes hundreds+ of page loads */
-  runtimeSingleLoadTooltip: 'This data is taken from a single page load, as opposed to field data summarizing many sessions.', // eslint-disable-line max-len
 
   /** Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. */
   throttlingProvided: 'Provided by environment',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.6.0-dev.20211021",
+  "version": "8.6.0",
   "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": ">=14.15"
+    "node": ">=12.20.0 12 || >=14.13 14  || >=15"
   },
   "scripts": {
     "build-all": "npm-run-posix-or-windows build-all:task",
@@ -23,7 +23,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 && yarn eslint --fix report/renderer/components.js && node build/build-report.js && bash lighthouse-core/scripts/copy-util-commonjs.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",
     "build-treemap": "node ./build/build-treemap.js",
     "build-viewer": "node ./build/build-viewer.js",
@@ -51,7 +51,7 @@
     "unit-viewer": "yarn jest \"lighthouse-viewer/.*-test.js\"",
     "unit-flow": "yarn jest \"flow-report/.*-test.[tj]s[x]?\"",
     "unit": "yarn jest",
-    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run jest --ci .",
+    "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",
@@ -105,7 +105,6 @@
     "@types/configstore": "^4.0.0",
     "@types/cpy": "^5.1.0",
     "@types/eslint": "^4.16.6",
-    "@types/estree": "^0.0.50",
     "@types/exorcist": "^0.4.5",
     "@types/gh-pages": "^2.0.0",
     "@types/google.analytics": "0.0.39",
@@ -129,7 +128,6 @@
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "@wardpeet/brfs": "2.1.0",
-    "acorn": "^8.5.0",
     "angular": "^1.7.4",
     "archiver": "^3.0.0",
     "browserify": "^17.0.0",
@@ -159,7 +157,6 @@
     "jsonld": "^5.2.0",
     "jsonlint-mod": "^1.7.6",
     "lighthouse-plugin-publisher-ads": "^1.4.1",
-    "magic-string": "^0.25.7",
     "mime-types": "^2.1.30",
     "node-fetch": "^2.6.1",
     "npm-run-posix-or-windows": "^2.0.2",
@@ -168,7 +165,6 @@
     "preact": "^10.5.14",
     "pretty-json-stringify": "^0.0.2",
     "puppeteer": "^10.2.0",
-    "resolve": "^1.20.0",
     "rollup": "^2.50.6",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-polyfill-node": "^0.7.0",

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 14 LTS (14.x) or later._
+_Lighthouse requires Node 12 LTS (12.20) or later._
 
 **Installation**:
 
@@ -451,9 +451,9 @@ machine. Report results are never processed or beaconed to a remote server.
 
 ### How do I get localized Lighthouse results via the CLI?
 
-Starting in Lighthouse 8.0, Lighthouse relies entirely on native `Intl` support and no longer uses an `Intl` polyfill. If you're using Node 14 or later, there should be no issue because Node is now [built with `full-icu` by default](https://nodejs.medium.com/node-js-12-to-lts-and-node-js-13-is-here-e28d6a4a2bd#9514).
+Starting in Lighthouse 8.0, Lighthouse relies entirely on native `Intl` support and no longer uses an `Intl` polyfill. If you're using Node 13 or later, there should be no issue because Node is now [built with `full-icu` by default](https://nodejs.medium.com/node-js-12-to-lts-and-node-js-13-is-here-e28d6a4a2bd#9514).
 
-However, if you're using a `small-icu` Node build, you may see Lighthouse log messages about your locale not being available. To remedy this, you can upgrade to Node 14+ or manually install ICU data by using the [`full-icu`](https://www.npmjs.com/package/full-icu) module and the [`--icu-data-dir` node flag](https://nodejs.org/api/intl.html#intl_providing_icu_data_at_runtime) at launch.
+However, if you're using Node 12 (when `small-icu` was the default) or another `small-icu` Node build, you may see Lighthouse log messages about your locale not being available. To remedy this, you can upgrade to Node 14+ or manually install ICU data by using the [`full-icu`](https://www.npmjs.com/package/full-icu) module and the [`--icu-data-dir` node flag](https://nodejs.org/api/intl.html#intl_providing_icu_data_at_runtime) at launch.
 
 ### How do I author custom audits to extend Lighthouse?
 

package/report/assets/styles.css

@@ -79,6 +79,7 @@
   --audit-group-padding-vertical: 8px;
   --audit-margin-horizontal: 5px;
   --audit-padding-vertical: 8px;
+  --category-header-font-size: 20px;
   --category-padding: 40px;
   --chevron-line-stroke: var(--color-gray-600);
   --chevron-size: 12px;
@@ -192,7 +193,7 @@
     --color-informative: var(--color-blue-200);
 
     /* Component variables */
-    --env-item-background-color: #393535;
+    --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);
@@ -249,6 +250,7 @@
   --audit-group-margin-bottom: 20px;
   --audit-group-padding-vertical: 12px;
   --audit-padding-vertical: 4px;
+  --category-header-font-size: 16px;
   --category-padding: 12px;
   --default-padding: 12px;
   --env-name-min-width: 120px;
@@ -417,8 +419,6 @@
   width: var(--report-icon-size);
   height: var(--report-icon-size);
   opacity: 0.7;
-  display: inline-block;
-  vertical-align: middle;
 }
 .lh-report-icon:hover::before {
   opacity: 1;
@@ -442,35 +442,9 @@
   background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 100 125"><path d="M50 23.587c-16.27 0-22.799 12.574-22.799 21.417 0 12.917 10.117 22.451 12.436 32.471h20.726c2.32-10.02 12.436-19.554 12.436-32.471 0-8.843-6.528-21.417-22.799-21.417zM39.637 87.161c0 3.001 1.18 4.181 4.181 4.181h.426l.41 1.231C45.278 94.449 46.042 95 48.019 95h3.963c1.978 0 2.74-.551 3.365-2.427l.409-1.231h.427c3.002 0 4.18-1.18 4.18-4.181V80.91H39.637v6.251zM50 18.265c1.26 0 2.072-.814 2.072-2.073v-9.12C52.072 5.813 51.26 5 50 5c-1.259 0-2.072.813-2.072 2.073v9.12c0 1.259.813 2.072 2.072 2.072zM68.313 23.727c.994.774 2.135.634 2.91-.357l5.614-7.187c.776-.992.636-2.135-.356-2.909-.992-.776-2.135-.636-2.91.357l-5.613 7.186c-.778.993-.636 2.135.355 2.91zM91.157 36.373c-.306-1.222-1.291-1.815-2.513-1.51l-8.85 2.207c-1.222.305-1.814 1.29-1.51 2.512.305 1.223 1.291 1.814 2.513 1.51l8.849-2.206c1.223-.305 1.816-1.291 1.511-2.513zM86.757 60.48l-8.331-3.709c-1.15-.512-2.225-.099-2.736 1.052-.512 1.151-.1 2.224 1.051 2.737l8.33 3.707c1.15.514 2.225.101 2.736-1.05.513-1.149.1-2.223-1.05-2.737zM28.779 23.37c.775.992 1.917 1.131 2.909.357.992-.776 1.132-1.917.357-2.91l-5.615-7.186c-.775-.992-1.917-1.132-2.909-.357s-1.131 1.917-.356 2.909l5.614 7.187zM21.715 39.583c.305-1.223-.288-2.208-1.51-2.513l-8.849-2.207c-1.222-.303-2.208.289-2.513 1.511-.303 1.222.288 2.207 1.511 2.512l8.848 2.206c1.222.304 2.208-.287 2.513-1.509zM21.575 56.771l-8.331 3.711c-1.151.511-1.563 1.586-1.05 2.735.511 1.151 1.586 1.563 2.736 1.052l8.331-3.711c1.151-.511 1.563-1.586 1.05-2.735-.512-1.15-1.585-1.562-2.736-1.052z"/></svg>');
 }
 .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>');
-}
-.lh-report-icon--devices::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6h18V4H4a2 2 0 00-2 2v11H0v3h14v-3H4V6zm19 2h-6a1 1 0 00-1 1v10c0 .6.5 1 1 1h6c.6 0 1-.5 1-1V9c0-.6-.5-1-1-1zm-1 9h-4v-7h4v7z"/></svg>');
-}
-.lh-report-icon--world::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3c-.3-1.3-.8-2.5-1.4-3.6A8 8 0 0 1 18.9 8zm-7-4a14 14 0 0 1 2 4h-4a14 14 0 0 1 2-4zM4.3 14a8.2 8.2 0 0 1 0-4h3.3a16.5 16.5 0 0 0 0 4H4.3zm.8 2h3a14 14 0 0 0 1.3 3.6A8 8 0 0 1 5.1 16zm3-8H5a8 8 0 0 1 4.3-3.6L8 8zM12 20a14 14 0 0 1-2-4h4a14 14 0 0 1-2 4zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.6 14.6 0 0 1 0 4zm.3 5.6c.6-1.2 1-2.4 1.4-3.6h3a8 8 0 0 1-4.4 3.6zm1.8-5.6a16.5 16.5 0 0 0 0-4h3.3a8.2 8.2 0 0 1 0 4h-3.3z"/></svg>');
-}
-.lh-report-icon--stopwatch::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.1-6.6L20.5 6l-1.4-1.4L17.7 6A9 9 0 0 0 3 13a9 9 0 1 0 16-5.6zm-7 12.6a7 7 0 1 1 0-14 7 7 0 0 1 0 14z"/></svg>');
-}
-.lh-report-icon--networkspeed::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.9 5c-.2 0-.3 0-.4.2v.2L10.1 17a2 2 0 0 0-.2 1 2 2 0 0 0 4 .4l2.4-12.9c0-.3-.2-.5-.5-.5zM1 9l2 2c2.9-2.9 6.8-4 10.5-3.6l1.2-2.7C10 3.8 4.7 5.3 1 9zm20 2 2-2a15.4 15.4 0 0 0-5.6-3.6L17 8.2c1.5.7 2.9 1.6 4.1 2.8zm-4 4 2-2a9.9 9.9 0 0 0-2.7-1.9l-.5 3 1.2.9zM5 13l2 2a7.1 7.1 0 0 1 4-2l1.3-2.9C9.7 10.1 7 11 5 13z"/></svg>');
-}
-.lh-report-icon--samples-one::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="7" cy="14" r="3"/><path d="M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>');
-}
-.lh-report-icon--samples-many::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 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/><circle cx="7" cy="14" r="3"/><circle cx="11" cy="6" r="3"/></svg>');
-}
-.lh-report-icon--chrome::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 562 562"><path d="M256 25.6v25.6a204 204 0 0 1 144.8 60 204 204 0 0 1 60 144.8 204 204 0 0 1-60 144.8 204 204 0 0 1-144.8 60 204 204 0 0 1-144.8-60 204 204 0 0 1-60-144.8 204 204 0 0 1 60-144.8 204 204 0 0 1 144.8-60V0a256 256 0 1 0 0 512 256 256 0 0 0 0-512v25.6z"/><path d="M256 179.2v25.6a51.3 51.3 0 0 1 0 102.4 51.3 51.3 0 0 1 0-102.4v-51.2a102.3 102.3 0 1 0-.1 204.7 102.3 102.3 0 0 0 .1-204.7v25.6z"/><path d="M256 204.8h217.6a25.6 25.6 0 0 0 0-51.2H256a25.6 25.6 0 0 0 0 51.2m44.3 76.8L191.5 470.1a25.6 25.6 0 1 0 44.4 25.6l108.8-188.5a25.6 25.6 0 1 0-44.4-25.6m-88.6 0L102.9 93.2a25.7 25.7 0 0 0-35-9.4 25.7 25.7 0 0 0-9.4 35l108.8 188.5a25.7 25.7 0 0 0 35 9.4 25.9 25.9 0 0 0 9.4-35.1"/></svg>');
+  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="M0 0h24v24H0V0z" fill="none"/><path d="M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z"/></svg>');
 }
 
-
-
 .lh-buttons {
   display: flex;
   flex-wrap: wrap;
@@ -484,9 +458,6 @@
   color: rgb(26, 115, 232);
   background-color: var(--report-background-color);
 }
-.lh-button:first-of-type {
-  margin-left: 0;
-}
 .lh-dark .lh-button {
   color: var(--color-blue-200);
 }
@@ -543,7 +514,7 @@
 }
 .lh-audit--manual .lh-audit__score-icon,
 .lh-audit--notapplicable .lh-audit__score-icon {
-  border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);
+  border: 2px solid var(--color-gray-400);
   border-radius: 100%;
   background: none;
 }
@@ -553,7 +524,7 @@
 }
 
 .lh-audit--informative .lh-audit__score-icon {
-  border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);
+  border: 2px solid var(--color-gray-400);
   border-radius: 100%;
 }
 
@@ -690,9 +661,8 @@
 .lh-metrics-container {
   display: grid;
   grid-template-rows: 1fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr;
   grid-auto-flow: column;
-  grid-column-gap: var(--report-line-height);
+  grid-column-gap: 24px;
 }
 
 .lh-metric {
@@ -1004,9 +974,6 @@
   margin-bottom: var(--audit-group-margin-bottom);
   position: relative;
 }
-.lh-audit-group--metrics {
-  margin-bottom: calc(var(--audit-group-margin-bottom) / 2);
-}
 
 .lh-audit-group__header::before {
   /* By default, groups don't get an icon */
@@ -1108,13 +1075,6 @@
   margin-top: var(--audit-group-padding-vertical);
 }
 
-/* Our report design omits the header 'Metrics', as they're clearly the metrics.
-   It's more straightforward to hide w/ CSS vs change categoryRenderer.renderAuditGroup for this case. */
-.lh-audit-group--metrics > .lh-audit-group__header {
-  /* Also, it's vis hidden (and not display:none) because of spacing regarding the pill. */
-  visibility: hidden;
-}
-
 .lh-audit-explanation {
   margin: var(--audit-padding-vertical) 0 calc(var(--audit-padding-vertical) / 2) var(--audit-margin-horizontal);
   line-height: var(--audit-explanation-line-height);
@@ -1268,7 +1228,7 @@
 }
 .lh-fraction__wrapper--null .lh-fraction__content::before {
   border-radius: 50%;
-  border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-700);
+  border: 2px solid var(--color-gray-700);
 }
 
 .lh-fraction__background {
@@ -1291,13 +1251,10 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  font-size: calc(0.3 * var(--gauge-circle-size));
-  line-height: calc(0.4 * var(--gauge-circle-size));
+  font-size: var(--gauge-label-font-size);
   width: max-content;
-  min-width: calc(1.5 * var(--gauge-circle-size));
-  padding: calc(0.1 * var(--gauge-circle-size)) calc(0.2 * var(--gauge-circle-size));
-  --score-icon-size: calc(0.21 * var(--gauge-circle-size));
-  --score-icon-margin: 0 calc(0.15 * var(--gauge-circle-size)) 0 0;
+  padding: 1em;
+  min-width: 6em;
 }
 
 .lh-gauge {
@@ -1325,9 +1282,12 @@
   position: relative;
   height: var(--gauge-circle-size);
 }
-.lh-category .lh-gauge__svg-wrapper,
+.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 */
@@ -1405,6 +1365,10 @@
   --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,
@@ -1461,6 +1425,8 @@
 }
 
 .lh-category-header {
+  font-size: var(--category-header-font-size);
+  min-height: var(--gauge-circle-size);
   margin-bottom: var(--section-padding-vertical);
 }
 
@@ -1470,51 +1436,11 @@
   margin: 0px auto;
 }
 
-.lh-category-header__finalscreenshot {
-  display: grid;
-  grid-template: none / 1fr 1px 1fr;
-  justify-items: center;
-  align-items: center;
-  gap: var(--report-line-height);
-}
-
-.lh-category-header__finalscreenshot .lh-scorescale {
-  border: 0;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.lh-category-header__finalscreenshot .lh-scorescale-range {
-  font-family: unset;
-  font-size: 12px;
-}
-
-.lh-final-ss-image {
-  /* constrain the size of the image to not be too large */
-  max-height: calc(var(--gauge-circle-size-big) * 2.8);
-  max-width: calc(var(--gauge-circle-size-big) * 3.5);
-  border: 1px solid var(--color-gray-200);
-  padding: 4px;
-  border-radius: 3px;
-}
-
-.lh-category-headercol--separator {
-  background: var(--color-gray-200);
-  width: 1px;
-  height: var(--gauge-circle-size-big);
+.lh-category-header .lh-audit__title {
+  font-size: var(--category-header-font-size);
+  line-height: var(--header-line-height);
 }
 
-@media screen and (max-width: 535px) {
-  .lh-category-header__finalscreenshot {
-    grid-template: 1fr 1fr / none
-  }
-  .lh-category-headercol--separator {
-    display: none;
-  }
-}
-
-
 /* 964 fits the min-width of the filmstrip */
 @media screen and (max-width: 964px) {
   .lh-report {
@@ -1718,13 +1644,11 @@
   display: none; /* Don't retain these layers when not needed */
   opacity: 0;
   background: #ffffff;
-  white-space: pre-line; /* Render newlines in the text */
   min-width: 246px;
   max-width: 275px;
   padding: 15px;
   border-radius: 5px;
   text-align: initial;
-  line-height: 1.4;
 }
 /* shrink tooltips to not be cutoff on left edge of narrow viewports
    45vw is chosen to be ~= width of the left column of metrics
@@ -1736,6 +1660,10 @@
   }
 }
 
+.lh-tooltip-boundary:hover {
+  background-color: var(--color-hover);
+}
+
 .lh-tooltip-boundary:hover .lh-tooltip {
   display: block;
   animation: fadeInTooltip 250ms;
@@ -1818,61 +1746,4 @@
   cursor: zoom-in;
 }
 
-
-.lh-meta__items {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  background-color: var(--env-item-background-color);
-  border-radius: 3px;
-  padding: 0;
-  font-size: 13px;
-  padding-bottom: calc(var(--default-padding) / 2);
-}
-
-.lh-meta__item {
-  display: block;
-  list-style-type: none;
-  position: relative;
-  padding: calc(var(--default-padding) / 2) 0 0 calc(var(--default-padding) * 3);
-  cursor: unset; /* disable pointer cursor from report-icon */
-}
-
-.lh-meta__item.lh-tooltip-boundary {
-  text-decoration: dotted underline var(--color-gray-500);
-  cursor: help;
-}
-
-.lh-meta__item.lh-report-icon::before {
-  position: absolute;
-  left: var(--default-padding);
-  width: calc(var(--report-icon-size) * 0.8);
-  height: calc(var(--report-icon-size) * 0.8);
-}
-
-.lh-meta__item.lh-report-icon:hover::before {
-  opacity: 0.7;
-}
-
-.lh-meta__item .lh-tooltip {
-  color: var(--color-gray-800);
-}
-
-.lh-meta__item .lh-tooltip::before {
-  right: auto; /* Set the tooltip arrow to the leftside */
-  left: 6px;
-}
-
-/* Change the grid for narrow viewport. */
-@media screen and (max-width: 640px) {
-  .lh-meta__items {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-@media screen and (max-width: 535px) {
-  .lh-meta__items {
-    display: block;
-  }
-}
-
-
 /*# sourceURL=report-styles.css */

package/report/assets/templates.html

@@ -527,10 +527,47 @@ limitations under the License.
     .lh-footer .lh-generated {
       text-align: center;
     }
+    .lh-env__title {
+      font-size: var(--env-item-font-size-big);
+      line-height: var(--env-item-line-height-big);
+      text-align: center;
+      padding: var(--score-container-padding);
+    }
+    .lh-env {
+      padding: var(--default-padding) 0;
+    }
+    .lh-env__items {
+      padding-left: 16px;
+      margin: 0 0 var(--audits-margin-bottom);
+      padding: 0;
+    }
+    .lh-env__items .lh-env__item:nth-child(2n) {
+      background-color: var(--env-item-background-color);
+    }
+    .lh-env__item {
+      display: flex;
+      padding: var(--env-item-padding);
+      position: relative;
+    }
+    span.lh-env__name {
+      font-weight: bold;
+      min-width: var(--env-name-min-width);
+      flex: 0.5;
+      padding: 0 8px;
+    }
+    span.lh-env__description {
+      text-align: left;
+      flex: 1;
+    }
   </style>
   <footer class="lh-footer">
-    <ul class="lh-meta__items">
-    </ul>
+    <!-- TODO(i18n): localize runtime settings -->
+    <div class="lh-env">
+      <div class="lh-env__title">Runtime Settings</div>
+      <ul class="lh-env__items">
+        <!-- envItem -->
+      </ul>
+    </div>
 
     <div class="lh-generated">
       <!-- TODO(i18n): use ICU replacement to replace version w/o concatenation. -->
@@ -540,6 +577,14 @@ limitations under the License.
   </footer>
 </template>
 
+<!-- Lighthouse footer env item -->
+<template id="envItem">
+  <li class="lh-env__item">
+    <span class="lh-env__name"></span>
+    <span class="lh-env__description"></span>
+  </li>
+</template>
+
 <!-- Lighthouse score gauge -->
 <template id="gauge">
   <a class="lh-gauge__wrapper">