Settings v2 testing setup (#1084)

* Add option for using settings v2

* Add options/info about settings v2

* Use settings v2 URL when applicable

* Update tests

7 files changed, 59 insertions, 4 deletions

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index 2da48041..4a953243 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -797,7 +797,8 @@
             "type": "object",
             "required": [
                 "database",
-                "showPopupPreview"
+                "showPopupPreview",
+                "useSettingsV2"
             ],
             "properties": {
                 "database": {
@@ -815,6 +816,10 @@
                 "showPopupPreview": {
                     "type": "boolean",
                     "default": false
+                },
+                "useSettingsV2": {
+                    "type": "boolean",
+                    "default": false
                 }
             }
         }
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index f9c308e5..012036dc 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -790,12 +790,25 @@ class Backend {
     }
 
     _onCommandOptions(params) {
+        const {useSettingsV2} = this._options.global;
         const {mode='existingOrNewTab'} = params || {};
         if (mode === 'existingOrNewTab') {
+            if (useSettingsV2) {
+                (async () => {
+                    const url = chrome.runtime.getURL('/bg/settings2.html');
+                    const tab = await this._findTab(1000, (url2) => url2.startsWith(url));
+                    if (tab !== null) {
+                        await this._focusTab(tab);
+                    } else {
+                        chrome.tabs.create({url});
+                    }
+                })();
+                return;
+            }
             chrome.runtime.openOptionsPage();
         } else if (mode === 'newTab') {
             const manifest = chrome.runtime.getManifest();
-            const url = chrome.runtime.getURL(manifest.options_ui.page);
+            const url = chrome.runtime.getURL(useSettingsV2 ? '/bg/settings2.html' : manifest.options_ui.page);
             chrome.tabs.create({url});
         }
     }
diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js
index 93eebe72..b6736fd8 100644
--- a/ext/bg/js/context-main.js
+++ b/ext/bg/js/context-main.js
@@ -30,12 +30,14 @@ class DisplayController {
         this._showExtensionInfo(manifest);
         this._setupEnvironment();
         this._setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html'));
-        this._setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page));
         this._setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/');
 
         const optionsFull = await api.optionsGetFull();
         this._optionsFull = optionsFull;
 
+        const optionsPageUrl = optionsFull.global.useSettingsV2 ? '/bg/settings2.html' : manifest.options_ui.page;
+        this._setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(optionsPageUrl));
+
         const {profiles, profileCurrent} = optionsFull;
         const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
         if (primaryProfile !== null) {
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index dcc8471a..5fb10516 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -613,10 +613,12 @@ class OptionsUtil {
         // Version 6 changes:
         //  Updated handlebars templates to include "conjugation" definition.
         //  Added global option showPopupPreview.
+        //  Added global option useSettingsV2.
         //  Added anki.checkForDuplicates.
         //  Added general.glossaryLayoutMode; removed general.compactGlossaries.
         await this._addFieldTemplatesToOptions(options, '/bg/data/anki-field-templates-upgrade-v6.handlebars');
         options.global.showPopupPreview = false;
+        options.global.useSettingsV2 = false;
         for (const profile of options.profiles) {
             profile.options.anki.checkForDuplicates = true;
             profile.options.general.glossaryLayoutMode = (profile.options.general.compactGlossaries ? 'compact' : 'default');
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index c168d7d8..acb07a60 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -21,6 +21,12 @@
                 <h1>Yomichan Options</h1>
             </div>
 
+            <div class="alert alert-info">
+                <a style="text-decoration: underline;" href="/bg/settings2.html">
+                    An updated version of the settings page is available for testing and feedback.
+                </a>
+            </div>
+
             <div class="profile-form ignore-form-changes">
                 <h3>Profiles</h3>
 
@@ -192,6 +198,10 @@
                     <label><input type="checkbox" id="show-debug-info" data-setting="general.debugInfo" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-debug-info"> Show debug information</label>
                 </div>
 
+                <div class="checkbox options-advanced">
+                    <label><input type="checkbox" data-setting="global.useSettingsV2" data-scope="global"> Use the <a href="/bg/settings2.html">v2 settings page</a> by default</label>
+                </div>
+
                 <div class="form-group">
                     <label for="result-output-mode">Result grouping</label>
                     <select class="form-control" id="result-output-mode" data-setting="general.resultOutputMode" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-result-output-mode">
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index dcf99bbb..fbcbfbc9 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -50,6 +50,28 @@
 
     <h1>Yomichan Settings</h1>
 
+    <h2></h2>
+    <div class="settings-group" style="border: 1px solid var(--accent-color);">
+        <div class="settings-item"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">
+                    <strong>Notice:</strong>
+                    This new settings page is currently in beta. Questions, comments, and other feedback
+                    is welcome and can be shared
+                    <a href="https://github.com/FooSoft/yomichan/issues/1000" target="_blank" rel="noopener noreferrer">on Github</a>.
+                </div>
+            </div>
+        </div></div>
+        <div class="settings-item"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Use the v2 settings page by default</div>
+            </div>
+            <div class="settings-item-right">
+                <label class="toggle"><input type="checkbox" data-setting="global.useSettingsV2" data-scope="global"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+            </div>
+        </div></div>
+    </div>
+
     <h2 id="profile">Profile</h2>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
diff --git a/test/test-options-util.js b/test/test-options-util.js
index 2e59c7ea..cfb1c87d 100644
--- a/test/test-options-util.js
+++ b/test/test-options-util.js
@@ -503,7 +503,8 @@ function createOptionsUpdatedTestData1() {
             database: {
                 prefixWildcardsSupported: false
             },
-            showPopupPreview: false
+            showPopupPreview: false,
+            useSettingsV2: false
         }
     };
 }