lighthouse 9.5.0-dev.20221003 → 9.5.0-dev.20221004

package/flow-report/src/summary/category.tsx

@@ -157,8 +157,8 @@ const SummaryCategory: FunctionComponent<{
   category: LH.ReportResult.Category|undefined,
   href: string,
   gatherMode: LH.Result.GatherMode,
-  finalUrl: string,
-}> = ({category, href, gatherMode, finalUrl}) => {
+  finalDisplayedUrl: string,
+}> = ({category, href, gatherMode, finalDisplayedUrl}) => {
   return (
     <div className="SummaryCategory">
       {
@@ -169,7 +169,7 @@ const SummaryCategory: FunctionComponent<{
               href={href}
               gatherMode={gatherMode}
             />
-            <SummaryTooltip category={category} gatherMode={gatherMode} url={finalUrl}/>
+            <SummaryTooltip category={category} gatherMode={gatherMode} url={finalDisplayedUrl}/>
           </div> :
           <div className="SummaryCategory__null" data-testid="SummaryCategory__null"/>
       }

package/flow-report/src/summary/summary.tsx

@@ -23,7 +23,7 @@ const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) =>
     <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
       <FlowSegment/>
       <div className="SummaryNavigationHeader__url">
-        <a rel="noopener" target="_blank" href={lhr.finalUrl}>{lhr.finalUrl}</a>
+        <a rel="noopener" target="_blank" href={lhr.finalDisplayedUrl}>{lhr.finalDisplayedUrl}</a>
       </div>
       <div className="SummaryNavigationHeader__category">
         {strings.categoryPerformance}
@@ -76,7 +76,7 @@ const SummaryFlowStep: FunctionComponent<{
             category={reportResult.categories[c]}
             href={`#index=${hashIndex}&anchor=${c}`}
             gatherMode={lhr.gatherMode}
-            finalUrl={lhr.finalUrl}
+            finalDisplayedUrl={lhr.finalDisplayedUrl}
           />
         ))
       }

package/package.json

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

package/report/generator/file-namer.js

@@ -35,11 +35,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);
 }
 

package/report/generator/report-generator.js

@@ -101,7 +101,7 @@ class ReportGenerator {
 
     const rows = [];
     const topLevelKeys = /** @type {const} */(
-      ['requestedUrl', 'finalUrl', 'fetchTime', 'gatherMode']);
+      ['requestedUrl', 'finalDisplayedUrl', 'fetchTime', 'gatherMode']);
 
     // First we have metadata about the LHR.
     rows.push(rowFormatter(topLevelKeys));

package/report/renderer/element-screenshot-renderer.js

@@ -239,7 +239,12 @@ export 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,

package/report/renderer/open-tab.js

@@ -37,7 +37,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}`;
 }
 
 /**
@@ -119,7 +119,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'],
       },

package/report/renderer/report-renderer.js

@@ -82,9 +82,9 @@ export 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;
   }
 

package/report/renderer/report-ui-features.js

@@ -242,7 +242,7 @@ export 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');
@@ -318,13 +318,13 @@ export 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;
@@ -334,7 +334,7 @@ export 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);
@@ -348,7 +348,10 @@ export 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 {

package/report/renderer/util.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).

package/report/test/generator/file-namer-test.js

@@ -12,7 +12,7 @@ import {getLhrFilenamePrefix} from '../../generator/file-namer.js';
 describe('file-namer helper', () => {
   it('generates filename prefixes', () => {
     const results = {
-      finalUrl: 'https://testexample.com',
+      finalDisplayedUrl: 'https://testexample.com',
       fetchTime: '2017-01-06T02:34:56.217Z',
     };
     const str = getLhrFilenamePrefix(results);

package/report/test/generator/report-generator-test.js

@@ -90,7 +90,7 @@ describe('ReportGenerator', () => {
       const lines = csvOutput.split('\n');
       expect(lines.length).toBeGreaterThan(100);
       expect(lines.slice(0, 15).join('\n')).toMatchInlineSnapshot(`
-"\\"requestedUrl\\",\\"finalUrl\\",\\"fetchTime\\",\\"gatherMode\\"
+"\\"requestedUrl\\",\\"finalDisplayedUrl\\",\\"fetchTime\\",\\"gatherMode\\"
 \\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"2021-09-07T20:11:11.853Z\\",\\"navigation\\"
 
 category,score

package/report/test/renderer/report-renderer-test.js

@@ -71,7 +71,10 @@ describe('ReportRenderer', () => {
 
     it('renders a topbar', () => {
       const topbar = renderer._renderReportTopbar(sampleResults);
-      assert.equal(topbar.querySelector('.lh-topbar__url').textContent, sampleResults.finalUrl);
+      assert.equal(
+        topbar.querySelector('.lh-topbar__url').textContent,
+        sampleResults.finalDisplayedUrl
+      );
     });
 
     it('renders a header', () => {

package/report/test/renderer/report-ui-features-test.js

@@ -107,7 +107,7 @@ describe('ReportUIFeatures', () => {
 
       before(() => {
         const lhr = JSON.parse(JSON.stringify(sampleResults));
-        lhr.requestedUrl = lhr.finalUrl = 'http://www.example.com';
+        lhr.requestedUrl = lhr.finalDisplayedUrl = 'http://www.example.com';
         const webpAuditItemTemplate = {
           ...sampleResults.audits['modern-image-formats'].details.items[0],
           wastedBytes: 8.8 * 1024,

package/types/artifacts.d.ts

@@ -188,8 +188,6 @@ declare module Artifacts {
   type MetaElement = Artifacts['MetaElements'][0];
 
   interface URL {
-    /** URL of the main frame before Lighthouse starts. */
-    initialUrl: string;
     /**
      * URL of the initially requested URL during a Lighthouse navigation.
      * Will be `undefined` in timespan/snapshot.
@@ -200,12 +198,8 @@ declare module Artifacts {
      * Will be `undefined` in timespan/snapshot.
      */
     mainDocumentUrl?: string;
-    /**
-     * Will be the same as `mainDocumentUrl` in navigation mode.
-     * Wil be the URL of the main frame after Lighthouse finishes in timespan/snapshot.
-     * TODO: Use the main frame URL in navigation mode as well.
-     */
-    finalUrl: string;
+    /** URL displayed on the page after Lighthouse finishes. */
+    finalDisplayedUrl: string;
   }
 
   interface NodeDetails {

package/types/lhr/lhr.d.ts

@@ -15,8 +15,15 @@ interface Result {
   gatherMode: Result.GatherMode;
   /** The URL that Lighthouse initially navigated to. Will be `undefined` in timespan/snapshot. */
   requestedUrl?: string;
-  /** The post-redirects URL that Lighthouse loaded. */
-  finalUrl: string;
+  /** URL of the last document request during a Lighthouse navigation. Will be `undefined` in timespan/snapshot. */
+  mainDocumentUrl?: string;
+  /**
+   * For historical reasons, this will always be the same as `mainDocumentUrl`.
+   * @deprecated
+   */
+  finalUrl?: string;
+  /** The URL displayed on the page after Lighthouse finishes. */
+  finalDisplayedUrl: string;
   /** The ISO-8601 timestamp of when the results were generated. */
   fetchTime: string;
   /** The version of Lighthouse with which these results were generated. */

package/types/lhr/treemap.d.ts

@@ -10,7 +10,9 @@ import {Locale} from './settings';
 declare module Treemap {
   interface Options {
     lhr: {
-      finalUrl: string;
+      mainDocumentUrl?: string;
+      finalUrl?: string;
+      finalDisplayedUrl: string;
       audits: {
         'script-treemap-data': AuditResult;
       };

package/types/smokehouse.d.ts

@@ -13,7 +13,7 @@ declare global {
     interface ExpectedLHR {
       audits: Record<string, any>;
       requestedUrl: string;
-      finalUrl: string | RegExp;
+      finalDisplayedUrl: string | RegExp;
       userAgent?: string | RegExp;
       runWarnings?: any;
       runtimeError?: {