Add improved styling for error messages

package.json

@@ -1,6 +1,6 @@
 {
     "name": "interlanguage-checker",
-    "version": "1.11.4",
+    "version": "1.11.6",
     "description": "Check the consistency of MediaWiki interlanguage links in a simple overview.",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",

src/main/css/main.css

@@ -1,8 +1,12 @@
 :root {
     --error-color: red;
+    --error-bg-color: #ffdddd;
     --success-color: green;
+    --success-bg-color: #ddffdd;
     --warning-color: orange;
+    --warning-bg-color: #ffffcc;
     --info-color: blue;
+    --info-bg-color: #ddffff;
     --table-border-color: #e1e1e1;
     --table-row-color: #f2f2f2;
     --fandom-redlink: #ba0000;
@@ -79,22 +83,42 @@ summary {
     color: var(--fandom-redlink);
 }
 
-.success {
+span.success, i.success {
     color: var(--success-color);
 }
 
-.error {
+div.success {
+    border-color: var(--success-color);
+    background-color: var(--success-bg-color);
+}
+
+span.error, i.error {
     color: var(--error-color);
 }
 
-.warning {
+div.error {
+    border-color: var(--error-color);
+    background-color: var(--error-bg-color);
+}
+
+span.warning, i.warning {
     color: var(--warning-color);
 }
 
-.info {
+div.warning {
+    border-color: var(--warning-color);
+    background-color: var(--warning-bg-color);
+}
+
+span.info, i.info {
     color: var(--info-color);
 }
 
+div.info {
+    border-color: var(--info-color);
+    background-color: var(--info-bg-color);
+}
+
 
 /***
  * Messages, errors, etc.
@@ -104,10 +128,21 @@ summary {
     text-align: center;
 }
 
-.errorInner, .messageInner {
+.errorOuter, .messageOuter {
     display: inline-block;
 }
 
+.errorInner {
+    margin-bottom: 1em;
+}
+
+.errorInner, .messageInner {
+    padding: 1em;
+
+    border-width: 1px;
+    border-style: solid;
+}
+
 input[data-entered=true]:invalid {
     border-color: var(--error-color);
     color: var(--error-color);

src/main/js/DOM.js

@@ -91,10 +91,9 @@ export class ErrorHandler {
      * @param [id] {string} the id of the div containing the errors
      */
     constructor(parent, id) {
-        this._mainDiv = document.createElement("div");
+        this._outerDiv = document.createElement("div");
-        this._mainDiv.classList.add("hidden");
+        this._outerDiv.classList.add("errorOuter", "hidden");
-        this._mainDiv.classList.add("errorInner");
+        parent.appendChild(this._outerDiv);
-        parent.appendChild(this._mainDiv);
     }
 
 
@@ -106,12 +105,13 @@ export class ErrorHandler {
      * @returns {ErrorHandler} this `ErrorHandler`
      */
     handle(level, message) {
-        this._mainDiv.classList.remove("hidden");
+        this._outerDiv.classList.remove("hidden");
 
-        const errorSpan = document.createElement("p");
+        const errorInner = document.createElement("div");
-        errorSpan.innerText = message;
+        errorInner.classList.add("errorInner");
-        if (level !== null) errorSpan.classList.add(level);
+        if (level !== null) errorInner.classList.add(level);
-        this._mainDiv.appendChild(errorSpan);
+        errorInner.innerText = message;
+        this._outerDiv.appendChild(errorInner);
 
         return this;
     }
@@ -122,8 +122,8 @@ export class ErrorHandler {
      * @returns {ErrorHandler} this `ErrorHandler`
      */
     clear() {
-        this._mainDiv.classList.add("hidden");
+        this._outerDiv.classList.add("hidden");
-        this._mainDiv.innerHTML = "";
+        this._outerDiv.innerHTML = "";
 
         return this;
     }
@@ -137,24 +137,26 @@ export class MessageHandler {
      * Constructs a new `MessageHandler`, inserting relevant new elements into the DOM to interact with.
      *
      * @param parent {HTMLElement} the element to insert elements into
-     * @param [id] {string} the id of the div containing the message
      */
     constructor(parent) {
-        this._mainDiv = document.createElement("div");
+        this._outerDiv = document.createElement("div");
-        this._mainDiv.classList.add("hidden");
+        this._outerDiv.classList.add("messageOuter", "hidden");
-        this._mainDiv.classList.add("messageInner");
+        parent.appendChild(this._outerDiv);
-        parent.appendChild(this._mainDiv);
+
+        this._innerDiv = document.createElement("div");
+        this._innerDiv.classList.add("messageInner");
+        this._outerDiv.appendChild(this._innerDiv);
 
         this._loadingIcon = document.createElement("i");
         this._loadingIcon.classList.add("fa", "fa-spinner", "fa-spin");
-        this._mainDiv.appendChild(this._loadingIcon);
+        this._innerDiv.appendChild(this._loadingIcon);
 
         this._spacing = document.createElement("span");
         this._spacing.innerHTML = " ";
-        this._mainDiv.appendChild(this._spacing);
+        this._innerDiv.appendChild(this._spacing);
 
         this._textSpan = document.createElement("span");
-        this._mainDiv.appendChild(this._textSpan);
+        this._innerDiv.appendChild(this._textSpan);
 
         this._currentLevel = undefined;
         this._callback = undefined;
@@ -167,14 +169,14 @@ export class MessageHandler {
      * If no message is given, the current message and the loading icon are hidden. To display an empty message next to
      * the loading icon, give an empty string.
      *
-     * @param [level] {"complete"|"progress"|"warning"|"error"|"neutral"} the level of message to display, or
+     * @param [level] {"complete"|"progress"|"warning"|"error"|"neutral"|undefined} the level of message to display, or
      * `undefined` if the entire message handler should be hidden
      * @param [message] {*} the message to display
      * @returns {MessageHandler} this `MessageHandler`
      */
     handle(level, message) {
         this._displayLevel(level);
-        if (level === undefined) return this; // No need to handle the rest
+        if (level === undefined) return this;  // No need to handle the rest
 
         if (this._callback !== undefined) this._callback(level, message);
         this._textSpan.innerHTML = message;
@@ -213,30 +215,31 @@ export class MessageHandler {
         if (level === this._currentLevel) return;
         this._currentLevel = level;
 
-        this._mainDiv.classList.remove("hidden", "success", "warning", "error");
+        this._outerDiv.classList.remove("hidden");
+        this._innerDiv.classList.remove("success", "warning", "error");
 
         switch (level) {
             case "complete":
-                this._mainDiv.classList.add("success");
+                this._innerDiv.classList.add("success");
                 this._toggleLoadingIcon(false);
                 break;
             case "progress":
                 this._toggleLoadingIcon(true);
                 break;
             case "warning":
-                this._mainDiv.classList.add("warning");
+                this._innerDiv.classList.add("warning");
                 this._toggleLoadingIcon(false);
                 break;
             case "error":
-                this._mainDiv.classList.add("error");
+                this._innerDiv.classList.add("error");
                 this._toggleLoadingIcon(false);
                 break;
             case "neutral":
                 this._toggleLoadingIcon(false);
                 break;
             default:
-                this._mainDiv.classList.remove("hidden");
+                this._outerDiv.classList.add("hidden");
-                return this; // No further handling necessary
+                break;
         }
     }
 

src/main/js/MediaWiki.js

@@ -590,7 +590,7 @@ export const discoverNetwork = async function(mwm, title, errorCb, progressCb) {
             if (history.length === 1)
                 throw new Error(couldNotConnectMessage);
             else {
-                errorCb("warning", `Could not connect to the wiki for '${next.lang}'. Maybe the wiki no longer exists?`);
+                errorCb("warning", `Could not connect to the wiki for language '${next.lang}'. Maybe the wiki no longer exists?`);
                 continue;
             }
         }