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: new audit list display, indexes & new icons #5109

Merged
merged 22 commits into from
May 4, 2018
Merged

report: new audit list display, indexes & new icons #5109

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
35d6e66
New audit list display.
paulirish May 3, 2018
673950d
byebye check and x
paulirish May 3, 2018
3db3eb9
rename score__value and improve header styling
paulirish May 3, 2018
1fc2ab5
move --pass --fail classes to audit.
paulirish May 3, 2018
d57dc78
apply fail color to display-text
paulirish May 3, 2018
32127e6
fix rebase
paulirish May 3, 2018
9141a8e
lint.
paulirish May 3, 2018
2aba130
sort the diagnostics based on score.
paulirish May 3, 2018
0381f02
Merge branch 'master' into auditlistdisplay2
paulirish May 4, 2018
b49e6ce
core(displayValue): fancier displayValue type (#5111)
brendankenny May 4, 2018
dec3af9
New audit list display.
paulirish May 3, 2018
05ec181
byebye check and x
paulirish May 3, 2018
0bd4dd0
rename score__value and improve header styling
paulirish May 3, 2018
4e3ae52
move --pass --fail classes to audit.
paulirish May 3, 2018
dcb3b6a
apply fail color to display-text
paulirish May 3, 2018
37444d4
fix rebase
paulirish May 3, 2018
550fc58
lint.
paulirish May 3, 2018
7eb9570
sort the diagnostics based on score.
paulirish May 3, 2018
a81416d
show toggle-arrow for groups. add item count for groups
paulirish May 4, 2018
17ae280
Merge remote-tracking branch 'origin/auditlistdisplay2' into auditlis…
paulirish May 4, 2018
18df349
style tweaks.
paulirish May 4, 2018
ab12dd5
icon feedback.
paulirish May 4, 2018
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
62 changes: 32 additions & 30 deletions lighthouse-core/report/html/renderer/category-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,44 +25,48 @@ class CategoryRenderer {

/**
* @param {!ReportRenderer.AuditJSON} audit
* @param {number} index
* @return {!Element}
*/
renderAudit(audit) {
renderAudit(audit, index) {
const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit', this.templateContext);
const auditEl = this.dom.find('.lh-audit', tmpl);
auditEl.id = audit.result.name;
const scoreDisplayMode = audit.result.scoreDisplayMode;
let title = audit.result.description;

if (audit.result.displayValue) {
title += `: ${Util.formatDisplayValue(audit.result.displayValue)}`;
const displayValue = Util.formatDisplayValue(audit.result.displayValue);
this.dom.find('.lh-audit__display-text', auditEl).textContent = displayValue;
}

this.dom.find('.lh-audit__title', auditEl).appendChild(
this.dom.convertMarkdownCodeSnippets(title));
this.dom.convertMarkdownCodeSnippets(audit.result.description));
this.dom.find('.lh-audit__description', auditEl)
.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));

// Append audit details to header section so the entire audit is within a <details>.
const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('.lh-audit__header', auditEl));
const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('details', auditEl));
if (audit.result.details && audit.result.details.type) {
header.appendChild(this.detailsRenderer.render(audit.result.details));
}

this.dom.find('.lh-audit__index', auditEl).textContent = `${index + 1}`;

if (audit.result.informative) {
auditEl.classList.add('lh-audit--informative');
}
if (audit.result.manual) {
auditEl.classList.add('lh-audit--manual');
}

this._populateScore(auditEl, audit.result.score, scoreDisplayMode, audit.result.error);
this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode, audit.result.error);

if (audit.result.error) {
auditEl.classList.add(`lh-audit--error`);
const valueEl = this.dom.find('.lh-score__value', auditEl);
valueEl.textContent = 'Error';
valueEl.classList.add('tooltip-boundary');
const tooltip = this.dom.createChildOf(valueEl, 'div', 'lh-error-tooltip-content tooltip');
const textEl = this.dom.find('.lh-audit__display-text', auditEl);
textEl.textContent = 'Error!';
textEl.classList.add('tooltip-boundary');
const tooltip = this.dom.createChildOf(textEl, 'div', 'lh-error-tooltip-content tooltip');
tooltip.textContent = audit.result.debugString || 'Report error: no audit information';
} else if (audit.result.debugString) {
const debugStrEl = auditEl.appendChild(this.dom.createElement('div', 'lh-debug'));
Expand All @@ -72,21 +76,18 @@ class CategoryRenderer {
}

/**
* @param {!DocumentFragment|!Element} element DOM node to populate with values.
* @param {!Element} element DOM node to populate with values.
* @param {number} score
* @param {string} scoreDisplayMode
* @param {boolean} isError
* @return {!Element}
*/
_populateScore(element, score, scoreDisplayMode, isError) {
const scoreOutOf100 = Math.round(score * 100);
const valueEl = this.dom.find('.lh-score__value', element);
valueEl.textContent = Util.formatNumber(scoreOutOf100);
_setRatingClass(element, score, scoreDisplayMode, isError) {
// FIXME(paulirish): this'll have to deal with null scores and scoreDisplayMode stuff..
const rating = isError ? 'error' : Util.calculateRating(score);
valueEl.classList.add(`lh-score__value--${rating}`, `lh-score__value--${scoreDisplayMode}`);

return /** @type {!Element} **/ (element);
element.classList.add(`lh-audit--${rating}`,
`lh-audit--${scoreDisplayMode}`);
return element;
}

/**
Expand All @@ -105,7 +106,7 @@ class CategoryRenderer {
this.dom.find('.lh-category-header__description', tmpl)
.appendChild(this.dom.convertMarkdownLinkSnippets(category.description));

return this._populateScore(tmpl, category.score, 'numeric', false);
return tmpl.firstElementChild;
}

/**
Expand Down Expand Up @@ -206,8 +207,8 @@ class CategoryRenderer {
const auditGroupElem = this.renderAuditGroup(group, {expandable: true});
auditGroupElem.classList.add('lh-audit-group--manual');

manualAudits.forEach(audit => {
auditGroupElem.appendChild(this.renderAudit(audit));
manualAudits.forEach((audit, i) => {
auditGroupElem.appendChild(this.renderAudit(audit, i));
});

element.appendChild(auditGroupElem);
Expand Down Expand Up @@ -291,12 +292,12 @@ class CategoryRenderer {
const passedElements = /** @type {!Array<!Element>} */ ([]);
const notApplicableElements = /** @type {!Array<!Element>} */ ([]);

auditsUngrouped.failed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) =>
failedElements.push(this.renderAudit(audit)));
auditsUngrouped.passed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) =>
passedElements.push(this.renderAudit(audit)));
auditsUngrouped.notApplicable.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) =>
notApplicableElements.push(this.renderAudit(audit)));
auditsUngrouped.failed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit, i) =>
failedElements.push(this.renderAudit(audit, i)));
auditsUngrouped.passed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit, i) =>
passedElements.push(this.renderAudit(audit, i)));
auditsUngrouped.notApplicable.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit, i) =>
notApplicableElements.push(this.renderAudit(audit, i)));

let hasFailedGroups = false;

Expand All @@ -306,7 +307,7 @@ class CategoryRenderer {

if (groups.failed.length) {
const auditGroupElem = this.renderAuditGroup(group, {expandable: false});
groups.failed.forEach(item => auditGroupElem.appendChild(this.renderAudit(item)));
groups.failed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i)));
auditGroupElem.open = true;
failedElements.push(auditGroupElem);

Expand All @@ -315,13 +316,14 @@ class CategoryRenderer {

if (groups.passed.length) {
const auditGroupElem = this.renderAuditGroup(group, {expandable: true});
groups.passed.forEach(item => auditGroupElem.appendChild(this.renderAudit(item)));
groups.passed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i)));
passedElements.push(auditGroupElem);
}

if (groups.notApplicable.length) {
const auditGroupElem = this.renderAuditGroup(group, {expandable: true});
groups.notApplicable.forEach(item => auditGroupElem.appendChild(this.renderAudit(item)));
groups.notApplicable.forEach((item, i) =>
auditGroupElem.appendChild(this.renderAudit(item, i)));
notApplicableElements.push(auditGroupElem);
}
});
Expand Down
19 changes: 14 additions & 5 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 @@ -42,17 +42,19 @@ class PerformanceCategoryRenderer extends CategoryRenderer {

/**
* @param {!ReportRenderer.AuditJSON} audit
* @param {number} index
* @param {number} scale
* @return {!Element}
*/
_renderOpportunity(audit, scale) {
_renderOpportunity(audit, index, scale) {
const element = this.dom.createElement('details', [
'lh-load-opportunity',
`lh-load-opportunity--${Util.calculateRating(audit.result.score)}`,
'lh-expandable-details',
].join(' '));
element.id = audit.result.name;

// TODO(paulirish): use a template instead.
const summary = this.dom.createChildOf(element, 'summary', 'lh-load-opportunity__summary ' +
'lh-expandable-details__summary');
const titleEl = this.dom.createChildOf(summary, 'div', 'lh-load-opportunity__title');
Expand Down Expand Up @@ -161,25 +163,32 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
const maxWaste = Math.max(...opportunityAudits.map(audit => audit.result.rawValue));
const scale = Math.ceil(maxWaste / 1000) * 1000;
const groupEl = this.renderAuditGroup(groups['load-opportunities'], {expandable: false});
opportunityAudits.forEach(item => groupEl.appendChild(this._renderOpportunity(item, scale)));
opportunityAudits.forEach((item, i) =>
groupEl.appendChild(this._renderOpportunity(item, i, scale)));
groupEl.open = true;
element.appendChild(groupEl);
}

// Diagnostics
const diagnosticAudits = category.audits
.filter(audit => audit.group === 'diagnostics' && audit.result.score < 1);
.filter(audit => audit.group === 'diagnostics' && audit.result.score < 1)
.sort((a, b) => {
const scoreA = a.result.informative ? 100 : a.result.score;
Copy link
Collaborator

@patrickhulce patrickhulce May 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

just a heads up to line up with #5105 whoever lands first 🐎 🚗 🏁

Copy link

Choose a reason for hiding this comment

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

re:@vinamratasingal's comment on dropdown -- I think once we get the overall left/right alignments on the layout, and the dropdown color being darker as intended, it would look better. Keeping watching out for any issues though!

const scoreB = b.result.informative ? 100 : b.result.score;
return scoreA - scoreB;
});

if (diagnosticAudits.length) {
const groupEl = this.renderAuditGroup(groups['diagnostics'], {expandable: false});
diagnosticAudits.forEach(item => groupEl.appendChild(this.renderAudit(item)));
diagnosticAudits.forEach((item, i) => groupEl.appendChild(this.renderAudit(item, i)));
groupEl.open = true;
element.appendChild(groupEl);
}

const passedElements = category.audits
.filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
audit.result.score === 1)
.map(audit => this.renderAudit(audit));
.map((audit, i) => this.renderAudit(audit, i));

if (!passedElements.length) return element;

Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/report/html/renderer/report-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ class ReportRenderer {

this._dom.find('.leftnav-item__category', navItem).textContent = category.name;
const score = this._dom.find('.leftnav-item__score', navItem);
score.classList.add(`lh-score__value--${Util.calculateRating(category.score)}`);
score.classList.add(`lh-audit--${Util.calculateRating(category.score)}`);
score.textContent = Math.round(100 * category.score);
nav.appendChild(navItem);
}
Expand Down
Loading