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: collapse aggregations when all audits pass #1742

Merged
merged 5 commits into from
Feb 17, 2017
Merged

Report: collapse aggregations when all audits pass #1742

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ce92c0b
Collapse aggregations when all sub audits pass
ebidel Feb 17, 2017
d4219ba
shrink margins
ebidel Feb 17, 2017
99fa033
Update tests
ebidel Feb 17, 2017
04bdea6
FF compat
ebidel Feb 17, 2017
c1ff285
Add target val and hide cards by default
ebidel Feb 17, 2017
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
15 changes: 3 additions & 12 deletions lighthouse-core/aggregator/aggregate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,9 @@ class Aggregate {
* Compares the set of audit results to the expected values.
* @param {!Array<!AuditResult>} results The audit results.
* @param {!Array<!AggregationItem>} items The aggregation's expected values and weighting.
* @param {!boolean} aggregationIsScored Whether or not the aggregation is scored.
* @return {!Array<!AggregationResultItem>} The aggregation score.
*/
static compare(results, items, aggregationIsScored) {
static compare(results, items) {
return items.map(item => {
const expectedNames = Object.keys(item.audits);

Expand All @@ -174,21 +173,13 @@ class Aggregate {

subItems.push(filteredAndRemappedResults[e].name);

// Only add to the score if this aggregation contributes to the
// overall score.
if (!aggregationIsScored) {
return;
}

overallScore += Aggregate._convertToWeight(
filteredAndRemappedResults[e],
item.audits[e],
e);
});

if (aggregationIsScored) {
maxScore = Aggregate._getTotalWeight(item.audits);
}
maxScore = Aggregate._getTotalWeight(item.audits);

return {
overall: (overallScore / maxScore),
Expand All @@ -215,7 +206,7 @@ class Aggregate {
* @return {!AggregationResult}
*/
static aggregate(aggregation, auditResults) {
const score = Aggregate.compare(auditResults, aggregation.items, aggregation.scored);
const score = Aggregate.compare(auditResults, aggregation.items);
return {
name: aggregation.name,
description: aggregation.description,
Expand Down
71 changes: 49 additions & 22 deletions lighthouse-core/config/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,73 +258,98 @@
"name": "Using modern offline features",
"audits": {
"appcache-manifest": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"no-websql": {
"expectedValue": false
"expectedValue": true,
"weight": 1
}
}
}, {
"name": "Using modern protocols",
"audits": {
"is-on-https": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"uses-http2": {
"expectedValue": false,
"description": "Resources made by this application should be severed over HTTP/2 for improved performance."
"expectedValue": true,
"description": "Resources made by this application should be severed over HTTP/2 for improved performance.",
"weight": 1
}
}
}, {
"name": "Using bytes efficiently",
"audits": {
"unused-css-rules": {},
"uses-optimized-images": {},
"uses-responsive-images": {}
"unused-css-rules": {
"expectedValue": true,
"weight": 1
},
"uses-optimized-images": {
"expectedValue": true,
"weight": 1
},
"uses-responsive-images": {
"expectedValue": true,
"weight": 1
}
}
}, {
"name": "Using modern CSS features",
"audits": {
"no-old-flexbox": {
"expectedValue": false
"expectedValue": true,
"weight": 1
}
}
}, {
"name": "Using modern JavaScript features",
"audits": {
"uses-passive-event-listeners": {
"expectedValue": true
"expectedValue": true,
"weight": 1
},
"no-mutation-events": {
"expectedValue": false
"expectedValue": true,
"weight": 1
}
}
}, {
"name": "Avoiding APIs that harm the user experience",
"audits": {
"no-document-write": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"link-blocking-first-paint": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"script-blocking-first-paint": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"external-anchors-use-rel-noopener": {
"expectedValue": true
"expectedValue": true,
"weight": 1
},
"geolocation-on-start": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"notification-on-start": {
"expectedValue": false
"expectedValue": true,
"weight": 1
}
}
}, {
"name": "Avoiding deprecated APIs and browser interventions",
"audits": {
"deprecations": {}
"deprecations": {
"expectedValue": true,
"weight": 1
}
}
}, {
"name": "Accessibility",
Expand Down Expand Up @@ -387,11 +412,11 @@
"weight": 1
},
"critical-request-chains": {
"expectedValue": 0,
"expectedValue": true,
"weight": 1
},
"user-timings": {
"expectedValue": 0,
"expectedValue": true,
"weight": 1
}
}
Expand All @@ -405,10 +430,12 @@
"name": "New JavaScript features",
"audits": {
"no-datenow": {
"expectedValue": false
"expectedValue": true,
"weight": 1
},
"no-console-time": {
"expectedValue": false
"expectedValue": true,
"weight": 1
}
}
}]
Expand Down
6 changes: 6 additions & 0 deletions lighthouse-core/report/handlebar-helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ const handlebarHelpers = {
return calculateRating(totalScore);
},

// Converts an aggregation's score to a rating used for styling.
getAggregationScoreRating: score => {
const rating = calculateRating(score * 100);
return rating !== 'good' ? 'poor' : rating; // avg rating maps to failure for aggregation.
},

// Converts a value to a rating string, which can be used inside the report
// for color styling.
getItemRating,
Expand Down
77 changes: 65 additions & 12 deletions lighthouse-core/report/styles/report.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ span, div, p, section, header, h1, h2, li, ul {
--subheading-color: inherit;
--heading-font-size: 24px;
--heading-line-height: 32px;
--subitem-indent: 24px;
--subitem-indent: 16px;
--max-line-length: none;

--report-width: 1280px;
Expand All @@ -63,7 +63,6 @@ span, div, p, section, header, h1, h2, li, ul {
--report-header-height: 0;
--heading-font-size: 20px;
--heading-line-height: 24px;
--subitem-indent: 24px;
--max-line-length: calc(60 * var(--body-font-size));
}

Expand Down Expand Up @@ -96,6 +95,11 @@ body {
background-color: #f5f5f5;
}

summary {
cursor: pointer;
display: block; /* Firefox compat */
}

.report-error {
font-family: consolas, monospace;
}
Expand Down Expand Up @@ -408,7 +412,7 @@ body {
background-color: #fafafa;
}

.report-body__header-toggle {
.report-body__more-toggle {
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>');
width: 24px;
height: 24px;
Expand All @@ -420,25 +424,32 @@ body {
background-color: transparent;
margin: 0 8px 0 8px;
cursor: pointer;
transition: transform 150ms ease-in-out;
}

.report-body__header-container.expanded .report-body__header-toggle {
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
.report-body__header-container.expanded .report-body__more-toggle,
.aggregation details[open] .report-body__more-toggle {
transform: rotateZ(90deg);
}

.report-body__header-content {
display: none;
padding: 10px 0 10px 42px;
top: 100%;
left: 0;
position: absolute;
width: 100%;
background-color: inherit;
clip: rect(0, calc( var(--report-width) - var(--report-menu-width)), 0, 0);
opacity: 0;
visibility: hidden;
transition: all 200ms cubic-bezier(0,0,0.2,1);
border-bottom: 1px solid #ebebeb;
}

.report-body__header-container.expanded .report-body__header-content {
display: block;
border-bottom: 1px solid #ebebeb;
clip: rect(0, calc( var(--report-width) - var(--report-menu-width)), 200px, 0);
opacity: 1;
visibility: visible;
}

.report-body__header-content .config-section {
Expand Down Expand Up @@ -685,7 +696,27 @@ body {
}

.aggregation__header {
position: relative;
max-width: var(--max-line-length);
display: flex;
align-items: center;
cursor: pointer;
}

.aggregation__header .aggregation__header__score {
margin-top: 0;
position: absolute;
left: calc(-1 * var(--aggregation-icon-size) - var(--subitem-indent) / 2);
width: var(--aggregation-icon-size);
height: var(--aggregation-icon-size);
}

.aggregation__header :-moz-any(.aggregation__header__score) {
margin-top: calc(-1 * var(--subitem-indent) / 2); /* FF compat*/
}

.aggregation__header .aggregation__header__score::after {
background-size: 14px;
}

.aggregation__header > h2 {
Expand All @@ -696,12 +727,36 @@ body {
}

.aggregation {
--aggregation-icon-size: 20px;
margin-top: var(--subheading-line-height);
max-width: var(--max-line-length);
padding-left: calc(var(--aggregation-icon-size) + var(--subitem-indent) / 2);
}

.aggregation__details {
display: inline-block;
}

.aggregation__details > summary {
outline: none;
}

.aggregation__details > summary::-moz-list-bullet {
display: none;
}

.aggregation__details > summary::-webkit-details-marker {
display: none;
}

.aggregation__details > summary:focus header h2 {
outline: rgb(59, 153, 252) auto 5px;
}

.aggregation__desc {
font-size: var(--body-font-size);
/*font-style: italic;*/
color: var(--secondary-text-color);
line-height: var(--body-line-height);
margin-top: calc(var(--body-line-height) / 2);
}
Expand All @@ -714,7 +769,7 @@ body {
.subitem {
position: relative;
font-size: var(--subitem-font-size);
padding-left: calc(var(--subitem-indent) + var(--gutter-width) + var(--gutter-gap));
padding-left: calc(var(--subitem-indent) * 3);
margin-top: calc(var(--subitem-line-height) / 2);
}

Expand All @@ -733,7 +788,7 @@ body {
.subitem-result {
position: absolute;
top: 0;
left: var(--subitem-indent);
left: 0;
width: var(--gutter-width);
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -916,7 +971,6 @@ body {
min-width: 125px;
list-style-type: none;
line-height: 1.5em;
visibility: hidden;
clip: rect(0, 164px, 0, 0);
opacity: 0;
transition: all 200ms cubic-bezier(0,0,0.2,1);
Expand All @@ -928,7 +982,6 @@ body {
}

.export-button.active + .export-dropdown {
visibility: visible;
opacity: 1;
clip: rect(0, 164px, 200px, 0);
}
Expand Down
Loading