Repository: GoogleChrome/lighthouse
Pull request #8532 (2019-04-23 01:22:02)

report(redesign): pwa icons
Replaces the icons in the PWA subsections with the assets from https://github.com/GoogleChrome/lighthouse/pull/8222#issuecomment-483768116

ref #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..9130bab3f 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -106,6 +106,8 @@
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
   --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
   --plugin-icon-size: 65%;
+  --pwa-icon-margin: 0 6px 0 -2px;
+  --pwa-icon-size: var(--topbar-icon-size);
   --score-container-padding: 12px;
   --score-container-width: 160px;
   --score-number-font-size-big: 42px;
@@ -140,9 +142,9 @@
   --pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle fill="%23DAE0E3" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
   --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23DAE0E3" width="24" height="24" rx="12"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/><path d="M5 5h14v14H5z"/></g></svg>');
 
-  --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%23CCE3F6" cx="12" cy="12" r="12"/><path d="M12 4.3l6.3 2.8v4.2c0 3.88-2.69 7.52-6.3 8.4-3.61-.88-6.3-4.51-6.3-8.4V7.1L12 4.3zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.3 12.82c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z" fill="%23304FFE"/></g></svg>');
-  --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%23D4ECD5" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23009688"/></g></svg>');
-  --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23FCE4EC" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23EC3F7A" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></svg>');
+  --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%230CCE6B" cx="12" cy="12" r="12"/><path d="M12 4.3l6.3 2.8v4.2c0 3.88-2.69 7.52-6.3 8.4-3.61-.88-6.3-4.51-6.3-8.4V7.1L12 4.3zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.3 12.82c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z" fill="%23FFF"/></g></svg>');
+  --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%230CCE6B" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
+  --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%230CCE6B" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></svg>');
 }
 
 @media only screen and (max-width: 480px) {
@@ -155,6 +157,7 @@
     --gauge-circle-size: 72px;
     --header-padding: 16px 0 16px 0;
     --plugin-icon-size: 75%;
+    --pwa-icon-margin: 0 7px 0 -3px;
     --score-container-padding: 8px;
     --score-container-width: 112px;
     --score-number-font-size-big: 34px;
@@ -202,7 +205,7 @@
   100% { opacity: 0.6;}
 }
 
-.lh-root * {
+.lh-root *, .lh-root *::before, .lh-root *::after {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
 }
@@ -656,29 +659,24 @@
 .lh-audit-group__header::before {
   /* By default, groups don't get an icon */
   content: none;
-  width: calc(var(--subheader-font-size) / 14 * 24);
-  height: calc(var(--subheader-font-size) / 14 * 24);
-  margin-right: calc(var(--subheader-font-size) / 2);
-  background: var(--medium-100-gray) none no-repeat center / 16px;
+  width: var(--pwa-icon-size);
+  height: var(--pwa-icon-size);
+  margin: var(--pwa-icon-margin);
   display: inline-block;
-  border-radius: 50%;
   vertical-align: middle;
 }
 
 .lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before {
   content: '';
   background-image: var(--pwa-fast-reliable-gray-url);
-  background-size: var(--lh-group-icon-background-size);
 }
 .lh-audit-group--pwa-installable .lh-audit-group__header::before {
   content: '';
   background-image: var(--pwa-installable-gray-url);
-  background-size: var(--lh-group-icon-background-size);
 }
 .lh-audit-group--pwa-optimized .lh-audit-group__header::before {
   content: '';
   background-image: var(--pwa-optimized-gray-url);
-  background-size: var(--lh-group-icon-background-size);
 }
 .lh-audit-group--pwa-fast-reliable.lh-badged .lh-audit-group__header::before {
   background-image: var(--pwa-fast-reliable-color-url);
@@ -830,7 +828,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 +849,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'));
         }
       }