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

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
                 }
             }
         }

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});
         }
     }

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) {

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');

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">

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">

test/test-options-util.js

@@ -503,7 +503,8 @@ function createOptionsUpdatedTestData1() {
             database: {
                 prefixWildcardsSupported: false
             },
-            showPopupPreview: false
+            showPopupPreview: false,
+            useSettingsV2: false
         }
     };
 }