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: error'd audits get 'Error!' treatment #5077

Merged
merged 8 commits into from
May 3, 2018
Merged

report: error'd audits get 'Error!' treatment #5077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6e0f1b3
Handle auditErrors
paulirish Apr 30, 2018
440c907
simplify populateScore
paulirish Apr 30, 2018
fd3dd6f
report X and check use standard fail/pass colors
paulirish May 1, 2018
e8964df
remove right column score/icon for informative/manual audits
paulirish May 1, 2018
12f89de
report: non-perf error'd audits get same 'Error!' treatment in the re…
paulirish May 1, 2018
7be613e
feedback.
paulirish May 1, 2018
df15794
bckenny feedback
paulirish May 3, 2018
55dc8f8
fix closure compilation.
paulirish May 3, 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
50 changes: 29 additions & 21 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 @@ -31,19 +31,16 @@ class CategoryRenderer {
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;
const description = audit.result.helpText;
let title = audit.result.description;

if (audit.result.displayValue) {
title += `: ${audit.result.displayValue}`;
}

if (audit.result.debugString) {
const debugStrEl = auditEl.appendChild(this.dom.createElement('div', 'lh-debug'));
debugStrEl.textContent = audit.result.debugString;
}
this.dom.find('.lh-audit__title', auditEl).appendChild(
this.dom.convertMarkdownCodeSnippets(title));
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));
Expand All @@ -58,29 +55,36 @@ class CategoryRenderer {
auditEl.classList.add('lh-audit--manual');
}

return this._populateScore(auditEl, audit.result.score, scoreDisplayMode, title, description);
this._populateScore(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');
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'));
debugStrEl.textContent = audit.result.debugString;
}
return auditEl;
}

/**
* @param {!DocumentFragment|!Element} element DOM node to populate with values.
* @param {number} score
* @param {string} scoreDisplayMode
* @param {string} title
* @param {string} description
* @param {boolean} isError
* @return {!Element}
*/
_populateScore(element, score, scoreDisplayMode, title, description) {
// Fill in the blanks.
_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);
valueEl.classList.add(`lh-score__value--${Util.calculateRating(score)}`,
`lh-score__value--${scoreDisplayMode}`);

this.dom.find('.lh-audit__title, .lh-category-header__title', element).appendChild(
this.dom.convertMarkdownCodeSnippets(title));
this.dom.find('.lh-audit__description, .lh-category-header__description', element)
.appendChild(this.dom.convertMarkdownLinkSnippets(description));
// 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);
}
Expand All @@ -96,8 +100,12 @@ class CategoryRenderer {
const gaugeEl = this.renderScoreGauge(category);
gaugeContainerEl.appendChild(gaugeEl);

const {score, name, description} = category;
return this._populateScore(tmpl, score, 'numeric', name, description);
this.dom.find('.lh-category-header__title', tmpl).appendChild(
this.dom.convertMarkdownCodeSnippets(category.name));
this.dom.find('.lh-category-header__description', tmpl)
.appendChild(this.dom.convertMarkdownLinkSnippets(category.description));

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

/**
Expand Down
14 changes: 9 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 @@ -16,21 +16,25 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
const tmpl = this.dom.cloneTemplate('#tmpl-lh-perf-metric', this.templateContext);
const element = this.dom.find('.lh-perf-metric', tmpl);
element.id = audit.result.name;
// FIXME(paulirish): currently this sets a 'lh-perf-metric--fail' class on error'd audits
element.classList.add(`lh-perf-metric--${Util.calculateRating(audit.result.score)}`);

const titleEl = this.dom.find('.lh-perf-metric__title', tmpl);
titleEl.textContent = audit.result.description;

const valueEl = this.dom.find('.lh-perf-metric__value span', tmpl);
const valueEl = this.dom.find('.lh-perf-metric__value', tmpl);
valueEl.textContent = audit.result.displayValue;

const descriptionEl = this.dom.find('.lh-perf-metric__description', tmpl);
descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));

if (typeof audit.result.rawValue !== 'number') {
const debugStrEl = this.dom.createChildOf(element, 'div', 'lh-debug');
debugStrEl.textContent = audit.result.debugString || 'Report error: no metric information';
return element;
if (audit.result.error) {
element.classList.remove(`lh-perf-metric--fail`);
element.classList.add(`lh-perf-metric--error`);
descriptionEl.textContent = '';
valueEl.textContent = 'Error!';
const tooltip = this.dom.createChildOf(descriptionEl, 'span', 'lh-error-tooltip-content');
tooltip.textContent = audit.result.debugString || 'Report error: no metric information';
}

return element;
Expand Down
59 changes: 28 additions & 31 deletions lighthouse-core/report/html/report-styles.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 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 @@ -46,7 +46,7 @@
<div class="lh-perf-metric">
<div class="lh-perf-metric__innerwrap tooltip-boundary">
<span class="lh-perf-metric__title"></span>
<div class="lh-perf-metric__value"><span></span></div>
<div class="lh-perf-metric__value"></div>
<div class="lh-perf-metric__description tooltip"></div>
</div>
</div>
Expand Down