DevTools: Inspect element mode does not select element in ShadowDOM

Source/devtools/front_end/ElementsTreeOutline.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 166 matching lines @@
         if (!node)
             return false;
         var treeElement = this.findTreeElement(node);
         if (!treeElement)
             return false;
         return treeElement._editing || false;
     },
 
     update: function()
     {
-        var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
+        var selectedNode = this.selectedTreeElement ? this.selectedTreeElement._node : null;
 
         this.removeChildren();
 
         if (!this.rootDOMNode)
             return;
 
         var treeElement;
         if (this._includeRootDOMNode) {
             treeElement = new WebInspector.ElementsTreeElement(this.rootDOMNode);
             treeElement.selectable = this._selectEnabled;
@@ skipping 69 matching lines @@
      */
     createTreeElementFor: function(node)
     {
         var treeElement = this.findTreeElement(node);
         if (treeElement)
             return treeElement;
         if (!node.parentNode)
             return null;
 
         treeElement = this.createTreeElementFor(node.parentNode);
-        if (treeElement && treeElement.showChild(node.index))

[vsevik, 2013/06/07 08:41:00]

.index is unused now

-            return treeElement.children[node.index];
-
-        return null;
+        return treeElement ? treeElement._showChild(node) : null;
     },
 
     set suppressRevealAndSelect(x)
     {
         if (this._suppressRevealAndSelect === x)
             return;
         this._suppressRevealAndSelect = x;
     },
 
     _revealAndSelectNode: function(node, omitFocus)
@@ skipping 57 matching lines @@
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
             delete this._previousHoveredElement;
         }
 
         if (element) {
             element.hovered = true;
             this._previousHoveredElement = element;
         }
 
-        WebInspector.domAgent.highlightDOMNode(element ? element.representedObject.id : 0);
+        WebInspector.domAgent.highlightDOMNode(element && element._node ? element._node.id : 0);
     },
 
     _onmouseout: function(event)
     {
         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
             return;
 
         if (this._previousHoveredElement) {
             this._previousHoveredElement.hovered = false;
@@ skipping 10 matching lines @@
         if (event.target.nodeName === "A")
             return false;
 
         var treeElement = this._treeElementFromEvent(event);
         if (!treeElement)
             return false;
 
         if (!this._isValidDragSourceOrTarget(treeElement))
             return false;
 
-        if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
+        if (treeElement._node.nodeName() === "BODY" || treeElement._node.nodeName() === "HEAD")
             return false;
 
         event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
         event.dataTransfer.effectAllowed = "copyMove";
         this._treeElementBeingDragged = treeElement;
 
         WebInspector.domAgent.hideDOMNodeHighlight();
 
         return true;
     },
 
     _ondragover: function(event)
     {
         if (!this._treeElementBeingDragged)
             return false;
 
         var treeElement = this._treeElementFromEvent(event);
         if (!this._isValidDragSourceOrTarget(treeElement))
             return false;
 
-        var node = treeElement.representedObject;
+        var node = treeElement._node;
         while (node) {
-            if (node === this._treeElementBeingDragged.representedObject)
+            if (node === this._treeElementBeingDragged._node)
                 return false;
             node = node.parentNode;
         }
 
         treeElement.updateSelection();
         treeElement.listItemElement.addStyleClass("elements-drag-over");
         this._dragOverTreeElement = treeElement;
         event.preventDefault();
         event.dataTransfer.dropEffect = 'move';
         return false;
@@ skipping 32 matching lines @@
     _doMove: function(treeElement)
     {
         if (!this._treeElementBeingDragged)
             return;
 
         var parentNode;
         var anchorNode;
 
         if (treeElement._elementCloseTag) {
             // Drop onto closing tag -> insert as last child.
-            parentNode = treeElement.representedObject;
+            parentNode = treeElement._node;
         } else {
-            var dragTargetNode = treeElement.representedObject;
+            var dragTargetNode = treeElement._node;
             parentNode = dragTargetNode.parentNode;
             anchorNode = dragTargetNode;
         }
 
         var wasExpanded = this._treeElementBeingDragged.expanded;
-        this._treeElementBeingDragged.representedObject.moveTo(parentNode, anchorNode, this._selectNodeAfterEdit.bind(this, null, wasExpanded));
+        this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this._selectNodeAfterEdit.bind(this, null, wasExpanded));
 
         delete this._treeElementBeingDragged;
     },
 
     _ondragend: function(event)
     {
         event.preventDefault();
         this._clearDragOverTreeElementMarker();
         delete this._treeElementBeingDragged;
     },
@@ skipping 31 matching lines @@
             return;
 
         var treeElement = this._treeElementFromEvent(event);
         if (!treeElement)
             return;
 
         function focusElement()
         {
             // Force elements module load.
             WebInspector.showPanel("elements");
-            WebInspector.domAgent.inspectElement(treeElement.representedObject.id);
+            WebInspector.domAgent.inspectElement(treeElement._node.id);
         }
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Reveal in Elements panel" : "Reveal in Elements Panel"), focusElement.bind(this));
         contextMenu.show();
     },
 
     populateContextMenu: function(contextMenu, event)
     {
         var treeElement = this._treeElementFromEvent(event);
         if (!treeElement)
             return;
 
-        var isTag = treeElement.representedObject.nodeType() === Node.ELEMENT_NODE;
+        var isTag = treeElement._node.nodeType() === Node.ELEMENT_NODE;
         var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
         if (textNode && textNode.hasStyleClass("bogus"))
             textNode = null;
         var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-comment");
         contextMenu.appendApplicableItems(event.target);
         if (textNode) {
             contextMenu.appendSeparator();
             treeElement._populateTextContextMenu(contextMenu, textNode);
         } else if (isTag) {
             contextMenu.appendSeparator();
             treeElement._populateTagContextMenu(contextMenu, event);
         } else if (commentNode) {
             contextMenu.appendSeparator();
             treeElement._populateNodeContextMenu(contextMenu, textNode);
         }
     },
 
-    adjustCollapsedRange: function()
-    {
-    },
-
     _updateModifiedNodes: function()
     {
         if (this._elementsTreeUpdater)
             this._elementsTreeUpdater._updateModifiedNodes();
     },
 
     _populateContextMenu: function(contextMenu, node)
     {
         if (this._contextMenuCallback)
             this._contextMenuCallback(contextMenu, node);
@@ skipping 166 matching lines @@
     __proto__: WebInspector.ElementsTreeOutline.ElementDecorator.prototype
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {boolean=} elementCloseTag
  */
 WebInspector.ElementsTreeElement = function(node, elementCloseTag)
 {
+    // The title will be updated in onattach.
+    TreeElement.call(this, "", node);
+    this._node = node;
+
     this._elementCloseTag = elementCloseTag;
-    var hasChildrenOverride = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
+    this._updateHasChildren();
 
-    // The title will be updated in onattach.
-    TreeElement.call(this, "", node, hasChildrenOverride);
-
-    if (this.representedObject.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
+    if (this._node.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
         this._canAddAttributes = true;
     this._searchQuery = null;
     this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
 }
 
 WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
 
 // A union of HTML4 and HTML5-Draft elements that explicitly
 // or implicitly (for HTML5) forbid the closing tag.
 // FIXME: Revise once HTML5 Final is published.
@@ skipping 106 matching lines @@
     get expandedChildCount()
     {
         var count = this.children.length;
         if (count && this.children[count - 1]._elementCloseTag)
             count--;
         if (count && this.children[count - 1].expandAllButton)
             count--;
         return count;
     },
 
-    showChild: function(index)
+    /**
+     * @param {WebInspector.DOMNode} child
+     * @return {?WebInspector.ElementsTreeElement}
+     */
+    _showChild: function(child)
     {
         if (this._elementCloseTag)
-            return;
+            return null;
+
+        var index = this._visibleChildren().indexOf(child);
+        if (index == -1)

[apavlov, 2013/06/06 16:18:59]

===

[pfeldman, 2013/06/07 08:53:49]

Done.

+            return null;
 
         if (index >= this.expandedChildrenLimit) {
             this._expandedChildrenLimit = index + 1;
             this._updateChildren(true);
         }
 
         // Whether index-th child is visible in the children tree
-        return this.expandedChildCount > index;
+        return this.expandedChildCount > index ? this.children[index] : null;
     },
 
     updateSelection: function()
     {
         var listItemElement = this.listItemElement;
         if (!listItemElement)
             return;
 
         if (!this._readyToUpdateSelection) {
             if (document.body.offsetWidth > 0)
@@ skipping 31 matching lines @@
         var links = this.listItemElement.querySelectorAll("li > .webkit-html-tag > .webkit-html-attribute > .webkit-html-external-link, li > .webkit-html-tag > .webkit-html-attribute > .webkit-html-resource-link");
         if (!links)
             return;
 
         for (var i = 0; i < links.length; ++i)
             links[i].preventFollowOnDoubleClick = true;
     },
 
     onpopulate: function()
     {
-        if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
+        if (this.children.length || this._showInlineText() || this._elementCloseTag)
             return;
 
         this.updateChildren();
     },
 
     /**
      * @param {boolean=} fullRefresh
      */
     updateChildren: function(fullRefresh)
     {
         if (this._elementCloseTag)
             return;
-        this.representedObject.getChildNodes(this._updateChildren.bind(this, fullRefresh));
+        this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh));
     },
 
     /**
      * @param {boolean=} closingTag
      */
     insertChildElement: function(child, index, closingTag)
     {
         var newElement = new WebInspector.ElementsTreeElement(child, closingTag);
         newElement.selectable = this.treeOutline._selectEnabled;
         this.insertChild(newElement, index);
@@ skipping 26 matching lines @@
             var selectedTreeElement = this.treeOutline.selectedTreeElement;
             if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
                 this.select();
             this.removeChildren();
         }
 
         var treeElement = this;
         var treeChildIndex = 0;
         var elementToSelect;
 
-        function updateChildrenOfNode(node)
+        function updateChildrenOfNode()
         {
             var treeOutline = treeElement.treeOutline;
-            var child = node.firstChild;

[vsevik, 2013/06/07 08:41:00]

unused now

[pfeldman, 2013/06/07 08:53:49]

Still is, sorry

-            while (child) {
+            var visibleChildren = this._visibleChildren();
+
+            for (var i = 0; i < visibleChildren.length; ++i) {
+                var child = visibleChildren[i];
                 var currentTreeElement = treeElement.children[treeChildIndex];
-                if (!currentTreeElement || currentTreeElement.representedObject !== child) {
+                if (!currentTreeElement || currentTreeElement._node !== child) {
                     // Find any existing element that is later in the children list.
                     var existingTreeElement = null;
-                    for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
-                        if (treeElement.children[i].representedObject === child) {
-                            existingTreeElement = treeElement.children[i];
+                    for (var j = (treeChildIndex + 1), size = treeElement.expandedChildCount; j < size; ++j) {
+                        if (treeElement.children[j]._node === child) {
+                            existingTreeElement = treeElement.children[j];
                             break;
                         }
                     }
 
                     if (existingTreeElement && existingTreeElement.parent === treeElement) {
                         // If an existing element was found and it has the same parent, just move it.
                         treeElement.moveChild(existingTreeElement, treeChildIndex);
                     } else {
                         // No existing element found, insert a new element.
                         if (treeChildIndex < treeElement.expandedChildrenLimit) {
                             var newElement = treeElement.insertChildElement(child, treeChildIndex);
                             if (child === selectedNode)
                                 elementToSelect = newElement;
                             if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
                                 treeElement.expandedChildrenLimit++;
                         }
                     }
                 }
 
-                child = child.nextSibling;

[vsevik, 2013/06/07 08:41:00]

unused now

                 ++treeChildIndex;
             }
         }
 
         // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
         for (var i = (this.children.length - 1); i >= 0; --i) {
             var currentChild = this.children[i];
-            var currentNode = currentChild.representedObject;
+            var currentNode = currentChild._node;
+            if (!currentNode)
+                continue;
             var currentParentNode = currentNode.parentNode;
 
-            if (currentParentNode === this.representedObject)
+            if (currentParentNode === this._node)
                 continue;
 
             var selectedTreeElement = this.treeOutline.selectedTreeElement;
             if (selectedTreeElement && (selectedTreeElement === currentChild || selectedTreeElement.hasAncestor(currentChild)))
                 this.select();
 
             this.removeChildAtIndex(i);
         }
 
-        updateChildrenOfNode(this.representedObject);
-        this.adjustCollapsedRange();
+        updateChildrenOfNode.call(this);
+        this._adjustCollapsedRange();
 
         var lastChild = this.children[this.children.length - 1];
-        if (this.representedObject.nodeType() == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
-            this.insertChildElement(this.representedObject, this.children.length, true);
+        if (this._node.nodeType() == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
+            this.insertChildElement(this._node, this.children.length, true);
 
         // We want to restore the original selection and tree scroll position after a full refresh, if possible.
         if (fullRefresh && elementToSelect) {
             elementToSelect.select();
             if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
                 treeOutlineContainerElement.scrollTop = originalScrollTop;
         }
 
         delete this._updateChildrenInProgress;
     },
 
-    adjustCollapsedRange: function()
+    _adjustCollapsedRange: function()
     {
+        var visibleChildren = this._visibleChildren();
         // Ensure precondition: only the tree elements for node children are found in the tree
         // (not the Expand All button or the closing tag).
         if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
             this.removeChild(this.expandAllButtonElement.__treeElement);
 
-        const node = this.representedObject;
-        if (!node.children)
-            return;
-        const childNodeCount = node.children.length;
+        const childNodeCount = visibleChildren.length;
 
         // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
         for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
-            this.insertChildElement(node.children[i], i);
+            this.insertChildElement(visibleChildren[i], i);
 
         const expandedChildCount = this.expandedChildCount;
         if (childNodeCount > this.expandedChildCount) {
             var targetButtonIndex = expandedChildCount;
             if (!this.expandAllButtonElement) {
                 var button = document.createElement("button");
                 button.className = "show-all-nodes";
                 button.value = "";
                 var item = new TreeElement(button, null, false);
                 item.selectable = false;
                 item.expandAllButton = true;
                 this.insertChild(item, targetButtonIndex);
                 this.expandAllButtonElement = item.listItemElement.firstChild;
                 this.expandAllButtonElement.__treeElement = item;
                 this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
             } else if (!this.expandAllButtonElement.__treeElement.parent)
                 this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
             this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)", childNodeCount - expandedChildCount);
         } else if (this.expandAllButtonElement)
             delete this.expandAllButtonElement;
     },
 
     handleLoadAllChildren: function()
     {
-        this.expandedChildrenLimit = Math.max(this.representedObject._childNodeCount, this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
+        this.expandedChildrenLimit = Math.max(this._visibleChildCount(), this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
     },
 
     expandRecursively: function()
     {
         function callback()
         {
             TreeElement.prototype.expandRecursively.call(this, Number.MAX_VALUE);
         }
         
-        this.representedObject.getSubtree(-1, callback.bind(this));
+        this._node.getSubtree(-1, callback.bind(this));
     },
 
     onexpand: function()
     {
         if (this._elementCloseTag)
             return;
 
         this.updateTitle();
         this.treeOutline.updateSelection();
     },
@@ skipping 14 matching lines @@
             if (tagSpans.length)
                 tagSpans[0].scrollIntoViewIfNeeded(false);
             else
                 this.listItemElement.scrollIntoViewIfNeeded(false);
         }
     },
 
     onselect: function(selectedByUser)
     {
         this.treeOutline.suppressRevealAndSelect = true;
-        this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
+        this.treeOutline.selectDOMNode(this._node, selectedByUser);
         if (selectedByUser)
-            WebInspector.domAgent.highlightDOMNode(this.representedObject.id);
+            WebInspector.domAgent.highlightDOMNode(this._node.id);
         this.updateSelection();
         this.treeOutline.suppressRevealAndSelect = false;
         return true;
     },
 
     ondelete: function()
     {
-        var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
+        var startTagTreeElement = this.treeOutline.findTreeElement(this._node);
         startTagTreeElement ? startTagTreeElement.remove() : this.remove();
         return true;
     },
 
     onenter: function()
     {
         // On Enter or Return start editing the first attribute
         // or create a new attribute on the selected element.
         if (this._editing)
             return false;
 
         this._startEditing();
 
         // prevent a newline from being immediately inserted
         return true;
     },
 
     selectOnMouseDown: function(event)
     {
         TreeElement.prototype.selectOnMouseDown.call(this, event);
 
         if (this._editing)
             return;
 
         if (this.treeOutline._showInElementsPanelEnabled) {
             WebInspector.showPanel("elements");
-            this.treeOutline.selectDOMNode(this.representedObject, true);
+            this.treeOutline.selectDOMNode(this._node, true);
         }
 
         // Prevent selecting the nearest word on double click.
         if (event.detail >= 2)
             event.preventDefault();
     },
 
     ondblclick: function(event)
     {
         if (this._editing || this._elementCloseTag)
@@ skipping 16 matching lines @@
             tag.appendChild(document.createTextNode('<'+nodeName));
             tag.appendChild(node);
             tag.appendChild(document.createTextNode('>'));
         }
 
         this.updateSelection();
     },
 
     _startEditingTarget: function(eventTarget)
     {
-        if (this.treeOutline.selectedDOMNode() != this.representedObject)
+        if (this.treeOutline.selectedDOMNode() != this._node)
             return;
 
-        if (this.representedObject.nodeType() != Node.ELEMENT_NODE && this.representedObject.nodeType() != Node.TEXT_NODE)
+        if (this._node.nodeType() != Node.ELEMENT_NODE && this._node.nodeType() != Node.TEXT_NODE)
             return false;
 
         var textNode = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-text-node");
         if (textNode)
             return this._startEditingTextNode(textNode);
 
         var attribute = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-attribute");
         if (attribute)
             return this._startEditingAttribute(attribute, eventTarget);
 
         var tagName = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-tag-name");
         if (tagName)
             return this._startEditingTagName(tagName);
 
         var newAttribute = eventTarget.enclosingNodeOrSelfWithClass("add-attribute");
         if (newAttribute)
             return this._addNewAttribute();
 
         return false;
     },
 
     _populateTagContextMenu: function(contextMenu, event)
     {
         var attribute = event.target.enclosingNodeOrSelfWithClass("webkit-html-attribute");
         var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
 
         // Add attribute-related actions.
-        var treeElement = this._elementCloseTag ? this.treeOutline.findTreeElement(this.representedObject) : this;
+        var treeElement = this._elementCloseTag ? this.treeOutline.findTreeElement(this._node) : this;
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Add attribute" : "Add Attribute"), this._addNewAttribute.bind(treeElement));
         if (attribute && !newAttribute)
             contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Edit attribute" : "Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
         contextMenu.appendSeparator();
         if (this.treeOutline._setPseudoClassCallback) {
             var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Force element state" : "Force Element State"));
             this._populateForcedPseudoStateItems(pseudoSubMenu);
             contextMenu.appendSeparator();
         }
 
         this._populateNodeContextMenu(contextMenu);
-        this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
+        this.treeOutline._populateContextMenu(contextMenu, this._node);
 
         contextMenu.appendSeparator();
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind(this)); 
     },
 
     _populateForcedPseudoStateItems: function(subMenu)
     {
         const pseudoClasses = ["active", "hover", "focus", "visited"];
-        var node = this.representedObject;
+        var node = this._node;
         var forcedPseudoState = (node ? node.getUserProperty("pseudoState") : null) || [];
         for (var i = 0; i < pseudoClasses.length; ++i) {
             var pseudoClassForced = forcedPseudoState.indexOf(pseudoClasses[i]) >= 0;
             subMenu.appendCheckboxItem(":" + pseudoClasses[i], this.treeOutline._setPseudoClassCallback.bind(null, node.id, pseudoClasses[i], !pseudoClassForced), pseudoClassForced, false);
         }
     },
 
     _populateTextContextMenu: function(contextMenu, textNode)
     {
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Edit text" : "Edit Text"), this._startEditingTextNode.bind(this, textNode));
         this._populateNodeContextMenu(contextMenu);
     },
 
     _populateNodeContextMenu: function(contextMenu)
     {
         // Add free-form node-related actions.
         contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
         contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
         contextMenu.appendItem(WebInspector.UIString("Copy XPath"), this._copyXPath.bind(this));
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Delete node" : "Delete Node"), this.remove.bind(this));
     },
 
     _startEditing: function()
     {
-        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
+        if (this.treeOutline.selectedDOMNode() !== this._node)
             return;
 
         var listItem = this._listItemNode;
 
         if (this._canAddAttributes) {
             var attribute = listItem.getElementsByClassName("webkit-html-attribute")[0];
             if (attribute)
                 return this._startEditingAttribute(attribute, attribute.getElementsByClassName("webkit-html-attribute-value")[0]);
 
             return this._addNewAttribute();
         }
 
-        if (this.representedObject.nodeType() === Node.TEXT_NODE) {
+        if (this._node.nodeType() === Node.TEXT_NODE) {
             var textNode = listItem.getElementsByClassName("webkit-html-text-node")[0];
             if (textNode)
                 return this._startEditingTextNode(textNode);
             return;
         }
     },
 
     _addNewAttribute: function()
     {
         // Cannot just convert the textual html into an element without
@@ skipping 83 matching lines @@
     },
 
     /**
      * @param {Element} textNodeElement
      */
     _startEditingTextNode: function(textNodeElement)
     {
         if (WebInspector.isBeingEdited(textNodeElement))
             return true;
 
-        var textNode = this.representedObject;
+        var textNode = this._node;
         // We only show text nodes inline in elements if the element only
         // has a single child, and that child is a text node.
         if (textNode.nodeType() === Node.ELEMENT_NODE && textNode.firstChild)
             textNode = textNode.firstChild;
 
         var container = textNodeElement.enclosingNodeOrSelfWithClass("webkit-html-text-node");
         if (container)
             container.textContent = textNode.nodeValue(); // Strip the CSS or JS highlighting if present.
         var config = new WebInspector.EditingConfig(this._textNodeEditingCommitted.bind(this, textNode), this._editingCancelled.bind(this));
         this._editing = WebInspector.startEditing(textNodeElement, config);
@@ skipping 129 matching lines @@
         {
             if (error)
                 this._editingCancelled(element, attributeName);
 
             if (!moveDirection)
                 return;
 
             treeOutline._updateModifiedNodes();
 
             // Search for the attribute's position, and then decide where to move to.
-            var attributes = this.representedObject.attributes();
+            var attributes = this._node.attributes();
             for (var i = 0; i < attributes.length; ++i) {
                 if (attributes[i].name !== attributeName)
                     continue;
 
                 if (moveDirection === "backward") {
                     if (i === 0)
                         this._startEditingTagName();
                     else
                         this._triggerEditAttribute(attributes[i - 1].name);
                 } else {
@@ skipping 24 matching lines @@
             }
         }
 
         if (!attributeName.trim() && !newText.trim()) {
             element.removeSelf();
             moveToNextAttributeIfNeeded.call(this);
             return;
         }
 
         if (oldText !== newText) {
-            this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
+            this._node.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
             return;
         }
 
         moveToNextAttributeIfNeeded.call(this);
     },
 
     _tagNameEditingCommitted: function(element, newText, oldText, tagName, moveDirection)
     {
         delete this._editing;
         var self = this;
 
         function cancel()
         {
             var closingTagElement = self._distinctClosingTagElement();
             if (closingTagElement)
                 closingTagElement.textContent = "</" + tagName + ">";
 
             self._editingCancelled(element, tagName);
             moveToNextAttributeIfNeeded.call(self);
         }
 
         function moveToNextAttributeIfNeeded()
         {
             if (moveDirection !== "forward") {
                 this._addNewAttribute();
                 return;
             }
 
-            var attributes = this.representedObject.attributes();
+            var attributes = this._node.attributes();
             if (attributes.length > 0)
                 this._triggerEditAttribute(attributes[0].name);
             else
                 this._addNewAttribute();
         }
 
         newText = newText.trim();
         if (newText === oldText) {
             cancel();
             return;
         }
 
         var treeOutline = this.treeOutline;
         var wasExpanded = this.expanded;
 
         function changeTagNameCallback(error, nodeId)
         {
             if (error || !nodeId) {
                 cancel();
                 return;
             }
             var newTreeItem = treeOutline._selectNodeAfterEdit(null, wasExpanded, error, nodeId);
             moveToNextAttributeIfNeeded.call(newTreeItem);
         }
 
-        this.representedObject.setNodeName(newText, changeTagNameCallback);
+        this._node.setNodeName(newText, changeTagNameCallback);
     },
 
     /**
      * @param {WebInspector.DOMNode} textNode
      * @param {Element} element
      * @param {string} newText
      */
     _textNodeEditingCommitted: function(textNode, element, newText)
     {
         delete this._editing;
@@ skipping 59 matching lines @@
 
         delete this.selectionElement;
         if (this.selected)
             this.updateSelection();
         this._preventFollowingLinksOnDoubleClick();
         this._highlightSearchResults();
     },
 
     _createDecoratorElement: function()
     {
-        var node = this.representedObject;
+        var node = this._node;
         var decoratorMessages = [];
         var parentDecoratorMessages = [];
         for (var i = 0; i < this.treeOutline._nodeDecorators.length; ++i) {
             var decorator = this.treeOutline._nodeDecorators[i];
             var message = decorator.decorate(node);
             if (message) {
                 decoratorMessages.push(message);
                 continue;
             }
 
@@ skipping 57 matching lines @@
 
         if (hasText)
             attrSpanElement.appendChild(document.createTextNode("\""));
     },
 
     /**
      * @param {function(string, string, string, boolean=, string=)=} linkify
      */
     _buildTagDOM: function(parentElement, tagName, isClosingTag, isDistinctTreeElement, linkify)
     {
-        var node = /** @type WebInspector.DOMNode */ (this.representedObject);
+        var node = this._node;
         var classes = [ "webkit-html-tag" ];
         if (isClosingTag && isDistinctTreeElement)
             classes.push("close");
         if (node.isInShadowTree())
             classes.push("shadow");
         var tagElement = parentElement.createChild("span", classes.join(" "));
         tagElement.appendChild(document.createTextNode("<"));
         var tagNameElement = tagElement.createChild("span", isClosingTag ? "" : "webkit-html-tag-name");
         tagNameElement.textContent = (isClosingTag ? "/" : "") + tagName;
         if (!isClosingTag && node.hasAttributes()) {
@@ skipping 22 matching lines @@
         }
         if (result) {
             result += text.substring(lastIndexAfterEntity);
             return result;
         }
         return text;
     },
 
     _nodeTitleInfo: function(linkify)
     {
-        var node = this.representedObject;
+        var node = this._node;
         var info = {titleDOM: document.createDocumentFragment(), hasChildren: this.hasChildren};
 
         switch (node.nodeType()) {
             case Node.ATTRIBUTE_NODE:
                 var value = node.value || "\u200B"; // Zero width space to force showing an empty value.
                 this._buildAttributeDOM(info.titleDOM, node.name, value);
                 break;
 
             case Node.ELEMENT_NODE:
                 var tagName = node.nodeNameInCorrectCase();
                 if (this._elementCloseTag) {
                     this._buildTagDOM(info.titleDOM, tagName, true, true);
                     info.hasChildren = false;
                     break;
                 }
 
                 this._buildTagDOM(info.titleDOM, tagName, false, false, linkify);
 
-                var textChild = this._singleTextChild(node);
-                var showInlineText = textChild && textChild.nodeValue().length < Preferences.maxInlineTextChildLength && !this.hasChildren;
-
+                var showInlineText = this._showInlineText() && !this.hasChildren;
                 if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName]))) {
                     if (this.hasChildren) {
                         var textNodeElement = info.titleDOM.createChild("span", "webkit-html-text-node bogus");
                         textNodeElement.textContent = "\u2026";
                         info.titleDOM.appendChild(document.createTextNode("\u200B"));
                     }
                     this._buildTagDOM(info.titleDOM, tagName, true, false);
                 }
 
                 // If this element only has a single child that is a text node,
                 // just show that text and the closing tag inline rather than
                 // create a subtree for them
                 if (showInlineText) {
                     var textNodeElement = info.titleDOM.createChild("span", "webkit-html-text-node");
-                    textNodeElement.textContent = this._convertWhitespaceToEntities(textChild.nodeValue());
+                    textNodeElement.textContent = this._convertWhitespaceToEntities(node.firstChild.nodeValue());
                     info.titleDOM.appendChild(document.createTextNode("\u200B"));
                     this._buildTagDOM(info.titleDOM, tagName, true, false);
                     info.hasChildren = false;
                 }
                 break;
 
             case Node.TEXT_NODE:
                 if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "script") {
                     var newNode = info.titleDOM.createChild("span", "webkit-html-text-node webkit-html-js-node");
                     newNode.textContent = node.nodeValue();
@@ skipping 44 matching lines @@
                 fragmentElement.textContent = node.nodeNameInCorrectCase().collapseWhitespace();
                 if (node.isInShadowTree())
                     fragmentElement.addStyleClass("shadow");
                 break;
             default:
                 info.titleDOM.appendChild(document.createTextNode(node.nodeNameInCorrectCase().collapseWhitespace()));
         }
         return info;
     },
 
-    _singleTextChild: function(node)
+    _showInlineText: function()
     {
-        if (!node)
-            return null;
-
-        var firstChild = node.firstChild;
-        if (!firstChild || firstChild.nodeType() !== Node.TEXT_NODE)
-            return null;
-
-        if (node.hasShadowRoots())
-            return null;
-
-        var sibling = firstChild.nextSibling;
-        return sibling ? null : firstChild;
-    },
-
-    _showInlineText: function(node)
-    {
-        if (node.nodeType() === Node.ELEMENT_NODE) {
-            var textChild = this._singleTextChild(node);
-            if (textChild && textChild.nodeValue().length < Preferences.maxInlineTextChildLength)
-                return true;
-        }
+        if (this._node.templateContent() || (WebInspector.settings.showShadowDOM.get() && this._node.hasShadowRoots()))
+            return false;
+        if (this._node.nodeType() !== Node.ELEMENT_NODE)
+            return false;
+        if (!this._node.firstChild || this._node.firstChild !== this._node.lastChild || this._node.firstChild.nodeType() !== Node.TEXT_NODE)
+            return false;
+        var textChild = this._node.firstChild;
+        if (textChild.nodeValue().length < Preferences.maxInlineTextChildLength)
+            return true;
         return false;
     },
 
     remove: function()
     {
         var parentElement = this.parent;
         if (!parentElement)
             return;
 
         var self = this;
         function removeNodeCallback(error, removedNodeId)
         {
             if (error)
                 return;
 
             parentElement.removeChild(self);
-            parentElement.adjustCollapsedRange();
+            parentElement._adjustCollapsedRange();
         }
 
-        if (!this.representedObject.parentNode || this.representedObject.parentNode.nodeType() === Node.DOCUMENT_NODE)
+        if (!this._node.parentNode || this._node.parentNode.nodeType() === Node.DOCUMENT_NODE)
             return;
-        this.representedObject.removeNode(removeNodeCallback);
+        this._node.removeNode(removeNodeCallback);
     },
 
     _editAsHTML: function()
     {
         var treeOutline = this.treeOutline;
-        var node = this.representedObject;
+        var node = this._node;
         var parentNode = node.parentNode;
         var index = node.index;
         var wasExpanded = this.expanded;
 
         function selectNode(error, nodeId)
         {
             if (error)
                 return;
 
             // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
             treeOutline._updateModifiedNodes();
 
-            var newNode = parentNode ? parentNode.children[index] || parentNode : null;
+            var newNode = parentNode ? parentNode.children()[index] || parentNode : null;

[vsevik, 2013/06/07 08:41:00]

...Or index is used.....???

             if (!newNode)
                 return;
 
             treeOutline.selectDOMNode(newNode, true);
 
             if (wasExpanded) {
                 var newTreeItem = treeOutline.findTreeElement(newNode);
                 if (newTreeItem)
                     newTreeItem.expand();
             }
         }
 
         function commitChange(initialValue, value)
         {
             if (initialValue !== value)
                 node.setOuterHTML(value, selectNode);
             else
                 return;
         }
 
         node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
     },
 
     _copyHTML: function()
     {
-        this.representedObject.copyNode();
+        this._node.copyNode();
     },
 
     _copyXPath: function()
     {
-        this.representedObject.copyXPath(true);
+        this._node.copyXPath(true);
     },
 
     _highlightSearchResults: function()
     {
         if (!this._searchQuery || !this._searchHighlightsVisible)
             return;
         if (this._highlightResult) {
             this._updateSearchHighlight(true);
             return;
         }
@@ skipping 23 matching lines @@
         {
             function scrollIntoView()
             {
                 this.scrollIntoViewIfNeeded(true);
             }
 
             if (object)
                 object.callFunction(scrollIntoView);
         }
         
-        var node = /** @type {WebInspector.DOMNode} */ (this.representedObject);
-        WebInspector.RemoteObject.resolveNode(node, "", scrollIntoViewCallback);
+        WebInspector.RemoteObject.resolveNode(this._node, "", scrollIntoViewCallback);
+    },
+
+    /**
+     * @return {Array.<WebInspector.DOMNode>} visibleChildren
+     */
+    _visibleChildren: function()
+    {
+        var visibleChildren = WebInspector.settings.showShadowDOM.get() ? this._node.shadowRoots() : [];
+        if (this._node.templateContent())
+            visibleChildren.push(this._node.templateContent());
+        if (this._node.childNodeCount())
+            visibleChildren = visibleChildren.concat(this._node.children());

[apavlov, 2013/06/06 16:18:59]

Alternatively, visibleChildren.push.apply(visibleChildren,
this._node.children());
which saves a new array allocation/copy.

[pfeldman, 2013/06/07 08:53:49]

Done.

+        return visibleChildren;
+    },
+
+    /**
+     * @return {Array.<WebInspector.DOMNode>} visibleChildren
+     */
+    _visibleChildCount: function()
+    {
+        var childCount = this._node.childNodeCount();
+        if (this._node.templateContent())
+            childCount++;
+        if (WebInspector.settings.showShadowDOM.get())
+            childCount += this._node.shadowRoots().length;
+        return childCount;
+    },
+
+    _updateHasChildren: function()
+    {
+        this.hasChildren = !this._elementCloseTag && !this._showInlineText() && this._visibleChildCount() > 0;
     },
 
     __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
  */
 WebInspector.ElementsTreeUpdater = function(treeOutline)
 {
@@ skipping 62 matching lines @@
 
     _nodeRemoved: function(event)
     {
         this._nodeModified(event.data.node, false, event.data.parent);
     },
 
     _childNodeCountUpdated: function(event)
     {
         var treeElement = this._treeOutline.findTreeElement(event.data);
         if (treeElement)
-            treeElement.hasChildren = event.data.hasChildNodes();
+            treeElement._updateHasChildren();
     },
 
     _updateModifiedNodesSoon: function()
     {
         if (this._updateModifiedNodesTimeout)
             return;
         this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 50);
     },
 
     _updateModifiedNodes: function()
@@ skipping 67 matching lines @@
  * @constructor
  * @param {boolean} isUpdated
  * @param {WebInspector.DOMNode=} parent
  */
 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent)
 {
     this.isUpdated = isUpdated;
     if (parent)
         this.parent = parent;
 }