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

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

BUG=69755
TEST=Throbber works properly when settings page is scaled.

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=72104

[James Hawkins, 2011-01-19 20:34:57]

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/opt...
File chrome/browser/resources/options/import_data_overlay.html (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/opt...
chrome/browser/resources/options/import_data_overlay.html:29: <div
id="import-throbber" class="throbber" style="visibility:hidden;"></div>
No style declarations in html markup.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
File chrome/browser/resources/shared/css/throbber.css (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/css/throbber.css:3: background-image:
url("../../../../../app/resources/throbber.png");
Alphabetize properties.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/css/throbber.css:6: background-position: 0px;
s/px/0/

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
File chrome/browser/resources/shared/js/cr/ui/throbber.js (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:1: // Copyright (c) 2010
The Chromium Authors. All rights reserved.
nit: 2011

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:53: * Switch to the next
frame for the animation.
nit: Switches

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:62: * Start the animation
timer.
nit: Starts

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:72: * Stop the animation
timer.
nit: Stops

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

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
File chrome/browser/resources/shared/js/cr/ui/throbber.js (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:49: return
this.style.visibility != 'hidden';
Should this be using computed style?

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:56: advance_: function() {
You can also use local functions.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:57: this.currentPosition_ =
(this.currentPosition_ - 16) % 576;
Please use a time based animation to prevent jerky animations.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:58:
this.style.backgroundPositionX = this.currentPosition_ + 'px';
Why do we use a sprite here when we can use rotate transformations?

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:68: this.timer_ =
setInterval(this.advance_.bind(this), 30);
Use setTimeout (so that we can easily switch to requestAnimationFrame when
submitted, https://bugs.webkit.org/show_bug.cgi?id=51218 )

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

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
File chrome/browser/resources/shared/js/cr/ui/throbber.js (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:58:
this.style.backgroundPositionX = this.currentPosition_ + 'px';
On 2011/01/19 21:11:18, arv wrote:
> Why do we use a sprite here when we can use rotate transformations?

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]

Changed this to use -webkit-animation. Now we don't need any javascript!

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/opt...
File chrome/browser/resources/options/import_data_overlay.html (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/opt...
chrome/browser/resources/options/import_data_overlay.html:29: <div
id="import-throbber" class="throbber" style="visibility:hidden;"></div>
On 2011/01/19 20:34:58, James Hawkins wrote:
> No style declarations in html markup.

Done.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
File chrome/browser/resources/shared/css/throbber.css (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/css/throbber.css:3: background-image:
url("../../../../../app/resources/throbber.png");
On 2011/01/19 20:34:58, James Hawkins wrote:
> Alphabetize properties.

Done.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/css/throbber.css:6: background-position: 0px;
On 2011/01/19 20:34:58, James Hawkins wrote:
> s/px/0/

Done.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
File chrome/browser/resources/shared/js/cr/ui/throbber.js (right):

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:58:
this.style.backgroundPositionX = this.currentPosition_ + 'px';
On 2011/01/19 21:11:18, arv wrote:
> Why do we use a sprite here when we can use rotate transformations?
throbber.png has shadows, so it is not just rotation. It doesn't look right if
you just rotate the first frame.

http://codereview.chromium.org/6378006/diff/2001/chrome/browser/resources/sha...
chrome/browser/resources/shared/js/cr/ui/throbber.js:58:
this.style.backgroundPositionX = this.currentPosition_ + 'px';
On 2011/01/19 21:33:42, arv wrote:
> On 2011/01/19 21:11:18, arv wrote:
> > Why do we use a sprite here when we can use rotate transformations?
> 
> 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

Done.

[arv (Not doing code reviews), 2011-01-20 19:29:43]

Awesome

[James Hawkins, 2011-01-20 21:21:06]

LGTM

http://codereview.chromium.org/6378006/diff/11001/chrome/browser/resources/sh...
File chrome/browser/resources/shared/css/throbber.css (right):

http://codereview.chromium.org/6378006/diff/11001/chrome/browser/resources/sh...
chrome/browser/resources/shared/css/throbber.css:7: -webkit-animation:
throbber-animation 1s steps(36, end) 0 infinite;
nit: -webkit-animation should be moved to the top.

[Sergey Ulanov, 2011-01-21 03:01:49]

http://codereview.chromium.org/6378006/diff/11001/chrome/browser/resources/sh...
File chrome/browser/resources/shared/css/throbber.css (right):

http://codereview.chromium.org/6378006/diff/11001/chrome/browser/resources/sh...
chrome/browser/resources/shared/css/throbber.css:7: -webkit-animation:
throbber-animation 1s steps(36, end) 0 infinite;
On 2011/01/20 21:21:08, James Hawkins wrote:
> nit: -webkit-animation should be moved to the top.

Done.