Skip to content

GitLab

T
tangled
Commit b0fc6317 authored by sergeyu@chromium.org's avatar sergeyu@chromium.org
Browse files
Options

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
parent a19c9b67
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 90 deletions
chrome/browser/dom_ui/shared_resources_data_source.cc
View file @ b0fc6317
......@@ -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:
......
chrome/browser/remoting/resources/remoting_setting_up.html
View file @ b0fc6317
......@@ -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">
......
chrome/browser/resources/options/clear_browser_data_overlay.html
View file @ b0fc6317
......@@ -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"
......
chrome/browser/resources/options/clear_browser_data_overlay.js
View file @ b0fc6317
......@@ -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) {
......
chrome/browser/resources/options/import_data_overlay.css
View file @ b0fc6317
#import-throbber {
background-image: url("../../../../app/resources/throbber.png");
width: 16px;
height: 16px;
margin: -3px 10px;
display: inline-block;
visibility: hidden;
}
chrome/browser/resources/options/import_data_overlay.html
View file @ b0fc6317
......@@ -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>
......
chrome/browser/resources/options/import_data_overlay.js
View file @ b0fc6317
......@@ -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);
}
};
/**
......
chrome/browser/resources/options/options.html
View file @ b0fc6317
......@@ -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">
......
chrome/browser/resources/shared/css/throbber.css 0 → 100644
View file @ b0fc6317
.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;
}
}
chrome/browser/resources/shared_resources.grd
View file @ b0fc6317
......@@ -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"
......
chrome/browser/sync/resources/gaia_login.html
View file @ b0fc6317
......@@ -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"
......
chrome/browser/sync/resources/setting_up.html
View file @ b0fc6317
......@@ -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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment