Report: collapse aggregations when all audits pass

lighthouse-core/aggregator/aggregate.js

@@ -147,10 +147,9 @@ class Aggregate {
    * Compares the set of audit results to the expected values.
    * @param {!Array<!AuditResult>} results The audit results.
    * @param {!Array<!AggregationItem>} items The aggregation's expected values and weighting.
-   * @param {!boolean} aggregationIsScored Whether or not the aggregation is scored.
    * @return {!Array<!AggregationResultItem>} The aggregation score.
    */
-  static compare(results, items, aggregationIsScored) {
+  static compare(results, items) {
     return items.map(item => {
       const expectedNames = Object.keys(item.audits);
 
@@ -174,21 +173,13 @@ class Aggregate {
 
         subItems.push(filteredAndRemappedResults[e].name);
 
-        // Only add to the score if this aggregation contributes to the
-        // overall score.
-        if (!aggregationIsScored) {
-          return;
-        }
-
         overallScore += Aggregate._convertToWeight(
             filteredAndRemappedResults[e],
             item.audits[e],
             e);
       });
 
-      if (aggregationIsScored) {
-        maxScore = Aggregate._getTotalWeight(item.audits);
-      }
+      maxScore = Aggregate._getTotalWeight(item.audits);
 
       return {
         overall: (overallScore / maxScore),
@@ -215,7 +206,7 @@ class Aggregate {
    * @return {!AggregationResult}
    */
   static aggregate(aggregation, auditResults) {
-    const score = Aggregate.compare(auditResults, aggregation.items, aggregation.scored);
+    const score = Aggregate.compare(auditResults, aggregation.items);
     return {
       name: aggregation.name,
       description: aggregation.description,

lighthouse-core/audits/dobetterweb/dom-size.js

@@ -89,11 +89,21 @@ class DOMSize extends Audit {
     // Clamp the score to 0 <= x <= 100.
     score = Math.max(0, Math.min(100, score));
 
-    const cards = [
-      {title: 'Total DOM Nodes', value: stats.totalDOMNodes.toLocaleString()},
-      {title: 'DOM Depth', value: stats.depth.max.toLocaleString(), snippet: depthSnippet},
-      {title: 'Maximum Children', value: stats.width.max.toLocaleString(), snippet: widthSnippet}
-    ];
+    const cards = [{
+      title: 'Total DOM Nodes',
+      value: stats.totalDOMNodes.toLocaleString(),
+      target: `< ${MAX_DOM_NODES.toLocaleString()} nodes`
+    }, {
+      title: 'DOM Depth',
+      value: stats.depth.max.toLocaleString(),
+      snippet: depthSnippet,
+      target: `< ${MAX_DOM_TREE_DEPTH.toLocaleString()}`
+    }, {
+      title: 'Maximum Children',
+      value: stats.width.max.toLocaleString(),
+      snippet: widthSnippet,
+      target: `< ${MAX_DOM_TREE_WIDTH.toLocaleString()} nodes`
+    }];
 
     return DOMSize.generateAuditResult({
       rawValue: stats.totalDOMNodes,

lighthouse-core/config/default.json

@@ -258,73 +258,98 @@
       "name": "Using modern offline features",
       "audits": {
         "appcache-manifest": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "no-websql": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         }
       }
     }, {
       "name": "Using modern protocols",
       "audits": {
         "is-on-https": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "uses-http2": {
-          "expectedValue": false,
-          "description": "Resources made by this application should be severed over HTTP/2 for improved performance."
+          "expectedValue": true,
+          "description": "Resources made by this application should be severed over HTTP/2 for improved performance.",
+          "weight": 1
         }
       }
     }, {
       "name": "Using bytes efficiently",
       "audits": {
-        "unused-css-rules": {},
-        "uses-optimized-images": {},
-        "uses-responsive-images": {}
+        "unused-css-rules": {
+          "expectedValue": true,
+          "weight": 1
+        },
+        "uses-optimized-images": {
+          "expectedValue": true,
+          "weight": 1
+        },
+        "uses-responsive-images": {
+          "expectedValue": true,
+          "weight": 1
+        }
       }
     }, {
       "name": "Using modern CSS features",
       "audits": {
         "no-old-flexbox": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         }
       }
     }, {
       "name": "Using modern JavaScript features",
       "audits": {
         "uses-passive-event-listeners": {
-          "expectedValue": true
+          "expectedValue": true,
+          "weight": 1
         },
         "no-mutation-events": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         }
       }
     }, {
       "name": "Avoiding APIs that harm the user experience",
       "audits": {
         "no-document-write": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "link-blocking-first-paint": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "script-blocking-first-paint": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "external-anchors-use-rel-noopener": {
-          "expectedValue": true
+          "expectedValue": true,
+          "weight": 1
         },
         "geolocation-on-start": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "notification-on-start": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         }
       }
     }, {
       "name": "Avoiding deprecated APIs and browser interventions",
       "audits": {
-        "deprecations": {}
+        "deprecations": {
+          "expectedValue": true,
+          "weight": 1
+        }
       }
     }, {
       "name": "Accessibility",
@@ -387,11 +412,11 @@
           "weight": 1
         },
         "critical-request-chains": {
-          "expectedValue": 0,
+          "expectedValue": true,
           "weight": 1
         },
         "user-timings": {
-          "expectedValue": 0,
+          "expectedValue": true,
           "weight": 1
         }
       }
@@ -405,10 +430,12 @@
       "name": "New JavaScript features",
       "audits": {
         "no-datenow": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         },
         "no-console-time": {
-          "expectedValue": false
+          "expectedValue": true,
+          "weight": 1
         }
       }
     }]

lighthouse-core/formatters/partials/cards.css

@@ -9,8 +9,8 @@
   justify-content: center;
   flex: 1 1 150px;
   flex-direction: column;
-  padding: calc(var(--padding) / 2);
-  padding-top: calc(32px + var(--padding) / 2);
+  padding: var(--padding);
+  padding-top: calc(33px + var(--padding));
   border-radius: 3px;
   margin-right: var(--padding);
   position: relative;
@@ -19,7 +19,6 @@
   border: 1px solid #ebebeb;
 }
 .scorecard-title {
-  /*text-transform: uppercase;*/
   font-size: var(--subitem-font-size);
   line-height: var(--heading-line-height);
   background-color: #eee;
@@ -33,8 +32,13 @@
   border-bottom: 1px solid #ebebeb;
 }
 .scorecard-value {
-  font-size: 24px;
+  font-size: 28px;
 }
-.scorecard-summary {
-  margin-top: calc(var(--padding) / 2);
+.scorecard-summary,
+.scorecard-target {
+  margin-top: var(--padding);
+}
+.scorecard-target {
+  font-size: 12px;
+  font-style: italic;
 }

lighthouse-core/formatters/partials/cards.html

@@ -1,8 +1,12 @@
-<ul class="subitem__details cards__container">
-  {{#each this}}
-    <div class="subitem__detail scorecard" {{#if snippet}}title="{{snippet}}"{{/if}}>
-      <div class="scorecard-title">{{title}}</div>
-      <div class="scorecard-value">{{value}}</div>
-    </div>
-  {{/each}}
-</ul>
+<details class="subitem__details">
+  <summary class="subitem__detail">More information</summary>
+  <div class="cards__container">
+    {{#each this}}
+      <div class="subitem__detail scorecard" {{#if snippet}}title="{{snippet}}"{{/if}}>
+        <div class="scorecard-title">{{title}}</div>
+        <div class="scorecard-value">{{value}}</div>
+        {{#if target}}<div class="scorecard-target">target: {{target}}</div>{{/if}}
+      </div>
+    {{/each}}
+  </div>
+</details>

lighthouse-core/report/handlebar-helpers.js

@@ -63,6 +63,12 @@ const handlebarHelpers = {
     return calculateRating(totalScore);
   },
 
+  // Converts an aggregation's score to a rating used for styling.
+  getAggregationScoreRating: score => {
+    const rating = calculateRating(score * 100);
+    return rating !== 'good' ? 'poor' : rating; // avg rating maps to failure for aggregation.
+  },
+
   // Converts a value to a rating string, which can be used inside the report
   // for color styling.
   getItemRating,