Devtools Animations: Display keyframes for CSS Animations in inspector

Source/devtools/front_end/sdk/AnimationModel.js

Index: Source/devtools/front_end/sdk/AnimationModel.js
diff --git a/Source/devtools/front_end/sdk/AnimationModel.js b/Source/devtools/front_end/sdk/AnimationModel.js
index 7339e190e8147895cb92a55fb8c3c7aa8719edb3..251065a966b457a8d6eda9aa817e5b461ccc85a9 100644
--- a/Source/devtools/front_end/sdk/AnimationModel.js
+++ b/Source/devtools/front_end/sdk/AnimationModel.js
@@ -183,6 +183,8 @@ WebInspector.AnimationModel.AnimationNode = function(target, payload)
 {
     WebInspector.SDKObject.call(this, target);
     this._payload = payload;
+    if (payload.keyframesRule)
+        this._keyframesRule = new WebInspector.AnimationModel.KeyframesRule(target, payload.keyframesRule);
 }
 
 WebInspector.AnimationModel.AnimationNode.prototype = {
@@ -258,5 +260,81 @@ WebInspector.AnimationModel.AnimationNode.prototype = {
         return this._payload.name;
     },
 
+    /**
+     * @return {?WebInspector.AnimationModel.KeyframesRule}
+     */
+    keyframesRule: function()
+    {
+        return this._keyframesRule;
+    },
+
+    __proto__: WebInspector.SDKObject.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.SDKObject}
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.KeyframesRule} payload
+ */
+WebInspector.AnimationModel.KeyframesRule = function(target, payload)
+{
+    WebInspector.SDKObject.call(this, target);
+    this._payload = payload;
+    this._keyframes = this._payload.keyframes.map(function (keyframeStyle) {

[pfeldman, 2014/10/23 06:37:00]

Please extract as a named function w/ annotation below.

[samli, 2014/10/24 05:06:19]

Done.

+        return new WebInspector.AnimationModel.KeyframeStyle(target, keyframeStyle);
+    });
+}
+
+WebInspector.AnimationModel.KeyframesRule.prototype = {
+    /**
+     * @return {string|undefined}
+     */
+    name: function()
+    {
+        return this._payload.name;
+    },
+
+    /**
+     * @return {!Array.<!WebInspector.AnimationModel.KeyframeStyle>}
+     */
+    keyframes: function()
+    {
+        return this._keyframes;
+    },
+
+    __proto__: WebInspector.SDKObject.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.SDKObject}
+ * @param {!WebInspector.Target} target
+ * @param {!AnimationAgent.KeyframeStyle} payload
+ */
+WebInspector.AnimationModel.KeyframeStyle = function(target, payload)
+{
+    WebInspector.SDKObject.call(this, target);
+    this._payload = payload;
+    this._style = WebInspector.CSSStyleDeclaration.parsePayload(this.target().cssModel, payload.style);
+}
+
+WebInspector.AnimationModel.KeyframeStyle.prototype = {
+    /**
+     * @return {string}
+     */
+    offset: function()
+    {
+        return this._payload.offset;
+    },
+
+    /**
+     * @return {!WebInspector.CSSStyleDeclaration}
+     */
+    style: function()
+    {
+        return this._style;
+    },
+
     __proto__: WebInspector.SDKObject.prototype
 }