DevTools: [Elements] Fix updates of the DOM tree upon inline text node removal

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 1006 matching lines @@
  * @param {!WebInspector.DOMNode} node
  * @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;
-    this._updateHasChildren();
+    this._updateChildrenDisplayMode();
 
     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.
 WebInspector.ElementsTreeElement.ForbiddenClosingTagElements = [
     "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
     "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr"
 ].keySet();
 
 // These tags we do not allow editing their tag name.
 WebInspector.ElementsTreeElement.EditTagBlacklist = [
     "html", "head", "body"
 ].keySet();
 
+/** @enum {number} */
+WebInspector.ElementsTreeElement.ChildrenDisplayMode = {
+    NoChildren: 0,
+    InlineText: 1,
+    HasChildren: 2
+}
+
 WebInspector.ElementsTreeElement.prototype = {
     /**
      * @return {!WebInspector.DOMNode}
      */
     node: function()
     {
         return this._node;
     },
 
     /**
@@ skipping 182 matching lines @@
         if (!links)
             return;
 
         for (var i = 0; i < links.length; ++i)
             links[i].preventFollowOnDoubleClick = true;
     },
 
     onpopulate: function()
     {
         this.populated = true;
-        if (this.children.length || !this.hasChildren)
+        if (this.children.length || !this._hasChildTreeElements())
             return;
 
         this.updateChildren();
     },
 
     /**
      * @param {boolean=} fullRefresh
      */
     updateChildren: function(fullRefresh)
     {
-        if (!this.hasChildren)
+        if (!this._hasChildTreeElements())
             return;
         console.assert(!this._elementCloseTag);
         this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh || false));
     },
 
     /**
      * @param {!WebInspector.DOMNode} child
      * @param {number} index
      * @param {boolean=} closingTag
      * @return {!WebInspector.ElementsTreeElement}
@@ skipping 72 matching lines @@
                     elementToSelect = newElement;
                 // If a node was inserted in the middle of existing list dynamically we might need to increase the limit.
                 if (this.expandedChildCount > this.expandedChildrenLimit)
                     this.expandedChildrenLimit++;
             }
         }
 
         this.updateTitle();
         this._adjustCollapsedRange();
 
-        if (this._node.nodeType() === Node.ELEMENT_NODE && this.hasChildren)
+        if (this._node.nodeType() === Node.ELEMENT_NODE && this._hasChildTreeElements())
             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 167 matching lines @@
      * @return {boolean}
      */
     ondblclick: function(event)
     {
         if (this._editing || this._elementCloseTag)
             return false;
 
         if (this._startEditingTarget(/** @type {!Element} */(event.target)))
             return false;
 
-        if (this.hasChildren && !this.expanded)
+        if (this._hasChildTreeElements() && !this.expanded)
             this.expand();
         return false;
     },
 
     /**
      * @return {boolean}
      */
     hasEditableNode: function()
     {
         return !this._node.isShadowRoot() && !this._node.ancestorUserAgentShadowRoot();
@@ skipping 832 matching lines @@
             result += text.substring(lastIndexAfterEntity);
         return {text: result || text, entityRanges: entityRanges};
     },
 
     /**
      * @param {function(string, string, string, boolean=, string=)=} linkify
      */
     _nodeTitleInfo: function(linkify)
     {
         var node = this._node;
-        var info = {titleDOM: createDocumentFragment(), hasChildren: this.hasChildren};
+        var info = {titleDOM: createDocumentFragment(), hasChildren: this._hasChildTreeElements()};
 
         switch (node.nodeType()) {
             case Node.ATTRIBUTE_NODE:
                 this._buildAttributeDOM(info.titleDOM, /** @type {string} */ (node.name), /** @type {string} */ (node.value), true);
                 break;
 
             case Node.ELEMENT_NODE:
                 var pseudoType = node.pseudoType();
                 if (pseudoType) {
                     this._buildPseudoElementDOM(info.titleDOM, pseudoType);
                     info.hasChildren = false;
                     break;
                 }
 
                 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 showInlineText = this._showInlineText() && !this.hasChildren;
-                if (!this.expanded && !showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName])) {
-                    if (this.hasChildren) {
+                switch (this._childrenDisplayMode) {
+                case WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren:
+                    if (!this.expanded) {
                         var textNodeElement = info.titleDOM.createChild("span", "webkit-html-text-node bogus");
                         textNodeElement.textContent = "\u2026";
                         info.titleDOM.createTextChild("\u200B");
+                        this._buildTagDOM(info.titleDOM, tagName, true, false);
                     }
-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
-                }
+                    break;
 
-                // 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);
+                case WebInspector.ElementsTreeElement.ChildrenDisplayMode.InlineText:
                     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.createTextChild("\u200B");
+                    info.hasChildren = false;
                     this._buildTagDOM(info.titleDOM, tagName, true, false);
-                    info.hasChildren = false;
+                    break;
+
+                case WebInspector.ElementsTreeElement.ChildrenDisplayMode.NoChildren:
+                    if (this.treeOutline.isXMLMimeType || !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName])
+                        this._buildTagDOM(info.titleDOM, tagName, true, false);
+                    break;
                 }
                 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();
 
                     var javascriptSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/javascript", true);
                     javascriptSyntaxHighlighter.syntaxHighlightNode(newNode);
@@ skipping 48 matching lines @@
                     }
                 }
                 fragmentElement.textContent = node.nodeNameInCorrectCase().collapseWhitespace();
                 break;
             default:
                 info.titleDOM.createTextChild(node.nodeNameInCorrectCase().collapseWhitespace());
         }
         return info;
     },
 
-    /**
-     * @return {boolean}
-     */
-    _showInlineText: function()
-    {
-        if (this._node.importedDocument() || this._node.templateContent() || this._visibleShadowRoots().length > 0 || this._node.hasPseudoElements())
-            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;
-        var maxInlineTextChildLength = 80;
-        if (textChild.nodeValue().length < maxInlineTextChildLength)
-            return true;
-        return false;
-    },
-
     remove: function()
     {
         if (this._node.pseudoType())
             return;
         var parentElement = this.parent;
         if (!parentElement)
             return;
 
         var self = this;
         function removeNodeCallback(error)
@@ skipping 158 matching lines @@
         var childCount = this._node.childNodeCount() + this._visibleShadowRoots().length;
         if (this._node.importedDocument())
             ++childCount;
         if (this._node.templateContent())
             ++childCount;
         for (var pseudoType in this._node.pseudoElements())
             ++childCount;
         return childCount;
     },
 
-    _updateHasChildren: function()
+    /**
+     * @return {boolean}
+     */
+    _hasChildTreeElements: function()
     {
-        this.hasChildren = !this._elementCloseTag && !this._showInlineText() && this._visibleChildCount() > 0;
+        return this._childrenDisplayMode === WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    _canShowInlineText: function()
+    {
+        if (this._node.importedDocument() || this._node.templateContent() || this._visibleShadowRoots().length > 0 || this._node.hasPseudoElements())
+            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;
+        var maxInlineTextChildLength = 80;
+        if (textChild.nodeValue().length < maxInlineTextChildLength)
+            return true;
+        return false;
+    },
+
+    _updateChildrenDisplayMode: function()
+    {
+        var showInlineText = this._canShowInlineText();
+        var hasChildren = !this._elementCloseTag && this._visibleChildCount() > 0;
+
+        if (showInlineText)
+            this._childrenDisplayMode = WebInspector.ElementsTreeElement.ChildrenDisplayMode.InlineText;
+        else if (hasChildren)
+            this._childrenDisplayMode = WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren;
+        else
+            this._childrenDisplayMode = WebInspector.ElementsTreeElement.ChildrenDisplayMode.NoChildren;
+
+        this.setHasChildren(this._childrenDisplayMode === WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren);
     },
 
     __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.DOMModel} domModel
  * @param {!WebInspector.ElementsTreeOutline} treeOutline
  */
@@ skipping 31 matching lines @@
      * @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())
+            var oldDisplayMode = treeElement._childrenDisplayMode;
+            treeElement._updateChildrenDisplayMode();
+            if (treeElement._childrenDisplayMode !== oldDisplayMode)
                 this._nodeModified(parentNode);
         }
 
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
@@ skipping 175 matching lines @@
                 treeOutline.rootDOMNode = node;
                 if (!treeOutline.children[0].hasChildren)
                     treeOutline._element.classList.add("single-node");
                 treeOutline.setVisible(true);
                 treeOutline.element.treeElementForTest = treeOutline.children[0];
                 resolve(treeOutline.element);
             }
         }
     }
 }