core(audit): make dom-size table prettier (#6065)

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

@@ -32,17 +32,23 @@ const UIStrings = {
     'children/parent element. A large DOM can increase memory usage, cause longer ' +
     '[style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), ' +
     'and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/tools/lighthouse/audits/dom-size).',
-  /** Label for the total number of DOM nodes found in the page. */
-  columnDOMNodes: 'Total DOM Nodes',
-  /** Label for the numeric value of the maximum depth in the page's DOM tree. */
-  columnDOMDepth: 'Maximum DOM Depth',
-  /** Label for the value of the maximum number of children any DOM node in the page has. */
-  columnDOMWidth: 'Maximum Children',
+  /** Table column header for the type of statistic. These statistics describe how big the DOM is (count of DOM nodes, children, depth). */
+  columnStatistic: 'Statistic',
+  /** Table column header for the DOM element. Each DOM element is described with its HTML representation. */
+  columnElement: 'Element',
+  /** Table column header for the observed value of the DOM statistic. */
+  columnValue: 'Value',
   /** [ICU Syntax] Label for an audit identifying the number of DOM nodes found in the page. */
   displayValue: `{itemCount, plural,
     =1 {1 node}
     other {# nodes}
     }`,
+  /** Label for the total number of DOM nodes found in the page. */
+  statisticDOMNodes: 'Total DOM Nodes',
+  /** Label for the numeric value of the maximum depth in the page's DOM tree. */
+  statisticDOMDepth: 'Maximum DOM Depth',
+  /** Label for the numeric value of the maximum number of children any DOM element in the page has. The element described will have the most children in the page. */
+  statisticDOMWidth: 'Maximum Child Elements',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -96,28 +102,33 @@ class DOMSize extends Audit {
     );
 
     const headings = [
-      {key: 'totalNodes', itemType: 'text', text: str_(UIStrings.columnDOMNodes)},
-      {key: 'depth', itemType: 'text', text: str_(UIStrings.columnDOMDepth)},
-      {key: 'width', itemType: 'text', text: str_(UIStrings.columnDOMWidth)},
+      {key: 'statistic', itemType: 'text', text: str_(UIStrings.columnStatistic)},
+      {key: 'element', itemType: 'code', text: str_(UIStrings.columnElement)},
+      {key: 'value', itemType: 'text', text: str_(UIStrings.columnValue)},
     ];
 
     /** @type {Array<Object<string, LH.Audit.DetailsItem>>} */
     const items = [
       {
-        totalNodes: Util.formatNumber(stats.totalDOMNodes),
-        depth: Util.formatNumber(stats.depth.max),
-        width: Util.formatNumber(stats.width.max),
+        statistic: str_(UIStrings.statisticDOMNodes),
+        element: '',
+        value: Util.formatNumber(stats.totalDOMNodes),
       },
       {
-        totalNodes: '',
-        depth: {
+        statistic: str_(UIStrings.statisticDOMDepth),
+        element: {
           type: 'code',
           value: stats.depth.snippet,
         },
-        width: {
+        value: Util.formatNumber(stats.depth.max),
+      },
+      {
+        statistic: str_(UIStrings.statisticDOMWidth),
+        element: {
           type: 'code',
           value: stats.width.snippet,
         },
+        value: Util.formatNumber(stats.width.max),
       },
     ];
 

lighthouse-core/gather/gatherers/dobetterweb/domstats.js

@@ -123,12 +123,13 @@ function getDOMStats(element, deep=true) {
     depth: {
       max: result.maxDepth,
       pathToElement: elementPathInDOM(deepestNode),
-      snippet: getOuterHTMLSnippet(deepestNode),
+      // ignore style since it will provide no additional context, and is often long
+      snippet: getOuterHTMLSnippet(deepestNode, ['style']),
     },
     width: {
       max: result.maxWidth,
       pathToElement: elementPathInDOM(parentWithMostChildren),
-      snippet: getOuterHTMLSnippet(parentWithMostChildren),
+      snippet: getOuterHTMLSnippet(parentWithMostChildren, ['style']),
     },
   };
 }

lighthouse-core/lib/locales/en-US.json

@@ -159,17 +159,17 @@
     "message": "Minimize Critical Requests Depth",
     "description": "Imperative title of a Lighthouse audit that tells the user to reduce the depth of critical network requests to enhance initial load of a page. Critical request chains are series of dependent network requests that are important for page rendering. For example, here's a 4-request-deep chain: The biglogo.jpg image is required, but is requested via the styles.css style code, which is requested by the initialize.js javascript, which is requested by the page's HTML. This is displayed in a list of audit titles that Lighthouse generates."
   },
-  "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMDepth": {
-    "message": "Maximum DOM Depth",
-    "description": "Label for the numeric value of the maximum depth in the page's DOM tree."
+  "lighthouse-core/audits/dobetterweb/dom-size.js | columnElement": {
+    "message": "Element",
+    "description": "Table column header for the DOM element. Each DOM element is described with its HTML representation."
   },
-  "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMNodes": {
-    "message": "Total DOM Nodes",
-    "description": "Label for the total number of DOM nodes found in the page."
+  "lighthouse-core/audits/dobetterweb/dom-size.js | columnStatistic": {
+    "message": "Statistic",
+    "description": "Table column header for the type of statistic. These statistics describe how big the DOM is (count of DOM nodes, children, depth)."
   },
-  "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMWidth": {
-    "message": "Maximum Children",
-    "description": "Label for the value of the maximum number of children any DOM node in the page has."
+  "lighthouse-core/audits/dobetterweb/dom-size.js | columnValue": {
+    "message": "Value",
+    "description": "Table column header for the observed value of the DOM statistic."
   },
   "lighthouse-core/audits/dobetterweb/dom-size.js | description": {
     "message": "Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/tools/lighthouse/audits/dom-size).",
@@ -183,6 +183,18 @@
     "message": "Avoid an excessive DOM size",
     "description": "Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This imperative title is shown to users when there is a significant amount of execution time that could be reduced."
   },
+  "lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMDepth": {
+    "message": "Maximum DOM Depth",
+    "description": "Label for the numeric value of the maximum depth in the page's DOM tree."
+  },
+  "lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMNodes": {
+    "message": "Total DOM Nodes",
+    "description": "Label for the total number of DOM nodes found in the page."
+  },
+  "lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMWidth": {
+    "message": "Maximum Child Elements",
+    "description": "Label for the numeric value of the maximum number of children any DOM element in the page has. The element described will have the most children in the page."
+  },
   "lighthouse-core/audits/dobetterweb/dom-size.js | title": {
     "message": "Avoids an excessive DOM size",
     "description": "Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required."

lighthouse-core/lib/page-functions.js

@@ -107,12 +107,20 @@ function getElementsInDocument(selector) {
 /**
  * Gets the opening tag text of the given node.
  * @param {Element} element
+ * @param {Array<string>=} ignoreAttrs An optional array of attribute tags to not include in the HTML snippet.
  * @return {string}
  */
 /* istanbul ignore next */
-function getOuterHTMLSnippet(element) {
+function getOuterHTMLSnippet(element, ignoreAttrs=[]) {
+  const clone = element.cloneNode();
+
+  ignoreAttrs.forEach(attribute =>{
+    clone.removeAttribute(attribute);
+  });
+
   const reOpeningTag = /^.*?>/;
-  const match = element.outerHTML.match(reOpeningTag);
+  const match = clone.outerHTML.match(reOpeningTag);
+
   return (match && match[0]) || '';
 }
 
@@ -150,6 +158,7 @@ module.exports = {
   checkTimeSinceLastLongTaskString: checkTimeSinceLastLongTask.toString(),
   getElementsInDocumentString: getElementsInDocument.toString(),
   getOuterHTMLSnippetString: getOuterHTMLSnippet.toString(),
+  getOuterHTMLSnippet: getOuterHTMLSnippet,
   ultradumbBenchmark: ultradumbBenchmark,
   ultradumbBenchmarkString: ultradumbBenchmark.toString(),
 };

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

@@ -26,9 +26,9 @@ describe('Num DOM nodes audit', () => {
     assert.equal(auditResult.score, 0.43);
     assert.equal(auditResult.rawValue, numNodes);
     expect(auditResult.displayValue).toBeDisplayString('1,500 nodes');
-    assert.equal(auditResult.details.items[0].totalNodes, numNodes.toLocaleString());
-    assert.equal(auditResult.details.items[0].depth, '1');
-    assert.equal(auditResult.details.items[0].width, '2');
+    assert.equal(auditResult.details.items[0].value, numNodes.toLocaleString());
+    assert.equal(auditResult.details.items[1].value, '1');
+    assert.equal(auditResult.details.items[2].value, '2');
   });
 
   it('calculates score hitting top distribution', () => {

lighthouse-core/test/lib/page-functions-test.js

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const assert = require('assert');
+const jsdom = require('jsdom');
+const DOM = require('../../report/html/renderer/dom.js');
+const pageFunctions = require('../../lib/page-functions');
+
+/* eslint-env jest */
+
+describe('DetailsRenderer', () => {
+  let dom;
+
+  beforeAll(() => {
+    const document = jsdom.jsdom();
+    dom = new DOM(document);
+  });
+
+  describe('get outer HTML snippets', () => {
+    it('gets full HTML snippet', () => {
+      assert.equal(pageFunctions.getOuterHTMLSnippet(
+        dom.createElement('div', '', {id: '1', style: 'style'})), '<div id="1" style="style">');
+    });
+
+    it('removes a specific attribute', () => {
+      assert.equal(pageFunctions.getOuterHTMLSnippet(
+        dom.createElement('div', '', {id: '1', style: 'style'}), ['style']), '<div id="1">');
+    });
+
+    it('removes multiple attributes', () => {
+      assert.equal(pageFunctions.getOuterHTMLSnippet(
+        dom.createElement('div', '', {'id': '1', 'style': 'style', 'aria-label': 'label'}),
+        ['style', 'aria-label']
+      ), '<div id="1">');
+    });
+
+    it('ignores when attribute not found', () => {
+      assert.equal(pageFunctions.getOuterHTMLSnippet(
+        dom.createElement('div', '', {'id': '1', 'style': 'style', 'aria-label': 'label'}),
+        ['style-missing', 'aria-label-missing']
+      ), '<div id="1" style="style" aria-label="label">');
+    });
+  });
+});

lighthouse-core/test/results/sample_v2.json

@@ -2194,35 +2194,40 @@
         "type": "table",
         "headings": [
           {
-            "key": "totalNodes",
+            "key": "statistic",
             "itemType": "text",
-            "text": "Total DOM Nodes"
+            "text": "Statistic"
           },
           {
-            "key": "depth",
-            "itemType": "text",
-            "text": "Maximum DOM Depth"
+            "key": "element",
+            "itemType": "code",
+            "text": "Element"
           },
           {
-            "key": "width",
+            "key": "value",
             "itemType": "text",
-            "text": "Maximum Children"
+            "text": "Value"
           }
         ],
         "items": [
           {
-            "totalNodes": "53",
-            "depth": "4",
-            "width": "22"
+            "statistic": "Total DOM Nodes",
+            "element": "",
+            "value": "53"
           },
           {
-            "totalNodes": "",
-            "depth": {
+            "statistic": "Maximum DOM Depth",
+            "element": {
               "type": "code"
             },
-            "width": {
+            "value": "4"
+          },
+          {
+            "statistic": "Maximum Child Elements",
+            "element": {
               "type": "code"
-            }
+            },
+            "value": "22"
           }
         ]
       }
@@ -3760,15 +3765,24 @@
           "path": "audits[dom-size].displayValue"
         }
       ],
-      "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMNodes": [
+      "lighthouse-core/audits/dobetterweb/dom-size.js | columnStatistic": [
         "audits[dom-size].details.headings[0].text"
       ],
-      "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMDepth": [
+      "lighthouse-core/audits/dobetterweb/dom-size.js | columnElement": [
         "audits[dom-size].details.headings[1].text"
       ],
-      "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMWidth": [
+      "lighthouse-core/audits/dobetterweb/dom-size.js | columnValue": [
         "audits[dom-size].details.headings[2].text"
       ],
+      "lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMNodes": [
+        "audits[dom-size].details.items[0].statistic"
+      ],
+      "lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMDepth": [
+        "audits[dom-size].details.items[1].statistic"
+      ],
+      "lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMWidth": [
+        "audits[dom-size].details.items[2].statistic"
+      ],
       "lighthouse-core/config/default-config.js | performanceCategoryTitle": [
         "categories.performance.title"
       ],