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..65acc5218aeed39e6c1f042a9a5183d0973097d8 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": "sequenceNumber", "type": "number", "description": "<code>AnimationPlayer</code>'s sequenceNumber which can be used as an id." },

[caseq, 2014/10/02 09:48:02]

Can we just call it an id for consistency? Also, we're moving towards using
strings as ids to get a bit more flexibility when we need composited ids (e.g.
when we eventually need to identify objects in multiple renderers). I'd suggest
introducing an AnimationPlayerId type which is defined to string (please see
LayerId or ScriptIdentifier for an example).

[samli, 2014/10/03 06:05:05]

Ack. Will change to use a String id. I'll upload in next patchset.

[samli, 2014/10/03 08:21:10]

Done now.

+                    { "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": "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",

[caseq, 2014/10/02 09:48:02]

I wonder if we instead want to get events on animation player state change?

[samli, 2014/10/03 06:05:05]

What would be the best way to get events, register a callback? Any good examples
of that elsewhere? It's probably what we want to do for changes to the animation
itself.

Here I think polling on a requestAnimationFrame tick is sufficient since we
simply want to get the current time which is always changing (this stops polling
once the animation stops).

+                "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": [
@@ -2853,6 +2941,16 @@
                 "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" },