Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/front_end/elements/StylesSidebarPane.js

Index: Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/Source/devtools/front_end/elements/StylesSidebarPane.js b/Source/devtools/front_end/elements/StylesSidebarPane.js
index 98a2adccf72696228080aa2bde43ac1efe99b30b..74ebb843017fd855cfe17e2ad647ee8aba3ff73f 100644
--- a/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -511,10 +511,45 @@ WebInspector.StylesSidebarPane.prototype = {
             resultStyles.computedStyle = computedStyle;
         }
 
+        /**
+         * @param {?Array.<!WebInspector.DOMModel.AnimationPlayer>} animationPlayers
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function animationPlayersCallback(animationPlayers)
+        {
+            for (var i = 0; i < animationPlayers.length; ++i) {
+                var player = animationPlayers[i];
+                var section = new WebInspector.AnimationSection(player);
+                var separatorElement = document.createElement("div");
+                separatorElement.className = "sidebar-separator";
+                separatorElement.createTextChild(WebInspector.UIString("Animation") + " " + player.id());

[caseq, 2014/10/03 12:43:55]

Should we use name when available?

[samli, 2014/10/07 05:25:44]

Done.

+                this._sectionsContainer.appendChild(separatorElement);

[caseq, 2014/10/03 12:43:55]

nit: var separatorElement = this._sectionsContainer.createChild("div",
"sidebar-separator");

[samli, 2014/10/07 05:25:44]

Done.

+                this._sectionsContainer.appendChild(section.element);
+                this._target.cssModel.getKeyframeStylesForNodeAsync(player.id(), keyframeStylesCallback.bind(this, section.element));
+            }
+        }
+
+        /**
+         * @param {?Element} anchorElement
+         * @param {?Array.<!WebInspector.CSSRule>} keyframeStyles
+         * @this {WebInspector.StylesSidebarPane}
+         */
+        function keyframeStylesCallback(anchorElement, keyframeStyles) {

[caseq, 2014/10/03 12:43:55]

style: { => next line

[samli, 2014/10/07 05:25:44]

Done.

+            // Maintain order of keyframes
+            for (var i = keyframeStyles.length - 1; i >= 0; i--) {
+                // FIXME: Styles should be editable
+                var section = new WebInspector.StylePropertiesSection(this, keyframeStyles[i], false, false);
+                section.expand();
+                this._sectionsContainer.insertBefore(section.element, anchorElement.nextSibling);
+            }
+        }
+
         if (this._computedStylePane.isShowing())
             this._target.cssModel.getComputedStyleAsync(node.id, computedCallback);
         this._target.cssModel.getInlineStylesAsync(node.id, inlineCallback);
         this._target.cssModel.getMatchedStylesAsync(node.id, false, false, stylesCallback.bind(this));
+        if (Runtime.experiments.isEnabled("animationInspection"))
+            node.animationPlayers(animationPlayersCallback.bind(this));
     },
 
     /**