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." },

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

[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": [
             {
                 "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"]
             }
         ]
     }]
 }