Merge e8c87ee into 6310655

GoogleChrome · Oct 19, 2020 · 2e9d90a · 2e9d90a
2 parents 6310655 + e8c87ee
commit 2e9d90a
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 100 deletions.
diff --git a/lighthouse-core/audits/dobetterweb/dom-size.js b/lighthouse-core/audits/dobetterweb/dom-size.js
@@ -87,7 +87,7 @@ class DOMSize extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'statistic', itemType: 'text', text: str_(UIStrings.columnStatistic)},
-      {key: 'element', itemType: 'code', text: str_(i18n.UIStrings.columnElement)},
+      {key: 'node', itemType: 'node', text: str_(i18n.UIStrings.columnElement)},
       {key: 'value', itemType: 'numeric', text: str_(UIStrings.columnValue)},
     ];
 
@@ -99,6 +99,11 @@ class DOMSize extends Audit {
         value: stats.totalBodyElements,
       },
       {
+        node: /** @type {LH.Audit.Details.NodeValue} */ ({
+          type: 'node',
+          path: stats.depth.devtoolsNodePath,
+          snippet: stats.depth.snippet,
+        }),
         statistic: str_(UIStrings.statisticDOMDepth),
         element: {
           type: 'code',
@@ -107,6 +112,11 @@ class DOMSize extends Audit {
         value: stats.depth.max,
       },
       {
+        node: /** @type {LH.Audit.Details.NodeValue} */ ({
+          type: 'node',
+          path: stats.width.devtoolsNodePath,
+          snippet: stats.width.snippet,
+        }),
         statistic: str_(UIStrings.statisticDOMWidth),
         element: {
           type: 'code',

diff --git a/lighthouse-core/gather/gatherers/dobetterweb/domstats.js b/lighthouse-core/gather/gatherers/dobetterweb/domstats.js
@@ -9,73 +9,13 @@
  * and total number of elements used on the page.
  */
 
-/* global ShadowRoot, getOuterHTMLSnippet */
+/* global getNodePath, getOuterHTMLSnippet */
 
 'use strict';
 
 const Gatherer = require('../gatherer.js');
 const pageFunctions = require('../../../lib/page-functions.js');
 
-/**
- * Constructs a pretty label from element's selectors. For example, given
- * <div id="myid" class="myclass">, returns 'div#myid.myclass'.
- * @param {Element} element
- * @return {string}
- */
-/* istanbul ignore next */
-function createSelectorsLabel(element) {
-  let name = element.localName || '';
-  const idAttr = element.getAttribute && element.getAttribute('id');
-  if (idAttr) {
-    name += `#${idAttr}`;
-  }
-  // svg elements return SVGAnimatedString for .className, which is an object.
-  // Stringify classList instead.
-  if (element.classList) {
-    const className = element.classList.toString();
-    if (className) {
-      name += `.${className.trim().replace(/\s+/g, '.')}`;
-    }
-  } else if (ShadowRoot.prototype.isPrototypeOf(element)) {
-    name += '#shadow-root';
-  }
-
-  return name;
-}
-
-/**
- * @param {Node} element
- * @return {Array<string>}
- */
-/* istanbul ignore next */
-function elementPathInDOM(element) {
-  const visited = new Set();
-  const path = [createSelectorsLabel(element)];
-  let node = element;
-  while (node) {
-    visited.add(node);
-
-    // Anchor elements have a .host property. Be sure we've found a shadow root
-    // host and not an anchor.
-    if (ShadowRoot.prototype.isPrototypeOf(node)) {
-      const isShadowHost = node.host && node.localName !== 'a';
-      node = isShadowHost ? node.host : node.parentElement;
-    } else {
-      const isShadowHost = node.parentNode && node.parentNode.host &&
-                           node.parentNode.localName !== 'a';
-      node = isShadowHost ? node.parentNode.host : node.parentElement;
-    }
-
-    if (visited.has(node)) {
-      node = null;
-    }
-
-    if (node) {
-      path.unshift(createSelectorsLabel(node));
-    }
-  }
-  return path;
-}
 
 /**
  * Calculates the maximum tree depth of the DOM.
@@ -124,14 +64,13 @@ function getDOMStats(element, deep = true) {
   return {
     depth: {
       max: result.maxDepth,
-      pathToElement: elementPathInDOM(deepestElement),
-      // ignore style since it will provide no additional context, and is often long
-      snippet: getOuterHTMLSnippet(deepestElement, ['style']),
+      devtoolsNodePath: getNodePath(deepestElement),
+      snippet: getOuterHTMLSnippet(deepestElement),
     },
     width: {
       max: result.maxWidth,
-      pathToElement: elementPathInDOM(parentWithMostChildren),
-      snippet: getOuterHTMLSnippet(parentWithMostChildren, ['style']),
+      devtoolsNodePath: getNodePath(parentWithMostChildren),
+      snippet: getOuterHTMLSnippet(parentWithMostChildren),
     },
     totalBodyElements: result.numElements,
   };
@@ -146,9 +85,8 @@ class DOMStats extends Gatherer {
     const driver = passContext.driver;
 
     const expression = `(function() {
+      ${pageFunctions.getNodePathString};
       ${pageFunctions.getOuterHTMLSnippetString};
-      ${createSelectorsLabel.toString()};
-      ${elementPathInDOM.toString()};
       return (${getDOMStats.toString()}(document.body));
     })()`;
     await driver.sendCommand('DOM.enable');

diff --git a/lighthouse-core/test/audits/dobetterweb/dom-size-test.js b/lighthouse-core/test/audits/dobetterweb/dom-size-test.js
@@ -16,8 +16,8 @@ describe('DOMSize audit', () => {
   const artifact = {
     DOMStats: {
       totalBodyElements: numElements,
-      depth: {max: 1, pathToElement: ['html', 'body', 'div', 'span']},
-      width: {max: 2, pathToElement: ['html', 'body']},
+      depth: {max: 1},
+      width: {max: 2},
     },
   };
   const context = {options, settings: {locale: 'en'}};

diff --git a/lighthouse-core/test/lib/i18n/swap-locale-test.js b/lighthouse-core/test/lib/i18n/swap-locale-test.js
@@ -28,8 +28,8 @@ describe('swap-locale', () => {
     expect(lhrDe.audits.plugins.title).toEqual('Dokument verwendet keine Plug-ins');
 
     // With ICU string argument values
-    expect(lhrEn.audits['dom-size'].displayValue).toEqual('31 elements');
-    expect(lhrDe.audits['dom-size'].displayValue).toEqual('31 Elemente');
+    expect(lhrEn.audits['dom-size'].displayValue).toEqual('148 elements');
+    expect(lhrDe.audits['dom-size'].displayValue).toEqual('148 Elemente');
 
     // Renderer formatted strings
     expect(lhrEn.i18n.rendererFormattedStrings.labDataTitle).toEqual('Lab Data');

diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json
@@ -2395,24 +2395,16 @@
   "AppCacheManifest": "clock.appcache",
   "DOMStats": {
     "depth": {
-      "max": 3,
-      "pathToElement": [
-        "html",
-        "body",
-        "div",
-        "h2"
-      ],
-      "snippet": "<h2>"
+      "max": 4,
+      "devtoolsNodePath": "3,HTML,1,BODY,7,DIV,3,svg,0,title",
+      "snippet": "<title id=\"social-facebook-5\">"
     },
     "width": {
-      "max": 29,
-      "pathToElement": [
-        "html",
-        "body"
-      ],
-      "snippet": "<body>"
+      "max": 100,
+      "devtoolsNodePath": "3,HTML,1,BODY,4,DIV,a,#document-fragment",
+      "snippet": "<div id=\"shadow-root-container\">"
     },
-    "totalBodyElements": 31
+    "totalBodyElements": 148
   },
   "Stacks": [
     {

diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
@@ -3600,9 +3600,9 @@
       "description": "A large DOM will 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://web.dev/dom-size/).",
       "score": 1,
       "scoreDisplayMode": "numeric",
-      "numericValue": 31,
+      "numericValue": 148,
       "numericUnit": "element",
-      "displayValue": "31 elements",
+      "displayValue": "148 elements",
       "details": {
         "type": "table",
         "headings": [
@@ -3612,8 +3612,8 @@
             "text": "Statistic"
           },
           {
-            "key": "element",
-            "itemType": "code",
+            "key": "node",
+            "itemType": "node",
             "text": "Element"
           },
           {
@@ -3626,23 +3626,33 @@
           {
             "statistic": "Total DOM Elements",
             "element": "",
-            "value": 31
+            "value": 148
           },
           {
+            "node": {
+              "type": "node",
+              "path": "3,HTML,1,BODY,7,DIV,3,svg,0,title",
+              "snippet": "<title id=\"social-facebook-5\">"
+            },
             "statistic": "Maximum DOM Depth",
             "element": {
               "type": "code",
-              "value": "<h2>"
+              "value": "<title id=\"social-facebook-5\">"
             },
-            "value": 3
+            "value": 4
           },
           {
+            "node": {
+              "type": "node",
+              "path": "3,HTML,1,BODY,4,DIV,a,#document-fragment",
+              "snippet": "<div id=\"shadow-root-container\">"
+            },
             "statistic": "Maximum Child Elements",
             "element": {
               "type": "code",
-              "value": "<body>"
+              "value": "<div id=\"shadow-root-container\">"
             },
-            "value": 29
+            "value": 100
           }
         ]
       }
@@ -7671,7 +7681,7 @@
       "lighthouse-core/audits/dobetterweb/dom-size.js | displayValue": [
         {
           "values": {
-            "itemCount": 31
+            "itemCount": 148
           },
           "path": "audits[dom-size].displayValue"
         }

diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
@@ -205,8 +205,8 @@ declare global {
       export interface DOMStats {
         /** The total number of elements found within the page's body. */
         totalBodyElements: number;
-        width: {max: number, pathToElement: Array<string>, snippet: string};
-        depth: {max: number, pathToElement: Array<string>, snippet: string};
+        width: {max: number; devtoolsNodePath: string; snippet: string;};
+        depth: {max: number; devtoolsNodePath: string; snippet: string;};
       }
 
       export interface EmbeddedContentInfo {