actually use 'pre' font for code errors in messageBox.alert/confirm

edit/codemirror-editing-hooks.js

@@ -624,7 +624,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
       errors.classList.add('hidden');
     }).catch(err => {
       errors.classList.remove('hidden');
-      errors.onclick = () => messageBox.alert(String(err));
+      errors.onclick = () => messageBox.alert(String(err), 'pre');
     });
   }
 });

edit/source-editor.js

@@ -225,7 +225,7 @@ function createSourceEditor(style) {
           contents[0] += ` (line ${pos.line + 1} col ${pos.ch + 1})`;
           contents.push($create('pre', drawLinePointer(pos)));
         }
-        messageBox.alert(contents);
+        messageBox.alert(contents, 'pre');
       });
   }
 

install-usercss/install-usercss.js

@@ -23,14 +23,14 @@
       switch (msg.method) {
         case 'getSourceCodeResponse':
           if (msg.error) {
-            messageBox.alert(msg.error);
+            messageBox.alert(msg.error, 'pre');
           } else {
             initSourceCode(msg.sourceCode);
           }
           break;
         case 'sourceCodeChanged':
           if (msg.error) {
-            messageBox.alert(msg.error);
+            messageBox.alert(msg.error, 'pre');
           } else {
             liveReloadUpdate(msg.sourceCode);
           }
@@ -292,7 +292,7 @@
       ).then(ok => ok &&
         API.saveUsercss(Object.assign(style, dup && {reason: 'update'}))
           .then(install)
-          .catch(err => messageBox.alert(t('styleInstallFailed', err)))
+          .catch(err => messageBox.alert(t('styleInstallFailed', err), 'pre'))
       );
     };
 
@@ -404,7 +404,7 @@
       // on the off-chance dbExecChromeStorage.getAll ran right after bg download was saved
       download(params.get('updateUrl'))
         .then(initSourceCode)
-        .catch(err => messageBox.alert(t('styleInstallFailed', String(err))));
+        .catch(err => messageBox.alert(t('styleInstallFailed', String(err)), 'pre'));
     });
   }
 

manage/config-dialog.js

@@ -165,7 +165,7 @@ function configDialog(style) {
         $create('ol', {style: 'text-align: left'},
           invalid.map(msg =>
             $create({tag: 'li', appendChild: msg}))),
-      ]);
+      ], 'pre');
     }
     if (!numValid) {
       return;

msgbox/msgbox.css

@@ -51,6 +51,8 @@
 
 #message-box.pre #message-box-contents {
   white-space: pre-line;
+  font-family: monospace;
+  text-align: left;
 }
 
 #message-box-title {

msgbox/msgbox.js

@@ -1,14 +1,32 @@
 /* global focusAccessibility */
 'use strict';
 
+/**
+ * @param {Object} params
+ * @param {String} params.title
+ * @param {String|Node|Object|Array<String|Node|Object>} params.contents
+ *        a string gets parsed via tHTML,
+ *        a non-string is passed as is to $create()
+ * @param {String} [params.className]
+ *        CSS class name of the message box element
+ * @param {Array<String|{textContent: String, onclick: Function, ...etc}>} [params.buttons]
+ *        ...etc means anything $create() can handle
+ * @param {Function(messageboxElement)} [params.onshow]
+ *        invoked after the messagebox is shown
+ * @param {Boolean} [params.blockScroll]
+ *        blocks the page scroll
+ * @returns {Promise}
+ *        resolves to an object with optionally present properties depending on the interaction:
+ *        {button: Number, enter: Boolean, esc: Boolean}
+ */
 function messageBox({
-  title,          // [mandatory] string
-  contents,       // [mandatory] 1) DOM element 2) string
-  className = '', // string, CSS class name of the message box element
-  buttons = [],   // array of strings or objects like {textContent[string], onclick[function]}.
-  onshow,         // function(messageboxElement) invoked after the messagebox is shown
-  blockScroll,    // boolean, blocks the page scroll
-}) {              // RETURNS: Promise resolved to {button[number], enter[boolean], esc[boolean]}
+  title,
+  contents,
+  className = '',
+  buttons = [],
+  onshow,
+  blockScroll,
+}) {
   initOwnListeners();
   bindGlobalListeners();
   createElement();
@@ -137,16 +155,26 @@ function messageBox({
   }
 }
 
-messageBox.alert = text =>
+/**
+ * @param {String|Node|Array<String|Node>} contents
+ * @param {String} [className] like 'pre' for monospace font
+ * @returns {Promise<Boolean>} same as messageBox
+ */
+messageBox.alert = (contents, className) =>
   messageBox({
-    contents: text,
-    className: 'pre center',
+    contents,
+    className: `center ${className || ''}`,
     buttons: [t('confirmClose')]
   });
 
-messageBox.confirm = text =>
+/**
+ * @param {String|Node|Array<String|Node>} contents
+ * @param {String} [className] like 'pre' for monospace font
+ * @returns {Promise<Boolean>} resolves to true when confirmed
+ */
+messageBox.confirm = (contents, className) =>
   messageBox({
-    contents: text,
-    className: 'pre center',
+    contents,
+    className: `center ${className || ''}`,
     buttons: [t('confirmYes'), t('confirmNo')]
   }).then(result => result.button === 0 || result.enter);