Devtools: make DOM traversal utilities climb shadow tree.

BUG=417275

Review URL: https://codereview.chromium.org/602783002

git-svn-id: svn://svn.chromium.org/blink/trunk@183616 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

@@ -51,8 +51,7 @@ WebInspector.ElementsPanel = function()
 
     this.contentElement = stackElement.createChild("div");
     this.contentElement.id = "elements-content";
-    this.contentElement.classList.add("outline-disclosure");
-    this.contentElement.classList.add("source-code");
+    this.contentElement.classList.add("outline-disclosure", "source-code");
     if (!WebInspector.settings.domWordWrap.get())
         this.contentElement.classList.add("nowrap");
     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
@@ -692,7 +691,7 @@ WebInspector.ElementsPanel.prototype = {
 
     _mouseMovedInCrumbs: function(event)
     {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        var nodeUnderMouse = event.elementFromPoint();
         var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb");
         var node = /** @type {?WebInspector.DOMNode} */ (crumbElement ? crumbElement.representedObject : null);
         if (node)
@@ -701,7 +700,7 @@ WebInspector.ElementsPanel.prototype = {
 
     _mouseMovedOutOfCrumbs: function(event)
     {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        var nodeUnderMouse = event.elementFromPoint();
         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement))
             return;
 

third_party/WebKit/Source/devtools/front_end/layers/LayerTreeOutline.js

@@ -132,7 +132,7 @@ WebInspector.LayerTreeOutline.prototype = {
      */
     _onMouseMove: function(event)
     {
-        var node = this._treeOutline.treeElementFromPoint(event.pageX, event.pageY);
+        var node = this._treeOutline.treeElementFromEvent(event);
         if (node === this._lastHoveredNode)
             return;
         this.dispatchEventToListeners(WebInspector.LayerTreeOutline.Events.LayerHovered, node && node.representedObject ? {layer: node.representedObject} : null);
@@ -152,7 +152,7 @@ WebInspector.LayerTreeOutline.prototype = {
      */
     _onContextMenu: function(event)
     {
-        var node = this._treeOutline.treeElementFromPoint(event.pageX, event.pageY);
+        var node = this._treeOutline.treeElementFromEvent(event);
         if (!node || !node.representedObject)
             return;
         var layer = /** @type {!WebInspector.Layer} */ (node.representedObject);

third_party/WebKit/Source/devtools/front_end/resources/ResourcesPanel.js

@@ -770,7 +770,7 @@ WebInspector.ResourcesPanel.prototype = {
 
     _onmousemove: function(event)
     {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        var nodeUnderMouse = event.elementFromPoint();
         if (!nodeUnderMouse)
             return;
 

third_party/WebKit/Source/devtools/front_end/source_frame/CodeMirrorTextEditor.js

@@ -750,7 +750,7 @@ WebInspector.CodeMirrorTextEditor.prototype = {
      */
     coordinatesToCursorPosition: function(x, y)
     {
-        var element = document.elementFromPoint(x, y);
+        var element = document.deepElementFromPoint(x, y);
         if (!element || !element.isSelfOrDescendant(this._codeMirror.getWrapperElement()))
             return null;
         var gutterBox = this._codeMirror.getGutterElement().boxInWindow();

third_party/WebKit/Source/devtools/front_end/timeline/PaintProfilerView.js

@@ -306,7 +306,7 @@ WebInspector.PaintProfilerCommandLogView.prototype = {
      */
     _onMouseMove: function(event)
     {
-        var node = this.sidebarTree.treeElementFromPoint(event.pageX, event.pageY);
+        var node = this.sidebarTree.treeElementFromEvent(event);
         if (node === this._lastHoveredNode || !(node instanceof WebInspector.LogTreeElement))
             return;
         if (this._lastHoveredNode)
@@ -317,13 +317,13 @@ WebInspector.PaintProfilerCommandLogView.prototype = {
     },
 
     /**
-     * @param {?Event} event
+     * @param {!Event} event
      */
     _onContextMenu: function(event)
     {
         if (!this._target)
             return;
-        var node = this.sidebarTree.treeElementFromPoint(event.pageX, event.pageY);
+        var node = this.sidebarTree.treeElementFromEvent(event);
         if (!node || !node.representedObject || !(node instanceof WebInspector.LogTreeElement))
             return;
         var logItem = /** @type {!WebInspector.PaintProfilerLogItem} */ (node.representedObject);

third_party/WebKit/Source/devtools/front_end/ui/DOMExtension.js

@@ -308,7 +308,7 @@ Element.prototype.containsEventPoint = function(event)
  */
 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;
@@ -333,13 +333,36 @@ Node.prototype.enclosingNodeOrSelfWithNodeName = function(nodeName)
  */
 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()
+{
+    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)
+        return /** @type {!Element} */ (node.host);
+    return null;
+}
+
+/**
+ * @return {?Node}
+ */
+Node.prototype.parentNodeOrShadowHost = function()
+{
+    return this.parentNode || this.host || null;
+}
+
 /**
  * @param {string} query
  * @return {?Node}
@@ -626,7 +649,7 @@ Element.prototype.selectionLeftOffset = function()
             node = node.previousSibling;
             leftOffset += node.textContent.length;
         }
-        node = node.parentNode;
+        node = node.parentNodeOrShadowHost();
     }
 
     return leftOffset;
@@ -641,11 +664,11 @@ 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;
 }
@@ -695,8 +718,8 @@ Node.prototype.traverseNextNode = function(stayWithin)
         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;
 
@@ -716,7 +739,7 @@ Node.prototype.traversePreviousNode = function(stayWithin)
         node = node.lastChild;
     if (node)
         return node;
-    return this.parentNode;
+    return this.parentNodeOrShadowHost();
 }
 
 /**
@@ -740,6 +763,30 @@ Node.prototype.setTextContentTruncatedIfNeeded = function(text, placeholder)
     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}
  */

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

@@ -185,7 +185,7 @@ WebInspector.isBeingEdited = function(node)
     while (element) {
         if (element.__editing)
             return true;
-        element = element.parentElement;
+        element = element.parentElementOrShadowHost();
     }
     return false;
 }

third_party/WebKit/Source/devtools/front_end/ui/View.js

@@ -213,7 +213,7 @@ WebInspector.View.prototype = {
 
             var currentParent = parentElement;
             while (currentParent && !currentParent.__view)
-                currentParent = currentParent.parentElement;
+                currentParent = currentParent.parentElementOrShadowHost();
 
             if (currentParent) {
                 this._parentView = currentParent.__view;
@@ -495,7 +495,7 @@ WebInspector.View._incrementViewCounter = function(parentElement, childElement)
 
     while (parentElement) {
         parentElement.__viewCounter = (parentElement.__viewCounter || 0) + count;
-        parentElement = parentElement.parentElement;
+        parentElement = parentElement.parentElementOrShadowHost();
     }
 }
 
@@ -507,7 +507,7 @@ WebInspector.View._decrementViewCounter = function(parentElement, childElement)
 
     while (parentElement) {
         parentElement.__viewCounter -= count;
-        parentElement = parentElement.parentElement;
+        parentElement = parentElement.parentElementOrShadowHost();
     }
 }
 

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

@@ -323,7 +323,7 @@ TreeOutline.prototype.findTreeElement = function(representedObject, getParent)
  */
 TreeOutline.prototype.treeElementFromPoint = function(x, y)
 {
-    var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
+    var node = this._childrenListNode.ownerDocument.deepElementFromPoint(x, y);
     if (!node)
         return null;
 
@@ -333,6 +333,15 @@ TreeOutline.prototype.treeElementFromPoint = function(x, y)
     return null;
 }
 
+/**
+ * @param {?Event} event
+ * @return {?TreeElement}
+ */
+TreeOutline.prototype.treeElementFromEvent = function(event)
+{
+    return event ? this.treeElementFromPoint(event.pageX, event.pageY) : null;
+}
+
 TreeOutline.prototype._treeKeyDown = function(event)
 {
     if (event.target !== this._childrenListNode)