lighthouse 9.6.7 → 10.0.0

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

@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-'use strict';
 
 /**
  * @fileoverview Adds tools button, print, and other dynamic functionality to
@@ -27,8 +26,9 @@ import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
 import {toggleDarkTheme} from './features-util.js';
 import {openTreemap} from './open-tab.js';
 import {TopbarFeatures} from './topbar-features.js';
-import {Util} from './util.js';
+import {Util} from '../../shared/util.js';
 import {getLhrFilenamePrefix} from '../generator/file-namer.js';
+import {Globals} from './report-globals.js';
 
 /**
  * @param {HTMLTableElement} tableEl
@@ -61,6 +61,7 @@ export class ReportUIFeatures {
    */
   initFeatures(lhr) {
     this.json = lhr;
+    this._fullPageScreenshot = Util.getFullPageScreenshot(lhr);
 
     if (this._topbar) {
       this._topbar.enable(lhr);
@@ -106,7 +107,7 @@ export class ReportUIFeatures {
       this.json.audits['script-treemap-data'] && this.json.audits['script-treemap-data'].details;
     if (showTreemapApp) {
       this.addButton({
-        text: Util.i18n.strings.viewTreemapLabel,
+        text: Globals.strings.viewTreemapLabel,
         icon: 'treemap',
         onClick: () => openTreemap(this.json),
       });
@@ -115,8 +116,8 @@ export class ReportUIFeatures {
     if (this._opts.onViewTrace) {
       this.addButton({
         text: lhr.configSettings.throttlingMethod === 'simulate' ?
-          Util.i18n.strings.viewOriginalTraceLabel :
-          Util.i18n.strings.viewTraceLabel,
+          Globals.strings.viewOriginalTraceLabel :
+          Globals.strings.viewTraceLabel,
         onClick: () => this._opts.onViewTrace?.(),
       });
     }
@@ -127,11 +128,11 @@ export class ReportUIFeatures {
 
     // Fill in all i18n data.
     for (const node of this._dom.findAll('[data-i18n]', this._dom.rootEl)) {
-      // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
+      // These strings are guaranteed to (at least) have a default English string in UIStrings,
       // so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
       const i18nKey = node.getAttribute('data-i18n');
-      const i18nAttr = /** @type {keyof typeof Util.i18n.strings} */ (i18nKey);
-      node.textContent = Util.i18n.strings[i18nAttr];
+      const i18nAttr = /** @type {keyof typeof Globals.strings} */ (i18nKey);
+      node.textContent = Globals.strings[i18nAttr];
     }
   }
 
@@ -243,7 +244,9 @@ export class ReportUIFeatures {
 
     tablesWithUrls.forEach((tableEl) => {
       const rowEls = getTableRows(tableEl);
-      const thirdPartyRows = this._getThirdPartyRows(rowEls, this.json.finalUrl);
+      const primaryRowEls = rowEls.filter(rowEl => !rowEl.classList.contains('lh-sub-item-row'));
+      const thirdPartyRowEls = this._getThirdPartyRows(
+        primaryRowEls, Util.getFinalDisplayedUrl(this.json));
 
       // create input box
       const filterTemplate = this._dom.createComponent('3pFilter');
@@ -252,9 +255,9 @@ export class ReportUIFeatures {
       filterInput.addEventListener('change', e => {
         const shouldHideThirdParty = e.target instanceof HTMLInputElement && !e.target.checked;
         let even = true;
-        let rowEl = rowEls[0];
+        let rowEl = primaryRowEls[0];
         while (rowEl) {
-          const shouldHide = shouldHideThirdParty && thirdPartyRows.includes(rowEl);
+          const shouldHide = shouldHideThirdParty && thirdPartyRowEls.includes(rowEl);
 
           // Iterate subsequent associated sub item rows.
           do {
@@ -271,12 +274,12 @@ export class ReportUIFeatures {
       });
 
       this._dom.find('.lh-3p-filter-count', filterTemplate).textContent =
-          `${thirdPartyRows.length}`;
+          `${thirdPartyRowEls.length}`;
       this._dom.find('.lh-3p-ui-string', filterTemplate).textContent =
-          Util.i18n.strings.thirdPartyResourcesLabel;
+          Globals.strings.thirdPartyResourcesLabel;
 
-      const allThirdParty = thirdPartyRows.length === rowEls.length;
-      const allFirstParty = !thirdPartyRows.length;
+      const allThirdParty = thirdPartyRowEls.length === primaryRowEls.length;
+      const allFirstParty = !thirdPartyRowEls.length;
 
       // If all or none of the rows are 3rd party, hide the control.
       if (allThirdParty || allFirstParty) {
@@ -300,18 +303,13 @@ export 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,
     });
   }
 
@@ -319,29 +317,33 @@ 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) {
-    /** @type {Array<HTMLElement>} */
-    const thirdPartyRows = [];
-    const finalUrlRootDomain = Util.getRootDomain(finalUrl);
+  _getThirdPartyRows(rowEls, finalDisplayedUrl) {
+    const finalDisplayedUrlRootDomain = Util.getRootDomain(finalDisplayedUrl);
+    const firstPartyEntityName = this.json.entities?.find(e => e.isFirstParty === true)?.name;
 
+    /** @type {Array<HTMLElement>} */
+    const thirdPartyRowEls = [];
     for (const rowEl of rowEls) {
-      if (rowEl.classList.contains('lh-sub-item-row')) continue;
-
-      const urlItem = rowEl.querySelector('div.lh-text__url');
-      if (!urlItem) continue;
-
-      const datasetUrl = urlItem.dataset.url;
-      if (!datasetUrl) continue;
-      const isThirdParty = Util.getRootDomain(datasetUrl) !== finalUrlRootDomain;
-      if (!isThirdParty) continue;
+      if (firstPartyEntityName) {
+        // We rely on entity-classification for new LHRs that support it.
+        if (!rowEl.dataset.entity || rowEl.dataset.entity === firstPartyEntityName) continue;
+      } else {
+        // Without 10.0's entity classification, fallback to the older root domain-based filtering.
+        const urlItem = rowEl.querySelector('div.lh-text__url');
+        if (!urlItem) continue;
+        const datasetUrl = urlItem.dataset.url;
+        if (!datasetUrl) continue;
+        const isThirdParty = Util.getRootDomain(datasetUrl) !== finalDisplayedUrlRootDomain;
+        if (!isThirdParty) continue;
+      }
 
-      thirdPartyRows.push(rowEl);
+      thirdPartyRowEls.push(rowEl);
     }
 
-    return thirdPartyRows;
+    return thirdPartyRowEls;
   }
 
   /**
@@ -349,7 +351,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/report-utils.d.ts

@@ -0,0 +1,129 @@
+export class ReportUtils {
+    /**
+     * 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
+     * compatible with current renderer.
+     * The LHR passed in is not mutated.
+     * TODO(team): we all agree the LHR shape change is technical debt we should fix
+     * @param {LH.Result} lhr
+     * @return {LH.ReportResult}
+     */
+    static prepareReportResult(lhr: LH.Result): LH.ReportResult;
+    /**
+     * Given an audit's details, identify and return a URL locator function that
+     * can be called later with an `item` to extract the URL of it.
+     * @param {LH.FormattedIcu<LH.Audit.Details.TableColumnHeading[]>} headings
+     * @return {{(item: LH.FormattedIcu<LH.Audit.Details.TableItem>): string|undefined}=}
+     */
+    static getUrlLocatorFn(headings: LH.FormattedIcu<LH.Audit.Details.TableColumnHeading[]>): ((item: LH.FormattedIcu<LH.Audit.Details.TableItem>) => string | undefined) | undefined;
+    /**
+     * Mark TableItems/OpportunityItems with entity names.
+     * @param {LH.Result.Entities|undefined} entities
+     * @param {import('../../types/lhr/audit-result').Result} audit
+     */
+    static classifyEntities(entities: LH.Result.Entities | undefined, audit: import('../../types/lhr/audit-result').Result): void;
+    /**
+     * @param {LH.Result['configSettings']} settings
+     * @return {!{deviceEmulation: string, screenEmulation?: string, networkThrottling: string, cpuThrottling: string, summary: string}}
+     */
+    static getEmulationDescriptions(settings: LH.Result['configSettings']): {
+        deviceEmulation: string;
+        screenEmulation?: string | undefined;
+        networkThrottling: string;
+        cpuThrottling: string;
+        summary: string;
+    };
+    /**
+     * Used to determine if the "passed" for the purposes of showing up in the "failed" or "passed"
+     * sections of the report.
+     *
+     * @param {{score: (number|null), scoreDisplayMode: string}} audit
+     * @return {boolean}
+     */
+    static showAsPassed(audit: {
+        score: (number | null);
+        scoreDisplayMode: string;
+    }): boolean;
+    /**
+     * Convert a score to a rating label.
+     * TODO: Return `'error'` for `score === null && !scoreDisplayMode`.
+     *
+     * @param {number|null} score
+     * @param {string=} scoreDisplayMode
+     * @return {string}
+     */
+    static calculateRating(score: number | null, scoreDisplayMode?: string | undefined): string;
+    /**
+     * @param {LH.ReportResult.Category} category
+     */
+    static calculateCategoryFraction(category: LH.ReportResult.Category): {
+        numPassed: number;
+        numPassableAudits: number;
+        numInformative: number;
+        totalWeight: number;
+    };
+    /**
+     * @param {string} categoryId
+     */
+    static isPluginCategory(categoryId: string): boolean;
+    /**
+     * @param {LH.Result.GatherMode} gatherMode
+     */
+    static shouldDisplayAsFraction(gatherMode: LH.Result.GatherMode): boolean;
+}
+export namespace UIStrings {
+    const varianceDisclaimer: string;
+    const calculatorLink: string;
+    const showRelevantAudits: string;
+    const opportunityResourceColumnLabel: string;
+    const opportunitySavingsColumnLabel: string;
+    const errorMissingAuditInfo: string;
+    const errorLabel: string;
+    const warningHeader: string;
+    const warningAuditsGroupTitle: string;
+    const passedAuditsGroupTitle: string;
+    const notApplicableAuditsGroupTitle: string;
+    const manualAuditsGroupTitle: string;
+    const toplevelWarningsMessage: string;
+    const crcInitialNavigation: string;
+    const crcLongestDurationLabel: string;
+    const snippetExpandButtonLabel: string;
+    const snippetCollapseButtonLabel: string;
+    const lsPerformanceCategoryDescription: string;
+    const labDataTitle: string;
+    const thirdPartyResourcesLabel: string;
+    const viewTreemapLabel: string;
+    const viewTraceLabel: string;
+    const viewOriginalTraceLabel: string;
+    const dropdownPrintSummary: string;
+    const dropdownPrintExpanded: string;
+    const dropdownCopyJSON: string;
+    const dropdownSaveHTML: string;
+    const dropdownSaveJSON: string;
+    const dropdownViewer: string;
+    const dropdownSaveGist: string;
+    const dropdownDarkTheme: string;
+    const runtimeSettingsDevice: string;
+    const runtimeSettingsNetworkThrottling: string;
+    const runtimeSettingsCPUThrottling: string;
+    const runtimeSettingsUANetwork: string;
+    const runtimeSettingsBenchmark: string;
+    const runtimeSettingsAxeVersion: string;
+    const runtimeSettingsScreenEmulation: string;
+    const footerIssue: string;
+    const runtimeNoEmulation: string;
+    const runtimeMobileEmulation: string;
+    const runtimeDesktopEmulation: string;
+    const runtimeUnknown: string;
+    const runtimeSingleLoad: string;
+    const runtimeAnalysisWindow: string;
+    const runtimeSingleLoadTooltip: string;
+    const throttlingProvided: string;
+    const show: string;
+    const hide: string;
+    const expandView: string;
+    const collapseView: string;
+    const runtimeSlow4g: string;
+    const runtimeCustom: string;
+}
+//# sourceMappingURL=report-utils.d.ts.map