Report: clearer iconography in Perf metrics and Fancier Stuff (#1750)

lighthouse-core/aggregator/aggregate.js

@@ -211,6 +211,7 @@ class Aggregate {
       name: aggregation.name,
       description: aggregation.description,
       scored: aggregation.scored,
+      additional: aggregation.additional,
       total: (aggregation.scored ? Aggregate.getTotal(score) : null),
       categorizable: aggregation.categorizable,
       score: score

lighthouse-core/audits/audit.js

@@ -73,6 +73,7 @@ class Audit {
       debugString: result.debugString,
       optimalValue: result.optimalValue,
       extendedInfo: result.extendedInfo,
+      informative: this.meta.informative,
       name: this.meta.name,
       category: this.meta.category,
       description: this.meta.description,

lighthouse-core/audits/user-timings.js

@@ -32,7 +32,8 @@ class UserTimings extends Audit {
       helpText: 'Consider instrumenting your app with the User Timing API to create custom, ' +
           'real-world measurements of key user experiences. ' +
           '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/user-timing).',
-      requiredArtifacts: ['traces']
+      requiredArtifacts: ['traces'],
+      informative: true
     };
   }
 

lighthouse-core/config/default.json

@@ -432,6 +432,7 @@
     "description": "A list of newer features that you could be using in your app. These audits do not affect your score and are just suggestions.",
     "scored": false,
     "categorizable": true,
+    "additional": true,
     "items": [{
       "name": "New JavaScript features",
       "audits": {

lighthouse-core/report/handlebar-helpers.js

@@ -72,6 +72,13 @@ const handlebarHelpers = {
   // for color styling.
   getItemRating,
 
+  // Figures out the icon to display when success or info
+  getScoreGoodIcon: informative => informative ? 'info' : 'good',
+
+  // Figures out the icon to display when fail or warn
+  getScoreBadIcon: (informative, additional) =>
+    (informative || additional) ? 'warning score-warning-bg':'poor score-poor-bg',
+
   shouldShowHelpText: value => (getItemRating(value) !== RATINGS.GOOD.label),
 
   // Convert numbers to fixed point decimals

lighthouse-core/report/styles/report.css

@@ -795,7 +795,7 @@ summary {
   align-items: flex-end;
 }
 
-.subitem-result__good, .subitem-result__average, .subitem-result__poor, .subitem-result__unknown {
+.subitem-result__good, .subitem-result__average, .subitem-result__poor, .subitem-result__unknown, .subitem-result__warning, .subitem-result__info {
   position: relative;
   display: block;
   overflow: hidden;
@@ -807,7 +807,7 @@ summary {
   background-color: #000;
 }
 
-.subitem-result__good::after, .subitem-result__average:after, .subitem-result__poor::after, .subitem-result__unknown::after {
+.subitem-result__good::after, .subitem-result__average:after, .subitem-result__poor::after, .subitem-result__unknown::after, .subitem-result__warning::after, .subitem-result__info::after {
   content: '';
   position: absolute;
   left: 0;
@@ -838,6 +838,14 @@ summary {
   background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
   background-size: 12px;
 }
+.subitem-result__warning::after {
+  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>warn</title><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="white"/></svg>') no-repeat 50% 50%;
+  background-size: 12px;
+}
+.subitem-result__info::after {
+  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="white"/></svg>') no-repeat 50% 50%;
+  background-size: 12px;
+}
 .subitem-result__unknown::after {
   background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>neutral</title><path d="M2 5h8v2H2z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
   background-size: 12px;

lighthouse-core/report/templates/report-template.html

@@ -118,7 +118,7 @@ <h2 class="config-section__title">Blocked URL Patterns</h2>
         </div>
       </div>
       <div class="report-body__aggregations-container">
-      {{#each aggregations}}
+      {{#each aggregations as |aggregations|}}
       <section class="js-breakdown aggregations" id="{{nameToLink this.name}}">
         <header class="aggregations__header">
           <h2>{{ this.name }}</h2>
@@ -196,9 +196,9 @@ <h2>{{ aggregation.name }}</h2>
                     {{else}}
                       {{#if (isBool subItem.score)}}
                         {{#if subItem.score}}
-                          <span class="subitem-result__good score-good-bg">Pass</span>
+                          <span class="subitem-result__{{ getScoreGoodIcon subItem.informative }} score-good-bg">Pass</span>
                         {{else}}
-                          <span class="subitem-result__poor score-poor-bg">Fail</span>
+                          <span class="subitem-result__{{ getScoreBadIcon subItem.informative aggregations.additional }}">Fail</span>
                         {{/if}}
                       {{else}}
                         <span class="subitem-result__points score-{{ getItemRating subItem.score }}-bg">