report(lightwallet): render performance-budget section

clients/test/extension/extension-test.js

@@ -135,8 +135,10 @@ describe('Lighthouse chrome extension', function() {
     for (const category of lighthouseCategories) {
       let expected = getAuditsOfCategory(category);
       if (category === 'performance') {
-        expected = getAuditsOfCategory(category).filter(a => !!a.group);
+        expected = getAuditsOfCategory(category)
+          .filter(a => !!a.group && a.id !== 'performance-budget');
       }
+      // Performance budget audit is not included in the Chrome extension of Lighthouse
       expected = expected.map(audit => audit.id);
       const elementIds = await getAuditElementsIds({category, selector: selectors.audits});
 

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

@@ -818,6 +818,7 @@ Object {
           "weight": 0,
         },
         Object {
+          "group": "budgets",
           "id": "performance-budget",
           "weight": 0,
         },

lighthouse-core/config/default-config.js

@@ -388,7 +388,7 @@ const defaultConfig = {
         {id: 'bootup-time', weight: 0, group: 'diagnostics'},
         {id: 'mainthread-work-breakdown', weight: 0, group: 'diagnostics'},
         {id: 'font-display', weight: 0, group: 'diagnostics'},
-        {id: 'performance-budget', weight: 0},
+        {id: 'performance-budget', weight: 0, group: 'budgets'},
         {id: 'resource-summary', weight: 0, group: 'diagnostics'},
         // Audits past this point don't belong to a group and will not be shown automatically
         {id: 'network-requests', weight: 0},

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -165,6 +165,20 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       filmstripEl && timelineEl.appendChild(filmstripEl);
     }
 
+    // Budgets
+    const budgetAudit = category.auditRefs.find(audit => audit.id === 'performance-budget');
+    if (budgetAudit && budgetAudit.result.details) {
+      const table = this.detailsRenderer.render(budgetAudit.result.details);
+      if (table) {
+        table.id = budgetAudit.id;
+        table.classList.add('lh-audit');
+        const budgetsGroupEl = this.renderAuditGroup(groups.budgets);
+        budgetsGroupEl.appendChild(table);
+        budgetsGroupEl.classList.add('lh-audit-group--budgets');
+        element.appendChild(budgetsGroupEl);
+      }
+    }
+
     // Opportunities
     const opportunityAudits = category.auditRefs
         .filter(audit => audit.group === 'load-opportunities' && !Util.showAsPassed(audit.result))

lighthouse-core/report/html/report-styles.css

@@ -852,6 +852,21 @@
   vertical-align: middle;
 }
 
+/* Style the "over budget" columns red. */
+.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4),
+.lh-audit-group--budgets .lh-table tbody tr td:nth-child(5){
+  color: var(--color-red-700);
+}
+
+/* Align the "over budget request count" text to be close to the "over budget bytes" column. */
+.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4){
+  text-align: right;
+}
+
+.lh-audit-group--budgets .lh-table {
+  width: 100%;
+}
+
 .lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before {
   content: '';
   background-image: var(--pwa-fast-reliable-gray-url);

lighthouse-core/report/html/templates.html

@@ -143,7 +143,6 @@
   </div>
 </template>
 
-
 <!-- Lighthouse perf opportunity header -->
 <template id="tmpl-lh-opportunity-header">
   <div class="lh-load-opportunity__header lh-load-opportunity__cols">
@@ -152,7 +151,6 @@
   </div>
 </template>
 
-
 <!-- Lighthouse score container -->
 <template id="tmpl-lh-scores-wrapper">
   <style>

lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js

@@ -68,7 +68,7 @@ describe('PerfCategoryRenderer', () => {
   it('renders the sections', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group');
-    assert.equal(sections.length, 4);
+    assert.equal(sections.length, 5);
   });
 
   it('renders the metrics', () => {
@@ -151,7 +151,8 @@ describe('PerfCategoryRenderer', () => {
     const passedSection = categoryDOM.querySelector('.lh-category > .lh-clump--passed');
 
     const passedAudits = category.auditRefs.filter(audit =>
-        audit.group && audit.group !== 'metrics' && Util.showAsPassed(audit.result));
+      audit.group && audit.group !== 'metrics' && audit.id !== 'performance-budget'
+        && Util.showAsPassed(audit.result));
     const passedElements = passedSection.querySelectorAll('.lh-audit');
     assert.equal(passedElements.length, passedAudits.length);
   });
@@ -175,6 +176,36 @@ describe('PerfCategoryRenderer', () => {
     });
   });
 
+  describe('budgets', () => {
+    it('renders a performance budget', () => {
+      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
+
+      const budgetsGroup = categoryDOM.querySelector('.lh-audit-group.lh-audit-group--budgets');
+      assert.ok(budgetsGroup);
+
+      const header = budgetsGroup.querySelector('.lh-audit-group__header');
+      assert.ok(header);
+
+      const budgetTable = budgetsGroup.querySelector('#performance-budget.lh-table');
+      assert.ok(budgetTable);
+
+      const lhrBudgetEntries = sampleResults.audits['performance-budget'].details.items;
+      const tableRows = budgetTable.querySelectorAll('tbody > tr');
+      assert.strictEqual(tableRows.length, lhrBudgetEntries.length);
+    });
+
+    it('does not render a budget table when performance-budget audit is notApplicable', () => {
+      const budgetlessCategory = JSON.parse(JSON.stringify(category));
+      const budgetRef = budgetlessCategory.auditRefs.find(a => a.id === 'performance-budget');
+      budgetRef.result.scoreDisplayMode = 'notApplicable';
+      delete budgetRef.result.details;
+
+      const categoryDOM = renderer.render(budgetlessCategory, sampleResults.categoryGroups);
+      const budgetsGroup = categoryDOM.querySelector('.lh-audit-group.lh-audit-group--budgets');
+      assert.strictEqual(budgetsGroup, null);
+    });
+  });
+
   // This is done all in CSS, but tested here.
   describe('metric description toggles', () => {
     let container;

lighthouse-core/test/report/html/renderer/report-renderer-test.js

@@ -255,7 +255,8 @@ describe('ReportRenderer', () => {
 
     let notApplicableCount = 0;
     Object.values(clonedSampleResult.audits).forEach(audit => {
-      if (audit.scoreDisplayMode === 'notApplicable') {
+      // The performance-budget audit is omitted from the DOM when it is not applicable
+      if (audit.scoreDisplayMode === 'notApplicable' && audit.id !== 'performance-budget') {
         notApplicableCount++;
         audit.scoreDisplayMode = 'not_applicable';
       }

lighthouse-core/test/results/sample_v2.json

@@ -3448,7 +3448,8 @@
         },
         {
           "id": "performance-budget",
-          "weight": 0
+          "weight": 0,
+          "group": "budgets"
         },
         {
           "id": "resource-summary",

proto/sample_v2_round_trip.json

@@ -2453,51 +2453,51 @@
             "details": {
                 "headings": [
                     {
-                        "itemType": "node", 
-                        "key": "tapTarget", 
+                        "itemType": "node",
+                        "key": "tapTarget",
                         "text": "Tap Target"
-                    }, 
+                    },
                     {
-                        "itemType": "text", 
-                        "key": "size", 
+                        "itemType": "text",
+                        "key": "size",
                         "text": "Size"
-                    }, 
+                    },
                     {
-                        "itemType": "node", 
-                        "key": "overlappingTarget", 
+                        "itemType": "node",
+                        "key": "overlappingTarget",
                         "text": "Overlapping Target"
                     }
-                ], 
+                ],
                 "items": [
                     {
-                        "height": 18.0, 
-                        "overlapScoreRatio": 0.8333333333333334, 
+                        "height": 18.0,
+                        "overlapScoreRatio": 0.8333333333333334,
                         "overlappingTarget": {
-                            "path": "3,HTML,1,BODY,18,BUTTON", 
-                            "selector": "body > button.small-button", 
-                            "snippet": "<button class=\"small-button\">Do something else</button>", 
+                            "path": "3,HTML,1,BODY,18,BUTTON",
+                            "selector": "body > button.small-button",
+                            "snippet": "<button class=\"small-button\">Do something else</button>",
                             "type": "node"
-                        }, 
-                        "overlappingTargetScore": 720.0, 
-                        "size": "200x18", 
+                        },
+                        "overlappingTargetScore": 720.0,
+                        "size": "200x18",
                         "tapTarget": {
-                            "path": "3,HTML,1,BODY,17,BUTTON", 
-                            "selector": "body > button.small-button", 
-                            "snippet": "<button class=\"small-button\">Do something</button>", 
+                            "path": "3,HTML,1,BODY,17,BUTTON",
+                            "selector": "body > button.small-button",
+                            "snippet": "<button class=\"small-button\">Do something</button>",
                             "type": "node"
-                        }, 
-                        "tapTargetScore": 864.0, 
+                        },
+                        "tapTargetScore": 864.0,
                         "width": 200.0
                     }
-                ], 
+                ],
                 "type": "table"
-            }, 
-            "displayValue": "0% appropriately sized tap targets", 
-            "id": "tap-targets", 
-            "score": 0.0, 
-            "scoreDisplayMode": "binary", 
+            },
+            "displayValue": "0% appropriately sized tap targets",
+            "id": "tap-targets",
+            "score": 0.0,
+            "scoreDisplayMode": "binary",
             "title": "Tap targets are not sized appropriately"
-        }, 
+        },
         "td-headers-attr": {
             "description": "Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users. [Learn more](https://dequeuniversity.com/rules/axe/3.1/td-headers-attr?application=lighthouse).",
             "id": "td-headers-attr",
@@ -3576,6 +3576,7 @@
                     "weight": 0.0
                 },
                 {
+                    "group": "budgets",
                     "id": "performance-budget",
                     "weight": 0.0
                 },
@@ -3773,11 +3774,11 @@
                     "id": "structured-data",
                     "weight": 0.0
                 }
-            ], 
-            "description": "These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. [Learn more](https://support.google.com/webmasters/answer/35769).", 
-            "id": "seo", 
-            "manualDescription": "Run these additional validators on your site to check additional SEO best practices.", 
-            "score": 0.73, 
+            ],
+            "description": "These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. [Learn more](https://support.google.com/webmasters/answer/35769).",
+            "id": "seo",
+            "manualDescription": "Run these additional validators on your site to check additional SEO best practices.",
+            "score": 0.73,
             "title": "SEO"
         }
     },