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

Jump to bottom

report(lightwallet): render performance-budget section #8708

Merged
merged 5 commits into from
May 7, 2019
Merged

report(lightwallet): render performance-budget section #8708

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1409418
lightwallet: Render 'budgets' section
khempenius May 4, 2019
1aaa364
lighwallet: update test
khempenius May 4, 2019
bb9353b
Merge branch 'master' of https://github.com/GoogleChrome/lighthouse i…
khempenius May 6, 2019
85f829b
Lightwallet: update rendering for budgets section
khempenius May 6, 2019
24089f0
lightwallet: update tests for budgets rendering
khempenius May 6, 2019
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
9 changes: 5 additions & 4 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 @@ -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",
Expand Down Expand Up @@ -817,10 +822,6 @@ Object {
"id": "font-display",
"weight": 0,
},
Object {
"id": "performance-budget",
"weight": 0,
},
Object {
"group": "diagnostics",
"id": "resource-summary",
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/config/default-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
khempenius marked this conversation as resolved.
Show resolved Hide resolved
{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'},
Expand All @@ -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},
Expand Down
15 changes: 15 additions & 0 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 @@ -166,6 +166,21 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
filmstripEl && timelineEl.appendChild(filmstripEl);
}

// Budgets
const budgetAudit = category.auditRefs.find((audit) => audit.id === 'performance-budget');
khempenius marked this conversation as resolved.
Show resolved Hide resolved
if (budgetAudit && budgetAudit.result.details) {
const budgetsGroupEl = this.renderAuditGroup(groups.budgets);
khempenius marked this conversation as resolved.
Show resolved Hide resolved
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) {
khempenius marked this conversation as resolved.
Show resolved Hide resolved
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))
Expand Down
13 changes: 13 additions & 0 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 @@ -837,6 +837,19 @@
vertical-align: middle;
}

.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4),
khempenius marked this conversation as resolved.
Show resolved Hide resolved
.lh-audit-group--budgets .lh-table tbody tr td:nth-child(5){
khempenius marked this conversation as resolved.
Show resolved Hide resolved
color: var(--color-red-700);
}

.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4){
khempenius marked this conversation as resolved.
Show resolved Hide resolved
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);
Expand Down
8 changes: 7 additions & 1 deletion lighthouse-core/report/html/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,13 @@
</div>
</template>

<!-- Lighthouse budget section header -->
<template id="tmpl-lh-budgets-header">
khempenius marked this conversation as resolved.
Show resolved Hide resolved
khempenius marked this conversation as resolved.
Show resolved Hide resolved
<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">
Expand All @@ -152,7 +159,6 @@
</div>
</template>


<!-- Lighthouse score container -->
<template id="tmpl-lh-scores-wrapper">
<style>
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -150,7 +150,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));
khempenius marked this conversation as resolved.
Show resolved Hide resolved
khempenius marked this conversation as resolved.
Show resolved Hide resolved
const passedElements = passedSection.querySelectorAll('.lh-audit');
assert.equal(passedElements.length, passedAudits.length);
});
Expand Down
7 changes: 3 additions & 4 deletions lighthouse-core/test/report/html/renderer/report-renderer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
khempenius marked this conversation as resolved.
Show resolved Hide resolved
if (audit.scoreDisplayMode === 'notApplicable' && audit.id !== 'performance-budget') {
notApplicableCount++;
audit.scoreDisplayMode = 'not_applicable';
}
Expand All @@ -265,10 +266,8 @@ describe('ReportRenderer', () => {

const container = renderer._dom._document.body;
const reportElement = renderer.renderReport(sampleResults, container);
// TODO(khempenius): Remove "+1" once budgets renderer code is added.
// Until budgets renderer code is added, JSON vs. DOM comparison will differ by 1.
const notApplicableElementCount = reportElement
.querySelectorAll('.lh-audit--notapplicable').length;
assert.strictEqual(notApplicableCount, notApplicableElementCount + 1);
assert.strictEqual(notApplicableCount, notApplicableElementCount);
});
});
9 changes: 5 additions & 4 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 @@ -3162,6 +3162,11 @@
"weight": 0,
"group": "load-opportunities"
},
{
"id": "performance-budget",
"weight": 0,
"group": "budgets"
},
{
"id": "efficient-animated-content",
"weight": 0,
Expand Down Expand Up @@ -3207,10 +3212,6 @@
"weight": 0,
"group": "diagnostics"
},
{
"id": "performance-budget",
"weight": 0
},
{
"id": "resource-summary",
"weight": 0,
Expand Down
9 changes: 5 additions & 4 deletions proto/sample_v2_round_trip.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3398,6 +3398,11 @@
"id": "uses-rel-preload",
"weight": 0.0
},
{
"group": "budgets",
"id": "performance-budget",
"weight": 0.0
},
{
"group": "load-opportunities",
"id": "efficient-animated-content",
Expand Down Expand Up @@ -3443,10 +3448,6 @@
"id": "font-display",
"weight": 0.0
},
{
"id": "performance-budget",
"weight": 0.0
},
{
"group": "diagnostics",
"id": "resource-summary",
Expand Down