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

GoogleChrome · May 13, 2020 · d8d386d · d8d386d
1 parent c8a5a11
commit d8d386d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 49 deletions.
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
@@ -132,19 +132,10 @@ 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');
 
-    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));
+    metricAudits.forEach(item => {
+      metricsBoxesEl.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
@@ -240,7 +240,8 @@ describe('PerfCategoryRenderer', () => {
     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';
+    const magicSelector =
+      '.lh-metrics-toggle__input:checked ~ .lh-metrics-container .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-columns');
+      await viewerPage.waitForSelector('.lh-metrics-container');
 
       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-columns');
+      await viewerPage.waitForSelector('.lh-metrics-container');
 
       const interceptedUrl = new URL(interceptedRequest.url());
       expect(interceptedUrl.origin + interceptedUrl.pathname)