Simplify how anki errors are shown

3 files changed, 16 insertions, 12 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 5dfbd931..8adae47c 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -17,7 +17,7 @@
  */
 
 
-#anki-spinner, #anki-error,
+#anki-spinner,
 #dict-spinner, #dict-import-progress,
 .storage-hidden, #storage-spinner {
     display: none;
diff --git a/ext/bg/js/settings/anki.js b/ext/bg/js/settings/anki.js
index b7fce011..68230139 100644
--- a/ext/bg/js/settings/anki.js
+++ b/ext/bg/js/settings/anki.js
@@ -31,13 +31,16 @@ function _ankiSpinnerShow(show) {
     }
 }
 
-function _ankiErrorShow(error) {
-    const dialog = $('#anki-error');
+function _ankiSetError(error) {
+    const node = document.querySelector('#anki-error');
+    if (!node) { return; }
     if (error) {
-        dialog.show().text(error);
+        node.hidden = false;
+        node.textContent = `${error}`;
     }
     else {
-        dialog.hide();
+        node.hidden = true;
+        node.textContent = '';
     }
 }
 
@@ -119,9 +122,9 @@ async function _onAnkiModelChanged(e) {
 
         _ankiSpinnerShow(true);
         await _ankiFieldsPopulate(element, options);
-        _ankiErrorShow();
+        _ankiSetError(null);
     } catch (error) {
-        _ankiErrorShow(error);
+        _ankiSetError(error);
     } finally {
         _ankiSpinnerShow(false);
     }
@@ -131,7 +134,8 @@ async function _onAnkiModelChanged(e) {
 // Public
 
 function ankiErrorShown() {
-    return $('#anki-error').is(':visible');
+    const node = document.querySelector('#anki-error');
+    return node && !node.hidden;
 }
 
 function ankiFieldsToDict(selection) {
@@ -212,10 +216,10 @@ async function onAnkiOptionsChanged(options) {
     try {
         _ankiSpinnerShow(true);
         await _ankiDeckAndModelPopulate(options);
-        _ankiErrorShow();
+        _ankiSetError(null);
         _ankiDataPopulated = true;
-    } catch (e) {
-        _ankiErrorShow(e);
+    } catch (error) {
+        _ankiSetError(error);
     } finally {
         _ankiSpinnerShow(false);
     }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 0e6701e6..e4cc7bc8 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -650,7 +650,7 @@
                         </div>
                     </div>
 
-                    <div class="alert alert-danger" id="anki-error"></div>
+                    <div class="alert alert-danger" id="anki-error" hidden></div>
 
                     <div class="form-group">
                         <label for="card-tags">Card tags <span class="label-light">(comma or space separated)</span></label>