lighthouse 9.5.0-dev.20230123 → 9.5.0-dev.20230125

package/report/renderer/report-globals.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * 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.
+ */
+
+import {UIStrings} from './report-utils.js';
+
+/** @typedef {import('./i18n-formatter').I18nFormatter} I18nFormatter */
+
+let svgSuffix = 0;
+
+class Globals {
+  /** @type {I18nFormatter} */
+  // @ts-expect-error: Set in report renderer.
+  static i18n = null;
+
+  /** @type {typeof UIStrings} */
+  // @ts-expect-error: Set in report renderer.
+  static strings = {};
+
+  /** @type {LH.ReportResult | null} */
+  static reportJson = null;
+
+  /**
+   * @param {{providedStrings: Record<string, string>; i18n: I18nFormatter; reportJson: LH.ReportResult | null}} options
+   */
+  static apply(options) {
+    Globals.strings = {
+      // Set missing renderer strings to default (english) values.
+      ...UIStrings,
+      ...options.providedStrings,
+    };
+    Globals.i18n = options.i18n;
+    Globals.reportJson = options.reportJson;
+  }
+
+  static getUniqueSuffix() {
+    return svgSuffix++;
+  }
+
+  static resetUniqueSuffix() {
+    svgSuffix = 0;
+  }
+}
+
+export {
+  Globals,
+};

package/report/renderer/report-renderer.js

@@ -26,8 +26,8 @@ import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
 import {I18nFormatter} from './i18n-formatter.js';
 import {PerformanceCategoryRenderer} from './performance-category-renderer.js';
 import {PwaCategoryRenderer} from './pwa-category-renderer.js';
-import {Util} from './util.js';
-
+import {ReportUtils} from './report-utils.js';
+import {Globals} from './report-globals.js';
 
 export class ReportRenderer {
   /**
@@ -67,7 +67,7 @@ export class ReportRenderer {
 
     this._dom.setLighthouseChannel(lhr.configSettings.channel || 'unknown');
 
-    const report = Util.prepareReportResult(lhr);
+    const report = ReportUtils.prepareReportResult(lhr);
 
     this._dom.rootEl.textContent = ''; // Remove previous report.
     this._dom.rootEl.append(this._renderReport(report));
@@ -108,7 +108,7 @@ export class ReportRenderer {
 
     this._renderMetaBlock(report, footer);
 
-    this._dom.find('.lh-footer__version_issue', footer).textContent = Util.strings.footerIssue;
+    this._dom.find('.lh-footer__version_issue', footer).textContent = Globals.strings.footerIssue;
     this._dom.find('.lh-footer__version', footer).textContent = report.lighthouseVersion;
     return footer;
   }
@@ -118,7 +118,7 @@ export class ReportRenderer {
    * @param {DocumentFragment} footer
    */
   _renderMetaBlock(report, footer) {
-    const envValues = Util.getEmulationDescriptions(report.configSettings || {});
+    const envValues = ReportUtils.getEmulationDescriptions(report.configSettings || {});
     const match = report.userAgent.match(/(\w*Chrome\/[\d.]+)/); // \w* to include 'HeadlessChrome'
     const chromeVer = Array.isArray(match)
       ? match[1].replace('/', ' ').replace('Chrome', 'Chromium')
@@ -128,35 +128,35 @@ export class ReportRenderer {
     const axeVersion = report.environment.credits?.['axe-core'];
 
     const devicesTooltipTextLines = [
-      `${Util.strings.runtimeSettingsBenchmark}: ${benchmarkIndex}`,
-      `${Util.strings.runtimeSettingsCPUThrottling}: ${envValues.cpuThrottling}`,
+      `${Globals.strings.runtimeSettingsBenchmark}: ${benchmarkIndex}`,
+      `${Globals.strings.runtimeSettingsCPUThrottling}: ${envValues.cpuThrottling}`,
     ];
     if (envValues.screenEmulation) {
       devicesTooltipTextLines.push(
-        `${Util.strings.runtimeSettingsScreenEmulation}: ${envValues.screenEmulation}`);
+        `${Globals.strings.runtimeSettingsScreenEmulation}: ${envValues.screenEmulation}`);
     }
     if (axeVersion) {
-      devicesTooltipTextLines.push(`${Util.strings.runtimeSettingsAxeVersion}: ${axeVersion}`);
+      devicesTooltipTextLines.push(`${Globals.strings.runtimeSettingsAxeVersion}: ${axeVersion}`);
     }
 
     // [CSS icon class, textContent, tooltipText]
     const metaItems = [
       ['date',
-        `Captured at ${Util.i18n.formatDateTime(report.fetchTime)}`],
+        `Captured at ${Globals.i18n.formatDateTime(report.fetchTime)}`],
       ['devices',
         `${envValues.deviceEmulation} with Lighthouse ${report.lighthouseVersion}`,
         devicesTooltipTextLines.join('\n')],
       ['samples-one',
-        Util.strings.runtimeSingleLoad,
-        Util.strings.runtimeSingleLoadTooltip],
+        Globals.strings.runtimeSingleLoad,
+        Globals.strings.runtimeSingleLoadTooltip],
       ['stopwatch',
-        Util.strings.runtimeAnalysisWindow],
+        Globals.strings.runtimeAnalysisWindow],
       ['networkspeed',
         `${envValues.summary}`,
-        `${Util.strings.runtimeSettingsNetworkThrottling}: ${envValues.networkThrottling}`],
+        `${Globals.strings.runtimeSettingsNetworkThrottling}: ${envValues.networkThrottling}`],
       ['chrome',
         `Using ${chromeVer}` + (channel ? ` with ${channel}` : ''),
-        `${Util.strings.runtimeSettingsUANetwork}: "${report.environment.networkUserAgent}"`],
+        `${Globals.strings.runtimeSettingsUANetwork}: "${report.environment.networkUserAgent}"`],
     ];
 
     const metaItemsEl = this._dom.find('.lh-meta__items', footer);
@@ -184,7 +184,7 @@ export class ReportRenderer {
 
     const container = this._dom.createComponent('warningsToplevel');
     const message = this._dom.find('.lh-warnings__msg', container);
-    message.textContent = Util.strings.toplevelWarningsMessage;
+    message.textContent = Globals.strings.toplevelWarningsMessage;
 
     const warnings = [];
     for (const warningString of report.runWarnings) {
@@ -238,7 +238,7 @@ export class ReportRenderer {
       }
 
 
-      if (Util.isPluginCategory(category.id)) {
+      if (ReportUtils.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
       } else if (renderer.renderCategoryScore === categoryRenderer.renderCategoryScore) {
         // The renderer for default categories is just the default CategoryRenderer.
@@ -260,9 +260,11 @@ export class ReportRenderer {
    * @return {!DocumentFragment}
    */
   _renderReport(report) {
-    Util.applyStrings(report.i18n.rendererFormattedStrings);
-    Util.i18n = new I18nFormatter(report.configSettings.locale);
-    Util.reportJson = report;
+    Globals.apply({
+      providedStrings: report.i18n.rendererFormattedStrings,
+      i18n: new I18nFormatter(report.configSettings.locale),
+      reportJson: report,
+    });
 
     const detailsRenderer = new DetailsRenderer(this._dom, {
       fullPageScreenshot: report.fullPageScreenshot ?? undefined,

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

@@ -26,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
@@ -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.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.strings.viewOriginalTraceLabel :
-          Util.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.strings} */ (i18nKey);
-      node.textContent = Util.strings[i18nAttr];
+      const i18nAttr = /** @type {keyof typeof Globals.strings} */ (i18nKey);
+      node.textContent = Globals.strings[i18nAttr];
     }
   }
 
@@ -273,7 +274,7 @@ export class ReportUIFeatures {
       this._dom.find('.lh-3p-filter-count', filterTemplate).textContent =
           `${thirdPartyRows.length}`;
       this._dom.find('.lh-3p-ui-string', filterTemplate).textContent =
-          Util.strings.thirdPartyResourcesLabel;
+          Globals.strings.thirdPartyResourcesLabel;
 
       const allThirdParty = thirdPartyRows.length === rowEls.length;
       const allFirstParty = !thirdPartyRows.length;

package/report/renderer/report-utils.d.ts

@@ -0,0 +1,116 @@
+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} result
+     * @return {LH.ReportResult}
+     */
+    static prepareReportResult(result: LH.Result): LH.ReportResult;
+    /**
+     * @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