Devtools Animations: Display keyframes for CSS Animations in inspector

Source/devtools/front_end/elements/AnimationsSidebarPane.js

Index: Source/devtools/front_end/elements/AnimationsSidebarPane.js
diff --git a/Source/devtools/front_end/elements/AnimationsSidebarPane.js b/Source/devtools/front_end/elements/AnimationsSidebarPane.js
index 7c0649baf243bda715ad68168b633d04bd5ceb1d..15b181b381c5e19fc8dd644ea35010e9064dad69 100644
--- a/Source/devtools/front_end/elements/AnimationsSidebarPane.js
+++ b/Source/devtools/front_end/elements/AnimationsSidebarPane.js
@@ -44,9 +44,22 @@ WebInspector.AnimationsSidebarPane.prototype = {
                 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);
+                    }
+                }
             }
         }
 
+        if (!node)
+            return;
+
         if (this._selectedNode === node) {
             for (var i = 0; i < this._animationSections.length; ++i)
                 this._animationSections[i].updateCurrentTime();