--wip-- [skip ci]

ext/css/settings.css

@@ -754,6 +754,12 @@ select.short-height {
     color: #8b0000;
 }
 
+/* Recommended settings modal */
+/* #recommended-settings-body {
+    display: grid;
+    grid-template-columns: auto 1fr;
+} */
+
 
 /* Advanced settings */
 .settings-group.advanced-only>.settings-item::after,

ext/data/recommended-settings.json

@@ -0,0 +1,30 @@
+{
+    "en": [
+        {
+            "action": "set",
+            "path": "scanning.scanResolution",
+            "value": "word",
+            "description": "English uses spaces to separate words so scanning by word (instead of character) is recommended."
+        },
+        {
+            "action": "set",
+            "path": "translation.searchResolution",
+            "value": "word",
+            "description": "English uses spaces to separate words so looking up whole words in the dictionary is recommended."
+        }
+    ],
+    "es": [
+        {
+            "action": "set",
+            "path": "scanning.scanResolution",
+            "value": "word",
+            "description": "Spanish uses spaces to separate words so scanning by word (instead of character) is recommended."
+        },
+        {
+            "action": "set",
+            "path": "translation.searchResolution",
+            "value": "word",
+            "description": "Spanish uses spaces to separate words so looking up whole words in the dictionary is recommended."
+        }
+    ]
+}

ext/js/pages/settings/languages-controller.js

@@ -35,17 +35,11 @@ export class LanguagesController {
     async prepare() {
         this._languages = await this._settingsController.application.api.getLanguageSummaries();
         this._languages.sort((a, b) => a.name.localeCompare(b.name, 'en'));
-        const languageSelect = this._fillSelect(this._languages);
-        languageSelect.addEventListener(
-            /** @type {string} */ ('settingChanged'),
-            /** @type {EventListener} */ (this._onLanguageSelectChanged.bind(this)),
-            false,
-        );
+        this._fillSelect(this._languages);
     }
 
     /**
      * @param {import('language').LanguageSummary[]} languages
-     * @returns {Element}
      */
     _fillSelect(languages) {
         const selectElement = querySelectorNotNull(document, '#language-select');
@@ -55,30 +49,5 @@ export class LanguagesController {
             option.text = `${name} (${iso})`;
             selectElement.appendChild(option);
         }
-        return selectElement;
-    }
-
-    /**
-     * @param {import('dom-data-binder').SettingChangedEvent} settingChangedEvent
-     */
-    _onLanguageSelectChanged(settingChangedEvent) {
-        // Check if there are language setting overrides and ask the user if they want to apply them
-        const setLanguage = settingChangedEvent.detail.value;
-        if (typeof setLanguage !== 'string') { return; }
-
-        const languageSettingOverrides = this._settingsController.getLanguageSettingOverrides(setLanguage);
-        if (this._lastSelectedLanguage !== '' && this._lastSelectedLanguage !== setLanguage && typeof languageSettingOverrides !== 'undefined') {
-            const userFriendlyLanguageName = this._languages.find((language) => language.iso === setLanguage)?.name;
-            // eslint-disable-next-line no-alert
-            const yes = confirm(
-                'We found default settings that work best for ' + userFriendlyLanguageName + ':\n\n' +
-                languageSettingOverrides.map(({path, value}) => `${path} = "${value}"`).join('\n') + '\n\n' +
-                'Apply the default settings?',
-            );
-            if (yes) {
-                void this._settingsController.applyLanguageSettingOverrides(setLanguage);
-            }
-        }
-        this._lastSelectedLanguage = setLanguage;
     }
 }

ext/js/pages/settings/recommended-settings-controller.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2024  Yomitan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {querySelectorNotNull} from '../../dom/query-selector.js';
+
+export class RecommendedSettingsController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
+    constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
+        this._settingsController = settingsController;
+        /** @type {HTMLElement} */
+        this._recommendedSettingsModal = querySelectorNotNull(document, '#recommended-settings-modal');
+        /** @type {HTMLInputElement} */
+        this._languageSelect = querySelectorNotNull(document, '#language-select');
+        /** @type {HTMLInputElement} */
+        this._applyButton = querySelectorNotNull(document, '#recommended-settings-apply-button');
+        /** @type {} */
+    }
+
+    /** */
+    async prepare() {
+        this._languageSelect.addEventListener('change', this._onLanguageSelectChanged.bind(this), false);
+        this._applyButton.addEventListener('click', this._onApplyButtonClicked.bind(this), false);
+    }
+
+    /**
+     * @param {Event} _e
+     */
+    _onLanguageSelectChanged(_e) {
+        const setLanguage = this._languageSelect.value;
+        if (typeof setLanguage !== 'string') { return; }
+
+        const recommendedSettings = this._settingsController.getRecommendedSettings(setLanguage);
+        if (typeof recommendedSettings !== 'undefined') {
+            const settingsList = querySelectorNotNull(document, '#recommended-settings-list');
+            settingsList.innerHTML = '';
+            for (const {path, value, description} of recommendedSettings) {
+                const template = this._settingsController.instantiateTemplate('recommended-settings-list-item');
+
+                // Render checkbox
+                const label = querySelectorNotNull(template, '.settings-item-label');
+                label.innerHTML = `<code>${path}</code> -> <code>${value}</code>`;
+
+                // Render description
+                const descriptionElement = querySelectorNotNull(template, '.settings-item-description');
+                if (description !== 'undefined') {
+                    descriptionElement.textContent = description;
+                }
+
+                // Render checkbox
+                const checkbox /** @type {HTMLInputElement} */ = querySelectorNotNull(template, 'input[type="checkbox"]');
+                checkbox.value = path;
+
+                settingsList.append(template);
+            }
+            this._recommendedSettingsModal.hidden = false;
+        }
+    }
+
+    /**
+     * @param {MouseEvent} e
+     */
+    _onApplyButtonClicked(e) {
+        e.preventDefault();
+        const enabledCheckboxes = querySelectorNotNull(document, '#recommended-settings-list').querySelectorAll('input[type="checkbox"]:checked');
+        if (enabledCheckboxes.length > 0) {
+            const recommendedSettings = this._settingsController.getRecommendedSettings(this._languageSelect.value);
+            for (const checkbox of enabledCheckboxes) {
+                this._settingsController.setSetting(path, value);
+            }
+        }
+        this._recommendedSettingsModal.hidden = true;
+    }
+}

ext/js/pages/settings/settings-controller.js

@@ -46,8 +46,8 @@ export class SettingsController extends EventDispatcher {
         this._pageExitPreventionEventListeners = new EventListenerCollection();
         /** @type {HtmlTemplateCollection} */
         this._templates = new HtmlTemplateCollection();
-        /** @type {import('settings-controller').LanguageSettingOverrides} */
-        this._languageSettingOverrides = {};
+        /** @type {import('settings-controller').RecommendedSettingsByLanguage} */
+        this._recommendedSettingsByLanguage = {};
     }
 
     /** @type {import('../../application.js').Application} */
@@ -78,7 +78,7 @@ export class SettingsController extends EventDispatcher {
     /** */
     async prepare() {
         await this._templates.loadFromFiles(['/templates-settings.html']);
-        this._languageSettingOverrides = await fetchJson('/data/default-options-overrides.json');
+        this._recommendedSettingsByLanguage = await fetchJson('/data/recommended-settings.json');
         this._application.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         if (this._canObservePermissionsChanges()) {
             chrome.permissions.onAdded.addListener(this._onPermissionsChanged.bind(this));
@@ -190,8 +190,8 @@ export class SettingsController extends EventDispatcher {
      * @param {string} language
      */
     async applyLanguageSettingOverrides(language) {
-        /** @type {import('settings-controller').SettingOverride[]} */
-        const settingOverrides = this._languageSettingOverrides[language];
+        /** @type {import('settings-controller').RecommendedSetting[]} */
+        const settingOverrides = this._recommendedSettingsByLanguage[language];
         if (typeof settingOverrides === 'undefined') { return; }
         /** @type {import('settings-modifications').Modification[]} */
         const modifications = settingOverrides.map(({path, value}) => ({action: 'set', path, value}));
@@ -201,10 +201,10 @@ export class SettingsController extends EventDispatcher {
 
     /**
      * @param {string} language
-     * @returns {import('settings-controller').SettingOverride[]}
+     * @returns {import('settings-controller').RecommendedSetting[]}
      */
-    getLanguageSettingOverrides(language) {
-        return this._languageSettingOverrides[language];
+    getRecommendedSettings(language) {
+        return this._recommendedSettingsByLanguage[language];
     }
 
     /**

ext/js/pages/settings/settings-main.js

@@ -40,6 +40,7 @@ import {PersistentStorageController} from './persistent-storage-controller.js';
 import {PopupPreviewController} from './popup-preview-controller.js';
 import {PopupWindowController} from './popup-window-controller.js';
 import {ProfileController} from './profile-controller.js';
+import {RecommendedSettingsController} from './recommended-settings-controller.js';
 import {ScanInputsController} from './scan-inputs-controller.js';
 import {ScanInputsSimpleController} from './scan-inputs-simple-controller.js';
 import {SecondarySearchDictionaryController} from './secondary-search-dictionary-controller.js';
@@ -174,6 +175,8 @@ await Application.main(true, async (application) => {
     const sortFrequencyDictionaryController = new SortFrequencyDictionaryController(settingsController);
     preparePromises.push(sortFrequencyDictionaryController.prepare());
 
+    const recommendedSettingsController = new RecommendedSettingsController(settingsController);
+    preparePromises.push(recommendedSettingsController.prepare());
 
     await Promise.all(preparePromises);
 

ext/settings.html

@@ -3851,5 +3851,31 @@ <h1 class="modal-title">Pronunciation Dictionaries</h1>
     </div>
 </div></div>
 
+<!-- Recommended settings modal -->
+<div id="recommended-settings-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
+    <div class="modal-header">
+        <div class="modal-title">Recommended settings</div>
+    </div>
+    <div class="modal-body">
+        <div id="recommended-settings-body">
+            <div class="settings-item">
+                <div class="settings-item-inner">
+                    <div class="settings-item-left">
+                        <div class="settings-item-label"><strong>Recommendation</strong></div>
+                    </div>
+                    <div class="settings-item-right">
+                        <div class="settings-item-label"><strong>Apply?</strong></div>
+                    </div>
+                </div>
+            </div>
+            <div id="recommended-settings-list"></div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="low-emphasis" data-modal-action="hide">Cancel</button>
+        <button type="button" id="recommended-settings-apply-button">Apply</button>
+    </div>
+</div></div>
+
 </body>
 </html>

ext/templates-settings.html

@@ -126,7 +126,7 @@
                 <strong><div class="settings-item-label"></div></strong>
             </div>
             <div class="settings-item-right">
-                <button type="button" class="action-button" data-action="import-recommended-dictionary" data-import-url="">Download</button>
+
             </div>
         </div>
     </div>
@@ -473,4 +473,23 @@
     <button type="button" class="popup-menu-item" data-menu-action="remove">Remove</button>
 </div></div></div></template>
 
+<!-- Recommended Settings -->
+<template id="recommended-settings-list-item-template">
+    <div class="settings-item">
+        <div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label"></div>
+                <div class="settings-item-description"></div>
+            </div>
+            <div class="settings-item-right">
+                <label class="recommended-settings-checkbox-item flex-row-nowrap flex-label">
+                    <label class="checkbox">
+                        <input type="checkbox" class="recommended-settings-checkbox" checked><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span>
+                    </label>
+                </label>
+            </div>
+        </div>
+    </div>
+</template>
+
 </body></html>

test/data/json.json

@@ -99,7 +99,7 @@
             "type": "AjvSchema"
         },
         {
-            "path": "ext/data/schemas/default-options-overrides-schema.json",
+            "path": "ext/data/schemas/recommended-settings-schema.json",
             "typeFile": "types/test/json.d.ts",
             "type": "AjvSchema"
         },
@@ -199,10 +199,10 @@
             "schema": "ext/data/schemas/recommended-dictionaries-schema.json"
         },
         {
-            "path": "ext/data/default-options-overrides.json",
+            "path": "ext/data/recommended-settings.json",
             "typeFile": "types/ext/settings-controller.d.ts",
             "type": "LanguageSettingOverrides",
-            "schema": "ext/data/schemas/default-options-overrides-schema.json"
+            "schema": "ext/data/schemas/recommended-settings-schema.json"
         }
     ]
 }

types/ext/settings-controller.d.ts

@@ -58,11 +58,13 @@ export type SettingsExtraFields<THasScope extends boolean> = THasScope extends t
 
 export type ModifyResult = Core.Response<SettingsModifications.ModificationResult>;
 
-export type LanguageSettingOverrides = {
-    [key: string]: SettingOverride[];
+export type RecommendedSettingsByLanguage = {
+    [key: string]: RecommendedSetting[];
 };
 
-export type SettingOverride = {
+export type RecommendedSetting = {
+    action: string;
     path: string;
     value: string;
+    description: string;
 };