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

package/flow-report/src/common.tsx

@@ -9,7 +9,7 @@ import {useEffect, useState} from 'preact/hooks';
 
 import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
 import {getFilmstripFrames, getScreenDimensions} from './util';
-import {Util} from '../../report/renderer/util.js';
+import {Util} from '../../shared/util.js';
 
 const ANIMATION_FRAME_DURATION_MS = 500;
 

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

@@ -12,11 +12,12 @@ import {I18nFormatter} from '../../../report/renderer/i18n-formatter';
 import {UIStrings} from './ui-strings';
 import {useFlowResult} from '../util';
 import strings from './localized-strings.js';
-import {Util} from '../../../report/renderer/util';
+import {UIStrings as ReportUIStrings} from '../../../report/renderer/report-utils.js';
+import {Globals} from '../../../report/renderer/report-globals.js';
 
 const I18nContext = createContext({
   formatter: new I18nFormatter('en-US'),
-  strings: {...Util.UIStrings, ...UIStrings},
+  strings: {...ReportUIStrings, ...UIStrings},
 });
 
 function useLhrLocale() {
@@ -54,23 +55,23 @@ const I18nProvider: FunctionComponent = ({children}) => {
   const {locale, lhrStrings} = useLhrLocale();
 
   const i18n = useMemo(() => {
-    Util.applyStrings({
-      // Preload with strings from the first lhr.
-      // Used for legacy report components imported into the flow report.
-      ...lhrStrings,
-      // Set any missing flow strings to default (english) values.
-      ...UIStrings,
-      // `strings` is generated in build/build-report.js
-      ...strings[locale],
+    Globals.apply({
+      providedStrings: {
+        // Preload with strings from the first lhr.
+        // Used for legacy report components imported into the flow report.
+        ...lhrStrings,
+        // Set any missing flow strings to default (english) values.
+        ...UIStrings,
+        // `strings` is generated in build/build-report.js
+        ...strings[locale],
+      },
+      i18n: new I18nFormatter(locale),
+      reportJson: null,
     });
 
-    // Initialize renderer util i18n for strings rendered in wrapped components.
-    // TODO: Don't attach global formatter to `Util`.
-    Util.i18n = new I18nFormatter(locale);
-
     return {
-      formatter: Util.i18n,
-      strings: Util.strings as typeof UIStrings & typeof Util.UIStrings,
+      formatter: Globals.i18n,
+      strings: Globals.strings as typeof UIStrings & typeof ReportUIStrings,
     };
   }, [locale, lhrStrings]);
 

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

@@ -6,7 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 
-import {Util} from '../../../report/renderer/util';
+import {ReportUtils} from '../../../report/renderer/report-utils.js';
 import {Separator} from '../common';
 import {useI18n, useLocalizedStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, NetworkIcon, SummaryIcon} from '../icons';
@@ -34,7 +34,7 @@ const SidebarSummary: FunctionComponent = () => {
 const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
 ({settings}) => {
   const strings = useLocalizedStrings();
-  const env = Util.getEmulationDescriptions(settings);
+  const env = ReportUtils.getEmulationDescriptions(settings);
   const deviceEmulationString = env.screenEmulation ?
     `${env.deviceEmulation} - ${env.screenEmulation}` :
     env.deviceEmulation;

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

@@ -6,7 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 
-import {Util} from '../../../report/renderer/util';
+import {ReportUtils} from '../../../report/renderer/report-utils.js';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
 import {useI18n, useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
@@ -48,7 +48,7 @@ function getOverallSavings(audit: LH.ReportResult.AuditRef): number {
 }
 
 const SummaryTooltipAudit: FunctionComponent<{audit: LH.ReportResult.AuditRef}> = ({audit}) => {
-  const rating = Util.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
+  const rating = ReportUtils.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
   return (
     <div className={`SummaryTooltipAudit SummaryTooltipAudit--${rating}`}>
       <Markdown text={audit.result.title}/>
@@ -69,7 +69,7 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
       // We don't want unweighted audits except for opportunities with potential savings.
       (audit.weight > 0 || getOverallSavings(audit) > 0) &&
       // Passing audits should never be high impact.
-      !Util.showAsPassed(audit.result);
+      !ReportUtils.showAsPassed(audit.result);
   }
 
   const audits = category.auditRefs
@@ -107,14 +107,14 @@ const SummaryTooltip: FunctionComponent<{
     numPassableAudits,
     numInformative,
     totalWeight,
-  } = Util.calculateCategoryFraction(category);
+  } = ReportUtils.calculateCategoryFraction(category);
 
   const i18n = useI18n();
-  const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
+  const displayAsFraction = ReportUtils.shouldDisplayAsFraction(gatherMode);
   const score = displayAsFraction ?
     numPassed / numPassableAudits :
     category.score;
-  const rating = score === null ? 'error' : Util.calculateRating(score);
+  const rating = score === null ? 'error' : ReportUtils.calculateRating(score);
 
   return (
     <div className="SummaryTooltip">

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

@@ -9,7 +9,7 @@ import {useMemo} from 'preact/hooks';
 
 import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
 import {getModeDescription, useFlowResult} from '../util';
-import {Util} from '../../../report/renderer/util';
+import {ReportUtils} from '../../../report/renderer/report-utils.js';
 import {SummaryCategory} from './category';
 import {useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
 
@@ -49,7 +49,7 @@ const SummaryFlowStep: FunctionComponent<{
   label: string,
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
-  const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
+  const reportResult = useMemo(() => ReportUtils.prepareReportResult(lhr), [lhr]);
   const strings = useLocalizedStrings();
   const modeDescription = getModeDescription(lhr.gatherMode, strings);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "9.5.0-dev.20230123",
+  "version": "9.5.0-dev.20230125",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -26,7 +26,7 @@
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
-    "build-report": "node build/build-report-components.js && bash core/scripts/copy-util-commonjs.sh && node build/build-report.js",
+    "build-report": "node build/build-report-components.js && node build/build-report.js",
     "build-sample-reports": "yarn build-report && node build/build-sample-reports.js",
     "build-treemap": "node ./build/build-treemap.js",
     "build-viewer": "node ./build/build-viewer.js",
@@ -86,7 +86,6 @@
     "diff:sample-json": "yarn i18n:checks && bash core/scripts/assert-golden-lhr-unchanged.sh",
     "diff:flow-sample-json": "yarn i18n:collect-strings && bash core/scripts/assert-baseline-flow-result-unchanged.sh",
     "computeBenchmarkIndex": "./core/scripts/benchmark.js",
-    "minify-latest-run": "./core/scripts/lantern/minify-trace.js ./latest-run/defaultPass.trace.json ./latest-run/defaultPass.trace.min.json && ./core/scripts/lantern/minify-devtoolslog.js ./latest-run/defaultPass.devtoolslog.json ./latest-run/defaultPass.devtoolslog.min.json",
     "save-latest-run": "./core/scripts/save-latest-run.sh",
     "compile-proto": "protoc --python_out=./ ./proto/lighthouse-result.proto && mv ./proto/*_pb2.py ./proto/scripts || (echo \"❌ Install protobuf = 3.20.x to compile the proto file.\" && false)",
     "build-proto-roundtrip": "mkdir -p .tmp && python3 proto/scripts/json_roundtrip_via_proto.py",
@@ -169,7 +168,7 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^18.0.5",
+    "puppeteer": "^19.6.0",
     "resolve": "^1.20.0",
     "rollup": "^2.52.7",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -187,7 +186,7 @@
   },
   "dependencies": {
     "@sentry/node": "^6.17.4",
-    "axe-core": "4.4.1",
+    "axe-core": "4.6.3",
     "chrome-launcher": "^0.15.1",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
@@ -195,16 +194,16 @@
     "http-link-header": "^0.8.0",
     "intl-messageformat": "^4.4.0",
     "jpeg-js": "^0.4.4",
-    "js-library-detector": "^6.5.0",
+    "js-library-detector": "^6.6.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "1.8.2",
+    "lighthouse-stack-packs": "1.9.0",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.3.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "puppeteer-core": "^18.0.5",
+    "puppeteer-core": "^19.6.0",
     "quibble": "connorjclark/quibble#fork",
     "robots-parser": "^3.0.0",
     "semver": "^5.3.0",

package/report/renderer/category-renderer.js

@@ -20,7 +20,8 @@
 /** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
 /** @typedef {'failed'|'warning'|'manual'|'passed'|'notApplicable'} TopLevelClumpId */
 
-import {Util} from './util.js';
+import {ReportUtils} from './report-utils.js';
+import {Globals} from './report-globals.js';
 
 export class CategoryRenderer {
   /**
@@ -39,10 +40,10 @@ export class CategoryRenderer {
    */
   get _clumpTitles() {
     return {
-      warning: Util.strings.warningAuditsGroupTitle,
-      manual: Util.strings.manualAuditsGroupTitle,
-      passed: Util.strings.passedAuditsGroupTitle,
-      notApplicable: Util.strings.notApplicableAuditsGroupTitle,
+      warning: Globals.strings.warningAuditsGroupTitle,
+      manual: Globals.strings.manualAuditsGroupTitle,
+      passed: Globals.strings.passedAuditsGroupTitle,
+      notApplicable: Globals.strings.notApplicableAuditsGroupTitle,
     };
   }
 
@@ -62,7 +63,7 @@ export class CategoryRenderer {
    * @return {!Element}
    */
   populateAuditValues(audit, component) {
-    const strings = Util.strings;
+    const strings = Globals.strings;
     const auditEl = this.dom.find('.lh-audit', component);
     auditEl.id = audit.result.id;
     const scoreDisplayMode = audit.result.scoreDisplayMode;
@@ -185,7 +186,7 @@ export class CategoryRenderer {
    * @return {!Element}
    */
   _setRatingClass(element, score, scoreDisplayMode) {
-    const rating = Util.calculateRating(score, scoreDisplayMode);
+    const rating = ReportUtils.calculateRating(score, scoreDisplayMode);
     element.classList.add(`lh-audit--${scoreDisplayMode.toLowerCase()}`);
     if (scoreDisplayMode !== 'informative') {
       element.classList.add(`lh-audit--${rating}`);
@@ -334,8 +335,8 @@ export class CategoryRenderer {
       el.append(descriptionEl);
     }
 
-    this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.strings.show;
-    this.dom.find('.lh-clump-toggletext--hide', el).textContent = Util.strings.hide;
+    this.dom.find('.lh-clump-toggletext--show', el).textContent = Globals.strings.show;
+    this.dom.find('.lh-clump-toggletext--hide', el).textContent = Globals.strings.hide;
 
     clumpElement.classList.add(`lh-clump--${clumpId.toLowerCase()}`);
     return el;
@@ -349,7 +350,7 @@ export class CategoryRenderer {
    */
   renderCategoryScore(category, groupDefinitions, options) {
     let categoryScore;
-    if (options && Util.shouldDisplayAsFraction(options.gatherMode)) {
+    if (options && ReportUtils.shouldDisplayAsFraction(options.gatherMode)) {
       categoryScore = this.renderCategoryFraction(category);
     } else {
       categoryScore = this.renderScoreGauge(category, groupDefinitions);
@@ -377,7 +378,7 @@ export class CategoryRenderer {
     const tmpl = this.dom.createComponent('gauge');
     const wrapper = this.dom.find('a.lh-gauge__wrapper', tmpl);
 
-    if (Util.isPluginCategory(category.id)) {
+    if (ReportUtils.isPluginCategory(category.id)) {
       wrapper.classList.add('lh-gauge__wrapper--plugin');
     }
 
@@ -393,16 +394,16 @@ export class CategoryRenderer {
     percentageEl.textContent = scoreOutOf100.toString();
     if (category.score === null) {
       percentageEl.textContent = '?';
-      percentageEl.title = Util.strings.errorLabel;
+      percentageEl.title = Globals.strings.errorLabel;
     }
 
     // Render a numerical score if the category has applicable audits, or no audits whatsoever.
     if (category.auditRefs.length === 0 || this.hasApplicableAudits(category)) {
-      wrapper.classList.add(`lh-gauge__wrapper--${Util.calculateRating(category.score)}`);
+      wrapper.classList.add(`lh-gauge__wrapper--${ReportUtils.calculateRating(category.score)}`);
     } else {
       wrapper.classList.add(`lh-gauge__wrapper--not-applicable`);
       percentageEl.textContent = '-';
-      percentageEl.title = Util.strings.notApplicableAuditsGroupTitle;
+      percentageEl.title = Globals.strings.notApplicableAuditsGroupTitle;
     }
 
     this.dom.find('.lh-gauge__label', tmpl).textContent = category.title;
@@ -417,7 +418,8 @@ export class CategoryRenderer {
     const tmpl = this.dom.createComponent('fraction');
     const wrapper = this.dom.find('a.lh-fraction__wrapper', tmpl);
 
-    const {numPassed, numPassableAudits, totalWeight} = Util.calculateCategoryFraction(category);
+    const {numPassed, numPassableAudits, totalWeight} =
+      ReportUtils.calculateCategoryFraction(category);
 
     const fraction = numPassed / numPassableAudits;
     const content = this.dom.find('.lh-fraction__content', tmpl);
@@ -425,7 +427,7 @@ export class CategoryRenderer {
     text.textContent = `${numPassed}/${numPassableAudits}`;
     content.append(text);
 
-    let rating = Util.calculateRating(fraction);
+    let rating = ReportUtils.calculateRating(fraction);
 
     // If none of the available audits can affect the score, a rating isn't useful.
     // The flow report should display the fraction with neutral icon and coloring in this case.
@@ -490,7 +492,7 @@ export class CategoryRenderer {
       return scoreDisplayMode;
     }
 
-    if (Util.showAsPassed(auditRef.result)) {
+    if (ReportUtils.showAsPassed(auditRef.result)) {
       if (this._auditHasWarning(auditRef)) {
         return 'warning';
       } else {

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 */
@@ -137,9 +137,9 @@ class CriticalRequestChainRenderer {
       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) + ', ';
+        ' - ' + 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);
     }
@@ -178,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.strings.crcInitialNavigation;
+    dom.find('.lh-crc-initial-nav', tmpl).textContent = Globals.strings.crcInitialNavigation;
     dom.find('.lh-crc__longest_duration_label', tmpl).textContent =
-        Util.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/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.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.strings.expandView;
-      hideEl.textContent = Util.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.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