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

Lighthouse Report Style Refresh #926

Merged
merged 10 commits into from
Nov 10, 2016
Merged

Lighthouse Report Style Refresh #926

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7206622
Refresh Lighthouse report
chowse Nov 9, 2016
3b84bbe
Fixed bug: technology sections visible by default
chowse Nov 9, 2016
22d1646
Fixed eslint errors
chowse Nov 9, 2016
b24908e
* Added debug string field to report
chowse Nov 9, 2016
c226478
* eslint fixes
chowse Nov 9, 2016
9cbb0e3
Rewrote 'and' Handlebar helper to remove spread operator
chowse Nov 9, 2016
08bdd0d
Fixed speedline spacing
chowse Nov 9, 2016
7aae333
eslint fix
chowse Nov 9, 2016
ab2088b
Removed stylesheet comment from report.html
chowse Nov 9, 2016
ad53532
Removed feature/technology toggle
chowse Nov 9, 2016
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
46 changes: 15 additions & 31 deletions lighthouse-core/formatters/partials/accessibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,15 @@
<style>
.axe-violation {
color: #D0021B;
}

.axe-violation__help {
color: #76B530;
}

.axe-violation__help-minor,
.axe-violation__help-moderate {
color: #F5A623;
}

.axe-violation__help-serious,
.axe-violation__help--critical {
color: #D0021B;
}
</style>
<div class="axe-violation">
<details>
<summary>
<a class="axe-violation__help--{{ this.impact }}" href="{{ this.helpUrl }}" target="_blank">{{ this.help }}</a>
</summary>
<ul>
{{#each this.nodes}}
<li><code>{{ this.target }}</code></li>
{{/each}}
</ul>
</details>
</div>
<details class="subitem__details">
<summary class="subitem__detail">
{{#if (gt this.nodes.length 1)}}
{{this.nodes.length}} elements fail this test
{{else}}
{{this.nodes.length}} element fails this test
{{/if}}
<a href="{{ this.helpUrl }}" target="_blank"><small>learn more</small></a>
</summary>
<ul class="subitem__details">
{{#each this.nodes}}
<li class="subitem__detail"><code>{{ this.target }}</code></li>
{{/each}}
</ul>
</details>
14 changes: 7 additions & 7 deletions lighthouse-core/formatters/partials/critical-request-chains.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,11 @@
{{/each}}
{{/inline}}

<div class="cnc-tree">
<div>Longest request chain (shorter is better): <strong>{{longestChain this}}</strong></div>
<div>Longest chain duration (shorter is better): <strong>{{formatTime (longestDuration this)}}ms</strong></div>
<div>Longest chain transfer size (smaller is better): <strong>{{formatTransferSize (longestChainTransferSize this)}}KB</strong></div>
<div>
<ul class="subitem__details">
<li class="subitem__detail">Longest request chain (shorter is better): <strong>{{longestChain this}}</strong></li>
<li class="subitem__detail">Longest chain duration (shorter is better): <strong>{{formatTime (longestDuration this)}}ms</strong></li>
<li class="subitem__detail">Longest chain transfer size (smaller is better): <strong>{{formatTransferSize (longestChainTransferSize this)}}KB</strong></li>
<li class="subitem__detail">
<div>Initial navigation</div>
{{#createTreeRenderContext this}}
{{#each this.tree }}
Expand All @@ -115,5 +115,5 @@
{{/createContextFor}}
{{/each}}
{{/createTreeRenderContext}}
</div>
</div>
</li>
</ul>
10 changes: 4 additions & 6 deletions lighthouse-core/formatters/partials/speedline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
}
</style>

<div>
<div class="speedline-measures">
<div>First Visual Change: <strong>{{this.first}}ms</strong></div>
<div>Last Visual Change: <strong>{{this.complete}}ms</strong></div>
</div>
</div>
<ul class="subitem__details">
<li class="subitem__detail">First Visual Change: <strong>{{this.first}}ms</strong></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 space indent to be consistent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

<li class="subitem__detail">Last Visual Change: <strong>{{this.complete}}ms</strong></li>
</ul>
40 changes: 17 additions & 23 deletions lighthouse-core/formatters/partials/url-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
<style>
.http-resources {
font-size: 14px;
}
.http-resource__url {
margin-right: 8px;
}
.http-resource__protocol,
.http-resource__code {
color: #999;
color: var(--secondary-text-color);
}
.http-resource__code {
text-overflow: ellipsis;
overflow: hidden;
}
</style>

<div>
<details class="http-resources">
<summary>URLs</summary>
{{#each this}}
<div class="http-resource">
<span class="http-resource__url">{{this.url}}</span>
{{#if this.label}}
<span class="http-resource__protocol">({{this.label}})</span>
{{/if}}
{{#if this.code}}
<pre class="http-resource__code">{{this.code}}</pre>
{{/if}}
</div>
{{/each}}
</details>
</div>
<details class="subitem__details">
<summary class="subitem__detail">URLs</summary>
<ul class="subitem__details">
{{#each this}}
<li class="subitem__detail http-resource">
<span class="http-resource__url">{{this.url}}</span>
{{#if this.label}}
<span class="http-resource__protocol">({{this.label}})</span>
{{/if}}
{{#if this.code}}
<pre class="http-resource__code">{{this.code}}</pre>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something is up with the indentation of code snippets:

screen shot 2016-11-09 at 10 28 33 am

before:
screen shot 2016-11-09 at 10 28 56 am

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need a test case to reproduce this. Where can I see some examples with the old flexbox?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Start a server in lighthouse/lighthouse-cli/test/fixtures/dobetterweb and run:

node lighthouse-cli --output=html --output-path=results.html http://localhost:8080/dbw_tester.html

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose you could also use a jsbin: http://jsbin.com/ruzanisodu

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can reproduce, but can't identify the cause. The extra leading space is within the string (extendedInfo.value.code). That extra space doesn't appear in the original page, though. I tracked it through StyleHelper.getFormattedStyleRule, which doesn't appear to add any extra whitespace. I didn't change the element or the styling applied to that element directly. No Handlebars helpers are being applied to the string. I'm at a loss to what's causing this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries. Thanks for investigating. I can look into this later.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a blocker on the PR? @paulirish

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nope not a blocker.

eric can you give this a green check? :)

{{/if}}
</li>
{{/each}}
</ul>
</details>
28 changes: 11 additions & 17 deletions lighthouse-core/formatters/partials/user-timings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,17 @@
<style>
.ut-measures {
font-size: 14px
}

.ut-measure_listing-duration {
font-weight: bold
}
</style>

<div>
<div class="ut-measures">
{{#each this}}
<div>
{{#if this.isMark}}
<span class="ut-measure_listing-duration">Mark: {{ decimal this.startTime }}ms</span> - {{ this.name }}
{{else}}
<span class="ut-measure_listing-duration">Measure {{ decimal this.duration }}ms</span> - {{ this.name }}
{{/if}}
</div>
{{/each}}
</div>
</div>
<ul class="subitem__details">
{{#each this}}
<li class="subitem__detail">
{{#if this.isMark}}
<strong class="ut-measure_listing-duration">Mark: {{ decimal this.startTime }}ms</strong> - {{ this.name }}
{{else}}
<strong class="ut-measure_listing-duration">Measure {{ decimal this.duration }}ms</strong> - {{ this.name }}
{{/if}}
</li>
{{/each}}
</ul>
27 changes: 24 additions & 3 deletions lighthouse-core/report/report-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,8 @@ class ReportGenerator {
// for color styling.
Handlebars.registerHelper('getItemRating', getItemRating);

Handlebars.registerHelper('showHelpText', value => {
return getItemRating(value) === RATINGS.GOOD.label ? 'hidden' : '';
});
Handlebars.registerHelper('shouldShowHelpText',
value => (getItemRating(value) !== RATINGS.GOOD.label));

// Convert numbers to fixed point decimals
Handlebars.registerHelper('decimal', number => {
Expand All @@ -104,6 +103,27 @@ class ReportGenerator {
}
return number;
});

// value is boolean?
Handlebars.registerHelper('is-bool', value => (typeof value === 'boolean'));

// a > b
Handlebars.registerHelper('gt', (a, b) => (a > b));

// !value
Handlebars.registerHelper('not', value => !value);

// arg1 && arg2 && ... && argn
Handlebars.registerHelper('and', (...args) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

travis is failing b/c node 5 doesn't support the spread operator in function args. You'll have to use arguments.

args.pop();
let arg;
for (arg of args) {
if (!arg) {
break;
}
}
return arg;
});
}

/**
Expand Down Expand Up @@ -222,6 +242,7 @@ class ReportGenerator {
lighthouseVersion: results.lighthouseVersion,
generatedTime: this._formatTime(results.generatedTime),
css: this.getReportCSS(inline),
reportContext: 'extension', // devtools, extension, cli
script: this.getReportJS(inline),
aggregations: results.aggregations,
auditsByCategory: this._createPWAAuditsByCategory(results.aggregations)
Expand Down
11 changes: 4 additions & 7 deletions lighthouse-core/report/scripts/lighthouse-report.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ function LighthouseReport() {
this.viewUserFeature = document.querySelector('.js-report-by-user-feature');
this.viewTechnology = document.querySelector('.js-report-by-technology');
this.reportItems = document.querySelectorAll('.report-section__item');
this.helpToggles = document.querySelectorAll('.subitem__help-toggle');

this.updateView = this.updateView.bind(this);
this.toggleHelpText = this.toggleHelpText.bind(this);
Expand All @@ -50,18 +51,14 @@ LighthouseReport.prototype = {
},

toggleHelpText: function(e) {
if (e.target.classList.contains('report-section__item-help-toggle')) {
const el = e.currentTarget.querySelector('.report-section__item-helptext');
if (el) {
el.hidden = !el.hidden;
}
}
const item = e.currentTarget.closest('.subitem');
item.classList.toggle('--show-help');
},

addEventListeners: function() {
this.printButton.addEventListener('click', this.onPrint);
this.checkboxToggleView.addEventListener('change', this.updateView);
[...this.reportItems].forEach(node => {
[...this.helpToggles].forEach(node => {
node.addEventListener('click', this.toggleHelpText);
});
}
Expand Down
Loading