lighthouse 9.5.0-dev.20230109 → 9.5.0-dev.20230111

package/cli/test/smokehouse/config/exclusions.js

@@ -28,4 +28,9 @@ const exclusions = {
   ],
 };
 
+// https://github.com/GoogleChrome/lighthouse/issues/14271
+for (const array of Object.values(exclusions)) {
+  array.push('lantern-idle-callback-short');
+}
+
 export default exclusions;

package/cli/test/smokehouse/core-tests.js

@@ -14,6 +14,8 @@ import errorsExpiredSsl from './test-definitions/errors-expired-ssl.js';
 import errorsIframeExpiredSsl from './test-definitions/errors-iframe-expired-ssl.js';
 import errorsInfiniteLoop from './test-definitions/errors-infinite-loop.js';
 import formsAutoComplete from './test-definitions/forms-autocomplete.js';
+import fpsMax from './test-definitions/fps-max.js';
+import fpsScaled from './test-definitions/fps-scaled.js';
 import issuesMixedContent from './test-definitions/issues-mixed-content.js';
 import lanternFetch from './test-definitions/lantern-fetch.js';
 import lanternIdleCallbackLong from './test-definitions/lantern-idle-callback-long.js';
@@ -51,10 +53,10 @@ import pwaSvgomg from './test-definitions/pwa-svgomg.js';
 import redirectsClientPaintServer from './test-definitions/redirects-client-paint-server.js';
 import redirectsHistoryPushState from './test-definitions/redirects-history-push-state.js';
 import redirectsMultipleServer from './test-definitions/redirects-multiple-server.js';
-import redirectScripts from './test-definitions/redirects-scripts.js';
+import redirectsScripts from './test-definitions/redirects-scripts.js';
+import redirectsSelf from './test-definitions/redirects-self.js';
 import redirectsSingleClient from './test-definitions/redirects-single-client.js';
 import redirectsSingleServer from './test-definitions/redirects-single-server.js';
-import redirectsSelf from './test-definitions/redirects-self.js';
 import screenshot from './test-definitions/screenshot.js';
 import seoFailing from './test-definitions/seo-failing.js';
 import seoPassing from './test-definitions/seo-passing.js';
@@ -62,8 +64,6 @@ import seoStatus403 from './test-definitions/seo-status-403.js';
 import seoTapTargets from './test-definitions/seo-tap-targets.js';
 import sourceMaps from './test-definitions/source-maps.js';
 import timing from './test-definitions/timing.js';
-import fpsScaled from './test-definitions/fps-scaled.js';
-import fpsMax from './test-definitions/fps-max.js';
 
 /** @type {ReadonlyArray<Smokehouse.TestDfn>} */
 const smokeTests = [
@@ -77,19 +77,21 @@ const smokeTests = [
   errorsIframeExpiredSsl,
   errorsInfiniteLoop,
   formsAutoComplete,
+  fpsMax,
+  fpsScaled,
   issuesMixedContent,
+  lanternFetch,
+  lanternIdleCallbackLong,
+  lanternIdleCallbackShort,
   lanternOnline,
   lanternSetTimeout,
-  lanternFetch,
   lanternXhr,
-  lanternIdleCallbackShort,
-  lanternIdleCallbackLong,
   legacyJavascript,
   metricsDebugger,
   metricsDelayedFcp,
   metricsDelayedLcp,
-  metricsTrickyTtiLateFcp,
   metricsTrickyTti,
+  metricsTrickyTtiLateFcp,
   offlineOnlineOnly,
   offlineReady,
   offlineSwBroken,
@@ -107,17 +109,17 @@ const smokeTests = [
   perfTraceElements,
   pubads,
   pwaAirhorner,
-  pwaChromestatus,
-  pwaSvgomg,
   pwaCaltrain,
+  pwaChromestatus,
   pwaRocks,
+  pwaSvgomg,
   redirectsClientPaintServer,
   redirectsHistoryPushState,
   redirectsMultipleServer,
-  redirectScripts,
+  redirectsScripts,
+  redirectsSelf,
   redirectsSingleClient,
   redirectsSingleServer,
-  redirectsSelf,
   screenshot,
   seoFailing,
   seoPassing,
@@ -125,8 +127,6 @@ const smokeTests = [
   seoTapTargets,
   sourceMaps,
   timing,
-  fpsScaled,
-  fpsMax,
 ];
 
 export default smokeTests;

package/core/audits/bf-cache.js

@@ -0,0 +1,120 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {NotRestoredReasonDescription} from '../lib/bf-cache-strings.js';
+
+/* eslint-disable max-len */
+const UIStrings = {
+  /** Title of a diagnostic Lighthouse audit that identifies when the back/forward cache is being used. "back/forward" refers to the back and forward buttons found in modern browsers. This title is shown to users if the back/forward cache was used, or if the there was no attempt to restore the page from the back/forward cache. */
+  title: `Page didn't prevent back/forward cache restoration`,
+  /** Title of a diagnostic Lighthouse audit that identifies when the back/forward cache is being used. "back/forward" refers to the back and forward buttons found in modern browsers. This title is shown to users if the page attempted to restore from the back/forward cache but the back/forward cache was not used. */
+  failureTitle: 'Page prevented back/forward cache restoration',
+  /** Description of a diagnostic Lighthouse audit that identifies when the back/forward cache is being used. "back/forward" refers to the back and forward buttons found in modern browsers. */
+  description: 'Many navigations are performed by going back to a previous page, or forwards again. The back/forward cache (bfcache) can speed up these return navigations. [Learn more about the bfcache](https://web.dev/bfcache/)',
+  /** Failure type for an error that the user should be able to address themselves. Shown in a table column with other failure types. */
+  actionableFailureType: 'Actionable',
+  /** Failure type for an error that the user cannot address in the page's code. Shown in a table column with other failure types. */
+  notActionableFailureType: 'Not actionable',
+  /** Failure type for an error caused by missing browser support. Shown in a table column with other failure types. */
+  supportPendingFailureType: 'Pending browser support',
+  /** Label for a column in a data table; entries in the column will be a string explaining why a failure occurred. */
+  failureReasonColumn: 'Failure reason',
+  /** Label for a column in a data table; entries in the column will be a string representing the type of failure preventing the back/forward cache from being used. */
+  failureTypeColumn: 'Failure type',
+  /**
+   * @description [ICU Syntax] Label for an audit identifying the number of back/forward cache failure reasons found in the page.
+   */
+  displayValue: `{itemCount, plural,
+    =1 {1 failure reason}
+    other {# failure reasons}
+    }`,
+};
+/* eslint-enable max-len */
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/** @type {LH.Crdp.Page.BackForwardCacheNotRestoredReasonType[]} */
+const ORDERED_FAILURE_TYPES = ['PageSupportNeeded', 'SupportPending', 'Circumstantial'];
+
+/** @type {Record<LH.Crdp.Page.BackForwardCacheNotRestoredReasonType, string | LH.IcuMessage>} */
+const FAILURE_TYPE_TO_STRING = {
+  PageSupportNeeded: str_(UIStrings.actionableFailureType),
+  Circumstantial: str_(UIStrings.notActionableFailureType),
+  SupportPending: str_(UIStrings.supportPendingFailureType),
+};
+
+class BFCache extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'bf-cache',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      supportedModes: ['navigation', 'timespan'],
+      requiredArtifacts: ['BFCacheFailures'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts) {
+    const failures = artifacts.BFCacheFailures;
+    if (!failures.length) return {score: 1};
+
+    // TODO: Analyze more than one bf cache failure.
+    const {notRestoredReasonsTree} = failures[0];
+
+    /** @type {LH.Audit.Details.TableItem[]} */
+    const results = [];
+
+    for (const failureType of ORDERED_FAILURE_TYPES) {
+      const reasonsMap = notRestoredReasonsTree[failureType];
+
+      for (const [reason, frameUrls] of Object.entries(reasonsMap)) {
+        results.push({
+          reason: NotRestoredReasonDescription[reason]?.name ?? reason,
+          failureType: FAILURE_TYPE_TO_STRING[failureType],
+          subItems: {
+            type: 'subitems',
+            items: frameUrls.map(frameUrl => ({frameUrl})),
+          },
+          // Include hidden protocol reason code for debugging.
+          protocolReason: reason,
+        });
+      }
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'reason', valueType: 'text', subItemsHeading: {key: 'frameUrl', valueType: 'url'}, label: str_(UIStrings.failureReasonColumn)},
+      {key: 'failureType', valueType: 'text', label: str_(UIStrings.failureTypeColumn)},
+      /* eslint-enable max-len */
+    ];
+
+    const details = Audit.makeTableDetails(headings, results);
+
+    const displayValue = results.length ?
+      str_(UIStrings.displayValue, {itemCount: results.length}) :
+      undefined;
+
+    return {
+      score: results.length ? 0 : 1,
+      displayValue,
+      details,
+    };
+  }
+}
+
+export default BFCache;
+export {UIStrings};

package/core/audits/installable-manifest.js

@@ -16,7 +16,7 @@ const UIStrings = {
   'failureTitle': 'Web app manifest or service worker do not meet the installability requirements',
   /** Description of a Lighthouse audit that tells the user why installability is important for webapps. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
   'description': `Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. [Learn more about manifest installability requirements](https://developer.chrome.com/docs/lighthouse/pwa/installable-manifest/).`,
-  /** Description Table column header for the observed value of the Installability failure reason statistic. */
+  /** Label for a column in a data table; entries in the column will be a string explaining why a failure occurred. */
   'columnValue': 'Failure reason',
   /**
    * @description [ICU Syntax] Label for an audit identifying the number of installability errors found in the page.

package/core/config/default-config.js

@@ -217,8 +217,11 @@ const defaultConfig = {
     {id: artifacts.devtoolsLogs, gatherer: 'devtools-log-compat'},
     {id: artifacts.traces, gatherer: 'trace-compat'},
 
-    // FullPageScreenshot comes at the very end so all other node analysis is captured.
+    // FullPageScreenshot comes at the end so all other node analysis is captured.
     {id: artifacts.FullPageScreenshot, gatherer: 'full-page-screenshot'},
+
+    // BFCacheErrors comes at the very end because it can perform a page navigation.
+    {id: artifacts.BFCacheFailures, gatherer: 'bf-cache-failures'},
   ],
   audits: [
     'is-on-https',
@@ -374,6 +377,7 @@ const defaultConfig = {
     'seo/canonical',
     'seo/manual/structured-data',
     'work-during-interaction',
+    'bf-cache',
   ],
   groups: {
     'metrics': {
@@ -516,6 +520,7 @@ const defaultConfig = {
         {id: 'no-unload-listeners', weight: 0},
         {id: 'uses-responsive-images-snapshot', weight: 0},
         {id: 'work-during-interaction', weight: 0},
+        {id: 'bf-cache', weight: 0},
 
         // Budget audits.
         {id: 'performance-budget', weight: 0, group: 'budgets'},

package/core/gather/driver/execution-context.js

@@ -61,8 +61,8 @@ class ExecutionContext {
     await this._session.sendCommand('Page.enable');
     await this._session.sendCommand('Runtime.enable');
 
-    const resourceTreeResponse = await this._session.sendCommand('Page.getResourceTree');
-    const mainFrameId = resourceTreeResponse.frameTree.frame.id;
+    const frameTreeResponse = await this._session.sendCommand('Page.getFrameTree');
+    const mainFrameId = frameTreeResponse.frameTree.frame.id;
 
     const isolatedWorldResponse = await this._session.sendCommand('Page.createIsolatedWorld', {
       frameId: mainFrameId,

package/core/gather/driver/network-monitor.js

@@ -95,8 +95,8 @@ class NetworkMonitor extends NetworkMonitorEventEmitter {
     const frameNavigations = this._frameNavigations;
     if (!frameNavigations.length) return {};
 
-    const resourceTreeResponse = await this._session.sendCommand('Page.getResourceTree');
-    const mainFrameId = resourceTreeResponse.frameTree.frame.id;
+    const frameTreeResponse = await this._session.sendCommand('Page.getFrameTree');
+    const mainFrameId = frameTreeResponse.frameTree.frame.id;
     const mainFrameNavigations = frameNavigations.filter(frame => frame.id === mainFrameId);
     if (!mainFrameNavigations.length) log.warn('NetworkMonitor', 'No detected navigations');
 

package/core/gather/driver/wait-for-condition.js

@@ -13,7 +13,13 @@ import {ExecutionContext} from './execution-context.js';
 
 /** @typedef {InstanceType<import('./network-monitor.js')['NetworkMonitor']>} NetworkMonitor */
 /** @typedef {import('./network-monitor.js').NetworkMonitorEvent} NetworkMonitorEvent */
-/** @typedef {{promise: Promise<void>, cancel: function(): void}} CancellableWait */
+
+/**
+ * @template [T=void]
+ * @typedef CancellableWait
+ * @prop {Promise<T>} promise
+ * @prop {() => void} cancel
+ */
 
 /**
  * @typedef WaitOptions
@@ -40,7 +46,7 @@ function waitForNothing() {
  * Returns a promise that resolve when a frame has been navigated.
  * Used for detecting that our about:blank reset has been completed.
  * @param {LH.Gatherer.FRProtocolSession} session
- * @return {CancellableWait}
+ * @return {CancellableWait<LH.Crdp.Page.FrameNavigatedEvent>}
  */
 function waitForFrameNavigated(session) {
   /** @type {(() => void)} */
@@ -48,6 +54,7 @@ function waitForFrameNavigated(session) {
     throw new Error('waitForFrameNavigated.cancel() called before it was defined');
   };
 
+  /** @type {Promise<LH.Crdp.Page.FrameNavigatedEvent>} */
   const promise = new Promise((resolve, reject) => {
     session.once('Page.frameNavigated', resolve);
     cancel = () => {

package/core/gather/gatherers/bf-cache-failures.js

@@ -8,6 +8,8 @@ import FRGatherer from '../base-gatherer.js';
 import {waitForFrameNavigated, waitForLoadEvent} from '../driver/wait-for-condition.js';
 import DevtoolsLog from './devtools-log.js';
 
+const FAILURE_EVENT_TIMEOUT = 100;
+
 class BFCacheFailures extends FRGatherer {
   /** @type {LH.Gatherer.GathererMeta<'DevtoolsLog'>} */
   meta = {
@@ -101,16 +103,32 @@ class BFCacheFailures extends FRGatherer {
     const history = await session.sendCommand('Page.getNavigationHistory');
     const entry = history.entries[history.currentIndex];
 
+    // In theory, we should be able to use about:blank here
+    // but that sometimes produces BrowsingInstanceNotSwapped failures.
+    // DevTools uses chrome://terms as it's temporary page so we should stick with that.
+    // https://github.com/GoogleChrome/lighthouse/issues/14665
     await Promise.all([
-      session.sendCommand('Page.navigate', {url: 'about:blank'}),
+      session.sendCommand('Page.navigate', {url: 'chrome://terms'}),
       waitForLoadEvent(session, 0).promise,
     ]);
 
-    await Promise.all([
+    const [, frameNavigatedEvent] = await Promise.all([
       session.sendCommand('Page.navigateToHistoryEntry', {entryId: entry.id}),
       waitForFrameNavigated(session).promise,
     ]);
 
+    // The bfcache failure event is not necessarily emitted by this point.
+    // If we are expecting a bfcache failure event but haven't seen one, we should wait for it.
+    if (frameNavigatedEvent.type !== 'BackForwardCacheRestore' && !bfCacheEvent) {
+      await new Promise(resolve => setTimeout(resolve, FAILURE_EVENT_TIMEOUT));
+
+      // If we still can't get the failure reasons after the timeout we should fail loudly,
+      // otherwise this gatherer will return no failures when there should be failures.
+      if (!bfCacheEvent) {
+        throw new Error('bfcache failed but the failure reasons were not emitted in time');
+      }
+    }
+
     session.off('Page.backForwardCacheNotUsed', onBfCacheNotUsed);
 
     return bfCacheEvent;
@@ -136,7 +154,7 @@ class BFCacheFailures extends FRGatherer {
    */
   async getArtifact(context) {
     const events = this.passivelyCollectBFCacheEvents(context);
-    if (context.gatherMode === 'navigation') {
+    if (context.gatherMode === 'navigation' && !context.settings.usePassiveGathering) {
       const activelyCollectedEvent = await this.activelyCollectBFCacheEvent(context);
       if (activelyCollectedEvent) events.push(activelyCollectedEvent);
     }

package/core/lib/{bfcache-strings.js → bf-cache-strings.js}

@@ -518,6 +518,7 @@ const UIStrings = {
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
 
+/** @type {Record<string, {name: LH.IcuMessage} | undefined>} */
 const NotRestoredReasonDescription = {
   'NotPrimaryMainFrame': {name: str_(UIStrings.notMainFrame)},
   'BackForwardCacheDisabled': {name: str_(UIStrings.backForwardCacheDisabled)},

package/core/user-flow.js

@@ -87,22 +87,22 @@ class UserFlow {
    * @return {LH.UserFlow.StepFlags}
    */
   _getNextNavigationFlags(flags) {
-    const nextFlags = this._getNextFlags(flags) || {};
+    const newStepFlags = this._getNextFlags(flags) || {};
 
-    if (nextFlags.skipAboutBlank === undefined) {
-      nextFlags.skipAboutBlank = true;
+    if (newStepFlags.skipAboutBlank === undefined) {
+      newStepFlags.skipAboutBlank = true;
     }
 
     // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
     const isSubsequentNavigation = this._gatherSteps
       .some(step => step.artifacts.GatherContext.gatherMode === 'navigation');
     if (isSubsequentNavigation) {
-      if (nextFlags.disableStorageReset === undefined) {
-        nextFlags.disableStorageReset = true;
+      if (newStepFlags.disableStorageReset === undefined) {
+        newStepFlags.disableStorageReset = true;
       }
     }
 
-    return nextFlags;
+    return newStepFlags;
   }
 
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20230109",
+  "version": "9.5.0-dev.20230111",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {