DevTools: Inspect element mode does not select element in ShadowDOM

Source/devtools/front_end/DOMAgent.js

 /*
  * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 40 matching lines @@
     this._shadowRoots = [];
 
     this._attributes = [];
     this._attributesMap = {};
     if (payload.attributes)
         this._setAttributesPayload(payload.attributes);
 
     this._userProperties = {};
     this._descendantUserPropertyCounters = {};
 
-    this._childNodeCount = payload.childNodeCount;
-    this.children = null;
+    this._childNodeCount = payload.childNodeCount || 0;
+    this._children = null;
 
     this.nextSibling = null;
     this.previousSibling = null;
     this.firstChild = null;
     this.lastChild = null;
     this.parentNode = null;
 
-    if (payload.shadowRoots && WebInspector.settings.showShadowDOM.get()) {
+    if (payload.shadowRoots) {
         for (var i = 0; i < payload.shadowRoots.length; ++i) {
             var root = payload.shadowRoots[i];
             var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, true, root);
             this._shadowRoots.push(node);
+            node.parentNode = this;
         }
     }
 
-    if (payload.templateContent)
+    if (payload.templateContent) {
         this._templateContent = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, true, payload.templateContent);
+        this._templateContent.parentNode = this;
+    }
 
     if (payload.children)
         this._setChildrenPayload(payload.children);
 
     if (payload.contentDocument) {
         this._contentDocument = new WebInspector.DOMDocument(domAgent, payload.contentDocument);
-        this.children = [this._contentDocument];
+        this._children = [this._contentDocument];
         this._renumber();
     }
 
     if (this._nodeType === Node.ELEMENT_NODE) {
         // HTML and BODY from internal iframes should not overwrite top-level ones.
         if (this.ownerDocument && !this.ownerDocument.documentElement && this._nodeName === "HTML")
             this.ownerDocument.documentElement = this;
         if (this.ownerDocument && !this.ownerDocument.body && this._nodeName === "BODY")
             this.ownerDocument.body = this;
     } else if (this._nodeType === Node.DOCUMENT_TYPE_NODE) {
@@ skipping 19 matching lines @@
 
 WebInspector.DOMNode.XPathStep.prototype = {
     toString: function()
     {
         return this.value;
     }
 }
 
 WebInspector.DOMNode.prototype = {
     /**
+     * @return {Array.<WebInspector.DOMNode>}
+     */
+    children: function()
+    {
+        return this._children ? this._children.slice() : null;

[johnjbarton, 2013/10/08 21:59:56]

I don't know why this has not caused problems before, but the null return here
is not an array, so when we all concat we get an array 
with a null:
[null]

+    },
+
+    /**
      * @return {boolean}
      */
     hasAttributes: function()
     {
         return this._attributes.length > 0;
     },
 
     /**
-     * @return {boolean}
+     * @return {number}
      */
-    hasChildNodes: function()
+    childNodeCount: function()
     {
-        return this._childNodeCount > 0 || !!this._shadowRoots.length || !!this._templateContent;
+        return this._childNodeCount;
     },
 
     /**
      * @return {boolean}
      */
     hasShadowRoots: function()
     {
         return !!this._shadowRoots.length;
     },
 
     /**
+     * @return {Array.<WebInspector.DOMNode>}
+     */
+    shadowRoots: function()
+    {
+        return this._shadowRoots.slice();
+    },
+
+    /**
+     * @return {WebInspector.DOMNode}
+     */
+    templateContent: function()
+    {
+        return this._templateContent;
+    },
+
+    /**
      * @return {number}
      */
     nodeType: function()
     {
         return this._nodeType;
     },
 
     /**
      * @return {string}
      */
@@ skipping 114 matching lines @@
             WebInspector.domAgent._markRevision(this, callback)(error);
         }
         DOMAgent.removeAttribute(this.id, name, mycallback.bind(this));
     },
 
     /**
      * @param {function(Array.<WebInspector.DOMNode>)=} callback
      */
     getChildNodes: function(callback)
     {
-        if (this.children) {
+        if (this._children) {
             if (callback)
-                callback(this.children);
+                callback(this.children());
             return;
         }
 
         /**
          * @this {WebInspector.DOMNode}
          * @param {?Protocol.Error} error
          */
         function mycallback(error)
         {
             if (!error && callback)
-                callback(this.children);
+                callback(this.children());
         }
 
         DOMAgent.requestChildNodes(this.id, undefined, mycallback.bind(this));
     },
 
     /**
      * @param {number} depth
      * @param {function(Array.<WebInspector.DOMNode>)=} callback
      */
     getSubtree: function(depth, callback)
     {
         /**
          * @this {WebInspector.DOMNode}
          * @param {?Protocol.Error} error
          */
         function mycallback(error)
         {
             if (callback)
-                callback(error ? null : this.children);                
+                callback(error ? null : this._children);
         }
 
         DOMAgent.requestChildNodes(this.id, depth, mycallback.bind(this));
     },
 
     /**
      * @param {function(?Protocol.Error)=} callback
      */
     getOuterHTML: function(callback)
     {
@@ skipping 139 matching lines @@
     },
 
     /**
      * @param {WebInspector.DOMNode} prev
      * @param {DOMAgent.Node} payload
      * @return {WebInspector.DOMNode}
      */
     _insertChild: function(prev, payload)
     {
         var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, this._isInShadowTree, payload);
-        if (!prev) {
-            if (!this.children) {
-                // First node
-                this.children = this._shadowRoots.slice();
-                if (this._templateContent)
-                    this.children.push(this._templateContent);
-
-                this.children.push(node);
-            } else
-                this.children.unshift(node);
-        } else
-            this.children.splice(this.children.indexOf(prev) + 1, 0, node);
+        this._children.splice(this._children.indexOf(prev) + 1, 0, node);
         this._renumber();
         return node;
     },
 
     /**
      * @param {WebInspector.DOMNode} node
      */
     _removeChild: function(node)
     {
-        this.children.splice(this.children.indexOf(node), 1);
+        this._children.splice(this._children.indexOf(node), 1);
         node.parentNode = null;
         node._updateChildUserPropertyCountsOnRemoval(this);
         this._renumber();
     },
 
     /**
      * @param {Array.<DOMAgent.Node>} payloads
      */
     _setChildrenPayload: function(payloads)
     {
         // We set children in the constructor.
         if (this._contentDocument)
             return;
 
-        this.children = this._shadowRoots.slice();
-        if (this._templateContent)
-            this.children.push(this._templateContent);
-
+        this._children = [];
         for (var i = 0; i < payloads.length; ++i) {
             var payload = payloads[i];
             var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, this._isInShadowTree, payload);
-            this.children.push(node);
+            this._children.push(node);
         }
         this._renumber();
     },
 
     _renumber: function()
     {
-        this._childNodeCount = this.children.length;
+        this._childNodeCount = this._children.length;
         if (this._childNodeCount == 0) {
             this.firstChild = null;
             this.lastChild = null;
             return;
         }
-        this.firstChild = this.children[0];
-        this.lastChild = this.children[this._childNodeCount - 1];
+        this.firstChild = this._children[0];
+        this.lastChild = this._children[this._childNodeCount - 1];
         for (var i = 0; i < this._childNodeCount; ++i) {
-            var child = this.children[i];
+            var child = this._children[i];
             child.index = i;
-            child.nextSibling = i + 1 < this._childNodeCount ? this.children[i + 1] : null;
-            child.previousSibling = i - 1 >= 0 ? this.children[i - 1] : null;
+            child.nextSibling = i + 1 < this._childNodeCount ? this._children[i + 1] : null;
+            child.previousSibling = i - 1 >= 0 ? this._children[i - 1] : null;
             child.parentNode = this;
         }
     },
 
     /**
      * @param {string} name
      * @param {string} value
      */
     _addAttribute: function(name, value)
     {
@@ skipping 134 matching lines @@
 
             if (left._nodeType === right._nodeType)
                 return true;
 
             // XPath treats CDATA as text nodes.
             var leftType = left._nodeType === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : left._nodeType;
             var rightType = right._nodeType === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : right._nodeType;
             return leftType === rightType;
         }
 
-        var siblings = this.parentNode ? this.parentNode.children : null;
+        var siblings = this.parentNode ? this.parentNode._children : null;
         if (!siblings)
             return 0; // Root node - no siblings.
         var hasSameNamedElements;
         for (var i = 0; i < siblings.length; ++i) {
             if (areNodesSimilar(this, siblings[i]) && siblings[i] !== this) {
                 hasSameNamedElements = true;
                 break;
             }
         }
         if (!hasSameNamedElements)
@@ skipping 417 matching lines @@
     _childNodeRemoved: function(parentId, nodeId)
     {
         var parent = this._idToDOMNode[parentId];
         var node = this._idToDOMNode[nodeId];
         parent._removeChild(node);
         this._unbind(node);
         this.dispatchEventToListeners(WebInspector.DOMAgent.Events.NodeRemoved, {node: node, parent: parent});
     },
 
     /**
-     * @param {DOMAgent.NodeId} rootId
+     * @param {DOMAgent.NodeId} hostId
+     * @param {DOMAgent.Node} root
      */
-    _shadowRootPopped: function(rootId)
+    _shadowRootPushed: function(hostId, root)
     {
+        var host = this._idToDOMNode[hostId];
+        if (!host)
+            return;
+        var node = new WebInspector.DOMNode(this, host.ownerDocument, true, root);
+        node.parentNode = host;
+        this._idToDOMNode[node.id] = node;
+        host._shadowRoots.push(node);
+        this.dispatchEventToListeners(WebInspector.DOMAgent.Events.NodeInserted, root);
     },
 
     /**
+     * @param {DOMAgent.NodeId} hostId
+     * @param {DOMAgent.NodeId} rootId
+     */
+    _shadowRootPopped: function(hostId, rootId)
+    {
+        var host = this._idToDOMNode[hostId];
+        if (!host)
+            return;
+        var root = this._idToDOMNode[rootId];
+        if (!root)
+            return;
+        host._shadowRoots.remove(root);
+        this._unbind(root);
+        this.dispatchEventToListeners(WebInspector.DOMAgent.Events.NodeRemoved, {node: root, parent: host});
+    },
+
+    /**
      * @param {WebInspector.DOMNode} node
      */
     _unbind: function(node)
     {
         delete this._idToDOMNode[node.id];
-        for (var i = 0; node.children && i < node.children.length; ++i)
-            this._unbind(node.children[i]);
+        for (var i = 0; node._children && i < node._children.length; ++i)
+            this._unbind(node._children[i]);
+        for (var i = 0; i < node._shadowRoots.length; ++i)
+            this._unbind(node._shadowRoots[i]);
+        if (node._templateContent)
+            this._unbind(node._templateContent);
     },
 
     /**
      * @param {number} nodeId
      */
     inspectElement: function(nodeId)
     {
         var node = this._idToDOMNode[nodeId];
         if (node)
             this.dispatchEventToListeners(WebInspector.DOMAgent.Events.InspectElementRequested, node);
@@ skipping 342 matching lines @@
     {
         this._domAgent._childNodeRemoved(parentNodeId, nodeId);
     },
 
     /**
      * @param {DOMAgent.NodeId} hostId
      * @param {DOMAgent.Node} root
      */
     shadowRootPushed: function(hostId, root)
     {
-        this._domAgent._childNodeInserted(hostId, 0, root);
+        this._domAgent._shadowRootPushed(hostId, root);
     },
 
     /**
      * @param {DOMAgent.NodeId} hostId
      * @param {DOMAgent.NodeId} rootId
      */
     shadowRootPopped: function(hostId, rootId)
     {
-        this._domAgent._childNodeRemoved(hostId, rootId);
+        this._domAgent._shadowRootPopped(hostId, rootId);
     }
 }
 
 /**
  * @type {?WebInspector.DOMAgent}
  */
 WebInspector.domAgent = null;