lighthouse 8.6.0-dev.20211029 → 8.6.0-dev.20211102

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

@@ -152,6 +152,21 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     return url.href;
   }
 
+  /**
+   * For performance, audits with no group should be a diagnostic or opportunity.
+   * The audit details type will determine which of the two groups an audit is in.
+   *
+   * @param {LH.ReportResult.AuditRef} audit
+   * @return {'load-opportunity'|'diagnostic'|null}
+   */
+  _classifyPerformanceAudit(audit) {
+    if (audit.group) return null;
+    if (audit.result.details && audit.result.details.type === 'opportunity') {
+      return 'load-opportunity';
+    }
+    return 'diagnostic';
+  }
+
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
@@ -168,15 +183,26 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     // Metrics.
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
     if (metricAudits.length) {
-      const metricAuditsEl = this.renderAuditGroup(groups.metrics);
+      const [metricsGroupEl, metricsFooterEl] = this.renderAuditGroup(groups.metrics);
 
       // Metric descriptions toggle.
-      const toggleTmpl = this.dom.createComponent('metricsToggle');
-      const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
-      metricAuditsEl.append(..._toggleEl.childNodes);
-
-      const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
-
+      const checkboxEl = this.dom.createElement('input', 'lh-metrics-toggle__input');
+      const checkboxId = `lh-metrics-toggle${Util.getUniqueSuffix()}`;
+      checkboxEl.setAttribute('aria-label', 'Toggle the display of metric descriptions');
+      checkboxEl.type = 'checkbox';
+      checkboxEl.id = checkboxId;
+      metricsGroupEl.prepend(checkboxEl);
+      const metricHeaderEl = this.dom.find('.lh-audit-group__header', metricsGroupEl);
+      const labelEl = this.dom.createChildOf(metricHeaderEl, 'label', 'lh-metrics-toggle__label');
+      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;
+
+      const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
+      const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
+      metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
       metricAudits.forEach(item => {
         metricsBoxesEl.appendChild(this._renderMetric(item));
       });
@@ -193,8 +219,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       this.dom.safelySetHref(calculatorLink, this._getScoringCalculatorHref(category.auditRefs));
 
 
-      metricAuditsEl.classList.add('lh-audit-group--metrics');
-      element.appendChild(metricAuditsEl);
+      metricsGroupEl.classList.add('lh-audit-group--metrics');
+      element.appendChild(metricsGroupEl);
     }
 
     // Filmstrip
@@ -209,10 +235,10 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     // Opportunities
     const opportunityAudits = category.auditRefs
-        .filter(audit => audit.group === 'load-opportunities' && !Util.showAsPassed(audit.result))
+        .filter(audit => this._classifyPerformanceAudit(audit) === 'load-opportunity')
+        .filter(audit => !Util.showAsPassed(audit.result))
         .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
 
-
     const filterableMetrics = metricAudits.filter(a => !!a.relevantAudits);
     // TODO: only add if there are opportunities & diagnostics rendered.
     if (filterableMetrics.length) {
@@ -225,7 +251,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const wastedMsValues = opportunityAudits.map(audit => this._getWastedMs(audit));
       const maxWaste = Math.max(...wastedMsValues);
       const scale = Math.max(Math.ceil(maxWaste / 1000) * 1000, minimumScale);
-      const groupEl = this.renderAuditGroup(groups['load-opportunities']);
+      const [groupEl, footerEl] = this.renderAuditGroup(groups['load-opportunities']);
       const tmpl = this.dom.createComponent('opportunityHeader');
 
       this.dom.find('.lh-load-opportunity__col--one', tmpl).textContent =
@@ -234,15 +260,17 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         strings.opportunitySavingsColumnLabel;
 
       const headerEl = this.dom.find('.lh-load-opportunity__header', tmpl);
-      groupEl.appendChild(headerEl);
-      opportunityAudits.forEach(item => groupEl.appendChild(this._renderOpportunity(item, scale)));
+      groupEl.insertBefore(headerEl, footerEl);
+      opportunityAudits.forEach(item =>
+        groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
       groupEl.classList.add('lh-audit-group--load-opportunities');
       element.appendChild(groupEl);
     }
 
     // Diagnostics
     const diagnosticAudits = category.auditRefs
-        .filter(audit => audit.group === 'diagnostics' && !Util.showAsPassed(audit.result))
+        .filter(audit => this._classifyPerformanceAudit(audit) === 'diagnostic')
+        .filter(audit => !Util.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);
@@ -250,16 +278,15 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         });
 
     if (diagnosticAudits.length) {
-      const groupEl = this.renderAuditGroup(groups['diagnostics']);
-      diagnosticAudits.forEach(item => groupEl.appendChild(this.renderAudit(item)));
+      const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
+      diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
       groupEl.classList.add('lh-audit-group--diagnostics');
       element.appendChild(groupEl);
     }
 
     // Passed audits
     const passedAudits = category.auditRefs
-        .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
-            Util.showAsPassed(audit.result));
+        .filter(audit => this._classifyPerformanceAudit(audit) && Util.showAsPassed(audit.result));
 
     if (!passedAudits.length) return element;
 
@@ -279,16 +306,16 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         const table = this.detailsRenderer.render(audit.result.details);
         if (table) {
           table.id = id;
-          table.classList.add('lh-audit');
+          table.classList.add('lh-details', 'lh-details--budget', 'lh-audit');
           budgetTableEls.push(table);
         }
       }
     });
     if (budgetTableEls.length > 0) {
-      const budgetsGroupEl = this.renderAuditGroup(groups.budgets);
-      budgetTableEls.forEach(table => budgetsGroupEl.appendChild(table));
-      budgetsGroupEl.classList.add('lh-audit-group--budgets');
-      element.appendChild(budgetsGroupEl);
+      const [groupEl, footerEl] = this.renderAuditGroup(groups.budgets);
+      budgetTableEls.forEach(table => groupEl.insertBefore(table, footerEl));
+      groupEl.classList.add('lh-audit-group--budgets');
+      element.appendChild(groupEl);
     }
 
     return element;

package/report/renderer/report-renderer.js

@@ -268,6 +268,7 @@ export class ReportRenderer {
     }
 
     const scoreScale = this._dom.createElement('div');
+    scoreScale.classList.add('lh-scorescale-wrap');
     scoreScale.append(this._dom.createComponent('scorescale'));
     if (scoreHeader) {
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
@@ -287,7 +288,7 @@ export class ReportRenderer {
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
-      // .lh-category within has the max-width: var(--report-width);
+      // .lh-category within has the max-width: var(--report-content-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
       wrapper.appendChild(renderer.render(
         category,

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

@@ -256,10 +256,9 @@ export class ReportUIFeatures {
       const allThirdParty = thirdPartyRows.length === rowEls.length;
       const allFirstParty = !thirdPartyRows.length;
 
-      // If all or none of the rows are 3rd party, disable the checkbox.
+      // If all or none of the rows are 3rd party, hide the control.
       if (allThirdParty || allFirstParty) {
-        filterInput.disabled = true;
-        filterInput.checked = allThirdParty;
+        this._dom.find('div.lh-3p-filter', filterTemplate).hidden = true;
       }
 
       // Add checkbox to the DOM.

package/report/renderer/util.js

@@ -38,7 +38,11 @@ const listOfTlds = [
   'web', 'spb', 'blog', 'jus', 'kiev', 'mil', 'wi', 'qc', 'ca', 'bel', 'on',
 ];
 
-export class Util {
+class Util {
+  /** @type {I18n<typeof UIStrings>} */
+  // @ts-expect-error: Is set in report renderer.
+  static i18n = null;
+
   static get PASS_THRESHOLD() {
     return PASS_THRESHOLD;
   }
@@ -417,7 +421,7 @@ export class Util {
             throttling.downloadThroughputKbps === 1.6 * 1024 * 0.9 &&
             throttling.uploadThroughputKbps === 750 * 0.9;
         };
-        summary = `${isSlow4G() ? 'Slow 4G' : 'Custom'} throttling by DevTools`;
+        summary = isSlow4G() ? Util.i18n.strings.runtimeSlow4g : Util.i18n.strings.runtimeCustom;
         break;
       }
       case 'simulate': {
@@ -429,7 +433,7 @@ export class Util {
         const isSlow4G = () => {
           return rttMs === 150 && throughputKbps === 1.6 * 1024;
         };
-        summary = isSlow4G() ? 'Simulated slow 4G' : 'Custom simulated throttling';
+        summary = isSlow4G() ? Util.i18n.strings.runtimeSlow4g : Util.i18n.strings.runtimeCustom;
         break;
       }
       default:
@@ -516,10 +520,9 @@ export class Util {
     let totalWeight = 0;
     for (const auditRef of category.auditRefs) {
       const auditPassed = Util.showAsPassed(auditRef.result);
-      const notDisplayed = !auditRef.group && category.id === 'performance';
 
       // Don't count the audit if it's manual, N/A, or isn't displayed.
-      if (notDisplayed ||
+      if (auditRef.group === 'hidden' ||
           auditRef.result.scoreDisplayMode === 'manual' ||
           auditRef.result.scoreDisplayMode === 'notApplicable') {
         continue;
@@ -555,14 +558,10 @@ Util.getUniqueSuffix = (() => {
   };
 })();
 
-/** @type {I18n<typeof Util['UIStrings']>} */
-// @ts-expect-error: Is set in report renderer.
-Util.i18n = null;
-
 /**
  * Report-renderer-specific strings.
  */
-Util.UIStrings = {
+const UIStrings = {
   /** Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse. */
   varianceDisclaimer: 'Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.',
   /** Text link pointing to an interactive calculator that explains Lighthouse scoring. The link text should be fairly short. */
@@ -662,6 +661,22 @@ Util.UIStrings = {
 
   /** Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. */
   throttlingProvided: 'Provided by environment',
+  /** Label for an interactive control that will reveal or hide a group of content. This control toggles between the text 'Show' and 'Hide'. */
+  show: 'Show',
+  /** Label for an interactive control that will reveal or hide a group of content. This control toggles between the text 'Show' and 'Hide'. */
+  hide: 'Hide',
+  /** Label for an interactive control that will reveal or hide a group of content. This control toggles between the text 'Expand view' and 'Collapse view'. */
+  expandView: 'Expand view',
+  /** Label for an interactive control that will reveal or hide a group of content. This control toggles between the text 'Expand view' and 'Collapse view'. */
+  collapseView: 'Collapse view',
+  /** Label indicating that Lighthouse throttled the page to emulate a slow 4G network connection. */
+  runtimeSlow4g: 'Slow 4G throttling',
+  /** Label indicating that Lighthouse throttled the page using custom throttling settings. */
+  runtimeCustom: 'Custom throttling',
 };
+Util.UIStrings = UIStrings;
 
-export const UIStrings = Util.UIStrings;
+export {
+  Util,
+  UIStrings,
+};

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

@@ -197,8 +197,8 @@ describe('CategoryRenderer', () => {
         'score shows informative and dash icon');
 
     assert.ok(pwaCategory.manualDescription);
-    const description = categoryDOM
-      .querySelector('.lh-clump--manual .lh-audit-group__description').textContent;
+    const description = categoryDOM.querySelector('.lh-clump--manual').closest('.lh-audit-group')
+      .querySelector('.lh-audit-group__description').textContent;
     // may need to be adjusted if description includes a link at the beginning
     assert.ok(description.startsWith(pwaCategory.manualDescription.substring(0, 20)),
         'no manual description');

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

@@ -96,11 +96,23 @@ describe('PerfCategoryRenderer', () => {
     assert.strictEqual(new URL(calcLink.href).hostname, 'googlechrome.github.io');
   });
 
+  it('ignores hidden audits', () => {
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
+
+    const hiddenAudits = category.auditRefs.filter(audit => audit.group === 'hidden');
+    const auditElements = [...categoryDOM.querySelectorAll('.lh-audit')];
+    const matchingElements = auditElements
+      .filter(el => hiddenAudits.some(audit => audit.id === el.id));
+    expect(matchingElements).toHaveLength(0);
+  });
+
   it('renders the failing performance opportunities', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
-    const oppAudits = category.auditRefs.filter(audit => audit.group === 'load-opportunities' &&
-        !Util.showAsPassed(audit.result));
+    const oppAudits = category.auditRefs.filter(audit =>
+      audit.result.details &&
+      audit.result.details.type === 'opportunity' &&
+      !Util.showAsPassed(audit.result));
     const oppElements = [...categoryDOM.querySelectorAll('.lh-audit--load-opportunity')];
     expect(oppElements.map(e => e.id).sort()).toEqual(oppAudits.map(a => a.id).sort());
     expect(oppElements.length).toBeGreaterThan(0);
@@ -120,10 +132,14 @@ describe('PerfCategoryRenderer', () => {
   it('renders performance opportunities with an errorMessage', () => {
     const auditWithError = {
       score: 0,
-      group: 'load-opportunities',
       result: {
         score: null, scoreDisplayMode: 'error', errorMessage: 'Yikes!!', title: 'Bug #2',
         description: '',
+        details: {
+          overallSavingsMs: 0,
+          items: [],
+          type: 'opportunity',
+        },
       },
     };
 
@@ -137,10 +153,14 @@ describe('PerfCategoryRenderer', () => {
   it('renders performance opportunities\' explanation', () => {
     const auditWithExplanation = {
       score: 0,
-      group: 'load-opportunities',
       result: {
         score: 0, scoreDisplayMode: 'numeric',
         numericValue: 100, explanation: 'Yikes!!', title: 'Bug #2', description: '',
+        details: {
+          overallSavingsMs: 0,
+          items: [],
+          type: 'opportunity',
+        },
       },
     };
 
@@ -159,7 +179,9 @@ describe('PerfCategoryRenderer', () => {
         '.lh-category > .lh-audit-group.lh-audit-group--diagnostics');
 
     const diagnosticAuditIds = category.auditRefs.filter(audit => {
-      return audit.group === 'diagnostics' && !Util.showAsPassed(audit.result);
+      return !audit.group &&
+        !(audit.result.details && audit.result.details.type === 'opportunity') &&
+        !Util.showAsPassed(audit.result);
     }).map(audit => audit.id).sort();
     assert.ok(diagnosticAuditIds.length > 0);
 
@@ -170,11 +192,11 @@ describe('PerfCategoryRenderer', () => {
 
   it('renders the passed audits', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
-    const passedSection = categoryDOM.querySelector('.lh-category > .lh-clump--passed');
+    const passedSection = categoryDOM.querySelector('.lh-clump--passed');
 
     const passedAudits = category.auditRefs.filter(audit =>
-      audit.group && audit.group !== 'metrics' && audit.id !== 'performance-budget'
-        && Util.showAsPassed(audit.result));
+      !audit.group &&
+      Util.showAsPassed(audit.result));
     const passedElements = passedSection.querySelectorAll('.lh-audit');
     assert.equal(passedElements.length, passedAudits.length);
   });
@@ -187,10 +209,14 @@ describe('PerfCategoryRenderer', () => {
     it('handles erroring opportunities', () => {
       const auditWithDebug = {
         score: 0,
-        group: 'load-opportunities',
         result: {
           error: true, score: 0,
           numericValue: 100, explanation: 'Yikes!!', title: 'Bug #2',
+          details: {
+            overallSavingsMs: 0,
+            items: [],
+            type: 'opportunity',
+          },
         },
       };
       const wastedMs = renderer._getWastedMs(auditWithDebug);

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

@@ -90,7 +90,7 @@ describe('ReportRenderer', () => {
       const output = renderer.renderReport(sampleResultsCopy, container);
 
       function isPWAGauge(el) {
-        return el.querySelector('.lh-gauge__label').textContent === 'Progressive Web App';
+        return el.querySelector('.lh-gauge__label').textContent === 'PWA';
       }
       function isPluginGauge(el) {
         return el.querySelector('.lh-gauge__label').textContent === 'Some Plugin';

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

@@ -256,17 +256,15 @@ describe('ReportUIFeatures', () => {
           .toThrowError('query #uses-rel-preconnect .lh-3p-filter-input not found');
       });
 
-      it('filter is disabled and checked for when just third party resources', () => {
-        const filterCheckbox =
-          dom.find('#render-blocking-resources .lh-3p-filter-input', container);
-        expect(filterCheckbox.disabled).toEqual(true);
-        expect(filterCheckbox.checked).toEqual(true);
+      it('filter is hidden when just third party resources', () => {
+        const filterControl =
+          dom.find('#render-blocking-resources .lh-3p-filter', container);
+        expect(filterControl.hidden).toEqual(true);
       });
 
-      it('filter is disabled and not checked for just first party resources', () => {
-        const filterCheckbox = dom.find('#uses-text-compression .lh-3p-filter-input', container);
-        expect(filterCheckbox.disabled).toEqual(true);
-        expect(filterCheckbox.checked).toEqual(false);
+      it('filter is hidden for just first party resources', () => {
+        const filterControl = dom.find('#uses-text-compression .lh-3p-filter', container);
+        expect(filterControl.hidden).toEqual(true);
       });
     });
   });
@@ -515,6 +513,9 @@ describe('ReportUIFeatures', () => {
       expect(render(lhr).querySelector('.lh-button.lh-report-icon--treemap')).toBeTruthy();
 
       delete lhr.audits['script-treemap-data'];
+      const newAuditRefs = lhr.categories['performance'].auditRefs
+        .filter(a => a.id !== 'script-treemap-data');
+      lhr.categories['performance'].auditRefs = newAuditRefs;
       expect(render(lhr).querySelector('.lh-button.lh-report-icon--treemap')).toBeNull();
     });
   });

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

@@ -401,10 +401,10 @@ describe('util helpers', () => {
       const category = {
         id: 'performance',
         auditRefs: [
-          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'metrics'},
         ],
       };
       const fraction = Util.calculateCategoryFraction(category);
@@ -416,14 +416,14 @@ describe('util helpers', () => {
       });
     });
 
-    it('ignores manual audits, N/A audits, and performance audits with no group', () => {
+    it('ignores manual audits, N/A audits, and hidden audits', () => {
       const category = {
         id: 'performance',
         auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'hidden'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'metrics'},
         ],
       };
       const fraction = Util.calculateCategoryFraction(category);
@@ -435,32 +435,14 @@ describe('util helpers', () => {
       });
     });
 
-    it('does not ignore audits with no group in non-performance category', () => {
-      const category = {
-        id: 'seo',
-        auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
-        ],
-      };
-      const fraction = Util.calculateCategoryFraction(category);
-      expect(fraction).toEqual({
-        numPassableAudits: 2,
-        numPassed: 2,
-        numInformative: 0,
-        totalWeight: 2,
-      });
-    });
-
     it('tracks informative audits separately', () => {
       const category = {
         id: 'performance',
         auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'metrics'},
         ],
       };
       const fraction = Util.calculateCategoryFraction(category);

package/report/test-assets/faux-psi.js

@@ -101,15 +101,15 @@ async function decorateScreenshot(datauri, tabId) {
     img.src = datauri;
   });
   const c = document.createElement('canvas');
-  c.width = img.width;
-  c.height = img.height;
+  c.width = tabId === 'desktop' ? 280 : img.width;
+  c.height = tabId === 'desktop' ? 194 : img.height;
 
   const ctx = c.getContext('2d');
   if (!ctx) throw new Error();
-  ctx.drawImage(img, 0, 0);
-  ctx.font = `${img.width / 2}px serif`;
+  ctx.drawImage(img, 0, 0, c.width, c.height);
+  ctx.font = `${c.width / 2}px serif`;
   ctx.textAlign = 'center';
   ctx.globalAlpha = 0.7;
-  ctx.fillText(tabId === 'mobile' ? '📱' : '💻', img.width / 2, Math.min(img.height / 2, 700));
+  ctx.fillText(tabId === 'mobile' ? '📱' : '💻', c.width / 2, Math.min(c.height / 2, 700));
   return c.toDataURL();
 }

package/shared/localization/format.js

@@ -7,11 +7,13 @@
 
 const fs = require('fs');
 
-const MessageFormat = require('intl-messageformat').default;
+const MessageFormat = require('intl-messageformat');
 const {isObjectOfUnknownValues, isObjectOrArrayOfUnknownValues} = require('../type-verifiers.js');
 
 /** Contains available locales with messages. May be an empty object if bundled. */
-const LOCALE_MESSAGES = require('./locales.js');
+/** @type {import('./locales')} */
+// @ts-expect-error TODO(esmodules): remove when file is es modules.
+const LOCALE_MESSAGES = require('./locales.js').default || require('./locales.js');
 
 const DEFAULT_LOCALE = 'en-US';
 
@@ -93,7 +95,7 @@ function collectAllCustomElementsFromICU(icuElements, seenElementsById = new Map
  * Returns a copy of the `values` object, with the values formatted based on how
  * they will be used in their icuMessage, e.g. KB or milliseconds. The original
  * object is unchanged.
- * @param {MessageFormat} messageFormatter
+ * @param {MessageFormat.IntlMessageFormat} messageFormatter
  * @param {Readonly<Record<string, string | number>>} values
  * @param {string} lhlMessage Used for clear error logging.
  * @return {Record<string, string | number>}
@@ -171,7 +173,10 @@ function formatMessage(message, values = {}, locale) {
   // When using accented english, force the use of a different locale for number formatting.
   const localeForMessageFormat = (locale === 'en-XA' || locale === 'en-XL') ? 'de-DE' : locale;
 
-  const formatter = new MessageFormat(message, localeForMessageFormat, formats);
+  // This package is not correctly bundled by Rollup.
+  /** @type {typeof MessageFormat.IntlMessageFormat} */
+  const MessageFormatCtor = MessageFormat.IntlMessageFormat || MessageFormat;
+  const formatter = new MessageFormatCtor(message, localeForMessageFormat, formats);
 
   // Preformat values for the message format like KB and milliseconds.
   const valuesForMessageFormat = _preformatValues(formatter, values, message);

package/shared/localization/locales/ar-XB.json

@@ -800,21 +800,6 @@
   "lighthouse-core/audits/dobetterweb/dom-size.js | title": {
     "message": "‏‮Avoids‬‏ ‏‮an‬‏ ‏‮excessive‬‏ ‏‮DOM‬‏ ‏‮size‬‏"
   },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | columnFailingAnchors": {
-    "message": "‏‮Failing‬‏ ‏‮Anchors‬‏"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | description": {
-    "message": "‏‮Add‬‏ `rel=\"noopener\"` ‏‮or‬‏ `rel=\"noreferrer\"` ‏‮to‬‏ ‏‮any‬‏ ‏‮external‬‏ ‏‮links‬‏ ‏‮to‬‏ ‏‮improve‬‏ ‏‮performance‬‏ ‏‮and‬‏ ‏‮prevent‬‏ ‏‮security‬‏ ‏‮vulnerabilities‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://web.dev/external-anchors-use-rel-noopener/)."
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | failureTitle": {
-    "message": "‏‮Links‬‏ ‏‮to‬‏ ‏‮cross‬‏-‏‮origin‬‏ ‏‮destinations‬‏ ‏‮are‬‏ ‏‮unsafe‬‏"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | title": {
-    "message": "‏‮Links‬‏ ‏‮to‬‏ ‏‮cross‬‏-‏‮origin‬‏ ‏‮destinations‬‏ ‏‮are‬‏ ‏‮safe‬‏"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | warning": {
-    "message": "‏‮Unable‬‏ ‏‮to‬‏ ‏‮determine‬‏ ‏‮the‬‏ ‏‮destination‬‏ ‏‮for‬‏ ‏‮anchor‬‏ ({anchorHTML}). ‏‮If‬‏ ‏‮not‬‏ ‏‮used‬‏ ‏‮as‬‏ ‏‮a‬‏ ‏‮hyperlink‬‏, ‏‮consider‬‏ ‏‮removing‬‏ ‏‮target‬‏=_‏‮blank‬‏."
-  },
   "lighthouse-core/audits/dobetterweb/geolocation-on-start.js | description": {
     "message": "‏‮Users‬‏ ‏‮are‬‏ ‏‮mistrustful‬‏ ‏‮of‬‏ ‏‮or‬‏ ‏‮confused‬‏ ‏‮by‬‏ ‏‮sites‬‏ ‏‮that‬‏ ‏‮request‬‏ ‏‮their‬‏ ‏‮location‬‏ ‏‮without‬‏ ‏‮context‬‏. ‏‮Consider‬‏ ‏‮tying‬‏ ‏‮the‬‏ ‏‮request‬‏ ‏‮to‬‏ ‏‮a‬‏ ‏‮user‬‏ ‏‮action‬‏ ‏‮instead‬‏. [‏‮Learn‬‏ ‏‮more‬‏](https://web.dev/geolocation-on-start/)."
   },

package/shared/localization/locales/ar.json

@@ -800,21 +800,6 @@
   "lighthouse-core/audits/dobetterweb/dom-size.js | title": {
     "message": "تجنُب حجم DOM الزائد"
   },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | columnFailingAnchors": {
-    "message": "علامات الارتساء التي تعذّرت مراجعتها"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | description": {
-    "message": "يمكنك إضافة `rel=\"noopener\"` أو `rel=\"noreferrer\"` إلى أي روابط خارجية لتحسين الأداء ومنع الثغرات الأمنية. [مزيد من المعلومات](https://web.dev/external-anchors-use-rel-noopener/)"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | failureTitle": {
-    "message": "الروابط إلى وجهات مشتركة المصدر هي غير آمنة"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | title": {
-    "message": "الروابط إلى وجهات مشتركة المصدر هي آمنة"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | warning": {
-    "message": "يتعذّر تحديد الوجهة لإعلان ثابت {anchorHTML}). في حال عدم استخدامه كرابط تشعبي، يمكنك إزالة target=_blank."
-  },
   "lighthouse-core/audits/dobetterweb/geolocation-on-start.js | description": {
     "message": "لا يثق المستخدمون في المواقع الإلكترونية التي تطلب مواقعهم الجغرافية بدون سياق أو قد يؤدي ذلك إلى إرباكهم. يمكنك ربط الطلب بإجراء المستخدم بدلاً من ذلك. [مزيد من المعلومات](https://web.dev/geolocation-on-start/)"
   },

package/shared/localization/locales/bg.json

@@ -800,21 +800,6 @@
   "lighthouse-core/audits/dobetterweb/dom-size.js | title": {
     "message": "Не се използва DOM с твърде голям размер"
   },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | columnFailingAnchors": {
-    "message": "Anchor маркери с грешки"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | description": {
-    "message": "Добавете `rel=\"noopener\"` или `rel=\"noreferrer\"` към връзките към външни сайтове, за да подобрите ефективността и да избегнете уязвимости в сигурността. [Научете повече](https://web.dev/external-anchors-use-rel-noopener/)."
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | failureTitle": {
-    "message": "Връзките към външни дестинации не са безопасни"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | title": {
-    "message": "Връзките към външни дестинации са безопасни"
-  },
-  "lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js | warning": {
-    "message": "Не можахме да определим дестинацията за котвата ({anchorHTML}). Ако не се използва като хипервръзка, бихте могли да премахнете target=_blank."
-  },
   "lighthouse-core/audits/dobetterweb/geolocation-on-start.js | description": {
     "message": "Потребителите се объркват или нямат доверие на сайтове, които искат да узнаят местоположението им без контекст. Вместо това бихте могли да обвържете заявката към действие на потребителя. [Научете повече](https://web.dev/geolocation-on-start/)."
   },