lighthouse 8.6.0-dev.20211109 → 9.0.0-dev.20211117

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-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/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

@@ -21,7 +21,7 @@ const UIStrings = {
   'columnValue': 'Failure reason',
   /**
    * @description [ICU Syntax] Label for an audit identifying the number of installability errors found in the page.
-  */
+   */
   'displayValue': `{itemCount, plural,
     =1 {1 reason}
     other {# reasons}
@@ -50,15 +50,15 @@ 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".`,
 
   /**
-  * @description Error message explaining that the manifest does not supply an icon of the correct format.
-  * @example {192} value0
-  */
+   * @description Error message explaining that the manifest does not supply an icon of the correct format.
+   * @example {192} value0
+   */
   'no-acceptable-icon': `No supplied icon is at least {value0}\xa0px square in PNG, SVG or WebP format, with the purpose attribute unset or set to "any"`,
 
   /** Error message explaining that the icon could not be downloaded. */
@@ -93,6 +93,10 @@ 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.`,
+  /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
+  'pipeline-restarted': 'PWA has been uninstalled and installability checks resetting.',
 };
 /* eslint-enable max-len */
 
@@ -144,6 +148,11 @@ class InstallableManifest extends Audit {
         continue;
       }
 
+      // Filter out errorId 'pipeline-restarted' since it only applies when the PWA is uninstalled.
+      if (err.errorId === 'pipeline-restarted') {
+        continue;
+      }
+
       // @ts-expect-error errorIds from protocol should match up against the strings dict
       const matchingString = UIStrings[err.errorId];
 

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/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/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/lib/page-functions.js

@@ -208,7 +208,8 @@ function computeBenchmarkIndex() {
 
     while (Date.now() - start < 500) {
       let s = '';
-      for (let j = 0; j < 10000; j++) s += 'a'; // eslint-disable-line no-unused-vars
+      for (let j = 0; j < 10000; j++) s += 'a';
+      if (s.length === 1) throw new Error('will never happen, but prevents compiler optimizations');
 
       iterations++;
     }

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.20211109",
+  "version": "9.0.0-dev.20211117",
   "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",
@@ -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",

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. */
@@ -943,7 +943,7 @@
 
 
 .lh-audit--error .lh-audit__display-text {
-  color: var(--color-fail);
+  color: var(--color-fail-secondary);
 }
 
 /* Audit Group */
@@ -1055,7 +1055,7 @@
 }
 
 .lh-audit--fail .lh-audit-explanation {
-  color: var(--color-fail);
+  color: var(--color-fail-secondary);
 }
 
 /* Report */
@@ -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 */