Repository: GoogleChrome/lighthouse
Pull request #8531 (2019-04-22 23:37:34)

report(redesign): misc whitespace and color changes
#8185


Patch:
diff --git a/lighthouse-cli/bin.js b/lighthouse-cli/bin.js
index b442e8549..510a766e4 100644
--- a/lighthouse-cli/bin.js
+++ b/lighthouse-cli/bin.js
@@ -94,6 +94,12 @@ async function begin() {
     cliFlags.outputPath = 'stdout';
   }
 
+  // @ts-ignore - deprecation message for removed disableDeviceEmulation; can remove warning in v6.
+  if (cliFlags.disableDeviceEmulation) {
+    log.warn('config', 'The "--disable-device-emulation" has been removed in v5.' +
+        ' Please use "--emulated-form-factor=none" instead.');
+  }
+
   if (cliFlags.extraHeaders) {
     // TODO: LH.Flags.extraHeaders is actually a string at this point, but needs to be
     // copied over to LH.Settings.extraHeaders, which is LH.Crdp.Network.Headers. Force
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index aaf2e54b2..42d8b7466 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -223,20 +223,28 @@ class ReportRenderer {
     // }
 
     if (scoreHeader) {
+      // Group gauges in this order: default, pwa, plugins.
       const defaultGauges = [];
-      const customGauges = [];
+      const customGauges = []; // PWA.
+      const pluginGauges = [];
       for (const category of report.reportCategories) {
         const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
         const categoryGauge = renderer.renderScoreGauge(category, report.categoryGroups || {});
 
-        // Group gauges that aren't default at the end of the header
-        if (renderer.renderScoreGauge === categoryRenderer.renderScoreGauge) {
+        if (Util.isPluginCategory(category.id)) {
+          pluginGauges.push(categoryGauge);
+        } else if (renderer.renderScoreGauge === categoryRenderer.renderScoreGauge) {
+          // The renderer for default categories is just the default CategoryRenderer.
+          // If the functions are equal, then renderer is an instance of CategoryRenderer.
+          // For example, the PWA category uses PwaCategoryRenderer, which overrides
+          // CategoryRenderer.renderScoreGauge, so it would fail this check and be placed
+          // in the customGauges bucket.
           defaultGauges.push(categoryGauge);
         } else {
           customGauges.push(categoryGauge);
         }
       }
-      scoreHeader.append(...defaultGauges, ...customGauges);
+      scoreHeader.append(...defaultGauges, ...customGauges, ...pluginGauges);
 
       const scoreScale = this._dom.cloneTemplate('#tmpl-lh-scorescale', this._templateContext);
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index b7c069927..ea9be076b 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -202,7 +202,7 @@
   100% { opacity: 0.6;}
 }
 
-.lh-root * {
+.lh-root *, .lh-root *::before, .lh-root *::after {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
 }
@@ -830,7 +830,6 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  padding: var(--section-indent) calc(var(--section-indent) / 2) calc(var(--section-indent) * 2);
 }
 .lh-scores-header__solo {
   padding: 0;
@@ -852,7 +851,6 @@
   margin: 12px auto 0 auto;
   border: 1px solid var(--color-black-200);
   border-radius: 20px;
-  color: var(--medium-75-gray);
   padding: 8px 8px;
 }
 
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index fbe6d58f6..1b16ab052 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -562,14 +562,16 @@ limitations under the License.
     .lh-gauge__label {
       font-size: var(--score-title-font-size);
       line-height: var(--score-title-line-height);
-      margin: calc(0.5 * var(--score-title-line-height));
+      margin-bottom: calc(0.5 * var(--score-title-line-height));
       text-align: center;
       color: black;
     }
 
+    /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendent selector */
     .lh-category .lh-gauge__label {
       --score-title-font-size: var(--score-title-font-size-big);
       --score-title-line-height: var(--score-title-line-height-big);
+      margin: calc(0.5 * var(--score-title-line-height));
     }
 
   </style>


Test patch:
diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
index 0121fd116..f788bebba 100644
--- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
@@ -104,21 +104,39 @@ describe('ReportRenderer', () => {
       assert.ok(header.querySelector('.lh-scores-container'), 'contains score container');
     });
 
-    it('renders special score gauges after the mainstream ones', () => {
+    it('renders score gauges in this order: default, pwa, plugins', () => {
+      const sampleResultsCopy = JSON.parse(JSON.stringify(sampleResults));
+      sampleResultsCopy.categories['lighthouse-plugin-someplugin'] = {
+        id: 'lighthouse-plugin-someplugin',
+        title: 'Some Plugin',
+        auditRefs: [],
+      };
+
       const container = renderer._dom._document.body;
-      const output = renderer.renderReport(sampleResults, container);
+      const output = renderer.renderReport(sampleResultsCopy, container);
 
-      const indexOfFirstIrregularGauge = Array.from(output
+      const indexOfPwaGauge = Array.from(output
         .querySelectorAll('.lh-scores-header > a[class*="lh-gauge"]')).findIndex(el => {
         return el.matches('.lh-gauge--pwa__wrapper');
       });
 
+      const indexOfPluginGauge = Array.from(output
+        .querySelectorAll('.lh-scores-header > a[class*="lh-gauge"]')).findIndex(el => {
+        return el.matches('.lh-gauge__wrapper--plugin');
+      });
+
       const scoresHeaderElem = output.querySelector('.lh-scores-header');
+      assert.equal(scoresHeaderElem.children.length - 2, indexOfPwaGauge);
+      assert.equal(scoresHeaderElem.children.length - 1, indexOfPluginGauge);
+      assert(indexOfPluginGauge > indexOfPwaGauge);
+
       for (let i = 0; i < scoresHeaderElem.children.length; i++) {
         const gauge = scoresHeaderElem.children[i];
 
         assert.ok(gauge.classList.contains('lh-gauge__wrapper'));
-        if (i >= indexOfFirstIrregularGauge) {
+        if (i >= indexOfPluginGauge) {
+          assert.ok(gauge.classList.contains('lh-gauge__wrapper--plugin'));
+        } else if (i >= indexOfPwaGauge) {
           assert.ok(gauge.classList.contains('lh-gauge--pwa__wrapper'));
         }
       }