Add target val and hide cards by default

GoogleChrome · Feb 17, 2017 · 2e5084c · 2e5084c
1 parent 04bdea6
commit 2e5084c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/lighthouse-core/audits/dobetterweb/dom-size.js b/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,

diff --git a/lighthouse-core/formatters/partials/cards.css b/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;
 }
diff --git a/lighthouse-core/formatters/partials/cards.html b/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>
diff --git a/lighthouse-core/test/formatter/cards-formatter-test.js b/lighthouse-core/test/formatter/cards-formatter-test.js
@@ -24,9 +24,9 @@ const assert = require('assert');
 describe('CardsFormatter', () => {
   const extendedInfo = {
     value: [
-      {title: 'Total DOM Nodes', value: 3500},
-      {title: 'DOM Depth', value: 10, snippet: 'snippet'},
-      {title: 'Maximum Children', value: 20, snippet: 'snippet2'}
+      {title: 'Total DOM Nodes', value: 3500, target: '1,500 nodes'},
+      {title: 'DOM Depth', value: 10, snippet: 'snippet', target: 10},
+      {title: 'Maximum Children', value: 20, snippet: 'snippet2', target: 20}
     ]
   };
 
@@ -52,7 +52,8 @@ describe('CardsFormatter', () => {
     const template = Handlebars.compile(formatter);
     const output = template(extendedInfo.value).split('\n').join('');
     assert.ok(output.match('title="snippet"'), 'adds title attribute for snippet');
-    assert.ok(output.match('class="subitem__details cards__container"'), 'adds wrapper class');
+    assert.ok(output.match('class="cards__container"'), 'adds wrapper class');
+    assert.ok(output.match('target: 1,500 nodes'), 'adds target val html');
     assert.equal(output.match(/class=\"[^"]*scorecard-value/g).length, extendedInfo.value.length);
     assert.equal(output.match(/class=\"[^"]*scorecard-title/g).length, extendedInfo.value.length);
   });