From 0eb3c89e56a2e5e1c533b75e8809def20496503c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Sun, 6 May 2018 19:52:45 -0700 Subject: [PATCH] by default, audit groups are adorned. --- .../report/html/renderer/category-renderer.js | 9 ++++++--- .../renderer/performance-category-renderer.js | 6 +++--- lighthouse-core/report/html/report-styles.css | 15 ++++++++------- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index 31df9d9d8e5f..08bfae43927b 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -177,7 +177,7 @@ class CategoryRenderer { const passedElem = this.renderAuditGroup({ title: `Passed audits`, }, {expandable: true, itemCount: this._getTotalAuditsLength(elements)}); - passedElem.classList.add('lh-audit-group--adorned', 'lh-passed-audits'); + passedElem.classList.add('lh-passed-audits'); elements.forEach(elem => passedElem.appendChild(elem)); return passedElem; } @@ -190,7 +190,7 @@ class CategoryRenderer { const notApplicableElem = this.renderAuditGroup({ title: `Not applicable`, }, {expandable: true, itemCount: this._getTotalAuditsLength(elements)}); - notApplicableElem.classList.add('lh-audit-group--adorned', 'lh-audit-group--notapplicable'); + notApplicableElem.classList.add('lh-audit-group--notapplicable'); elements.forEach(elem => notApplicableElem.appendChild(elem)); return notApplicableElem; } @@ -204,7 +204,7 @@ class CategoryRenderer { const group = {title: 'Additional items to manually check', description: manualDescription}; const auditGroupElem = this.renderAuditGroup(group, {expandable: true, itemCount: manualAudits.length}); - auditGroupElem.classList.add('lh-audit-group--adorned', 'lh-audit-group--manual'); + auditGroupElem.classList.add('lh-audit-group--manual'); manualAudits.forEach((audit, i) => { auditGroupElem.appendChild(this.renderAudit(audit, i)); }); @@ -303,6 +303,7 @@ class CategoryRenderer { if (groups.failed.length) { const auditGroupElem = this.renderAuditGroup(group, {expandable: false}); groups.failed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i))); + auditGroupElem.classList.add('lh-audit-group--unadorned'); auditGroupElem.open = true; failedElements.push(auditGroupElem); } @@ -310,6 +311,7 @@ class CategoryRenderer { if (groups.passed.length) { const auditGroupElem = this.renderAuditGroup(group, {expandable: true}); groups.passed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i))); + auditGroupElem.classList.add('lh-audit-group--unadorned'); passedElements.push(auditGroupElem); } @@ -317,6 +319,7 @@ class CategoryRenderer { const auditGroupElem = this.renderAuditGroup(group, {expandable: true}); groups.notApplicable.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i))); + auditGroupElem.classList.add('lh-audit-group--unadorned'); 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 46084cca1ffb..23df01793e02 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -129,7 +129,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { estValuesEl.textContent = 'Values are estimated and may vary.'; metricAuditsEl.open = true; - metricAuditsEl.classList.add('lh-audit-group--adorned', 'lh-audit-group--metrics'); + metricAuditsEl.classList.add('lh-audit-group--metrics'); element.appendChild(metricAuditsEl); // Filmstrip @@ -160,7 +160,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { opportunityAudits.forEach((item, i) => groupEl.appendChild(this._renderOpportunity(item, i, scale))); groupEl.open = true; - groupEl.classList.add('lh-audit-group--adorned', 'lh-audit-group--opportunities'); + groupEl.classList.add('lh-audit-group--opportunities'); element.appendChild(groupEl); } @@ -177,7 +177,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const groupEl = this.renderAuditGroup(groups['diagnostics'], {expandable: false}); diagnosticAudits.forEach((item, i) => groupEl.appendChild(this.renderAudit(item, i))); groupEl.open = true; - groupEl.classList.add('lh-audit-group--adorned', 'lh-audit-group--diagnostics'); + groupEl.classList.add('lh-audit-group--diagnostics'); element.appendChild(groupEl); } diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 2d7881446aa6..9c3d8ab7b946 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -592,11 +592,7 @@ font-weight: bold; } -.lh-audit-group--adorned .lh-audit-group__summary + .lh-audit-group__description { - margin-top: var(--lh-audit-group-vpadding); -} - -.lh-audit-group--adorned .lh-audit-group__header::before { +.lh-audit-group__header::before { content: ''; width: calc(var(--subheader-font-size) / 14 * 24); height: calc(var(--subheader-font-size) / 14 * 24); @@ -608,10 +604,11 @@ } /* A11y/Seo groups within Passed don't get an icon */ -.lh-audit-group:not(.lh-audit-group--adorned) .lh-audit-group__header::before { +.lh-audit-group--unadorned .lh-audit-group__header::before { content: none; } + .lh-audit-group--manual .lh-audit-group__header::before { background-image: var(--search-icon-url); } @@ -655,7 +652,11 @@ .lh-audit-group__description { font-size: var(--body-font-size); color: var(--medium-75-gray); - margin-bottom: var(--lh-audit-group-vpadding); + margin: var(--lh-audit-group-vpadding) 0; +} + +.lh-audit-group--unadorned .lh-audit-group__description { + margin-top: 0; }