Display an indication when Anki field order/existence doesn't match (#1119)

ext/bg/css/settings2.css

@@ -2088,9 +2088,22 @@ select.profile-condition-operator {
 .anki-card-field-input-header {
     font-weight: bold;
 }
-.anki-card-field-name {
+.anki-card-field-name-container {
-    margin-right: 1em;
+    display: flex;
+    flex-flow: row nowrap;
+    align-self: stretch;
+    align-items: center;
     margin-top: 0.25em;
+    margin-right: 0.25em;
+    padding: 0 0.25em;
+}
+.anki-card-field-name-container[data-is-valid=false],
+.anki-card-field-name-container[data-order-matches=false][data-index='0'] {
+    background-color: var(--danger-color-lightest);
+    border-radius: var(--text-input-border-radius);
+}
+.anki-card-field-name {
+    flex: 1 1 auto;
 }
 .anki-card-field-value-container {
     display: flex;

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

@@ -46,6 +46,7 @@ class AnkiController {
         this._ankiErrorInvalidResponseInfo = null;
         this._ankiCardPrimary = null;
         this._ankiCardPrimaryType = null;
+        this._validateFieldsToken = null;
     }
 
     async prepare() {
@@ -464,10 +465,19 @@ class AnkiCardController {
 
         const markers = this._ankiController.getFieldMarkers(this._cardType);
         const totalFragment = document.createDocumentFragment();
+        const fieldMap = new Map();
+        let index = 0;
         for (const [fieldName, fieldValue] of Object.entries(this._fields)) {
             const content = this._settingsController.instantiateTemplateFragment('anki-card-field');
 
-            content.querySelector('.anki-card-field-name').textContent = fieldName;
+            const fieldNameContainerNode = content.querySelector('.anki-card-field-name-container');
+            fieldNameContainerNode.dataset.index = `${index}`;
+            const fieldNameNode = content.querySelector('.anki-card-field-name');
+            fieldNameNode.textContent = fieldName;
+            fieldMap.set(fieldName, {fieldNameContainerNode});
+
+            const valueContainer = content.querySelector('.anki-card-field-value-container');
+            valueContainer.dataset.index = `${index}`;
 
             const inputField = content.querySelector('.anki-card-field-value');
             inputField.value = fieldValue;
@@ -494,6 +504,8 @@ class AnkiCardController {
             }
 
             totalFragment.appendChild(content);
+
+            ++index;
         }
 
         const ELEMENT_NODE = Node.ELEMENT_NODE;
@@ -503,6 +515,30 @@ class AnkiCardController {
             container.removeChild(node);
         }
         container.appendChild(totalFragment);
+
+        this._validateFields(fieldMap);
+    }
+
+    async _validateFields(fieldMap) {
+        const token = {};
+        this._validateFieldsToken = token;
+
+        let fieldNames;
+        try {
+            fieldNames = await this._ankiController.getModelFieldNames(this._model);
+        } catch (e) {
+            return;
+        }
+
+        if (token !== this._validateFieldsToken) { return; }
+
+        const fieldNamesSet = new Set(fieldNames);
+        let index = 0;
+        for (const [fieldName, {fieldNameContainerNode}] of fieldMap.entries()) {
+            fieldNameContainerNode.dataset.isValid = `${fieldNamesSet.has(fieldName)}`;
+            fieldNameContainerNode.dataset.orderMatches = `${index < fieldNames.length && fieldName === fieldNames[index]}`;
+            ++index;
+        }
     }
 
     async _setDeck(value) {

ext/bg/settings.html

@@ -1083,7 +1083,7 @@
                         </div>
 
                         <template id="anki-card-field-template"><tr>
-                            <td class="col-sm-2 anki-card-field-name"></td>
+                            <td class="col-sm-2 anki-card-field-name-container"><span class="anki-card-field-name"></span></td>
                             <td class="col-sm-10">
                                 <div class="input-group anki-card-field-value-container">
                                     <input type="text" class="anki-card-field-value form-control" data-field="" value="">

ext/bg/settings2.html

@@ -2366,7 +2366,7 @@
 
 
 <!-- Anki templates -->
-<template id="anki-card-field-template"><div class="anki-card-field-name"></div>
+<template id="anki-card-field-template"><div class="anki-card-field-name-container"><span class="anki-card-field-name"></span></div>
 <div class="anki-card-field-value-container">
     <input type="text" class="anki-card-field-value input-with-suffix-button" autocomplete="off">
     <button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button" data-menu-position="below,left"><span class="icon-button-icon icon-button-icon-light" data-icon="material-down-arrow"></span></button>