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 5a8c52cf89b00b3023400801dc70eabb33a9c7cc..85b367564889926aa9857a22dbca5a44e5c5956c 100644
--- a/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js
@@ -51,7 +51,7 @@ WebInspector.CSSStyleModel = function(target)
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!Array.<!CSSAgent.RuleMatch>|undefined} matchArray
- * @return {!Array.<!WebInspector.CSSRule>}
+ * @return {!Array.<!WebInspector.CSSStyleRule>}
  */
 WebInspector.CSSStyleModel.parseRuleMatchArrayPayload = function(cssModel, matchArray)
 {
@@ -60,7 +60,7 @@ WebInspector.CSSStyleModel.parseRuleMatchArrayPayload = function(cssModel, match
 
     var result = [];
     for (var i = 0; i < matchArray.length; ++i)
-        result.push(new WebInspector.CSSRule(cssModel, matchArray[i].rule, matchArray[i].matchingSelectors));
+        result.push(new WebInspector.CSSStyleRule(cssModel, matchArray[i].rule, matchArray[i].matchingSelectors));
     return result;
 }
 WebInspector.CSSStyleModel.Events = {
@@ -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)
@@ -310,7 +333,7 @@ WebInspector.CSSStyleModel.prototype = {
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
-     * @param {!Array.<!WebInspector.CSSRuleSelector>} selectors
+     * @param {!Array.<!WebInspector.CSSValue>} selectors
      * @return {!Promise<?Array<number>>}
      */
     _computeMatchingSelectors: function(nodeId, selectors)
@@ -356,7 +379,7 @@ WebInspector.CSSStyleModel.prototype = {
      * @param {!WebInspector.DOMNode} node
      * @param {string} ruleText
      * @param {!WebInspector.TextRange} ruleLocation
-     * @param {function(?WebInspector.CSSRule)} userCallback
+     * @param {function(?WebInspector.CSSStyleRule)} userCallback
      */
     addRule: function(styleSheetId, node, ruleText, ruleLocation, userCallback)
     {
@@ -368,7 +391,7 @@ WebInspector.CSSStyleModel.prototype = {
         /**
          * @param {?Protocol.Error} error
          * @param {?CSSAgent.CSSRule} rulePayload
-         * @return {?WebInspector.CSSRule}
+         * @return {?WebInspector.CSSStyleRule}
          * @this {WebInspector.CSSStyleModel}
          */
         function parsePayload(error, rulePayload)
@@ -377,27 +400,27 @@ WebInspector.CSSStyleModel.prototype = {
                 return null;
             this._domModel.markUndoableState();
             this._fireStyleSheetChanged(styleSheetId);
-            return new WebInspector.CSSRule(this, rulePayload);
+            return new WebInspector.CSSStyleRule(this, rulePayload);
         }
 
         /**
-         * @param {?WebInspector.CSSRule} rule
-         * @return {!Promise<?WebInspector.CSSRule>}
+         * @param {?WebInspector.CSSStyleRule} rule
+         * @return {!Promise<?WebInspector.CSSStyleRule>}
          * @this {WebInspector.CSSStyleModel}
          */
         function onRuleParsed(rule)
         {
             if (!rule)
-                return Promise.resolve(/** @type {?WebInspector.CSSRule} */(null));
+                return Promise.resolve(/** @type {?WebInspector.CSSStyleRule} */(null));
 
             return this._computeMatchingSelectors(node.id, rule.selectors)
                 .then(updateMatchingSelectors.bind(null, rule));
         }
 
         /**
-         * @param {!WebInspector.CSSRule} rule
+         * @param {!WebInspector.CSSStyleRule} rule
          * @param {?Array<number>} matchingSelectors
-         * @return {?WebInspector.CSSRule}
+         * @return {?WebInspector.CSSStyleRule}
          */
         function updateMatchingSelectors(rule, matchingSelectors)
         {
@@ -997,7 +1020,7 @@ WebInspector.CSSStyleDeclaration.prototype = {
  * @constructor
  * @param {!CSSAgent.Value} payload
  */
-WebInspector.CSSRuleSelector = function(payload)
+WebInspector.CSSValue = function(payload)
 {
     this.text = payload.text;
     if (payload.range)
@@ -1006,19 +1029,19 @@ WebInspector.CSSRuleSelector = function(payload)
 
 /**
  * @param {!CSSAgent.SelectorList} selectorList
- * @return {!Array<!WebInspector.CSSRuleSelector>}
+ * @return {!Array<!WebInspector.CSSValue>}
  */
-WebInspector.CSSRuleSelector.parseSelectorListPayload = function(selectorList)
+WebInspector.CSSValue.parseSelectorListPayload = function(selectorList)
 {
     var selectors = [];
     for (var i = 0; i < selectorList.selectors.length; ++i) {
         var selectorPayload = selectorList.selectors[i];
-        selectors.push(new WebInspector.CSSRuleSelector(selectorPayload));
+        selectors.push(new WebInspector.CSSValue(selectorPayload));
     }
     return selectors;
 }
 
-WebInspector.CSSRuleSelector.prototype = {
+WebInspector.CSSValue.prototype = {
     /**
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
@@ -1034,18 +1057,12 @@ WebInspector.CSSRuleSelector.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
- * @param {!CSSAgent.CSSRule} payload
- * @param {!Array.<number>=} matchingSelectors
+ * @param {{ style: !CSSAgent.CSSStyle, styleSheetId: (string|undefined), origin: !CSSAgent.StyleSheetOrigin}} payload
  */
-WebInspector.CSSRule = function(cssModel, payload, matchingSelectors)
+WebInspector.CSSRule = function(cssModel, payload)
 {
     this._cssModel = cssModel;
     this.styleSheetId = payload.styleSheetId;
-    if (matchingSelectors)
-        this.matchingSelectors = matchingSelectors;
-
-    /** @type {!Array.<!WebInspector.CSSRuleSelector>} */
-    this.selectors = WebInspector.CSSRuleSelector.parseSelectorListPayload(payload.selectorList);
 
     if (this.styleSheetId) {
         var styleSheetHeader = cssModel.styleSheetHeaderForId(this.styleSheetId);
@@ -1057,12 +1074,115 @@ WebInspector.CSSRule = function(cssModel, payload, matchingSelectors)
         this.media = WebInspector.CSSMedia.parseMediaArrayPayload(cssModel, payload.media);
 }
 
+WebInspector.CSSRule.prototype = {

[pfeldman, 2016/01/13 00:08:19]

What is happening here? Can we land this as a separate patch?

[samli, 2016/01/13 00:53:37]

Done. Split into a separate patch.

+    /**
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
+    {
+        this._sourceStyleSheetEditedWithMedia(styleSheetId, oldRange, newRange, null, null);
+    },
+
+    /**
+     * @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.media) {
+            for (var i = 0; i < this.media.length; ++i) {
+                if (oldMedia && newMedia && oldMedia.equal(this.media[i])) {
+                    this.media[i] = newMedia;
+                } else {
+                    this.media[i].sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
+                }
+            }
+        }
+        this.style.sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
+    },
+
+    /**
+     * @param {!WebInspector.CSSMedia} oldMedia
+     * @param {!WebInspector.CSSMedia} newMedia
+     */
+    mediaEdited: function(oldMedia, newMedia)
+    {
+        this._sourceStyleSheetEditedWithMedia(/** @type {string} */ (oldMedia.parentStyleSheetId), oldMedia.range, newMedia.range, oldMedia, newMedia);
+    },
+
+    /**
+     * @return {string}
+     */
+    resourceURL: function()
+    {
+        if (!this.styleSheetId)
+            return "";
+        var styleSheetHeader = this._cssModel.styleSheetHeaderForId(this.styleSheetId);
+        return styleSheetHeader.resourceURL();
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isUserAgent: function()
+    {
+        return this.origin === CSSAgent.StyleSheetOrigin.UserAgent;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isInjected: function()
+    {
+        return this.origin === CSSAgent.StyleSheetOrigin.Injected;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isViaInspector: function()
+    {
+        return this.origin === CSSAgent.StyleSheetOrigin.Inspector;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isRegular: function()
+    {
+        return this.origin === CSSAgent.StyleSheetOrigin.Regular;
+    }
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.CSSRule}
+ * @param {!WebInspector.CSSStyleModel} cssModel
+ * @param {!CSSAgent.CSSRule} payload
+ * @param {!Array.<number>=} matchingSelectors
+ */
+WebInspector.CSSStyleRule = function(cssModel, payload, matchingSelectors)
+{
+    WebInspector.CSSRule.call(this, cssModel, payload);
+
+    if (matchingSelectors)
+        this.matchingSelectors = matchingSelectors;
+
+    /** @type {!Array.<!WebInspector.CSSValue>} */
+    this.selectors = WebInspector.CSSValue.parseSelectorListPayload(payload.selectorList);
+}
+
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {string} selectorText
- * @return {!WebInspector.CSSRule}
+ * @return {!WebInspector.CSSStyleRule}
  */
-WebInspector.CSSRule.createDummyRule = function(cssModel, selectorText)
+WebInspector.CSSStyleRule.createDummyRule = function(cssModel, selectorText)
 {
     var dummyPayload = {
         selectorList: {
@@ -1075,10 +1195,10 @@ WebInspector.CSSRule.createDummyRule = function(cssModel, selectorText)
             cssProperties: []
         }
     };
-    return new WebInspector.CSSRule(cssModel, /** @type {!CSSAgent.CSSRule} */(dummyPayload));
+    return new WebInspector.CSSStyleRule(cssModel, /** @type {!CSSAgent.CSSRule} */(dummyPayload));
 }
 
-WebInspector.CSSRule.prototype = {
+WebInspector.CSSStyleRule.prototype = {
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {string} newSelector
@@ -1089,7 +1209,7 @@ WebInspector.CSSRule.prototype = {
         /**
          * @param {?Protocol.Error} error
          * @param {?CSSAgent.SelectorList} selectorPayload
-         * @return {?Array.<!WebInspector.CSSRuleSelector>}
+         * @return {?Array.<!WebInspector.CSSValue>}
          * @this {WebInspector.CSSRule}
          */
         function callback(error, selectorPayload)
@@ -1098,7 +1218,7 @@ WebInspector.CSSRule.prototype = {
                 return null;
             this._cssModel._domModel.markUndoableState();
             this._cssModel._fireStyleSheetChanged(/** @type {string} */(this.styleSheetId));
-            return WebInspector.CSSRuleSelector.parseSelectorListPayload(selectorPayload);
+            return WebInspector.CSSValue.parseSelectorListPayload(selectorPayload);
         }
 
         if (!this.styleSheetId)
@@ -1113,7 +1233,7 @@ WebInspector.CSSRule.prototype = {
             .then(userCallback);
 
         /**
-         * @param {?Array<!WebInspector.CSSRuleSelector>} selectors
+         * @param {?Array<!WebInspector.CSSValue>} selectors
          * @return {!Promise<boolean>}
          * @this {WebInspector.CSSRule}
          */
@@ -1126,7 +1246,7 @@ WebInspector.CSSRule.prototype = {
         }
 
         /**
-         * @param {!Array<!WebInspector.CSSRuleSelector>} selectors
+         * @param {!Array<!WebInspector.CSSValue>} selectors
          * @param {?Array<number>} matchingSelectors
          * @return {boolean}
          * @this {WebInspector.CSSRule}
@@ -1162,16 +1282,7 @@ WebInspector.CSSRule.prototype = {
     },
 
     /**
-     * @param {string} styleSheetId
-     * @param {!WebInspector.TextRange} oldRange
-     * @param {!WebInspector.TextRange} newRange
-     */
-    sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
-    {
-        this._sourceStyleSheetEditedWithMedia(styleSheetId, oldRange, newRange, null, null);
-    },
-
-    /**
+     * @override
      * @param {string} styleSheetId
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
@@ -1184,36 +1295,8 @@ WebInspector.CSSRule.prototype = {
             for (var i = 0; i < this.selectors.length; ++i)
                 this.selectors[i].sourceStyleRuleEdited(oldRange, newRange);
         }
-        if (this.media) {
-            for (var i = 0; i < this.media.length; ++i) {
-                if (oldMedia && newMedia && oldMedia.equal(this.media[i])) {
-                    this.media[i] = newMedia;
-                } else {
-                    this.media[i].sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
-                }
-            }
-        }
-        this.style.sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
-    },
 
-    /**
-     * @param {!WebInspector.CSSMedia} oldMedia
-     * @param {!WebInspector.CSSMedia} newMedia
-     */
-    mediaEdited: function(oldMedia, newMedia)
-    {
-        this._sourceStyleSheetEditedWithMedia(/** @type {string} */ (oldMedia.parentStyleSheetId), oldMedia.range, newMedia.range, oldMedia, newMedia);
-    },
-
-    /**
-     * @return {string}
-     */
-    resourceURL: function()
-    {
-        if (!this.styleSheetId)
-            return "";
-        var styleSheetHeader = this._cssModel.styleSheetHeaderForId(this.styleSheetId);
-        return styleSheetHeader.resourceURL();
+        WebInspector.CSSRule.prototype._sourceStyleSheetEditedWithMedia.call(this, styleSheetId, oldRange, newRange, oldMedia, newMedia);
     },
 
     /**
@@ -1243,37 +1326,107 @@ WebInspector.CSSRule.prototype = {
         return styleSheetHeader.columnNumberInSource(selector.range.startLine, selector.range.startColumn);
     },
 
+    __proto__: WebInspector.CSSRule.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 {boolean}
+     * @return {!WebInspector.CSSValue}
      */
-    isUserAgent: function()
+    name: function()
     {
-        return this.origin === CSSAgent.StyleSheetOrigin.UserAgent;
+        return this._animationName;
     },
 
     /**
-     * @return {boolean}
+     * @return {!Array.<!WebInspector.CSSKeyframeRule>}
      */
-    isInjected: function()
+    keyframes: function()
     {
-        return this.origin === CSSAgent.StyleSheetOrigin.Injected;
+        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;
     },
 
     /**
-     * @return {boolean}
+     * @override
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     * @param {?WebInspector.CSSMedia} oldMedia
+     * @param {?WebInspector.CSSMedia} newMedia
      */
-    isViaInspector: function()
+    _sourceStyleSheetEditedWithMedia: function(styleSheetId, oldRange, newRange, oldMedia, newMedia)
     {
-        return this.origin === CSSAgent.StyleSheetOrigin.Inspector;
+        if (this.styleSheetId === styleSheetId)
+            this._keyText.sourceStyleRuleEdited(oldRange, newRange);
+        WebInspector.CSSRule.prototype._sourceStyleSheetEditedWithMedia.call(this, styleSheetId, oldRange, newRange, oldMedia, newMedia);
     },
 
     /**
-     * @return {boolean}
+     * @param {string} newKeyText
+     * @param {function(boolean)} userCallback
      */
-    isRegular: function()
+    setKeyText: function(newKeyText, userCallback)
     {
-        return this.origin === CSSAgent.StyleSheetOrigin.Regular;
-    }
+        /**
+         * @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
 }
 
 /**