Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/protocol.json

 {
     "version": { "major": "1", "minor": "1" },
     "domains": [{
         "domain": "Inspector",
         "hidden": true,
         "types": [],
         "commands": [
             {
                 "name": "enable",
                 "description": "Enables inspector domain notifications."
@@ skipping 2087 matching lines @@
                     { "name": "showExtensionLines", "type": "boolean", "optional": true, "description": "Whether the extension lines from node to the rulers should be shown (default: false)." },
                     { "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
                     { "name": "paddingColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
                     { "name": "borderColor", "$ref": "RGBA", "optional": true, "description": "The border highlight fill color (default: transparent)." },
                     { "name": "marginColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight fill color (default: transparent)." },
                     { "name": "eventTargetColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The event target element highlight fill color (default: transparent)." },
                     { "name": "shapeColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The shape outside fill color (default: transparent)." },
                     { "name": "shapeMarginColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The shape margin fill color (default: transparent)." }
                 ],
                 "description": "Configuration data for the highlighting of page elements."
+            },
+            {
+                "id": "AnimationPlayer",
+                "type": "object",
+                "hidden": true,
+                "properties": [
+                    { "name": "sequenceNumber", "type": "number", "description": "<code>AnimationPlayer</code>'s sequenceNumber which can be used as an id." },
+                    { "name": "paused", "type": "boolean", "description": "<code>AnimationPlayer</code>'s paused." },
+                    { "name": "finished", "type": "boolean", "description": "<code>AnimationPlayer</code>'s finished." },
+                    { "name": "playbackRate", "type": "number", "description": "<code>AnimationPlayer</code>'s playbackRate." },
+                    { "name": "startTime", "type": "number", "description": "<code>AnimationPlayer</code>'s current time." },
+                    { "name": "currentTime", "type": "number", "description": "<code>AnimationPlayer</code>'s current time." },
+                    { "name": "animation", "$ref": "DOM.AnimationNode", "description": "<code>AnimationPlayer</code>'s source animation." }
+                ],
+                "description": "AnimationPlayer instance."
+            },
+            {
+                "id": "AnimationNode",
+                "type": "object",
+                "hidden": true,
+                "properties": [
+                    { "name": "startDelay", "type": "number", "description": "<code>AnimationNode</code>'s start delay." },
+                    { "name": "playbackRate", "type": "number", "description": "<code>AnimationNode</code>'s playbackRate." },
+                    { "name": "iterationStart", "type": "number", "description": "<code>AnimationNode</code>'s iteration start." },
+                    { "name": "iterationCount", "type": "number", "description": "<code>AnimationNode</code>'s iteration count." },
+                    { "name": "duration", "type": "number", "description": "<code>AnimationNode</code>'s iteration duration." },
+                    { "name": "direction", "type": "number", "description": "<code>AnimationNode</code>'s playback direction." },
+                    { "name": "fillMode", "type": "number", "description": "<code>AnimationNode</code>'s fill mode." },
+                    { "name": "timeFraction", "type": "number", "description": "<code>AnimationNode</code>'s time fraction." }
+                ],
+                "description": "AnimationNode instance"
             }
         ],
         "commands": [
             {
                 "name": "enable",
                 "description": "Enables DOM agent for the given page."
             },
             {
                 "name": "disable",
                 "description": "Disables DOM agent for the given page."
@@ skipping 343 matching lines @@
             {
                 "name": "getRelayoutBoundary",
                 "parameters": [
                     { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node." }
                 ],
                 "returns": [
                     { "name": "nodeId", "$ref": "NodeId", "description": "Relayout boundary node id for the given node." }
                 ],
                 "description": "Returns the id of the nearest ancestor that is a relayout boundary.",
                 "hidden": true
+            },
+            {
+                "name": "getAnimationPlayersForNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get animation players for." }
+                ],
+                "returns": [
+                    { "name": "animationPlayers", "type": "array", "items": { "$ref": "AnimationPlayer" }, "description": "Array of animation players." }
+                ],
+                "description": "Returns animation players relevant to the node.",
+                "hidden": true
+            },
+            {
+                "name": "pauseAnimationPlayer",
+                "parameters": [
+                    { "name": "sequenceNumber", "$ref": "NodeId", "description": "Sequence number of the animations player." }
+                ],
+                "returns": [
+                    { "name": "animationPlayer", "$ref": "AnimationPlayer", "description": "Animation Player with current time set." }
+                ],
+                "description": "Pauses animations relevant to the node.",
+                "hidden": true
+            },
+            {
+                "name": "playAnimationPlayer",
+                "parameters": [
+                    { "name": "sequenceNumber", "$ref": "NodeId", "description": "Sequence number of the animations player." }
+                ],
+                "returns": [
+                    { "name": "animationPlayer", "$ref": "AnimationPlayer", "description": "Animation Player with current time set." }
+                ],
+                "description": "Plays animations relevant to the node.",
+                "hidden": true
+            },
+            {
+                "name": "setCurrentTimeAnimationPlayer",
+                "parameters": [
+                    { "name": "sequenceNumber", "$ref": "NodeId", "description": "Sequence number of the animations player." },
+                    { "name": "currentTime", "type": "number", "description": "Current time to set animation to"}
+                ],
+                "returns": [
+                    { "name": "animationPlayer", "$ref": "AnimationPlayer", "description": "Animation Player with current time set." }
+                ],
+                "description": "Sets the current time on given AnimationPlayer.",
+                "hidden": true
+            },
+            {
+                "name": "getStateAnimationPlayer",
+                "parameters": [
+                    { "name": "sequenceNumber", "$ref": "NodeId", "description": "Sequence number of the animations player." }
+                ],
+                "returns": [
+                    { "name": "currentTime", "type": "number", "description": "Current time of the animation player." },
+                    { "name": "isRunning", "type": "boolean", "description": "If the animation player is still running." }
+                ],
+                "description": "Gets the state of an AnimationPlayer.",
+                "hidden": true
             }
         ],
         "events": [
             {
                 "name": "documentUpdated",
                 "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
             },
             {
                 "name": "inspectNodeRequested",
                 "parameters": [
@@ skipping 365 matching lines @@
             },
             {
                 "name": "setStyleSheetText",
                 "parameters": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId" },
                     { "name": "text", "type": "string" }
                 ],
                 "description": "Sets the new stylesheet text."
             },
             {
+                "name": "getKeyframeStylesForNode",
+                "parameters": [
+                    { "name": "sequenceNumber", "$ref": "DOM.NodeId" }
+                ],
+                "returns": [
+                    { "name": "keyframeStyles", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Specified styles for animation keyframes." }
+                ],
+                "description": "Returns the animation keyframe styles for a given node."
+            },
+            {
                 "name": "setPropertyText",
                 "parameters": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId" },
                     { "name": "range", "$ref": "SourceRange", "description": "Either a source range of the property to be edited or an empty range representing a position for the property insertion." },
                     { "name": "text", "type": "string" }
                 ],
                 "returns": [
                     { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the property text modification." }
                 ],
                 "description": "Either replaces a property identified by <code>styleSheetId</code> and <code>range</code> with <code>text</code> or inserts a new property <code>text</code> at the position identified by an empty <code>range</code>."
@@ skipping 1553 matching lines @@
             {
                 "name": "dataAvailable",
                 "parameters": [
                     {"name": "value", "type": "array", "items": { "$ref": "PowerEvent" }, "description": "List of power events." }
                 ],
                 "handlers": ["browser", "frontend"]
             }
         ]
     }]
 }