lighthouse 8.0.0-dev.20210709 → 8.0.0

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

@@ -53,13 +53,13 @@ const UIStrings = {
   * @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".`,
+  '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" or "maskable".`,
 
   /**
   * @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"`,
+  'no-acceptable-icon': `No supplied icon is at least {value0}\xa0px square in PNG, SVG or WebP format`,
 
   /** Error message explaining that the icon could not be downloaded. */
   'cannot-download-icon': `Could not download a required icon from the manifest`,
@@ -105,7 +105,7 @@ const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
  *
  * Requirements based on Chrome Devtools' installability requirements.
  * Origin of logging:
- * https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/installable/installable_logging.cc
+ * https://source.chromium.org/chromium/chromium/src/+/master:chrome/browser/installable/installable_logging.cc
  * DevTools InstallabilityError implementation:
  * https://source.chromium.org/search?q=getInstallabilityErrorMessages&ss=chromium%2Fchromium%2Fsrc:third_party%2Fdevtools-frontend%2Fsrc%2Ffront_end%2Fresources%2F
  */
@@ -120,7 +120,6 @@ class InstallableManifest extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['URL', 'WebAppManifest', 'InstallabilityErrors'],
     };
   }

package/lighthouse-core/audits/largest-contentful-paint-element.js

@@ -28,7 +28,6 @@ class LargestContentfulPaintElement extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
-      supportedModes: ['navigation'],
       requiredArtifacts: ['traces', 'TraceElements'],
     };
   }

package/lighthouse-core/audits/long-tasks.js

@@ -62,7 +62,7 @@ class LongTasks extends Audit {
     const taskTimingsByEvent = new Map();
 
     if (settings.throttlingMethod === 'simulate') {
-      const simulatorOptions = {devtoolsLog, settings: context.settings};
+      const simulatorOptions = {trace, devtoolsLog, settings: context.settings};
       const pageGraph = await PageDependencyGraph.request({trace, devtoolsLog}, context);
       const simulator = await LoadSimulator.request(simulatorOptions, context);
       const simulation = await simulator.simulate(pageGraph, {label: 'long-tasks-diagnostic'});

package/lighthouse-core/audits/maskable-icon.js

@@ -42,7 +42,6 @@ class MaskableIcon extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['WebAppManifest', 'InstallabilityErrors'],
     };
   }

package/lighthouse-core/audits/metrics/first-contentful-paint-3g.js

@@ -20,8 +20,7 @@ class FirstContentfulPaint3G extends Audit {
       description: 'First Contentful Paint 3G marks the time at which the first text or image is ' +
         `painted while on a 3G network. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).`,
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -44,12 +43,11 @@ class FirstContentfulPaint3G extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     /** @type {Immutable<LH.Config.Settings>} */
     const settings = {...context.settings, throttlingMethod: 'simulate', throttling: regular3G};
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings};
+    const metricComputationData = {trace, devtoolsLog, settings};
     const metricResult = await ComputedFcp.request(metricComputationData, context);
 
     return {

package/lighthouse-core/audits/metrics/first-contentful-paint.js

@@ -27,8 +27,7 @@ class FirstContentfulPaint extends Audit {
       title: str_(i18n.UIStrings.firstContentfulPaintMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -64,8 +63,7 @@ class FirstContentfulPaint extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
     const metricResult = await ComputedFcp.request(metricComputationData, context);
     const options = context.options[context.settings.formFactor];
 

package/lighthouse-core/audits/metrics/first-meaningful-paint.js

@@ -27,8 +27,7 @@ class FirstMeaningfulPaint extends Audit {
       title: str_(i18n.UIStrings.firstMeaningfulPaintMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -67,8 +66,7 @@ class FirstMeaningfulPaint extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
     const metricResult = await ComputedFmp.request(metricComputationData, context);
     const options = context.options[context.settings.formFactor];
 

package/lighthouse-core/audits/metrics/interactive.js

@@ -33,8 +33,7 @@ class InteractiveMetric extends Audit {
       title: str_(i18n.UIStrings.interactiveMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -70,8 +69,7 @@ class InteractiveMetric extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
     const metricResult = await Interactive.request(metricComputationData, context);
     const timeInMs = metricResult.timing;
     const options = context.options[context.settings.formFactor];

package/lighthouse-core/audits/metrics/largest-contentful-paint.js

@@ -28,8 +28,7 @@ class LargestContentfulPaint extends Audit {
       title: str_(i18n.UIStrings.largestContentfulPaintMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['HostUserAgent', 'traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['HostUserAgent', 'traces', 'devtoolsLogs'],
     };
   }
 
@@ -73,8 +72,7 @@ class LargestContentfulPaint extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
 
     let metricResult;
     try {

package/lighthouse-core/audits/metrics/max-potential-fid.js

@@ -32,8 +32,7 @@ class MaxPotentialFID extends Audit {
       title: str_(i18n.UIStrings.maxPotentialFIDMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -56,8 +55,7 @@ class MaxPotentialFID extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
     const metricResult = await ComputedFid.request(metricComputationData, context);
 
     return {

package/lighthouse-core/audits/metrics/speed-index.js

@@ -27,8 +27,7 @@ class SpeedIndex extends Audit {
       title: str_(i18n.UIStrings.speedIndexMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -66,8 +65,7 @@ class SpeedIndex extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
     const metricResult = await ComputedSi.request(metricComputationData, context);
     const options = context.options[context.settings.formFactor];
 

package/lighthouse-core/audits/metrics/total-blocking-time.js

@@ -27,7 +27,7 @@ class TotalBlockingTime extends Audit {
       title: str_(i18n.UIStrings.totalBlockingTimeMetric),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -87,15 +87,7 @@ class TotalBlockingTime extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings: context.settings};
-    if (
-      gatherContext.gatherMode === 'timespan' &&
-      context.settings.throttlingMethod === 'simulate'
-    ) {
-      return {score: 1, notApplicable: true};
-    }
-
+    const metricComputationData = {trace, devtoolsLog, settings: context.settings};
     const metricResult = await ComputedTBT.request(metricComputationData, context);
 
     const options = context.options[context.settings.formFactor];

package/lighthouse-core/audits/metrics.js

@@ -28,8 +28,7 @@ class Metrics extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: 'Metrics',
       description: 'Collects all available metrics.',
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -39,11 +38,10 @@ class Metrics extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const summary = await ComputedTimingSummary
-      .request({trace, devtoolsLog, gatherContext, settings: context.settings}, context);
+      .request({trace, devtoolsLog, settings: context.settings}, context);
     const metrics = summary.metrics;
     const debugInfo = summary.debugInfo;
 

package/lighthouse-core/audits/performance-budget.js

@@ -39,7 +39,6 @@ class ResourceBudget extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
-      supportedModes: ['navigation'],
       requiredArtifacts: ['devtoolsLogs', 'URL'],
     };
   }

package/lighthouse-core/audits/predictive-perf.js

@@ -33,8 +33,7 @@ class PredictivePerf extends Audit {
         'Predicted performance evaluates how your site will perform under ' +
         'a cellular connection on a mobile device.',
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -44,18 +43,16 @@ class PredictivePerf extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     /** @type {LH.Config.Settings} */
     // @ts-expect-error - TODO(bckenny): allow optional `throttling` settings
     const settings = {}; // Use default settings.
-    const computationData = {trace, devtoolsLog, gatherContext, settings};
-    const fcp = await LanternFcp.request(computationData, context);
-    const fmp = await LanternFmp.request(computationData, context);
-    const tti = await LanternInteractive.request(computationData, context);
-    const si = await LanternSpeedIndex.request(computationData, context);
-    const lcp = await LanternLcp.request(computationData, context);
+    const fcp = await LanternFcp.request({trace, devtoolsLog, settings}, context);
+    const fmp = await LanternFmp.request({trace, devtoolsLog, settings}, context);
+    const tti = await LanternInteractive.request({trace, devtoolsLog, settings}, context);
+    const si = await LanternSpeedIndex.request({trace, devtoolsLog, settings}, context);
+    const lcp = await LanternLcp.request({trace, devtoolsLog, settings}, context);
 
     const values = {
       roughEstimateOfFCP: fcp.timing,

package/lighthouse-core/audits/preload-fonts.js

@@ -63,7 +63,7 @@ class PreloadFontsAudit extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static async audit_(artifacts, context) {
+  static async audit(artifacts, context) {
     const devtoolsLog = artifacts.devtoolsLogs[this.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
 
@@ -92,16 +92,6 @@ class PreloadFontsAudit extends Audit {
       notApplicable: optionalFontURLs.size === 0,
     };
   }
-
-  /**
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit() {
-    // Preload advice is dangerous until https://bugs.chromium.org/p/chromium/issues/detail?id=788757
-    // has been fixed and validated. All preload audits are on hold until then.
-    // See https://github.com/GoogleChrome/lighthouse/issues/11960 for more discussion.
-    return {score: 1, notApplicable: true};
-  }
 }
 
 module.exports = PreloadFontsAudit;

package/lighthouse-core/audits/preload-lcp-image.js

@@ -32,9 +32,7 @@ class PreloadLCPImageAudit extends Audit {
       id: 'preload-lcp-image',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext', 'URL', 'TraceElements',
-        'ImageElements'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'TraceElements', 'ImageElements'],
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
     };
   }
@@ -196,19 +194,18 @@ class PreloadLCPImageAudit extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static async audit_(artifacts, context) {
-    const gatherContext = artifacts.GatherContext;
+  static async audit(artifacts, context) {
     const trace = artifacts.traces[PreloadLCPImageAudit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[PreloadLCPImageAudit.DEFAULT_PASS];
     const URL = artifacts.URL;
-    const metricData = {trace, devtoolsLog, gatherContext, settings: context.settings};
+    const simulatorOptions = {trace, devtoolsLog, settings: context.settings};
     const lcpElement = artifacts.TraceElements
       .find(element => element.traceEventType === 'largest-contentful-paint');
 
     const [mainResource, lanternLCP, simulator] = await Promise.all([
       MainResource.request({devtoolsLog, URL}, context),
-      LanternLCP.request(metricData, context),
-      LoadSimulator.request({devtoolsLog, settings: context.settings}, context),
+      LanternLCP.request(simulatorOptions, context),
+      LoadSimulator.request(simulatorOptions, context),
     ]);
 
     const graph = lanternLCP.pessimisticGraph;
@@ -234,16 +231,6 @@ class PreloadLCPImageAudit extends Audit {
       details,
     };
   }
-
-  /**
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit() {
-    // Preload advice is dangerous until https://bugs.chromium.org/p/chromium/issues/detail?id=788757
-    // has been fixed and validated. All preload audits are on hold until then.
-    // See https://github.com/GoogleChrome/lighthouse/issues/11960 for more discussion.
-    return {score: 1, notApplicable: true, details: Audit.makeOpportunityDetails([], [], 0)};
-  }
 }
 
 module.exports = PreloadLCPImageAudit;

package/lighthouse-core/audits/redirects.js

@@ -8,7 +8,7 @@
 const Audit = require('./audit.js');
 const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit.js');
 const i18n = require('../lib/i18n/i18n.js');
-const ProcessedTrace = require('../computed/processed-trace.js');
+const TraceOfTab = require('../computed/trace-of-tab.js');
 const NetworkRecords = require('../computed/network-records.js');
 const MainResource = require('../computed/main-resource.js');
 const LanternInteractive = require('../computed/metrics/lantern-interactive.js');
@@ -32,8 +32,7 @@ class Redirects extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['URL', 'GatherContext', 'devtoolsLogs', 'traces'],
+      requiredArtifacts: ['URL', 'devtoolsLogs', 'traces'],
     };
   }
 
@@ -50,15 +49,15 @@ class Redirects extends Audit {
    *
    * @param {LH.Artifacts.NetworkRequest} mainResource
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {LH.Artifacts.TraceOfTab} traceOfTab
    * @return {Array<LH.Artifacts.NetworkRequest>}
    */
-  static getDocumentRequestChain(mainResource, networkRecords, processedTrace) {
+  static getDocumentRequestChain(mainResource, networkRecords, traceOfTab) {
     /** @type {Array<LH.Artifacts.NetworkRequest>} */
     const documentRequests = [];
 
     // Find all the document requests by examining navigation events and their redirects
-    for (const event of processedTrace.processEvents) {
+    for (const event of traceOfTab.processEvents) {
       if (event.name !== 'navigationStart') continue;
 
       const data = event.args.data || {};
@@ -87,13 +86,12 @@ class Redirects extends Audit {
     const settings = context.settings;
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const gatherContext = artifacts.GatherContext;
 
-    const processedTrace = await ProcessedTrace.request(trace, context);
+    const traceOfTab = await TraceOfTab.request(trace, context);
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const mainResource = await MainResource.request({URL: artifacts.URL, devtoolsLog}, context);
 
-    const metricComputationData = {trace, devtoolsLog, gatherContext, settings};
+    const metricComputationData = {trace, devtoolsLog, traceOfTab, networkRecords, settings};
     const metricResult = await LanternInteractive.request(metricComputationData, context);
 
     /** @type {Map<string, LH.Gatherer.Simulation.NodeTiming>} */
@@ -105,7 +103,7 @@ class Redirects extends Audit {
     }
 
     const documentRequests = Redirects.getDocumentRequestChain(
-      mainResource, networkRecords, processedTrace);
+      mainResource, networkRecords, traceOfTab);
 
     let totalWastedMs = 0;
     const tableRows = [];

package/lighthouse-core/audits/screenshot-thumbnails.js

@@ -9,6 +9,7 @@ const Audit = require('./audit.js');
 const LHError = require('../lib/lh-error.js');
 const jpeg = require('jpeg-js');
 const Speedline = require('../computed/speedline.js');
+const Interactive = require('../computed/metrics/interactive.js');
 
 const NUMBER_OF_THUMBNAILS = 10;
 const THUMBNAIL_WIDTH = 120;
@@ -25,7 +26,7 @@ class ScreenshotThumbnails extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: 'Screenshot Thumbnails',
       description: 'This is what the load of your site looked like.',
-      requiredArtifacts: ['traces', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }
 
@@ -70,7 +71,7 @@ class ScreenshotThumbnails extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static async _audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     /** @type {Map<SpeedlineFrame, string>} */
     const cachedThumbnails = new Map();
@@ -78,7 +79,16 @@ class ScreenshotThumbnails extends Audit {
     const speedline = await Speedline.request(trace, context);
 
     // Make the minimum time range 3s so sites that load super quickly don't get a single screenshot
-    const minimumTimelineDuration = context.options.minimumTimelineDuration || 3000;
+    let minimumTimelineDuration = context.options.minimumTimelineDuration || 3000;
+    // Ensure thumbnails cover the full range of the trace (TTI can be later than visually complete)
+    if (context.settings.throttlingMethod !== 'simulate') {
+      const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+      const metricComputationData = {trace, devtoolsLog, settings: context.settings};
+      const tti = Interactive.request(metricComputationData, context);
+      try {
+        minimumTimelineDuration = Math.max((await tti).timing, minimumTimelineDuration);
+      } catch (_) {}
+    }
 
     const thumbnails = [];
     const analyzedFrames = speedline.frames.filter(frame => !frame.isProgressInterpolated());
@@ -133,31 +143,6 @@ class ScreenshotThumbnails extends Audit {
       },
     };
   }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts, context) {
-    try {
-      return await this._audit(artifacts, context);
-    } catch (err) {
-      const noFramesErrors = new Set([
-        LHError.errors.NO_SCREENSHOTS.code,
-        LHError.errors.SPEEDINDEX_OF_ZERO.code,
-        LHError.errors.NO_SPEEDLINE_FRAMES.code,
-        LHError.errors.INVALID_SPEEDLINE.code,
-      ]);
-
-      // If a timespan didn't happen to contain frames, that's fine. Just mark not applicable.
-      if (noFramesErrors.has(err.code) && artifacts.GatherContext.gatherMode === 'timespan') {
-        return {notApplicable: true, score: 1};
-      }
-
-      throw err;
-    }
-  }
 }
 
 module.exports = ScreenshotThumbnails;

package/lighthouse-core/audits/seo/canonical.js

@@ -32,7 +32,7 @@ const UIStrings = {
    * @description Explanatory message stating that there was a failure in an audit caused by a URL being relative instead of absolute.
    * @example {https://example.com/} url
    * */
-  explanationRelative: 'Is not an absolute URL ({url})',
+  explanationRelative: 'Relative URL ({url})',
   /**
    * @description Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different hreflang than the current context.'hreflang' is an HTML attribute and should not be translated.
    * @example {https://example.com/} url
@@ -68,7 +68,6 @@ class Canonical extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['LinkElements', 'URL', 'devtoolsLogs'],
     };
   }

package/lighthouse-core/audits/seo/font-size.js

@@ -40,7 +40,7 @@ const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * @param {Array<FailingNodeData>} fontSizeArtifact
- * @return {Array<FailingNodeData>}
+ * @returns {Array<FailingNodeData>}
  */
 function getUniqueFailingRules(fontSizeArtifact) {
   /** @type {Map<string, FailingNodeData>} */
@@ -69,7 +69,7 @@ function getUniqueFailingRules(fontSizeArtifact) {
 
 /**
  * @param {Array<string|undefined>=} attributes
- * @return {Map<string, string>}
+ * @returns {Map<string, string>}
  */
 function getAttributeMap(attributes = []) {
   const map = new Map();
@@ -92,7 +92,7 @@ function getAttributeMap(attributes = []) {
 /**
  * TODO: return unique selector, like axe-core does, instead of just id/class/name of a single node
  * @param {FailingNodeData['parentNode']} parentNode
- * @return {string}
+ * @returns {string}
  */
 function getSelector(parentNode) {
   const attributeMap = getAttributeMap(parentNode.attributes);
@@ -130,7 +130,7 @@ function nodeToTableNode(parentNode) {
  * @param {string} baseURL
  * @param {FailingNodeData['cssRule']} styleDeclaration
  * @param {FailingNodeData['parentNode']} parentNode
- * @return {{source: LH.Audit.Details.UrlValue | LH.Audit.Details.SourceLocationValue | LH.Audit.Details.CodeValue, selector: string | LH.Audit.Details.NodeValue}}
+ * @returns {{source: LH.Audit.Details.UrlValue | LH.Audit.Details.SourceLocationValue | LH.Audit.Details.CodeValue, selector: string | LH.Audit.Details.NodeValue}}
  */
 function findStyleRuleSource(baseURL, styleDeclaration, parentNode) {
   if (!styleDeclaration ||

package/lighthouse-core/audits/seo/hreflang.js

@@ -49,7 +49,7 @@ function importValidLangs() {
 
 /**
  * @param {string} href
- * @return {boolean}
+ * @returns {boolean}
  */
 function isFullyQualified(href) {
   return href.startsWith('http:') || href.startsWith('https:');
@@ -57,7 +57,7 @@ function isFullyQualified(href) {
 
 /**
  * @param {string} hreflang
- * @return {boolean}
+ * @returns {boolean}
  */
 function isExpectedLanguageCode(hreflang) {
   if (hreflang.toLowerCase() === NO_LANGUAGE) {
@@ -79,7 +79,6 @@ class Hreflang extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['LinkElements', 'URL'],
     };
   }