lighthouse 8.0.0-dev.20210709 → 8.0.0

package/lighthouse-core/audits/byte-efficiency/duplicated-javascript.js

@@ -48,8 +48,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['devtoolsLogs', 'traces', 'SourceMaps', 'ScriptElements',
-        'GatherContext', 'URL'],
+      requiredArtifacts: ['devtoolsLogs', 'traces', 'SourceMaps', 'ScriptElements', 'URL'],
     };
   }
 
@@ -130,7 +129,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
       context.options && context.options.ignoreThresholdInBytes || IGNORE_THRESHOLD_IN_BYTES;
     const duplication =
       await DuplicatedJavascript._getDuplicationGroupedByNodeModules(artifacts, context);
-    const mainDocumentRecord = NetworkAnalyzer.findOptionalMainDocument(networkRecords);
+    const mainDocumentRecord = await NetworkAnalyzer.findMainDocument(networkRecords);
 
     /** @type {Map<string, number>} */
     const transferRatioByUrl = new Map();

package/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

@@ -37,7 +37,7 @@ class EfficientAnimatedContent extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['devtoolsLogs', 'traces', 'GatherContext'],
+      requiredArtifacts: ['devtoolsLogs', 'traces'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -109,8 +109,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       description: str_(UIStrings.description),
       title: str_(UIStrings.title),
-      requiredArtifacts: ['devtoolsLogs', 'traces', 'ScriptElements', 'SourceMaps',
-        'GatherContext', 'URL'],
+      requiredArtifacts: ['devtoolsLogs', 'traces', 'ScriptElements', 'SourceMaps', 'URL'],
     };
   }
 
@@ -377,7 +376,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     let transferRatio = transferRatioByUrl.get(url);
     if (transferRatio !== undefined) return transferRatio;
 
-    const mainDocumentRecord = NetworkAnalyzer.findOptionalMainDocument(networkRecords);
+    const mainDocumentRecord = await NetworkAnalyzer.findMainDocument(networkRecords);
     const networkRecord = url === artifacts.URL.finalUrl ?
       mainDocumentRecord :
       networkRecords.find(n => n.url === url);

package/lighthouse-core/audits/byte-efficiency/modern-image-formats.js

@@ -16,7 +16,7 @@ const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to serve images in newer and more efficient image formats in order to enhance the performance of a page. A non-modern image format was designed 20+ years ago. This is displayed in a list of audit titles that Lighthouse generates. */
   title: 'Serve images in next-gen formats',
   /** Description of a Lighthouse audit that tells the user *why* they should use newer and more efficient image formats. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
-  description: 'Image formats like WebP and AVIF often provide better ' +
+  description: 'Image formats like JPEG 2000, JPEG XR, and WebP often provide better ' +
     'compression than PNG or JPEG, which means faster downloads and less data consumption. ' +
     '[Learn more](https://web.dev/uses-webp-images/).',
 };
@@ -35,11 +35,20 @@ class ModernImageFormats extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['OptimizedImages', 'devtoolsLogs', 'traces', 'URL', 'GatherContext',
-        'ImageElements'],
+      requiredArtifacts: ['OptimizedImages', 'devtoolsLogs', 'traces', 'URL', 'ImageElements'],
     };
   }
 
+  /**
+   * @param {{originalSize: number, webpSize: number}} image
+   * @return {{bytes: number, percent: number}}
+   */
+  static computeSavings(image) {
+    const bytes = image.originalSize - image.webpSize;
+    const percent = 100 * bytes / image.originalSize;
+    return {bytes, percent};
+  }
+
   /**
    * @param {{naturalWidth: number, naturalHeight: number}} imageElement
    * @return {number}
@@ -55,38 +64,6 @@ class ModernImageFormats extends ByteEfficiencyAudit {
     return Math.round(totalPixels * expectedBytesPerPixel);
   }
 
-  /**
-   * @param {{naturalWidth: number, naturalHeight: number}} imageElement
-   * @return {number}
-   */
-  static estimateAvifSizeFromDimensions(imageElement) {
-    const totalPixels = imageElement.naturalWidth * imageElement.naturalHeight;
-    // See above for the rationale behind our 2 byte-per-pixel baseline and WebP ratio of 10:1.
-    // AVIF usually gives ~20% additional savings on top of that, so we will use 12:1.
-    // This is quite pessimistic as Netflix study shows a photographic compression ratio of ~40:1
-    // (0.4 *bits* per pixel at SSIM 0.97).
-    // https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
-    const expectedBytesPerPixel = 2 * 1 / 12;
-    return Math.round(totalPixels * expectedBytesPerPixel);
-  }
-
-  /**
-   * @param {{jpegSize: number | undefined, webpSize: number | undefined}} otherFormatSizes
-   * @return {number|undefined}
-   */
-  static estimateAvifSizeFromWebPAndJpegEstimates(otherFormatSizes) {
-    if (!otherFormatSizes.jpegSize || !otherFormatSizes.webpSize) return undefined;
-
-    // AVIF saves at least ~50% on JPEG, ~20% on WebP at low quality.
-    // http://downloads.aomedia.org/assets/pdf/symposium-2019/slides/CyrilConcolato_Netflix-AVIF-AOM-Research-Symposium-2019.pdf
-    // https://jakearchibald.com/2020/avif-has-landed/
-    // https://www.finally.agency/blog/what-is-avif-image-format
-    // See https://github.com/GoogleChrome/lighthouse/issues/12295#issue-840261460 for more.
-    const estimateFromJpeg = otherFormatSizes.jpegSize * 5 / 10;
-    const estimateFromWebp = otherFormatSizes.webpSize * 8 / 10;
-    return estimateFromJpeg / 2 + estimateFromWebp / 2;
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @return {ByteEfficiencyAudit.ByteEfficiencyProduct}
@@ -108,15 +85,7 @@ class ModernImageFormats extends ByteEfficiencyAudit {
         continue;
       }
 
-      // Skip if the image was already using a modern format.
-      if (image.mimeType === 'image/webp' || image.mimeType === 'image/avif') continue;
-
-      const jpegSize = image.jpegSize;
       let webpSize = image.webpSize;
-      let avifSize = ModernImageFormats.estimateAvifSizeFromWebPAndJpegEstimates({
-        jpegSize,
-        webpSize,
-      });
       let fromProtocol = true;
 
       if (typeof webpSize === 'undefined') {
@@ -137,30 +106,21 @@ class ModernImageFormats extends ByteEfficiencyAudit {
           naturalHeight,
           naturalWidth,
         });
-        avifSize = ModernImageFormats.estimateAvifSizeFromDimensions({
-          naturalHeight,
-          naturalWidth,
-        });
         fromProtocol = false;
       }
 
-      if (webpSize === undefined || avifSize === undefined) continue;
-
-      // Visible wasted bytes uses AVIF, but we still include the WebP savings in the LHR.
-      const wastedWebpBytes = image.originalSize - webpSize;
-      const wastedBytes = image.originalSize - avifSize;
-      if (wastedBytes < IGNORE_THRESHOLD_IN_BYTES) continue;
+      if (image.originalSize < webpSize + IGNORE_THRESHOLD_IN_BYTES) continue;
 
       const url = URL.elideDataURI(image.url);
       const isCrossOrigin = !URL.originsMatch(pageURL, image.url);
+      const webpSavings = ModernImageFormats.computeSavings({...image, webpSize: webpSize});
 
       items.push({
         url,
         fromProtocol,
         isCrossOrigin,
         totalBytes: image.originalSize,
-        wastedBytes,
-        wastedWebpBytes,
+        wastedBytes: webpSavings.bytes,
       });
     }
 

package/lighthouse-core/audits/byte-efficiency/offscreen-images.js

@@ -14,7 +14,7 @@ const Sentry = require('../../lib/sentry.js');
 const URL = require('../../lib/url-shim.js');
 const i18n = require('../../lib/i18n/i18n.js');
 const Interactive = require('../../computed/metrics/interactive.js');
-const ProcessedTrace = require('../../computed/processed-trace.js');
+const TraceOfTab = require('../../computed/trace-of-tab.js');
 
 const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -48,9 +48,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext', 'devtoolsLogs',
-        'traces'],
+      requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'devtoolsLogs', 'traces'],
     };
   }
 
@@ -183,7 +181,6 @@ class OffscreenImages extends ByteEfficiencyAudit {
   static async audit_(artifacts, networkRecords, context) {
     const images = artifacts.ImageElements;
     const viewportDimensions = artifacts.ViewportDimensions;
-    const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[ByteEfficiencyAudit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS];
 
@@ -216,8 +213,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
     const unfilteredResults = Array.from(resultsMap.values());
     // get the interactive time or fallback to getting the end of trace time
     try {
-      const metricComputationData = {trace, devtoolsLog, gatherContext, settings};
-      const interactive = await Interactive.request(metricComputationData, context);
+      const interactive = await Interactive.request({trace, devtoolsLog, settings}, context);
 
       // use interactive to generate items
       const lanternInteractive = /** @type {LH.Artifacts.LanternMetric} */ (interactive);
@@ -233,7 +229,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       }
       // use end of trace as a substitute for finding interactive time
       items = OffscreenImages.filterObservedResults(unfilteredResults,
-        await ProcessedTrace.request(trace, context).then(tot => tot.timestamps.traceEnd));
+        await TraceOfTab.request(trace, context).then(tot => tot.timestamps.traceEnd));
     }
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */

package/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js

@@ -15,8 +15,7 @@ const BaseNode = require('../../lib/dependency-graph/base-node.js');
 const ByteEfficiencyAudit = require('./byte-efficiency-audit.js');
 const UnusedCSS = require('../../computed/unused-css.js');
 const NetworkRequest = require('../../lib/network-request.js');
-const ProcessedTrace = require('../../computed/processed-trace.js');
-const ProcessedNavigation = require('../../computed/processed-navigation.js');
+const TraceOfTab = require('../../computed/trace-of-tab.js');
 const LoadSimulator = require('../../computed/load-simulator.js');
 const FirstContentfulPaint = require('../../computed/metrics/first-contentful-paint.js');
 
@@ -113,13 +112,12 @@ class RenderBlockingResources extends Audit {
     return {
       id: 'render-blocking-resources',
       title: str_(UIStrings.title),
-      supportedModes: ['navigation'],
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
       description: str_(UIStrings.description),
       // TODO: look into adding an `optionalArtifacts` property that captures the non-required nature
       // of CSSUsage
       requiredArtifacts: ['URL', 'TagsBlockingFirstPaint', 'traces', 'devtoolsLogs', 'CSSUsage',
-        'GatherContext', 'Stacks'],
+        'Stacks'],
     };
   }
 
@@ -129,28 +127,23 @@ class RenderBlockingResources extends Audit {
    * @return {Promise<{wastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
    */
   static async computeResults(artifacts, context) {
-    const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const simulatorData = {devtoolsLog, settings: context.settings};
-    const processedTrace = await ProcessedTrace.request(trace, context);
-    const processedNavigation = await ProcessedNavigation.request(processedTrace, context);
+    const traceOfTab = await TraceOfTab.request(trace, context);
     const simulator = await LoadSimulator.request(simulatorData, context);
     const wastedCssBytes = await RenderBlockingResources.computeWastedCSSBytes(artifacts, context);
 
-    /** @type {Immutable<LH.Config.Settings>} */
-    const metricSettings = {
-      ...context.settings,
-      throttlingMethod: 'simulate',
-    };
+    const metricSettings = {throttlingMethod: 'simulate'};
 
-    const metricComputationData = {trace, devtoolsLog, gatherContext, simulator,
-      settings: metricSettings};
+    /** @type {LH.Artifacts.MetricComputationData} */
+    // @ts-expect-error - TODO(bckenny): allow optional `throttling` settings
+    const metricComputationData = {trace, devtoolsLog, simulator, settings: metricSettings};
 
     // Cast to just `LanternMetric` since we explicitly set `throttlingMethod: 'simulate'`.
     const fcpSimulation = /** @type {LH.Artifacts.LanternMetric} */
       (await FirstContentfulPaint.request(metricComputationData, context));
-    const fcpTsInMs = processedNavigation.timestamps.firstContentfulPaint / 1000;
+    const fcpTsInMs = traceOfTab.timestamps.firstContentfulPaint / 1000;
 
     const nodesByUrl = getNodesAndTimingByUrl(fcpSimulation.optimisticEstimate.nodeTimings);
 

package/lighthouse-core/audits/byte-efficiency/total-byte-weight.js

@@ -5,9 +5,8 @@
  */
 'use strict';
 
-const Audit = require('../audit.js');
+const ByteEfficiencyAudit = require('./byte-efficiency-audit.js');
 const i18n = require('../../lib/i18n/i18n.js');
-const NetworkRequest = require('../../lib/network-request.js');
 const NetworkRecords = require('../../computed/network-records.js');
 
 const UIStrings = {
@@ -26,7 +25,7 @@ const UIStrings = {
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
-class TotalByteWeight extends Audit {
+class TotalByteWeight extends ByteEfficiencyAudit {
   /**
    * @return {LH.Audit.Meta}
    */
@@ -36,7 +35,7 @@ class TotalByteWeight extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       requiredArtifacts: ['devtoolsLogs'],
     };
   }
@@ -60,16 +59,16 @@ class TotalByteWeight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS];
     const records = await NetworkRecords.request(devtoolsLog, context);
 
     let totalBytes = 0;
     /** @type {Array<{url: string, totalBytes: number}>} */
     let results = [];
     records.forEach(record => {
-      // Exclude non-network URIs since their size is reflected in other resources.
-      // Exclude records without transfer size information (or 0 bytes which won't matter anyway).
-      if (NetworkRequest.isNonNetworkRequest(record) || !record.transferSize) return;
+      // exclude data URIs since their size is reflected in other resources
+      // exclude unfinished requests since they won't have transfer size information
+      if (record.parsedURL.scheme === 'data' || !record.finished) return;
 
       const result = {
         url: record.url,
@@ -84,7 +83,7 @@ class TotalByteWeight extends Audit {
         itemA.url.localeCompare(itemB.url);
     }).slice(0, 10);
 
-    const score = Audit.computeLogNormalScore(
+    const score = ByteEfficiencyAudit.computeLogNormalScore(
       {p10: context.options.p10, median: context.options.median},
       totalBytes
     );
@@ -95,7 +94,7 @@ class TotalByteWeight extends Audit {
       {key: 'totalBytes', itemType: 'bytes', text: str_(i18n.UIStrings.columnTransferSize)},
     ];
 
-    const tableDetails = Audit.makeTableDetails(headings, results);
+    const tableDetails = ByteEfficiencyAudit.makeTableDetails(headings, results);
 
     return {
       score,

package/lighthouse-core/audits/byte-efficiency/unminified-css.js

@@ -36,7 +36,7 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['CSSUsage', 'devtoolsLogs', 'traces', 'URL', 'GatherContext'],
+      requiredArtifacts: ['CSSUsage', 'devtoolsLogs', 'traces', 'URL'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/unminified-javascript.js

@@ -42,7 +42,7 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['ScriptElements', 'devtoolsLogs', 'traces', 'GatherContext'],
+      requiredArtifacts: ['ScriptElements', 'devtoolsLogs', 'traces'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/unused-css-rules.js

@@ -34,7 +34,7 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['CSSUsage', 'URL', 'devtoolsLogs', 'traces', 'GatherContext'],
+      requiredArtifacts: ['CSSUsage', 'URL', 'devtoolsLogs', 'traces'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/unused-javascript.js

@@ -67,8 +67,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['JsUsage', 'ScriptElements', 'SourceMaps', 'GatherContext',
-        'devtoolsLogs', 'traces'],
+      requiredArtifacts: ['JsUsage', 'ScriptElements', 'SourceMaps', 'devtoolsLogs', 'traces'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js

@@ -45,7 +45,7 @@ class CacheHeaders extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['devtoolsLogs'],
+      requiredArtifacts: ['devtoolsLogs', 'traces'],
     };
   }
 
@@ -167,7 +167,7 @@ class CacheHeaders extends Audit {
    * Returns true if headers suggest a record should not be cached for a long time.
    * @param {Map<string, string>} headers
    * @param {ReturnType<typeof parseCacheControl>} cacheControl
-   * @return {boolean}
+   * @returns {boolean}
    */
   static shouldSkipRecord(headers, cacheControl) {
     // The HTTP/1.0 Pragma header can disable caching if cache-control is not set, see https://tools.ietf.org/html/rfc7234#section-5.4

package/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js

@@ -35,8 +35,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['OptimizedImages', 'ImageElements', 'GatherContext', 'devtoolsLogs',
-        'traces', 'URL'],
+      requiredArtifacts: ['OptimizedImages', 'ImageElements', 'devtoolsLogs', 'traces', 'URL'],
     };
   }
 

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -14,7 +14,6 @@
 'use strict';
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit.js');
-const ImageRecords = require('../../computed/image-records.js');
 const URL = require('../../lib/url-shim.js');
 const i18n = require('../../lib/i18n/i18n.js');
 
@@ -42,41 +41,7 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext',
-        'devtoolsLogs', 'traces'],
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts.ImageElement & {naturalWidth: number, naturalHeight: number}} image
-   * @param {LH.Artifacts.ViewportDimensions} ViewportDimensions
-   * @return {{width: number, height: number}};
-   */
-  static getDisplayedDimensions(image, ViewportDimensions) {
-    if (image.displayedWidth && image.displayedHeight) {
-      return {
-        width: image.displayedWidth * ViewportDimensions.devicePixelRatio,
-        height: image.displayedHeight * ViewportDimensions.devicePixelRatio,
-      };
-    }
-
-    // If the image has 0 dimensions, it's probably hidden/offscreen, so we'll be as forgiving as possible
-    // and assume it's the size of two viewports. See https://github.com/GoogleChrome/lighthouse/issues/7236
-    const viewportWidth = ViewportDimensions.innerWidth;
-    const viewportHeight = ViewportDimensions.innerHeight * 2;
-    const imageAspectRatio = image.naturalWidth / image.naturalHeight;
-    const viewportAspectRatio = viewportWidth / viewportHeight;
-    let usedViewportWidth = viewportWidth;
-    let usedViewportHeight = viewportHeight;
-    if (imageAspectRatio > viewportAspectRatio) {
-      usedViewportHeight = viewportWidth / imageAspectRatio;
-    } else {
-      usedViewportWidth = viewportHeight * imageAspectRatio;
-    }
-
-    return {
-      width: usedViewportWidth * ViewportDimensions.devicePixelRatio,
-      height: usedViewportHeight * ViewportDimensions.devicePixelRatio,
+      requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'devtoolsLogs', 'traces'],
     };
   }
 
@@ -93,8 +58,26 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       return null;
     }
 
-    const displayed = this.getDisplayedDimensions(image, ViewportDimensions);
-    const usedPixels = displayed.width * displayed.height;
+    let usedPixels = image.displayedWidth * image.displayedHeight *
+      Math.pow(ViewportDimensions.devicePixelRatio, 2);
+    // If the image has 0 dimensions, it's probably hidden/offscreen, so we'll be as forgiving as possible
+    // and assume it's the size of two viewports. See https://github.com/GoogleChrome/lighthouse/issues/7236
+    if (!usedPixels) {
+      const viewportWidth = ViewportDimensions.innerWidth;
+      const viewportHeight = ViewportDimensions.innerHeight * 2;
+      const imageAspectRatio = image.naturalWidth / image.naturalHeight;
+      const viewportAspectRatio = viewportWidth / viewportHeight;
+      let usedViewportWidth = viewportWidth;
+      let usedViewportHeight = viewportHeight;
+      if (imageAspectRatio > viewportAspectRatio) {
+        usedViewportHeight = viewportWidth / imageAspectRatio;
+      } else {
+        usedViewportWidth = viewportHeight * imageAspectRatio;
+      }
+
+      usedPixels = usedViewportWidth * usedViewportHeight *
+        Math.pow(ViewportDimensions.devicePixelRatio, 2);
+    }
 
     const url = URL.elideDataURI(image.src);
     const actualPixels = image.naturalWidth * image.naturalHeight;
@@ -119,14 +102,10 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
   /**
    * @param {LH.Artifacts} artifacts
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-   * @param {LH.Audit.Context} context
-   * @return {Promise<ByteEfficiencyAudit.ByteEfficiencyProduct>}
+   * @return {ByteEfficiencyAudit.ByteEfficiencyProduct}
    */
-  static async audit_(artifacts, networkRecords, context) {
-    const images = await ImageRecords.request({
-      ImageElements: artifacts.ImageElements,
-      networkRecords,
-    }, context);
+  static audit_(artifacts, networkRecords) {
+    const images = artifacts.ImageElements;
     const ViewportDimensions = artifacts.ViewportDimensions;
     /** @type {Map<string, LH.Audit.ByteEfficiencyItem>} */
     const resultsMap = new Map();
@@ -178,4 +157,3 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
 
 module.exports = UsesResponsiveImages;
 module.exports.UIStrings = UIStrings;
-module.exports.str_ = str_;

package/lighthouse-core/audits/byte-efficiency/uses-text-compression.js

@@ -37,7 +37,7 @@ class ResponsesAreCompressed extends ByteEfficiencyAudit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      requiredArtifacts: ['ResponseCompression', 'GatherContext', 'devtoolsLogs', 'traces'],
+      requiredArtifacts: ['ResponseCompression', 'devtoolsLogs', 'traces'],
     };
   }
 

package/lighthouse-core/audits/critical-request-chains.js

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

package/lighthouse-core/audits/csp-xss.js

@@ -21,7 +21,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that evaluates the security of a page's CSP. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. "CSP" stands for "Content Security Policy". "XSS" stands for "Cross Site Scripting". "CSP" and "XSS" do not need to be translated. */
   description: 'A strong Content Security Policy (CSP) significantly ' +
     'reduces the risk of cross-site scripting (XSS) attacks. ' +
-    '[Learn more](https://web.dev/csp-xss/)',
+    '[Learn more](https://web.dev/strict-csp/)',
   /** Summary text for the results of a Lighthouse audit that evaluates the security of a page's CSP. This is displayed if no CSP is being enforced. "CSP" stands for "Content Security Policy". "CSP" does not need to be translated. */
   noCsp: 'No CSP found in enforcement mode',
   /** Message shown when one or more CSPs are defined in a <meta> tag. Shown in a table with a list of other CSP bypasses and warnings. "CSP" stands for "Content Security Policy". "CSP" and "HTTP" do not need to be translated. */

package/lighthouse-core/audits/diagnostics.js

@@ -21,7 +21,6 @@ class Diagnostics extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: 'Diagnostics',
       description: 'Collection of useful page vitals.',
-      supportedModes: ['navigation'],
       requiredArtifacts: ['traces', 'devtoolsLogs'],
     };
   }

package/lighthouse-core/audits/dobetterweb/geolocation-on-start.js

@@ -37,7 +37,6 @@ class GeolocationOnStart extends ViolationAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['ConsoleMessages'],
     };
   }

package/lighthouse-core/audits/dobetterweb/inspector-issues.js

@@ -7,7 +7,7 @@
 /**
  * @fileoverview Audits a page to determine whether it generates issues in the Issues panel of Chrome Devtools.
  * The audit is meant to maintain parity with the Chrome Devtools Issues panel front end.
- * https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/sdk/
+ * https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/sdk/
  */
 
 'use strict';

package/lighthouse-core/audits/dobetterweb/notification-on-start.js

@@ -37,7 +37,6 @@ class NotificationOnStart extends ViolationAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['ConsoleMessages'],
     };
   }

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

@@ -60,7 +60,6 @@ class UsesHTTP2Audit extends Audit {
       id: 'uses-http2',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['URL', 'devtoolsLogs', 'traces'],
     };
   }

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

@@ -7,7 +7,7 @@
 
 const Audit = require('./audit.js');
 const LHError = require('../lib/lh-error.js');
-const ProcessedTrace = require('../computed/processed-trace.js');
+const TraceOfTab = require('../computed/trace-of-tab.js');
 const Screenshots = require('../computed/screenshots.js');
 
 class FinalScreenshot extends Audit {
@@ -20,7 +20,7 @@ class FinalScreenshot extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: 'Final Screenshot',
       description: 'The last screenshot captured of the pageload.',
-      requiredArtifacts: ['traces', 'GatherContext'],
+      requiredArtifacts: ['traces'],
     };
   }
 
@@ -31,16 +31,12 @@ class FinalScreenshot extends Audit {
    */
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const processedTrace = await ProcessedTrace.request(trace, context);
+    const traceOfTab = await TraceOfTab.request(trace, context);
     const screenshots = await Screenshots.request(trace, context);
-    const {timeOrigin} = processedTrace.timestamps;
+    const {timeOrigin} = traceOfTab.timestamps;
     const finalScreenshot = screenshots[screenshots.length - 1];
 
     if (!finalScreenshot) {
-      // If a timespan didn't happen to contain frames, that's fine. Just mark not applicable.
-      if (artifacts.GatherContext.gatherMode === 'timespan') return {notApplicable: true, score: 1};
-
-      // If it was another mode, that's a fatal error.
       throw new LHError(LHError.errors.NO_SCREENSHOTS);
     }
 

package/lighthouse-core/audits/font-display.js

@@ -48,7 +48,6 @@ class FontDisplay extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['devtoolsLogs', 'CSSUsage', 'URL'],
     };
   }