DevTools: Make sure ElementsTreeOutline is correctly rendered when element's...

DevTools: Make sure ElementsTreeOutline is correctly rendered when element's hasChildren state changes.

R=pfeldman,apavlov

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

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

third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js

@@ -504,14 +504,19 @@ InspectorTest.dumpElementsTree = function(rootNode, depth, resultsArray)
 
 InspectorTest.expandElementsTree = function(callback)
 {
+    var expandedSomething = false;
     callback = InspectorTest.safeWrap(callback);
 
     function expand(treeItem)
     {
         var children = treeItem.children;
         for (var i = 0; children && i < children.length; ++i) {
-            children[i].expand();
-            expand(children[i]);
+            var child = children[i];
+            if (child.hasChildren && !child.expanded) {
+                child.expand();
+                expandedSomething = true;
+            }
+            expand(child);
         }
     }
 
@@ -519,7 +524,7 @@ InspectorTest.expandElementsTree = function(callback)
     {
         InspectorTest.firstElementsTreeOutline()._updateModifiedNodes();
         expand(InspectorTest.firstElementsTreeOutline());
-        callback();
+        callback(expandedSomething);
     }
     WebInspector.inspectorView.showPanel("elements");
     InspectorTest.findNode(function() { return false; }, onAllNodesAvailable);
@@ -571,23 +576,50 @@ InspectorTest.generateUndoTest = function(testBody)
         {
             InspectorTest.addResult("Post-action:");
             InspectorTest.dumpElementsTree(testNode);
+            InspectorTest.expandElementsTree(expandedCallback);
+
+            function expandedCallback(expandedSomething)
+            {
+                if (expandedSomething) {
+                    InspectorTest.addResult("== Expanded: ==");
+                    InspectorTest.dumpElementsTree(testNode);
+                }
                 WebInspector.domModel.undo(redo);
             }
+        }
 
         function redo()
         {
             InspectorTest.addResult("Post-undo (initial):");
             InspectorTest.dumpElementsTree(testNode);
+            InspectorTest.expandElementsTree(expandedCallback);
+
+            function expandedCallback(expandedSomething)
+            {
+                if (expandedSomething) {
+                    InspectorTest.addResult("== Expanded: ==");
+                    InspectorTest.dumpElementsTree(testNode);
+                }
                 WebInspector.domModel.redo(done);
             }
+        }
 
         function done()
         {
             InspectorTest.addResult("Post-redo (action):");
             InspectorTest.dumpElementsTree(testNode);
+            InspectorTest.expandElementsTree(expandedCallback);
+
+            function expandedCallback(expandedSomething)
+            {
+                if (expandedSomething) {
+                    InspectorTest.addResult("== Expanded: ==");
+                    InspectorTest.dumpElementsTree(testNode);
+                }
                 next();
             }
         }
+    }
     result.toString = function()
     {
         return testBody.toString();

third_party/WebKit/LayoutTests/inspector/elements/edit-dom-actions-expected.txt

@@ -14,8 +14,7 @@ Running: testRemove
       <div id="node-to-remove"></div>
   </div>
 ==== after ====
-- <div id="testRemove">
-  </div>
+  <div id="testRemove"></div>
 
 Running: testSetNodeName
 ==== before ====
@@ -143,8 +142,6 @@ Running: testEditScript
   </div>
 ==== after ====
 - <div id="testEditScript">
-    - <script id="node-to-edit-script">
-          var i = 0;\n    var j = 0;\n
-      </script>
+      <script id="node-to-edit-script">\n    var i = 0;\n    var j = 0;\n</script>
   </div>
 

third_party/WebKit/LayoutTests/inspector/elements/inline-style-title-expected.txt

@@ -5,5 +5,5 @@ Verifies that external change of inline style element updates its title.
     div { color: red }
 ​</style>​
 === inline style text after change ===
-<style id=​"inline-style">​…​</style>​
+<style id=​"inline-style">​span { border: 1px solid black }​</style>​
 

third_party/WebKit/LayoutTests/inspector/elements/insert-node-expected.txt

@@ -60,9 +60,7 @@ Running: testInsertFirstTextNode
       <div id="child1"></div>
       <div id="child-middle"></div>
       <div id="child2"></div>
-    - <div id="child3">
-          "First text"
-      </div>
+      <div id="child3">First text</div>
       <div id="child-after"></div>
       <div id="child-with-text" style="display: none;">Text</div>
   </div>

third_party/WebKit/LayoutTests/inspector/elements/remove-node-expected.txt

@@ -33,6 +33,5 @@ Running: testRemoveLast
 
 Running: testRemoveTheOnly
 ===== Removed the only =====
-- <div id="container">
-  </div>
+  <div id="container"></div>
 

third_party/WebKit/LayoutTests/inspector/elements/shadow-dom-modify-chardata-expected.txt

@@ -16,7 +16,7 @@ Running: testAppend
 - <div id="container">
     - <input type="text" id="input1">
         - #shadow-root (user-agent)
-            + <div id="inner-editor">…</div>
+              <div id="inner-editor">Bar</div>
       </input>
   </div>
 

third_party/WebKit/LayoutTests/inspector/elements/styles/pseudo-elements-expected.txt

@@ -71,9 +71,7 @@ Running: removeAfter
 
 Running: removeBefore
 - <div id="container">
-    - <div id="inspected">
-          "Text"
-      </div>
+      <div id="inspected">Text</div>
     - <div id="empty">
           ::before
           ::after
@@ -81,6 +79,14 @@ Running: removeBefore
   </div>
 
 Running: addAfter
+- <div id="container">
+    + <div id="inspected">…</div>
+    - <div id="empty">
+          ::before
+          ::after
+      </div>
+  </div>
+== Expanding: ==
 - <div id="container">
     - <div id="inspected">
           "Text"

third_party/WebKit/LayoutTests/inspector/elements/styles/pseudo-elements.html

@@ -153,7 +153,7 @@ function test()
 
         function addAfter(next)
         {
-            executeAndDumpTree("addAfterRule()", WebInspector.DOMModel.Events.NodeInserted, next);
+            executeAndDumpTree("addAfterRule()", WebInspector.DOMModel.Events.NodeInserted, expandAndDumpTree.bind(this, next));
         },
 
         function addBefore(next)
@@ -205,6 +205,17 @@ function test()
         }
     }
 
+    function expandAndDumpTree(next)
+    {
+          InspectorTest.addResult("== Expanding: ==");
+          InspectorTest.expandElementsTree(callback);
+          function callback()
+          {
+              InspectorTest.dumpElementsTree(containerNode);
+              next();
+          }
+    }
+
     function selectNodeAndDumpStyles(id, pseudoTypeName, callback)
     {
         if (pseudoTypeName)

third_party/WebKit/LayoutTests/inspector/elements/undo-dom-edits-2-expected.txt

@@ -2,6 +2,7 @@ Tests that DOM modifications done in the Elements panel are undoable (Part 2).
 
 
 Running: testSetUp
+Setting up
 
 Running: testSetAttribute
 Initial:

third_party/WebKit/LayoutTests/inspector/elements/undo-dom-edits-2.html

@@ -9,9 +9,15 @@ function test()
     var testSuite = [];
 
     function testSetUp(next)
+    {
+        InspectorTest.addResult("Setting up");
+        InspectorTest.expandElementsTree(callback);
+
+        function callback()
         {
             InspectorTest.expandElementsTree(next);
         }
+    }
     testSuite.push(testSetUp);
 
 

third_party/WebKit/LayoutTests/inspector/elements/undo-dom-edits-expected.txt

@@ -2,6 +2,7 @@ Tests that DOM modifications done in the Elements panel are undoable.
 
 
 Running: testSetUp
+Setting up
 
 Running: testRemove
 Initial:
@@ -9,15 +10,15 @@ Initial:
       <div id="node-to-remove"></div>
   </div>
 Post-action:
-- <div id="testRemove">
-  </div>
+  <div id="testRemove"></div>
 Post-undo (initial):
++ <div id="testRemove">…</div>
+== Expanded: ==
 - <div id="testRemove">
       <div id="node-to-remove"></div>
   </div>
 Post-redo (action):
-- <div id="testRemove">
-  </div>
+  <div id="testRemove"></div>
 
 Running: testSetNodeName
 Initial:
@@ -63,17 +64,29 @@ Initial:
       </div>
   </div>
 Post-action:
++ <div id="testEditAsHTML">…</div>
+== Expanded: ==
 - <div id="testEditAsHTML">
-    + <div id="node-to-edit-as-html">…</div>
+    - <div id="node-to-edit-as-html">
+          <div id="span2">Text2</div>
+      </div>
       <span>Second node</span>
   </div>
 Post-undo (initial):
++ <div id="testEditAsHTML">…</div>
+== Expanded: ==
 - <div id="testEditAsHTML">
-    + <div id="node-to-edit-as-html">…</div>
+    - <div id="node-to-edit-as-html">
+          <span id="span">Text</span>
+      </div>
   </div>
 Post-redo (action):
++ <div id="testEditAsHTML">…</div>
+== Expanded: ==
 - <div id="testEditAsHTML">
-    + <div id="node-to-edit-as-html">…</div>
+    - <div id="node-to-edit-as-html">
+          <div id="span2">Text2</div>
+      </div>
       <span>Second node</span>
   </div>
 

third_party/WebKit/LayoutTests/inspector/elements/undo-dom-edits.html

@@ -9,9 +9,15 @@ function test()
     var testSuite = [];
 
     function testSetUp(next)
+    {
+        InspectorTest.addResult("Setting up");
+        InspectorTest.expandElementsTree(callback);
+
+        function callback()
         {
             InspectorTest.expandElementsTree(next);
         }
+    }
     testSuite.push(testSetUp);
 
 

third_party/WebKit/LayoutTests/inspector/elements/update-shadowdom-expected.txt

@@ -2,7 +2,7 @@ This test confirms that updating the shadow dom is reflected to the Inspector.
 
 - <div id="container">
     - <div id="host">
-        - #shadow-root
+          #shadow-root
       </div>
   </div>
 

third_party/WebKit/LayoutTests/inspector/elements/user-properties-expected.txt

@@ -120,8 +120,7 @@ aNode removed
           <p>\nTests that DOMNode properly tracks own and descendants' user properties.\n</p>
         - <div id="container"> [descendantUserAttributeCounters:[attr1=1,attr2=1]]
               <div id="child1"></div>
-            - <div id="child2"> [userProperties:[attr2=anotherValue,attr1=true]]
-              </div>
+              <div id="child2"></div> [userProperties:[attr2=anotherValue,attr1=true]]
           </div>
         + <div>…</div>
       </body>

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

@@ -1198,7 +1198,8 @@ WebInspector.ElementsTreeElement.prototype = {
 
     onpopulate: function()
     {
-        if (this.children.length || this._showInlineText() || this._elementCloseTag)
+        this.populated = true;
+        if (this.children.length || !this.hasChildren)
             return;
 
         this.updateChildren();
@@ -1209,8 +1210,9 @@ WebInspector.ElementsTreeElement.prototype = {
      */
     updateChildren: function(fullRefresh)
     {
-        if (this._elementCloseTag)
+        if (!this.hasChildren)
             return;
+        console.assert(!this._elementCloseTag);
         this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh));
     },
 
@@ -1324,7 +1326,7 @@ WebInspector.ElementsTreeElement.prototype = {
         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)
             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.
@@ -2348,6 +2350,7 @@ WebInspector.ElementsTreeElement.prototype = {
                 // 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;
@@ -2663,13 +2666,25 @@ WebInspector.ElementsTreeUpdater.prototype = {
     },
 
     /**
-     * @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);
     },
 
     /**
@@ -2677,9 +2692,9 @@ WebInspector.ElementsTreeUpdater.prototype = {
      */
     _nodeModified: function(node)
     {
+        this._recentlyModifiedNodes.add(node);
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
-        this._recentlyModifiedNodes.add(node);
     },
 
     /**
@@ -2712,6 +2727,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
     _characterDataModified: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
+        this._parentNodeModified(node.parentNode);
         this._nodeModified(node);
     },
 
@@ -2721,8 +2737,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
     _nodeInserted: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        var parentNode = /** @type {!WebInspector.DOMNode} */ (node.parentNode);
-        this._parentNodeModified(parentNode);
+        this._parentNodeModified(node.parentNode);
     },
 
     /**
@@ -2742,13 +2757,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
     _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()
@@ -2787,7 +2796,7 @@ WebInspector.ElementsTreeUpdater.prototype = {
             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();
             }
         }