lighthouse 9.5.0-dev.20230122 → 9.5.0-dev.20230124

package/report/renderer/crc-details-renderer.js

@@ -20,7 +20,7 @@
  * critical request chains network tree.
  */
 
-import {Util} from './util.js';
+import {Globals} from './report-globals.js';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
@@ -136,9 +136,10 @@ class CriticalRequestChainRenderer {
     if (!segment.hasChildren) {
       const {startTime, endTime, transferSize} = segment.node.request;
       const span = dom.createElement('span', 'lh-crc-node__chain-duration');
-      span.textContent = ' - ' + Util.i18n.formatMilliseconds((endTime - startTime) * 1000) + ', ';
+      span.textContent =
+        ' - ' + Globals.i18n.formatMilliseconds((endTime - startTime) * 1000) + ', ';
       const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
-      span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
+      span2.textContent = Globals.i18n.formatBytesToKiB(transferSize, 0.01);
 
       treevalEl.append(span, span2);
     }
@@ -177,11 +178,11 @@ class CriticalRequestChainRenderer {
     const containerEl = dom.find('.lh-crc', tmpl);
 
     // Fill in top summary.
-    dom.find('.lh-crc-initial-nav', tmpl).textContent = Util.i18n.strings.crcInitialNavigation;
+    dom.find('.lh-crc-initial-nav', tmpl).textContent = Globals.strings.crcInitialNavigation;
     dom.find('.lh-crc__longest_duration_label', tmpl).textContent =
-        Util.i18n.strings.crcLongestDurationLabel;
+        Globals.strings.crcLongestDurationLabel;
     dom.find('.lh-crc__longest_duration', tmpl).textContent =
-        Util.i18n.formatMilliseconds(details.longestChain.duration);
+        Globals.i18n.formatMilliseconds(details.longestChain.duration);
 
     // Construct visual tree.
     const root = CRCRenderer.initTree(details.chains);

package/report/renderer/details-renderer.js

@@ -25,9 +25,10 @@
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.ItemValue>} TableItemValue */
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.TableColumnHeading>} TableColumnHeading */
 
-import {Util} from './util.js';
+import {Util} from '../../shared/util.js';
 import {CriticalRequestChainRenderer} from './crc-details-renderer.js';
 import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
+import {Globals} from './report-globals.js';
 
 const URL_PREFIXES = ['http://', 'https://', 'data:'];
 
@@ -77,9 +78,9 @@ export class DetailsRenderer {
    */
   _renderBytes(details) {
     // TODO: handle displayUnit once we have something other than 'KiB'
-    const value = Util.i18n.formatBytesToKiB(details.value, details.granularity || 0.1);
+    const value = Globals.i18n.formatBytesToKiB(details.value, details.granularity || 0.1);
     const textEl = this._renderText(value);
-    textEl.title = Util.i18n.formatBytes(details.value);
+    textEl.title = Globals.i18n.formatBytes(details.value);
     return textEl;
   }
 
@@ -90,9 +91,9 @@ export class DetailsRenderer {
   _renderMilliseconds(details) {
     let value;
     if (details.displayUnit === 'duration') {
-      value = Util.i18n.formatDuration(details.value);
+      value = Globals.i18n.formatDuration(details.value);
     } else {
-      value = Util.i18n.formatMilliseconds(details.value, details.granularity || 10);
+      value = Globals.i18n.formatMilliseconds(details.value, details.granularity || 10);
     }
 
     return this._renderText(value);
@@ -171,7 +172,7 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderNumeric(details) {
-    const value = Util.i18n.formatNumber(details.value, details.granularity || 0.1);
+    const value = Globals.i18n.formatNumber(details.value, details.granularity || 0.1);
     const element = this._dom.createElement('div', 'lh-numeric');
     element.textContent = value;
     return element;

package/report/renderer/dom.js

@@ -20,7 +20,7 @@
 /** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 
-import {Util} from './util.js';
+import {Util} from '../../shared/util.js';
 import {createComponent} from './components.js';
 
 export class DOM {

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

@@ -10,6 +10,8 @@
  *   2. Display coords (DC suffix): that match the CSS pixel coordinate space of the LH report's page.
  */
 
+import {Globals} from './report-globals.js';
+
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {LH.Audit.Details.Rect} Rect */
 /** @typedef {{width: number, height: number}} Size */
@@ -22,8 +24,6 @@
  * @property {LH.Result.FullPageScreenshot} fullPageScreenshot
  */
 
-import {Util} from './util.js';
-
 /**
  * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
  * @param {LH.Audit.Details.Rect} rect
@@ -102,7 +102,7 @@ export class ElementScreenshotRenderer {
    */
   static renderClipPathInScreenshot(dom, maskEl, positionClip, elementRect, elementPreviewSize) {
     const clipPathEl = dom.find('clipPath', maskEl);
-    const clipId = `clip-${Util.getUniqueSuffix()}`;
+    const clipId = `clip-${Globals.getUniqueSuffix()}`;
     clipPathEl.id = clipId;
     maskEl.style.clipPath = `url(#${clipId})`;
 

package/report/renderer/{i18n.d.ts → i18n-formatter.d.ts}

@@ -1,16 +1,10 @@
-/**
- * @template T
- */
-export class I18n<T> {
+export class I18nFormatter {
     /**
      * @param {LH.Locale} locale
-     * @param {T} strings
      */
-    constructor(locale: LH.Locale, strings: T);
+    constructor(locale: LH.Locale);
     _locale: "en-US" | "en" | "en-AU" | "en-GB" | "en-IE" | "en-SG" | "en-ZA" | "en-IN" | "ar-XB" | "ar" | "bg" | "ca" | "cs" | "da" | "de" | "el" | "en-XL" | "es" | "es-419" | "es-AR" | "es-BO" | "es-BR" | "es-BZ" | "es-CL" | "es-CO" | "es-CR" | "es-CU" | "es-DO" | "es-EC" | "es-GT" | "es-HN" | "es-MX" | "es-NI" | "es-PA" | "es-PE" | "es-PR" | "es-PY" | "es-SV" | "es-US" | "es-UY" | "es-VE" | "fi" | "fil" | "fr" | "he" | "hi" | "hr" | "hu" | "gsw" | "id" | "in" | "it" | "iw" | "ja" | "ko" | "lt" | "lv" | "mo" | "nl" | "nb" | "no" | "pl" | "pt" | "pt-PT" | "ro" | "ru" | "sk" | "sl" | "sr" | "sr-Latn" | "sv" | "ta" | "te" | "th" | "tl" | "tr" | "uk" | "vi" | "zh" | "zh-HK" | "zh-TW";
-    _strings: T;
     _cachedNumberFormatters: Map<any, any>;
-    get strings(): T;
     /**
      * @param {number} number
      * @param {number|undefined} granularity
@@ -103,4 +97,4 @@ export class I18n<T> {
      */
     formatDuration(timeInMilliseconds: number): string;
 }
-//# sourceMappingURL=i18n.d.ts.map
+//# sourceMappingURL=i18n-formatter.d.ts.map

package/report/renderer/{i18n.js → i18n-formatter.js}

@@ -9,27 +9,18 @@ const NBSP2 = '\xa0';
 const KiB = 1024;
 const MiB = KiB * KiB;
 
-/**
- * @template T
- */
-export class I18n {
+export class I18nFormatter {
   /**
    * @param {LH.Locale} locale
-   * @param {T} strings
    */
-  constructor(locale, strings) {
+  constructor(locale) {
     // When testing, use a locale with more exciting numeric formatting.
     if (locale === 'en-XA') locale = 'de';
 
     this._locale = locale;
-    this._strings = strings;
     this._cachedNumberFormatters = new Map();
   }
 
-  get strings() {
-    return this._strings;
-  }
-
   /**
    * @param {number} number
    * @param {number|undefined} granularity

package/report/renderer/performance-category-renderer.js

@@ -17,8 +17,9 @@
 
 /** @typedef {import('./dom.js').DOM} DOM */
 
-import {Util} from './util.js';
 import {CategoryRenderer} from './category-renderer.js';
+import {ReportUtils} from './report-utils.js';
+import {Globals} from './report-globals.js';
 
 export class PerformanceCategoryRenderer extends CategoryRenderer {
   /**
@@ -29,7 +30,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     const tmpl = this.dom.createComponent('metric');
     const element = this.dom.find('.lh-metric', tmpl);
     element.id = audit.result.id;
-    const rating = Util.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
+    const rating = ReportUtils.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
     element.classList.add(`lh-metric--${rating}`);
 
     const titleEl = this.dom.find('.lh-metric__title', tmpl);
@@ -77,7 +78,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       this.dom.find('span.lh-audit__display-text, div.lh-audit__display-text', element);
     const sparklineWidthPct = `${details.overallSavingsMs / scale * 100}%`;
     this.dom.find('div.lh-sparkline__bar', element).style.width = sparklineWidthPct;
-    displayEl.textContent = Util.i18n.formatSeconds(details.overallSavingsMs, 0.01);
+    displayEl.textContent = Globals.i18n.formatSeconds(details.overallSavingsMs, 0.01);
 
     // Set [title] tooltips
     if (audit.result.displayValue) {
@@ -144,9 +145,9 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     });
     const paramPairs = [...metricPairs];
 
-    if (Util.reportJson) {
-      paramPairs.push(['device', Util.reportJson.configSettings.formFactor]);
-      paramPairs.push(['version', Util.reportJson.lighthouseVersion]);
+    if (Globals.reportJson) {
+      paramPairs.push(['device', Globals.reportJson.configSettings.formFactor]);
+      paramPairs.push(['version', Globals.reportJson.lighthouseVersion]);
     }
 
     const params = new URLSearchParams(paramPairs);
@@ -178,7 +179,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
    * @override
    */
   render(category, groups, options) {
-    const strings = Util.i18n.strings;
+    const strings = Globals.strings;
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
     element.append(this.renderCategoryHeader(category, groups, options));
@@ -190,7 +191,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
       // Metric descriptions toggle.
       const checkboxEl = this.dom.createElement('input', 'lh-metrics-toggle__input');
-      const checkboxId = `lh-metrics-toggle${Util.getUniqueSuffix()}`;
+      const checkboxId = `lh-metrics-toggle${Globals.getUniqueSuffix()}`;
       checkboxEl.setAttribute('aria-label', 'Toggle the display of metric descriptions');
       checkboxEl.type = 'checkbox';
       checkboxEl.id = checkboxId;
@@ -200,8 +201,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       labelEl.htmlFor = checkboxId;
       const showEl = this.dom.createChildOf(labelEl, 'span', 'lh-metrics-toggle__labeltext--show');
       const hideEl = this.dom.createChildOf(labelEl, 'span', 'lh-metrics-toggle__labeltext--hide');
-      showEl.textContent = Util.i18n.strings.expandView;
-      hideEl.textContent = Util.i18n.strings.collapseView;
+      showEl.textContent = Globals.strings.expandView;
+      hideEl.textContent = Globals.strings.collapseView;
 
       const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
       metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
@@ -240,7 +241,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     // Opportunities
     const opportunityAudits = category.auditRefs
         .filter(audit => this._classifyPerformanceAudit(audit) === 'load-opportunity')
-        .filter(audit => !Util.showAsPassed(audit.result))
+        .filter(audit => !ReportUtils.showAsPassed(audit.result))
         .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
 
     const filterableMetrics = metricAudits.filter(a => !!a.relevantAudits);
@@ -274,7 +275,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     // Diagnostics
     const diagnosticAudits = category.auditRefs
         .filter(audit => this._classifyPerformanceAudit(audit) === 'diagnostic')
-        .filter(audit => !Util.showAsPassed(audit.result))
+        .filter(audit => !ReportUtils.showAsPassed(audit.result))
         .sort((a, b) => {
           const scoreA = a.result.scoreDisplayMode === 'informative' ? 100 : Number(a.result.score);
           const scoreB = b.result.scoreDisplayMode === 'informative' ? 100 : Number(b.result.score);
@@ -290,7 +291,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Passed audits
     const passedAudits = category.auditRefs
-        .filter(audit => this._classifyPerformanceAudit(audit) && Util.showAsPassed(audit.result));
+        .filter(audit =>
+          this._classifyPerformanceAudit(audit) && ReportUtils.showAsPassed(audit.result));
 
     if (!passedAudits.length) return element;
 
@@ -333,7 +335,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
   renderMetricAuditFilter(filterableMetrics, categoryEl) {
     const metricFilterEl = this.dom.createElement('div', 'lh-metricfilter');
     const textEl = this.dom.createChildOf(metricFilterEl, 'span', 'lh-metricfilter__text');
-    textEl.textContent = Util.i18n.strings.showRelevantAudits;
+    textEl.textContent = Globals.strings.showRelevantAudits;
 
     const filterChoices = /** @type {LH.ReportResult.AuditRef[]} */ ([
       ({acronym: 'All'}),
@@ -342,7 +344,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Form labels need to reference unique IDs, but multiple reports rendered in the same DOM (eg PSI)
     // would mean ID conflict.  To address this, we 'scope' these radio inputs with a unique suffix.
-    const uniqSuffix = Util.getUniqueSuffix();
+    const uniqSuffix = Globals.getUniqueSuffix();
     for (const metric of filterChoices) {
       const elemId = `metric-${metric.acronym}-${uniqSuffix}`;
       const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio');

package/report/renderer/pwa-category-renderer.js

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import {Util} from './util.js';
 import {CategoryRenderer} from './category-renderer.js';
+import {ReportUtils} from './report-utils.js';
+import {Globals} from './report-globals.js';
 
 export class PwaCategoryRenderer extends CategoryRenderer {
   /**
@@ -101,7 +102,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
 
     // Remove any that have a failing audit.
     for (const auditRef of auditRefs) {
-      if (!Util.showAsPassed(auditRef.result) && auditRef.group) {
+      if (!ReportUtils.showAsPassed(auditRef.result) && auditRef.group) {
         uniqueGroupIds.delete(auditRef.group);
       }
     }
@@ -122,7 +123,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     for (const groupId of groupIds) {
       const groupAuditRefs = auditRefs.filter(ref => ref.group === groupId);
       const auditCount = groupAuditRefs.length;
-      const passedCount = groupAuditRefs.filter(ref => Util.showAsPassed(ref.result)).length;
+      const passedCount = groupAuditRefs.filter(ref => ReportUtils.showAsPassed(ref.result)).length;
 
       const title = groupDefinitions[groupId].title;
       tips.push(`${title}: ${passedCount}/${auditCount}`);
@@ -162,7 +163,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     const defsEl = svgRoot.querySelector('defs');
     if (!defsEl) return;
 
-    const idSuffix = Util.getUniqueSuffix();
+    const idSuffix = Globals.getUniqueSuffix();
     const elementsToUpdate = defsEl.querySelectorAll('[id]');
     for (const el of elementsToUpdate) {
       const oldId = el.id;

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

@@ -0,0 +1,21 @@
+export type I18nFormatter = import('./i18n-formatter').I18nFormatter;
+export class Globals {
+    /** @type {I18nFormatter} */
+    static i18n: I18nFormatter;
+    /** @type {typeof UIStrings} */
+    static strings: typeof UIStrings;
+    /** @type {LH.ReportResult | null} */
+    static reportJson: LH.ReportResult | null;
+    /**
+     * @param {{providedStrings: Record<string, string>; i18n: I18nFormatter; reportJson: LH.ReportResult | null}} options
+     */
+    static apply(options: {
+        providedStrings: Record<string, string>;
+        i18n: I18nFormatter;
+        reportJson: LH.ReportResult | null;
+    }): void;
+    static getUniqueSuffix(): number;
+    static resetUniqueSuffix(): void;
+}
+import { UIStrings } from "./report-utils.js";
+//# sourceMappingURL=report-globals.d.ts.map

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

@@ -23,11 +23,11 @@
 import {CategoryRenderer} from './category-renderer.js';
 import {DetailsRenderer} from './details-renderer.js';
 import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
-import {I18n} from './i18n.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.i18n.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.i18n.strings.runtimeSettingsBenchmark}: ${benchmarkIndex}`,
-      `${Util.i18n.strings.runtimeSettingsCPUThrottling}: ${envValues.cpuThrottling}`,
+      `${Globals.strings.runtimeSettingsBenchmark}: ${benchmarkIndex}`,
+      `${Globals.strings.runtimeSettingsCPUThrottling}: ${envValues.cpuThrottling}`,
     ];
     if (envValues.screenEmulation) {
       devicesTooltipTextLines.push(
-        `${Util.i18n.strings.runtimeSettingsScreenEmulation}: ${envValues.screenEmulation}`);
+        `${Globals.strings.runtimeSettingsScreenEmulation}: ${envValues.screenEmulation}`);
     }
     if (axeVersion) {
-      devicesTooltipTextLines.push(`${Util.i18n.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.i18n.strings.runtimeSingleLoad,
-        Util.i18n.strings.runtimeSingleLoadTooltip],
+        Globals.strings.runtimeSingleLoad,
+        Globals.strings.runtimeSingleLoadTooltip],
       ['stopwatch',
-        Util.i18n.strings.runtimeAnalysisWindow],
+        Globals.strings.runtimeAnalysisWindow],
       ['networkspeed',
         `${envValues.summary}`,
-        `${Util.i18n.strings.runtimeSettingsNetworkThrottling}: ${envValues.networkThrottling}`],
+        `${Globals.strings.runtimeSettingsNetworkThrottling}: ${envValues.networkThrottling}`],
       ['chrome',
         `Using ${chromeVer}` + (channel ? ` with ${channel}` : ''),
-        `${Util.i18n.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.i18n.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,13 +260,11 @@ export class ReportRenderer {
    * @return {!DocumentFragment}
    */
   _renderReport(report) {
-    const i18n = new I18n(report.configSettings.locale, {
-      // Set missing renderer strings to default (english) values.
-      ...Util.UIStrings,
-      ...report.i18n.rendererFormattedStrings,
+    Globals.apply({
+      providedStrings: report.i18n.rendererFormattedStrings,
+      i18n: new I18nFormatter(report.configSettings.locale),
+      reportJson: report,
     });
-    Util.i18n = i18n;
-    Util.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.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];
     }
   }
 
@@ -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.i18n.strings.thirdPartyResourcesLabel;
+          Globals.strings.thirdPartyResourcesLabel;
 
       const allThirdParty = thirdPartyRows.length === rowEls.length;
       const allFirstParty = !thirdPartyRows.length;