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