From 4a8894de2ef3f95e9b76b020afd3a002281b0e2d Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Thu, 9 Nov 2017 12:26:50 +0800
Subject: [PATCH] Add: use messageBox in install page

---
 install-usercss.html               |  3 +++
 install-usercss/install-usercss.js | 43 +++++++++++++++++++++++-------
 msgbox/msgbox.css                  |  4 +++
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/install-usercss.html b/install-usercss.html
index 4a278e77..f7cd70ba 100644
--- a/install-usercss.html
+++ b/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>
diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js
index be492c4e..9cb4f517 100644
--- a/install-usercss/install-usercss.js
+++ b/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
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index 5cb45d34..de9a0bf5 100644
--- a/msgbox/msgbox.css
+++ b/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);