Devtools Animations: Basic animation inspection & control in Styles pane

Source/devtools/protocol.json

Index: Source/devtools/protocol.json
diff --git a/Source/devtools/protocol.json b/Source/devtools/protocol.json
index 2830392b8527630f9da64f8f1b2176ac6bb1e09a..a80627ad49e3f4b817ac920c4415853ae80976c4 100644
--- a/Source/devtools/protocol.json
+++ b/Source/devtools/protocol.json
@@ -2105,6 +2105,37 @@
                     { "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": "id", "type": "string", "description": "<code>AnimationPlayer</code>'s 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": [
@@ -2468,6 +2499,63 @@
                 ],
                 "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": "id", "type": "string", "description": "Id of the animation 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": "id", "type": "string", "description": "Id of the animation player." }
+                ],
+                "returns": [
+                    { "name": "animationPlayer", "$ref": "AnimationPlayer", "description": "Animation Player with current time set." }
+                ],
+                "description": "Plays animations relevant to the node.",
+                "hidden": true
+            },
+            {
+                "name": "setAnimationPlayerCurrentTime",
+                "parameters": [
+                    { "name": "id", "type": "string", "description": "Id of the animation 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": "getAnimationPlayerState",
+                "parameters": [
+                    { "name": "id", "type": "string", "description": "Id of the animation 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": [
@@ -2853,6 +2941,16 @@
                 "description": "Sets the new stylesheet text."
             },
             {
+                "name": "getKeyframeStylesForNode",
+                "parameters": [
+                    { "name": "id", "type": "string" }
+                ],
+                "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" },