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. Review URL: http://codereview.chromium.org/6378006 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@72104 0039d316-1c4b-4281-b951-d872f2087c98

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. Review URL: http://codereview.chromium.org/6378006 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@72104 0039d316-1c4b-4281-b951-d872f2087c98
b0fc6317 · sergeyu@chromium.org · a19c9b67 · b0fc6317 · b0fc6317 · b0fc6317
Commit b0fc6317 authored Jan 21, 2011 by sergeyu@chromium.org
12 changed files
--- a/chrome/browser/dom_ui/shared_resources_data_source.cc
+++ b/chrome/browser/dom_ui/shared_resources_data_source.cc
@@ -32,6 +32,8 @@ int PathToIDR(const std::string& path) {
    idr = IDR_FOLDER_OPEN;
  } else if (path == "app/resources/folder_open_rtl.png") {
    idr = IDR_FOLDER_OPEN_RTL;
+  } else if (path == "app/resources/throbber.png") {
+    idr = IDR_THROBBER;
  } else {
    // The name of the files in the grd list are prefixed with the following
    // directory:

--- a/chrome/browser/remoting/resources/remoting_setting_up.html
+++ b/chrome/browser/remoting/resources/remoting_setting_up.html
@@ -3,13 +3,8 @@
 <title></title>
 <link rel="stylesheet" type="text/css" href="remoting_setup_flow.css" />
 <style type="text/css">
-#throb {
+#throbber {
-  background-image: url("../../../../app/resources/throbber.png");
-  width: 16px;
-  height: 16px;
-  background-position: 0px;
  margin: -3px 10px;
-  display: inline-block;
 }
 #setting_up {
  margin: 100px;
@@ -21,23 +16,13 @@
  font-size: 125%;
 }
 </style>
+<link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <script src="chrome://resources/js/cr.js"></script>
-<script>
-  function advanceThrobber() {
-    var throbber = document.getElementById('throb');
-    throbber.style.backgroundPositionX =
-        ((parseInt(getComputedStyle(throbber).backgroundPositionX) - 16) %
-        576) + 'px';
-  }
-  setInterval(advanceThrobber, 30);
-</script>
 </head>
 <body i18n-values=".style.fontFamily:fontfamily">
 <form id="settingUpForm" onSubmit="return false;">
  <div id="setting_up">
-    <span id="throbber_container">
+    <div id="throbber" class="throbber"></div>
-      <span id="throb"></span>
-    </span>
    <div id="setting_up_label" i18n-content="settingup"></div>
  </div>
  <div class="remoting-footer">

--- a/chrome/browser/resources/options/clear_browser_data_overlay.html
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.html
@@ -41,7 +41,7 @@
  <div id="cbdActionArea">
    <a target="_blank" i18n-content="flash_storage_settings"
        i18n-values="href:flash_storage_url"></a>
-    <span id="cbdThrobber"></span>
+    <div id="cbdThrobber" class="throbber"></div>
    <div class="button-strip">
      <button id="clearBrowserDataDismiss" i18n-content="cancel"></button>
      <button id="clearBrowserDataCommit"

--- a/chrome/browser/resources/options/clear_browser_data_overlay.js
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.js
@@ -90,20 +90,6 @@ cr.define('options', function() {
      $('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) {

--- a/chrome/browser/resources/options/import_data_overlay.css
+++ b/chrome/browser/resources/options/import_data_overlay.css
 #import-throbber {
-  background-image: url("../../../../app/resources/throbber.png");
-  width: 16px;
-  height: 16px;
  margin: -3px 10px;
-  display: inline-block;
  visibility: hidden;
 }
--- a/chrome/browser/resources/options/import_data_overlay.html
+++ b/chrome/browser/resources/options/import_data_overlay.html
@@ -26,7 +26,7 @@
    </div>
  </div>
  <div class="action-area">
-    <span id="import-throbber"></span>
+    <div id="import-throbber" class="throbber"></div>
    <div class="button-strip">
      <button id="import-data-cancel" i18n-content="cancel"></button>
      <button id="import-data-commit" i18n-content="importCommit"></button>

--- a/chrome/browser/resources/options/import_data_overlay.js
+++ b/chrome/browser/resources/options/import_data_overlay.js
@@ -18,8 +18,6 @@ cr.define('options', function() {
                     'import-data-overlay');
  }
-  ImportDataOverlay.throbIntervalId = 0;
  cr.addSingletonGetter(ImportDataOverlay);
  ImportDataOverlay.prototype = {
@@ -168,18 +166,6 @@ cr.define('options', function() {
    $('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);
-    }
  };
  /**

--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -9,6 +9,7 @@
 <link rel="icon" href="../../../app/theme/settings_favicon.png">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
+<link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="chrome://resources/css/tree.css">
 <link rel="stylesheet" href="../dom_ui.css">
 <link rel="stylesheet" href="options_page.css">

--- a/chrome/browser/resources/shared/css/throbber.css
+++ b/chrome/browser/resources/shared/css/throbber.css
+.throbber {
+  -webkit-animation: throbber-animation 1s steps(36, end) 0 infinite;
+  background-image: url("../../../../../app/resources/throbber.png");
+  background-position: 0;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+}
+@-webkit-keyframes throbber-animation {
+  from {
+    background-position-x: 0;
+  }
+  to {
+    background-position-x: -576px;
+  }
+}
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -20,6 +20,8 @@ without changes to the corresponding grd file. paaaae -->
               file="shared/css/list.css" type="BINDATA" />
      <include name="IDR_SHARED_CSS_MENU"
               file="shared/css/menu.css" type="BINDATA" />
+      <include name="IDR_SHARED_CSS_THROBBER"
+               file="shared/css/throbber.css" type="BINDATA" />
      <include name="IDR_SHARED_CSS_TREE"
               file="shared/css/tree.css" type="BINDATA" />
      <include name="IDR_SHARED_CSS_TREE_JS"

--- a/chrome/browser/sync/resources/gaia_login.html
+++ b/chrome/browser/sync/resources/gaia_login.html
@@ -58,11 +58,7 @@
    width: 200px;
    height: 70px;
  }
-  #throb {
+  #logging_in_throbber {
-    background-image: url("../../../../app/resources/throbber.png");
-    width: 16px;
-    height: 16px;
-    background-position: 0px;
    margin: 0px 10px 0px 10px;
  }
  .toppageverticalspace {
@@ -120,6 +116,7 @@
    text-align: center;
  }
 </style>
+<link rel="stylesheet" href="chrome://resources/css/throbber.css">
 </head>
 <body bgcolor="#ffffff" vlink="#666666"
      i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"
@@ -168,15 +165,10 @@
      }
    }
-    function advanceThrobber() {
-      var throbber = document.getElementById('throb');
-      throbber.style.backgroundPositionX =
-          ((parseInt(getComputedStyle(throbber).backgroundPositionX) - 16) %
-          576) + 'px';
-    }
    function showGaiaLogin(args) {
-      document.getElementById('throbber_container').style.display = "none";
+      document.getElementById('logging_in_throbber').style.display = "none";
      document.getElementById('Email').disabled = false;
      document.getElementById('Passwd').disabled = false;
@@ -288,13 +280,11 @@
        }
        acct_text.textContent = translated_text.replace('Google','');
      }
-      setInterval(advanceThrobber, 30);
      var args = JSON.parse(chrome.dialogArguments);
      showGaiaLogin(args);
    }
    function sendCredentialsAndClose() {
      if (!setErrorVisibility())
        return false;
@@ -303,8 +293,8 @@
      document.getElementById('CaptchaValue').disabled = true;
      document.getElementById('AccessCode').disabled = true;
-      var throbber = document.getElementById('throbber_container');
+      document.getElementById('logging_in_throbber').style.display = "block";
-      throbber.style.display = "inline";
      var f = document.getElementById("gaia_loginform");
      var result = JSON.stringify({"user" : f.Email.value,
                                   "pass" : f.Passwd.value,
@@ -548,10 +538,7 @@
              <table align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
-                    <div id="throbber_container" style="display:none;">
+                    <div id="logging_in_throbber" class="throbber"></div>
-                      <div id="throb">
-                      </div>
-                    </div>
                  </td>
                  <td class="noverticalpadding">
                    <input id="signIn" type="submit" class="gaia le button"

--- a/chrome/browser/sync/resources/setting_up.html
+++ b/chrome/browser/sync/resources/setting_up.html
@@ -36,13 +36,8 @@ html[os='mac'] input[type='button'],
 html[os='mac'] input[type='submit'] {
  font-size: 12pt;
 }
-#throb {
+#throbber {
-  background-image: url("../../../../app/resources/throbber.png");
-  width: 16px;
-  height: 16px;
-  background-position: 0px;
  margin: -3px 10px;
-  display: inline-block;
 }
 #setting_up {
  margin: 100px;
@@ -55,23 +50,13 @@ html[os='mac'] input[type='submit'] {
 }
 </style>
+<link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <script src="chrome://resources/js/cr.js"></script>
-<script>
-  function advanceThrobber() {
-    var throbber = document.getElementById('throb');
-    throbber.style.backgroundPositionX =
-        ((parseInt(getComputedStyle(throbber).backgroundPositionX) - 16) %
-        576) + 'px';
-  }
-  setInterval(advanceThrobber, 30);
-</script>
 </head>
 <body i18n-values=".style.fontFamily:fontfamily">
 <form id="settingUpForm" onSubmit="return false;">
  <div id="setting_up">
-    <span id="throbber_container">
+    <div id="throbber" class="throbber"></div>
-      <span id="throb"></span>
-    </span>
    <div id="setting_up_label" i18n-content="settingup"></div>
  </div>
  <div class="sync-footer">