Add Throbber control for DOMUI. Use it everywhere in options and in Sync setup UI.

chrome/browser/resources/shared/js/cr/ui/throbber.js

+// Copyright (c) 2010 The Chromium Authors. All rights reserved.

[James Hawkins, 2011/01/19 20:34:58]

nit: 2011

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('cr.ui', function() {
+  const Command = cr.ui.Command;
+
+  /**
+   * Creates a new throbber element.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  var Throbber = cr.ui.define('div');
+
+  Throbber.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /**
+     * Current animation position.
+     * @type {number}
+     * @private
+     */
+    currentPosition_: 0,
+
+    /**
+     * Initializes the throbber.
+     */
+    decorate: function() {
+      this.currentPosition_ = 0;
+      if (this.visible)
+        this.startTimer_();
+    },
+
+    /**
+     * Visibility of the throbber.
+     * @type {boolean}
+     */
+    set visible(visible) {
+      if (visible) {
+        this.style.visibility = 'inherit';
+        this.startTimer_();
+      } else {
+        this.style.visibility = 'hidden';
+        this.stopTimer_();
+      }
+    },
+    get visible() {
+      return this.style.visibility != 'hidden';

[arv (Not doing code reviews), 2011/01/19 21:11:18]

Should this be using computed style?

+    },
+
+    /**
+     * Switch to the next frame for the animation.

[James Hawkins, 2011/01/19 20:34:58]

nit: Switches

+     * @private
+     */
+    advance_: function() {

[arv (Not doing code reviews), 2011/01/19 21:11:18]

You can also use local functions.

+      this.currentPosition_ = (this.currentPosition_ - 16) % 576;

[arv (Not doing code reviews), 2011/01/19 21:11:18]

Please use a time based animation to prevent jerky animations.

+      this.style.backgroundPositionX = this.currentPosition_ + 'px';

[arv (Not doing code reviews), 2011/01/19 21:11:18]

Why do we use a sprite here when we can use rotate transformations?

[arv (Not doing code reviews), 2011/01/19 21:33:42]

To go even further we can do the whole animation in hardware accelerated CSS.
There is a step function for animations. Use the steps()
animation-timing-function.
http://dev.w3.org/csswg/css3-transitions/#transition-timing-function_tag

[Sergey Ulanov, 2011/01/20 02:00:49]

throbber.png has shadows, so it is not just rotation. It doesn't look right if
you just rotate the first frame.

[Sergey Ulanov, 2011/01/20 02:00:49]

Done.

+    },
+
+    /**
+     * Start the animation timer.

[James Hawkins, 2011/01/19 20:34:58]

nit: Starts

+     * @private
+     */
+    startTimer_: function() {
+      if (this.timer_)
+        this.stopTimer_();
+      this.timer_ = setInterval(this.advance_.bind(this), 30);

[arv (Not doing code reviews), 2011/01/19 21:11:18]

Use setTimeout (so that we can easily switch to requestAnimationFrame when
submitted, https://bugs.webkit.org/show_bug.cgi?id=51218 )

+    },
+
+    /**
+     * Stop the animation timer.

[James Hawkins, 2011/01/19 20:34:58]

nit: Stops

+     * @private
+     */
+    stopTimer_: function() {
+      if (this.timer_) {
+        clearInterval(this.timer_);
+        this.timer_ = null;
+      }
+    },
+  };
+
+  // Export
+  return {
+    Throbber: Throbber
+  };
+});