diff --git a/clients/test/extension/extension-test.js b/clients/test/extension/extension-test.js
index 1517e5c00b2d..63e86e88cd6d 100644
--- a/clients/test/extension/extension-test.js
+++ b/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});
diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
index d1e45ec5d810..1cb302ac3fa8 100644
--- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
+++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
@@ -818,6 +818,7 @@ Object {
"weight": 0,
},
Object {
+ "group": "budgets",
"id": "performance-budget",
"weight": 0,
},
diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js
index 9184e54928f1..c460eaf90027 100644
--- a/lighthouse-core/config/default-config.js
+++ b/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},
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
index 0575015c025e..29903bf39eaf 100644
--- a/lighthouse-core/report/html/renderer/performance-category-renderer.js
+++ b/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))
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 310b00fac7e5..98ca7f1966b1 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/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);
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index f63d437baceb..54ab10cf5f3b 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -143,7 +143,6 @@
-
-