lighthouse 9.5.0-dev.20230112 → 9.5.0-dev.20230114

package/cli/cli-flags.js

@@ -205,12 +205,16 @@ function getYargsParser(manualArgv) {
         type: 'string',
         describe: 'The path to the budget.json file for LightWallet.',
       },
+      'disable-full-page-screenshot': {
+        type: 'boolean',
+        describe: 'Disables collection of the full page screenshot, which can be quite large',
+      },
     })
     .group([
       'save-assets', 'list-all-audits', 'list-locales', 'list-trace-categories', 'additional-trace-categories',
       'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'form-factor', 'screenEmulation', 'emulatedUserAgent',
       'max-wait-for-load', 'enable-error-reporting', 'gather-mode', 'audit-mode',
-      'only-audits', 'only-categories', 'skip-audits', 'budget-path',
+      'only-audits', 'only-categories', 'skip-audits', 'budget-path', 'disable-full-page-screenshot',
     ], 'Configuration:')
 
     // Output

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

@@ -15,6 +15,7 @@ import errorsIframeExpiredSsl from './test-definitions/errors-iframe-expired-ssl
 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 fpsMaxPassive from './test-definitions/fps-max-passive.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';
@@ -79,6 +80,7 @@ const smokeTests = [
   formsAutoComplete,
   fpsMax,
   fpsScaled,
+  fpsMaxPassive,
   issuesMixedContent,
   lanternFetch,
   lanternIdleCallbackLong,

package/cli/test/smokehouse/report-assert.js

@@ -391,30 +391,34 @@ function collateResults(localConsole, actual, expected) {
     return makeComparison(auditName + ' audit', actualResult, expectedResult);
   });
 
-  const timingAssertions = [];
+  /** @type {Comparison[]} */
+  const extraAssertions = [];
+
   if (expected.lhr.timing) {
     const comparison = makeComparison('timing', actual.lhr.timing, expected.lhr.timing);
-    timingAssertions.push(comparison);
+    extraAssertions.push(comparison);
   }
 
-  /** @type {Comparison[]} */
-  const requestCountAssertion = [];
   if (expected.networkRequests) {
-    requestCountAssertion.push(makeComparison(
+    extraAssertions.push(makeComparison(
       'Requests',
       actual.networkRequests,
       expected.networkRequests
     ));
   }
 
+  if (expected.lhr.fullPageScreenshot) {
+    extraAssertions.push(makeComparison('fullPageScreenshot', actual.lhr.fullPageScreenshot,
+      expected.lhr.fullPageScreenshot));
+  }
+
   return [
     makeComparison('final url', actual.lhr.finalDisplayedUrl, expected.lhr.finalDisplayedUrl),
     runtimeErrorAssertion,
     runWarningsAssertion,
-    ...requestCountAssertion,
     ...artifactAssertions,
     ...auditAssertions,
-    ...timingAssertions,
+    ...extraAssertions,
   ];
 }
 

package/core/config/constants.js

@@ -111,6 +111,7 @@ const defaultSettings = {
   debugNavigation: false,
   channel: 'node',
   usePassiveGathering: false,
+  disableFullPageScreenshot: false,
   skipAboutBlank: false,
   blankPage: 'about:blank',
 

package/core/config/default-config.js

@@ -278,7 +278,6 @@ const defaultConfig = {
     'valid-source-maps',
     'preload-lcp-image',
     'csp-xss',
-    'full-page-screenshot',
     'script-treemap-data',
     'manual/pwa-cross-browser',
     'manual/pwa-page-transitions',

package/core/config/filters.js

@@ -27,12 +27,13 @@ const baseArtifactKeys = Object.keys(baseArtifactKeySource);
 
 // Some audits are used by the report for additional information.
 // Keep these audits unless they are *directly* skipped with `skipAudits`.
-const filterResistantAuditIds = ['full-page-screenshot'];
+/** @type {string[]} */
+const filterResistantAuditIds = [];
 
 // Some artifacts are used by the report for additional information.
 // Always run these artifacts even if audits do not request them.
 // These are similar to base artifacts but they cannot be run in all 3 modes.
-const filterResistantArtifactIds = ['Stacks', 'NetworkUserAgent'];
+const filterResistantArtifactIds = ['Stacks', 'NetworkUserAgent', 'FullPageScreenshot'];
 
 /**
  * Returns the set of audit IDs used in the list of categories.
@@ -302,7 +303,7 @@ function filterConfigByExplicitFilters(resolvedConfig, filters) {
     [
       ...baseAuditIds, // Start with our base audits.
       ...(onlyAudits || []), // Additionally include the opt-in audits from `onlyAudits`.
-      ...filterResistantAuditIds, // Always include our filter-resistant audits (full-page-screenshot).
+      ...filterResistantAuditIds, // Always include any filter-resistant audits.
     ].filter(auditId => !skipAudits || !skipAudits.includes(auditId))
   );
 
@@ -313,7 +314,10 @@ function filterConfigByExplicitFilters(resolvedConfig, filters) {
   const availableCategories =
     filterCategoriesByAvailableAudits(resolvedConfig.categories, audits || []);
   const categories = filterCategoriesByExplicitFilters(availableCategories, onlyCategories);
-  const artifacts = filterArtifactsByAvailableAudits(resolvedConfig.artifacts, audits);
+  let artifacts = filterArtifactsByAvailableAudits(resolvedConfig.artifacts, audits);
+  if (artifacts && resolvedConfig.settings.disableFullPageScreenshot) {
+    artifacts = artifacts.filter(({id}) => id !== 'FullPageScreenshot');
+  }
   const navigations =
     filterNavigationsByAvailableArtifacts(resolvedConfig.navigations, artifacts || []);
 

package/core/gather/gatherers/accessibility.js

@@ -81,6 +81,19 @@ async function runA11yChecks() {
   };
 }
 
+async function runA11yChecksAndResetScroll() {
+  const originalScrollPosition = {
+    x: window.scrollX,
+    y: window.scrollY,
+  };
+
+  try {
+    return await runA11yChecks();
+  } finally {
+    window.scrollTo(originalScrollPosition.x, originalScrollPosition.y);
+  }
+}
+
 /**
  * @param {import('axe-core/axe').Result} result
  * @return {LH.Artifacts.AxeRuleResult}
@@ -168,13 +181,14 @@ class Accessibility extends FRGatherer {
   getArtifact(passContext) {
     const driver = passContext.driver;
 
-    return driver.executionContext.evaluate(runA11yChecks, {
+    return driver.executionContext.evaluate(runA11yChecksAndResetScroll, {
       args: [],
       useIsolation: true,
       deps: [
         axeSource,
         pageFunctions.getNodeDetails,
         createAxeRuleResultArtifact,
+        runA11yChecks,
       ],
     });
   }

package/core/gather/gatherers/full-page-screenshot.js

@@ -47,7 +47,7 @@ function getObservedDeviceMetrics() {
 }
 
 /**
- * The screenshot dimensions are sized to `window.outerHeight` / `window.innerWidth`,
+ * The screenshot dimensions are sized to `window.outerHeight` / `window.outerWidth`,
  * however the bounding boxes of the elements are relative to `window.innerHeight` / `window.innerWidth`.
  */
 function getScreenshotAreaSize() {
@@ -74,9 +74,8 @@ class FullPageScreenshot extends FRGatherer {
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
    * @param {{height: number, width: number, mobile: boolean}} deviceMetrics
-   * @return {Promise<LH.Artifacts.FullPageScreenshot['screenshot']>}
    */
-  async _takeScreenshot(context, deviceMetrics) {
+  async _resizeViewport(context, deviceMetrics) {
     const session = context.driver.defaultSession;
     const metrics = await session.sendCommand('Page.getLayoutMetrics');
 
@@ -118,8 +117,14 @@ class FullPageScreenshot extends FRGatherer {
 
     // Now that new resources are (probably) fetched, wait long enough for a layout.
     await context.driver.executionContext.evaluate(waitForDoubleRaf, {args: []});
+  }
 
-    const result = await session.sendCommand('Page.captureScreenshot', {
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @return {Promise<LH.Result.FullPageScreenshot['screenshot']>}
+   */
+  async _takeScreenshot(context) {
+    const result = await context.driver.defaultSession.sendCommand('Page.captureScreenshot', {
       format: 'webp',
       quality: FULL_PAGE_SCREENSHOT_QUALITY,
     });
@@ -129,8 +134,8 @@ class FullPageScreenshot extends FRGatherer {
       await context.driver.executionContext.evaluate(getScreenshotAreaSize, {
         args: [],
         useIsolation: true,
-        deps: [kebabCaseToCamelCase],
       });
+
     return {
       data,
       width: screenshotAreaSize.width,
@@ -146,11 +151,11 @@ class FullPageScreenshot extends FRGatherer {
    * to re-collect the bounding client rectangle.
    * @see pageFunctions.getNodeDetails
    * @param {LH.Gatherer.FRTransitionalContext} context
-   * @return {Promise<LH.Artifacts.FullPageScreenshot['nodes']>}
+   * @return {Promise<LH.Result.FullPageScreenshot['nodes']>}
    */
   async _resolveNodes(context) {
     function resolveNodes() {
-      /** @type {LH.Artifacts.FullPageScreenshot['nodes']} */
+      /** @type {LH.Result.FullPageScreenshot['nodes']} */
       const nodes = {};
       if (!window.__lighthouseNodesDontTouchOrAllVarianceGoesAway) return nodes;
 
@@ -197,44 +202,50 @@ class FullPageScreenshot extends FRGatherer {
     /** @type {{width: number, height: number, deviceScaleFactor: number, mobile: boolean}} */
     const deviceMetrics = {...settings.screenEmulation};
 
-    // In case some other program is controlling emulation, remember what the device looks like now and reset after gatherer is done.
-    // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
-    if (!lighthouseControlsEmulation) {
-      const observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
-        args: [],
-        useIsolation: true,
-        deps: [kebabCaseToCamelCase],
-      });
-      deviceMetrics.height = observedDeviceMetrics.height;
-      deviceMetrics.width = observedDeviceMetrics.width;
-      deviceMetrics.deviceScaleFactor = observedDeviceMetrics.deviceScaleFactor;
-      // If screen emulation is disabled, use formFactor to determine if we are on mobile.
-      deviceMetrics.mobile = settings.formFactor === 'mobile';
-    }
-
     try {
+      if (!settings.usePassiveGathering) {
+        // In case some other program is controlling emulation, remember what the device looks like now and reset after gatherer is done.
+        // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
+        if (!lighthouseControlsEmulation) {
+          const observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
+            args: [],
+            useIsolation: true,
+            deps: [kebabCaseToCamelCase],
+          });
+          deviceMetrics.height = observedDeviceMetrics.height;
+          deviceMetrics.width = observedDeviceMetrics.width;
+          deviceMetrics.deviceScaleFactor = observedDeviceMetrics.deviceScaleFactor;
+          // If screen emulation is disabled, use formFactor to determine if we are on mobile.
+          deviceMetrics.mobile = settings.formFactor === 'mobile';
+        }
+
+        await this._resizeViewport(context, deviceMetrics);
+      }
+
       return {
-        screenshot: await this._takeScreenshot(context, deviceMetrics),
+        screenshot: await this._takeScreenshot(context),
         nodes: await this._resolveNodes(context),
       };
     } finally {
-      // Revert resized page.
-      if (lighthouseControlsEmulation) {
-        await emulation.emulate(session, settings);
-      } else {
-        // Best effort to reset emulation to what it was.
-        // https://github.com/GoogleChrome/lighthouse/pull/10716#discussion_r428970681
-        // TODO: seems like this would be brittle. Should at least work for devtools, but what
-        // about scripted puppeteer usages? Better to introduce a "setEmulation" callback
-        // in the LH runner api, which for ex. puppeteer consumers would setup puppeteer emulation,
-        // and then just call that to reset?
-        // https://github.com/GoogleChrome/lighthouse/issues/11122
-        await session.sendCommand('Emulation.setDeviceMetricsOverride', {
-          mobile: deviceMetrics.mobile,
-          deviceScaleFactor: deviceMetrics.deviceScaleFactor,
-          height: deviceMetrics.height,
-          width: 0, // Leave width unchanged
-        });
+      if (!settings.usePassiveGathering) {
+        // Revert resized page.
+        if (lighthouseControlsEmulation) {
+          await emulation.emulate(session, settings);
+        } else {
+          // Best effort to reset emulation to what it was.
+          // https://github.com/GoogleChrome/lighthouse/pull/10716#discussion_r428970681
+          // TODO: seems like this would be brittle. Should at least work for devtools, but what
+          // about scripted puppeteer usages? Better to introduce a "setEmulation" callback
+          // in the LH runner api, which for ex. puppeteer consumers would setup puppeteer emulation,
+          // and then just call that to reset?
+          // https://github.com/GoogleChrome/lighthouse/issues/11122
+          await session.sendCommand('Emulation.setDeviceMetricsOverride', {
+            mobile: deviceMetrics.mobile,
+            deviceScaleFactor: deviceMetrics.deviceScaleFactor,
+            height: deviceMetrics.height,
+            width: 0, // Leave width unchanged
+          });
+        }
       }
     }
   }

package/core/gather/gatherers/seo/tap-targets.js

@@ -281,6 +281,24 @@ function gatherTapTargets(tapTargetsSelector, className) {
 
   return targets;
 }
+
+/**
+ * @param {string} tapTargetsSelector
+ * @param {string} className
+ * @return {LH.Artifacts.TapTarget[]}
+ */
+function gatherTapTargetsAndResetScroll(tapTargetsSelector, className) {
+  const originalScrollPosition = {
+    x: window.scrollX,
+    y: window.scrollY,
+  };
+
+  try {
+    return gatherTapTargets(tapTargetsSelector, className);
+  } finally {
+    window.scrollTo(originalScrollPosition.x, originalScrollPosition.y);
+  }
+}
 /* c8 ignore stop */
 
 class TapTargets extends FRGatherer {
@@ -337,25 +355,27 @@ class TapTargets extends FRGatherer {
     const className = 'lighthouse-disable-pointer-events';
     const styleSheetId = await this.addStyleRule(session, className);
 
-    const tapTargets = await passContext.driver.executionContext.evaluate(gatherTapTargets, {
-      args: [tapTargetsSelector, className],
-      useIsolation: true,
-      deps: [
-        pageFunctions.getNodeDetails,
-        pageFunctions.getElementsInDocument,
-        disableFixedAndStickyElementPointerEvents,
-        elementIsVisible,
-        elementHasAncestorTapTarget,
-        elementCenterIsAtZAxisTop,
-        getClientRects,
-        hasTextNodeSiblingsFormingTextBlock,
-        elementIsInTextBlock,
-        RectHelpers.getRectCenterPoint,
-        pageFunctions.getNodePath,
-        pageFunctions.getNodeSelector,
-        pageFunctions.getNodeLabel,
-      ],
-    });
+    const tapTargets =
+      await passContext.driver.executionContext.evaluate(gatherTapTargetsAndResetScroll, {
+        args: [tapTargetsSelector, className],
+        useIsolation: true,
+        deps: [
+          pageFunctions.getNodeDetails,
+          pageFunctions.getElementsInDocument,
+          disableFixedAndStickyElementPointerEvents,
+          elementIsVisible,
+          elementHasAncestorTapTarget,
+          elementCenterIsAtZAxisTop,
+          getClientRects,
+          hasTextNodeSiblingsFormingTextBlock,
+          elementIsInTextBlock,
+          RectHelpers.getRectCenterPoint,
+          pageFunctions.getNodePath,
+          pageFunctions.getNodeSelector,
+          pageFunctions.getNodeLabel,
+          gatherTapTargets,
+        ],
+      });
 
     await this.removeStyleRule(session, styleSheetId);
 

package/core/legacy/config/config.js

@@ -79,7 +79,7 @@ function assertValidPasses(passes, audits) {
       const gatherer = gathererDefn.instance;
       foundGatherers.add(gatherer.name);
       const isGatherRequiredByAudits = requestedGatherers.has(gatherer.name);
-      if (!isGatherRequiredByAudits) {
+      if (!isGatherRequiredByAudits && gatherer.name !== 'FullPageScreenshot') {
         const msg = `${gatherer.name} gatherer requested, however no audit requires it.`;
         log.warn('config', msg);
       }
@@ -313,7 +313,8 @@ class LegacyResolvedConfig {
    */
   static filterConfigIfNeeded(config) {
     const settings = config.settings;
-    if (!settings.onlyCategories && !settings.onlyAudits && !settings.skipAudits) {
+    // eslint-disable-next-line max-len
+    if (!settings.onlyCategories && !settings.onlyAudits && !settings.skipAudits && !settings.disableFullPageScreenshot) {
       return;
     }
 
@@ -328,6 +329,11 @@ class LegacyResolvedConfig {
     // 3. Resolve which gatherers will need to run
     const requestedGathererIds = LegacyResolvedConfig.getGatherersRequestedByAudits(audits);
 
+    // Always include FullPageScreenshot, unless explictly told not to.
+    if (!settings.disableFullPageScreenshot) {
+      requestedGathererIds.add('FullPageScreenshot');
+    }
+
     // 4. Filter to only the neccessary passes
     const passes =
       LegacyResolvedConfig.generatePassesNeededByGatherers(config.passes, requestedGathererIds);
@@ -413,14 +419,6 @@ class LegacyResolvedConfig {
       }
     });
 
-    // The `full-page-screenshot` audit belongs to no category, but we still want to include
-    // it (unless explictly excluded) because there are audits in every category that can use it.
-    const explicitlyExcludesFullPageScreenshot =
-      settings.skipAudits && settings.skipAudits.includes('full-page-screenshot');
-    if (!explicitlyExcludesFullPageScreenshot && (settings.onlyCategories || settings.skipAudits)) {
-      includedAudits.add('full-page-screenshot');
-    }
-
     return {categories, requestedAuditNames: includedAudits};
   }
 

package/core/legacy/gather/driver.js

@@ -405,23 +405,6 @@ class Driver {
     return fetchResponseBodyFromCache(this.defaultSession, requestId, timeout);
   }
 
-  /**
-   * @param {{x: number, y: number}} position
-   * @return {Promise<void>}
-   */
-  scrollTo(position) {
-    const scrollExpression = `window.scrollTo(${position.x}, ${position.y})`;
-    return this.executionContext.evaluateAsync(scrollExpression, {useIsolation: true});
-  }
-
-  /**
-   * @return {Promise<{x: number, y: number}>}
-   */
-  getScrollPosition() {
-    return this.executionContext.evaluateAsync(`({x: window.scrollX, y: window.scrollY})`,
-      {useIsolation: true});
-  }
-
   /**
    * @param {{additionalTraceCategories?: string|null}=} settings
    * @return {Promise<void>}

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

@@ -313,17 +313,12 @@ class GatherRunner {
    * @return {Promise<void>}
    */
   static async afterPass(passContext, loadData, gathererResults) {
-    const driver = passContext.driver;
     const config = passContext.passConfig;
     const gatherers = config.gatherers;
 
     const apStatus = {msg: `Running afterPass methods`, id: `lh:gather:afterPass`};
     log.time(apStatus, 'verbose');
 
-    // Some gatherers scroll the page which can cause unexpected results for other gatherers.
-    // We reset the scroll position in between each gatherer.
-    const scrollPosition = await driver.getScrollPosition();
-
     for (const gathererDefn of gatherers) {
       const gatherer = gathererDefn.instance;
       const status = {
@@ -339,7 +334,6 @@ class GatherRunner {
       gathererResult.push(artifactPromise);
       gathererResults[gatherer.name] = gathererResult;
       await artifactPromise.catch(() => {});
-      await driver.scrollTo(scrollPosition);
       log.timeEnd(status);
     }
     log.timeEnd(apStatus);

package/core/runner.js

@@ -110,6 +110,8 @@ class Runner {
         categories,
         categoryGroups: resolvedConfig.groups || undefined,
         stackPacks: stackPacks.getStackPacks(artifacts.Stacks),
+        fullPageScreenshot: resolvedConfig.settings.disableFullPageScreenshot ?
+          undefined : artifacts.FullPageScreenshot,
         timing: this._getTiming(artifacts),
         i18n: {
           rendererFormattedStrings: format.getRendererFormattedStrings(settings.locale),

package/core/util.cjs

@@ -216,9 +216,39 @@ class Util {
       });
     }
 
+    // In 10.0, full-page-screenshot became a top-level property on the LHR.
+    if (clone.audits['full-page-screenshot']) {
+      const details = /** @type {LH.Result.FullPageScreenshot=} */ (
+        clone.audits['full-page-screenshot'].details);
+      if (details) {
+        clone.fullPageScreenshot = {
+          screenshot: details.screenshot,
+          nodes: details.nodes,
+        };
+      } else {
+        clone.fullPageScreenshot = null;
+      }
+      delete clone.audits['full-page-screenshot'];
+    }
+
     return clone;
   }
 
+  /**
+   * @param {LH.Result} lhr
+   * @return {LH.Result.FullPageScreenshot=}
+   */
+  static getFullPageScreenshot(lhr) {
+    if (lhr.fullPageScreenshot) {
+      return lhr.fullPageScreenshot;
+    }
+
+    // Prior to 10.0.
+    const details = /** @type {LH.Result.FullPageScreenshot=} */ (
+      lhr.audits['full-page-screenshot']?.details);
+    return details;
+  }
+
   /**
    * Used to determine if the "passed" for the purposes of showing up in the "failed" or "passed"
    * sections of the report.

package/dist/report/bundle.esm.js

@@ -212,9 +212,39 @@ class Util {
       });
     }
 
+    // In 10.0, full-page-screenshot became a top-level property on the LHR.
+    if (clone.audits['full-page-screenshot']) {
+      const details = /** @type {LH.Result.FullPageScreenshot=} */ (
+        clone.audits['full-page-screenshot'].details);
+      if (details) {
+        clone.fullPageScreenshot = {
+          screenshot: details.screenshot,
+          nodes: details.nodes,
+        };
+      } else {
+        clone.fullPageScreenshot = null;
+      }
+      delete clone.audits['full-page-screenshot'];
+    }
+
     return clone;
   }
 
+  /**
+   * @param {LH.Result} lhr
+   * @return {LH.Result.FullPageScreenshot=}
+   */
+  static getFullPageScreenshot(lhr) {
+    if (lhr.fullPageScreenshot) {
+      return lhr.fullPageScreenshot;
+    }
+
+    // Prior to 10.0.
+    const details = /** @type {LH.Result.FullPageScreenshot=} */ (
+      lhr.audits['full-page-screenshot']?.details);
+    return details;
+  }
+
   /**
    * Used to determine if the "passed" for the purposes of showing up in the "failed" or "passed"
    * sections of the report.
@@ -2636,7 +2666,7 @@ const CRCRenderer = CriticalRequestChainRenderer;
  */
 
 /**
- * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+ * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
  * @param {LH.Audit.Details.Rect} rect
  * @return {boolean}
  */
@@ -2742,7 +2772,7 @@ class ElementScreenshotRenderer {
    * Allows for multiple Lighthouse reports to be rendered on the page, each with their
    * own full page screenshot.
    * @param {HTMLElement} el
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
     el.style.setProperty('--element-screenshot-url', `url('${screenshot.data}')`);
@@ -2824,7 +2854,7 @@ class ElementScreenshotRenderer {
    * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
    * Returns null if element rect is outside screenshot bounds.
    * @param {DOM} dom
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
    * @param {Rect} elementRectSC Region of screenshot to highlight.
    * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
    * @return {Element|null}
@@ -2919,7 +2949,7 @@ const URL_PREFIXES = ['http://', 'https://', 'data:'];
 class DetailsRenderer {
   /**
    * @param {DOM} dom
-   * @param {{fullPageScreenshot?: LH.Audit.Details.FullPageScreenshot}} [options]
+   * @param {{fullPageScreenshot?: LH.Result.FullPageScreenshot}} [options]
    */
   constructor(dom, options = {}) {
     this._dom = dom;
@@ -2945,7 +2975,6 @@ class DetailsRenderer {
       // Internal-only details, not for rendering.
       case 'screenshot':
       case 'debugdata':
-      case 'full-page-screenshot':
       case 'treemap-data':
         return null;
 
@@ -4529,12 +4558,8 @@ class ReportRenderer {
     Util.i18n = i18n;
     Util.reportJson = report;
 
-    const fullPageScreenshot =
-      report.audits['full-page-screenshot']?.details &&
-      report.audits['full-page-screenshot'].details.type === 'full-page-screenshot' ?
-      report.audits['full-page-screenshot'].details : undefined;
     const detailsRenderer = new DetailsRenderer(this._dom, {
-      fullPageScreenshot,
+      fullPageScreenshot: report.fullPageScreenshot ?? undefined,
     });
 
     const categoryRenderer = new CategoryRenderer(this._dom, detailsRenderer);
@@ -4605,9 +4630,9 @@ class ReportRenderer {
     reportSection.append(this._renderReportFooter(report));
     reportContainer.append(headerContainer, reportSection);
 
-    if (fullPageScreenshot) {
+    if (report.fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(
-        this._dom.rootEl, fullPageScreenshot.screenshot);
+        this._dom.rootEl, report.fullPageScreenshot.screenshot);
     }
 
     return reportFragment;
@@ -5466,6 +5491,7 @@ class ReportUIFeatures {
    */
   initFeatures(lhr) {
     this.json = lhr;
+    this._fullPageScreenshot = Util.getFullPageScreenshot(lhr);
 
     if (this._topbar) {
       this._topbar.enable(lhr);
@@ -5705,18 +5731,13 @@ class ReportUIFeatures {
    * @param {Element} rootEl
    */
   _setupElementScreenshotOverlay(rootEl) {
-    const fullPageScreenshot =
-      this.json.audits['full-page-screenshot'] &&
-      this.json.audits['full-page-screenshot'].details &&
-      this.json.audits['full-page-screenshot'].details.type === 'full-page-screenshot' &&
-      this.json.audits['full-page-screenshot'].details;
-    if (!fullPageScreenshot) return;
+    if (!this._fullPageScreenshot) return;
 
     ElementScreenshotRenderer.installOverlayFeature({
       dom: this._dom,
       rootEl: rootEl,
       overlayContainerEl: rootEl,
-      fullPageScreenshot,
+      fullPageScreenshot: this._fullPageScreenshot,
     });
   }