Devtools: make DOM traversal utilities climb shadow tree.

Source/devtools/front_end/ui/DOMExtension.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 290 matching lines @@
     return box.left < event.x  && event.x < box.right &&
            box.top < event.y && event.y < box.bottom;
 }
 
 /**
  * @param {!Array.<string>} nameArray
  * @return {?Node}
  */
 Node.prototype.enclosingNodeOrSelfWithNodeNameInArray = function(nameArray)
 {
-    for (var node = this; node && node !== this.ownerDocument; node = node.parentNode) {
+    for (var node = this; node && node !== this.ownerDocument; node = node.parentNodeOrShadowHost()) {
         for (var i = 0; i < nameArray.length; ++i) {
             if (node.nodeName.toLowerCase() === nameArray[i].toLowerCase())
                 return node;
         }
     }
     return null;
 }
 
 /**
  * @param {string} nodeName
  * @return {?Node}
  */
 Node.prototype.enclosingNodeOrSelfWithNodeName = function(nodeName)
 {
     return this.enclosingNodeOrSelfWithNodeNameInArray([nodeName]);
 }
 
 /**
  * @param {string} className
  * @param {!Element=} stayWithin
  * @return {?Element}
  */
 Node.prototype.enclosingNodeOrSelfWithClass = function(className, stayWithin)
 {
-    for (var node = this; node && node !== stayWithin && node !== this.ownerDocument; node = node.parentNode) {
+    for (var node = this; node && node !== stayWithin && node !== this.ownerDocument; node = node.parentNodeOrShadowHost()) {
         if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(className))
             return /** @type {!Element} */ (node);
     }
     return null;
 }
 
 /**
+ * @return {?Element}
+ */
+Node.prototype.parentElementOrShadowHost = function()

[aandrey, 2014/09/25 05:47:21]

I'd expect this to give identical result as parentNodeOrShadowHost() in a DOM
tree containing only Element nodes. Right now it's not the case, might be a bug
here.

[pfeldman, 2014/10/13 13:33:11]

I think it will produce identical results for DOM trees containing only Element
nodes.

+{
+    var node = this.parentNode;
+    if (!node)
+        return null;
+    if (node.nodeType === Node.ELEMENT_NODE)
+        return /** @type {!Element} */ (node);
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE)

[aandrey, 2014/09/25 05:47:21]

else if

[pfeldman, 2014/10/13 13:33:11]

We can't do else if by the guidelines.

+        return /** @type {!Element} */ (node.host);

[aandrey, 2014/09/25 05:47:21]

this.host? (see message above)

[pfeldman, 2014/10/13 13:33:11]

this.host is null for shadow root element children.

+    return null;
+}
+
+/**
+ * @return {?Node}
+ */
+Node.prototype.parentNodeOrShadowHost = function()
+{
+    return this.parentNode || this.host || null;
+}
+
+/**
  * @param {string} query
  * @return {?Node}
  */
 Element.prototype.query = function(query)
 {
     return this.ownerDocument.evaluate(query, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 }
 
 Element.prototype.removeChildren = function()
 {
@@ skipping 265 matching lines @@
         return null;
 
     var leftOffset = selection.anchorOffset;
     var node = selection.anchorNode;
 
     while (node !== this) {
         while (node.previousSibling) {
             node = node.previousSibling;
             leftOffset += node.textContent.length;
         }
-        node = node.parentNode;
+        node = node.parentNodeOrShadowHost();
     }
 
     return leftOffset;
 }
 
 /**
  * @param {?Node} node
  * @return {boolean}
  */
 Node.prototype.isAncestor = function(node)
 {
     if (!node)
         return false;
 
-    var currentNode = node.parentNode;
+    var currentNode = node.parentNodeOrShadowHost();
     while (currentNode) {
         if (this === currentNode)
             return true;
-        currentNode = currentNode.parentNode;
+        currentNode = currentNode.parentNodeOrShadowHost();
     }
     return false;
 }
 
 /**
  * @param {?Node} descendant
  * @return {boolean}
  */
 Node.prototype.isDescendant = function(descendant)
 {
@@ skipping 29 matching lines @@
         return node;
 
     if (stayWithin && this === stayWithin)
         return null;
 
     node = this.nextSibling;
     if (node)
         return node;
 
     node = this;
-    while (node && !node.nextSibling && (!stayWithin || !node.parentNode || node.parentNode !== stayWithin))
-        node = node.parentNode;
+    while (node && !node.nextSibling && (!stayWithin || !node.parentNodeOrShadowHost() || node.parentNodeOrShadowHost() !== stayWithin))
+        node = node.parentNodeOrShadowHost();
     if (!node)
         return null;
 
     return node.nextSibling;
 }
 
 /**
  * @param {!Node=} stayWithin
  * @return {?Node}
  */
 Node.prototype.traversePreviousNode = function(stayWithin)
 {
     if (stayWithin && this === stayWithin)
         return null;
     var node = this.previousSibling;
     while (node && node.lastChild)
         node = node.lastChild;
     if (node)
         return node;
-    return this.parentNode;
+    return this.parentNodeOrShadowHost();
 }
 
 /**
  * @param {*} text
  * @param {string=} placeholder
  * @return {boolean} true if was truncated
  */
 Node.prototype.setTextContentTruncatedIfNeeded = function(text, placeholder)
 {
     // Huge texts in the UI reduce rendering performance drastically.
     // Moreover, Blink/WebKit uses <unsigned short> internally for storing text content
     // length, so texts longer than 65535 are inherently displayed incorrectly.
     const maxTextContentLength = 65535;
 
     if (typeof text === "string" && text.length > maxTextContentLength) {
         this.textContent = typeof placeholder === "string" ? placeholder : text.trimEnd(maxTextContentLength);
         return true;
     }
 
     this.textContent = text;
     return false;
 }
 
 /**
+ * @return {?Node}
+ */
+Event.prototype.elementFromPoint = function()
+{
+    var node = this.target;
+    while (node && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE && node.nodeType !== Node.DOCUMENT_NODE)
+        node = node.parentNode;
+    return node ? node.elementFromPoint(this.pageX, this.pageY) : null;
+}
+
+/**
+ * @param {number} x
+ * @param {number} y
+ * @return {?Node}
+ */
+Document.prototype.deepElementFromPoint = function(x, y)
+{
+    var node = this.elementFromPoint(x, y);
+    while (node && node.shadowRoot)
+        node = node.shadowRoot.elementFromPoint(x, y);
+    return node;
+}
+
+/**
  * @return {boolean}
  */
 function isEnterKey(event) {
     // Check if in IME.
     return event.keyCode !== 229 && event.keyIdentifier === "Enter";
 }
 
 function consumeEvent(e)
 {
     e.consume();
 }