From f46a9d2916ee56c435e9ddfe1dc5338d4a77f0f9 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Fri, 26 Apr 2019 22:00:07 -0700
Subject: [PATCH 01/19] report(redesign): toggle metric descriptions

---
 .../report/html/renderer/category-renderer.js |  5 ++
 .../html/renderer/report-ui-features.js       | 34 +++++++++++
 lighthouse-core/report/html/report-styles.css | 58 +++++++++++++++++--
 lighthouse-core/report/html/templates.html    | 28 ++++++++-
 4 files changed, 118 insertions(+), 7 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
index adbfcc063e42..9159d2c3839d 100644
--- a/lighthouse-core/report/html/renderer/category-renderer.js
+++ b/lighthouse-core/report/html/renderer/category-renderer.js
@@ -200,6 +200,11 @@ class CategoryRenderer {
       descriptionEl.classList.add('lh-audit-group__description');
       auditGroupHeader.appendChild(descriptionEl);
     }
+    if (group.title === 'Metrics') {
+      const toggleTmpl = this.dom.cloneTemplate('#tmpl-lh-metrics-toggle', this.templateContext);
+      const toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
+      auditGroupHeader.appendChild(toggleEl);
+    }
     groupEl.appendChild(auditGroupHeader);
 
     return groupEl;
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 62e5e2e8d131..d5ddea83124e 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -48,6 +48,14 @@ class ReportUIFeatures {
     this.stickyHeaderEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
     this.highlightEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.metricDescriptionToggleEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.metricDescriptionLessEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.metricDescriptionMoreEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.metricAuditGroup; // eslint-disable-line no-unused-expressions
 
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     this.onCopy = this.onCopy.bind(this);
@@ -57,6 +65,9 @@ class ReportUIFeatures {
     this.printShortCutDetect = this.printShortCutDetect.bind(this);
     this.onChevronClick = this.onChevronClick.bind(this);
     this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this);
+    this._toggleMetricDescription = this._toggleMetricDescription.bind(this);
+    this._setupMetricDescriptionToggleListeners =
+      this._setupMetricDescriptionToggleListeners.bind(this);
   }
 
   /**
@@ -77,6 +88,9 @@ class ReportUIFeatures {
     this._document.addEventListener('copy', this.onCopy);
     this._document.addEventListener('scroll', this._updateStickyHeaderOnScroll);
     window.addEventListener('resize', this._updateStickyHeaderOnScroll);
+
+    this._setupMetricDescriptionToggleElements();
+    this._setupMetricDescriptionToggleListeners();
   }
 
   /**
@@ -140,6 +154,26 @@ class ReportUIFeatures {
     this._copyAttempt = false;
   }
 
+  _setupMetricDescriptionToggleElements() {
+    this.metricDescriptionToggleEl = this._dom.find('.lh-metrics-toggle', this._document);
+    this.metricDescriptionMoreEl = this._dom.find('.lh-metrics-toggle-more', this._document);
+    this.metricDescriptionLessEl = this._dom.find('.lh-metrics-toggle-less', this._document);
+    this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
+  }
+
+  _setupMetricDescriptionToggleListeners() {
+    this.metricDescriptionToggleEl.addEventListener('click', this._toggleMetricDescription);
+    for (const el of this._dom.findAll('.lh-metric', this._document)) {
+      el.addEventListener('click', this._toggleMetricDescription);
+    }
+  }
+
+  _toggleMetricDescription() {
+    this.metricDescriptionMoreEl.classList.toggle('lh-metrics-toggle--active');
+    this.metricDescriptionLessEl.classList.toggle('lh-metrics-toggle--active');
+    this.metricAuditGroup.classList.toggle('lh-audit-group--metrics__show-descriptions');
+  }
+
   /**
    * Copies the report JSON to the clipboard (if supported by the browser).
    */
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index f7c25eb117a2..4073bb746059 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -85,6 +85,7 @@
   --color-black-800: #424242;
   --color-black-900: #212121;
   --color-black: #000000;
+  --color-blue: #2962FF;
   --color-green-700: #018642;
   --color-green: #0CCE6B;
   --color-orange-700: #D04900;
@@ -98,6 +99,7 @@
   --env-item-bg: var(--color-black-100);
   --env-name-min-width: 220px;
   --env-tem-padding: 10px 0px;
+  --expandable-padding: 0 0 2px 28px;
   --gauge-circle-size-big: 120px;
   --gauge-circle-size: 96px;
   --header-padding: 20px 0 20px 0;
@@ -157,6 +159,7 @@
     --body-font-size: 14px;
     --body-line-height: 20px;
     --env-name-min-width: 120px;
+    --expandable-padding: 0 0 2px 24px;
     --gauge-circle-size-big: 96px;
     --gauge-circle-size: 72px;
     --header-padding: 16px 0 16px 0;
@@ -463,11 +466,14 @@
 .lh-metric {
   border-bottom: 1px solid var(--report-secondary-border-color);
 }
+.lh-metric:first-of-type {
+  border-top: 1px solid var(--report-secondary-border-color);
+}
 
 .lh-metric__innerwrap {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  font-weight: 500;
   padding: 8px var(--text-indent);
 }
 
@@ -477,10 +483,7 @@
 
 .lh-metric__title {
   flex: 1;
-}
-
-.lh-metric__name {
-  flex: 1;
+  font-weight: 500;
 }
 
 .lh-metrics__disclaimer {
@@ -491,11 +494,54 @@
 }
 
 .lh-metric__description {
+  display: none;
   color: var(--secondary-text-color);
+  padding: var(--expandable-padding);
+}
+.lh-audit-group--metrics__show-descriptions .lh-metric__description {
+  display: block;
 }
 
 .lh-metric__value {
   white-space: nowrap; /* No wrapping between metric value and the icon */
+  font-weight: 500;
+}
+
+.lh-metrics-toggle {
+  display: flex;
+  align-items: center;
+  background-color: #eee;
+  border-radius: 20px;
+  overflow: hidden;
+  width: 74px;
+  height: 28px;
+  cursor: pointer;
+  user-select: none;
+}
+.lh-metrics-toggle div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 5px;
+}
+.lh-metrics-toggle--active {
+  background-color: var(--color-blue);
+}
+.lh-metrics-toggle-lines {
+  fill: #7F7F7F;
+}
+.lh-metrics-toggle--active .lh-metrics-toggle-lines {
+  fill: white;
+}
+.lh-metrics-toggle-less {
+  width: 50%;
+  height: 28px;
+  padding-left: 8px;
+}
+.lh-metrics-toggle-more {
+  width: 50%;
+  height: 28px;
+  padding-right: 8px;
 }
 
 
@@ -723,6 +769,7 @@
 }
 
 .lh-audit-group__header {
+  display: flex;
   font-size: var(--body-font-size);
   margin: 0 0 var(--lh-audit-group-vpadding);
   /* When the header takes 100% width, the chevron becomes small. */
@@ -730,6 +777,7 @@
 }
 
 .lh-audit-group__header span.lh-audit-group__title {
+  flex: 1;
   font-weight: bold;
 }
 
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 77abd4ac3074..6854487cc672 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -60,6 +60,7 @@
           <span class="lh-audit-group__title"></span>
           <span class="lh-audit-group__itemcount"></span>
           <!-- .lh-audit-group__description will be added here -->
+          <!-- .lh-metrics-toggle will be added here -->
         </div>
         <div class=""></div>
       </div>
@@ -67,6 +68,29 @@
   </details>
 </template>
 
+<!-- Lighthouse metrics toggle -->
+<template id="tmpl-lh-metrics-toggle">
+  <div class="lh-metrics-toggle">
+    <div class="lh-metrics-toggle-less lh-metrics-toggle--active">
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+        <defs>
+          <path id="a" d="M0 0h24v24H0V0z" />
+        </defs>
+        <clipPath id="b">
+          <use xlink:href="#a" overflow="visible" />
+        </clipPath>
+        <path class="lh-metrics-toggle-lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
+      </svg>
+    </div>
+    <div class="lh-metrics-toggle-more">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path class="lh-metrics-toggle-lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
+        <path fill="none" d="M0 0h24v24H0V0z" />
+      </svg>
+    </div>
+  </div>
+</template>
+
 <!-- Lighthouse audit -->
 <template id="tmpl-lh-audit">
   <div class="lh-audit">
@@ -88,10 +112,10 @@
 <!-- Lighthouse perf metric -->
 <template id="tmpl-lh-metric">
   <div class="lh-metric">
-    <div class="lh-metric__innerwrap tooltip-boundary">
+    <div class="lh-metric__innerwrap">
       <span class="lh-metric__title"></span>
       <div class="lh-metric__value"></div>
-      <div class="lh-metric__description tooltip"></div>
+      <div class="lh-metric__description"></div>
     </div>
   </div>
 </template>

From c3d24353f3ac310e9d8438ba839a2b7b0918b012 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Fri, 26 Apr 2019 22:04:30 -0700
Subject: [PATCH 02/19] fix flex selector

---
 lighthouse-core/report/html/report-styles.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 4073bb746059..65b7e7969891 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -777,9 +777,11 @@
 }
 
 .lh-audit-group__header span.lh-audit-group__title {
-  flex: 1;
   font-weight: bold;
 }
+.lh-audit-group--metrics .lh-audit-group__header span.lh-audit-group__title {
+  flex: 1;
+}
 
 .lh-audit-group__header span.lh-audit-group__itemcount {
   font-weight: bold;

From e2e55256d36c5a7a25476de7c66c145c3546a9d5 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Fri, 26 Apr 2019 22:05:58 -0700
Subject: [PATCH 03/19] ..

---
 lighthouse-core/report/html/report-styles.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 65b7e7969891..4b578bca9fc5 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -769,7 +769,6 @@
 }
 
 .lh-audit-group__header {
-  display: flex;
   font-size: var(--body-font-size);
   margin: 0 0 var(--lh-audit-group-vpadding);
   /* When the header takes 100% width, the chevron becomes small. */
@@ -779,6 +778,11 @@
 .lh-audit-group__header span.lh-audit-group__title {
   font-weight: bold;
 }
+
+/* Pushes the metric description toggle button to the right. */
+.lh-audit-group--metrics .lh-audit-group__header {
+  display: flex;
+}
 .lh-audit-group--metrics .lh-audit-group__header span.lh-audit-group__title {
   flex: 1;
 }

From 91f7da3753273744c11bfb0d4132adae3185afff Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 13:44:36 -0700
Subject: [PATCH 04/19] pr

---
 .../html/renderer/report-ui-features.js       | 21 ++++-------
 lighthouse-core/report/html/report-styles.css | 29 ++++++++++-----
 lighthouse-core/report/html/templates.html    | 37 ++++++++++---------
 3 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 439149a48ae4..984903615793 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -48,13 +48,9 @@ class ReportUIFeatures {
     this.stickyHeaderEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
     this.highlightEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
+    /** @type {HTMLInputElement} */
     this.metricDescriptionToggleEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
-    this.metricDescriptionLessEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.metricDescriptionMoreEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
     this.metricAuditGroup; // eslint-disable-line no-unused-expressions
 
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
@@ -171,23 +167,22 @@ class ReportUIFeatures {
   }
 
   _setupMetricDescriptionToggleElements() {
-    this.metricDescriptionToggleEl = this._dom.find('.lh-metrics-toggle', this._document);
-    this.metricDescriptionMoreEl = this._dom.find('.lh-metrics-toggle-more', this._document);
-    this.metricDescriptionLessEl = this._dom.find('.lh-metrics-toggle-less', this._document);
+    this.metricDescriptionToggleEl =
+      /** @type {HTMLInputElement} */ (this._dom.find('.lh-metrics-toggle input', this._document));
     this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
   }
 
   _setupMetricDescriptionToggleListeners() {
-    this.metricDescriptionToggleEl.addEventListener('click', this._toggleMetricDescription);
+    const toggle = () => this.metricDescriptionToggleEl.click();
+    this.metricDescriptionToggleEl.addEventListener('input', this._toggleMetricDescription);
     for (const el of this._dom.findAll('.lh-metric', this._document)) {
-      el.addEventListener('click', this._toggleMetricDescription);
+      el.addEventListener('click', toggle);
     }
   }
 
   _toggleMetricDescription() {
-    this.metricDescriptionMoreEl.classList.toggle('lh-metrics-toggle--active');
-    this.metricDescriptionLessEl.classList.toggle('lh-metrics-toggle--active');
-    this.metricAuditGroup.classList.toggle('lh-audit-group--metrics__show-descriptions');
+    const show = this.metricDescriptionToggleEl.checked;
+    this.metricAuditGroup.classList.toggle('lh-audit-group--metrics__show-descriptions', show);
   }
 
   /**
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 961140971107..dcff5ce6cde5 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -565,37 +565,46 @@
 }
 
 .lh-metrics-toggle {
+  position: relative;
+}
+.lh-metrics-toggle input {
+  cursor: pointer;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 74px;
+  height: 28px;
+}
+.lh-metrics-toggle label {
   display: flex;
-  align-items: center;
   background-color: #eee;
   border-radius: 20px;
   overflow: hidden;
-  width: 74px;
-  height: 28px;
-  cursor: pointer;
-  user-select: none;
 }
-.lh-metrics-toggle div {
+.lh-metrics-toggle label div {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2px 5px;
 }
-.lh-metrics-toggle--active {
+.lh-metrics-toggle input:not(:checked) + label .lh-metrics-toggle-less,
+.lh-metrics-toggle input:checked + label .lh-metrics-toggle-more {
   background-color: var(--color-blue);
 }
 .lh-metrics-toggle-lines {
   fill: #7F7F7F;
 }
-.lh-metrics-toggle--active .lh-metrics-toggle-lines {
+.lh-metrics-toggle input:not(:checked) + label .lh-metrics-toggle-less .lh-metrics-toggle-lines,
+.lh-metrics-toggle input:checked + label .lh-metrics-toggle-more .lh-metrics-toggle-lines {
   fill: white;
 }
-.lh-metrics-toggle-less {
+.lh-metrics-toggle label div.lh-metrics-toggle-less {
   width: 50%;
   height: 28px;
   padding-left: 8px;
 }
-.lh-metrics-toggle-more {
+.lh-metrics-toggle label div.lh-metrics-toggle-less {
   width: 50%;
   height: 28px;
   padding-right: 8px;
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 14f060c05885..9506b2f1429e 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -71,23 +71,26 @@
 <!-- Lighthouse metrics toggle -->
 <template id="tmpl-lh-metrics-toggle">
   <div class="lh-metrics-toggle">
-    <div class="lh-metrics-toggle-less lh-metrics-toggle--active">
-      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-        <defs>
-          <path id="a" d="M0 0h24v24H0V0z" />
-        </defs>
-        <clipPath id="b">
-          <use xlink:href="#a" overflow="visible" />
-        </clipPath>
-        <path class="lh-metrics-toggle-lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
-      </svg>
-    </div>
-    <div class="lh-metrics-toggle-more">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <path class="lh-metrics-toggle-lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
-        <path fill="none" d="M0 0h24v24H0V0z" />
-      </svg>
-    </div>
+    <input type="checkbox" name="toggle-metric-descriptions">
+    <label for="toggle-metric-descriptions">
+      <div class="lh-metrics-toggle-less lh-metrics-toggle--active">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+          <defs>
+            <path id="a" d="M0 0h24v24H0V0z" />
+          </defs>
+          <clipPath id="b">
+            <use xlink:href="#a" overflow="visible" />
+          </clipPath>
+          <path class="lh-metrics-toggle-lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
+        </svg>
+      </div>
+      <div class="lh-metrics-toggle-more">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <path class="lh-metrics-toggle-lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
+          <path fill="none" d="M0 0h24v24H0V0z" />
+        </svg>
+      </div>
+    </label>
   </div>
 </template>
 

From 58985f3b2d6ee8b3954d67127b39b3146a344eda Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 13:47:02 -0700
Subject: [PATCH 05/19] pr

---
 lighthouse-core/report/html/report-styles.css | 2 +-
 lighthouse-core/report/html/templates.html    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index dcff5ce6cde5..c28bca078c14 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -604,7 +604,7 @@
   height: 28px;
   padding-left: 8px;
 }
-.lh-metrics-toggle label div.lh-metrics-toggle-less {
+.lh-metrics-toggle label div.lh-metrics-toggle-more {
   width: 50%;
   height: 28px;
   padding-right: 8px;
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 9506b2f1429e..e3428c4eaa31 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -73,7 +73,7 @@
   <div class="lh-metrics-toggle">
     <input type="checkbox" name="toggle-metric-descriptions">
     <label for="toggle-metric-descriptions">
-      <div class="lh-metrics-toggle-less lh-metrics-toggle--active">
+      <div class="lh-metrics-toggle-less lh-metrics-toggle--active" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
           <defs>
             <path id="a" d="M0 0h24v24H0V0z" />
@@ -84,7 +84,7 @@
           <path class="lh-metrics-toggle-lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
         </svg>
       </div>
-      <div class="lh-metrics-toggle-more">
+      <div class="lh-metrics-toggle-more" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
           <path class="lh-metrics-toggle-lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
           <path fill="none" d="M0 0h24v24H0V0z" />

From 36ed153168b904ee8d5b10b31a2c23155e53078a Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 13:50:42 -0700
Subject: [PATCH 06/19] focus

---
 lighthouse-core/report/html/report-styles.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index c28bca078c14..3c2cc34113d7 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -588,6 +588,9 @@
   justify-content: center;
   padding: 2px 5px;
 }
+.lh-metrics-toggle input:focus + label {
+  outline: -webkit-focus-ring-color auto 3px;
+}
 .lh-metrics-toggle input:not(:checked) + label .lh-metrics-toggle-less,
 .lh-metrics-toggle input:checked + label .lh-metrics-toggle-more {
   background-color: var(--color-blue);

From ce01a5a7dc0c0b4dded32d7e7491dc71c4e140c8 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 13:51:39 -0700
Subject: [PATCH 07/19] trim svg

---
 lighthouse-core/report/html/templates.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index e3428c4eaa31..3102e3b748d6 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -78,16 +78,12 @@
           <defs>
             <path id="a" d="M0 0h24v24H0V0z" />
           </defs>
-          <clipPath id="b">
-            <use xlink:href="#a" overflow="visible" />
-          </clipPath>
           <path class="lh-metrics-toggle-lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
         </svg>
       </div>
       <div class="lh-metrics-toggle-more" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
           <path class="lh-metrics-toggle-lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
-          <path fill="none" d="M0 0h24v24H0V0z" />
         </svg>
       </div>
     </label>

From 60696ec75830e147ea497ccfcbd191b86a06dd46 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 16:02:08 -0700
Subject: [PATCH 08/19] combine and blur

---
 .../report/html/renderer/report-ui-features.js         | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 984903615793..1403c9e7541f 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -65,8 +65,8 @@ class ReportUIFeatures {
     this._toggleDarkTheme = this._toggleDarkTheme.bind(this);
     this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this);
     this._toggleMetricDescription = this._toggleMetricDescription.bind(this);
-    this._setupMetricDescriptionToggleListeners =
-      this._setupMetricDescriptionToggleListeners.bind(this);
+    this._setupMetricDescriptionToggleElements =
+      this._setupMetricDescriptionToggleElements.bind(this);
   }
 
   /**
@@ -89,7 +89,6 @@ class ReportUIFeatures {
     this._document.addEventListener('scroll', this._updateStickyHeaderOnScroll);
     window.addEventListener('resize', this._updateStickyHeaderOnScroll);
     this._setupMetricDescriptionToggleElements();
-    this._setupMetricDescriptionToggleListeners();
     const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
     topbarLogo.addEventListener('click', this._toggleDarkTheme);
   }
@@ -170,17 +169,16 @@ class ReportUIFeatures {
     this.metricDescriptionToggleEl =
       /** @type {HTMLInputElement} */ (this._dom.find('.lh-metrics-toggle input', this._document));
     this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
-  }
 
-  _setupMetricDescriptionToggleListeners() {
-    const toggle = () => this.metricDescriptionToggleEl.click();
     this.metricDescriptionToggleEl.addEventListener('input', this._toggleMetricDescription);
+    const toggle = () => this.metricDescriptionToggleEl.click();
     for (const el of this._dom.findAll('.lh-metric', this._document)) {
       el.addEventListener('click', toggle);
     }
   }
 
   _toggleMetricDescription() {
+    this.metricDescriptionToggleEl.blur();
     const show = this.metricDescriptionToggleEl.checked;
     this.metricAuditGroup.classList.toggle('lh-audit-group--metrics__show-descriptions', show);
   }

From a52013ebbb50e25d2a4965b7a76a6e5a0e1534d5 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 21:53:19 -0700
Subject: [PATCH 09/19] bem

---
 lighthouse-core/report/html/report-styles.css | 30 +++++++++----------
 lighthouse-core/report/html/templates.html    | 10 +++----
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 614019322440..dd8a11321a26 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -572,14 +572,12 @@
 .lh-metrics-toggle {
   position: relative;
 }
-.lh-metrics-toggle input {
+.lh-metrics-toggle__input {
   cursor: pointer;
-  left: 0;
   opacity: 0;
   position: absolute;
-  top: 0;
-  width: 74px;
-  height: 28px;
+  width: 100%;
+  height: 100%;
 }
 .lh-metrics-toggle label {
   display: flex;
@@ -587,32 +585,32 @@
   border-radius: 20px;
   overflow: hidden;
 }
-.lh-metrics-toggle label div {
+.lh-metrics-toggle__input:focus + label {
+  outline: -webkit-focus-ring-color auto 3px;
+}
+.lh-metrics-toggle__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2px 5px;
 }
-.lh-metrics-toggle input:focus + label {
-  outline: -webkit-focus-ring-color auto 3px;
-}
-.lh-metrics-toggle input:not(:checked) + label .lh-metrics-toggle-less,
-.lh-metrics-toggle input:checked + label .lh-metrics-toggle-more {
+.lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less,
+.lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more {
   background-color: var(--color-blue);
 }
-.lh-metrics-toggle-lines {
+.lh-metrics-toggle__lines {
   fill: #7F7F7F;
 }
-.lh-metrics-toggle input:not(:checked) + label .lh-metrics-toggle-less .lh-metrics-toggle-lines,
-.lh-metrics-toggle input:checked + label .lh-metrics-toggle-more .lh-metrics-toggle-lines {
+.lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less .lh-metrics-toggle__lines,
+.lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more .lh-metrics-toggle__lines {
   fill: white;
 }
-.lh-metrics-toggle label div.lh-metrics-toggle-less {
+.lh-metrics-toggle label .lh-metrics-toggle__icon--less {
   width: 50%;
   height: 28px;
   padding-left: 8px;
 }
-.lh-metrics-toggle label div.lh-metrics-toggle-more {
+.lh-metrics-toggle label .lh-metrics-toggle__icon--more {
   width: 50%;
   height: 28px;
   padding-right: 8px;
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 9a9a4f66d1f6..cf8f5bfb362e 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -71,19 +71,19 @@
 <!-- Lighthouse metrics toggle -->
 <template id="tmpl-lh-metrics-toggle">
   <div class="lh-metrics-toggle">
-    <input type="checkbox" name="toggle-metric-descriptions">
+    <input class="lh-metrics-toggle__input" type="checkbox" name="toggle-metric-descriptions">
     <label for="toggle-metric-descriptions">
-      <div class="lh-metrics-toggle-less lh-metrics-toggle--active" aria-hidden="true">
+      <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--less" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
           <defs>
             <path id="a" d="M0 0h24v24H0V0z" />
           </defs>
-          <path class="lh-metrics-toggle-lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
+          <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
         </svg>
       </div>
-      <div class="lh-metrics-toggle-more" aria-hidden="true">
+      <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--more" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-          <path class="lh-metrics-toggle-lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
+          <path class="lh-metrics-toggle__lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
         </svg>
       </div>
     </label>

From 99e8447e493311ebf06f8f6fa1a276068dda234e Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 21:55:41 -0700
Subject: [PATCH 10/19] var

---
 lighthouse-core/report/html/report-styles.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index dd8a11321a26..9b03dd1df028 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -143,6 +143,7 @@
   --color-highlighter-bg: var(--body-text-color);
 
   --color-hover: #FAFAFA;
+  --color-metric-toggle-lines: #7F7F7F;
 
   --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
   --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
@@ -599,11 +600,11 @@
   background-color: var(--color-blue);
 }
 .lh-metrics-toggle__lines {
-  fill: #7F7F7F;
+  fill: var(--color-metric-toggle-lines);
 }
 .lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less .lh-metrics-toggle__lines,
 .lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more .lh-metrics-toggle__lines {
-  fill: white;
+  --color-metric-toggle-lines: var(--color-white);
 }
 .lh-metrics-toggle label .lh-metrics-toggle__icon--less {
   width: 50%;

From 50a0a1acbe6295fb92d24a914fdfee5a830e8843 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 22:06:38 -0700
Subject: [PATCH 11/19] perf cat renderer

---
 .../report/html/renderer/category-renderer.js          |  5 -----
 .../html/renderer/performance-category-renderer.js     |  8 +++++++-
 .../report/html/renderer/report-ui-features.js         | 10 +++++-----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
index 9159d2c3839d..adbfcc063e42 100644
--- a/lighthouse-core/report/html/renderer/category-renderer.js
+++ b/lighthouse-core/report/html/renderer/category-renderer.js
@@ -200,11 +200,6 @@ class CategoryRenderer {
       descriptionEl.classList.add('lh-audit-group__description');
       auditGroupHeader.appendChild(descriptionEl);
     }
-    if (group.title === 'Metrics') {
-      const toggleTmpl = this.dom.cloneTemplate('#tmpl-lh-metrics-toggle', this.templateContext);
-      const toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
-      auditGroupHeader.appendChild(toggleEl);
-    }
     groupEl.appendChild(auditGroupHeader);
 
     return groupEl;
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
index 55673fbbeb81..05115ee48c4d 100644
--- a/lighthouse-core/report/html/renderer/performance-category-renderer.js
+++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -122,10 +122,16 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       element.appendChild(this.renderCategoryHeader(category, groups));
     }
 
-    // Metrics
+    // Metrics.
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
     const metricAuditsEl = this.renderAuditGroup(groups.metrics);
 
+    // Metric descriptions toggle.
+    const auditGroupHeader = this.dom.find('.lh-audit-group__header', metricAuditsEl);
+    const toggleTmpl = this.dom.cloneTemplate('#tmpl-lh-metrics-toggle', this.templateContext);
+    const toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
+    auditGroupHeader.appendChild(toggleEl);
+
     const keyMetrics = metricAudits.filter(a => a.weight >= 3);
     const otherMetrics = metricAudits.filter(a => a.weight < 3);
 
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 1403c9e7541f..9a0e61e908a7 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -65,8 +65,6 @@ class ReportUIFeatures {
     this._toggleDarkTheme = this._toggleDarkTheme.bind(this);
     this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this);
     this._toggleMetricDescription = this._toggleMetricDescription.bind(this);
-    this._setupMetricDescriptionToggleElements =
-      this._setupMetricDescriptionToggleElements.bind(this);
   }
 
   /**
@@ -166,10 +164,12 @@ class ReportUIFeatures {
   }
 
   _setupMetricDescriptionToggleElements() {
-    this.metricDescriptionToggleEl =
-      /** @type {HTMLInputElement} */ (this._dom.find('.lh-metrics-toggle input', this._document));
-    this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
+    const metricDescriptionToggleEl = this._document.querySelector('.lh-metrics-toggle__input');
+    // No metrics if performance category wasn't run.
+    if (!metricDescriptionToggleEl) return;
 
+    this.metricDescriptionToggleEl = /** @type {HTMLInputElement} */ (metricDescriptionToggleEl);
+    this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
     this.metricDescriptionToggleEl.addEventListener('input', this._toggleMetricDescription);
     const toggle = () => this.metricDescriptionToggleEl.click();
     for (const el of this._dom.findAll('.lh-metric', this._document)) {

From 41bb62baf1c2b35f018e70929073c87a83a86337 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 29 Apr 2019 22:21:14 -0700
Subject: [PATCH 12/19] vars

---
 lighthouse-core/report/html/report-styles.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 9b03dd1df028..78db5607b837 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -103,7 +103,7 @@
   --env-item-bg: var(--color-black-100);
   --env-name-min-width: 220px;
   --env-tem-padding: 10px 0px;
-  --expandable-padding: 0 0 2px 28px;
+  --expandable-padding: 0 0 2px calc(var(--score-shape-margin-left) + var(--score-shape-size) + var(--score-shape-margin-right));
   --gauge-circle-size-big: 120px;
   --gauge-circle-size: 96px;
   --header-padding: 20px 0 20px 0;
@@ -119,7 +119,10 @@
   --score-container-width: 160px;
   --score-number-font-size-big: 42px;
   --score-number-font-size: 34px;
-  --score-shape-margin: 7px 12px 0 4px;
+  --score-shape-margin-left: 4px;
+  --score-shape-margin-right: 12px;
+  --score-shape-margin-top: 7px;
+  --score-shape-margin: var(--score-shape-margin-top) var(--score-shape-margin-right) 0 var(--score-shape-margin-left);
   --score-shape-size: 12px;
   --score-title-font-size-big: 28px;
   --score-title-font-size: 20px;
@@ -204,7 +207,6 @@
     --body-font-size: 14px;
     --body-line-height: 20px;
     --env-name-min-width: 120px;
-    --expandable-padding: 0 0 2px 24px;
     --gauge-circle-size-big: 96px;
     --gauge-circle-size: 72px;
     --header-padding: 16px 0 16px 0;
@@ -214,7 +216,8 @@
     --score-container-width: 112px;
     --score-number-font-size-big: 34px;
     --score-number-font-size: 26px;
-    --score-shape-margin: 5px 12px 0 2px;
+    --score-shape-margin-left: 2px;
+    --score-shape-margin-top: 7px;
     --score-shape-size: 10px;
     --score-title-font-size-big: 22px;
     --score-title-font-size: 14px;

From 798908089a3f403d92aae0242ee05ecd829f72fd Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 30 Apr 2019 09:46:10 -0700
Subject: [PATCH 13/19] tests

---
 .../html/renderer/report-ui-features-test.js  | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
index bf47b04d467c..71318a2d964f 100644
--- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -105,7 +105,7 @@ describe('ReportUIFeatures', () => {
       assert.ok(reportUIFeatures.json);
     });
 
-    describe('thrid-party filtering', () => {
+    describe('third-party filtering', () => {
       let container;
 
       beforeAll(() => {
@@ -161,4 +161,32 @@ describe('ReportUIFeatures', () => {
       });
     });
   });
+
+  describe('metric description toggles', () => {
+    let container;
+    let metricsAuditGroup;
+    let toggle;
+    const showClass = 'lh-audit-group--metrics__show-descriptions';
+
+    beforeAll(() => {
+      // render a report onto the UIFeature dom
+      container = dom.find('main', dom._document);
+      renderer.renderReport(sampleResults, container);
+      reportUIFeatures.initFeatures(sampleResults);
+      metricsAuditGroup = dom.find('.lh-audit-group--metrics', container);
+      toggle = dom.find('.lh-metrics-toggle__input', metricsAuditGroup);
+    });
+
+    it('descriptions hidden by default', () => {
+      assert.ok(!metricsAuditGroup.classList.contains(showClass));
+    });
+
+    it('can toggle description visibility', () => {
+      assert.ok(!metricsAuditGroup.classList.contains(showClass));
+      toggle.click();
+      assert.ok(metricsAuditGroup.classList.contains(showClass));
+      toggle.click();
+      assert.ok(!metricsAuditGroup.classList.contains(showClass));
+    });
+  });
 });

From e8f2382c0ffa8db5da78273edcb557aabf2b63b6 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 30 Apr 2019 09:52:14 -0700
Subject: [PATCH 14/19] negative test

---
 .../html/renderer/report-ui-features-test.js  | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
index 71318a2d964f..21fc85f4c400 100644
--- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -168,25 +168,39 @@ describe('ReportUIFeatures', () => {
     let toggle;
     const showClass = 'lh-audit-group--metrics__show-descriptions';
 
-    beforeAll(() => {
-      // render a report onto the UIFeature dom
-      container = dom.find('main', dom._document);
-      renderer.renderReport(sampleResults, container);
-      reportUIFeatures.initFeatures(sampleResults);
-      metricsAuditGroup = dom.find('.lh-audit-group--metrics', container);
-      toggle = dom.find('.lh-metrics-toggle__input', metricsAuditGroup);
-    });
+    describe('works', () => {
+      beforeAll(() => {
+        // render a report onto the UIFeature dom
+        container = dom.find('main', dom._document);
+        renderer.renderReport(sampleResults, container);
+        reportUIFeatures.initFeatures(sampleResults);
+        metricsAuditGroup = dom.find('.lh-audit-group--metrics', container);
+        toggle = dom.find('.lh-metrics-toggle__input', metricsAuditGroup);
+      });
+
+      it('descriptions hidden by default', () => {
+        assert.ok(!metricsAuditGroup.classList.contains(showClass));
+      });
 
-    it('descriptions hidden by default', () => {
-      assert.ok(!metricsAuditGroup.classList.contains(showClass));
+      it('can toggle description visibility', () => {
+        assert.ok(!metricsAuditGroup.classList.contains(showClass));
+        toggle.click();
+        assert.ok(metricsAuditGroup.classList.contains(showClass));
+        toggle.click();
+        assert.ok(!metricsAuditGroup.classList.contains(showClass));
+      });
     });
 
-    it('can toggle description visibility', () => {
-      assert.ok(!metricsAuditGroup.classList.contains(showClass));
-      toggle.click();
-      assert.ok(metricsAuditGroup.classList.contains(showClass));
-      toggle.click();
-      assert.ok(!metricsAuditGroup.classList.contains(showClass));
+    it('report still works if performance category does not run', () => {
+      const lhr = JSON.parse(JSON.stringify(sampleResults));
+      delete lhr.categories.performance;
+
+      // render a report onto the UIFeature dom
+      container = dom.find('main', dom._document);
+      renderer.renderReport(lhr, container);
+      reportUIFeatures.initFeatures(lhr);
+      assert.ok(!container.querySelector('.lh-audit-group--metrics'));
+      assert.ok(!container.querySelector('.lh-metrics-toggle__input'));
     });
   });
 });

From 9b52229adfbeec1b03b0062a78890914264c66e0 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 30 Apr 2019 10:02:29 -0700
Subject: [PATCH 15/19] render()

---
 .../html/renderer/report-ui-features-test.js  | 54 +++++++++----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
index 21fc85f4c400..b3d119a78b16 100644
--- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -26,11 +26,23 @@ const TEMPLATE_FILE_REPORT = fs.readFileSync(__dirname +
   '/../../../../report/html/report-template.html', 'utf8');
 
 describe('ReportUIFeatures', () => {
-  let renderer;
-  let reportUIFeatures;
   let sampleResults;
   let dom;
 
+  /**
+   * @param {LH.JSON} lhr
+   */
+  function render(lhr) {
+    const detailsRenderer = new DetailsRenderer(dom);
+    const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
+    const renderer = new ReportRenderer(dom, categoryRenderer);
+    const reportUIFeatures = new ReportUIFeatures(dom);
+    const container = dom.find('main', dom._document);
+    renderer.renderReport(lhr, container);
+    reportUIFeatures.initFeatures(lhr);
+    return container;
+  }
+
   beforeAll(() => {
     global.Util = Util;
     global.ReportUIFeatures = ReportUIFeatures;
@@ -72,11 +84,7 @@ describe('ReportUIFeatures', () => {
     };
 
     dom = new DOM(document.window.document);
-    const detailsRenderer = new DetailsRenderer(dom);
-    const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-    renderer = new ReportRenderer(dom, categoryRenderer);
     sampleResults = Util.prepareReportResult(sampleResultsOrig);
-    reportUIFeatures = new ReportUIFeatures(dom);
   });
 
   afterAll(() => {
@@ -96,13 +104,8 @@ describe('ReportUIFeatures', () => {
 
   describe('initFeatures', () => {
     it('should init a report', () => {
-      // render a report onto the UIFeature dom
-      const container = reportUIFeatures._dom._document.querySelector('main');
-      renderer.renderReport(sampleResults, container);
-
-      assert.equal(reportUIFeatures.json, undefined);
-      reportUIFeatures.initFeatures(sampleResults);
-      assert.ok(reportUIFeatures.json);
+      const container = render(sampleResults);
+      assert.equal(dom.findAll('.lh-category', container).length, 5);
     });
 
     describe('third-party filtering', () => {
@@ -129,9 +132,7 @@ describe('ReportUIFeatures', () => {
         ];
 
         // render a report onto the UIFeature dom
-        container = dom.find('main', dom._document);
-        renderer.renderReport(lhr, container);
-        reportUIFeatures.initFeatures(lhr);
+        container = render(lhr);
       });
 
       it('filters out third party resources in details tables when checkbox is clicked', () => {
@@ -166,16 +167,15 @@ describe('ReportUIFeatures', () => {
     let container;
     let metricsAuditGroup;
     let toggle;
+    const metricsClass = 'lh-audit-group--metrics';
+    const toggleClass = 'lh-metrics-toggle__input';
     const showClass = 'lh-audit-group--metrics__show-descriptions';
 
     describe('works', () => {
       beforeAll(() => {
-        // render a report onto the UIFeature dom
-        container = dom.find('main', dom._document);
-        renderer.renderReport(sampleResults, container);
-        reportUIFeatures.initFeatures(sampleResults);
-        metricsAuditGroup = dom.find('.lh-audit-group--metrics', container);
-        toggle = dom.find('.lh-metrics-toggle__input', metricsAuditGroup);
+        container = render(sampleResults);
+        metricsAuditGroup = dom.find(`.${metricsClass}`, container);
+        toggle = dom.find(`.${toggleClass}`, metricsAuditGroup);
       });
 
       it('descriptions hidden by default', () => {
@@ -194,13 +194,9 @@ describe('ReportUIFeatures', () => {
     it('report still works if performance category does not run', () => {
       const lhr = JSON.parse(JSON.stringify(sampleResults));
       delete lhr.categories.performance;
-
-      // render a report onto the UIFeature dom
-      container = dom.find('main', dom._document);
-      renderer.renderReport(lhr, container);
-      reportUIFeatures.initFeatures(lhr);
-      assert.ok(!container.querySelector('.lh-audit-group--metrics'));
-      assert.ok(!container.querySelector('.lh-metrics-toggle__input'));
+      container = render(lhr);
+      assert.ok(!container.querySelector(`.${metricsClass}`));
+      assert.ok(!container.querySelector(`.${toggleClass}`));
     });
   });
 });

From a9186e90f0943e3290c312dd8d96af60de75e167 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 30 Apr 2019 15:08:41 -0700
Subject: [PATCH 16/19] event delegation

---
 .../report/html/renderer/report-ui-features.js            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index ea027c250767..bc252bccfee1 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -268,10 +268,10 @@ class ReportUIFeatures {
     this.metricDescriptionToggleEl = /** @type {HTMLInputElement} */ (metricDescriptionToggleEl);
     this.metricAuditGroup = this._dom.find('.lh-audit-group--metrics', this._document);
     this.metricDescriptionToggleEl.addEventListener('input', this._toggleMetricDescription);
-    const toggle = () => this.metricDescriptionToggleEl.click();
-    for (const el of this._dom.findAll('.lh-metric', this._document)) {
-      el.addEventListener('click', toggle);
-    }
+    this.metricAuditGroup.addEventListener('click', e => {
+      const el = /** @type {HTMLElement} */ (e.target);
+      if (el.closest('.lh-metric__title')) this.metricDescriptionToggleEl.click();
+    });
   }
 
   _toggleMetricDescription() {

From 72078d5fde014cadde028c48448722abae63eca0 Mon Sep 17 00:00:00 2001
From: Brendan Kenny <bckenny@gmail.com>
Date: Tue, 30 Apr 2019 15:11:42 -0700
Subject: [PATCH 17/19] Update
 lighthouse-core/test/report/html/renderer/report-ui-features-test.js

Co-Authored-By: Hoten <cjamcl@gmail.com>
---
 .../test/report/html/renderer/report-ui-features-test.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
index b3d119a78b16..8f2b50d596a2 100644
--- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -171,7 +171,7 @@ describe('ReportUIFeatures', () => {
     const toggleClass = 'lh-metrics-toggle__input';
     const showClass = 'lh-audit-group--metrics__show-descriptions';
 
-    describe('works', () => {
+    describe('works if there is a performance category', () => {
       beforeAll(() => {
         container = render(sampleResults);
         metricsAuditGroup = dom.find(`.${metricsClass}`, container);

From a8f0ae42d6854e32a42cb3f74de62130838fcc6f Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 30 Apr 2019 15:20:00 -0700
Subject: [PATCH 18/19] cssssssssssssssssssssssssssssssssssslurp

---
 lighthouse-core/report/html/report-styles.css | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 78db5607b837..552ca9d64085 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -597,29 +597,31 @@
   align-items: center;
   justify-content: center;
   padding: 2px 5px;
+  width: 50%;
+  height: 28px;
 }
 .lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less,
 .lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more {
   background-color: var(--color-blue);
+  --color-metric-toggle-lines: var(--color-white);
 }
 .lh-metrics-toggle__lines {
   fill: var(--color-metric-toggle-lines);
 }
-.lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less .lh-metrics-toggle__lines,
-.lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more .lh-metrics-toggle__lines {
-  --color-metric-toggle-lines: var(--color-white);
-}
 .lh-metrics-toggle label .lh-metrics-toggle__icon--less {
-  width: 50%;
-  height: 28px;
   padding-left: 8px;
 }
 .lh-metrics-toggle label .lh-metrics-toggle__icon--more {
-  width: 50%;
-  height: 28px;
   padding-right: 8px;
 }
 
+/* Pushes the metric description toggle button to the right. */
+.lh-audit-group--metrics .lh-audit-group__header {
+  display: flex;
+}
+.lh-audit-group--metrics .lh-audit-group__header span.lh-audit-group__title {
+  flex: 1;
+}
 
 .lh-metric .lh-metric__innerwrap::before {
   content: '';
@@ -855,14 +857,6 @@
   font-weight: bold;
 }
 
-/* Pushes the metric description toggle button to the right. */
-.lh-audit-group--metrics .lh-audit-group__header {
-  display: flex;
-}
-.lh-audit-group--metrics .lh-audit-group__header span.lh-audit-group__title {
-  flex: 1;
-}
-
 .lh-audit-group__header span.lh-audit-group__itemcount {
   font-weight: bold;
   color: var(--color-black-600);

From 42b439c82918623ae27f4dd7215ab5dfbb74a487 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 30 Apr 2019 15:22:46 -0700
Subject: [PATCH 19/19] svggggggggggggggggggggggggggglurp

---
 lighthouse-core/report/html/templates.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index b332485d56a5..09ca0479da92 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -75,10 +75,7 @@
     <label for="toggle-metric-descriptions">
       <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--less" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-          <defs>
-            <path id="a" d="M0 0h24v24H0V0z" />
-          </defs>
-          <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" clip-path="url(#b)" />
+          <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" />
         </svg>
       </div>
       <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--more" aria-hidden="true">