1 <!DOCTYPE html> 2 <html i18n-values="dir:textdirection"> 3 <head> 4 <link rel="stylesheet" href="dialog.css"> 5 <style> 6 body { 7 -webkit-user-select: none; 8 margin: 10px 10px 0 10px; 9 } 10 11 form { 12 margin: 0; 13 } 14 15 #explanation { 16 cursor: default; 17 } 18 19 #buttons { 20 padding: 10px 0; 21 text-align: end; 22 } 23 24 </style> 25 <script src="chrome://resources/js/i18n_template.js"></script> 26 <script> 27 function $(o) { 28 return document.getElementById(o); 29 } 30 31 function disableControls() { 32 $('cancel').disabled = true; 33 $('accept').disabled = true; 34 } 35 36 function cancel() { 37 disableControls(); 38 chrome.send('DialogClose', [JSON.stringify(false)]); 39 } 40 41 function handleSubmit(e) { 42 disableControls(); 43 e.preventDefault(); 44 chrome.send('DialogClose', [JSON.stringify(true)]); 45 } 46 47 function handleKeyDown(e) { 48 if (e.keyCode == 27) { // Escape 49 e.preventDefault(); 50 cancel(); 51 } 52 } 53 54 function load() { 55 i18nTemplate.process(document, JSON.parse( 56 chrome.getVariableValue('dialogArguments'))); 57 document.addEventListener('keydown', handleKeyDown); 58 $('form').onsubmit = handleSubmit; 59 $('cancel').onclick = cancel; 60 $('cancel').focus(); 61 } 62 63 document.addEventListener('DOMContentLoaded', load); 64 </script> 65 </head> 66 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> 67 <div id="explanation" i18n-content="message"></div> 68 <form id="form"> 69 <div id="buttons"> 70 <input id="cancel" type="reset" i18n-values="value:cancel" autofocus> 71 <input id="accept" type="submit" i18n-values="value:accept"> 72 </div> 73 </form> 74 </body> 75 </html> 76