Improve location of Anki error message (#1180)

ext/bg/css/settings2.css

@@ -1500,12 +1500,6 @@ button.anki-card-field-value-menu-button {
     box-sizing: border-box;
     padding: 0 0.5em;
 }
-#anki-error-message-details-toggle {
-    display: inline-block;
-    margin-left: 0.5em;
-    cursor: pointer;
-    font-weight: bold;
-}
 #anki-error-message-details {
     margin-top: 0.25em;
     font-family: 'Courier New', Courier, monospace;

ext/bg/js/settings/anki-controller.js

@@ -44,7 +44,9 @@ class AnkiController {
         this._ankiOptions = null;
         this._getAnkiDataPromise = null;
         this._ankiErrorContainer = null;
-        this._ankiErrorMessageContainer = null;
+        this._ankiErrorMessageNode = null;
+        this._ankiErrorMessageNodeDefaultContent = '';
+        this._ankiErrorMessageDetailsNode = null;
         this._ankiErrorMessageDetailsContainer = null;
         this._ankiErrorMessageDetailsToggle = null;
         this._ankiErrorInvalidResponseInfo = null;
@@ -55,8 +57,10 @@ class AnkiController {
 
     async prepare() {
         this._ankiErrorContainer = document.querySelector('#anki-error');
-        this._ankiErrorMessageContainer = document.querySelector('#anki-error-message');
+        this._ankiErrorMessageNode = document.querySelector('#anki-error-message');
-        this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details');
+        this._ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent;
+        this._ankiErrorMessageDetailsNode = document.querySelector('#anki-error-message-details');
+        this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details-container');
         this._ankiErrorMessageDetailsToggle = document.querySelector('#anki-error-message-details-toggle');
         this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info');
         this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]');
@@ -256,6 +260,7 @@ class AnkiController {
     }
 
     async _getAnkiData() {
+        this._setAnkiStatusChanging();
         const [
             [deckNames, error1],
             [modelNames, error2]
@@ -295,18 +300,29 @@ class AnkiController {
         }
     }
 
+    _setAnkiStatusChanging() {
+        this._ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent;
+        this._ankiErrorMessageNode.classList.remove('danger-text');
+    }
+
     _hideAnkiError() {
+        if (this._ankiErrorContainer !== null) {
             this._ankiErrorContainer.hidden = true;
+        }
         this._ankiErrorMessageDetailsContainer.hidden = true;
+        this._ankiErrorMessageDetailsToggle.hidden = true;
         this._ankiErrorInvalidResponseInfo.hidden = true;
-        this._ankiErrorMessageContainer.textContent = '';
+        this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled');
-        this._ankiErrorMessageDetailsContainer.textContent = '';
+        this._ankiErrorMessageNode.classList.remove('danger-text');
+        this._ankiErrorMessageDetailsNode.textContent = '';
     }
 
     _showAnkiError(error) {
         let errorString = typeof error === 'object' && error !== null ? error.message : null;
         if (!errorString) { errorString = `${error}`; }
-        this._ankiErrorMessageContainer.textContent = errorString;
+        if (!/[.!?]$/.test(errorString)) { errorString += '.'; }
+        this._ankiErrorMessageNode.textContent = errorString;
+        this._ankiErrorMessageNode.classList.add('danger-text');
 
         const data = error.data;
         let details = '';
@@ -314,11 +330,14 @@ class AnkiController {
             details += `${JSON.stringify(data, null, 4)}\n\n`;
         }
         details += `${error.stack}`.trimRight();
-        this._ankiErrorMessageDetailsContainer.textContent = details;
+        this._ankiErrorMessageDetailsNode.textContent = details;
 
+        if (this._ankiErrorContainer !== null) {
             this._ankiErrorContainer.hidden = false;
+        }
         this._ankiErrorMessageDetailsContainer.hidden = true;
         this._ankiErrorInvalidResponseInfo.hidden = (errorString.indexOf('Invalid response') < 0);
+        this._ankiErrorMessageDetailsToggle.hidden = false;
     }
 
     async _requestClipboardReadPermission() {

ext/bg/settings.html

@@ -913,7 +913,7 @@
 
                     <div class="alert alert-danger" id="anki-error" hidden>
                         <span id="anki-error-message"></span><a id="anki-error-message-details-toggle">&hellip;</a>
-                        <div id="anki-error-message-details" hidden></div>
+                        <div id="anki-error-message-details-container" hidden><div id="anki-error-message-details"></div></div>
                     </div>
 
                     <div class="alert alert-danger" id="anki-error-invalid-response-info" hidden>

ext/bg/settings2.html

@@ -1202,14 +1202,28 @@
         </div>
     </div>
     <div class="settings-group">
-        <div class="settings-item"><div class="settings-item-inner">
+        <div class="settings-item">
+            <div class="settings-item-inner">
                 <div class="settings-item-left">
                     <div class="settings-item-label">Enable Anki integration</div>
+                    <div class="settings-item-description">
+                        <span>Connection status:</span>
+                        <span id="anki-error-message">&hellip;</span> <a id="anki-error-message-details-toggle" hidden>Details&hellip;</a>
+                    </div>
                 </div>
                 <div class="settings-item-right">
                     <label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
                 </div>
-        </div></div>
+            </div>
+            <div class="settings-item-children" id="anki-error-message-details-container" hidden>
+                <p class="danger-text" id="anki-error-invalid-response-info" hidden>
+                    Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
+                    which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.
+                    Resetting it to the default value may fix issues that are occurring.
+                </p>
+                <div class="danger-text" id="anki-error-message-details"></div>
+            </div>
+        </div>
         <div class="settings-item">
             <div class="settings-item-inner settings-item-inner-wrappable">
                 <div class="settings-item-left">
@@ -2007,18 +2021,6 @@
             <div class="anki-card-field-input-header" data-persistent="true">Value</div>
         </div>
     </div>
-    <div class="modal-body-addon" id="anki-error" hidden>
-        <p class="danger-text">
-            <strong>Anki connection error:</strong>
-            <span id="anki-error-message"></span><a id="anki-error-message-details-toggle">&hellip;</a>
-        </p>
-        <p class="danger-text" id="anki-error-invalid-response-info" hidden>
-            Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
-            which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.
-            Resetting it to the default value may fix issues that are occurring.
-        </p>
-        <div class="danger-text" id="anki-error-message-details" hidden></div>
-    </div>
     <div class="modal-footer">
         <button class="low-emphasis" data-modal-action="show,anki-cards-info">Help</button>
         <button data-modal-action="hide">Close</button>