Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core(lightwallet): render timing-budget audit #9925

Merged
merged 4 commits into from
Feb 7, 2020
Merged

core(lightwallet): render timing-budget audit #9925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c72cfd
core(lightwallet): render timing-budget audit
khempenius Nov 6, 2019
53446a9
Re-trigger build tests
khempenius Nov 6, 2019
c599922
core(lightwallet): render timing-budget audit
khempenius Jan 29, 2020
caebdc9
Merge branch 'master' of https://github.com/GoogleChrome/lighthouse i…
khempenius Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ Object {
Object {
"path": "performance-budget",
},
Object {
"path": "timing-budget",
},
Object {
"path": "resource-summary",
},
Expand Down Expand Up @@ -900,6 +903,11 @@ Object {
"id": "performance-budget",
"weight": 0,
},
Object {
"group": "budgets",
"id": "timing-budget",
"weight": 0,
},
Object {
"group": "diagnostics",
"id": "resource-summary",
Expand Down
2 changes: 2 additions & 0 deletions lighthouse-core/config/default-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ const defaultConfig = {
'metrics',
'offline-start-url',
'performance-budget',
'timing-budget',
'resource-summary',
'third-party-summary',
'manual/pwa-cross-browser',
Expand Down Expand Up @@ -417,6 +418,7 @@ const defaultConfig = {
{id: 'mainthread-work-breakdown', weight: 0, group: 'diagnostics'},
{id: 'font-display', weight: 0, group: 'diagnostics'},
{id: 'performance-budget', weight: 0, group: 'budgets'},
{id: 'timing-budget', weight: 0, group: 'budgets'},
{id: 'resource-summary', weight: 0, group: 'diagnostics'},
{id: 'third-party-summary', weight: 0, group: 'diagnostics'},
// Audits past this point don't belong to a group and will not be shown automatically
Expand Down
27 changes: 17 additions & 10 deletions lighthouse-core/report/html/renderer/performance-category-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,17 +167,24 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
}

// 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);
/** @type {Array<Element>} */
const budgetTableEls = [];
['performance-budget', 'timing-budget'].forEach((id) => {
const audit = category.auditRefs.find(audit => audit.id === id);
if (audit && audit.result.details) {
const table = this.detailsRenderer.render(audit.result.details);
if (table) {
table.id = id;
table.classList.add('lh-audit');
budgetTableEls.push(table);
}
}
});
if (budgetTableEls.length > 0) {
const budgetsGroupEl = this.renderAuditGroup(groups.budgets);
budgetTableEls.forEach(table => budgetsGroupEl.appendChild(table));
budgetsGroupEl.classList.add('lh-audit-group--budgets');
element.appendChild(budgetsGroupEl);
}

// Opportunities
Expand Down
6 changes: 4 additions & 2 deletions lighthouse-core/report/html/report-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -860,8 +860,9 @@
}

/* 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){
.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(4),
.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(5),
.lh-audit-group--budgets #timing-budget tbody tr td:nth-child(3) {
color: var(--color-red-700);
}

Expand All @@ -872,6 +873,7 @@

.lh-audit-group--budgets .lh-table {
width: 100%;
margin: 16px 0px 16px 0px;
}

.lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before {
Expand Down
27 changes: 21 additions & 6 deletions lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,28 +190,43 @@ describe('PerfCategoryRenderer', () => {
});

describe('budgets', () => {
it('renders a performance budget', () => {
it('renders the group and header', () => {
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');
it('renders the performance budget table', () => {
const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
const budgetTable = categoryDOM.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', () => {
it('renders the timing budget table', () => {
const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
const budgetTable = categoryDOM.querySelector('#timing-budget.lh-table');
assert.ok(budgetTable);

const lhrBudgetEntries = sampleResults.audits['timing-budget'].details.items;
const tableRows = budgetTable.querySelectorAll('tbody > tr');
assert.strictEqual(tableRows.length, lhrBudgetEntries.length);
});

it('does not render the budgets section when all budget audits are 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;
['performance-budget', 'timing-budget'].forEach((id) => {
const budgetRef = budgetlessCategory.auditRefs.find(a => a.id === id);
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');
Expand Down
100 changes: 94 additions & 6 deletions lighthouse-core/test/results/sample_v2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1429,6 +1429,65 @@
]
}
},
"timing-budget": {
"id": "timing-budget",
"title": "Timing budget",
"description": "Set a timing budget to help you keep an eye on the performance of your site. Performant sites load fast and respond to user input events quickly. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "table",
"headings": [
{
"key": "label",
"itemType": "text",
"text": "Metric"
},
{
"key": "measurement",
"itemType": "ms",
"text": "Measurement"
},
{
"key": "overBudget",
"itemType": "ms",
"text": "Over Budget"
}
],
"items": [
{
"metric": "first-cpu-idle",
"label": "First CPU Idle",
"measurement": 4927,
"overBudget": 2027
},
{
"metric": "interactive",
"label": "Time to Interactive",
"measurement": 4927,
"overBudget": 2027
},
{
"metric": "first-meaningful-paint",
"label": "First Meaningful Paint",
"measurement": 3969,
"overBudget": 1969
},
{
"metric": "first-contentful-paint",
"label": "First Contentful Paint",
"measurement": 3969,
"overBudget": 969
},
{
"metric": "max-potential-fid",
"label": "Max Potential First Input Delay",
"measurement": 123,
"overBudget": 23
}
]
}
},
"resource-summary": {
"id": "resource-summary",
"title": "Keep request counts low and transfer sizes small",
Expand Down Expand Up @@ -3708,6 +3767,11 @@
"weight": 0,
"group": "budgets"
},
{
"id": "timing-budget",
"weight": 0,
"group": "budgets"
},
{
"id": "resource-summary",
"weight": 0,
Expand Down Expand Up @@ -4779,6 +4843,12 @@
"duration": 100,
"entryType": "measure"
},
{
"startTime": 0,
"name": "lh:audit:timing-budget",
"duration": 100,
"entryType": "measure"
},
{
"startTime": 0,
"name": "lh:audit:resource-summary",
Expand Down Expand Up @@ -5459,7 +5529,8 @@
"audits[without-javascript].description"
],
"lighthouse-core/lib/i18n/i18n.js | firstContentfulPaintMetric": [
"audits[first-contentful-paint].title"
"audits[first-contentful-paint].title",
"audits[timing-budget].details.items[3].label"
],
"lighthouse-core/audits/metrics/first-contentful-paint.js | description": [
"audits[first-contentful-paint].description"
Expand Down Expand Up @@ -5515,7 +5586,8 @@
}
],
"lighthouse-core/lib/i18n/i18n.js | firstMeaningfulPaintMetric": [
"audits[first-meaningful-paint].title"
"audits[first-meaningful-paint].title",
"audits[timing-budget].details.items[2].label"
],
"lighthouse-core/audits/metrics/first-meaningful-paint.js | description": [
"audits[first-meaningful-paint].description"
Expand Down Expand Up @@ -5583,7 +5655,8 @@
"audits[total-blocking-time].description"
],
"lighthouse-core/lib/i18n/i18n.js | maxPotentialFIDMetric": [
"audits[max-potential-fid].title"
"audits[max-potential-fid].title",
"audits[timing-budget].details.items[4].label"
],
"lighthouse-core/audits/metrics/max-potential-fid.js | description": [
"audits[max-potential-fid].description"
Expand Down Expand Up @@ -5631,13 +5704,15 @@
}
],
"lighthouse-core/lib/i18n/i18n.js | firstCPUIdleMetric": [
"audits[first-cpu-idle].title"
"audits[first-cpu-idle].title",
"audits[timing-budget].details.items[0].label"
],
"lighthouse-core/audits/metrics/first-cpu-idle.js | description": [
"audits[first-cpu-idle].description"
],
"lighthouse-core/lib/i18n/i18n.js | interactiveMetric": [
"audits.interactive.title"
"audits.interactive.title",
"audits[timing-budget].details.items[1].label"
],
"lighthouse-core/audits/metrics/interactive.js | description": [
"audits.interactive.description"
Expand Down Expand Up @@ -5811,7 +5886,8 @@
"audits[resource-summary].details.headings[2].text"
],
"lighthouse-core/lib/i18n/i18n.js | columnOverBudget": [
"audits[performance-budget].details.headings[4].text"
"audits[performance-budget].details.headings[4].text",
"audits[timing-budget].details.headings[2].text"
],
"lighthouse-core/lib/i18n/i18n.js | scriptResourceType": [
"audits[performance-budget].details.items[0].label",
Expand Down Expand Up @@ -5881,6 +5957,18 @@
"audits[performance-budget].details.items[8].label",
"audits[resource-summary].details.items[3].label"
],
"lighthouse-core/audits/timing-budget.js | title": [
"audits[timing-budget].title"
],
"lighthouse-core/audits/timing-budget.js | description": [
"audits[timing-budget].description"
],
"lighthouse-core/audits/timing-budget.js | columnTimingMetric": [
"audits[timing-budget].details.headings[0].text"
],
"lighthouse-core/audits/timing-budget.js | columnMeasurement": [
"audits[timing-budget].details.headings[1].text"
],
"lighthouse-core/audits/resource-summary.js | title": [
"audits[resource-summary].title"
],
Expand Down
Loading