1<!DOCTYPE html> 2<html i18n-values="dir:textdirection"> 3<head> 4 <style type="text/css"> 5 body { 6 margin: 0px; 7 } 8 9 #buttons { 10 text-align: right; 11 } 12 13 html[dir='rtl'] #buttons { 14 text-align: left; 15 } 16 17 #username, 18 #password { 19 width: 220px; 20 } 21 </style> 22 <script type="text/javascript"> 23 function $(o) { 24 return document.getElementById(o); 25 } 26 27 function disableControls() { 28 $('username').disabled = true; 29 $('password').disabled = true; 30 $('login').disabled = true; 31 $('cancel').disabled = true; 32 } 33 34 function sendCredentialsAndClose() { 35 disableControls(); 36 37 var result = JSON.stringify({ 38 'username': $('username').value, 39 'password': $('password').value}); 40 41 chrome.send('DialogClose', [result]); 42 } 43 44 function setAutofillCredentials(username, password) { 45 $('username').value = username; 46 $('password').value = password; 47 } 48 49 function load() { 50 $('explanation').textContent = chrome.dialogArguments; 51 52 $('cancel').onclick = function() { 53 disableControls(); 54 chrome.send('DialogClose', ['']); 55 }; 56 57 $('login').onclick = function() { 58 sendCredentialsAndClose(); 59 }; 60 61 $('username').focus(); 62 63 chrome.send('GetAutofill', ['']); 64 } 65 66 document.addEventListener('DOMContentLoaded', load); 67 </script> 68</head> 69<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> 70 <div id="explanation"></div> 71 <table> 72 <tr> 73 <td i18n-content="username"></td> 74 <td> 75 <input id="username" type="text"> 76 </td> 77 </tr> 78 <tr> 79 <td i18n-content="password"></td> 80 <td> 81 <input id="password" name="password" type="password"> 82 </td> 83 </tr> 84 </table> 85 <div id="buttons"> 86 <input id="cancel" type="button" i18n-values="value:cancel"> 87 <input id="login" type="button" i18n-values="value:signin"> 88 </div> 89</body> 90</html> 91