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