From 35d6e6652a77328a5b8470547d5217dbfe6906e5 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 3 May 2018 10:45:10 -0700 Subject: [PATCH 01/20] New audit list display. about to merge displayValue & score together... --- .../report/html/renderer/category-renderer.js | 37 +++++++++--------- .../renderer/performance-category-renderer.js | 12 +++--- lighthouse-core/report/html/report-styles.css | 38 ++++++++++++------- lighthouse-core/report/html/templates.html | 8 ++-- 4 files changed, 57 insertions(+), 38 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index c4de249b17f0..bd32a9292149 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -25,29 +25,32 @@ 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 += `: ${audit.result.displayValue}`; + this.dom.find('.lh-audit__displayValue', auditEl).textContent = audit.result.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
. - 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'); } @@ -60,7 +63,7 @@ class CategoryRenderer { if (audit.result.error) { auditEl.classList.add(`lh-audit--error`); const valueEl = this.dom.find('.lh-score__value', auditEl); - valueEl.textContent = 'Error'; + 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'; @@ -206,8 +209,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); @@ -291,12 +294,12 @@ class CategoryRenderer { const passedElements = /** @type {!Array} */ ([]); const notApplicableElements = /** @type {!Array} */ ([]); - 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; @@ -306,7 +309,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); @@ -315,13 +318,13 @@ 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); } }); diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 3fc0c601a18b..1f08740b7d5e 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -42,10 +42,11 @@ 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)}`, @@ -53,6 +54,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { ].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'); @@ -161,7 +163,7 @@ 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))); + oppAudits.forEach((item, i) => groupEl.appendChild(this._renderOpportunity(item, i, scale))); groupEl.open = true; element.appendChild(groupEl); } @@ -169,9 +171,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Diagnostics const diagnosticAudits = category.audits .filter(audit => audit.group === 'diagnostics' && audit.result.score < 1); - if (diagnosticAudits.length) { + if (groupEl.length) { const groupEl = this.renderAuditGroup(groups['diagnostics'], {expandable: false}); - diagnosticAudits.forEach(item => groupEl.appendChild(this.renderAudit(item))); + groupEl.forEach((item, i) => groupEl.appendChild(this.renderAudit(item, i))); groupEl.open = true; element.appendChild(groupEl); } @@ -179,7 +181,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { 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; diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 7de75e20c653..7a6c162d0291 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -53,13 +53,15 @@ --lh-audit-score-width: calc(5 * var(--body-font-size)); --lh-category-score-width: calc(5 * var(--body-font-size)); --lh-audit-vpadding: 8px; + --lh-audit-index-width: 1.3em; --lh-audit-hgap: 12px; --lh-audit-group-vpadding: 12px; --lh-section-vpadding: 12px; --pass-icon-url: url('data:image/svg+xml;utf8,'); --fail-icon-url: url('data:image/svg+xml;utf8,'); - --collapsed-icon-url: url('data:image/svg+xml;utf8,'); - --expanded-icon-url: url('data:image/svg+xml;utf8,'); + --collapsed-triangle-icon-url: url('data:image/svg+xml;utf8,'); + --expanded-triangle-icon-url: url('data:image/svg+xml;utf8,'); + --toggle-arrow-icon-url: url('data:image/svg+xml;utf8,'); } .lh-vars.lh-devtools { @@ -204,7 +206,7 @@ summary { .lh-audit--informative .lh-score__value, .lh-audit--manual .lh-score__value { - display: none; + visibility: hidden; } /* No icon for audits with number scores. */ @@ -254,22 +256,36 @@ summary { line-height: var(--body-line-height); } +.lh-audit__header > div, +.lh-audit__header > span { + margin: 0 5px; +} + +.lh-audit__header .lh-audit__index { + margin-left: var(--text-indent); + width: var(--lh-audit-index-width); +} + .lh-audit__title { flex: 1; } -.lh-toggle-arrow { - background: var(--collapsed-icon-url) no-repeat center center / 12px 12px; - background-color: transparent; +.lh-audit__displayValue { + color: hsl(216, 5%, 39%); +} + +.lh-audit__header .lh-toggle-arrow { + background: var(--toggle-arrow-icon-url) no-repeat center center / 20px 20px; width: 12px; height: 12px; flex: none; transition: transform 150ms ease-in-out; cursor: pointer; border: none; - order: -1; + transform: rotateZ(90deg); margin-right: calc(var(--expandable-indent) - 12px); align-self: flex-start; + margin-top: calc((var(--body-line-height) - 12px) / 2); } .lh-toggle-arrow-unexpandable { @@ -291,7 +307,7 @@ summary { .lh-audit-group[open] > .lh-audit-group__summary > .lh-toggle-arrow, .lh-expandable-details[open] > .lh-expandable-details__summary > .lh-toggle-arrow { - background-image: var(--expanded-icon-url); + transform: rotateZ(-90deg); } .lh-audit-group__summary::-webkit-details-marker, @@ -299,10 +315,6 @@ summary { display: none; } -.lh-audit__header .lh-toggle-arrow { - margin-top: calc((var(--body-line-height) - 12px) / 2); -} - /* Perf Timeline */ .lh-timeline-container { @@ -589,7 +601,7 @@ summary { } .lh-audit .lh-debug { - margin-left: var(--expandable-indent); + margin-left: calc(var(--expandable-indent) + var(--lh-audit-index-width)); margin-right: var(--lh-audit-score-width); } diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index bdb6c00d8c63..2f589b935eef 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -29,10 +29,12 @@