report: group perf audits by details type

flow-report/src/summary/category.tsx

@@ -64,8 +64,8 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
     return audit.result.score !== null &&
       // Metrics should not be displayed in this group.
       audit.group !== 'metrics' &&
-      // Audits in performance without a group are hidden.
-      (audit.group !== undefined || category.id !== 'performance') &&
+      // Audits in performance group "hidden" should not be counted.
+      (audit.group !== 'hidden' || category.id !== 'performance') &&
       // 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.

flow-report/test/summary/category-test.tsx

@@ -51,7 +51,7 @@ describe('SummaryTooltip', () => {
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
@@ -76,7 +76,7 @@ describe('SummaryTooltip', () => {
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -101,7 +101,7 @@ describe('SummaryTooltip', () => {
     expect(root.getByText('100')).toBeTruthy();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders informative audit count if any', async () => {
@@ -127,7 +127,7 @@ describe('SummaryTooltip', () => {
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('2 passable audits')).toBeTruthy();
     expect(root.getByText('1 informative audit')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders highest impact audits', async () => {
@@ -192,7 +192,7 @@ describe('SummaryTooltip', () => {
       auditRefs: [
         /* eslint-disable max-len */
         {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1, group: 'hidden'},
         {result: {score: null, scoreDisplayMode: 'informative', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
         /* eslint-enable max-len */
       ],

lighthouse-cli/test/cli/__snapshots__/index-test.js.snap

@@ -921,252 +921,224 @@ Object {
           "weight": 15,
         },
         Object {
+          "group": "hidden",
           "id": "max-potential-fid",
           "weight": 0,
         },
         Object {
           "acronym": "FMP",
+          "group": "hidden",
           "id": "first-meaningful-paint",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "render-blocking-resources",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "uses-responsive-images",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "offscreen-images",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "unminified-css",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "unminified-javascript",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "unused-css-rules",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "unused-javascript",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "uses-optimized-images",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "modern-image-formats",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "uses-text-compression",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "uses-rel-preconnect",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "server-response-time",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "redirects",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "uses-rel-preload",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "uses-http2",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "efficient-animated-content",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "duplicated-javascript",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "legacy-javascript",
           "weight": 0,
         },
         Object {
-          "group": "load-opportunities",
           "id": "preload-lcp-image",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "total-byte-weight",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "uses-long-cache-ttl",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "dom-size",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "critical-request-chains",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "user-timings",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "bootup-time",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "mainthread-work-breakdown",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "font-display",
           "weight": 0,
         },
         Object {
-          "group": "budgets",
-          "id": "performance-budget",
-          "weight": 0,
-        },
-        Object {
-          "group": "budgets",
-          "id": "timing-budget",
-          "weight": 0,
-        },
-        Object {
-          "group": "diagnostics",
           "id": "resource-summary",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "third-party-summary",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "third-party-facades",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "largest-contentful-paint-element",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "lcp-lazy-loaded",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "layout-shift-elements",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "uses-passive-event-listeners",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "no-document-write",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "long-tasks",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "non-composited-animations",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "unsized-images",
           "weight": 0,
         },
         Object {
-          "group": "diagnostics",
           "id": "viewport",
           "weight": 0,
         },
         Object {
+          "group": "budgets",
+          "id": "performance-budget",
+          "weight": 0,
+        },
+        Object {
+          "group": "budgets",
+          "id": "timing-budget",
+          "weight": 0,
+        },
+        Object {
+          "group": "hidden",
           "id": "network-requests",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "network-rtt",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "network-server-latency",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "main-thread-tasks",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "diagnostics",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "metrics",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "screenshot-thumbnails",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "final-screenshot",
           "weight": 0,
         },
         Object {
+          "group": "hidden",
           "id": "script-treemap-data",
           "weight": 0,
         },
@@ -1379,6 +1351,9 @@ Object {
       "description": "More information about the performance of your application. These numbers don't [directly affect](https://web.dev/performance-scoring/) the Performance score.",
       "title": "Diagnostics",
     },
+    "hidden": Object {
+      "title": "",
+    },
     "load-opportunities": Object {
       "description": "These suggestions can help your page load faster. They don't [directly affect](https://web.dev/performance-scoring/) the Performance score.",
       "title": "Opportunities",
@@ -1575,6 +1550,7 @@ Object {
     "performance": Object {
       "auditRefs": Array [
         Object {
+          "group": "hidden",
           "id": "metrics",
           "weight": 0,
         },
@@ -1640,6 +1616,9 @@ Object {
       "description": "More information about the performance of your application. These numbers don't [directly affect](https://web.dev/performance-scoring/) the Performance score.",
       "title": "Diagnostics",
     },
+    "hidden": Object {
+      "title": "",
+    },
     "load-opportunities": Object {
       "description": "These suggestions can help your page load faster. They don't [directly affect](https://web.dev/performance-scoring/) the Performance score.",
       "title": "Opportunities",