Devtools Animations: Show subtree animations for a given node

Source/devtools/front_end/elements/AnimationsSidebarPane.js

Index: Source/devtools/front_end/elements/AnimationsSidebarPane.js
diff --git a/Source/devtools/front_end/elements/AnimationsSidebarPane.js b/Source/devtools/front_end/elements/AnimationsSidebarPane.js
index 15b181b381c5e19fc8dd644ea35010e9064dad69..95e520f5e2e7cec3e88b9ed79f49e756bf8792ca 100644
--- a/Source/devtools/front_end/elements/AnimationsSidebarPane.js
+++ b/Source/devtools/front_end/elements/AnimationsSidebarPane.js
@@ -11,18 +11,42 @@ WebInspector.AnimationsSidebarPane = function(stylesPane)
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Animations"));
     this._stylesPane = stylesPane;
 
+    this.headerElement = createElementWithClass("div", "animationsSettings");
+    this.headerElement.appendChild(WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckbox());
+    WebInspector.settings.showSubtreeAnimations.addChangeListener(this._showSubtreeAnimationsChanged.bind(this));
     this._emptyElement = createElement("div");
     this._emptyElement.className = "info";
     this._emptyElement.textContent = WebInspector.UIString("No Animations");
+    this.animationsElement = createElement("div");
+    this.animationsElement.appendChild(this._emptyElement);
 
-    this.bodyElement.appendChild(this._emptyElement);
+    this.bodyElement.appendChild(this.headerElement);
+    this.bodyElement.appendChild(this.animationsElement);
+}
+
+/**
+ * @return {!Element}
+ */
+WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckbox = function()
+{
+    if (!WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement) {
+        WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Show subtree animations"), WebInspector.settings.showSubtreeAnimations, true);
+        WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement.classList.add("checkbox-with-label");
+    }
+    return WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement;
 }
 
 WebInspector.AnimationsSidebarPane.prototype = {
+    _showSubtreeAnimationsChanged: function()
+    {
+        this.update(this._selectedNode, true);
+    },
+
     /**
      * @param {?WebInspector.DOMNode} node
+     * @param {boolean=} forceUpdate
      */
-    update: function(node)
+    update: function(node, forceUpdate)
     {
         /**
          * @param {?Array.<!WebInspector.AnimationModel.AnimationPlayer>} animationPlayers
@@ -30,43 +54,32 @@ WebInspector.AnimationsSidebarPane.prototype = {
          */
         function animationPlayersCallback(animationPlayers)
         {
-            this.bodyElement.removeChildren();
+            this.animationsElement.removeChildren();
             this._animationSections = [];
             if (!animationPlayers || !animationPlayers.length) {
-                this.bodyElement.appendChild(this._emptyElement);
+                this.animationsElement.appendChild(this._emptyElement);
                 return;
             }
-
             for (var i = 0; i < animationPlayers.length; ++i) {
                 var player = animationPlayers[i];
-                this._animationSections[i] = new WebInspector.AnimationSection(this, player);
-                var separatorElement = this.bodyElement.createChild("div", "sidebar-separator");
-                var id = player.source().name() ? player.source().name() : player.id();
-                separatorElement.createTextChild(WebInspector.UIString("Animation") + " " + id);
-                this.bodyElement.appendChild(this._animationSections[i].element);
-
-                if (player.source().keyframesRule()) {
-                    var keyframes = player.source().keyframesRule().keyframes();
-                    for (var j = 0; j < keyframes.length; j++) {
-                        var inlineStyle = { selectorText: keyframes[j].offset(), style: keyframes[j].style(), isAttribute: true };
-                        var section = new WebInspector.StylePropertiesSection(this._stylesPane, inlineStyle, true, false);
-                        section.expanded = true;
-                        this.bodyElement.appendChild(section.element);
-                    }
-                }
+                this._animationSections[i] = new WebInspector.AnimationSection(this, this._stylesPane, player);

[vsevik, 2014/11/05 09:48:37]

Is there any specific order of the animations here?
We should probably group them by Element at least.

[samli, 2014/11/10 23:59:31]

Currently they're sorted by sequence number, which is the order in which they
started. This should be sufficient for now. It seems unlikely that there are
many animations targeting the same element. In the case that is true, they were
likely started at the same time and will appear grouped anyway.

+                if (animationPlayers.length < 5)
+                    this._animationSections[i].expand(true);
+                this.animationsElement.appendChild(this._animationSections[i].element);
             }
         }
 
         if (!node)
             return;
 
-        if (this._selectedNode === node) {
+        if (!forceUpdate && this._selectedNode === node) {
             for (var i = 0; i < this._animationSections.length; ++i)
                 this._animationSections[i].updateCurrentTime();
             return;
         }
+
         this._selectedNode = node;
-        node.target().animationModel.animationPlayers(node.id, animationPlayersCallback.bind(this));
+        node.target().animationModel.animationPlayers(node.id, WebInspector.settings.showSubtreeAnimations.get(), animationPlayersCallback.bind(this));
     },
     __proto__: WebInspector.SidebarPane.prototype
 }
@@ -74,28 +87,60 @@ WebInspector.AnimationsSidebarPane.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.AnimationsSidebarPane} parentPane
+ * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {?WebInspector.AnimationModel.AnimationPlayer} animationPlayer
  */
-WebInspector.AnimationSection = function(parentPane, animationPlayer)
+WebInspector.AnimationSection = function(parentPane, stylesPane, animationPlayer)
 {
     this._parentPane = parentPane;
-    this.propertiesSection = createElement("div");
+    this._stylesPane = stylesPane;
+    this._propertiesElement = createElement("div");
+    this._keyframesElement = createElement("div");
     this._setAnimationPlayer(animationPlayer);
 
-    this.element = createElement("div");
-    this.element.className = "styles-section";
-
     this._updateThrottler = new WebInspector.Throttler(WebInspector.AnimationSection.updateTimeout);
-    this.element.appendChild(this._createAnimationControls());
-    this.element.appendChild(this.propertiesSection);
+
+    this.element = createElement("div");
+    this.element.appendChild(this._createHeader());
+    this.bodyElement = this.element.createChild("div", "animationSectionBody");
+    this.bodyElement.appendChild(this._createAnimationControls());
+    this.bodyElement.appendChild(this._propertiesElement);
+    this.bodyElement.appendChild(this._keyframesElement);
 }
 
 WebInspector.AnimationSection.updateTimeout = 100;
 
 WebInspector.AnimationSection.prototype = {
+    /**
+     * @return {boolean}
+     */
+    expanded: function()
+    {
+        return this.bodyElement.classList.contains("expanded");
+    },
+
+    toggle: function()
+    {
+        this.bodyElement.classList.toggle("expanded");
+    },
+
+    /**
+     * @param {boolean} expand
+     */
+    expand: function(expand)
+    {
+        if (expand) {
+            this.bodyElement.classList.add("expanded");
+            this.updateCurrentTime();
+        } else {
+            this.bodyElement.classList.remove("expanded");
+        }
+    },
+
     updateCurrentTime: function()
     {
-        this._updateThrottler.schedule(this._updateCurrentTime.bind(this), false);
+        if (this.expanded)
+            this._updateThrottler.schedule(this._updateCurrentTime.bind(this), false);
     },
 
     /**
@@ -156,6 +201,21 @@ WebInspector.AnimationSection.prototype = {
     /**
      * @return {!Element}
      */
+    _createHeader: function()
+    {
+        var headerElement = createElementWithClass("div", "sidebar-separator");
+        var id = this.player.source().name() ? this.player.source().name() : this.player.id();
+        headerElement.createTextChild(WebInspector.UIString("Animation") + " " + id);
+        var animationTargetNode = this.player.source().node();
+        headerElement.addEventListener("mouseover", animationTargetNode.highlight.bind(animationTargetNode, undefined, undefined), false);
+        headerElement.addEventListener("mouseleave", animationTargetNode.domModel().hideDOMNodeHighlight.bind(animationTargetNode.domModel()), false);
+        headerElement.addEventListener("click", this.toggle.bind(this), false);
+        return headerElement;
+    },
+
+    /**
+     * @return {!Element}
+     */
     _createAnimationControls: function()
     {
         /**
@@ -204,7 +264,7 @@ WebInspector.AnimationSection.prototype = {
         if (!p || p === this.player)
             return;
         this.player = p;
-        this.propertiesSection.removeChildren();
+        this._propertiesElement.removeChildren();
         var animationObject = {
             "playState": p.playState(),
             "start-time": p.startTime(),
@@ -220,7 +280,17 @@ WebInspector.AnimationSection.prototype = {
             "time-fraction": p.source().timeFraction()
         };
         var obj = WebInspector.RemoteObject.fromLocalObject(animationObject);
-        var section = new WebInspector.ObjectPropertiesSection(obj, WebInspector.UIString("Animation Properties"));
-        this.propertiesSection.appendChild(section.element);
+        var objSection = new WebInspector.ObjectPropertiesSection(obj, WebInspector.UIString("Animation Properties"));
+        this._propertiesElement.appendChild(objSection.element);
+
+        if (this.player.source().keyframesRule()) {
+            var keyframes = this.player.source().keyframesRule().keyframes();
+            for (var j = 0; j < keyframes.length; j++) {
+                var inlineStyle = { selectorText: keyframes[j].offset(), style: keyframes[j].style(), isAttribute: true };
+                var styleSection = new WebInspector.StylePropertiesSection(this._stylesPane, inlineStyle, true, false);
+                styleSection.expanded = true;
+                this._keyframesElement.appendChild(styleSection.element);
+            }
+        }
     }
 }