Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 493 matching lines @@
         }
 
         /**
          * @param {?WebInspector.CSSStyleDeclaration} computedStyle
          */
         function computedCallback(computedStyle)
         {
             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));
     },
 
     /**
      * @param {function()=} userCallback
      */
     _validateNode: function(userCallback)
     {
         if (!this._node) {
             this._sectionsContainer.removeChildren();
             this._computedStylePane.bodyElement.removeChildren();
@@ skipping 3015 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }