Web Inspector: Highlight DOM node attribute changes in parallel, not sequentially
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 14 Aug 2015 22:19:57 +0000 (22:19 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 14 Aug 2015 22:19:57 +0000 (22:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=148019

Reviewed by Brian Burg.

* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype._markNodeChanged):
(WebInspector.DOMTreeElement.prototype._nodeChangedAnimationEnd):
Now removes the animated element from the updated list once the animation ends.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@188496 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

index d89b2e1..18133cb 100644 (file)
@@ -1,3 +1,15 @@
+2015-08-14  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Highlight DOM node attribute changes in parallel, not sequentially
+        https://bugs.webkit.org/show_bug.cgi?id=148019
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._markNodeChanged):
+        (WebInspector.DOMTreeElement.prototype._nodeChangedAnimationEnd):
+        Now removes the animated element from the updated list once the animation ends.
+
 2015-08-14  Matt Baker  <mattbaker@apple.com>
 
         Web Inspector: Long delay when row selection changes in timeline data grids
index 0714965..2d5ba59 100644 (file)
@@ -41,7 +41,9 @@ WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
             this._canAddAttributes = true;
         this._searchQuery = null;
         this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
+
         this._nodeStateChanges = [];
+        this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this);
     }
 
     isCloseTag()
@@ -1462,22 +1464,27 @@ WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
 
     _markNodeChanged()
     {
-        function animationEnd() {
-            this.classList.remove("node-state-changed");
-            this.removeEventListener("animationEnd", animationEnd);
-        }
-
         for (let change of this._nodeStateChanges) {
             let element = change.element;
             if (!element)
                 continue;
 
             element.classList.remove("node-state-changed");
-            element.addEventListener("animationEnd", animationEnd);
+            element.addEventListener("animationend", this._boundNodeChangedAnimationEnd);
             element.classList.add("node-state-changed");
         }
+    }
 
-        this._nodeStateChanges = [];
+    _nodeChangedAnimationEnd(event)
+    {
+        let element = event.target;
+        element.classList.remove("node-state-changed");
+        element.removeEventListener("animationend", this._boundNodeChangedAnimationEnd);
+
+        for (let i = this._nodeStateChanges.length - 1; i >= 0; --i) {
+            if (this._nodeStateChanges[i].element === element)
+                this._nodeStateChanges.splice(i, 1);
+        }
     }
 
     _fireDidChange()