by default, audit groups are adorned.

GoogleChrome · May 7, 2018 · eeb777f · eeb777f
1 parent daef4d5
commit eeb777f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git 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,20 +303,23 @@ 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);
       }
 
       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);
       }
 
       if (groups.notApplicable.length) {
         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
@@ -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
@@ -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;
 }