Devtools Animations: Add buffer and effect selection to animation timeline

Source/devtools/front_end/animation/AnimationModel.js

 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 
 /**
  * @constructor
  * @extends {WebInspector.SDKModel}
  * @param {!WebInspector.Target} target
  */
 WebInspector.AnimationModel = function(target)
 {
     WebInspector.SDKModel.call(this, WebInspector.AnimationModel, target);
     this._agent = target.animationAgent();
     target.registerAnimationDispatcher(new WebInspector.AnimationDispatcher(this));
     /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */
     this._animationsById = new Map();
     /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationGroup>} */
     this._animationGroups = new Map();
     /** @type {!Array.<string>} */
     this._pendingAnimations = [];
 }
 
 WebInspector.AnimationModel.Events = {
-    AnimationCreated: "AnimationCreated",
+    AnimationGroupStarted: "AnimationGroupStarted",
     AnimationCanceled: "AnimationCanceled"
 }
 
 WebInspector.AnimationModel.prototype = {
     /**
      * @param {string} id
      */
     animationCreated: function(id)
     {
         this._pendingAnimations.push(id);
     },
 
     /**
      * @param {!AnimationAgent.Animation} payload
      */
     animationStarted: function(payload)
     {
         var animation = WebInspector.AnimationModel.Animation.parsePayload(this.target(), payload);
         this._animationsById.set(animation.id(), animation);
 
         for (var id of this._pendingAnimations) {
             if (!this._animationsById.get(id))
                 return;
         }
 
         while (this._pendingAnimations.length) {
             var group = this._createGroupFromPendingAnimations();
             this._animationGroups.set(group.id(), group);
-            // TODO(samli): Dispatch single group event.
-            for (var anim of group.animations())
-                this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationCreated, { "player": anim, "resetTimeline": anim.id() === group.id() });
+            this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationGroupStarted, group);
         }
     },
 
     /**
      * @return {!WebInspector.AnimationModel.AnimationGroup}
      */
     _createGroupFromPendingAnimations: function()
     {
         console.assert(this._pendingAnimations.length);
         var groupedAnimations = [this._animationsById.get(this._pendingAnimations.shift())];
@@ skipping 445 matching lines @@
     },
 
     /**
      * @return {!Array.<!WebInspector.AnimationModel.Animation>}
      */
     animations: function()
     {
         return this._animations;
     },
 
+    /**
+     * @return {number}
+     */
+    startTime: function()
+    {
+        return this._animations[0].startTime();
+    },
+
     __proto__: WebInspector.SDKObject.prototype
 }
 
 
 /**
  * @constructor
  * @implements {AnimationAgent.Dispatcher}
  */
 WebInspector.AnimationDispatcher = function(animationModel)
 {
@@ skipping 21 matching lines @@
 
     /**
      * @override
      * @param {string} id
      */
     animationCanceled: function(id)
     {
         this._animationModel.animationCanceled(id);
     }
 }