lighthouse 8.6.0-dev.20211107 → 9.0.0

package/flow-report/src/app.tsx

@@ -16,21 +16,22 @@ import {Topbar} from './topbar';
 import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
 
+function getAnchorElement(hashState: LH.FlowResult.HashState|null) {
+  if (!hashState || !hashState.anchor) return null;
+  return document.getElementById(hashState.anchor);
+}
+
 const Content: FunctionComponent = () => {
   const hashState = useHashState();
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    if (hashState && hashState.anchor) {
-      const el = document.getElementById(hashState.anchor);
-      if (el) {
-        el.scrollIntoView({behavior: 'smooth'});
-        return;
-      }
+    const el = getAnchorElement(hashState);
+    if (el) {
+      el.scrollIntoView();
+    } else if (ref.current) {
+      ref.current.scrollTop = 0;
     }
-
-    // Scroll to top no anchor is found.
-    if (ref.current) ref.current.scrollTop = 0;
   }, [hashState]);
 
   return (

package/flow-report/src/help-dialog.tsx

@@ -97,7 +97,6 @@ export const HelpDialog: FunctionComponent<{onClose: () => void}> = ({
           availableCategories={[
             strings.categoryPerformance,
             strings.categoryBestPractices,
-            strings.categorySeo,
           ]}
         />
         <HelpDialogColumn

package/lighthouse-cli/run.js

@@ -175,7 +175,7 @@ async function potentiallyKillChrome(launchedChrome) {
   /** @type {NodeJS.Timeout} */
   let timeout;
   const timeoutPromise = new Promise((_, reject) => {
-    timeout = setTimeout(() => reject(new Error('Timed out waiting to kill Chrome')), 5000);
+    timeout = setTimeout(reject, 5000, new Error('Timed out waiting to kill Chrome'));
   });
 
   return Promise.race([

package/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -206,6 +206,8 @@ class UnusedBytes extends Audit {
    */
   static computeWastedMsWithThroughput(wastedBytes, simulator) {
     const bitsPerSecond = simulator.getOptions().throughput;
+    // https://github.com/GoogleChrome/lighthouse/pull/13323#issuecomment-962031709
+    if (bitsPerSecond === 0) return 0;
     const wastedBits = wastedBytes * 8;
     const wastedMs = wastedBits / bitsPerSecond * 1000;
     return wastedMs;

package/lighthouse-core/audits/deprecations.js

@@ -11,6 +11,8 @@
  * that contain deprecated API warnings sent by Chrome.
  */
 
+// TODO: when M97 is sufficiently old, drop support for console messages
+
 const Audit = require('./audit.js');
 const i18n = require('../lib/i18n/i18n.js');
 
@@ -45,7 +47,7 @@ class Deprecations extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'InspectorIssues'],
     };
   }
 
@@ -56,16 +58,36 @@ class Deprecations extends Audit {
   static audit(artifacts) {
     const entries = artifacts.ConsoleMessages;
 
-    const deprecations = entries.filter(log => log.source === 'deprecation')
-    // TODO(M91): Temporary ignore until Chrome M91 became stable version.
-    // M91 doesn't throw deprecation on ::-webkit-details-marker.
-    .filter(log => !log.text.includes('::-webkit-details-marker'))
-    .map(log => {
-      return {
-        value: log.text,
-        source: Audit.makeSourceLocationFromConsoleMessage(log),
-      };
-    });
+    let deprecations;
+
+    if (artifacts.InspectorIssues.deprecations.length) {
+      deprecations = artifacts.InspectorIssues.deprecations
+        .map(deprecation => {
+          return {
+            value: deprecation.message || '',
+            /** @type {LH.Audit.Details.SourceLocationValue} */
+            source: {
+              type: 'source-location',
+              url: deprecation.sourceCodeLocation.url,
+              urlProvider: 'network',
+              line: deprecation.sourceCodeLocation.lineNumber,
+              // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed,
+              // but we use 0-indexed.
+              column: deprecation.sourceCodeLocation.columnNumber - 1,
+            },
+          };
+        });
+    } else {
+      // Backcompat for <M97.
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=1248484
+      deprecations = entries.filter(log => log.source === 'deprecation')
+        .map(log => {
+          return {
+            value: log.text,
+            source: Audit.makeSourceLocationFromConsoleMessage(log),
+          };
+        });
+    }
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

package/lighthouse-core/audits/dobetterweb/uses-http2.js

@@ -61,8 +61,8 @@ class UsesHTTP2Audit extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['URL', 'devtoolsLogs', 'traces'],
+      supportedModes: ['timespan', 'navigation'],
+      requiredArtifacts: ['URL', 'devtoolsLogs', 'traces', 'GatherContext'],
     };
   }
 
@@ -202,24 +202,40 @@ class UsesHTTP2Audit extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const resources = UsesHTTP2Audit.determineNonHttp2Resources(networkRecords);
+
+    let displayValue;
+    if (resources.length > 0) {
+      displayValue = str_(UIStrings.displayValue, {itemCount: resources.length});
+    }
+
+    // TODO: Compute actual savings for timespan mode.
+    if (artifacts.GatherContext.gatherMode === 'timespan') {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+        {key: 'protocol', itemType: 'text', text: str_(UIStrings.columnProtocol)},
+      ];
+
+      const details = Audit.makeTableDetails(headings, resources);
+
+      return {
+        displayValue,
+        score: resources.length ? 0 : 1,
+        details,
+      };
+    }
+
     const settings = context && context.settings || {};
     const simulatorOptions = {
       devtoolsLog,
       settings,
     };
-
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const graph = await PageDependencyGraph.request({trace, devtoolsLog}, context);
     const simulator = await LoadSimulator.request(simulatorOptions, context);
-
-    const resources = UsesHTTP2Audit.determineNonHttp2Resources(networkRecords);
     const wastedMs = UsesHTTP2Audit.computeWasteWithTTIGraph(resources, graph, simulator);
 
-    let displayValue;
-    if (resources.length > 0) {
-      displayValue = str_(UIStrings.displayValue, {itemCount: resources.length});
-    }
-
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},

package/lighthouse-core/audits/installable-manifest.js

@@ -50,9 +50,9 @@ const UIStrings = {
    * for the current page encloses the scope and start URL from the manifest. */
   'no-matching-service-worker': `No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.`,
   /**
-  * @description Error message explaining that the manifest does not contain a suitable icon.
-  * @example {192} value0
-  */
+   * @description Error message explaining that the manifest does not contain a suitable icon.
+   * @example {192} value0
+   */
   'manifest-missing-suitable-icon': `Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least {value0}\xa0px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any".`,
 
   /**
@@ -93,6 +93,8 @@ const UIStrings = {
   'manifest-location-changed': `Manifest URL changed while the manifest was being fetched.`,
   /** Warning message explaining that the page does not work offline. */
   'warn-not-offline-capable': `Page does not work offline. The page will not be regarded as installable after Chrome 93, stable release August 2021.`,
+  /** Error message explaining that Lighthouse failed while detecting a service worker, and directing the user to try again in a new Chrome. */
+  'protocol-timeout': `Lighthouse could not determine if there was a service worker. Please try with a newer version of Chrome.`,
 };
 /* eslint-enable max-len */
 

package/lighthouse-core/config/constants.js

@@ -81,10 +81,9 @@ const screenEmulationMetrics = {
   desktop: DESKTOP_EMULATION_METRICS,
 };
 
-// eslint-disable-next-line max-len
-const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4590.2 Mobile Safari/537.36 Chrome-Lighthouse';
-// eslint-disable-next-line max-len
-const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4590.2 Safari/537.36 Chrome-Lighthouse';
+
+const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Mobile Safari/537.36 Chrome-Lighthouse'; // eslint-disable-line max-len
+const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Safari/537.36 Chrome-Lighthouse'; // eslint-disable-line max-len
 
 const userAgents = {
   mobile: MOTOG4_USERAGENT,

package/lighthouse-core/config/default-config.js

@@ -413,10 +413,10 @@ const defaultConfig = {
       supportedModes: ['navigation', 'timespan', 'snapshot'],
       auditRefs: [
         {id: 'first-contentful-paint', weight: 10, group: 'metrics', acronym: 'FCP', relevantAudits: m2a.fcpRelevantAudits},
-        {id: 'speed-index', weight: 10, group: 'metrics', acronym: 'SI'},
-        {id: 'largest-contentful-paint', weight: 25, group: 'metrics', acronym: 'LCP', relevantAudits: m2a.lcpRelevantAudits},
         {id: 'interactive', weight: 10, group: 'metrics', acronym: 'TTI'},
+        {id: 'speed-index', weight: 10, group: 'metrics', acronym: 'SI'},
         {id: 'total-blocking-time', weight: 30, group: 'metrics', acronym: 'TBT', relevantAudits: m2a.tbtRelevantAudits},
+        {id: 'largest-contentful-paint', weight: 25, group: 'metrics', acronym: 'LCP', relevantAudits: m2a.lcpRelevantAudits},
         {id: 'cumulative-layout-shift', weight: 15, group: 'metrics', acronym: 'CLS', relevantAudits: m2a.clsRelevantAudits},
 
         // These are our "invisible" metrics. Not displayed, but still in the LHR.

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -6,6 +6,7 @@
 'use strict';
 
 const legacyDefaultConfig = require('../../config/default-config.js');
+const {deepClone} = require('../../config/config-helpers.js');
 
 /** @type {LH.Config.AuditJson[]} */
 const frAudits = [
@@ -22,7 +23,8 @@ const frCategoryAuditRefExtensions = {
 /** @return {LH.Config.Json['categories']} */
 function mergeCategories() {
   if (!legacyDefaultConfig.categories) return {};
-  const categories = legacyDefaultConfig.categories;
+  // Don't modify original default config.
+  const categories = deepClone(legacyDefaultConfig.categories);
   for (const key of Object.keys(frCategoryAuditRefExtensions)) {
     if (!categories[key]) continue;
     categories[key].auditRefs.push(...frCategoryAuditRefExtensions[key]);

package/lighthouse-core/fraggle-rock/gather/session.js

@@ -150,10 +150,9 @@ class ProtocolSession {
     const timeoutPromise = new Promise((resolve, reject) => {
       if (timeoutMs === Infinity) return;
 
-      timeout = setTimeout((() => {
-        const err = new LHError(LHError.errors.PROTOCOL_TIMEOUT, {protocolMethod: method});
-        reject(err);
-      }), timeoutMs);
+      timeout = setTimeout(reject, timeoutMs, new LHError(LHError.errors.PROTOCOL_TIMEOUT, {
+        protocolMethod: method,
+      }));
     });
 
     const resultPromise = this._session.send(method, ...params);

package/lighthouse-core/gather/driver.js

@@ -338,13 +338,9 @@ class Driver {
     let asyncTimeout;
     const timeoutPromise = new Promise((resolve, reject) => {
       if (timeout === Infinity) return;
-      asyncTimeout = setTimeout((() => {
-        const err = new LHError(
-          LHError.errors.PROTOCOL_TIMEOUT,
-          {protocolMethod: method}
-        );
-        reject(err);
-      }), timeout);
+      asyncTimeout = setTimeout(reject, timeout, new LHError(LHError.errors.PROTOCOL_TIMEOUT, {
+        protocolMethod: method,
+      }));
     });
 
     return Promise.race([

package/lighthouse-core/gather/fetcher.js

@@ -195,9 +195,7 @@ class Fetcher {
     /** @type {NodeJS.Timeout} */
     let timeoutHandle;
     const timeoutPromise = new Promise((_, reject) => {
-      timeoutHandle = setTimeout(() => {
-        reject(new Error('Timed out fetching resource'));
-      }, options.timeout);
+      timeoutHandle = setTimeout(reject, options.timeout, new Error('Timed out fetching resource'));
     });
 
     const responsePromise = this._loadNetworkResource(url);
@@ -283,17 +281,16 @@ class Fetcher {
     /* c8 ignore stop */
 
     /** @type {NodeJS.Timeout} */
-    let timeoutHandle;
+    let asyncTimeout;
     /** @type {Promise<never>} */
     const timeoutPromise = new Promise((_, reject) => {
-      const errorMessage = 'Timed out fetching resource.';
-      timeoutHandle = setTimeout(() => reject(new Error(errorMessage)), options.timeout);
+      asyncTimeout = setTimeout(reject, options.timeout, new Error('Timed out fetching resource.'));
     });
 
     const racePromise = Promise.race([
       timeoutPromise,
       requestInterceptionPromise,
-    ]).finally(() => clearTimeout(timeoutHandle));
+    ]).finally(() => clearTimeout(asyncTimeout));
 
     // Temporarily disable auto-attaching for this iframe.
     await this.session.sendCommand('Target.setAutoAttach', {

package/lighthouse-core/gather/gather-runner.js

@@ -422,21 +422,44 @@ class GatherRunner {
   static async populateBaseArtifacts(passContext) {
     const status = {msg: 'Populate base artifacts', id: 'lh:gather:populateBaseArtifacts'};
     log.time(status);
+
     const baseArtifacts = passContext.baseArtifacts;
 
     // Copy redirected URL to artifact.
     baseArtifacts.URL.finalUrl = passContext.url;
 
     // Fetch the manifest, if it exists.
-    baseArtifacts.WebAppManifest = await WebAppManifest.getWebAppManifest(
-      passContext.driver.defaultSession, passContext.url);
+    try {
+      baseArtifacts.WebAppManifest = await WebAppManifest.getWebAppManifest(
+        passContext.driver.defaultSession, passContext.url);
+    } catch (err) {
+      log.error('GatherRunner WebAppManifest', err);
+      baseArtifacts.WebAppManifest = null;
+    }
 
-    if (baseArtifacts.WebAppManifest) {
-      baseArtifacts.InstallabilityErrors = await InstallabilityErrors.getInstallabilityErrors(
-        passContext.driver.defaultSession);
+    try {
+      if (baseArtifacts.WebAppManifest) {
+        baseArtifacts.InstallabilityErrors = await InstallabilityErrors.getInstallabilityErrors(
+          passContext.driver.defaultSession);
+      }
+    } catch (err) {
+      log.error('GatherRunner InstallabilityErrors', err);
+      baseArtifacts.InstallabilityErrors = {
+        errors: [
+          {
+            errorId: 'protocol-timeout',
+            errorArguments: [],
+          },
+        ],
+      };
     }
 
-    baseArtifacts.Stacks = await Stacks.collectStacks(passContext.driver.executionContext);
+    try {
+      baseArtifacts.Stacks = await Stacks.collectStacks(passContext.driver.executionContext);
+    } catch (err) {
+      log.error('GatherRunner Stacks', err);
+      baseArtifacts.Stacks = [];
+    }
 
     // Find the NetworkUserAgent actually used in the devtoolsLogs.
     const devtoolsLog = baseArtifacts.devtoolsLogs[passContext.passConfig.passName];

package/lighthouse-core/gather/gatherers/inspector-issues.js

@@ -69,6 +69,8 @@ class InspectorIssues extends FRGatherer {
       heavyAds: [],
       /** @type {Array<LH.Crdp.Audits.ContentSecurityPolicyIssueDetails>} */
       contentSecurityPolicy: [],
+      /** @type {Array<LH.Crdp.Audits.DeprecationIssueDetails>} */
+      deprecations: [],
     };
 
     for (const issue of this._issues) {
@@ -105,6 +107,9 @@ class InspectorIssues extends FRGatherer {
       if (issue.details.contentSecurityPolicyIssueDetails) {
         artifact.contentSecurityPolicy.push(issue.details.contentSecurityPolicyIssueDetails);
       }
+      if (issue.details.deprecationIssueDetails) {
+        artifact.deprecations.push(issue.details.deprecationIssueDetails);
+      }
     }
 
     return artifact;

package/lighthouse-core/lib/emulation.js

@@ -5,6 +5,8 @@
  */
 'use strict';
 
+const {version: lighthouseVersion} = require('../../package.json');
+
 const NO_THROTTLING_METRICS = {
   latency: 0,
   downloadThroughput: 0,
@@ -16,6 +18,46 @@ const NO_CPU_THROTTLE_METRICS = {
   rate: 1,
 };
 
+/**
+ * @param {string} userAgent
+ * @param {LH.Config.Settings['formFactor']} formFactor
+ * @return {LH.Crdp.Emulation.SetUserAgentOverrideRequest['userAgentMetadata']}
+ */
+function parseUseragentIntoMetadata(userAgent, formFactor) {
+  const match = userAgent.match(/Chrome\/([\d.]+)/); // eg 'Chrome/(71.0.3577.0)'
+  const fullVersion = (match && match[1]) || '99.0.1234.0';
+  const [version] = fullVersion.split('.', 1);
+  const brands = [
+    {brand: 'Chromium', version},
+    {brand: 'Google Chrome', version},
+    {brand: 'Lighthouse', version: lighthouseVersion},
+  ];
+
+  const motoG4Details = {
+    platform: 'Android',
+    platformVersion: '6.0',
+    architecture: '',
+    model: 'Moto G4',
+  };
+  const macDesktopDetails = {
+    platform: 'macOS',
+    platformVersion: '10.15.7',
+    architecture: 'x86',
+    model: '',
+  };
+  const mobile = formFactor === 'mobile';
+
+  return {
+    brands,
+    fullVersion,
+    // Since config users can supply a custom useragent, they likely are emulating something
+    // other than Moto G4 and MacOS Desktop.
+    // TODO: Determine how to thoughtfully expose this metadata/client-hints configurability.
+    ...(mobile ? motoG4Details : macDesktopDetails),
+    mobile,
+  };
+}
+
 /**
  * @param {LH.Gatherer.FRProtocolSession} session
  * @param {LH.Config.Settings} settings
@@ -23,8 +65,10 @@ const NO_CPU_THROTTLE_METRICS = {
  */
 async function emulate(session, settings) {
   if (settings.emulatedUserAgent !== false) {
+    const userAgent = /** @type {string} */ (settings.emulatedUserAgent);
     await session.sendCommand('Network.setUserAgentOverride', {
-      userAgent: /** @type {string} */ (settings.emulatedUserAgent),
+      userAgent,
+      userAgentMetadata: parseUseragentIntoMetadata(userAgent, settings.formFactor),
     });
   }
   // See devtools-entry for one usecase for disabling screenEmulation

package/lighthouse-core/util-commonjs.js

@@ -111,6 +111,23 @@ class Util {
     /** @type {Map<string, Array<LH.ReportResult.AuditRef>>} */
     const relevantAuditToMetricsMap = new Map();
 
+    // This backcompat converts old LHRs (<9.0.0) to use the new "hidden" group.
+    // Old LHRs used "no group" to identify audits that should be hidden in performance instead of the "hidden" group.
+    // Newer LHRs use "no group" to identify opportunities and diagnostics whose groups are assigned by details type.
+    const [majorVersion] = clone.lighthouseVersion.split('.').map(Number);
+    const perfCategory = clone.categories['performance'];
+    if (majorVersion < 9 && perfCategory) {
+      if (!clone.categoryGroups) clone.categoryGroups = {};
+      clone.categoryGroups['hidden'] = {title: ''};
+      for (const auditRef of perfCategory.auditRefs) {
+        if (!auditRef.group) {
+          auditRef.group = 'hidden';
+        } else if (['load-opportunities', 'diagnostics'].includes(auditRef.group)) {
+          delete auditRef.group;
+        }
+      }
+    }
+
     for (const category of Object.values(clone.categories)) {
       // Make basic lookup table for relevantAudits
       category.auditRefs.forEach(metricRef => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.6.0-dev.20211107",
+  "version": "9.0.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -12,7 +12,7 @@
     "node": ">=14.15"
   },
   "scripts": {
-    "prepack": "yarn build-report --standalone --flow",
+    "prepack": "yarn build-report --standalone --flow --esm",
     "build-all": "npm-run-posix-or-windows build-all:task",
     "build-all:task": "yarn build-report && yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack",
     "build-all:task:windows": "yarn build-report && yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
@@ -146,7 +146,7 @@
     "cpy": "^7.0.1",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.901419",
+    "devtools-protocol": "0.0.939404",
     "es-main": "^1.0.2",
     "eslint": "^7.23.0",
     "eslint-config-google": "^0.9.1",
@@ -162,7 +162,7 @@
     "jsdom": "^12.2.0",
     "jsonld": "^5.2.0",
     "jsonlint-mod": "^1.7.6",
-    "lighthouse-plugin-publisher-ads": "^1.4.1",
+    "lighthouse-plugin-publisher-ads": "^1.5.4",
     "magic-string": "^0.25.7",
     "mime-types": "^2.1.30",
     "node-fetch": "^2.6.1",
@@ -188,7 +188,7 @@
   },
   "dependencies": {
     "axe-core": "4.2.3",
-    "chrome-launcher": "^0.14.2",
+    "chrome-launcher": "^0.15.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.0",
     "cssstyle": "1.2.1",
@@ -218,6 +218,9 @@
     "yargs": "^16.1.1",
     "yargs-parser": "^20.2.4"
   },
+  "resolutions": {
+    "puppeteer/**/devtools-protocol": "0.0.939404"
+  },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [
     "google",

package/report/assets/styles.css

@@ -482,9 +482,7 @@
   border-radius: 3px;
   color: var(--link-color);
   background-color: var(--report-background-color);
-  padding: var(--default-padding);
-  font-size: var(--report-font-size-secondary);
-  line-height: var(--report-line-height-secondary);
+  margin: 5px;
 }
 
 .lh-button:first-of-type {
@@ -685,9 +683,8 @@
 
 .lh-metrics-container {
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
+  grid-auto-rows: 1fr;
   grid-template-columns: 1fr 1fr;
-  grid-auto-flow: column;
   grid-column-gap: var(--report-line-height);
 }
 
@@ -695,7 +692,7 @@
   border-top: 1px solid var(--report-border-color-secondary);
 }
 
-.lh-metric:nth-child(3n+3) {
+.lh-metric:nth-last-child(-n+2) {
   border-bottom: 1px solid var(--report-border-color-secondary);
 }
 
@@ -743,8 +740,11 @@
     display: block;
   }
 
-  .lh-metric:nth-last-child(-n+1) {
-    border-bottom: 1px solid var(--report-border-color-secondary);
+  .lh-metric {
+    border-bottom: none !important;
+  }
+  .lh-metric:nth-last-child(1) {
+    border-bottom: 1px solid var(--report-border-color-secondary) !important;
   }
 
   /* Change the grid to 3 columns for narrow viewport. */
@@ -1332,6 +1332,7 @@
   margin-top: 10px;
   text-align: center;
   color: var(--report-text-color);
+  word-break: keep-all;
 }
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */