From 66704a78b3dbacf6363b5040db323acf5f82a16c Mon Sep 17 00:00:00 2001 From: tophf Date: Sun, 11 Mar 2018 16:31:25 +0300 Subject: [PATCH] actually use 'pre' font for code errors in messageBox.alert/confirm --- edit/codemirror-editing-hooks.js | 2 +- edit/source-editor.js | 2 +- install-usercss/install-usercss.js | 8 ++--- manage/config-dialog.js | 2 +- msgbox/msgbox.css | 2 ++ msgbox/msgbox.js | 54 +++++++++++++++++++++++------- 6 files changed, 50 insertions(+), 20 deletions(-) diff --git a/edit/codemirror-editing-hooks.js b/edit/codemirror-editing-hooks.js index 68e74338..f2923894 100644 --- a/edit/codemirror-editing-hooks.js +++ b/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'); }); } }); diff --git a/edit/source-editor.js b/edit/source-editor.js index fd53f1b1..e714c245 100644 --- a/edit/source-editor.js +++ b/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'); }); } diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js index a0c21e7f..2e1c3a36 100644 --- a/install-usercss/install-usercss.js +++ b/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')); }); } diff --git a/manage/config-dialog.js b/manage/config-dialog.js index e9f01d95..cd056ebd 100644 --- a/manage/config-dialog.js +++ b/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; diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css index a64123a8..3f8c25ba 100644 --- a/msgbox/msgbox.css +++ b/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 { diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js index 3f40fdaa..01a4fdf9 100644 --- a/msgbox/msgbox.js +++ b/msgbox/msgbox.js @@ -1,14 +1,32 @@ /* global focusAccessibility */ 'use strict'; +/** + * @param {Object} params + * @param {String} params.title + * @param {String|Node|Object|Array} 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} [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} contents + * @param {String} [className] like 'pre' for monospace font + * @returns {Promise} 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} contents + * @param {String} [className] like 'pre' for monospace font + * @returns {Promise} 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);