Add: use messageBox in install page

install-usercss.html

@@ -12,6 +12,9 @@
   <script src="/js/localization.js"></script>
   <script src="/vendor/node-semver/semver.js"></script>
 
+  <script src="/msgbox/msgbox.js"></script>
+  <link rel="stylesheet" href="/msgbox/msgbox.css"></script>
+
   <!-- FIXME: do we need all of these? -->
   <script src="/vendor/codemirror/lib/codemirror.js"></script>
   <script src="/vendor/codemirror/keymap/sublime.js"></script>

install-usercss/install-usercss.js

@@ -1,7 +1,28 @@
 /* global CodeMirror semverCompare makeLink closeCurrentTab runtimeSend */
+/* global messageBox */
 'use strict';
 
 (() => {
+  const dialog = (() => {
+    function alert(text) {
+      return messageBox({
+        contents: text,
+        className: 'pre center',
+        buttons: [t('confirmClose')]
+      });
+    }
+
+    function confirm(text) {
+      return messageBox({
+        contents: text,
+        className: 'pre center',
+        buttons: [t('confirmYes'), t('confirmNo')]
+      }).then(result => result.button === 0 || result.enter);
+    }
+
+    return {alert, confirm};
+  })();
+
   const params = new URLSearchParams(location.search);
   let liveReload = false;
   let installed = false;
@@ -15,14 +36,14 @@
     switch (msg.method) {
       case 'getSourceCodeResponse':
         if (msg.error) {
-          alert(msg.error);
+          dialog.alert(msg.error);
         } else {
           initSourceCode(msg.sourceCode);
         }
         break;
       case 'sourceCodeChanged':
         if (msg.error) {
-          alert(msg.error);
+          dialog.alert(msg.error);
         } else {
           liveReloadUpdate(msg.sourceCode);
         }
@@ -185,7 +206,7 @@
         window.dispatchEvent(new CustomEvent('installed'));
       })
       .catch(err => {
-        alert(chrome.i18n.getMessage('styleInstallFailed', String(err)));
+        dialog.alert(chrome.i18n.getMessage('styleInstallFailed', String(err)));
       });
   }
 
@@ -225,15 +246,17 @@
       );
     }
     $('button.install').onclick = () => {
-      if (dup) {
-        if (confirm(chrome.i18n.getMessage('styleInstallOverwrite', [
+      const message = dup ?
+        chrome.i18n.getMessage('styleInstallOverwrite', [
           data.name, dupData.version, data.version
-        ]))) {
-          install(style);
+        ]) :
+        chrome.i18n.getMessage('styleInstall', [data.name]);
+
+      dialog.confirm(message).then(result => {
+        if (result) {
+          return install(style);
         }
-      } else if (confirm(chrome.i18n.getMessage('styleInstall', [data.name]))) {
-        install(style);
-      }
+      });
     };
 
     // set updateUrl

msgbox/msgbox.css

@@ -46,6 +46,10 @@
   right: unset;
 }
 
+#message-box.pre #message-box-contents {
+  white-space: pre-line;
+}
+
 #message-box-title {
   font-weight: bold;
   background-color: rgb(145, 208, 198);