DevTools: Make sure ElementsTreeOutline is correctly rendered when element's hasChildren state chan…

Source/devtools/front_end/elements/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 1180 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._elementCloseTag)
+        this.populated = true;
+        if (this.children.length || !this.hasChildren)
             return;
 
         this.updateChildren();
     },
 
     /**
      * @param {boolean=} fullRefresh
      */
     updateChildren: function(fullRefresh)
     {
-        if (this._elementCloseTag)
+        if (!this.hasChildren)
             return;
+        console.assert(!this._elementCloseTag);
         this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh));
     },
 
     /**
      * @param {!WebInspector.DOMNode} child
      * @param {number} index
      * @param {boolean=} closingTag
      * @return {!WebInspector.ElementsTreeElement}
      */
     insertChildElement: function(child, index, closingTag)
@@ skipping 93 matching lines @@
                 this.select();
 
             this.removeChildAtIndex(i);
         }
 
         var elementToSelect = updateChildrenOfNode.call(this);
         this.updateTitle();
         this._adjustCollapsedRange();
 
         var lastChild = this.children[this.children.length - 1];
-        if (this._node.nodeType() == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
+        if (this._node.nodeType() == Node.ELEMENT_NODE && this.hasChildren)

[apavlov, 2014/08/13 14:39:19]

===

             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;
@@ skipping 1003 matching lines @@
                         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) {
+                    console.assert(!this.hasChildren);
                     var textNodeElement = info.titleDOM.createChild("span", "webkit-html-text-node");
                     var result = this._convertWhitespaceToEntities(node.firstChild.nodeValue());
                     textNodeElement.textContent = result.text;
                     WebInspector.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, "webkit-html-entity-value");
                     info.titleDOM.appendChild(document.createTextNode("\u200B"));
                     this._buildTagDOM(info.titleDOM, tagName, true, false);
                     info.hasChildren = false;
                 }
                 break;
 
@@ skipping 295 matching lines @@
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.NodeInserted, this._nodeInserted, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.CharacterDataModified, this._characterDataModified, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
     },
 
     /**
-     * @param {!WebInspector.DOMNode} parentNode
+     * @param {?WebInspector.DOMNode} parentNode
      */
     _parentNodeModified: function(parentNode)
     {
+        if (!parentNode)
+            return;
+        this._recentlyModifiedParentNodes.add(parentNode);
+
+        var treeElement = this._treeOutline.findTreeElement(parentNode);
+        if (treeElement) {
+            var oldHasChildren = treeElement.hasChildren;
+            var oldShowInlineText = treeElement._showInlineText();
+            treeElement._updateHasChildren();
+            if (treeElement.hasChildren !== oldHasChildren || oldShowInlineText || treeElement._showInlineText())
+                this._nodeModified(parentNode);
+        }
+
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
-        this._recentlyModifiedParentNodes.add(parentNode);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
     _nodeModified: function(node)
     {
+        this._recentlyModifiedNodes.add(node);
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
-        this._recentlyModifiedNodes.add(node);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _documentUpdated: function(event)
     {
         var inspectedRootDocument = event.data;
 
         this._reset();
@@ skipping 12 matching lines @@
         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
         this._nodeModified(node);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _characterDataModified: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
+        this._parentNodeModified(node.parentNode);
         this._nodeModified(node);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _nodeInserted: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        var parentNode = /** @type {!WebInspector.DOMNode} */ (node.parentNode);
-        this._parentNodeModified(parentNode);
+        this._parentNodeModified(node.parentNode);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _nodeRemoved: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
         var parentNode = /** @type {!WebInspector.DOMNode} */ (event.data.parent);
         this._treeOutline._resetClipboardIfNeeded(node);
         this._parentNodeModified(parentNode);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _childNodeCountUpdated: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        var treeElement = this._treeOutline.findTreeElement(node);
-        if (treeElement) {
-            var oldHasChildren = treeElement.hasChildren;
-            treeElement._updateHasChildren();
-            if (treeElement.hasChildren !== oldHasChildren)
-                treeElement.updateTitle();
-        }
+        this._parentNodeModified(node);
     },
 
     _updateModifiedNodesSoon: function()
     {
         if (this._updateModifiedNodesTimeout)
             return;
         this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 50);
     },
 
     _updateModifiedNodes: function()
@@ skipping 18 matching lines @@
             var nodes = this._recentlyModifiedNodes.values();
             for (var i = 0, size = nodes.length; i < size; ++i) {
                 var nodeItem = this._treeOutline.findTreeElement(nodes[i]);
                 if (nodeItem)
                     nodeItem.updateTitle();
             }
 
             var parentNodes = this._recentlyModifiedParentNodes.values();
             for (var i = 0, size = parentNodes.length; i < size; ++i) {
                 var parentNodeItem = this._treeOutline.findTreeElement(parentNodes[i]);
-                if (parentNodeItem)
+                if (parentNodeItem && parentNodeItem.populated)
                     parentNodeItem.updateChildren();
             }
         }
 
         if (hidePanelWhileUpdating) {
             this._treeOutline.element.classList.remove("hidden");
             if (originalScrollTop)
                 treeOutlineContainerElement.scrollTop = originalScrollTop;
             this._treeOutline.updateSelection();
         }
@@ skipping 34 matching lines @@
         var treeOutline = new WebInspector.ElementsTreeOutline(node.target(), false, false);
         treeOutline.rootDOMNode = node;
         treeOutline.element.classList.add("outline-disclosure");
         if (!treeOutline.children[0].hasChildren)
             treeOutline.element.classList.add("single-node");
         treeOutline.setVisible(true);
         treeOutline.element.treeElementForTest = treeOutline.children[0];
         return treeOutline.element;
     }
 }