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

chrome/browser/resources/options/import_data_overlay.js

 // Copyright (c) 2010 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;
 
   /**
    * ImportDataOverlay class
    * Encapsulated handling of the 'Import Data' overlay page.
    * @class
    */
   function ImportDataOverlay() {
     OptionsPage.call(this,
                      'importDataOverlay',
                      templateData.import_data_title,
                      'import-data-overlay');
   }
 
-  ImportDataOverlay.throbIntervalId = 0;
-
   cr.addSingletonGetter(ImportDataOverlay);
 
   ImportDataOverlay.prototype = {
     // Inherit from OptionsPage.
     __proto__: OptionsPage.prototype,
 
     /**
      * Initialize the page.
      */
     initializePage: function() {
@@ skipping 20 matching lines @@
             String($('import-history').checked),
             String($('import-favorites').checked),
             String($('import-passwords').checked),
             String($('import-search').checked)]);
       };
 
       $('import-data-cancel').onclick = function() {
         ImportDataOverlay.dismiss();
       };
 
+      cr.ui.Throbber.decorate($('import-throbber'));
+
       // Form controls are disabled until the profile list has been loaded.
       self.setControlsSensitive_(false);
     },
 
     /**
      * Set enabled and checked state of the commit button.
      * @private
      */
     validateCommitButton_: function() {
       var somethingToImport =
@@ skipping 87 matching lines @@
       var checkboxes =
           document.querySelectorAll('#import-checkboxes input[type=checkbox]');
       for (var i = 0; i < checkboxes.length; i++) {
         checkboxes[i].disabled = true;
       }
     } else {
       ImportDataOverlay.getInstance().updateCheckboxes_();
     }
     $('import-browsers').disabled = state;
     $('import-data-commit').disabled = state;
-    $('import-throbber').style.visibility = state ? "visible" : "hidden";
-
-    function advanceThrobber() {
-      var throbber = $('import-throbber');
-      throbber.style.backgroundPositionX =
-          ((parseInt(getComputedStyle(throbber).backgroundPositionX, 10) - 16)
-          % 576) + 'px';
-    }
-    if (state) {
-      ImportDataOverlay.throbIntervalId = setInterval(advanceThrobber, 30);
-    } else {
-      clearInterval(ImportDataOverlay.throbIntervalId);
-    }
+    $('import-throbber').visible = state;
   };
 
   /**
    * Remove the import overlay from display.
    */
   ImportDataOverlay.dismiss = function() {
     ImportDataOverlay.setImportingState(false);
     OptionsPage.clearOverlays();
   }
 
   // Export
   return {
     ImportDataOverlay: ImportDataOverlay
   };
 
 });