report(lightwallet): render performance-budget section

clients/test/extension/extension-test.js

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

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

@@ -772,6 +772,11 @@ Object {
           "id": "uses-rel-preload",
           "weight": 0,
         },
+        Object {
+          "group": "budgets",
+          "id": "performance-budget",
+          "weight": 0,
+        },
         Object {
           "group": "load-opportunities",
           "id": "efficient-animated-content",
@@ -817,10 +822,6 @@ Object {
           "id": "font-display",
           "weight": 0,
         },
-        Object {
-          "id": "performance-budget",
-          "weight": 0,
-        },
         Object {
           "group": "diagnostics",
           "id": "resource-summary",

lighthouse-core/config/default-config.js

@@ -379,6 +379,7 @@ const defaultConfig = {
         {id: 'time-to-first-byte', weight: 0, group: 'load-opportunities'},
         {id: 'redirects', weight: 0, group: 'load-opportunities'},
         {id: 'uses-rel-preload', weight: 0, group: 'load-opportunities'},
+        {id: 'performance-budget', weight: 0, group: 'budgets'},
         {id: 'efficient-animated-content', weight: 0, group: 'load-opportunities'},
         {id: 'total-byte-weight', weight: 0, group: 'diagnostics'},
         {id: 'uses-long-cache-ttl', weight: 0, group: 'diagnostics'},
@@ -388,7 +389,6 @@ 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: '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,21 @@ 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 budgetsGroupEl = this.renderAuditGroup(groups.budgets);
+      const tmpl = this.dom.cloneTemplate('#tmpl-lh-budgets-header', this.templateContext);
+      budgetsGroupEl.appendChild(this.dom.find('.lh-budgets__header', tmpl));
+
+      const table = this.detailsRenderer.render(budgetAudit.result.details);
+      if (table) {
+        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,19 @@
   vertical-align: middle;
 }
 
+.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);
+}
+
+.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,6 +143,13 @@
   </div>
 </template>
 
+<!-- Lighthouse budget section header -->
+<template id="tmpl-lh-budgets-header">
+  <div class="lh-budgets__header lh-budgets__cols">
+    <div class="lh-budgets__col lh-budgets__col--one"></div>
+    <div class="lh-bubdgets__col lh-budgets__col--two"></div>
+  </div>
+</template>
 
 <!-- Lighthouse perf opportunity header -->
 <template id="tmpl-lh-opportunity-header">
@@ -152,7 +159,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 === 'load-opportunities' || audit.group === 'diagnostics')
+      && audit.group && Util.showAsPassed(audit.result));
     const passedElements = passedSection.querySelectorAll('.lh-audit');
     assert.equal(passedElements.length, passedAudits.length);
   });

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 if it is not applicable
+      if (audit.scoreDisplayMode === 'notApplicable' && audit.id !== 'performance-budget') {
         notApplicableCount++;
         audit.scoreDisplayMode = 'not_applicable';
       }

lighthouse-core/test/results/sample_v2.json

@@ -3401,6 +3401,11 @@
           "weight": 0,
           "group": "load-opportunities"
         },
+        {
+          "id": "performance-budget",
+          "weight": 0,
+          "group": "budgets"
+        },
         {
           "id": "efficient-animated-content",
           "weight": 0,
@@ -3446,10 +3451,6 @@
           "weight": 0,
           "group": "diagnostics"
         },
-        {
-          "id": "performance-budget",
-          "weight": 0
-        },
         {
           "id": "resource-summary",
           "weight": 0,

proto/sample_v2_round_trip.json

@@ -3530,6 +3530,11 @@
                     "id": "uses-rel-preload",
                     "weight": 0.0
                 },
+                {
+                    "group": "budgets",
+                    "id": "performance-budget",
+                    "weight": 0.0
+                },
                 {
                     "group": "load-opportunities",
                     "id": "efficient-animated-content",
@@ -3575,10 +3580,6 @@
                     "id": "font-display",
                     "weight": 0.0
                 },
-                {
-                    "id": "performance-budget",
-                    "weight": 0.0
-                },
                 {
                     "group": "diagnostics",
                     "id": "resource-summary",