report(metrics): [revert] use css grid so metrics are aligned (#10695) (

#10778)
GoogleChrome · May 13, 2020 · 5f372ea · 5f372ea
1 parent 8369a08
commit 5f372ea
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 24 deletions.
diff --git 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
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
@@ -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
@@ -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)