Devtools: Add editable keyframes to the styles sidebar pane

third_party/WebKit/Source/devtools/protocol.json

 {
     "version": { "major": "1", "minor": "1" },
     "domains": [{
         "domain": "Inspector",
         "hidden": true,
         "types": [],
         "commands": [
             {
                 "name": "enable",
                 "description": "Enables inspector domain notifications.",
@@ skipping 3109 matching lines @@
                 "properties": [
                     { "name": "animationName", "$ref": "Value", "description": "Animation name." },
                     { "name": "keyframes", "type": "array", "items": { "$ref": "CSSKeyframeRule" }, "description": "List of keyframes." }
                 ],
                 "description": "CSS keyframes rule representation."
             },
             {
                 "id": "CSSKeyframeRule",
                 "type": "object",
                 "properties": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId", "optional": true, "description": "The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from." },
+                    { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
                     { "name": "keyText", "$ref": "Value", "description": "Associated key text." },
                     { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." }
                 ],
                 "description": "CSS keyframe rule representation."
             }
         ],
         "commands": [
             {
                 "name": "enable",
                 "async": true,
                 "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
             },
             {
                 "name": "disable",
                 "description": "Disables the CSS agent for the given page."
             },
             {
                 "name": "getMatchedStylesForNode",
                 "parameters": [
                     { "name": "nodeId", "$ref": "DOM.NodeId" }
                 ],
                 "returns": [
                     { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
                     { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."},
                     { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
                     { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoElementMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
-                    { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+                    { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." },
+                    { "name": "cssKeyframesRules", "type": "array", "items": { "$ref": "CSSKeyframesRule" }, "optional": true, "description": "A list of CSS keyframed animations matching this node." }
                 ],
                 "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
             },
             {
                 "name": "getInlineStylesForNode",
                 "parameters": [
                     { "name": "nodeId", "$ref": "DOM.NodeId" }
                 ],
                 "returns": [
                     { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
@@ skipping 16 matching lines @@
                 "parameters": [
                     { "name": "nodeId", "$ref": "DOM.NodeId" }
                 ],
                 "returns": [
                     { "name": "fonts", "type": "array", "items": { "$ref": "PlatformFontUsage" }, "description": "Usage statistics for every employed platform font." }
                 ],
                 "description": "Requests information about platform fonts which we used to render child TextNodes in the given node.",
                 "hidden": true
             },
             {
-                "name": "getCSSAnimationsForNode",
-                "parameters": [
-                    { "name": "nodeId", "$ref": "DOM.NodeId" }
-                ],
-                "returns": [
-                    { "name": "cssKeyframesRules", "type": "array", "items": { "$ref": "CSSKeyframesRule" }, "optional": true, "description": "A list of CSS keyframed animations matching this node." }
-                ],
-                "description": "Returns all CSS keyframed animations mtaching this node."
-            },
-            {
                 "name": "getStyleSheetText",
                 "parameters": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId" }
                 ],
                 "returns": [
                     { "name": "text", "type": "string", "description": "The stylesheet text." }
                 ],
                 "description": "Returns the current textual content and the URL for a stylesheet."
             },
             {
@@ skipping 13 matching lines @@
                     { "name": "styleSheetId", "$ref": "StyleSheetId" },
                     { "name": "range", "$ref": "SourceRange" },
                     { "name": "selector", "type": "string" }
                 ],
                 "returns": [
                     { "name": "selectorList", "$ref": "SelectorList", "description": "The resulting selector list after modification." }
                 ],
                 "description": "Modifies the rule selector."
             },
             {
+                "name": "setKeyframeKey",
+                "parameters": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                    { "name": "range", "$ref": "SourceRange" },
+                    { "name": "keyText", "type": "string" }
+                ],
+                "returns": [
+                    { "name": "keyText", "$ref": "Value", "description": "The resulting key text after modification." }
+                ],
+                "description": "Modifies the keyframe rule key text."
+            },
+            {
                 "name": "setStyleText",
                 "parameters": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId" },
                     { "name": "range", "$ref": "SourceRange" },
                     { "name": "text", "type": "string" }
                 ],
                 "returns": [
                     { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the selector modification." }
                 ],
                 "description": "Modifies the style text."
@@ skipping 2062 matching lines @@
                 ],
                 "returns": [
                     { "name": "accessibilityNode", "$ref": "AXNode", "description": "The <code>Accessibility.AXNode</code> for this DOM node, if it exists.", "optional": true }
                 ],
                 "description": "Fetches the accessibility node for this DOM node, if it exists.",
                 "hidden": true
             }
         ]
     }]
 }