Devtools Animations: Show subtree animations for a given node

Source/devtools/front_end/elements/AnimationsSidebarPane.js

 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  */
 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
          * @this {WebInspector.AnimationsSidebarPane}
          */
         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
 }
 
 /**
  * @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._updateThrottler = new WebInspector.Throttler(WebInspector.AnimationSection.updateTimeout);
+
     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.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 = {
-    updateCurrentTime: function()
+    /**
+     * @return {boolean}
+     */
+    expanded: function()
     {
-        this._updateThrottler.schedule(this._updateCurrentTime.bind(this), false);
+        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()
+    {
+        if (this.expanded)
+            this._updateThrottler.schedule(this._updateCurrentTime.bind(this), false);
+    },
+
+    /**
      * @param {!WebInspector.Throttler.FinishCallback} finishCallback
      */
     _updateCurrentTime: function(finishCallback)
     {
         /**
          * @param {number} currentTime
          * @param {boolean} isRunning
          * @this {WebInspector.AnimationSection}
          */
         function updateSliderCallback(currentTime, isRunning)
@@ skipping 37 matching lines @@
         }
 
         slider.addEventListener("input", sliderInputHandler.bind(this));
         this.updateCurrentTime();
         return slider;
     },
 
     /**
      * @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()
     {
         /**
          * @this {WebInspector.AnimationSection}
          */
         function pauseButtonHandler()
         {
             if (this.player.paused()) {
                 this.player.play(this._setAnimationPlayer.bind(this));
                 updatePauseButton.call(this, false);
@@ skipping 28 matching lines @@
     },
 
     /**
      * @param {?WebInspector.AnimationModel.AnimationPlayer} p
      */
     _setAnimationPlayer: function(p)
     {
         if (!p || p === this.player)
             return;
         this.player = p;
-        this.propertiesSection.removeChildren();
+        this._propertiesElement.removeChildren();
         var animationObject = {
             "playState": p.playState(),
             "start-time": p.startTime(),
             "player-playback-rate": p.playbackRate(),
             "id": p.id(),
             "start-delay": p.source().startDelay(),
             "playback-rate": p.source().playbackRate(),
             "iteration-start": p.source().iterationStart(),
             "iteration-count": p.source().iterationCount(),
             "duration": p.source().duration(),
             "direction": p.source().direction(),
             "fill-mode": p.source().fillMode(),
             "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);
+            }
+        }
     }
 }