From 5f372eace962406ab377e5cff33dbc517f89b9b3 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Wed, 13 May 2020 16:02:15 -0700
Subject: [PATCH] report(metrics): [revert] use css grid so metrics are aligned
 (#10695) (#10778)

---
 .../renderer/performance-category-renderer.js | 15 ++++--
 lighthouse-core/report/html/report-styles.css | 51 ++++++++++++-------
 .../performance-category-renderer-test.js     |  3 +-
 lighthouse-viewer/test/viewer-test-pptr.js    |  4 +-
 4 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
index 1ef897527b98..c6399e4563db 100644
--- a/lighthouse-core/report/html/renderer/performance-category-renderer.js
+++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -162,10 +162,19 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     metricAuditsEl.append(..._toggleEl.childNodes);
 
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
-    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
 
-    metricAudits.forEach(item => {
-      metricsBoxesEl.appendChild(this._renderMetric(item));
+    const keyMetrics = metricAudits.slice(0, 3);
+    const otherMetrics = metricAudits.slice(3);
+
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-columns');
+    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column');
+    const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column');
+
+    keyMetrics.forEach(item => {
+      metricsColumn1El.appendChild(this._renderMetric(item));
+    });
+    otherMetrics.forEach(item => {
+      metricsColumn2El.appendChild(this._renderMetric(item));
     });
 
     // 'Values are estimated and may vary' is used as the category description for PSI
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 868b94403eb3..eecff95ad6d5 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -552,35 +552,52 @@
   display: none;
 }
 
+
 /* Perf Metric */
 
-.lh-metrics-container {
-  display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-auto-flow: column;
-  grid-column-gap: 24px;
+.lh-columns {
+  display: flex;
+  width: 100%;
 }
+@media screen and (max-width: 640px) {
+  .lh-columns {
+    flex-wrap: wrap;
 
-.lh-metric {
-  border-top: 1px solid var(--report-border-color-secondary);
+  }
 }
 
-@media screen and (min-width: 640px) {
-  .lh-metric:nth-last-child(-n+2) {
-    border-bottom: 1px solid var(--report-border-color-secondary);
-  }
+.lh-column {
+  flex: 1;
+}
+.lh-column:first-of-type {
+  margin-right: 24px;
 }
 
+@media screen and (max-width: 800px) {
+  .lh-column:first-of-type {
+    margin-right: 8px;
+  }
+}
 @media screen and (max-width: 640px) {
-  .lh-metrics-container {
-    display: block;
+  .lh-column {
+    flex-basis: 100%;
   }
-
-  .lh-metric:nth-last-child(-n+1) {
-    border-bottom: 1px solid var(--report-border-color-secondary);
+  .lh-column:first-of-type {
+    margin-right: 0px;
+  }
+  .lh-column:first-of-type .lh-metric:last-of-type {
+    border-bottom: 0;
   }
 }
 
+
+.lh-metric {
+  border-bottom: 1px solid var(--report-border-color-secondary);
+}
+.lh-metric:first-of-type {
+  border-top: 1px solid var(--report-border-color-secondary);
+}
+
 .lh-metric__innerwrap {
   display: grid;
   grid-template-columns: var(--audit-description-padding-left) 10fr 3fr;
@@ -624,7 +641,7 @@
 
 /* No-JS toggle switch */
 /* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */
- .lh-metrics-toggle__input:checked ~ .lh-metrics-container .lh-metric__description {
+ .lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description {
   display: block;
 }
 
diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
index 9b7bd9975fc6..7916a246ff9b 100644
--- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
@@ -304,8 +304,7 @@ describe('PerfCategoryRenderer', () => {
     let toggle;
     const metricsSelector = '.lh-audit-group--metrics';
     const toggleSelector = '.lh-metrics-toggle__input';
-    const magicSelector =
-      '.lh-metrics-toggle__input:checked ~ .lh-metrics-container .lh-metric__description';
+    const magicSelector = '.lh-metrics-toggle__input:checked ~ .lh-columns .lh-metric__description';
     let getDescriptionsAfterCheckedToggle;
 
     describe('works if there is a performance category', () => {
diff --git a/lighthouse-viewer/test/viewer-test-pptr.js b/lighthouse-viewer/test/viewer-test-pptr.js
index 525203a338fd..7b57885c2d52 100644
--- a/lighthouse-viewer/test/viewer-test-pptr.js
+++ b/lighthouse-viewer/test/viewer-test-pptr.js
@@ -192,7 +192,7 @@ describe('Lighthouse Viewer', () => {
       await viewerPage.goto(url);
 
       // Wait for report to render.
-      await viewerPage.waitForSelector('.lh-metrics-container');
+      await viewerPage.waitForSelector('.lh-columns');
 
       const interceptedUrl = new URL(interceptedRequest.url());
       expect(interceptedUrl.origin + interceptedUrl.pathname)
@@ -249,7 +249,7 @@ describe('Lighthouse Viewer', () => {
       await viewerPage.goto(url);
 
       // Wait for report to render.call out to PSI with specified categories
-      await viewerPage.waitForSelector('.lh-metrics-container');
+      await viewerPage.waitForSelector('.lh-columns');
 
       const interceptedUrl = new URL(interceptedRequest.url());
       expect(interceptedUrl.origin + interceptedUrl.pathname)