MD Settings: animation interface

chrome/browser/resources/settings/animation/animation.js

Index: chrome/browser/resources/settings/animation/animation.js
diff --git a/chrome/browser/resources/settings/animation/animation.js b/chrome/browser/resources/settings/animation/animation.js
new file mode 100644
index 0000000000000000000000000000000000000000..05451e1aecb34daebd5d2157f5bf14d0a898b8fc
--- /dev/null
+++ b/chrome/browser/resources/settings/animation/animation.js
@@ -0,0 +1,87 @@
+// Copyright 2016 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.
+
+/**
+ * @fileoverview Simplified API wrapping native Web Animations with some sugar.
+ * A compromise between the draft spec and Chrome's evolving support. This API
+ * will be changed (or removed) as Chrome support evolves.
+ */
+cr.define('settings.animation', function() {
+  'use strict';
+
+  /**
+   * Default timing constants.
+   * @const
+   */
+  var Timing = {
+    DURATION: 250,
+    EASING: 'cubic-bezier(0.4, 0, 0.2, 1)',  // Fast out, slow in.
+  };
+
+  /**
+   * Offers a small subset of the v1 Animation interface. The underlying
+   * animation can be reversed, canceled or immediately finished.
+   * @see https://www.w3.org/TR/web-animations-1/#animation
+   *
+   * @constructor
+   * @extends {cr.EventTarget}
+   * @param {!Element} el The element to animate.
+   * @param {!Array<!Object>|!Object<!Array>|!Object<string>} keyframes
+   *     Keyframes, as in Element.prototype.animate.
+   * @param {number|!KeyframeEffectOptions=} opt_options Duration or options
+   *     object, as in Element.prototype.animate.
+   */
+  function Animation(el, keyframes, opt_options) {
+    // Disallow direct usage of the underlying animation.
+    this.animation_ = el.animate(keyframes, opt_options);
+
+    var self = this;
+    /** @type !Promise<!Animation> */
+    this.finished = new Promise(function(resolve, reject) {
+      // If we were implementing the full spec, we'd have to support
+      // removing or resetting these listeners.
+      self.animation_.addEventListener('finish', function(e) {
+        resolve(self.animation_);

[Dan Beam, 2016/06/17 19:22:42]

why are we keeping |animation_| private but passing it to the callback on
resolution?

[michaelpg, 2016/06/28 23:17:23]

removed from resolve

+        // According to the spec, queue a task to fire the event after
+        // resolving the promise.
+        setTimeout(function() {
+          self.dispatchEvent(e);
+          self.animation_ = undefined;
+        });

[Dan Beam, 2016/06/17 19:22:42]

can you combine this code into:

function dispatchAfter(e) {
  setTimeout(function() {
    self.dispatchEvent(e);
    self.animation_ = undefined;
  });
}

[michaelpg, 2016/06/28 23:17:23]

Done.

+      });
+      self.animation_.addEventListener('cancel', function(e) {
+        reject(new

[Dan Beam, 2016/06/17 19:22:42]

afaict, we should not reject for a cancelled animation as this seems validly
possible, and in the paradigm of promise, only stuff that would throw should
reject

[michaelpg, 2016/06/28 23:17:23]

there is a TODO in the spec to make this "cancel" the promise if cancelable
promises are ever added. until then, this is the behavior the spec prescribes,
so it's the behavior consumers should expect.

once the "finished" promise is implemented by Chrome we'll just delete this
code; if we gave it different behavior, we'd have to keep it around.

+            /**
+             * @see https://heycam.github.io/webidl/#es-DOMException-call
+             * @type {function (new:DOMException, string, string)}
+             **/(

[Dan Beam, 2016/06/17 19:22:42]

**/ -> */

[michaelpg, 2016/06/28 23:17:23]

Done.

+                DOMException
+            )('', 'AbortError'));
+        setTimeout(function() {
+          self.dispatchEvent(e);
+          self.animation_ = undefined;
+        });
+      });
+    });
+  }
+
+  Animation.prototype = {
+    __proto__: cr.EventTarget.prototype,
+
+    finish: function() {
+      assert(this.animation_);
+      this.animation_.finish();
+    },
+
+    cancel: function() {
+      assert(this.animation_);
+      this.animation_.cancel();
+    },
+  };
+
+  return {
+    Animation: Animation,
+    Timing: Timing,
+  };
+});