Devtools Animations: Display keyframes for CSS Animations in inspector

Source/devtools/front_end/sdk/AnimationModel.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.SDKModel}
  * @param {!WebInspector.Target} target
  */
@@ skipping 165 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.SDKObject}
  * @param {!WebInspector.Target} target
  * @param {!AnimationAgent.AnimationNode} payload
  */
 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 = {
     /**
      * @return {number}
      */
     startDelay: function()
     {
         return this._payload.startDelay;
     },
@@ skipping 55 matching lines @@
     },
 
     /**
      * @return {string}
      */
     name: function()
     {
         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
 }