From b0f0fce40853ea5ff09364df3bd988085076a376 Mon Sep 17 00:00:00 2001
From: Paul Irish <paul.irish@gmail.com>
Date: Fri, 4 May 2018 18:21:27 -0700
Subject: [PATCH] refining.

---
 .../report/html/renderer/category-renderer.js |  5 ----
 .../renderer/performance-category-renderer.js | 10 ++++---
 lighthouse-core/report/html/report-styles.css | 26 ++++++++++++++++---
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
index 18feb8429070..1ee9df8f560f 100644
--- a/lighthouse-core/report/html/renderer/category-renderer.js
+++ b/lighthouse-core/report/html/renderer/category-renderer.js
@@ -303,8 +303,6 @@ class CategoryRenderer {
     auditsUngrouped.notApplicable.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit, i) =>
       notApplicableElements.push(this.renderAudit(audit, i)));
 
-    let hasFailedGroups = false;
-
     Object.keys(auditsGroupedByGroup).forEach(groupId => {
       const group = groupDefinitions[groupId];
       const groups = auditsGroupedByGroup[groupId];
@@ -314,8 +312,6 @@ class CategoryRenderer {
         groups.failed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i)));
         auditGroupElem.open = true;
         failedElements.push(auditGroupElem);
-
-        hasFailedGroups = true;
       }
 
       if (groups.passed.length) {
@@ -333,7 +329,6 @@ class CategoryRenderer {
     });
 
     if (failedElements.length) {
-      // if failed audits are grouped skip the 'X Failed Audits' header
       failedElements.forEach(elem => element.appendChild(elem));
     }
 
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
index c4c68dd13322..ab4adc78bb6d 100644
--- a/lighthouse-core/report/html/renderer/performance-category-renderer.js
+++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -117,8 +117,6 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       metricsColumn2El.appendChild(this._renderMetric(item));
     });
 
-
-
     metricAuditsEl.open = true;
     metricAuditsEl.classList.add('lh-audit-group--adorned', 'lh-audit-group--metrics');
     element.appendChild(metricAuditsEl);
@@ -138,9 +136,13 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     // Opportunities
     const opportunityAudits = category.audits
         .filter(audit => audit.group === 'load-opportunities' && audit.result.score < 1)
-        .sort((auditA, auditB) => auditB.result.details.summary.wastedMs - auditA.result.details.summary.wastedMs);
+        .sort((auditA, auditB) =>
+            auditB.result.details.summary.wastedMs -
+            auditA.result.details.summary.wastedMs);
+
     if (opportunityAudits.length) {
-      const maxWaste = Math.max(...opportunityAudits.map(audit => audit.result.details.summary.wastedMs));
+      const wastedMsValues = opportunityAudits.map(audit => audit.result.details.summary.wastedMs);
+      const maxWaste = Math.max(...wastedMsValues);
       const scale = Math.ceil(maxWaste / 1000) * 1000;
       const groupEl = this.renderAuditGroup(groups['load-opportunities'], {expandable: false});
       const tmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity-header', this.templateContext);
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index eb69089b4b56..62433b617efd 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -11,6 +11,7 @@
   --body-line-height: 18px;
   --subheader-font-size: 14px;
   --subheader-line-height: 20px;
+  --subheader-color: hsl(206, 6%, 25%);
   --header-font-size: 16px;
   --header-line-height: 24px;
   --title-font-size: 24px;
@@ -256,6 +257,13 @@
 .lh-audit__header > span {
   margin: 0 var(--audit-item-gap);
 }
+.lh-audit__header > div:first-child, .lh-audit__header > span:first-child {
+  margin-left: 0;
+}
+.lh-audit__header > div:last-child, .lh-audit__header > span:last-child {
+  margin-right: 0;
+}
+
 
 .lh-audit__header .lh-audit__index {
   width: var(--lh-audit-index-width);
@@ -268,12 +276,12 @@
 .lh-toggle-arrow {
   background: var(--chevron-icon-url) no-repeat center center / 20px 20px;
   width: 12px;
+  height: 18px;
   flex: none;
   transition: transform 150ms ease-in-out;
   cursor: pointer;
   border: none;
   transform: rotateZ(90deg);
-  margin-right: calc(var(--expandable-indent) - 12px);
   margin-top: calc((var(--body-line-height) - 12px) / 2);
 }
 
@@ -414,7 +422,6 @@
 /* Perf load opportunity */
 
 .lh-load-opportunity {
-
   border-bottom: 1px solid var(--report-secondary-border-color);
 }
 
@@ -556,8 +563,13 @@
   font-size: var(--body-font-size);
 }
 
+.lh-audit:last-child  {
+  border-bottom: none;
+}
+
+
 .lh-audit .lh-debug {
-  margin-left: calc(var(--text-indent) + var(--lh-audit-index-width));
+  margin-left: calc(var(--text-indent) + var(--lh-audit-index-width) + 3 * var(--audit-item-gap));
   margin-right: var(--lh-score-icon-width);
 }
 
@@ -572,11 +584,17 @@
   border-bottom: 1px solid var(--report-secondary-border-color);
 }
 
+.lh-audit-group:last-child {
+  border-bottom: none;
+}
+
 .lh-audit-group__header {
   font-size: var(--subheader-font-size);
   line-height: var(--subheader-line-height);
+  color: var(--subheader-color);
   margin-bottom: var(--lh-audit-group-vpadding);
   flex: 1;
+  font-weight: bold;
 }
 
 .lh-audit-group--adorned .lh-audit-group__header::before {
@@ -631,7 +649,7 @@
 }
 
 .lh-audit-group__summary .lh-toggle-arrow {
-  margin-top: calc((var(--subheader-line-height) - 12px) / 2);
+
 }
 
 .lh-audit-group__description {