Devtools Animations: Display keyframes for CSS Animations in inspector

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)
 {
@@ skipping 26 matching lines @@
                 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, false, false);
+                        section.expanded = true;
+                        this.bodyElement.appendChild(section.element);
+                    }
+                }
             }
         }
 
+        if (!node)
+            return;
+
         if (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));
     },
     __proto__: WebInspector.SidebarPane.prototype
 }
@@ skipping 144 matching lines @@
             "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);
     }
 }