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 1000 matching lines @@
             return WebInspector.UIString("%d descendant with forced state", descendantCount);
         return WebInspector.UIString("%d descendants with forced state", descendantCount);
     }
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} elementCloseTag
+ * @param {boolean=} isUpdated
  */
-WebInspector.ElementsTreeElement = function(node, elementCloseTag)
+WebInspector.ElementsTreeElement = function(node, elementCloseTag, isUpdated)
 {
     // The title will be updated in onattach.
     TreeElement.call(this, "", node);
     this._node = node;
 
     this._elementCloseTag = elementCloseTag;
     this._updateHasChildren();
 
     if (this._node.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
         this._canAddAttributes = true;
+    this._isUpdated = isUpdated;
     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",
@@ skipping 101 matching lines @@
         return this._expandedChildrenLimit;
     },
 
     set expandedChildrenLimit(x)
     {
         if (this._expandedChildrenLimit === x)
             return;
 
         this._expandedChildrenLimit = x;
         if (this.treeOutline && !this._updateChildrenInProgress)
-            this._updateChildren(true, this.children);
+            this._updateChildren(true, undefined, this.children);
     },
 
     get expandedChildCount()
     {
         var count = this.children.length;
         if (count && this.children[count - 1]._elementCloseTag)
             count--;
         if (count && this.children[count - 1].expandAllButton)
             count--;
         return count;
     },
 
     /**
      * @param {!WebInspector.DOMNode} child
      * @return {?WebInspector.ElementsTreeElement}
      */
     _showChild: function(child)
     {
         if (this._elementCloseTag)
             return null;
 
         var index = this._visibleChildren().indexOf(child);
         if (index === -1)
             return null;
 
         if (index >= this.expandedChildrenLimit) {
             this._expandedChildrenLimit = index + 1;
-            this._updateChildren(true, this.children);
+            this._updateChildren(true, undefined, this.children);
         }
 
         // Whether index-th child is visible in the children tree
         return this.expandedChildCount > index ? this.children[index] : null;
     },
 
     updateSelection: function()
     {
         var listItemElement = this.listItemElement;
         if (!listItemElement)
@@ skipping 44 matching lines @@
     {
         this.populated = true;
         if (this.children.length || !this.hasChildren)
             return;
 
         this.updateChildren();
     },
 
     /**
      * @param {boolean=} fullRefresh
+     * @param {!WebInspector.ElementsTreeUpdater.Record=} updates
      */
-    updateChildren: function(fullRefresh)
+    updateChildren: function(fullRefresh, updates)
     {
         if (!this.hasChildren)
             return;
         console.assert(!this._elementCloseTag);
-        this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh || false));
+        this._node.getChildNodes(this._updateChildren.bind(this, fullRefresh || false, updates));
     },
 
     /**
      * @param {!WebInspector.DOMNode} child
      * @param {number} index
      * @param {boolean=} closingTag
+     * @param {boolean=} isUpdated
      * @return {!WebInspector.ElementsTreeElement}
      */
-    insertChildElement: function(child, index, closingTag)
+    insertChildElement: function(child, index, closingTag, isUpdated)
     {
-        var newElement = new WebInspector.ElementsTreeElement(child, closingTag);
+        var newElement = new WebInspector.ElementsTreeElement(child, closingTag, isUpdated);
         newElement.selectable = this.treeOutline._selectEnabled;
         this.insertChild(newElement, index);
         return newElement;
     },
 
     moveChild: function(child, targetIndex)
     {
         var wasSelected = child.selected;
         this.removeChild(child);
         this.insertChild(child, targetIndex);
         if (wasSelected)
             child.select();
     },
 
     /**
      * @param {boolean} fullRefresh
+     * @param {!WebInspector.ElementsTreeUpdater.Record|undefined} childUpdates
      * @param {?Array.<!WebInspector.DOMNode>} children
      */
-    _updateChildren: function(fullRefresh, children)
+    _updateChildren: function(fullRefresh, childUpdates, children)
     {
         if (!children || this._updateChildrenInProgress || !this.treeOutline._visible)
             return;
 
         this._updateChildrenInProgress = true;
         var selectedNode = this.treeOutline.selectedDOMNode();
         var originalScrollTop = 0;
         if (fullRefresh) {
             var treeOutlineContainerElement = this.treeOutline.element.parentNode;
             originalScrollTop = treeOutlineContainerElement.scrollTop;
@@ skipping 26 matching lines @@
                             break;
                         }
                     }
 
                     if (existingTreeElement && existingTreeElement.parent === this) {
                         // If an existing element was found and it has the same parent, just move it.
                         this.moveChild(existingTreeElement, treeChildIndex);
                     } else {
                         // No existing element found, insert a new element.
                         if (treeChildIndex < this.expandedChildrenLimit) {
-                            var newElement = this.insertChildElement(child, treeChildIndex);
+                            var newElement = this.insertChildElement(child, treeChildIndex, false, !!childUpdates && childUpdates.isNodeInserted(child));

[pfeldman, 2014/11/07 12:54:15]

Can you do something like:

if (childUpdates.isNodeInserted())
    newElement.listItemElement.mыrg(); ?

[apavlov, 2014/11/10 09:52:56]

Done something along these lines with mыrging...

                             if (child === selectedNode)
                                 elementToSelect = newElement;
                             if (this.expandedChildCount > this.expandedChildrenLimit)
                                 this.expandedChildrenLimit++;
                         }
                     }
                 }
 
                 ++treeChildIndex;
             }
@@ skipping 12 matching lines @@
                 continue;
 
             var selectedTreeElement = this.treeOutline.selectedTreeElement;
             if (selectedTreeElement && (selectedTreeElement === currentChild || selectedTreeElement.hasAncestor(currentChild)))
                 this.select();
 
             this.removeChildAtIndex(i);
         }
 
         var elementToSelect = updateChildrenOfNode.call(this);
-        this.updateTitle();
+        this.updateTitle(false, childUpdates);
         this._adjustCollapsedRange();
 
         var lastChild = this.children[this.children.length - 1];
         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.
         if (fullRefresh && elementToSelect) {
             elementToSelect.select();
             if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
@@ skipping 781 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.Record=} updates
      */
-    updateTitle: function(onlySearchQueryChanged)
+    updateTitle: function(onlySearchQueryChanged, updates)
     {
         // If we are editing, return early to prevent canceling the edit.
         // After editing is committed updateTitle will be called.
         if (this._editing)
             return;
 
+        this._updates = updates;
         if (onlySearchQueryChanged) {
             if (this._highlightResult)
                 this._updateSearchHighlight(false);
         } else {
             var nodeInfo = this._nodeTitleInfo(WebInspector.linkifyURLAsNode);
             if (nodeInfo.shadowRoot)
                 this.listItemElement.classList.add("shadow-root");
             var highlightElement = createElement("span");
             highlightElement.className = "highlight";
             highlightElement.appendChild(nodeInfo.titleDOM);
             this.title = highlightElement;
             this._updateDecorations();
             delete this._highlightResult;
         }
 
+        delete this._isUpdated;
         delete this.selectionElement;
         if (this.selected)
             this.updateSelection();
         this._preventFollowingLinksOnDoubleClick();
         this._highlightSearchResults();
     },
 
     /**
      * @return {?Element}
      */
@@ skipping 88 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");
 
+        if (this._updates && this._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);
+                }
             }
+            if (this._isUpdated || (this._updates && (this._updates.hasRemovedAttributes() || this._updates.hasChangedChildren())))
+                WebInspector.runCSSAnimationOnce(tagNameElement, "dom-update-highlight");
         }
+
         tagElement.createTextChild(">");
         parentElement.createTextChild("\u200B");
     },
 
     /**
      * @param {string} text
      * @return {!{text: string, entityRanges: !Array.<!WebInspector.SourceRange>}}
      */
     _convertWhitespaceToEntities: function(text)
     {
@@ skipping 62 matching lines @@
                 // 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.createTextChild("\u200B");
                     this._buildTagDOM(info.titleDOM, tagName, true, false);
                     info.hasChildren = false;
+                    if (this._updates && (this._updates.isCharDataModified() || this._updates.hasInsertedNodes()))
+                        WebInspector.runCSSAnimationOnce(textNodeElement, "dom-update-highlight");
                 }
                 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("\"");
+                    if (this._isUpdated || (this._updates && this._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 210 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.Record>} */
+    this._recentlyModifiedNodes = new Map();
+    /** @type {!Map.<!WebInspector.DOMNode, !WebInspector.ElementsTreeUpdater.Record>} */
+    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
+     * @param {!WebInspector.ElementsTreeUpdater.Record.ChangeType} changeType
+     * @param {string|!WebInspector.DOMNode=} relatedTarget
      */
-    _parentNodeModified: function(parentNode)
+    _parentNodeModified: function(parentNode, changeType, relatedTarget)
     {
         if (!parentNode)
             return;
-        this._recentlyModifiedParentNodes.add(parentNode);
+        var record = this._recentlyModifiedParentNodes.get(parentNode);
+        if (!record) {
+            record = new WebInspector.ElementsTreeUpdater.Record();
+            this._recentlyModifiedParentNodes.set(parentNode, record);
+        }
+        record.merge(parentNode, changeType, relatedTarget);
 
         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);
+                this._nodeModified(parentNode, changeType, relatedTarget);
         }
 
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
+     * @param {!WebInspector.ElementsTreeUpdater.Record.ChangeType} changeType
+     * @param {string|!WebInspector.DOMNode=} relatedTarget
      */
-    _nodeModified: function(node)
+    _nodeModified: function(node, changeType, relatedTarget)
     {
-        this._recentlyModifiedNodes.add(node);
+        var record = this._recentlyModifiedNodes.get(node);
+        if (!record) {
+            record = new WebInspector.ElementsTreeUpdater.Record();
+            this._recentlyModifiedNodes.set(node, record);
+        }
+        record.merge(node, changeType, relatedTarget);
         if (this._treeOutline._visible)
             this._updateModifiedNodesSoon();
     },
 
     /**
      * @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, WebInspector.ElementsTreeUpdater.Record.ChangeType.AttrModified, event.data.name);

[pfeldman, 2014/11/07 12:54:15]

Lets inline record creation here.

[apavlov, 2014/11/10 09:52:56]

This will result in one record per single DOM update event, which may cause
severe GC churns on highly dynamic pages (tens of thousands of short-lived
objects.)

     },
 
     /**
+     * @param {!WebInspector.Event} event
+     */
+    _attributeRemoved: function(event)
+    {
+        var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
+        this._nodeModified(node, WebInspector.ElementsTreeUpdater.Record.ChangeType.AttrRemoved, 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, WebInspector.ElementsTreeUpdater.Record.ChangeType.CharDataModified, node);
+        this._nodeModified(node, WebInspector.ElementsTreeUpdater.Record.ChangeType.CharDataModified);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _nodeInserted: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        this._parentNodeModified(node.parentNode);
+        this._parentNodeModified(node.parentNode, WebInspector.ElementsTreeUpdater.Record.ChangeType.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, WebInspector.ElementsTreeUpdater.Record.ChangeType.ChildNodeRemoved);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _childNodeCountUpdated: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
-        this._parentNodeModified(node);
+        this._parentNodeModified(node, WebInspector.ElementsTreeUpdater.Record.ChangeType.ChildNodeCountUpdated);

[pfeldman, 2014/11/07 12:54:15]

Lets not use this signal.

[apavlov, 2014/11/10 09:52:56]

Done.

     },
 
     _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 highlightDOMUpdates = WebInspector.settings.highlightDOMUpdates.get();
+            var nodes = this._recentlyModifiedNodes.keysArray();
             for (var i = 0, size = nodes.length; i < size; ++i) {
                 var nodeItem = this._treeOutline.findTreeElement(nodes[i]);
                 if (nodeItem)
-                    nodeItem.updateTitle();
+                    nodeItem.updateTitle(false, highlightDOMUpdates ? this._recentlyModifiedNodes.get(nodes[i]) : undefined);

[pfeldman, 2014/11/07 12:54:15]

updateTitle can reach out for it on its own

[apavlov, 2014/11/10 09:52:56]

Done.

             }
 
-            var parentNodes = this._recentlyModifiedParentNodes.valuesArray();
+            var parentNodes = this._recentlyModifiedParentNodes.keysArray();
             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, highlightDOMUpdates ? this._recentlyModifiedParentNodes.get(parentNodes[i]) : undefined);

[pfeldman, 2014/11/07 12:54:16]

ditto

[apavlov, 2014/11/10 09:52:56]

Done.

             }
         }
 
         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.Record = function()
+{
+    this._removedAttributeCount = 0;
+}
+
+WebInspector.ElementsTreeUpdater.Record.prototype = {

[pfeldman, 2014/11/07 12:54:15]

Since you merge those, I'd call it UpdateInfo

[apavlov, 2014/11/10 09:52:56]

Done.

+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!WebInspector.ElementsTreeUpdater.Record.ChangeType} changeType
+     * @param {!WebInspector.DOMNode|string|undefined} relatedTarget
+     */
+    merge: function(node, changeType, relatedTarget)
+    {
+        var attrName;
+        switch (changeType) {
+        case WebInspector.ElementsTreeUpdater.Record.ChangeType.AttrModified:
+            attrName = /** @type {string} */ (relatedTarget);
+            if (this.removedAttributes && this.removedAttributes.has(attrName)) {
+                this.removedAttributes.delete(attrName);
+                --this._removedAttributeCount;
+            }
+            if (!this.modifiedAttributes)

[pfeldman, 2014/11/07 12:54:15]

make them all private.

[apavlov, 2014/11/10 09:52:56]

Done.

+                this.modifiedAttributes = /** @type {!Set.<string>} */ (new Set());
+            this.modifiedAttributes.add(attrName);
+            break;
+        case WebInspector.ElementsTreeUpdater.Record.ChangeType.AttrRemoved:
+            attrName = /** @type {string} */ (relatedTarget);
+            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;
+            break;
+        case WebInspector.ElementsTreeUpdater.Record.ChangeType.NodeInserted:
+            if (!this.insertedNodes)
+                this.insertedNodes = /** @type {!Set.<!WebInspector.DOMNode>} */ (new Set());
+            this.insertedNodes.add(/** @type {!WebInspector.DOMNode} */ (relatedTarget));
+            break;
+        case WebInspector.ElementsTreeUpdater.Record.ChangeType.CharDataModified:
+            this._charDataModified = true;
+            break;
+        case WebInspector.ElementsTreeUpdater.Record.ChangeType.ChildNodeRemoved:
+        case WebInspector.ElementsTreeUpdater.Record.ChangeType.ChildNodeCountUpdated:
+            this._hasChangedChildren = true;
+            break;
+        default:
+            console.error("Invalid change type: " + changeType);
+        }
+    },
+
+    /**
+     * @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.Record.ChangeType = {
+    AttrModified: 1,
+    AttrRemoved: 2,
+    CharDataModified: 3,
+    NodeInserted: 4,
+    ChildNodeRemoved: 5,
+    ChildNodeCountUpdated: 6
+}
+
+/**
+ * @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);
             }
         }
     }
 }