DevTools: [Elements] Highlight DOM updates

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 c5e2d6f8f3eff068f09bcb413942338cdb083757..ce74786841e0a41e70faf8447068b3c2b255a800 100644
--- a/Source/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/elements/ElementsTreeOutline.js
@@ -490,10 +490,30 @@ WebInspector.ElementsTreeOutline.prototype = {
 
     /**
      * @param {!Array.<!WebInspector.DOMNode>} nodes
+     * @param {!Map.<!WebInspector.DOMNode, !Set.<string>>} modifiedAttributes
      */
-    _fireElementsTreeUpdated: function(nodes)
+    _fireElementsTreeUpdated: function(nodes, modifiedAttributes)
     {
         this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
+        for (var node of modifiedAttributes.keys()) {

[pfeldman, 2014/11/06 13:57:27]

I think this should be a part of updateTitle.

[apavlov, 2014/11/07 08:31:41]

Done.

+            var treeElement = this.findTreeElement(node);
+            if (!treeElement)
+                continue;
+            var element = treeElement.listItemElement;
+            for (var name of modifiedAttributes.get(node)) {
+                var attrValue = treeElement.representedObject.getAttribute(name);
+                var xpath;
+                if (attrValue === undefined) {
+                    xpath = ".//*[@class='webkit-html-tag-name']";
+                } else {
+                    var elementClassName = !!attrValue ? "webkit-html-attribute-value" : "webkit-html-attribute-name";
+                    xpath = ".//*[@class='webkit-html-tag']//*[@class='webkit-html-attribute'][.//*[@class='webkit-html-attribute-name'][text()='" + name + "']]/*[@class='" + elementClassName + "']";
+                }
+                element = element.ownerDocument.evaluate(xpath, element, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null).singleNodeValue;

[pfeldman, 2014/11/06 13:57:27]

You should precisely know what attribute to update (i.e. be in updateTitle)

[apavlov, 2014/11/07 08:31:41]

Done.

+                if (element)
+                    WebInspector.runCSSAnimationOnce(element, "dom-update-highlight");
+            }
+        }
     },
 
     /**
@@ -2747,6 +2767,8 @@ WebInspector.ElementsTreeUpdater = function(domModel, treeOutline)
     this._recentlyModifiedNodes = new Set();
     /** @type {!Set.<!WebInspector.DOMNode>} */
     this._recentlyModifiedParentNodes = new Set();
+    /** @type {!Map.<!WebInspector.DOMNode, !Set.<string>>} */
+    this._recentlyModifiedAttributes = new Map();

[pfeldman, 2014/11/06 13:57:27]

Do not rely upon recent modification.

[apavlov, 2014/11/07 08:31:41]

Done.

 }
 
 WebInspector.ElementsTreeUpdater.prototype = {
@@ -2815,6 +2837,15 @@ WebInspector.ElementsTreeUpdater.prototype = {
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
         this._nodeModified(node);

[pfeldman, 2014/11/06 13:57:27]

You should instead specify aux info for this nodeModified event and use it
further in the updater. You can then highlight entire new nodes, etc.

[apavlov, 2014/11/07 08:31:41]

Done.

+        if (!WebInspector.settings.highlightDOMUpdates.get())
+            return;
+
+        var names = this._recentlyModifiedAttributes.get(node);
+        if (!names) {
+            names = new Set();
+            this._recentlyModifiedAttributes.set(node, names);
+        }
+        names.add(/** @type {string} */ (event.data.name));

[pfeldman, 2014/11/06 13:57:27]

string || undefined.

[apavlov, 2014/11/07 08:31:41]

Acknowledged.

     },
 
     /**
@@ -2905,7 +2936,8 @@ WebInspector.ElementsTreeUpdater.prototype = {
         }
         this._recentlyModifiedNodes.clear();
         this._recentlyModifiedParentNodes.clear();
-        this._treeOutline._fireElementsTreeUpdated(updatedNodes);
+        this._treeOutline._fireElementsTreeUpdated(updatedNodes, this._recentlyModifiedAttributes);
+        this._recentlyModifiedAttributes.clear();
     },
 
     _reset: function()