core(lhr): eliminate cards and list details (#4789)

GoogleChrome · Mar 21, 2018 · 483bd71 · 483bd71
1 parent d6e5717
commit 483bd71
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 569 deletions.
diff --git a/lighthouse-cli/test/fixtures/dobetterweb/domtester.html b/lighthouse-cli/test/fixtures/dobetterweb/domtester.html
diff --git a/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js b/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js
@@ -186,94 +186,6 @@ module.exports = [
         },
       },
     },
-  }, {
-    initialUrl: 'http://localhost:10200/dobetterweb/domtester.html?smallDOM',
-    url: 'http://localhost:10200/dobetterweb/domtester.html?smallDOM',
-    audits: {
-      'dom-size': {
-        score: 1,
-        extendedInfo: {
-          value: {
-            0: {value: '1,324'},
-            1: {value: '7'},
-            2: {value: '1,303'},
-          },
-        },
-        details: {
-          items: {
-            0: {value: '1,324'},
-            1: {value: '7'},
-            2: {value: '1,303'},
-          },
-        },
-      },
-    },
-  }, {
-    initialUrl: 'http://localhost:10200/dobetterweb/domtester.html?largeDOM&withShadowDOM',
-    url: 'http://localhost:10200/dobetterweb/domtester.html?largeDOM&withShadowDOM',
-    audits: {
-      'dom-size': {
-        score: 0,
-        extendedInfo: {
-          value: {
-            0: {value: '6,037'},
-            1: {value: '9'},
-            2: {value: '6,003'},
-          },
-        },
-        details: {
-          items: {
-            0: {value: '6,037'},
-            1: {value: '9'},
-            2: {value: '6,003'},
-          },
-        },
-      },
-    },
-  }, {
-    initialUrl: 'http://localhost:10200/dobetterweb/domtester.html?withShadowDOM',
-    url: 'http://localhost:10200/dobetterweb/domtester.html?withShadowDOM',
-    audits: {
-      'dom-size': {
-        score: 1,
-        extendedInfo: {
-          value: {
-            0: {value: '37'},
-            1: {value: '9'},
-            2: {value: '9'},
-          },
-        },
-        details: {
-          items: {
-            0: {value: '37'},
-            1: {value: '9'},
-            2: {value: '9'},
-          },
-        },
-      },
-    },
-  }, {
-    initialUrl: 'http://localhost:10200/dobetterweb/domtester.html?ShadowRootWithManyChildren',
-    url: 'http://localhost:10200/dobetterweb/domtester.html?ShadowRootWithManyChildren',
-    audits: {
-      'dom-size': {
-        score: 1,
-        extendedInfo: {
-          value: {
-            0: {value: '33'},
-            1: {value: '7'},
-            2: {value: '9'},
-          },
-        },
-        details: {
-          items: {
-            0: {value: '33'},
-            1: {value: '7'},
-            2: {value: '9'},
-          },
-        },
-      },
-    },
   }, {
     initialUrl: 'http://localhost:10200/online-only.html',
     url: 'http://localhost:10200/online-only.html',

diff --git a/lighthouse-core/audits/accessibility/axe-audit.js b/lighthouse-core/audits/accessibility/axe-audit.js
@@ -34,29 +34,28 @@ class AxeAudit extends Audit {
     const violations = artifacts.Accessibility.violations || [];
     const rule = violations.find(result => result.id === this.meta.name);
 
-    let nodeDetails = [];
+    let items = [];
     if (rule && rule.nodes) {
-      nodeDetails = rule.nodes.map(node => ({
-        type: 'node',
-        selector: Array.isArray(node.target) ? node.target.join(' ') : '',
-        path: node.path,
-        snippet: node.snippet,
+      items = rule.nodes.map(node => ({
+        node: {
+          type: 'node',
+          selector: Array.isArray(node.target) ? node.target.join(' ') : '',
+          path: node.path,
+          snippet: node.snippet,
+        },
       }));
     }
 
+    const headings = [
+      {key: 'node', itemType: 'node', text: 'Failing Elements'},
+    ];
+
     return {
       rawValue: typeof rule === 'undefined',
       extendedInfo: {
         value: rule,
       },
-      details: {
-        type: 'list',
-        header: {
-          type: 'text',
-          text: 'View failing elements',
-        },
-        items: nodeDetails,
-      },
+      details: Audit.makeTableDetails(headings, items),
     };
   }
 }

diff --git a/lighthouse-core/audits/dobetterweb/dom-size.js b/lighthouse-core/audits/dobetterweb/dom-size.js
@@ -47,25 +47,14 @@ class DOMSize extends Audit {
     };
   }
 
+
   /**
    * @param {!Artifacts} artifacts
    * @return {!AuditResult}
    */
   static audit(artifacts) {
     const stats = artifacts.DOMStats;
 
-    /**
-     * html >
-     *   body >
-     *     div >
-     *       span
-     */
-    const depthSnippet = stats.depth.pathToElement.reduce((str, curr, i) => {
-      return `${str}\n` + '  '.repeat(i) + `${curr} >`;
-    }, '').replace(/>$/g, '').trim();
-    const widthSnippet = 'Element with most children:\n' +
-        stats.width.pathToElement[stats.width.pathToElement.length - 1];
-
     // Use the CDF of a log-normal distribution for scoring.
     //   <= 1500: score≈1
     //   3000: score=0.5
@@ -76,34 +65,33 @@ class DOMSize extends Audit {
       SCORING_MEDIAN
     );
 
-    const cards = [{
-      title: 'Total DOM Nodes',
-      value: Util.formatNumber(stats.totalDOMNodes),
-      target: `< ${Util.formatNumber(MAX_DOM_NODES)} nodes`,
-    }, {
-      title: 'DOM Depth',
-      value: Util.formatNumber(stats.depth.max),
-      snippet: depthSnippet,
-      target: `< ${Util.formatNumber(MAX_DOM_TREE_DEPTH)}`,
-    }, {
-      title: 'Maximum Children',
-      value: Util.formatNumber(stats.width.max),
-      snippet: widthSnippet,
-      target: `< ${Util.formatNumber(MAX_DOM_TREE_WIDTH)} nodes`,
-    }];
+    const headings = [
+      {key: 'totalNodes', itemType: 'text', text: 'Total DOM Nodes'},
+      {key: 'depth', itemType: 'text', text: 'Maximum DOM Depth'},
+      {key: 'width', itemType: 'text', text: 'Maximum Children'},
+    ];
+
+    const items = [
+      {
+        totalNodes: Util.formatNumber(stats.totalDOMNodes),
+        depth: Util.formatNumber(stats.depth.max),
+        width: Util.formatNumber(stats.width.max),
+      },
+      {
+        totalNodes: '',
+        depth: stats.depth.snippet,
+        width: stats.width.snippet,
+      },
+    ];
 
     return {
       score,
       rawValue: stats.totalDOMNodes,
       displayValue: `${Util.formatNumber(stats.totalDOMNodes)} nodes`,
       extendedInfo: {
-        value: cards,
-      },
-      details: {
-        type: 'cards',
-        header: {type: 'text', text: 'View details'},
-        items: cards,
+        value: items,
       },
+      details: Audit.makeTableDetails(headings, items),
     };
   }
 }

diff --git a/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js b/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js
@@ -29,22 +29,20 @@ class PasswordInputsCanBePastedIntoAudit extends Audit {
   static audit(artifacts) {
     const passwordInputsWithPreventedPaste = artifacts.PasswordInputsWithPreventedPaste;
 
+    const items = passwordInputsWithPreventedPaste.map(input => ({
+      node: {type: 'node', snippet: input.snippet},
+    }));
+
+    const headings = [
+      {key: 'node', itemType: 'node', text: 'Failing Elements'},
+    ];
+
     return {
       rawValue: passwordInputsWithPreventedPaste.length === 0,
       extendedInfo: {
         value: passwordInputsWithPreventedPaste,
       },
-      details: {
-        type: 'list',
-        header: {
-          type: 'text',
-          value: 'Password inputs that prevent pasting into',
-        },
-        items: passwordInputsWithPreventedPaste.map(input => ({
-          type: 'text',
-          value: input.snippet,
-        })),
-      },
+      details: Audit.makeTableDetails(headings, items),
     };
   }
 }

diff --git a/lighthouse-core/audits/is-on-https.js b/lighthouse-core/audits/is-on-https.js
@@ -58,17 +58,21 @@ class HTTPS extends Audit {
         displayValue = `${insecureRecords.length} insecure request found`;
       }
 
+      const items = insecureRecords.map(record => ({
+        url: record.url,
+      }));
+
+      const headings = [
+        {key: 'url', itemType: 'url', text: 'Insecure URL'},
+      ];
+
       return {
         rawValue: insecureRecords.length === 0,
         displayValue,
         extendedInfo: {
           value: insecureRecords,
         },
-        details: {
-          type: 'list',
-          header: {type: 'text', text: 'Insecure URLs:'},
-          items: insecureRecords.map(record => ({type: 'url', value: record.url})),
-        },
+        details: Audit.makeTableDetails(headings, items),
       };
     });
   }