Remove /deep/ usage (#2371)

* Remove /deep/ usage

* Feedback

* getElementsInDocumentFnString

* Fix tests. Rename fun back to original

Author: ebidel

lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -289,7 +289,7 @@ <h2>Do better web tester page</h2>
 }
 
 function noRelOpenLinksTest() {
-  stampTemplate('noopener-links-tmpl', document.head);
+  stampTemplate('noopener-links-tmpl', document.body);
 }
 
 function passwordInputsCanBePastedIntoTest() {

lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js

@@ -196,14 +196,14 @@ module.exports = [
         score: 0,
         extendedInfo: {
           value: {
-            0: {value: '6,025'},
+            0: {value: '6,037'},
             1: {value: '9'},
             2: {value: '6,003'}
           }
         },
         details: {
           items: {
-            0: {value: '6,025'},
+            0: {value: '6,037'},
             1: {value: '9'},
             2: {value: '6,003'}
           }
@@ -218,14 +218,14 @@ module.exports = [
         score: 100,
         extendedInfo: {
           value: {
-            0: {value: '25'},
+            0: {value: '37'},
             1: {value: '9'},
             2: {value: '9'}
           }
         },
         details: {
           items: {
-            0: {value: '25'},
+            0: {value: '37'},
             1: {value: '9'},
             2: {value: '9'}
           }
@@ -240,14 +240,14 @@ module.exports = [
         score: 100,
         extendedInfo: {
           value: {
-            0: {value: '24'},
+            0: {value: '33'},
             1: {value: '7'},
             2: {value: '9'}
           }
         },
         details: {
           items: {
-            0: {value: '24'},
+            0: {value: '33'},
             1: {value: '7'},
             2: {value: '9'}
           }

lighthouse-core/gather/driver.js

@@ -743,6 +743,20 @@ class Driver {
       });
   }
 
+  /**
+   * Returns the flattened list of all DOM nodes within the document.
+   * @param {boolean=} pierce Whether to pierce through shadow trees and iframes.
+   *     True by default.
+   * @return {!Promise<!Array<!Element>>} The found elements, or [], resolved in a promise
+   */
+  getElementsInDocument(pierce = true) {
+    return this.sendCommand('DOM.getFlattenedDocument', {depth: -1, pierce})
+      .then(result => {
+        const elements = result.nodes.filter(node => node.nodeType === 1);
+        return elements.map(node => new Element({nodeId: node.nodeId}, this));
+      });
+  }
+
   /**
    * @param {{additionalTraceCategories: string=}=} flags
    */

lighthouse-core/gather/gatherers/dobetterweb/all-event-listeners.js

@@ -117,7 +117,7 @@ class EventListeners extends Gatherer {
     return Promise.resolve()
       .then(() => this.listenForScriptParsedEvents())
       .then(() => this.unlistenForScriptParsedEvents())
-      .then(_ => options.driver.querySelectorAll('body, body /deep/ *')) // drill into shadow trees
+      .then(_ => options.driver.getElementsInDocument())
       .then(nodes => {
         nodes.push('document', 'window');
         return this.collectListeners(nodes);

lighthouse-core/gather/gatherers/dobetterweb/anchors-with-no-rel-noopener.js

@@ -6,34 +6,26 @@
 'use strict';
 
 const Gatherer = require('../gatherer');
+const DOMHelpers = require('../../../lib/dom-helpers.js');
 
 class AnchorsWithNoRelNoopener extends Gatherer {
   /**
    * @param {!Object} options
    * @return {!Promise<!Array<{href: string, rel: string, target: string}>>}
    */
   afterPass(options) {
-    const driver = options.driver;
-    return driver.querySelectorAll('a[target="_blank"]:not([rel~="noopener"])')
-      .then(failingNodeList => {
-        const failingNodes = failingNodeList.map(node => {
-          return Promise.all([
-            node.getAttribute('href'),
-            node.getAttribute('rel'),
-            node.getAttribute('target')
-          ]);
-        });
-        return Promise.all(failingNodes);
-      })
-      .then(failingNodes => {
-        return failingNodes.map(node => {
-          return {
-            href: node[0],
-            rel: node[1],
-            target: node[2]
-          };
-        });
-      });
+    const expression = `(function() {
+      ${DOMHelpers.getElementsInDocumentFnString}; // define function on page
+      const selector = 'a[target="_blank"]:not([rel~="noopener"])';
+      const elements = getElementsInDocument(selector);
+      return elements.map(node => ({
+        href: node.getAttribute('href'),
+        rel: node.getAttribute('rel'),
+        target: node.getAttribute('target')
+      }));
+    })()`;
+
+    return options.driver.evaluateAsync(expression);
   }
 }
 

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

@@ -9,7 +9,7 @@
  * and total number of nodes used on the page.
  */
 
-/* global document ShadowRoot */
+/* global ShadowRoot */
 
 'use strict';
 
@@ -115,7 +115,6 @@ function getDOMStats(element, deep=true) {
   const result = _calcDOMWidthAndHeight(element);
 
   return {
-    totalDOMNodes: document.querySelectorAll('html, html /deep/ *').length,
     depth: {
       max: result.maxDepth,
       pathToElement: elementPathInDOM(deepestNode),
@@ -138,7 +137,11 @@ class DOMStats extends Gatherer {
       ${elementPathInDOM.toString()};
       return (${getDOMStats.toString()}(document.documentElement));
     })()`;
-    return options.driver.evaluateAsync(expression);
+    return options.driver.evaluateAsync(expression)
+      .then(results => options.driver.getElementsInDocument().then(allNodes => {
+        results.totalDOMNodes = allNodes.length;
+        return results;
+      }));
   }
 }
 

lighthouse-core/gather/gatherers/image-usage.js

@@ -11,8 +11,9 @@
 'use strict';
 
 const Gatherer = require('./gatherer');
+const DOMHelpers = require('../../lib/dom-helpers.js');
 
-/* global window, document, Image */
+/* global window, getElementsInDocument, Image */
 
 /* istanbul ignore next */
 function collectImageElementInfo() {
@@ -27,7 +28,10 @@ function collectImageElementInfo() {
     };
   }
 
-  const htmlImages = [...document.querySelectorAll('img')].map(element => {
+  const allElements = getElementsInDocument();
+  const allImageElements = allElements.filter(element => element.localName === 'img');
+
+  const htmlImages = allImageElements.map(element => {
     return {
       // currentSrc used over src to get the url as determined by the browser
       // after taking into account srcset/media/sizes/etc.
@@ -47,7 +51,8 @@ function collectImageElementInfo() {
   const CSS_URL_REGEX = /^url\("([^"]+)"\)$/;
   // Only find images that aren't specifically scaled
   const CSS_SIZE_REGEX = /(auto|contain|cover)/;
-  const cssImages = [...document.querySelectorAll('html /deep/ *')].reduce((images, element) => {
+
+  const cssImages = allElements.reduce((images, element) => {
     const style = window.getComputedStyle(element);
     if (!CSS_URL_REGEX.test(style.backgroundImage) ||
         !CSS_SIZE_REGEX.test(style.backgroundSize)) {
@@ -128,7 +133,12 @@ class ImageUsage extends Gatherer {
       return map;
     }, {});
 
-    return driver.evaluateAsync(`(${collectImageElementInfo.toString()})()`)
+    const expression = `(function() {
+      ${DOMHelpers.getElementsInDocumentFnString}; // define function on page
+      return (${collectImageElementInfo.toString()})();
+    })()`;
+
+    return driver.evaluateAsync(expression)
       .then(elements => {
         return elements.reduce((promise, element) => {
           return promise.then(collector => {

lighthouse-core/lib/dom-helpers.js

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2017 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';
+
+/**
+ * @fileoverview Helpers to be used with driver.evaluateAsync(). That is, these
+ * methods are intended to be injected into and run in the context of the page.
+ */
+
+/* global document */
+
+/**
+ * @param {string=} selector Optional simple CSS selector to filter nodes on.
+ *     Combinators are not supported.
+ * @param {!Array<!Element>}
+ */
+function getElementsInDocument(selector) {
+  const results = [];
+
+  const _findAllElements = nodes => {
+    for (let i = 0, el; el = nodes[i]; ++i) {
+      if (!selector || el.matches(selector)) {
+        results.push(el);
+      }
+      // If the element has a shadow root, dig deeper.
+      if (el.shadowRoot) {
+        _findAllElements(el.shadowRoot.querySelectorAll('*'));
+      }
+    }
+  };
+  _findAllElements(document.querySelectorAll('*'));
+
+  return results;
+}
+
+module.exports = {
+  getElementsInDocumentFnString: getElementsInDocument.toString()
+};