warn about custom templates in the welcome page

5 files changed, 69 insertions, 19 deletions

diff --git a/ext/css/settings.css b/ext/css/settings.css
index eaebc3af..a2618d88 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -2167,6 +2167,13 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
     display: none;
 }
 
+.warn-custom-templates-notification {
+    border: 1px solid var(--danger-color);
+}
+:root:not([data-warn-custom-templates=true]) .warn-custom-templates-notification {
+    display: none;
+}
+
 .test-anki-note-viewer-container {
     margin-top: 0.85em;
     display: flex;
diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js
index 565f4abf..755010a3 100644
--- a/ext/js/background/backend.js
+++ b/ext/js/background/backend.js
@@ -2099,20 +2099,12 @@ class Backend {
     }
 
     async _openWelcomeGuidePageOnce() {
-        if (isObject(chrome.storage) && isObject(chrome.storage.session)) {
-            // Chrome
-            chrome.storage.session.get(['openedWelcomePage']).then((result) => {
-                if (!result.openedWelcomePage) {
-                    this._openWelcomeGuidePage();
-                    chrome.storage.session.set({'openedWelcomePage': true});
-                }
-            });
-        } else {
-            // Firefox (storage.session is not supported yet)
-            // NOTE: This means that the welcome page will repeatedly open in Firefox
-            // until they support storage.session.
-            this._openWelcomeGuidePage();
-        }
+        chrome.storage.session.get(['openedWelcomePage']).then((result) => {
+            if (!result.openedWelcomePage) {
+                this._openWelcomeGuidePage();
+                chrome.storage.session.set({'openedWelcomePage': true});
+            }
+        });
     }
 
     async _openWelcomeGuidePage() {
diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index 7b050416..1f2ffb05 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -1001,6 +1001,33 @@ class OptionsUtil {
 
     async _updateVersion21(options) {
         await this._applyAnkiFieldTemplatesPatch(options, '/data/templates/anki-field-templates-upgrade-v21.handlebars');
+
+        let customTemplates = false;
+        for (const {options: profileOptions} of options.profiles) {
+            if (profileOptions.anki.fieldTemplates !== null) {
+                customTemplates = true;
+            }
+        }
+
+        if (customTemplates && isObject(chrome.storage)) {
+            chrome.storage.session.set({'needsCustomTemplatesWarning': true});
+            await this._createTab(chrome.runtime.getURL('/welcome.html'));
+            chrome.storage.session.set({'openedWelcomePage': true});
+        }
+
         return options;
     }
+
+    _createTab(url) {
+        return new Promise((resolve, reject) => {
+            chrome.tabs.create({url}, (tab) => {
+                const e = chrome.runtime.lastError;
+                if (e) {
+                    reject(new Error(e.message));
+                } else {
+                    resolve(tab);
+                }
+            });
+        });
+    }
 }
diff --git a/ext/js/pages/welcome-main.js b/ext/js/pages/welcome-main.js
index 521ce2c2..8039dae5 100644
--- a/ext/js/pages/welcome-main.js
+++ b/ext/js/pages/welcome-main.js
@@ -58,6 +58,13 @@ async function setupGenericSettingsController(genericSettingController) {
 
         setupEnvironmentInfo();
 
+        chrome.storage.session.get({'needsCustomTemplatesWarning': false}).then((result) => {
+            if (result.needsCustomTemplatesWarning) {
+                document.documentElement.dataset.warnCustomTemplates = 'true';
+                chrome.storage.session.remove(['needsCustomTemplatesWarning']);
+            }
+        });
+
         const preparePromises = [];
 
         const modalController = new ModalController();
diff --git a/ext/welcome.html b/ext/welcome.html
index 14e98367..56167866 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -25,6 +25,19 @@
 
     <h1>Welcome to Yomitan!</h1>
 
+    <!-- Notifications -->
+    <div class="settings-group settings-group-top-margin warn-custom-templates-notification">
+      <div class="settings-item">
+        <div class="settings-item-inner settings-item-inner-wrappable"><div class="settings-item-left"><div class="settings-item-label">
+              <p>
+                There are custom Anki templates in your settings. Note that <a href="https://github.com/themoeway/yomitan#custom-templates" target="_blank" rel="noopener noreferrer">some syntax has changed from previous versions of Yomitan.</a>
+                Please ensure that your custom templates are using the updated syntax.
+              </p>
+          </div></div></div>
+      </div>
+    </div>
+
+    <!-- Content -->
     <h2>Here are some basics to get started</h2>
     <div class="settings-group">
         <div class="settings-item">
@@ -49,10 +62,9 @@
         <div class="settings-item">
             <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
                 Yomitan requires one or more dictionaries to be installed in order to look up terms, kanji, and other information.
-                Several downloadable dictionaries can be found on the <a href="https://github.com/themoeway/yomitan#dictionaries" target="_blank" rel="noopener noreferrer">Yomitan homepage</a>,
-                allowing you to choose the dictionaries most relevant for you.
+                Several downloadable dictionaries can be found on the <a href="https://github.com/themoeway/yomitan#dictionaries" target="_blank" rel="noopener noreferrer">Yomitan homepage</a>.
                 Dictionaries can be configured using the button below,
-                or later from the the <a href="/settings.html" rel="noopener">Settings</a> page.
+                or later from the <a href="/settings.html" rel="noopener">Settings</a> page.
             </div></div></div>
             <div class="settings-item-children settings-item-children-group">
                 <div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">
@@ -67,12 +79,17 @@
         </div>
         <div class="settings-item">
             <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                You can also import an exported collection of dictionaries to migrate from a different device or browser from the <a href="/settings.html#!backup">Backup section of the Settings</a> page.
+                You can also import an exported collection of dictionaries from the <a href="/settings.html#!backup">Backup section of the Settings</a> page.
 
                 <br><br>
 
-                If you are migrating from Yomichan, you may be particularly interested in migrating your data from Yomichan into Yomitan.
+                If you are migrating from Yomichan, you may be interested in importing your data into Yomitan.
                 Please follow instructions from <a href="https://github.com/themoeway/yomitan#migrating-from-yomichan" target="_blank" rel="noopener noreferrer">Yomitan's README</a> for that.
+
+                <br><br>
+
+                If you are using or planning to use custom templates for Anki note creation, note that <a href="https://github.com/themoeway/yomitan#custom-templates" target="_blank" rel="noopener noreferrer">some syntax has changed from Yomichan and Yomibaba.</a>
+                Please ensure that your custom templates are using the updated syntax.
             </div></div></div>
         </div>
         <div class="settings-item">