diff options
12 files changed, 37 insertions, 90 deletions
diff --git a/chrome/browser/dom_ui/shared_resources_data_source.cc b/chrome/browser/dom_ui/shared_resources_data_source.cc index 063e05c..4922f1e 100644 --- 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: diff --git a/chrome/browser/remoting/resources/remoting_setting_up.html b/chrome/browser/remoting/resources/remoting_setting_up.html index 25c594e..c0a20a8 100644 --- 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 { - background-image: url("../../../../app/resources/throbber.png"); - width: 16px; - height: 16px; - background-position: 0px; +#throbber { 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"> - <span id="throb"></span> - </span> + <div id="throbber" class="throbber"></div> <div id="setting_up_label" i18n-content="settingup"></div> </div> <div class="remoting-footer"> diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.html b/chrome/browser/resources/options/clear_browser_data_overlay.html index 30bf728..5e26c93 100644 --- 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" diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.js b/chrome/browser/resources/options/clear_browser_data_overlay.js index ceb5eaf..841057b 100644 --- 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) { diff --git a/chrome/browser/resources/options/import_data_overlay.css b/chrome/browser/resources/options/import_data_overlay.css index f49ee22..c702aa0 100644 --- a/chrome/browser/resources/options/import_data_overlay.css +++ b/chrome/browser/resources/options/import_data_overlay.css @@ -1,8 +1,4 @@ #import-throbber { - background-image: url("../../../../app/resources/throbber.png"); - width: 16px; - height: 16px; margin: -3px 10px; - display: inline-block; visibility: hidden; } diff --git a/chrome/browser/resources/options/import_data_overlay.html b/chrome/browser/resources/options/import_data_overlay.html index ace3502..cd83fd7 100644 --- 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> diff --git a/chrome/browser/resources/options/import_data_overlay.js b/chrome/browser/resources/options/import_data_overlay.js index 0b7ebab..40e3804 100644 --- 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); - } }; /** diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html index cd7f21d..9c7a195 100644 --- 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"> diff --git a/chrome/browser/resources/shared/css/throbber.css b/chrome/browser/resources/shared/css/throbber.css new file mode 100644 index 0000000..5c84e774 --- /dev/null +++ b/chrome/browser/resources/shared/css/throbber.css @@ -0,0 +1,17 @@ +.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; + } +} diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd index 0005019..0a34e5d 100644 --- 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" diff --git a/chrome/browser/sync/resources/gaia_login.html b/chrome/browser/sync/resources/gaia_login.html index ff0defe..2bbab51 100644 --- 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 { - background-image: url("../../../../app/resources/throbber.png"); - width: 16px; - height: 16px; - background-position: 0px; + #logging_in_throbber { 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'); - throbber.style.display = "inline"; + document.getElementById('logging_in_throbber').style.display = "block"; + 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="throb"> - </div> - </div> + <div id="logging_in_throbber" class="throbber"></div> </td> <td class="noverticalpadding"> <input id="signIn" type="submit" class="gaia le button" diff --git a/chrome/browser/sync/resources/setting_up.html b/chrome/browser/sync/resources/setting_up.html index 02f5bd3..fc258f3 100644 --- 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 { - background-image: url("../../../../app/resources/throbber.png"); - width: 16px; - height: 16px; - background-position: 0px; +#throbber { 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"> - <span id="throb"></span> - </span> + <div id="throbber" class="throbber"></div> <div id="setting_up_label" i18n-content="settingup"></div> </div> <div class="sync-footer"> |