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

chrome/browser/resources/options/clear_browser_data_overlay.js

 // Copyright (c) 2011 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.
 
 cr.define('options', function() {
 
   var OptionsPage = options.OptionsPage;
 
   /**
    * ClearBrowserDataOverlay class
@@ skipping 38 matching lines @@
         checkboxes[i].onclick = f;
       }
       this.updateCommitButtonState_();
 
       $('clearBrowserDataDismiss').onclick = function(event) {
         ClearBrowserDataOverlay.dismiss();
       };
       $('clearBrowserDataCommit').onclick = function(event) {
         chrome.send('performClearBrowserData');
       };
+
+      cr.ui.Throbber.decorate($('cbdThrobber'));
     },
 
     // Set the enabled state of the commit button.
     updateCommitButtonState_: function() {
       var checkboxes = document.querySelectorAll(
           '#cbdContentArea input[type=checkbox]');
       var isChecked = false;
       for (var i = 0; i < checkboxes.length; i++) {
         if (checkboxes[i].checked) {
           isChecked = true;
           break;
         }
       }
       $('clearBrowserDataCommit').disabled = !isChecked;
     },
   };
 
   //
   // Chrome callbacks
   //
   ClearBrowserDataOverlay.setClearingState = function(state) {
     $('deleteBrowsingHistoryCheckbox').disabled = state;
     $('deleteDownloadHistoryCheckbox').disabled = state;
     $('deleteCacheCheckbox').disabled = state;
     $('deleteCookiesCheckbox').disabled = state;
     $('deletePasswordsCheckbox').disabled = state;
     $('deleteFormDataCheckbox').disabled = state;
     $('clearBrowserDataTimePeriod').disabled = state;
-    $('cbdThrobber').style.visibility = state ? 'visible' : 'hidden';
+    $('cbdThrobber').visible = state;
 
     if (state)
       $('clearBrowserDataCommit').disabled = true;
     else
       ClearBrowserDataOverlay.getInstance().updateCommitButtonState_();
-
-    function advanceThrobber() {
-      var throbber = $('cbdThrobber');
-      // TODO(csilv): make this smoother using time-based animation?
-      throbber.style.backgroundPositionX =
-          ((parseInt(getComputedStyle(throbber).backgroundPositionX, 10) - 16) %
-          576) + 'px';
-    }
-    if (state) {
-      ClearBrowserDataOverlay.throbIntervalId =
-          setInterval(advanceThrobber, 30);
-    } else {
-      clearInterval(ClearBrowserDataOverlay.throbIntervalId);
-    }
   };
 
   ClearBrowserDataOverlay.setClearLocalDataLabel = function(label) {
     $('deleteCookiesLabel').innerText = label;
   };
 
   ClearBrowserDataOverlay.doneClearing = function() {
     // The delay gives the user some feedback that the clearing
     // actually worked. Otherwise the dialog just vanishes instantly in most
     // cases.
     window.setTimeout(function() {
       ClearBrowserDataOverlay.dismiss();
     }, 200);
   };
 
   ClearBrowserDataOverlay.dismiss = function() {
     OptionsPage.clearOverlays();
     this.setClearingState(false);
   };
 
   // Export
   return {
     ClearBrowserDataOverlay: ClearBrowserDataOverlay
   };
 });