report: metric toggle without JS

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -127,10 +127,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     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);
+    metricAuditsEl.prepend(...toggleEl.childNodes);
 
     const keyMetrics = metricAudits.filter(a => a.weight >= 3);
     const otherMetrics = metricAudits.filter(a => a.weight < 3);

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -58,10 +58,6 @@ class ReportUIFeatures {
     this.stickyHeaderEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
     this.highlightEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLInputElement} */
-    this.metricDescriptionToggleEl; // 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);
@@ -74,7 +70,6 @@ class ReportUIFeatures {
     this.expandAllDetails = this.expandAllDetails.bind(this);
     this._toggleDarkTheme = this._toggleDarkTheme.bind(this);
     this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this);
-    this._toggleMetricDescription = this._toggleMetricDescription.bind(this);
   }
 
   /**
@@ -97,7 +92,6 @@ class ReportUIFeatures {
     this._document.addEventListener('copy', this.onCopy);
     this._document.addEventListener('scroll', this._updateStickyHeaderOnScroll);
     window.addEventListener('resize', this._updateStickyHeaderOnScroll);
-    this._setupMetricDescriptionToggleElements();
     const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
     topbarLogo.addEventListener('click', this._toggleDarkTheme);
   }
@@ -260,26 +254,6 @@ class ReportUIFeatures {
     this._copyAttempt = false;
   }
 
-  _setupMetricDescriptionToggleElements() {
-    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);
-    this.metricAuditGroup.addEventListener('click', e => {
-      const el = /** @type {HTMLElement} */ (e.target);
-      if (el.closest('.lh-metric__title')) this.metricDescriptionToggleEl.click();
-    });
-  }
-
-  _toggleMetricDescription() {
-    this.metricDescriptionToggleEl.blur();
-    const show = this.metricDescriptionToggleEl.checked;
-    this.metricAuditGroup.classList.toggle('lh-audit-group--metrics__show-descriptions', show);
-  }
-
   /**
    * Copies the report JSON to the clipboard (if supported by the browser).
    */

lighthouse-core/report/html/report-styles.css

@@ -602,30 +602,36 @@
   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 {
-  position: relative;
+/* No-JS toggle switch */
+/* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */
+ .lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description {
+  display: block;
 }
+
 .lh-metrics-toggle__input {
   cursor: pointer;
   opacity: 0;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  right: 0;
+  width: 74px;
+  height: 28px;
+  top: -3px;
 }
-.lh-metrics-toggle label {
+.lh-metrics-toggle__label {
   display: flex;
   background-color: #eee;
   border-radius: 20px;
   overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: -3px;
+  pointer-events: none;
 }
 .lh-metrics-toggle__input:focus + label {
   outline: -webkit-focus-ring-color auto 3px;
@@ -647,14 +653,14 @@
   fill: var(--color-metric-toggle-lines);
 }
 
-.lh-metrics-toggle label {
+.lh-metrics-toggle__label  {
   background-color: var(--metrics-toggle-color);
 }
 
-.lh-metrics-toggle label .lh-metrics-toggle__icon--less {
+.lh-metrics-toggle__label .lh-metrics-toggle__icon--less {
   padding-left: 8px;
 }
-.lh-metrics-toggle label .lh-metrics-toggle__icon--more {
+.lh-metrics-toggle__label .lh-metrics-toggle__icon--more {
   padding-right: 8px;
 }
 
@@ -833,6 +839,7 @@
 
 .lh-audit-group {
   margin-bottom: var(--audits-margin-bottom);
+  position: relative;
 }
 
 .lh-audit-group__header::before {

lighthouse-core/report/html/templates.html

@@ -72,7 +72,7 @@
 <template id="tmpl-lh-metrics-toggle">
   <div class="lh-metrics-toggle">
     <input class="lh-metrics-toggle__input" type="checkbox" name="toggle-metric-descriptions">
-    <label for="toggle-metric-descriptions">
+    <label class="lh-metrics-toggle__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">
           <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" />
@@ -339,7 +339,7 @@
     </svg>
 
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
-    
+
     <div class="lh-export">
       <button class="report-icon report-icon--share lh-export__button" title="Export report"></button>
       <div class="lh-export__dropdown">

lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js

@@ -41,6 +41,7 @@ describe('PerfCategoryRenderer', () => {
     const detailsRenderer = new DetailsRenderer(dom);
     renderer = new PerformanceCategoryRenderer(dom, detailsRenderer);
 
+    // TODO: don't call a LH.ReportResult `sampleResults`, which is typically always LH.Result
     sampleResults = Util.prepareReportResult(sampleResultsOrig);
     category = sampleResults.reportCategories.find(cat => cat.id === 'performance');
   });
@@ -173,4 +174,36 @@ describe('PerfCategoryRenderer', () => {
       assert.ok(Number.isFinite(wastedMs), 'Finite number not returned by wastedMs');
     });
   });
+
+  // This is done all in CSS, but tested here.
+  describe('metric description toggles', () => {
+    let container;
+    let toggle;
+    const metricsSelector = '.lh-audit-group--metrics';
+    const toggleSelector = '.lh-metrics-toggle__input';
+    const magicSelector = '.lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description';
+    let getDescriptionsAfterCheckedToggle;
+
+    describe('works if there is a performance category', () => {
+      beforeAll(() => {
+        container = renderer.render(category, sampleResults.categoryGroups);
+        const metricsAuditGroup = container.querySelector(metricsSelector);
+        toggle = metricsAuditGroup.querySelector(toggleSelector);
+        // In the CSS, our magicSelector will flip display from `none` to `block`
+        getDescriptionsAfterCheckedToggle = _ => metricsAuditGroup.querySelectorAll(magicSelector);
+      });
+
+      it('descriptions hidden by default', () => {
+        assert.ok(getDescriptionsAfterCheckedToggle().length === 0);
+      });
+
+      it('can toggle description visibility', () => {
+        assert.ok(getDescriptionsAfterCheckedToggle().length === 0);
+        toggle.click();
+        assert.ok(getDescriptionsAfterCheckedToggle().length > 2);
+        toggle.click();
+        assert.ok(getDescriptionsAfterCheckedToggle().length === 0);
+      });
+    });
+  });
 });

lighthouse-core/test/report/html/renderer/report-ui-features-test.js

@@ -162,41 +162,4 @@ describe('ReportUIFeatures', () => {
       });
     });
   });
-
-  describe('metric description toggles', () => {
-    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 if there is a performance category', () => {
-      beforeAll(() => {
-        container = render(sampleResults);
-        metricsAuditGroup = dom.find(`.${metricsClass}`, container);
-        toggle = dom.find(`.${toggleClass}`, 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));
-      });
-    });
-
-    it('report still works if performance category does not run', () => {
-      const lhr = JSON.parse(JSON.stringify(sampleResults));
-      delete lhr.categories.performance;
-      container = render(lhr);
-      assert.ok(!container.querySelector(`.${metricsClass}`));
-      assert.ok(!container.querySelector(`.${toggleClass}`));
-    });
-  });
 });