lighthouse 9.5.0-dev.20221002 → 9.5.0-dev.20221004

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

@@ -62,6 +62,7 @@ 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';
 
 /** @type {ReadonlyArray<Smokehouse.TestDfn>} */
 const smokeTests = [
@@ -123,6 +124,7 @@ const smokeTests = [
   seoTapTargets,
   sourceMaps,
   timing,
+  fpsScaled,
 ];
 
 export default smokeTests;

package/cli/test/smokehouse/readme.md

@@ -188,7 +188,7 @@ Smokehouse comes with a core set of test definitions, but it can run any set of
   const expectations = [{
     lhr: {
       requestedUrl: 'http://localhost:8080/index.html',
-      finalUrl: 'http://localhost:8080/index.html',
+      finalDisplayedUrl: 'http://localhost:8080/index.html',
       audits: {
         'preload-as': {
           score: 1,

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

@@ -235,7 +235,7 @@ describe('getAssertionReport', () => {
       lhr: {
         audits: {},
         requestedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
-        finalUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
+        finalDisplayedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
       },
     });
     expect(report).toMatchObject({passed: 3, failed: 0, log: ''});
@@ -252,7 +252,7 @@ describe('getAssertionReport', () => {
           },
         },
         requestedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
-        finalUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
+        finalDisplayedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
       },
     });
     expect(report).toMatchObject({passed: 3, failed: 1});
@@ -270,7 +270,7 @@ describe('getAssertionReport', () => {
           },
         },
         requestedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
-        finalUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
+        finalDisplayedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
       },
     });
     expect(report).toMatchObject({passed: 3, failed: 1});
@@ -289,7 +289,7 @@ describe('getAssertionReport', () => {
           },
         },
         requestedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
-        finalUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
+        finalDisplayedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
       },
     });
     expect(report).toMatchObject({passed: 3, failed: 1});

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

@@ -408,7 +408,7 @@ function collateResults(localConsole, actual, expected) {
   }
 
   return [
-    makeComparison('final url', actual.lhr.finalUrl, expected.lhr.finalUrl),
+    makeComparison('final url', actual.lhr.finalDisplayedUrl, expected.lhr.finalDisplayedUrl),
     runtimeErrorAssertion,
     runWarningsAssertion,
     ...requestCountAssertion,

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

@@ -401,7 +401,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
    * @return {Promise<ByteEfficiencyProduct>}
    */
   static async audit_(artifacts, networkRecords, context) {
-    const mainDocumentEntity = thirdPartyWeb.getEntity(artifacts.URL.finalUrl);
+    const mainDocumentEntity = thirdPartyWeb.getEntity(artifacts.URL.finalDisplayedUrl);
     const bundles = await JSBundles.request(artifacts, context);
 
     /** @type {Item[]} */

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

@@ -92,7 +92,7 @@ class ModernImageFormats extends ByteEfficiencyAudit {
    * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
    */
   static audit_(artifacts) {
-    const pageURL = artifacts.URL.finalUrl;
+    const pageURL = artifacts.URL.finalDisplayedUrl;
     const images = artifacts.OptimizedImages;
     const imageElements = artifacts.ImageElements;
     /** @type {Map<string, LH.Artifacts.ImageElement>} */

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

@@ -69,7 +69,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
    * @return {import('./byte-efficiency-audit.js').ByteEfficiencyProduct}
    */
   static audit_(artifacts) {
-    const pageURL = artifacts.URL.finalUrl;
+    const pageURL = artifacts.URL.finalDisplayedUrl;
     const images = artifacts.OptimizedImages;
     const imageElements = artifacts.ImageElements;
     /** @type {Map<string, LH.Artifacts.ImageElement>} */

package/core/audits/font-display.js

@@ -100,7 +100,7 @@ class FontDisplay extends Audit {
         for (const relativeURL of relativeURLs) {
           try {
             const relativeRoot = UrlUtils.isValid(stylesheet.header.sourceURL) ?
-              stylesheet.header.sourceURL : artifacts.URL.finalUrl;
+              stylesheet.header.sourceURL : artifacts.URL.finalDisplayedUrl;
             const absoluteURL = new URL(relativeURL, relativeRoot);
             targetURLSet.add(absoluteURL.href);
           } catch (err) {

package/core/audits/redirects.js

@@ -42,10 +42,10 @@ class Redirects extends Audit {
    * Example:
    *    GET /initialUrl => 302 /firstRedirect
    *    GET /firstRedirect => 200 /firstRedirect, window.location = '/secondRedirect'
-   *    GET /secondRedirect => 302 /finalUrl
-   *    GET /finalUrl => 200 /finalUrl
+   *    GET /secondRedirect => 302 /thirdRedirect
+   *    GET /thirdRedirect => 200 /mainDocumentUrl
    *
-   * Returns network records [/initialUrl, /firstRedirect, /secondRedirect, /thirdRedirect, /finalUrl]
+   * Returns network records [/initialUrl, /firstRedirect, /secondRedirect, /thirdRedirect, /mainDocumentUrl]
    *
    * @param {LH.Artifacts.NetworkRequest} mainResource
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords

package/core/audits/seo/crawlable-anchors.js

@@ -62,7 +62,7 @@ class CrawlableAnchors extends Audit {
 
       // checking if rawHref is a valid
       try {
-        new URL(rawHref, url.finalUrl);
+        new URL(rawHref, url.finalDisplayedUrl);
       } catch (e) {
         return true;
       }

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

@@ -280,7 +280,7 @@ class FontSize extends Audit {
     const failingRules = getUniqueFailingRules(analyzedFailingNodesData);
     const percentageOfPassingText =
       (totalTextLength - failingTextLength) / totalTextLength * 100;
-    const pageUrl = artifacts.URL.finalUrl;
+    const pageUrl = artifacts.URL.finalDisplayedUrl;
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

package/core/audits/seo/link-text.js

@@ -120,8 +120,8 @@ class LinkText extends Audit {
           href.startsWith('javascript:') ||
           href.startsWith('mailto:') ||
           // This line prevents the audit from flagging anchor links.
-          // In this case it is better to use `finalUrl` than `mainDocumentUrl`.
-          UrlUtils.equalWithExcludedFragments(link.href, artifacts.URL.finalUrl)
+          // In this case it is better to use `finalDisplayedUrl` than `mainDocumentUrl`.
+          UrlUtils.equalWithExcludedFragments(link.href, artifacts.URL.finalDisplayedUrl)
         ) {
           return false;
         }

package/core/audits/service-worker.js

@@ -170,7 +170,7 @@ class ServiceWorker extends Audit {
       };
     }
 
-    // SW controls both finalUrl and start_url.
+    // SW controls both finalDisplayedUrl and start_url.
     return {
       score: 1,
       details,

package/core/audits/third-party-summary.js

@@ -197,7 +197,7 @@ class ThirdPartySummary extends Audit {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    const mainEntity = thirdPartyWeb.getEntity(artifacts.URL.finalUrl);
+    const mainEntity = thirdPartyWeb.getEntity(artifacts.URL.finalDisplayedUrl);
     const tasks = await MainThreadTasks.request(trace, context);
     const multiplier = settings.throttlingMethod === 'simulate' ?
       settings.throttling.cpuSlowdownMultiplier : 1;

package/core/audits/valid-source-maps.js

@@ -77,7 +77,7 @@ class ValidSourceMaps extends Audit {
     for (const script of artifacts.Scripts) {
       const sourceMap = SourceMaps.find(m => m.scriptId === script.scriptId);
       const errors = [];
-      const isLargeFirstParty = this.isLargeFirstPartyJS(script, artifacts.URL.finalUrl);
+      const isLargeFirstParty = this.isLargeFirstPartyJS(script, artifacts.URL.finalDisplayedUrl);
 
       if (isLargeFirstParty && (!sourceMap || !sourceMap.map)) {
         missingMapsForLargeFirstPartyFile = true;

package/core/computed/page-dependency-graph.js

@@ -14,7 +14,7 @@ import {NetworkRecords} from './network-records.js';
 import {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
 
 /** @typedef {import('../lib/dependency-graph/base-node.js').Node} Node */
-/** @typedef {Omit<LH.Artifacts['URL'], 'initialUrl'|'finalUrl'>} URLArtifact */
+/** @typedef {Omit<LH.Artifacts['URL'], 'finalDisplayedUrl'>} URLArtifact */
 
 /**
  * @typedef {Object} NetworkNodeOutput

package/core/computed/resource-summary.js

@@ -56,7 +56,7 @@ class ResourceSummary {
     if (budget?.options?.firstPartyHostnames) {
       firstPartyHosts = budget.options.firstPartyHostnames;
     } else {
-      const rootDomain = Util.getRootDomain(URLArtifact.finalUrl);
+      const rootDomain = Util.getRootDomain(URLArtifact.finalDisplayedUrl);
       firstPartyHosts = [`*.${rootDomain}`];
     }
 

package/core/gather/base-artifacts.js

@@ -34,8 +34,7 @@ async function getBaseArtifacts(config, driver, context) {
       'mobile' : 'desktop',
     // Contextual artifacts whose collection changes based on gather mode.
     URL: {
-      initialUrl: '',
-      finalUrl: '',
+      finalDisplayedUrl: '',
     },
     PageLoadError: null,
     GatherContext: context,
@@ -83,13 +82,12 @@ function finalizeArtifacts(baseArtifacts, gathererArtifacts) {
   artifacts.Timing = log.getTimeEntries();
   artifacts.LighthouseRunWarnings = deduplicateWarnings(warnings);
 
-  if (artifacts.PageLoadError && !artifacts.URL.finalUrl) {
-    artifacts.URL.finalUrl = artifacts.URL.requestedUrl || artifacts.URL.initialUrl;
+  if (artifacts.PageLoadError && !artifacts.URL.finalDisplayedUrl) {
+    artifacts.URL.finalDisplayedUrl = artifacts.URL.requestedUrl || '';
   }
 
   // Check that the runner remembered to mutate the special-case URL artifact.
-  if (!artifacts.URL.initialUrl) throw new Error('Runner did not set initialUrl');
-  if (!artifacts.URL.finalUrl) throw new Error('Runner did not set finalUrl');
+  if (!artifacts.URL.finalDisplayedUrl) throw new Error('Runner did not set finalDisplayedUrl');
 
   return artifacts;
 }

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

@@ -4,7 +4,7 @@
  * 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.
  */
 
-/* globals window document getBoundingClientRect requestAnimationFrame */
+/* globals window getBoundingClientRect requestAnimationFrame */
 
 import FRGatherer from '../base-gatherer.js';
 import * as emulation from '../../lib/emulation.js';
@@ -31,8 +31,8 @@ function getObservedDeviceMetrics() {
   // Convert the Web API's kebab case (landscape-primary) to camel case (landscapePrimary).
   const screenOrientationType = kebabCaseToCamelCase(window.screen.orientation.type);
   return {
-    width: document.documentElement.clientWidth,
-    height: document.documentElement.clientHeight,
+    width: window.outerWidth,
+    height: window.outerHeight,
     screenOrientation: {
       type: screenOrientationType,
       angle: window.screen.orientation.angle,
@@ -41,6 +41,13 @@ function getObservedDeviceMetrics() {
   };
 }
 
+function getScreenshotAreaSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+}
+
 function waitForDoubleRaf() {
   return new Promise((resolve) => {
     requestAnimationFrame(() => requestAnimationFrame(resolve));
@@ -123,10 +130,16 @@ class FullPageScreenshot extends FRGatherer {
     });
     const data = 'data:image/webp;base64,' + result.data;
 
+    const screenshotAreaSize =
+      await context.driver.executionContext.evaluate(getScreenshotAreaSize, {
+        args: [],
+        useIsolation: true,
+        deps: [kebabCaseToCamelCase],
+      });
     return {
       data,
-      width: deviceMetrics.width,
-      height,
+      width: screenshotAreaSize.width,
+      height: screenshotAreaSize.height,
     };
   }
 

package/core/gather/gatherers/link-elements.js

@@ -22,12 +22,12 @@ import {MainResource} from '../../computed/main-resource.js';
 /**
  *
  * @param {string} url
- * @param {string} finalUrl
+ * @param {string} finalDisplayedUrl
  * @return {string|null}
  */
-function normalizeUrlOrNull(url, finalUrl) {
+function normalizeUrlOrNull(url, finalDisplayedUrl) {
   try {
-    return new URL(url, finalUrl).href;
+    return new URL(url, finalDisplayedUrl).href;
   } catch (_) {
     return null;
   }
@@ -128,7 +128,7 @@ class LinkElements extends FRGatherer {
       for (const link of LinkHeader.parse(header.value).refs) {
         linkElements.push({
           rel: link.rel || '',
-          href: normalizeUrlOrNull(link.uri, context.baseArtifacts.URL.finalUrl),
+          href: normalizeUrlOrNull(link.uri, context.baseArtifacts.URL.finalDisplayedUrl),
           hrefRaw: link.uri || '',
           hreflang: link.hreflang || '',
           as: link.as || '',

package/core/gather/gatherers/seo/robots-txt.js

@@ -17,8 +17,8 @@ class RobotsTxt extends FRGatherer {
    * @return {Promise<LH.Artifacts['RobotsTxt']>}
    */
   async getArtifact(passContext) {
-    const {finalUrl} = passContext.baseArtifacts.URL;
-    const robotsUrl = new URL('/robots.txt', finalUrl).href;
+    const {finalDisplayedUrl} = passContext.baseArtifacts.URL;
+    const robotsUrl = new URL('/robots.txt', finalDisplayedUrl).href;
     return passContext.driver.fetcher.fetchResource(robotsUrl)
       .catch(err => ({status: null, content: null, errorMessage: err.message}));
   }

package/core/gather/gatherers/web-app-manifest.js

@@ -94,8 +94,8 @@ class WebAppManifest extends FRGatherer {
    */
   getArtifact(context) {
     const driver = context.driver;
-    const {finalUrl} = context.baseArtifacts.URL;
-    return WebAppManifest.getWebAppManifest(driver.defaultSession, finalUrl);
+    const {finalDisplayedUrl} = context.baseArtifacts.URL;
+    return WebAppManifest.getWebAppManifest(driver.defaultSession, finalDisplayedUrl);
   }
 }
 

package/core/gather/navigation-runner.js

@@ -214,9 +214,8 @@ async function _computeNavigationResult(
  */
 async function _navigation(navigationContext) {
   const artifactState = getEmptyArtifactState();
-  const initialUrl = await navigationContext.driver.url();
   const phaseState = {
-    url: initialUrl,
+    url: await navigationContext.driver.url(),
     gatherMode: /** @type {const} */ ('navigation'),
     driver: navigationContext.driver,
     page: navigationContext.page,
@@ -236,10 +235,9 @@ async function _navigation(navigationContext) {
   // If we haven't set all the required urls yet, set them here.
   if (!Object.values(phaseState.baseArtifacts).every(Boolean)) {
     phaseState.baseArtifacts.URL = {
-      initialUrl,
       requestedUrl: navigateResult.requestedUrl,
       mainDocumentUrl: navigateResult.mainDocumentUrl,
-      finalUrl: navigateResult.mainDocumentUrl,
+      finalDisplayedUrl: await navigationContext.driver.url(),
     };
   }
   phaseState.url = navigateResult.mainDocumentUrl;

package/core/gather/snapshot-runner.js

@@ -33,8 +33,7 @@ async function snapshotGather(options) {
     async () => {
       const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'snapshot'});
       baseArtifacts.URL = {
-        initialUrl: url,
-        finalUrl: url,
+        finalDisplayedUrl: url,
       };
 
       const artifactDefinitions = config.artifacts || [];

package/core/gather/timespan-runner.js

@@ -28,7 +28,6 @@ async function startTimespanGather(options) {
   /** @type {Map<string, LH.ArbitraryEqualityMap>} */
   const computedCache = new Map();
   const artifactDefinitions = config.artifacts || [];
-  const initialUrl = await driver.url();
   const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'timespan'});
   const artifactState = getEmptyArtifactState();
   /** @type {Omit<import('./runner-helpers.js').CollectPhaseArtifactOptions, 'phase'>} */
@@ -49,15 +48,12 @@ async function startTimespanGather(options) {
 
   return {
     async endTimespanGather() {
-      const finalUrl = await driver.url();
+      const finalDisplayedUrl = await driver.url();
 
       const runnerOptions = {config, computedCache};
       const artifacts = await Runner.gather(
         async () => {
-          baseArtifacts.URL = {
-            initialUrl,
-            finalUrl,
-          };
+          baseArtifacts.URL = {finalDisplayedUrl};
 
           await collectPhaseArtifacts({phase: 'stopSensitiveInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'stopInstrumentation', ...phaseOptions});

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

@@ -82,9 +82,9 @@ class GatherRunner {
       });
       passContext.url = mainDocumentUrl;
       const {URL} = passContext.baseArtifacts;
-      if (!URL.finalUrl || !URL.mainDocumentUrl) {
-        URL.finalUrl = mainDocumentUrl;
+      if (!URL.finalDisplayedUrl || !URL.mainDocumentUrl) {
         URL.mainDocumentUrl = mainDocumentUrl;
+        URL.finalDisplayedUrl = await passContext.driver.url();
       }
       if (passContext.passConfig.loadFailureMode === 'fatal') {
         passContext.LighthouseRunWarnings.push(...warnings);
@@ -409,10 +409,9 @@ class GatherRunner {
       settings: options.settings,
       GatherContext: {gatherMode: 'navigation'},
       URL: {
-        initialUrl: await options.driver.url(),
         requestedUrl: options.requestedUrl,
         mainDocumentUrl: '',
-        finalUrl: '',
+        finalDisplayedUrl: '',
       },
       Timing: [],
       PageLoadError: null,

package/core/runner.js

@@ -90,7 +90,9 @@ class Runner {
       const i18nLhr = {
         lighthouseVersion,
         requestedUrl: artifacts.URL.requestedUrl,
-        finalUrl: artifacts.URL.finalUrl,
+        mainDocumentUrl: artifacts.URL.mainDocumentUrl,
+        finalDisplayedUrl: artifacts.URL.finalDisplayedUrl,
+        finalUrl: artifacts.URL.mainDocumentUrl,
         fetchTime: artifacts.fetchTime,
         gatherMode: artifacts.GatherContext.gatherMode,
         runtimeError: Runner.getArtifactRuntimeError(artifacts),
@@ -121,8 +123,7 @@ class Runner {
       // LHR has now been localized.
       const lhr = /** @type {LH.Result} */ (i18nLhr);
 
-      // Save lhr to ./latest-run, but only if -GA is used.
-      if (settings.gatherMode && settings.auditMode) {
+      if (settings.auditMode) {
         const path = Runner._getDataSavePath(settings);
         assetSaver.saveLhr(lhr, path);
       }

package/core/user-flow.js

@@ -46,7 +46,7 @@ class UserFlow {
    * @return {string}
    */
   _getDefaultStepName(artifacts) {
-    const shortUrl = this._shortenUrl(artifacts.URL.finalUrl);
+    const shortUrl = this._shortenUrl(artifacts.URL.finalDisplayedUrl);
     switch (artifacts.GatherContext.gatherMode) {
       case 'navigation':
         return `Navigation report (${shortUrl})`;
@@ -264,7 +264,7 @@ async function auditGatherSteps(gatherSteps, options) {
     steps.push({lhr: result.lhr, name});
   }
 
-  const url = new URL(gatherSteps[0].artifacts.URL.finalUrl);
+  const url = new URL(gatherSteps[0].artifacts.URL.finalDisplayedUrl);
   const flowName = options.name || `User flow (${url.hostname})`;
   return {steps, name: flowName};
 }

package/core/util.cjs

@@ -54,6 +54,28 @@ class Util {
     return `%10d${NBSP}ms`;
   }
 
+  /**
+   * If LHR is older than 10.0 it will not have the `finalDisplayedUrl` property.
+   * Old LHRs should have the `finalUrl` property which will work fine for the report.
+   *
+   * @param {LH.Result} lhr
+   */
+  static getFinalDisplayedUrl(lhr) {
+    if (lhr.finalDisplayedUrl) return lhr.finalDisplayedUrl;
+    if (lhr.finalUrl) return lhr.finalUrl;
+    throw new Error('Could not determine final displayed URL');
+  }
+
+  /**
+   * If LHR is older than 10.0 it will not have the `mainDocumentUrl` property.
+   * Old LHRs should have the `finalUrl` property which is the same as `mainDocumentUrl`.
+   *
+   * @param {LH.Result} lhr
+   */
+  static getMainDocumentUrl(lhr) {
+    return lhr.mainDocumentUrl || lhr.finalUrl;
+  }
+
   /**
    * Returns a new LHR that's reshaped for slightly better ergonomics within the report rendereer.
    * Also, sets up the localized UI strings used within renderer and makes changes to old LHRs to be
@@ -76,6 +98,9 @@ class Util {
       clone.configSettings.formFactor = clone.configSettings.emulatedFormFactor;
     }
 
+    clone.finalDisplayedUrl = this.getFinalDisplayedUrl(clone);
+    clone.mainDocumentUrl = this.getMainDocumentUrl(clone);
+
     for (const audit of Object.values(clone.audits)) {
       // Turn 'not-applicable' (LHR <4.0) and 'not_applicable' (older proto versions)
       // into 'notApplicable' (LHR ≥4.0).

package/dist/report/bundle.esm.js

@@ -50,6 +50,28 @@ class Util {
     return `%10d${NBSP}ms`;
   }
 
+  /**
+   * If LHR is older than 10.0 it will not have the `finalDisplayedUrl` property.
+   * Old LHRs should have the `finalUrl` property which will work fine for the report.
+   *
+   * @param {LH.Result} lhr
+   */
+  static getFinalDisplayedUrl(lhr) {
+    if (lhr.finalDisplayedUrl) return lhr.finalDisplayedUrl;
+    if (lhr.finalUrl) return lhr.finalUrl;
+    throw new Error('Could not determine final displayed URL');
+  }
+
+  /**
+   * If LHR is older than 10.0 it will not have the `mainDocumentUrl` property.
+   * Old LHRs should have the `finalUrl` property which is the same as `mainDocumentUrl`.
+   *
+   * @param {LH.Result} lhr
+   */
+  static getMainDocumentUrl(lhr) {
+    return lhr.mainDocumentUrl || lhr.finalUrl;
+  }
+
   /**
    * Returns a new LHR that's reshaped for slightly better ergonomics within the report rendereer.
    * Also, sets up the localized UI strings used within renderer and makes changes to old LHRs to be
@@ -72,6 +94,9 @@ class Util {
       clone.configSettings.formFactor = clone.configSettings.emulatedFormFactor;
     }
 
+    clone.finalDisplayedUrl = this.getFinalDisplayedUrl(clone);
+    clone.mainDocumentUrl = this.getMainDocumentUrl(clone);
+
     for (const audit of Object.values(clone.audits)) {
       // Turn 'not-applicable' (LHR <4.0) and 'not_applicable' (older proto versions)
       // into 'notApplicable' (LHR ≥4.0).
@@ -2779,7 +2804,12 @@ class ElementScreenshotRenderer {
       width: maxRenderSizeDC.width / zoomFactor,
       height: maxRenderSizeDC.height / zoomFactor,
     };
-    elementPreviewSizeSC.width = Math.min(screenshot.width, elementPreviewSizeSC.width);
+
+    if (screenshot.width < elementPreviewSizeSC.width) {
+      elementPreviewSizeSC.width = screenshot.width;
+      elementPreviewSizeSC.height = screenshot.height;
+    }
+
     /* This preview size is either the size of the thumbnail or size of the Lightbox */
     const elementPreviewSizeDC = {
       width: elementPreviewSizeSC.width * zoomFactor,
@@ -4313,9 +4343,9 @@ class ReportRenderer {
   _renderReportTopbar(report) {
     const el = this._dom.createComponent('topbar');
     const metadataUrl = this._dom.find('a.lh-topbar__url', el);
-    metadataUrl.textContent = report.finalUrl;
-    metadataUrl.title = report.finalUrl;
-    this._dom.safelySetHref(metadataUrl, report.finalUrl);
+    metadataUrl.textContent = report.finalDisplayedUrl;
+    metadataUrl.title = report.finalDisplayedUrl;
+    this._dom.safelySetHref(metadataUrl, report.finalDisplayedUrl);
     return el;
   }
 
@@ -4713,7 +4743,7 @@ function computeWindowNameSuffix(json) {
   // @ts-expect-error - If this is a v2 LHR, use old `generatedTime`.
   const fallbackFetchTime = /** @type {string} */ (json.generatedTime);
   const fetchTime = json.fetchTime || fallbackFetchTime;
-  return `${json.lighthouseVersion}-${json.finalUrl}-${fetchTime}`;
+  return `${json.lighthouseVersion}-${json.finalDisplayedUrl}-${fetchTime}`;
 }
 
 /**
@@ -4795,7 +4825,9 @@ function openTreemap(json) {
   /** @type {LH.Treemap.Options} */
   const treemapOptions = {
     lhr: {
+      mainDocumentUrl: json.mainDocumentUrl,
       finalUrl: json.finalUrl,
+      finalDisplayedUrl: json.finalDisplayedUrl,
       audits: {
         'script-treemap-data': json.audits['script-treemap-data'],
       },
@@ -5369,11 +5401,11 @@ function getFilenamePrefix(name, fetchTime) {
 
 /**
  * Generate a filenamePrefix of hostname_YYYY-MM-DD_HH-MM-SS.
- * @param {{finalUrl: string, fetchTime: string}} lhr
+ * @param {{finalDisplayedUrl: string, fetchTime: string}} lhr
  * @return {string}
  */
 function getLhrFilenamePrefix(lhr) {
-  const hostname = new URL(lhr.finalUrl).hostname;
+  const hostname = new URL(lhr.finalDisplayedUrl).hostname;
   return getFilenamePrefix(hostname, lhr.fetchTime);
 }
 
@@ -5607,7 +5639,7 @@ class ReportUIFeatures {
 
     tablesWithUrls.forEach((tableEl) => {
       const rowEls = getTableRows(tableEl);
-      const thirdPartyRows = this._getThirdPartyRows(rowEls, this.json.finalUrl);
+      const thirdPartyRows = this._getThirdPartyRows(rowEls, Util.getFinalDisplayedUrl(this.json));
 
       // create input box
       const filterTemplate = this._dom.createComponent('3pFilter');
@@ -5683,13 +5715,13 @@ class ReportUIFeatures {
    * From a table with URL entries, finds the rows containing third-party URLs
    * and returns them.
    * @param {HTMLElement[]} rowEls
-   * @param {string} finalUrl
+   * @param {string} finalDisplayedUrl
    * @return {Array<HTMLElement>}
    */
-  _getThirdPartyRows(rowEls, finalUrl) {
+  _getThirdPartyRows(rowEls, finalDisplayedUrl) {
     /** @type {Array<HTMLElement>} */
     const thirdPartyRows = [];
-    const finalUrlRootDomain = Util.getRootDomain(finalUrl);
+    const finalDisplayedUrlRootDomain = Util.getRootDomain(finalDisplayedUrl);
 
     for (const rowEl of rowEls) {
       if (rowEl.classList.contains('lh-sub-item-row')) continue;
@@ -5699,7 +5731,7 @@ class ReportUIFeatures {
 
       const datasetUrl = urlItem.dataset.url;
       if (!datasetUrl) continue;
-      const isThirdParty = Util.getRootDomain(datasetUrl) !== finalUrlRootDomain;
+      const isThirdParty = Util.getRootDomain(datasetUrl) !== finalDisplayedUrlRootDomain;
       if (!isThirdParty) continue;
 
       thirdPartyRows.push(rowEl);
@@ -5713,7 +5745,10 @@ class ReportUIFeatures {
    */
   _saveFile(blob) {
     const ext = blob.type.match('json') ? '.json' : '.html';
-    const filename = getLhrFilenamePrefix(this.json) + ext;
+    const filename = getLhrFilenamePrefix({
+      finalDisplayedUrl: Util.getFinalDisplayedUrl(this.json),
+      fetchTime: this.json.fetchTime,
+    }) + ext;
     if (this._opts.onSaveFileOverride) {
       this._opts.onSaveFileOverride(blob, filename);
     } else {