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.ElementsSidebarPane}
  */
 WebInspector.AnimationsSidebarPane = function(stylesPane)
 {
     WebInspector.ElementsSidebarPane.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._animationSections = [];
 
-    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._forceUpdate = true;
+        this.update();
+    },
+
     /**
      * @param {!WebInspector.Throttler.FinishCallback} finishCallback
      * @protected
      */
     doUpdate: function(finishCallback)
     {
         /**
          * @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);
                 finishCallback();
                 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");
-                separatorElement.createTextChild(WebInspector.UIString("Animation") + " " + player.name());
-                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 style = { selectorText: keyframes[j].offset(), style: keyframes[j].style(), isAttribute: true };
-                        var section = new WebInspector.StylePropertiesSection(this._stylesPane, style, true, false);
-                        section.expanded = true;
-                        this.bodyElement.appendChild(section.element);
-                    }
-                }
+                this._animationSections[i] = new WebInspector.AnimationSection(this, this._stylesPane, player);
+                if (animationPlayers.length < 5)
+                    this._animationSections[i].expand(true);
+                this.animationsElement.appendChild(this._animationSections[i].element);
             }
             finishCallback();
         }
 
-        if (!this.node())
+        if (!this.node()) {
+            finishCallback();
             return;
-        this.node().target().animationModel.getAnimationPlayers(this.node().id, animationPlayersCallback.bind(this));
+        }
+
+        if (!this._forceUpdate && this._selectedNode === this.node()) {
+            for (var i = 0; i < this._animationSections.length; ++i)
+                this._animationSections[i].updateCurrentTime();
+            finishCallback();
+            return;
+        }
+
+        this._forceUpdate = false;
+        this._selectedNode = this.node();
+        this.node().target().animationModel.animationPlayers(this.node().id, WebInspector.settings.showSubtreeAnimations.get(), animationPlayersCallback.bind(this));
     },
 
     __proto__: WebInspector.ElementsSidebarPane.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()

[vsevik, 2014/11/12 09:14:35]

Can we make it private?

[samli, 2014/11/13 01:12:43]

Done.

     {
-        this._updateThrottler.schedule(this._updateCurrentTime.bind(this), false);
+        return this.bodyElement.classList.contains("expanded");
+    },
+
+    toggle: function()

[vsevik, 2014/11/12 09:14:35]

Can we make it private?

[samli, 2014/11/13 01:12:43]

Done.

+    {
+        this.bodyElement.classList.toggle("expanded");
     },
 
     /**
+     * @param {boolean} expand
+     */
+    expand: function(expand)
+    {
+        if (expand) {

[vsevik, 2014/11/12 09:14:35]

this.bodyElement.classList.toggle("expanded", expanded);
if (expanded)
    this.updateCurrentTime();

if (expanded) check is actually redundant since you do it inside this method
anyway.

[samli, 2014/11/13 01:12:43]

Done.

+            this.bodyElement.classList.add("expanded");
+            this.updateCurrentTime();
+        } else {
+            this.bodyElement.classList.remove("expanded");
+        }
+    },
+
+    updateCurrentTime: function()
+    {
+        if (this.expanded)

[vsevik, 2014/11/12 09:14:35]

this.expanded is a function, it is always true :)

[samli, 2014/11/13 01:12:44]

Done.

+            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()
+    {
+        /**
+         * @param {?WebInspector.DOMNode} node
+         */
+        function nodeResolved(node)
+        {
+            headerElement.addEventListener("mouseover", node.highlight.bind(node, undefined, undefined), false);
+            headerElement.addEventListener("mouseleave", node.domModel().hideDOMNodeHighlight.bind(node.domModel()), false);

[vsevik, 2014/11/12 09:14:35]

I think we should also add a node description with a link to reveal it.
You need to run something like
WebInspector.DOMPresentationUtils.linkifyNodeReference(node) to achieve that.

[samli, 2014/11/13 01:12:44]

I agree, but I think we need to agree on a UI for this and put it in a separate
patch. crbug.com/432743

+        }
+
+        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);
+        headerElement.addEventListener("click", this.toggle.bind(this), false);
+        this.player.source().node(nodeResolved);
+        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);
+            }
+        }
     }
 }