Devtools: Add editable keyframes to the styles sidebar pane

third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js

Index: third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js b/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
index 6705633317de993e63809d19187186fbd509a46a..fba879da118728146078198a60f4e716a42b042d 100644
--- a/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
@@ -151,6 +151,29 @@ WebInspector.CSSStyleModel.prototype = {
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
+     * @return {!Promise.<?Array.<!WebInspector.CSSKeyframesRule>>}
+     */
+    matchedKeyframesPromise: function(nodeId)
+    {
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!Array.<!CSSAgent.CSSKeyframesRule>=} rulesPayload
+         * @return {?Array.<!WebInspector.CSSKeyframesRule>}
+         * @this {WebInspector.CSSStyleModel}
+         */
+        function callback(error, rulesPayload)
+        {
+            if (error)
+                return null;
+            var cssModel = this;
+            return rulesPayload.map(rule => new WebInspector.CSSKeyframesRule(cssModel, rule));
+        }
+
+        return this._agent.getCSSAnimationsForNode(nodeId, callback.bind(this));
+    },
+
+    /**
+     * @param {!DOMAgent.NodeId} nodeId
      * @return {!Promise.<?Map.<string, string>>}
      */
     computedStylePromise: function(nodeId)
@@ -1034,7 +1057,7 @@ WebInspector.CSSValue.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
- * @param {!CSSAgent.CSSRule} payload
+ * @param {{ style: !CSSAgent.CSSStyle, styleSheetId: (string|undefined), origin: !CSSAgent.StyleSheetOrigin}} payload

[lushnikov, 2016/01/13 01:42:18]

nit: excessive space

[samli, 2016/01/13 04:59:36]

Done.

  */
 WebInspector.CSSRule = function(cssModel, payload)
 {
@@ -1308,6 +1331,106 @@ WebInspector.CSSStyleRule.prototype = {
 
 /**
  * @constructor
+ * @param {!WebInspector.CSSStyleModel} cssModel
+ * @param {!CSSAgent.CSSKeyframesRule} payload
+ */
+WebInspector.CSSKeyframesRule = function(cssModel, payload)
+{
+    this._cssModel = cssModel;
+    this._animationName = new WebInspector.CSSValue(payload.animationName);
+    this._keyframes = payload.keyframes.map(keyframeRule => new WebInspector.CSSKeyframeRule(cssModel, keyframeRule));
+}
+
+WebInspector.CSSKeyframesRule.prototype = {
+    /**
+     * @return {!WebInspector.CSSValue}
+     */
+    name: function()
+    {
+        return this._animationName;
+    },
+
+    /**
+     * @return {!Array.<!WebInspector.CSSKeyframeRule>}
+     */
+    keyframes: function()
+    {
+        return this._keyframes;
+    }
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.CSSRule}
+ * @param {!WebInspector.CSSStyleModel} cssModel
+ * @param {!CSSAgent.CSSKeyframeRule} payload
+ */
+WebInspector.CSSKeyframeRule = function(cssModel, payload)
+{
+    WebInspector.CSSRule.call(this, cssModel, payload);
+    this._keyText = new WebInspector.CSSValue(payload.keyText);
+}
+
+WebInspector.CSSKeyframeRule.prototype = {
+    /**
+     * @return {!WebInspector.CSSValue}
+        */
+    key: function()
+    {
+        return this._keyText;
+    },
+
+    /**
+     * @override
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     * @param {?WebInspector.CSSMedia} oldMedia
+     * @param {?WebInspector.CSSMedia} newMedia
+     */
+    _sourceStyleSheetEditedWithMedia: function(styleSheetId, oldRange, newRange, oldMedia, newMedia)
+    {
+        if (this.styleSheetId === styleSheetId)
+            this._keyText.sourceStyleRuleEdited(oldRange, newRange);
+        WebInspector.CSSRule.prototype._sourceStyleSheetEditedWithMedia.call(this, styleSheetId, oldRange, newRange, oldMedia, newMedia);
+    },
+
+    /**
+     * @param {string} newKeyText
+     * @param {function(boolean)} userCallback
+     */
+    setKeyText: function(newKeyText, userCallback)

[lushnikov, 2016/01/13 01:42:18]

Let's have it promisified right away!

[samli, 2016/01/13 04:59:36]

Done.

+    {
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!CSSAgent.Value} payload
+         * @this {WebInspector.CSSKeyframeRule}
+         */
+        function callback(error, payload)
+        {
+            if (error || !payload)
+                return null;
+            this._cssModel._domModel.markUndoableState();
+            this._cssModel._fireStyleSheetChanged(/** @type {string} */(this.styleSheetId));
+            this._keyText = new WebInspector.CSSValue(payload);
+            return true;
+        }
+
+        if (!this.styleSheetId)
+            throw "No rule stylesheet id";
+        var range = this._keyText.range;
+        if (!range)
+            throw "Keyframe key is not editable";
+        WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.StyleRuleEdited);
+        this._cssModel._agent.setKeyframeKey(this.styleSheetId, range, newKeyText, callback.bind(this))
+            .then(userCallback);
+    },
+
+    __proto__: WebInspector.CSSRule.prototype
+}
+
+/**
+ * @constructor
  * @param {!WebInspector.CSSStyleDeclaration} ownerStyle
  * @param {number} index
  * @param {string} name