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

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

A tree item title was not updated if it had a single inline child text node.

R=vsevik

Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=184982

[vsevik, 2014-11-07 15:59:57]

lgtm

https://codereview.chromium.org/705263002/diff/1/Source/devtools/front_end/el...
File Source/devtools/front_end/elements/ElementsTreeOutline.js (right):

https://codereview.chromium.org/705263002/diff/1/Source/devtools/front_end/el...
Source/devtools/front_end/elements/ElementsTreeOutline.js:2452: if
(this._hasChildTreeElements() && !this.expanded) {
We can now replace these three ifs with a switch over display mode.

[apavlov, 2014-11-07 16:22:47]

https://codereview.chromium.org/705263002/diff/1/Source/devtools/front_end/el...
File Source/devtools/front_end/elements/ElementsTreeOutline.js (right):

https://codereview.chromium.org/705263002/diff/1/Source/devtools/front_end/el...
Source/devtools/front_end/elements/ElementsTreeOutline.js:2452: if
(this._hasChildTreeElements() && !this.expanded) {
On 2014/11/07 15:59:57, vsevik wrote:
> We can now replace these three ifs with a switch over display mode.

Done.

[apavlov, 2014-11-07 16:22:50]

The CQ bit was checked by apavlov@chromium.org

[commit-bot: I haz the power, 2014-11-07 16:23:21]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/705263002/20001

[commit-bot: I haz the power, 2014-11-07 16:23:40]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-11-07 16:23:50]

Failed to apply patch for
Source/devtools/front_end/elements/ElementsTreeOutline.js:
While running patch -p1 --forward --force --no-backup-if-mismatch;
  patching file Source/devtools/front_end/elements/ElementsTreeOutline.js
  Hunk #5 FAILED at 1383.
  Hunk #6 succeeded at 1547 (offset -25 lines).
  Hunk #7 succeeded at 2400 (offset -25 lines).
  Hunk #8 succeeded at 2424 (offset -25 lines).
  Hunk #9 succeeded at 2516 (offset -25 lines).
  Hunk #10 succeeded at 2694 (offset -25 lines).
  Hunk #11 succeeded at 2784 (offset -25 lines).
  1 out of 11 hunks FAILED -- saving rejects to file
Source/devtools/front_end/elements/ElementsTreeOutline.js.rej

Patch:       Source/devtools/front_end/elements/ElementsTreeOutline.js
Index: Source/devtools/front_end/elements/ElementsTreeOutline.js
diff --git a/Source/devtools/front_end/elements/ElementsTreeOutline.js
b/Source/devtools/front_end/elements/ElementsTreeOutline.js
index
da0cec6e1b602688b5d3ad3f3a3cf3c642f29588..dbd89b4c2f045e3be0272639279824b4c21a9682
100644
--- a/Source/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/elements/ElementsTreeOutline.js
@@ -1024,7 +1024,7 @@ WebInspector.ElementsTreeElement = function(node,
elementCloseTag)
     this._node = node;
 
     this._elementCloseTag = elementCloseTag;
-    this._updateHasChildren();
+    this._updateChildrenDisplayMode();
 
     if (this._node.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
         this._canAddAttributes = true;
@@ -1046,6 +1046,13 @@ WebInspector.ElementsTreeElement.EditTagBlacklist = [
     "html", "head", "body"
 ].keySet();
 
+/** @enum {number} */
+WebInspector.ElementsTreeElement.ChildrenDisplayMode = {
+    NoChildren: 0,
+    InlineText: 1,
+    HasChildren: 2
+}
+
 WebInspector.ElementsTreeElement.prototype = {
     /**
      * @return {!WebInspector.DOMNode}
@@ -1248,7 +1255,7 @@ WebInspector.ElementsTreeElement.prototype = {
     onpopulate: function()
     {
         this.populated = true;
-        if (this.children.length || !this.hasChildren)
+        if (this.children.length || !this._hasChildTreeElements())
             return;
 
         this.updateChildren();
@@ -1259,7 +1266,7 @@ WebInspector.ElementsTreeElement.prototype = {
      */
     updateChildren: function(fullRefresh)
     {
-        if (!this.hasChildren)
+        if (!this._hasChildTreeElements())
             return;
         console.assert(!this._elementCloseTag);
         this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh ||
false));
@@ -1376,7 +1383,7 @@ WebInspector.ElementsTreeElement.prototype = {
         this._adjustCollapsedRange();
 
         var lastChild = this.children[this.children.length - 1];
-        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.
@@ -1565,7 +1572,7 @@ WebInspector.ElementsTreeElement.prototype = {
         if (this._startEditingTarget(/** @type {!Element} */(event.target)))
             return false;
 
-        if (this.hasChildren && !this.expanded)
+        if (this._hasChildTreeElements() && !this.expanded)
             this.expand();
         return false;
     },
@@ -2418,7 +2425,7 @@ WebInspector.ElementsTreeElement.prototype = {
     _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:
@@ -2442,28 +2449,30 @@ WebInspector.ElementsTreeElement.prototype = {
 
                 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");
-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
                     info.hasChildren = false;
+                    this._buildTagDOM(info.titleDOM, tagName, true, false);
+                    break;
+
+                case
WebInspector.ElementsTreeElement.ChildrenDisplayMode.NoChildren:
+                    if (this.treeOutline.isXMLMimeType ||
!WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName])
+                        this._buildTagDOM(info.titleDOM, tagName, true, false);
+                    break;
                 }
                 break;
 
@@ -2532,24 +2541,6 @@ WebInspector.ElementsTreeElement.prototype = {
         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())
@@ -2728,9 +2719,45 @@ WebInspector.ElementsTreeElement.prototype = {
         return childCount;
     },
 
-    _updateHasChildren: function()
+    /**
+     * @return {boolean}
+     */
+    _hasChildTreeElements: function()
+    {
+        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()
     {
-        this.hasChildren = !this._elementCloseTag && !this._showInlineText() &&
this._visibleChildCount() > 0;
+        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
@@ -2782,10 +2809,9 @@ WebInspector.ElementsTreeUpdater.prototype = {
 
         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);
         }

[apavlov, 2014-11-07 16:26:06]

The CQ bit was checked by apavlov@chromium.org

[commit-bot: I haz the power, 2014-11-07 16:26:27]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/705263002/40001

[commit-bot: I haz the power, 2014-11-07 18:01:44]

Committed patchset #3 (id:40001) as 184982