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..530f4b8fa8f7f3c6c15127e8bb5faf77d26afbb7 100644
--- a/Source/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/elements/ElementsTreeOutline.js
@@ -490,10 +490,33 @@ 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 entry of modifiedAttributes.entries()) {
+            // FIXME: Remove this cast once Map.prototype.entries is properly supported by the Closure compiler.
+            var treeElement = this.findTreeElement(/** @type {!WebInspector.DOMNode} */ (entry[0]));

[vsevik, 2014/11/05 20:40:24]

You could iterate over keys instead to workaround this.

[apavlov, 2014/11/06 10:47:03]

Done.

+            if (!treeElement)
+                continue;
+            var element = treeElement.listItemElement;
+            // FIXME: Remove this cast once Map.prototype.entries is properly supported by the Closure compiler.
+            var names = /** @type {!Set.<string>} */ (entry[1]);
+            for (var name of names) {
+                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 + "']";

[vsevik, 2014/11/05 20:40:24]

Maybe store attribute elements on the treeElement instead to avoid this complex
search?

[apavlov, 2014/11/06 10:47:03]

Discussed this approach offline

+                }
+                element = element.ownerDocument.evaluate(xpath, element, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null).singleNodeValue;
+                if (element)
+                    WebInspector.runCSSAnimationOnce(element, "dom-update-highlight");
+            }
+        }
     },
 
     /**
@@ -2747,8 +2770,15 @@ 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();
 }
 
+/**
+ * @typedef {{node: !WebInspector.DOMNode, name: string}}
+ */
+WebInspector.ElementsTreeUpdater.AttributeUpdateEntry;

[vsevik, 2014/11/05 20:40:24]

unused?

[apavlov, 2014/11/06 10:47:03]

Done.

+
 WebInspector.ElementsTreeUpdater.prototype = {
     dispose: function()
     {
@@ -2815,6 +2845,12 @@ WebInspector.ElementsTreeUpdater.prototype = {
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
         this._nodeModified(node);
+        var names = this._recentlyModifiedAttributes.get(node);
+        if (!names) {
+            names = new Set();
+            this._recentlyModifiedAttributes.set(node, names);
+        }
+        names.add(/** @type {string} */ (event.data.name));
     },
 
     /**
@@ -2905,7 +2941,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()