DevTools: [Elements] Highlight DOM updates

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 1035 matching lines @@
     "html", "head", "body"
 ].keySet();
 
 /** @enum {number} */
 WebInspector.ElementsTreeElement.ChildrenDisplayMode = {
     NoChildren: 0,
     InlineText: 1,
     HasChildren: 2
 }
 
+/**
+ * @param {!WebInspector.ElementsTreeElement} treeElement
+ */
+WebInspector.ElementsTreeElement.animateOnDOMUpdate = function(treeElement)
+{
+    var tagName = treeElement.listItemElement.querySelector(".webkit-html-tag-name");
+    WebInspector.runCSSAnimationOnce(tagName || treeElement.listItemElement, "dom-update-highlight");
+}
+
 WebInspector.ElementsTreeElement.prototype = {
     /**
      * @return {!WebInspector.DOMNode}
      */
     node: function()
     {
         return this._node;
     },
 
     /**
@@ skipping 223 matching lines @@
     moveChild: function(child, targetIndex)
     {
         var wasSelected = child.selected;
         this.removeChild(child);
         this.insertChild(child, targetIndex);
         if (wasSelected)
             child.select();
     },
 
     /**
+     * @param {!WebInspector.DOMNode=} node
+     * @return {!WebInspector.ElementsTreeUpdater.UpdateInfo|undefined}
+     */
+    _updateInfo: function(node)
+    {
+        if (!WebInspector.settings.highlightDOMUpdates.get())
+            return undefined;
+        var effectiveNode = node || this._node;
+        var updater = this.treeOutline._elementsTreeUpdater;
+        return updater._recentlyModifiedNodes.get(effectiveNode) || updater._recentlyModifiedParentNodes.get(effectiveNode);
+    },
+
+    /**
      * @param {boolean} fullRefresh
      * @param {?Array.<!WebInspector.DOMNode>} children
      */
     _updateChildren: function(fullRefresh, children)
     {
         if (!children || this._updateChildrenInProgress || !this.treeOutline._visible)
             return;
 
         this._updateChildrenInProgress = true;
         var selectedNode = this.treeOutline.selectedDOMNode();
@@ skipping 32 matching lines @@
         var elementToSelect;
         var visibleChildren = this._visibleChildren();
         for (var i = 0; i < visibleChildren.length && i < this.expandedChildrenLimit; ++i) {
             var child = visibleChildren[i];
             if (existingTreeElements.has(child)) {
                 // If an existing element was found, just move it.
                 this.moveChild(existingTreeElements.get(child), i);
             } else {
                 // No existing element found, insert a new element.
                 var newElement = this.insertChildElement(child, i);
+                var updateRecord = this._updateInfo();
+                if (updateRecord)
+                    WebInspector.ElementsTreeElement.animateOnDOMUpdate(newElement);
                 if (child === selectedNode)
                     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.updateTitle(false);

[pfeldman, 2014/11/10 15:38:20]

revert

[apavlov, 2014/11/10 16:07:37]

Done.

         this._adjustCollapsedRange();
 
         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;
@@ skipping 777 matching lines @@
 
         // Remaining cases are single line non-expanded elements with a closing
         // tag, or HTML elements without a closing tag (such as <br>). Return
         // null in the case where there isn't a closing tag.
         var tags = this.listItemElement.getElementsByClassName("webkit-html-tag");
         return (tags.length === 1 ? null : tags[tags.length-1]);
     },
 
     /**
      * @param {boolean=} onlySearchQueryChanged
+     * @param {!WebInspector.ElementsTreeUpdater.UpdateInfo=} updates
      */
-    updateTitle: function(onlySearchQueryChanged)
+    updateTitle: function(onlySearchQueryChanged, updates)

[pfeldman, 2014/11/10 15:38:20]

revert

[apavlov, 2014/11/10 16:07:37]

Done.

     {
         // If we are editing, return early to prevent canceling the edit.
         // After editing is committed updateTitle will be called.
         if (this._editing)
             return;
 
         if (onlySearchQueryChanged) {
             if (this._highlightResult)
                 this._updateSearchHighlight(false);
         } else {
@@ skipping 109 matching lines @@
         var hasText = (forceValue || value.length > 0);
         var attrSpanElement = parentElement.createChild("span", "webkit-html-attribute");
         var attrNameElement = attrSpanElement.createChild("span", "webkit-html-attribute-name");
         attrNameElement.textContent = name;
 
         if (hasText)
             attrSpanElement.createTextChild("=\u200B\"");
 
         var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
 
+        var updates = this._updateInfo();
+        if (updates && updates.isAttributeModified(name))
+            WebInspector.runCSSAnimationOnce(hasText ? attrValueElement : attrNameElement, "dom-update-highlight");
+
         /**
          * @this {WebInspector.ElementsTreeElement}
          * @param {string} value
          * @return {!Element}
          */
         function linkifyValue(value)
         {
             var rewrittenHref = node.resolveURL(value);
             if (rewrittenHref === null) {
                 var span = createElement("span");
@@ skipping 51 matching lines @@
     _buildTagDOM: function(parentElement, tagName, isClosingTag, isDistinctTreeElement, linkify)
     {
         var node = this._node;
         var classes = [ "webkit-html-tag" ];
         if (isClosingTag && isDistinctTreeElement)
             classes.push("close");
         var tagElement = parentElement.createChild("span", classes.join(" "));
         tagElement.createTextChild("<");
         var tagNameElement = tagElement.createChild("span", isClosingTag ? "" : "webkit-html-tag-name");
         tagNameElement.textContent = (isClosingTag ? "/" : "") + tagName;
-        if (!isClosingTag && node.hasAttributes()) {
-            var attributes = node.attributes();
-            for (var i = 0; i < attributes.length; ++i) {
-                var attr = attributes[i];
-                tagElement.createTextChild(" ");
-                this._buildAttributeDOM(tagElement, attr.name, attr.value, false, node, linkify);
+        if (!isClosingTag) {
+            if (node.hasAttributes()) {
+                var attributes = node.attributes();
+                for (var i = 0; i < attributes.length; ++i) {
+                    var attr = attributes[i];
+                    tagElement.createTextChild(" ");
+                    this._buildAttributeDOM(tagElement, attr.name, attr.value, false, node, linkify);
+                }
             }
+            var hasUpdates;
+            var updates = this._updateInfo();
+            if (updates) {
+                hasUpdates |= updates.hasRemovedAttributes();
+                var hasInlineText = this._childrenDisplayMode === WebInspector.ElementsTreeElement.ChildrenDisplayMode.InlineText;
+
+                hasUpdates |= (!hasInlineText || this.expanded) && updates.hasChangedChildren();
+
+                // Highlight the tag name, as the inserted node is not visible (either child of a collapsed tree element or empty inline text).
+                hasUpdates |= !this.expanded && updates.hasInsertedNodes() && (!hasInlineText || this._node.firstChild.nodeValue().length === 0);
+
+                // Highlight the tag name, as the inline text node value has been cleared.
+                // The respective empty node will be highlighted, but the highlight will not be visible to the user.
+                hasUpdates |= hasInlineText && (updates.isCharDataModified() || updates.hasChangedChildren()) && this._node.firstChild.nodeValue().length === 0;
+            }
+            if (hasUpdates)
+                WebInspector.runCSSAnimationOnce(tagNameElement, "dom-update-highlight");
         }
+
         tagElement.createTextChild(">");
         parentElement.createTextChild("\u200B");
     },
 
     /**
      * @param {string} text
      * @return {!{text: string, entityRanges: !Array.<!WebInspector.SourceRange>}}
      */
     _convertWhitespaceToEntities: function(text)
     {
         var result = "";
-        var resultLength = 0;
         var lastIndexAfterEntity = 0;
         var entityRanges = [];
         var charToEntity = WebInspector.ElementsTreeOutline.MappedCharToEntity;
         for (var i = 0, size = text.length; i < size; ++i) {
             var char = text.charAt(i);
             if (charToEntity[char]) {
                 result += text.substring(lastIndexAfterEntity, i);
                 var entityValue = "&" + charToEntity[char] + ";";
                 entityRanges.push({offset: result.length, length: entityValue.length});
                 result += entityValue;
@@ skipping 46 matching lines @@
                     break;
 
                 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);
+                    var updates = this._updateInfo();
+                    if (updates && (updates.hasInsertedNodes() || updates.hasChangedChildren()))
+                        WebInspector.runCSSAnimationOnce(textNodeElement, "dom-update-highlight");
+                    updates = this._updateInfo(this._node.firstChild);
+                    if (updates && updates.isCharDataModified())
+                        WebInspector.runCSSAnimationOnce(textNodeElement, "dom-update-highlight");
                     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);
                 } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "style") {
                     var newNode = info.titleDOM.createChild("span", "webkit-html-text-node webkit-html-css-node");
                     newNode.textContent = node.nodeValue();
 
                     var cssSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/css", true);
                     cssSyntaxHighlighter.syntaxHighlightNode(newNode);
                 } else {
                     info.titleDOM.createTextChild("\"");
                     var textNodeElement = info.titleDOM.createChild("span", "webkit-html-text-node");
                     var result = this._convertWhitespaceToEntities(node.nodeValue());
                     textNodeElement.textContent = result.text;
                     WebInspector.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, "webkit-html-entity-value");
                     info.titleDOM.createTextChild("\"");
+                    var updates = this._updateInfo();
+                    if (updates && updates.isCharDataModified())
+                        WebInspector.runCSSAnimationOnce(textNodeElement, "dom-update-highlight");
                 }
                 break;
 
             case Node.COMMENT_NODE:
                 var commentElement = info.titleDOM.createChild("span", "webkit-html-comment");
                 commentElement.createTextChild("<!--" + node.nodeValue() + "-->");
                 break;
 
             case Node.DOCUMENT_TYPE_NODE:
                 var docTypeElement = info.titleDOM.createChild("span", "webkit-html-doctype");
                 docTypeElement.createTextChild("<!DOCTYPE " + node.nodeName());
                 if (node.publicId) {
                     docTypeElement.createTextChild(" PUBLIC \"" + node.publicId + "\"");
                     if (node.systemId)
                         docTypeElement.createTextChild(" \"" + node.systemId + "\"");
                 } else if (node.systemId)
                     docTypeElement.createTextChild(" SYSTEM \"" + node.systemId + "\"");
 
                 if (node.internalSubset)
                     docTypeElement.createTextChild(" [" + node.internalSubset + "]");
 
                 docTypeElement.createTextChild(">");
                 break;
 
             case Node.CDATA_SECTION_NODE:
                 var cdataElement = info.titleDOM.createChild("span", "webkit-html-text-node");
                 cdataElement.createTextChild("<![CDATA[" + node.nodeValue() + "]]>");
                 break;
+
             case Node.DOCUMENT_FRAGMENT_NODE:
                 var fragmentElement = info.titleDOM.createChild("span", "webkit-html-fragment");
                 if (node.isInShadowTree()) {
                     var shadowRootType = node.shadowRootType();
                     if (shadowRootType) {
                         info.shadowRoot = true;
                         fragmentElement.classList.add("shadow-root");
                     }
                 }
                 fragmentElement.textContent = node.nodeNameInCorrectCase().collapseWhitespace();
@@ skipping 228 matching lines @@
 
 /**
  * @constructor
  * @param {!WebInspector.DOMModel} domModel
  * @param {!WebInspector.ElementsTreeOutline} treeOutline
  */
 WebInspector.ElementsTreeUpdater = function(domModel, treeOutline)
 {
     domModel.addEventListener(WebInspector.DOMModel.Events.NodeInserted, this._nodeInserted, this);
     domModel.addEventListener(WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
-    domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
-    domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributeModified, this);
+    domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeRemoved, this);
     domModel.addEventListener(WebInspector.DOMModel.Events.CharacterDataModified, this._characterDataModified, this);
     domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
     domModel.addEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
 
     this._domModel = domModel;
     this._treeOutline = treeOutline;
-    /** @type {!Set.<!WebInspector.DOMNode>} */
-    this._recentlyModifiedNodes = new Set();
-    /** @type {!Set.<!WebInspector.DOMNode>} */
-    this._recentlyModifiedParentNodes = new Set();
+    /** @type {!Map.<!WebInspector.DOMNode, !WebInspector.ElementsTreeUpdater.UpdateInfo>} */
+    this._recentlyModifiedNodes = new Map();
+    /** @type {!Map.<!WebInspector.DOMNode, !WebInspector.ElementsTreeUpdater.UpdateInfo>} */
+    this._recentlyModifiedParentNodes = new Map();
 }
 
 WebInspector.ElementsTreeUpdater.prototype = {
     dispose: function()
     {
         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.AttrModified, this._attributeModified, this);
+        this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeRemoved, 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
      */
     _parentNodeModified: function(parentNode)

[pfeldman, 2014/11/10 15:38:20]

annotate

[apavlov, 2014/11/10 16:07:37]

Done.

     {
         if (!parentNode)
             return;
-        this._recentlyModifiedParentNodes.add(parentNode);
+
+        var record = this._recentlyModifiedParentNodes.get(parentNode);
+        if (!record) {
+            record = new WebInspector.ElementsTreeUpdater.UpdateInfo();
+            this._recentlyModifiedParentNodes.set(parentNode, record);
+        }
 
         var treeElement = this._treeOutline.findTreeElement(parentNode);
         if (treeElement) {
             var oldDisplayMode = treeElement._childrenDisplayMode;
             treeElement._updateChildrenDisplayMode();
             if (treeElement._childrenDisplayMode !== oldDisplayMode)
-                this._nodeModified(parentNode);
+                this._nodeModified(parentNode).childrenModified();
         }
 
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
+
+        return record;
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
     _nodeModified: function(node)

[pfeldman, 2014/11/10 15:38:20]

annotate

[apavlov, 2014/11/10 16:07:37]

Done.

     {
-        this._recentlyModifiedNodes.add(node);
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
+        var record = this._recentlyModifiedNodes.get(node);
+        if (!record) {
+            record = new WebInspector.ElementsTreeUpdater.UpdateInfo();
+            this._recentlyModifiedNodes.set(node, record);
+        }
+        return record;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _documentUpdated: function(event)
     {
         var inspectedRootDocument = event.data;
 
         this._reset();
 
         if (!inspectedRootDocument)
             return;
 
         this._treeOutline.rootDOMNode = inspectedRootDocument;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
-    _attributesUpdated: function(event)
+    _attributeModified: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
-        this._nodeModified(node);
+        this._nodeModified(node).attributeModified(event.data.name);
     },
 
     /**
+     * @param {!WebInspector.Event} event
+     */
+    _attributeRemoved: function(event)
+    {
+        var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
+        this._nodeModified(node).attributeRemoved(event.data.name);
+    },
+
+    /**
      * @param {!WebInspector.Event} event
      */
     _characterDataModified: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        this._parentNodeModified(node.parentNode);
-        this._nodeModified(node);
+        this._parentNodeModified(node.parentNode).charDataModified();
+        this._nodeModified(node).charDataModified();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _nodeInserted: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        this._parentNodeModified(node.parentNode);
+        this._parentNodeModified(node.parentNode).nodeInserted(node);
     },
 
     /**
      * @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);
+        this._parentNodeModified(parentNode).childrenModified();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _childNodeCountUpdated: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
         this._parentNodeModified(node);
     },
 
     _updateModifiedNodesSoon: function()
     {
         if (this._updateModifiedNodesTimeout)
             return;
         this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 50);
     },
 
     _updateModifiedNodes: function()
     {
         if (this._updateModifiedNodesTimeout) {
             clearTimeout(this._updateModifiedNodesTimeout);
             delete this._updateModifiedNodesTimeout;
         }
 
-        var updatedNodes = this._recentlyModifiedNodes.valuesArray().concat(this._recentlyModifiedParentNodes.valuesArray());
+        var updatedNodes = this._recentlyModifiedNodes.keysArray().concat(this._recentlyModifiedParentNodes.keysArray());
         var hidePanelWhileUpdating = updatedNodes.length > 10;
         if (hidePanelWhileUpdating) {
             var treeOutlineContainerElement = this._treeOutline.element.parentNode;
             var originalScrollTop = treeOutlineContainerElement ? treeOutlineContainerElement.scrollTop : 0;
             this._treeOutline._element.classList.add("hidden");
         }
 
         if (this._treeOutline._rootDOMNode && this._recentlyModifiedParentNodes.has(this._treeOutline._rootDOMNode)) {
             // Document's children have changed, perform total update.
             this._treeOutline.update();
         } else {
-            var nodes = this._recentlyModifiedNodes.valuesArray();
+            var nodes = this._recentlyModifiedNodes.keysArray();

[vsevik, 2014/11/10 16:00:51]

Let's switch to for-of while you are here.

[apavlov, 2014/11/10 16:07:37]

Done.

             for (var i = 0, size = nodes.length; i < size; ++i) {
                 var nodeItem = this._treeOutline.findTreeElement(nodes[i]);
                 if (nodeItem)
-                    nodeItem.updateTitle();
+                    nodeItem.updateTitle(false);
             }
 
-            var parentNodes = this._recentlyModifiedParentNodes.valuesArray();
+            var parentNodes = this._recentlyModifiedParentNodes.keysArray();

[vsevik, 2014/11/10 16:00:51]

Let's switch to for-of while you are here.

[apavlov, 2014/11/10 16:07:37]

Done.

             for (var i = 0, size = parentNodes.length; i < size; ++i) {
                 var parentNodeItem = this._treeOutline.findTreeElement(parentNodes[i]);
                 if (parentNodeItem && parentNodeItem.populated)
-                    parentNodeItem.updateChildren();
+                    parentNodeItem.updateChildren(false);
             }
         }
 
         if (hidePanelWhileUpdating) {
             this._treeOutline._element.classList.remove("hidden");
             if (originalScrollTop)
                 treeOutlineContainerElement.scrollTop = originalScrollTop;
             this._treeOutline.updateSelection();
         }
         this._recentlyModifiedNodes.clear();
         this._recentlyModifiedParentNodes.clear();
         this._treeOutline._fireElementsTreeUpdated(updatedNodes);
     },
 
     _reset: function()
     {
         this._treeOutline.rootDOMNode = null;
         this._treeOutline.selectDOMNode(null, false);
         this._domModel.hideDOMNodeHighlight();
         this._recentlyModifiedNodes.clear();
         this._recentlyModifiedParentNodes.clear();
         delete this._treeOutline._clipboardNodeData;
     }
 }
 
 /**
  * @constructor
+ */
+WebInspector.ElementsTreeUpdater.UpdateInfo = function()
+{
+    this._removedAttributeCount = 0;

[pfeldman, 2014/11/10 15:38:20]

Can we use this._removedAttributes size?

[apavlov, 2014/11/10 16:07:37]

Done.

+}
+
+WebInspector.ElementsTreeUpdater.UpdateInfo.prototype = {
+    /**
+     * @param {string} attrName
+     */
+    attributeModified: function(attrName)
+    {
+        if (this._removedAttributes && this._removedAttributes.has(attrName)) {
+            this._removedAttributes.delete(attrName);
+            --this._removedAttributeCount;
+        }
+        if (!this._modifiedAttributes)
+            this._modifiedAttributes = /** @type {!Set.<string>} */ (new Set());
+        this._modifiedAttributes.add(attrName);
+    },
+
+    /**
+     * @param {string} attrName
+     */
+    attributeRemoved: function(attrName)
+    {
+        if (this._modifiedAttributes && this._modifiedAttributes.has(attrName))
+            this._modifiedAttributes.delete(attrName);
+        if (!this._removedAttributes)
+            this._removedAttributes = /** @type {!Set.<string>} */ (new Set());
+        this._removedAttributes.add(attrName);
+        ++this._removedAttributeCount;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    nodeInserted: function(node)
+    {
+        if (!this._insertedNodes)
+            this._insertedNodes = /** @type {!Set.<!WebInspector.DOMNode>} */ (new Set());
+        this._insertedNodes.add(/** @type {!WebInspector.DOMNode} */ (node));
+    },
+
+    charDataModified: function()
+    {
+        this._charDataModified = true;
+    },
+
+    childrenModified: function()
+    {
+        this._hasChangedChildren = true;
+    },
+
+    /**
+     * @param {string} attributeName
+     * @return {boolean}
+     */
+    isAttributeModified: function(attributeName)
+    {
+        return this._modifiedAttributes && this._modifiedAttributes.has(attributeName);
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasRemovedAttributes: function()
+    {
+        return !!this._removedAttributeCount;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasInsertedNodes: function()
+    {
+        return !!this._insertedNodes && !!this._insertedNodes.size;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isCharDataModified: function()
+    {
+        return !!this._charDataModified;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isNodeInserted: function(node)
+    {
+        return !!this._insertedNodes && this._insertedNodes.has(node);
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasChangedChildren: function()
+    {
+        return !!this._hasChangedChildren;
+    }
+}
+
+/**
+ * @enum {number}
+ */
+WebInspector.ElementsTreeUpdater.UpdateInfo.ChangeType = {

[pfeldman, 2014/11/10 15:38:20]

remove

[apavlov, 2014/11/10 16:07:37]

Done.

+    NoChange: 0,
+    AttrModified: 1,
+    AttrRemoved: 2,
+    ChildrenModified: 3,
+    NodeInserted: 4
+}
+
+/**
+ * @constructor
  * @implements {WebInspector.Renderer}
  */
 WebInspector.ElementsTreeOutline.Renderer = function()
 {
 }
 
 WebInspector.ElementsTreeOutline.Renderer.prototype = {
     /**
      * @param {!Object} object
      * @return {!Promise.<!Element>}
@@ skipping 30 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);
             }
         }
     }
 }