Skip to content

Commit

Permalink
Report: improvements w/ new density... (#2706)
Browse files Browse the repository at this point in the history 
    category hash nav shouldn't underlap the fixed header
    firefox support
    width@964 breakpoint.
    fix @print styles: show site URL & time
    ensmallen scorecards. size based off body-font-size
    shorter sparklines.
    for perf opportunities, show debugText within summary, so it isn't pushed below large results tables.
    break-word for long urls in debugStrings
    sharper focus ring 5px -> 3px
    open details by default
    some groups can't be collapsed: failed, perf groups, a11y failing
    no special styling for the manual section
    devtools font size isn't smaller than 12px
  • Loading branch information
@paulirish
paulirish committed Jul 20, 2017
1 parent a9867d5 commit 97c7170
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 116 deletions.
73 changes: 39 additions & 34 deletions lighthouse-core/report/v2/renderer/category-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,8 @@ class CategoryRenderer {
const titleEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__title');
titleEl.textContent = audit.result.description;

this._dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'});

if (!extendedInfo || typeof audit.result.rawValue !== 'number') {
const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug');
debugStrEl.textContent = audit.result.debugString || 'Report error: no extended information';
Expand All @@ -179,8 +181,6 @@ class CategoryRenderer {
const statsMsEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat');
statsMsEl.textContent = Util.formatMilliseconds(audit.result.rawValue);

this._dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'});

if (extendedInfo.value.wastedKb) {
const statsKbEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat');
statsKbEl.textContent = Util.formatNumber(extendedInfo.value.wastedKb) + ' KB';
Expand All @@ -190,9 +190,8 @@ class CategoryRenderer {
descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText));

if (audit.result.debugString) {
const debugStrEl = this._dom.createChildOf(element, 'div', 'lh-debug');
const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug');
debugStrEl.textContent = audit.result.debugString;
element.open = true;
}

if (audit.result.details) {
Expand All @@ -206,31 +205,27 @@ class CategoryRenderer {
* Renders the group container for a group of audits. Individual audit elements can be added
* directly to the returned element.
* @param {!ReportRenderer.GroupJSON} group
* @return {!HTMLDetailsElement}
* @param {{expandable: boolean}} opts
* @return {!Element}
*/
_renderAuditGroup(group) {
const auditGroupElem = /** @type {!HTMLDetailsElement} */ (this._dom.createElement('details',
'lh-audit-group lh-expandable-details'));
const auditGroupHeader = this._dom.createElement('div',
'lh-audit-group__header lh-expandable-details__header');
auditGroupHeader.textContent = group.title;

const auditGroupSummary = this._dom.createElement('summary',
'lh-audit-group__summary lh-expandable-details__summary');
const auditGroupArrow = this._dom.createElement('div', 'lh-toggle-arrow', {
title: 'See audits',
});
auditGroupSummary.appendChild(auditGroupHeader);
auditGroupSummary.appendChild(auditGroupArrow);
auditGroupElem.appendChild(auditGroupSummary);
_renderAuditGroup(group, opts) {
const expandable = opts.expandable;
const element = this._dom.createElement(expandable ? 'details' :'div', 'lh-audit-group');
const summmaryEl = this._dom.createChildOf(element, 'summary', 'lh-audit-group__summary');
const headerEl = this._dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header');
this._dom.createChildOf(summmaryEl, 'div',
`lh-toggle-arrow ${expandable ? '' : ' lh-toggle-arrow-unexpandable'}`, {
title: 'See audits',
});

if (group.description) {
const auditGroupDescription = this._dom.createElement('div', 'lh-audit-group__description');
auditGroupDescription.appendChild(this._dom.convertMarkdownLinkSnippets(group.description));
auditGroupElem.appendChild(auditGroupDescription);
element.appendChild(auditGroupDescription);
}
headerEl.textContent = group.title;

return auditGroupElem;
return element;
}

/**
Expand All @@ -240,7 +235,7 @@ class CategoryRenderer {
_renderPassedAuditsSection(elements) {
const passedElem = this._renderAuditGroup({
title: `${elements.length} Passed Audits`,
});
}, {expandable: true});
passedElem.classList.add('lh-passed-audits');
elements.forEach(elem => passedElem.appendChild(elem));
return passedElem;
Expand All @@ -262,7 +257,7 @@ class CategoryRenderer {

Object.keys(auditsGroupedByGroup).forEach(groupId => {
const group = groupDefinitions[groupId];
const auditGroupElem = this._renderAuditGroup(group);
const auditGroupElem = this._renderAuditGroup(group, {expandable: true});
auditGroupElem.classList.add('lh-audit-group--manual');

auditsGroupedByGroup[groupId].forEach(audit => {
Expand Down Expand Up @@ -333,7 +328,7 @@ class CategoryRenderer {
*/
_renderDefaultCategory(category, groupDefinitions) {
const element = this._dom.createElement('div', 'lh-category');
element.id = category.id;
this._createPermalinkSpan(element, category.id);
element.appendChild(this._renderCategoryScore(category));

const manualAudits = category.audits.filter(audit => audit.result.manual);
Expand All @@ -344,8 +339,8 @@ class CategoryRenderer {

const nonPassedElem = this._renderAuditGroup({
title: `${nonPassedAudits.length} failed audits`,
});
nonPassedElem.open = true;
}, {expandable: false});
nonPassedElem.classList.add('lh-failed-audits');
nonPassedAudits.forEach(audit => nonPassedElem.appendChild(this._renderAudit(audit)));
element.appendChild(nonPassedElem);

Expand All @@ -370,11 +365,11 @@ class CategoryRenderer {
*/
_renderPerformanceCategory(category, groups) {
const element = this._dom.createElement('div', 'lh-category');
element.id = category.id;
this._createPermalinkSpan(element, category.id);
element.appendChild(this._renderCategoryScore(category));

const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric');
const metricAuditsEl = this._renderAuditGroup(groups['perf-metric']);
const metricAuditsEl = this._renderAuditGroup(groups['perf-metric'], {expandable: false});
const timelineContainerEl = this._dom.createChildOf(metricAuditsEl, 'div',
'lh-timeline-container');
const timelineEl = this._dom.createChildOf(timelineContainerEl, 'div', 'lh-timeline');
Expand Down Expand Up @@ -413,7 +408,7 @@ class CategoryRenderer {
if (hintAudits.length) {
const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue));
const scale = Math.ceil(maxWaste / 1000) * 1000;
const hintAuditsEl = this._renderAuditGroup(groups['perf-hint']);
const hintAuditsEl = this._renderAuditGroup(groups['perf-hint'], {expandable: false});
hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale)));
hintAuditsEl.open = true;
element.appendChild(hintAuditsEl);
Expand All @@ -422,7 +417,7 @@ class CategoryRenderer {
const infoAudits = category.audits
.filter(audit => audit.group === 'perf-info' && audit.score < 100);
if (infoAudits.length) {
const infoAuditsEl = this._renderAuditGroup(groups['perf-info']);
const infoAuditsEl = this._renderAuditGroup(groups['perf-info'], {expandable: false});
infoAudits.forEach(item => infoAuditsEl.appendChild(this._renderAudit(item)));
infoAuditsEl.open = true;
element.appendChild(infoAuditsEl);
Expand All @@ -447,7 +442,7 @@ class CategoryRenderer {
*/
_renderAccessibilityCategory(category, groupDefinitions) {
const element = this._dom.createElement('div', 'lh-category');
element.id = category.id;
this._createPermalinkSpan(element, category.id);
element.appendChild(this._renderCategoryScore(category));

const auditsGroupedByGroup = /** @type {!Object<string,
Expand All @@ -471,14 +466,14 @@ class CategoryRenderer {
const group = groupDefinitions[groupId];
const groups = auditsGroupedByGroup[groupId];
if (groups.failed.length) {
const auditGroupElem = this._renderAuditGroup(group);
const auditGroupElem = this._renderAuditGroup(group, {expandable: false});
groups.failed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item)));
auditGroupElem.open = true;
element.appendChild(auditGroupElem);
}

if (groups.passed.length) {
const auditGroupElem = this._renderAuditGroup(group);
const auditGroupElem = this._renderAuditGroup(group, {expandable: true});
groups.passed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item)));
passedElements.push(auditGroupElem);
}
Expand All @@ -491,6 +486,16 @@ class CategoryRenderer {
element.appendChild(passedElem);
return element;
}

/**
* Create a non-semantic span used for hash navigation of categories
* @param {!Element} element
* @param {string} id
*/
_createPermalinkSpan(element, id) {
const permalinkEl = this._dom.createChildOf(element, 'span', 'lh-permalink');
permalinkEl.id = id;
}
}

if (typeof module !== 'undefined' && module.exports) {
Expand Down
1 change: 1 addition & 0 deletions lighthouse-core/report/v2/renderer/crc-details-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ class CriticalRequestChainRenderer {
Util.formatBytesToKB(details.longestChain.transferSize);

const detailsEl = dom.find('.lh-details', tmpl);
detailsEl.open = true;

dom.find('.lh-details > summary', tmpl).textContent = details.header.text;

Expand Down
3 changes: 3 additions & 0 deletions lighthouse-core/report/v2/renderer/details-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ class DetailsRenderer {
if (!list.items.length) return this._dom.createElement('span');

const element = this._dom.createElement('details', 'lh-details');
element.open = true;
if (list.header) {
const summary = this._dom.createElement('summary', 'lh-list__header');
summary.textContent = list.header.text;
Expand All @@ -147,6 +148,7 @@ class DetailsRenderer {
if (!details.items.length) return this._dom.createElement('span');

const element = this._dom.createElement('details', 'lh-details');
element.open = true;
if (details.header) {
element.appendChild(this._dom.createElement('summary')).textContent = details.header;
}
Expand Down Expand Up @@ -194,6 +196,7 @@ class DetailsRenderer {
*/
_renderCards(details) {
const element = this._dom.createElement('details', 'lh-details');
element.open = true;
if (details.header) {
element.appendChild(this._dom.createElement('summary')).textContent = details.header.text;
}
Expand Down
Loading

0 comments on commit 97c7170

Please sign in to comment.