Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(370)

Side by Side Diff: chrome/browser/sync/resources/gaia_login.html

Issue 6378006: Add Throbber control for DOMUI. Use it everywhere in options and in Sync setup UI. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: - Created 9 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <html i18n-values="dir:textdirection;"> 1 <html i18n-values="dir:textdirection;">
2 <head> 2 <head>
3 <style type="text/css"> 3 <style type="text/css">
4 body,td,div,p,a,font,span {font-family: arial,sans-serif;} 4 body,td,div,p,a,font,span {font-family: arial,sans-serif;}
5 body { 5 body {
6 background-color:#ffffff; 6 background-color:#ffffff;
7 -webkit-user-select: none; 7 -webkit-user-select: none;
8 } 8 }
9 A:link {color:#0000cc; } 9 A:link {color:#0000cc; }
10 A:visited { color:#551a8b; } 10 A:visited { color:#551a8b; }
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
51 background: no-repeat; 51 background: no-repeat;
52 background-position: center; 52 background-position: center;
53 background-color: #e8eefa; 53 background-color: #e8eefa;
54 display: block; 54 display: block;
55 } 55 }
56 .captcha_image { 56 .captcha_image {
57 display: block; 57 display: block;
58 width: 200px; 58 width: 200px;
59 height: 70px; 59 height: 70px;
60 } 60 }
61 #throb { 61 #logging_in_throbber {
62 background-image: url("../../../../app/resources/throbber.png");
63 width: 16px;
64 height: 16px;
65 background-position: 0px;
66 margin: 0px 10px 0px 10px; 62 margin: 0px 10px 0px 10px;
67 } 63 }
68 .toppageverticalspace { 64 .toppageverticalspace {
69 height: 15px; 65 height: 15px;
70 } 66 }
71 .bottompaddedcell { 67 .bottompaddedcell {
72 padding-bottom: 3px; 68 padding-bottom: 3px;
73 } 69 }
74 .noverticalpadding { 70 .noverticalpadding {
75 padding-top: 0; 71 padding-top: 0;
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
113 text-align: center; 109 text-align: center;
114 padding-bottom: 1px; 110 padding-bottom: 1px;
115 } 111 }
116 #access_code_label_row > td { 112 #access_code_label_row > td {
117 padding-top: 6px; 113 padding-top: 6px;
118 } 114 }
119 .centeredtext { 115 .centeredtext {
120 text-align: center; 116 text-align: center;
121 } 117 }
122 </style> 118 </style>
119 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
120 <script src="chrome://resources/js/cr.js"></script>
121 <script src="chrome://resources/js/cr/ui.js"></script>
122 <script src="chrome://resources/js/cr/ui/throbber.js"></script>
123 <script src="chrome://resources/js/util.js"></script>
123 </head> 124 </head>
124 <body bgcolor="#ffffff" vlink="#666666" 125 <body bgcolor="#ffffff" vlink="#666666"
125 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize" 126 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"
126 style="margin-bottom: 6px; margin-top: 6px;" onload="initGaiaLoginForm();" > 127 style="margin-bottom: 6px; margin-top: 6px;" onload="initGaiaLoginForm();" >
127 <table width="100%" height="100%" align="center" cellpadding="1" cellspacing=" 1"> 128 <table width="100%" height="100%" align="center" cellpadding="1" cellspacing=" 1">
128 <tr> 129 <tr>
129 <td valign="top"> <!-- LOGIN BOX --> 130 <td valign="top"> <!-- LOGIN BOX -->
130 <script> 131 <script>
131 // Variable to track if a captcha challenge was issued. If this gets set to 132 // Variable to track if a captcha challenge was issued. If this gets set to
132 // true, it stays that way until we are told about successful login from 133 // true, it stays that way until we are told about successful login from
(...skipping 28 matching lines...) Expand all
161 } 162 }
162 if (f) { 163 if (f) {
163 if (f.Email && (f.Email.value == null || f.Email.value == "")) { 164 if (f.Email && (f.Email.value == null || f.Email.value == "")) {
164 f.Email.focus(); 165 f.Email.focus();
165 } else if (f.Passwd) { 166 } else if (f.Passwd) {
166 f.Passwd.focus(); 167 f.Passwd.focus();
167 } 168 }
168 } 169 }
169 } 170 }
170 171
171 function advanceThrobber() {
172 var throbber = document.getElementById('throb');
173 throbber.style.backgroundPositionX =
174 ((parseInt(getComputedStyle(throbber).backgroundPositionX) - 16) %
175 576) + 'px';
176 }
177 172
178 function showGaiaLogin(args) { 173 function showGaiaLogin(args) {
179 document.getElementById('throbber_container').style.display = "none"; 174 $('logging_in_throbber').visible = false;
175
180 document.getElementById('Email').disabled = false; 176 document.getElementById('Email').disabled = false;
181 document.getElementById('Passwd').disabled = false; 177 document.getElementById('Passwd').disabled = false;
182 178
183 var f = document.getElementById("gaia_loginform"); 179 var f = document.getElementById("gaia_loginform");
184 if (f) { 180 if (f) {
185 if (args.user != undefined) { 181 if (args.user != undefined) {
186 if (f.Email.value != args.user) 182 if (f.Email.value != args.user)
187 f.Passwd.value = ""; // Reset the password field 183 f.Passwd.value = ""; // Reset the password field
188 f.Email.value = args.user; 184 f.Email.value = args.user;
189 } 185 }
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after
281 var ltr = templateData['textdirection'] == 'ltr'; 277 var ltr = templateData['textdirection'] == 'ltr';
282 var googleIsAtEndOfSentence = posGoogle != 0; 278 var googleIsAtEndOfSentence = posGoogle != 0;
283 if (googleIsAtEndOfSentence == ltr) { 279 if (googleIsAtEndOfSentence == ltr) {
284 // We're in ltr and in the translation the word 'Google' is AFTER the 280 // We're in ltr and in the translation the word 'Google' is AFTER the
285 // word 'Account' OR we're in rtl and 'Google' is BEFORE 'Account'. 281 // word 'Account' OR we're in rtl and 'Google' is BEFORE 'Account'.
286 var logo_td = document.getElementById('gaia_logo'); 282 var logo_td = document.getElementById('gaia_logo');
287 logo_td.parentNode.appendChild(logo_td); 283 logo_td.parentNode.appendChild(logo_td);
288 } 284 }
289 acct_text.textContent = translated_text.replace('Google',''); 285 acct_text.textContent = translated_text.replace('Google','');
290 } 286 }
291 setInterval(advanceThrobber, 30); 287 cr.ui.Throbber.decorate($('logging_in_throbber'));
292 var args = JSON.parse(chrome.dialogArguments); 288 var args = JSON.parse(chrome.dialogArguments);
293 showGaiaLogin(args); 289 showGaiaLogin(args);
294 } 290 }
295 291
296 function sendCredentialsAndClose() { 292 function sendCredentialsAndClose() {
297
298 if (!setErrorVisibility()) 293 if (!setErrorVisibility())
299 return false; 294 return false;
300 295
301 document.getElementById('Email').disabled = true; 296 document.getElementById('Email').disabled = true;
302 document.getElementById('Passwd').disabled = true; 297 document.getElementById('Passwd').disabled = true;
303 document.getElementById('CaptchaValue').disabled = true; 298 document.getElementById('CaptchaValue').disabled = true;
304 document.getElementById('AccessCode').disabled = true; 299 document.getElementById('AccessCode').disabled = true;
305 300
306 var throbber = document.getElementById('throbber_container'); 301 $('logging_in_throbber').visible = true;
307 throbber.style.display = "inline"; 302
308 var f = document.getElementById("gaia_loginform"); 303 var f = document.getElementById("gaia_loginform");
309 var result = JSON.stringify({"user" : f.Email.value, 304 var result = JSON.stringify({"user" : f.Email.value,
310 "pass" : f.Passwd.value, 305 "pass" : f.Passwd.value,
311 "captcha" : f.CaptchaValue.value, 306 "captcha" : f.CaptchaValue.value,
312 "access_code" : f.AccessCode.value}); 307 "access_code" : f.AccessCode.value});
313 document.getElementById("signIn").disabled = true; 308 document.getElementById("signIn").disabled = true;
314 chrome.send("SubmitAuth", [result]); 309 chrome.send("SubmitAuth", [result]);
315 } 310 }
316 311
317 function setElementDisplay(id, display) { 312 function setElementDisplay(id, display) {
(...skipping 223 matching lines...) Expand 10 before | Expand all | Expand 10 after
541 <td> 536 <td>
542 </td> 537 </td>
543 <td> 538 <td>
544 </td> 539 </td>
545 </tr> 540 </tr>
546 <tr> 541 <tr>
547 <td colspan="2"> 542 <td colspan="2">
548 <table align="center" cellpadding="0" cellspacing="0"> 543 <table align="center" cellpadding="0" cellspacing="0">
549 <tr> 544 <tr>
550 <td> 545 <td>
551 <div id="throbber_container" style="display:none;"> 546 <div id="logging_in_throbber" class="throbber" style="visibi lity:hidden;"></div>
552 <div id="throb">
553 </div>
554 </div>
555 </td> 547 </td>
556 <td class="noverticalpadding"> 548 <td class="noverticalpadding">
557 <input id="signIn" type="submit" class="gaia le button" 549 <input id="signIn" type="submit" class="gaia le button"
558 name="signIn" i18n-values="value:signin"/> 550 name="signIn" i18n-values="value:signin"/>
559 <input type="button" name="cancel" i18n-values="value:cancel " 551 <input type="button" name="cancel" i18n-values="value:cancel "
560 onclick="CloseDialog();" > 552 onclick="CloseDialog();" >
561 553
562 </td> 554 </td>
563 </tr> 555 </tr>
564 </table> 556 </table>
(...skipping 26 matching lines...) Expand all
591 </form> 583 </form>
592 </td> 584 </td>
593 </tr> 585 </tr>
594 <tr> 586 <tr>
595 <td class="cancelspacenocaptcha" id="cancelspacer" colspan="2"> 587 <td class="cancelspacenocaptcha" id="cancelspacer" colspan="2">
596 </td> 588 </td>
597 </tr> 589 </tr>
598 </table> 590 </table>
599 </body> 591 </body>
600 </html> 592 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698