Rework settings (#884)

* Add and remove settings from advanced

* Add warning to Text scan length

* Move Frequency sorting dictionary under Dictionaries, remove it from advanced, add child element Frequency sorting mode to advanced

* Move Result grouping mode to Appearance

* Move General above Dictionaries

* Rename Popup Appearance to Appearance

* Move Reading mode from Text Parsing to Appearance

* Make Text scan length warning less scary

* Move anki dupe settings back to advanced

* Remove scan delay setting from welcome page

* Move Recommended Permissions to top of welcome page, add bold, and add warning text

* Improve wording of recommended permissions warning

* Rename Enable content scanning to Enable Yomitan

Co-authored-by: James Maa <jmaa@berkeley.edu>
Signed-off-by: Kuuuube <61125188+Kuuuube@users.noreply.github.com>

* Remove Auto-hide search popup option from welcome page

* Fix appearance href and id

* Add Result Display category

* Add success text css

* Split off quick start guide from welcome page

* Add language selector on welcome page

* Add success or danger text if recommended permissions are on or off

* Remove unused placeholders in backup category

* Rename Popup to Popup Behavior

* Move Auto-hide search popup and Hide popup on cursor exit to Popup Behavior

* Move Term display style, Reading mode, and Frequency display style to advanced

* Move custom css to advanced

* Remove unused setting

* Add back setting with note and hidden

* Remove Auto-hide search popup

* Restore Auto-hide search popup

* Fix Auto-hide search popup description

---------

Signed-off-by: Kuuuube <61125188+Kuuuube@users.noreply.github.com>
Co-authored-by: James Maa <jmaa@berkeley.edu>

2 files changed, 28 insertions, 12 deletions

diff --git a/ext/js/pages/settings/recommended-permissions-controller.js b/ext/js/pages/settings/recommended-permissions-controller.js
index 8aff51c4..80572a9b 100644
--- a/ext/js/pages/settings/recommended-permissions-controller.js
+++ b/ext/js/pages/settings/recommended-permissions-controller.js
@@ -19,6 +19,7 @@
 import {EventListenerCollection} from '../../core/event-listener-collection.js';
 import {toError} from '../../core/to-error.js';
 import {getAllPermissions, setPermissionsGranted} from '../../data/permissions-util.js';
+import {querySelectorNotNull} from '../../dom/query-selector.js';
 
 export class RecommendedPermissionsController {
     /**
@@ -27,8 +28,8 @@ export class RecommendedPermissionsController {
     constructor(settingsController) {
         /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
-        /** @type {?NodeListOf<HTMLInputElement>} */
-        this._originToggleNodes = null;
+        /** @type {HTMLInputElement} */
+        this._originToggleNode = querySelectorNotNull(document, '#recommended-permissions-toggle');
         /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
         /** @type {?HTMLElement} */
@@ -37,11 +38,8 @@ export class RecommendedPermissionsController {
 
     /** */
     async prepare() {
-        this._originToggleNodes = document.querySelectorAll('.recommended-permissions-toggle');
         this._errorContainer = document.querySelector('#recommended-permissions-error');
-        for (const node of this._originToggleNodes) {
-            node.addEventListener('change', this._onOriginToggleChange.bind(this), false);
-        }
+        this._originToggleNode.addEventListener('change', this._onOriginToggleChange.bind(this), false);
 
         this._settingsController.on('permissionsChanged', this._onPermissionsChanged.bind(this));
         await this._updatePermissions();
@@ -55,12 +53,8 @@ export class RecommendedPermissionsController {
     _onPermissionsChanged({permissions}) {
         this._eventListeners.removeAllEventListeners();
         const originsSet = new Set(permissions.origins);
-        if (this._originToggleNodes !== null) {
-            for (const node of this._originToggleNodes) {
-                const {origin} = node.dataset;
-                node.checked = typeof origin === 'string' && originsSet.has(origin);
-            }
-        }
+        const {origin} = this._originToggleNode.dataset;
+        this._originToggleNode.checked = typeof origin === 'string' && originsSet.has(origin);
     }
 
     /**
@@ -80,6 +74,7 @@ export class RecommendedPermissionsController {
     async _updatePermissions() {
         const permissions = await getAllPermissions();
         this._onPermissionsChanged({permissions});
+        this._setWelcomePageText();
     }
 
     /**
@@ -101,4 +96,21 @@ export class RecommendedPermissionsController {
         await this._updatePermissions();
         return true;
     }
+
+    /** */
+    _setWelcomePageText() {
+        /** @type {HTMLElement | null} */
+        this._textIfEnabled = document.querySelector('#permissions-enabled');
+        /** @type {HTMLElement | null} */
+        this._textIfDisabled = document.querySelector('#permissions-disabled');
+        if (this._textIfEnabled && this._textIfDisabled) {
+            if (this._originToggleNode.checked) {
+                this._textIfEnabled.hidden = false;
+                this._textIfDisabled.hidden = true;
+            } else {
+                this._textIfEnabled.hidden = true;
+                this._textIfDisabled.hidden = false;
+            }
+        }
+    }
 }
diff --git a/ext/js/pages/welcome-main.js b/ext/js/pages/welcome-main.js
index 23511dd6..7cb28cda 100644
--- a/ext/js/pages/welcome-main.js
+++ b/ext/js/pages/welcome-main.js
@@ -23,6 +23,7 @@ import {ExtensionContentController} from './common/extension-content-controller.
 import {DictionaryController} from './settings/dictionary-controller.js';
 import {DictionaryImportController} from './settings/dictionary-import-controller.js';
 import {GenericSettingController} from './settings/generic-setting-controller.js';
+import {LanguagesController} from './settings/languages-controller.js';
 import {ModalController} from './settings/modal-controller.js';
 import {RecommendedPermissionsController} from './settings/recommended-permissions-controller.js';
 import {ScanInputsSimpleController} from './settings/scan-inputs-simple-controller.js';
@@ -96,6 +97,9 @@ await Application.main(true, async (application) => {
     const recommendedPermissionsController = new RecommendedPermissionsController(settingsController);
     preparePromises.push(recommendedPermissionsController.prepare());
 
+    const languagesController = new LanguagesController(settingsController);
+    preparePromises.push(languagesController.prepare());
+
     await Promise.all(preparePromises);
 
     document.documentElement.dataset.loaded = 'true';