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 472 matching lines @@
             closingTagElement.updateTitle();
     },
 
     _selectedNodeChanged: function()
     {
         this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedDOMNode);
     },
 
     /**
      * @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");
+            }
+        }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {?TreeElement}
      */
     findTreeElement: function(node)
     {
         function parentNode(node)
         {
@@ skipping 2233 matching lines @@
     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, !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()
     {
         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.CharacterDataModified, this._characterDataModified, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
         this._domModel.removeEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
@@ skipping 46 matching lines @@
         this._treeOutline.rootDOMNode = inspectedRootDocument;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _attributesUpdated: function(event)
     {
         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));
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _characterDataModified: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
         this._parentNodeModified(node.parentNode);
         this._nodeModified(node);
@@ skipping 70 matching lines @@
         }
 
         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);
+        this._treeOutline._fireElementsTreeUpdated(updatedNodes, this._recentlyModifiedAttributes);
+        this._recentlyModifiedAttributes.clear();
     },
 
     _reset: function()
     {
         this._treeOutline.rootDOMNode = null;
         this._treeOutline.selectDOMNode(null, false);
         this._domModel.hideDOMNodeHighlight();
         this._recentlyModifiedNodes.clear();
         this._recentlyModifiedParentNodes.clear();
         delete this._treeOutline._clipboardNodeData;
@@ skipping 45 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);
             }
         }
     }
 }