lighthouse 8.6.0-dev.20211030 → 8.6.0-dev.20211103

package/report/renderer/topbar-features.js

@@ -24,8 +24,6 @@ export class TopbarFeatures {
     this.lhr; // eslint-disable-line no-unused-expressions
     this._reportUIFeatures = reportUIFeatures;
     this._dom = dom;
-    /** @type {Document} */
-    this._document = this._dom.document();
     this._dropDownMenu = new DropDownMenu(this._dom);
     this._copyAttempt = false;
     /** @type {HTMLElement} */
@@ -48,19 +46,19 @@ export class TopbarFeatures {
    */
   enable(lhr) {
     this.lhr = lhr;
-    this._document.addEventListener('keyup', this.onKeyUp);
-    this._document.addEventListener('copy', this.onCopy);
+    this._dom.rootEl.addEventListener('keyup', this.onKeyUp);
+    this._dom.document().addEventListener('copy', this.onCopy);
     this._dropDownMenu.setup(this.onDropDownMenuClick);
     this._setUpCollapseDetailsAfterPrinting();
 
-    const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
+    const topbarLogo = this._dom.find('.lh-topbar__logo', this._dom.rootEl);
     topbarLogo.addEventListener('click', () => toggleDarkTheme(this._dom));
 
     // There is only a sticky header when at least 2 categories are present.
     if (Object.keys(this.lhr.categories).length >= 2) {
       this._setupStickyHeaderElements();
-      const containerEl = this._dom.find('.lh-container', this._document);
-      const elToAddScrollListener = this._getScrollParent(containerEl);
+      const reportRootEl = this._dom.rootEl;
+      const elToAddScrollListener = this._getScrollParent(reportRootEl);
       elToAddScrollListener.addEventListener('scroll', this._updateStickyHeaderOnScroll);
 
       // Use ResizeObserver where available.
@@ -70,7 +68,7 @@ export class TopbarFeatures {
       // For now, limit to DevTools.
       if (this._dom.isDevTools()) {
         const resizeObserver = new window.ResizeObserver(this._updateStickyHeaderOnScroll);
-        resizeObserver.observe(containerEl);
+        resizeObserver.observe(reportRootEl);
       } else {
         window.addEventListener('resize', this._updateStickyHeaderOnScroll);
       }
@@ -112,7 +110,7 @@ export class TopbarFeatures {
         try {
           this._reportUIFeatures._saveFile(new Blob([htmlStr], {type: 'text/html'}));
         } catch (e) {
-          this._dom.fireEventOn('lh-log', this._document, {
+          this._dom.fireEventOn('lh-log', this._dom.document(), {
             cmd: 'error', msg: 'Could not export as HTML. ' + e.message,
           });
         }
@@ -152,7 +150,7 @@ export class TopbarFeatures {
       e.preventDefault();
       e.clipboardData.setData('text/plain', JSON.stringify(this.lhr, null, 2));
 
-      this._dom.fireEventOn('lh-log', this._document, {
+      this._dom.fireEventOn('lh-log', this._dom.document(), {
         cmd: 'log', msg: 'Report JSON copied to clipboard',
       });
     }
@@ -164,28 +162,28 @@ export class TopbarFeatures {
    * Copies the report JSON to the clipboard (if supported by the browser).
    */
   onCopyButtonClick() {
-    this._dom.fireEventOn('lh-analytics', this._document, {
+    this._dom.fireEventOn('lh-analytics', this._dom.document(), {
       cmd: 'send',
       fields: {hitType: 'event', eventCategory: 'report', eventAction: 'copy'},
     });
 
     try {
-      if (this._document.queryCommandSupported('copy')) {
+      if (this._dom.document().queryCommandSupported('copy')) {
         this._copyAttempt = true;
 
         // Note: In Safari 10.0.1, execCommand('copy') returns true if there's
         // a valid text selection on the page. See http://caniuse.com/#feat=clipboard.
-        if (!this._document.execCommand('copy')) {
+        if (!this._dom.document().execCommand('copy')) {
           this._copyAttempt = false; // Prevent event handler from seeing this as a copy attempt.
 
-          this._dom.fireEventOn('lh-log', this._document, {
+          this._dom.fireEventOn('lh-log', this._dom.document(), {
             cmd: 'warn', msg: 'Your browser does not support copy to clipboard.',
           });
         }
       }
     } catch (e) {
       this._copyAttempt = false;
-      this._dom.fireEventOn('lh-log', this._document, {cmd: 'log', msg: e.message});
+      this._dom.fireEventOn('lh-log', this._dom.document(), {cmd: 'log', msg: e.message});
     }
   }
 
@@ -206,7 +204,7 @@ export class TopbarFeatures {
    * open a `<details>` element.
    */
   expandAllDetails() {
-    const details = this._dom.findAll('.lh-categories details', this._document);
+    const details = this._dom.findAll('.lh-categories details', this._dom.rootEl);
     details.map(detail => detail.open = true);
   }
 
@@ -215,7 +213,7 @@ export class TopbarFeatures {
    * open a `<details>` element.
    */
   collapseAllDetails() {
-    const details = this._dom.findAll('.lh-categories details', this._document);
+    const details = this._dom.findAll('.lh-categories details', this._dom.rootEl);
     details.map(detail => detail.open = false);
   }
 
@@ -274,9 +272,9 @@ export class TopbarFeatures {
   }
 
   _setupStickyHeaderElements() {
-    this.topbarEl = this._dom.find('div.lh-topbar', this._document);
-    this.scoreScaleEl = this._dom.find('div.lh-scorescale', this._document);
-    this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._document);
+    this.topbarEl = this._dom.find('div.lh-topbar', this._dom.rootEl);
+    this.scoreScaleEl = this._dom.find('div.lh-scorescale', this._dom.rootEl);
+    this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._dom.rootEl);
 
     // Highlighter will be absolutely positioned at first gauge, then transformed on scroll.
     this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
@@ -290,7 +288,7 @@ export class TopbarFeatures {
 
     // Highlight mini gauge when section is in view.
     // In view = the last category that starts above the middle of the window.
-    const categoryEls = Array.from(this._document.querySelectorAll('.lh-category'));
+    const categoryEls = Array.from(this._dom.rootEl.querySelectorAll('.lh-category'));
     const categoriesAboveTheMiddle =
       categoryEls.filter(el => el.getBoundingClientRect().top - window.innerHeight / 2 < 0);
     const highlightIndex =

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/clients/bundle-test.js

@@ -9,6 +9,7 @@
 import fs from 'fs';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import * as lighthouseRenderer from '../../clients/bundle.js';
 import {LH_ROOT} from '../../../root.js';
@@ -22,6 +23,8 @@ const sampleResultsStr =
 describe('lighthouseRenderer bundle', () => {
   let document;
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     const {window} = new jsdom.JSDOM();
     document = window.document;
 

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-axe-test.js

@@ -8,6 +8,7 @@
 /* eslint-env jest */
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
@@ -23,6 +24,8 @@ describe('ReportRendererAxe', () => {
     let sampleResults;
 
     beforeAll(async () => {
+      global.console.warn = jest.fn();
+
       const {window} = new jsdom.JSDOM();
       const dom = new DOM(window.document);
       const detailsRenderer = new DetailsRenderer(dom);
@@ -47,10 +50,10 @@ describe('ReportRendererAxe', () => {
     });
 
     it('renders without axe violations', async () => {
-      const container = renderer._dom._document.createElement('main');
+      const container = renderer._dom.document().createElement('main');
       const output = renderer.renderReport(sampleResults, container);
 
-      renderer._dom._document.body.appendChild(container);
+      renderer._dom.document().body.appendChild(container);
 
       const config = {
         rules: {

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

@@ -10,6 +10,7 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import {Util} from '../../renderer/util.js';
 import URL from '../../../lighthouse-core/lib/url-shim.js';
@@ -26,6 +27,8 @@ describe('ReportRenderer', () => {
   let sampleResults;
 
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     // Stub out matchMedia for Node.
     global.matchMedia = function() {
       return {
@@ -50,7 +53,7 @@ describe('ReportRenderer', () => {
 
   describe('renderReport', () => {
     it('should render a report', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResults, container);
       assert.ok(output.querySelector('.lh-header-container'), 'has a header');
       assert.ok(output.querySelector('.lh-report'), 'has report body');
@@ -60,7 +63,7 @@ describe('ReportRenderer', () => {
     });
 
     it('renders additional reports by replacing the existing one', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const oldReport = Array.from(renderer.renderReport(sampleResults, container).children);
       const newReport = Array.from(renderer.renderReport(sampleResults, container).children);
       assert.ok(!oldReport.find(node => container.contains(node)), 'old report was removed');
@@ -86,11 +89,11 @@ describe('ReportRenderer', () => {
         auditRefs: [],
       };
 
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       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';
@@ -126,7 +129,7 @@ describe('ReportRenderer', () => {
         title: 'Some Plugin',
         auditRefs: [],
       };
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResultsCopy, container);
       const scoresHeaderElem = output.querySelector('.lh-scores-header');
 
@@ -140,7 +143,7 @@ describe('ReportRenderer', () => {
     });
 
     it('should not mutate a report object', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const originalResults = JSON.parse(JSON.stringify(sampleResults));
       renderer.renderReport(sampleResults, container);
       assert.deepStrictEqual(sampleResults, originalResults);
@@ -148,13 +151,13 @@ describe('ReportRenderer', () => {
 
     it('renders no warning section when no lighthouseRunWarnings occur', () => {
       const warningResults = Object.assign({}, sampleResults, {runWarnings: []});
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
       assert.strictEqual(output.querySelector('.lh-warnings--toplevel'), null);
     });
 
     it('renders a warning section', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResults, container);
 
       const warningEls = output.querySelectorAll('.lh-warnings--toplevel > ul > li');
@@ -165,7 +168,7 @@ describe('ReportRenderer', () => {
       const warningResults = Object.assign({}, sampleResults, {
         runWarnings: ['[I am a link](https://example.com/)'],
       });
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
 
       const warningEls = output.querySelectorAll('.lh-warnings--toplevel ul li a');
@@ -196,7 +199,7 @@ describe('ReportRenderer', () => {
     // Make sure we have a channel in the LHR.
     assert.ok(lhrChannel.length > 2);
 
-    const container = renderer._dom._document.body;
+    const container = renderer._dom.document().body;
     const output = renderer.renderReport(sampleResults, container);
 
     const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
@@ -225,7 +228,7 @@ describe('ReportRenderer', () => {
 
     assert.ok(notApplicableCount > 20); // Make sure something's being tested.
 
-    const container = renderer._dom._document.body;
+    const container = renderer._dom.document().body;
     const reportElement = renderer.renderReport(sampleResults, container);
     const notApplicableElementCount = reportElement
       .querySelectorAll('.lh-audit--notapplicable').length;

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

@@ -10,6 +10,7 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import reportAssets from '../../generator/report-assets.js';
 import {Util} from '../../renderer/util.js';
@@ -33,13 +34,15 @@ describe('ReportUIFeatures', () => {
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     const renderer = new ReportRenderer(dom, categoryRenderer);
     const reportUIFeatures = new ReportUIFeatures(dom);
-    const container = dom.find('main', dom._document);
+    const container = dom.find('body', dom.document());
     renderer.renderReport(lhr, container);
     reportUIFeatures.initFeatures(lhr);
     return container;
   }
 
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     // Stub out matchMedia for Node.
     global.matchMedia = function() {
       return {
@@ -256,17 +259,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 +516,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-template.html

@@ -66,7 +66,6 @@
 }
 
 .tab-panel {
-  padding: 30px 0;
   border-top: 1px solid #ccc;
 }
 
@@ -101,13 +100,9 @@ body {
     <label for="tab2">Desktop</label>
 
     <div class="tab-panels">
-      <section id="mobile" class="tab-panel">
-        <main></main>
-      </section>
+      <section id="mobile" class="tab-panel"></section>
 
-      <section id="desktop" class="tab-panel">
-        <main></main>
-      </section>
+      <section id="desktop" class="tab-panel"></section>
 
     </div>
   </div>