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>

7 files changed, 417 insertions, 381 deletions

diff --git a/ext/css/material.css b/ext/css/material.css
index bcc384ef..b1259294 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -211,7 +211,9 @@ body {
 .danger-text {
     color: var(--danger-color);
 }
-
+.success-text {
+    color: var(--success-color);
+}
 
 /* Icons */
 .icon {
@@ -277,6 +279,7 @@ body {
 .icon[data-icon=accessibility]           { --icon-image: url(/images/accessibility.svg); }
 .icon[data-icon=connection]              { --icon-image: url(/images/connection.svg); }
 .icon[data-icon=external-link]           { --icon-image: url(/images/external-link.svg); }
+.icon[data-icon=monitor]                 { --icon-image: url(/images/monitor.svg); }
 .icon[data-icon=material-down-arrow] {
     --icon-image: url(/images/material-down-arrow.svg);
     --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
diff --git a/ext/images/monitor.svg b/ext/images/monitor.svg
new file mode 100644
index 00000000..b2fd82d6
--- /dev/null
+++ b/ext/images/monitor.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="16px" height="16px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -1090.5)"><path d="m0 1092.5v22h13v3.9997h-6v1.9999h18v-1.9999h-6v-3.9997h13v-22h-32zm2 2h28v17h-28v-17z" fill="#373737" stroke-width="1.1339"/></g></svg>
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';
diff --git a/ext/quick-start-guide.html b/ext/quick-start-guide.html
new file mode 100644
index 00000000..46f461e2
--- /dev/null
+++ b/ext/quick-start-guide.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Quick Start Guide</title>
+    <link rel="icon" type="image/png" href="/images/icon16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="/images/icon19.png" sizes="19x19">
+    <link rel="icon" type="image/png" href="/images/icon32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/images/icon38.png" sizes="38x38">
+    <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48">
+    <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
+    <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
+    <link rel="stylesheet" type="text/css" href="/css/material.css">
+    <link rel="stylesheet" type="text/css" href="/css/settings.css">
+</head>
+<body>
+
+<!-- Main content -->
+<div class="content-outer"><div class="content">
+<div class="content-left"></div>
+<div class="content-center">
+
+    <span tabindex="-1" id="content-scroll-focus"></span>
+
+    <h1>Welcome to Yomitan!</h1>
+
+    <!-- Content -->
+    <h2>Yomitan Quick Start Guide</h2>
+    <div class="settings-group">
+        <div class="settings-item">
+            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                Clicking the <img src="/images/yomitan-icon.svg" class="inline-icon" alt=""> <em>Yomitan</em> button in the browser bar will open the quick-actions popup.
+            </div></div></div>
+            <div class="settings-item-children settings-item-children-group">
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    The <img src="/images/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="/settings.html" target="_blank" rel="noopener">Settings</a> page.
+                </div></div></div></div>
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    The <img src="/images/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/search.html" target="_blank" rel="noopener">Search</a> page,
+                    enabling text and terms to be looked up using the installed dictionaries.
+                    This can even be used in offline mode!
+                </div></div></div></div>
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    The <img src="/images/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/info.html" target="_blank" rel="noopener">Information</a> page,
+                    which has some helpful information and links about Yomitan.
+                </div></div></div></div>
+            </div>
+        </div>
+        <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/blob/master/docs/dictionaries.md#dictionaries" target="_blank" rel="noopener noreferrer">Yomitan homepage</a>.
+                Dictionaries can be configured from the <a href="/settings.html#!dictionaries" rel="noopener">Settings</a> page.
+            </div></div></div>
+        </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 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 interested in importing your data into Yomitan.
+                Please follow instructions from <a href="https://github.com/themoeway/yomitan/blob/master/docs/yomichan-migration.md#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/blob/master/docs/yomichan-migration.md#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">
+            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
+                The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
+            </div></div></div>
+            <div class="settings-item-children settings-item-children-group">
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    Clicking the <img src="/images/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
+                    will play an audio clip of a term's pronunciation using an online dictionary, if available.
+                </div></div></div></div>
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    Clicking on a kanji character in a term's definition will show additional information about that character.
+                    <span class="light">(Requires a kanji dictionary to be installed.)</span>
+                </div></div></div></div>
+            </div>
+        </div>
+        <a href="/welcome.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Back to Welcome page</div>
+            </div>
+            <div class="settings-item-right open-panel-button-container">
+                <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
+            </div>
+        </div></a>
+    </div>
+
+    <div class="footer-padding"></div>
+
+</div>
+<div class="content-right"></div>
+</div></div>
+</body>
+</html>
diff --git a/ext/settings.html b/ext/settings.html
index f32b8415..252de038 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -27,8 +27,9 @@
             <a href="#!dictionaries"     class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
             <a href="#!general"          class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="cog"></span></span><span class="outline-item-label">General</span></a>
             <a href="#!scanning"         class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="scanning"></span></span><span class="outline-item-label">Scanning</span></a>
-            <a href="#!popup"            class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup</span></a>
-            <a href="#!popup-appearance" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a>
+            <a href="#!popup"            class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup Behavior</span></a>
+            <a href="#!appearance"       class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a>
+            <a href="#!result-display"   class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="monitor"></span></span><span class="outline-item-label">Result Display</span></a>
             <a href="#!popup-size"       class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup-size"></span></span><span class="outline-item-label">Position &amp; Size</span></a>
             <a href="#!window"           class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Window</span></a>
             <a href="#!audio"            class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="speaker"></span></span><span class="outline-item-label">Audio</span></a>
@@ -112,6 +113,52 @@
         </div></div>
     </div>
 
+        <!-- General -->
+        <div class="heading-container">
+            <div class="heading-container-icon"><span class="icon" data-icon="cog"></span></div>
+            <div class="heading-container-left"><h2 id="general"><a href="#!general">General</a></h2></div>
+        </div>
+        <div class="settings-group">
+            <div class="settings-item"><div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Enable Yomitan</div>
+                </div>
+                <div class="settings-item-right">
+                    <label class="toggle"><input type="checkbox" data-setting="general.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                </div>
+            </div></div>
+            <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">
+                        Language
+                    </div>
+                    <div class="settings-item-description">
+                        Language of the text that is being looked up.
+                    </div>
+                </div>
+                <div class="settings-item-right">
+                    <select id="language-select" data-setting="general.language"></select>
+                </div>
+            </div></div>
+            <div class="settings-item"><div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Show the <a href="/welcome.html" target="_blank" rel="noopener">welcome guide</a> on browser startup</div>
+                </div>
+                <div class="settings-item-right">
+                    <label class="toggle"><input type="checkbox" data-setting="general.showGuide"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                </div>
+            </div></div>
+            <div class="settings-item advanced-only"><div class="settings-item-inner settings-item-inner-wrappable">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Maximum number of results</div>
+                    <div class="settings-item-description">Adjust the maximum number of results shown for lookups.</div>
+                </div>
+                <div class="settings-item-right">
+                    <input type="number" min="1" data-setting="general.maxResults">
+                </div>
+            </div></div>
+        </div>
+
     <!-- Dictionaries -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="book"></span></div>
@@ -159,153 +206,6 @@
             </div>
         </div>
         <div class="settings-item">
-            <div class="settings-item-inner">
-                <div class="settings-item-left">
-                    <div class="settings-item-label">Persistent storage</div>
-                    <div class="settings-item-description">
-                        Enable to help prevent the browser from unexpectedly clearing the database.
-                        <a tabindex="0" class="more-toggle more-only" data-parent-distance="4">More&hellip;</a>
-                    </div>
-                </div>
-                <div class="settings-item-right">
-                    <label class="toggle"><input type="checkbox" id="storage-persistent-checkbox"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                </div>
-            </div>
-            <div class="settings-item-children more" hidden>
-                <p>
-                    Web browsers will sometimes clear stored data if the device is running low on storage space.
-                    This can result in the imported dictionaries being deleted unexpectedly, causing Yomitan to stop functioning.
-                    Enabling persistent storage tells the browser that the data should not be deleted in those circumstances.
-                </p>
-                <p data-show-for-browser="firefox firefox-mobile" class="storage-use-invalid" hidden>
-                    On Firefox and Firefox for Android, the storage information feature may be hidden behind a browser flag.
-
-                    To enable this flag, open <a href="about:config" target="_blank" rel="noopener">about:config</a> and search for
-                    <strong>dom.storageManager.enabled</strong>.
-
-                    Setting its value to <strong>true</strong> should allow storage information to be calculated.
-                </p>
-                <p data-show-for-browser="firefox-mobile">
-                    It may not be possible to enable Persistent Storage on Firefox for Android.
-                </p>
-                <p data-show-for-browser="chrome edge">
-                    Chromium-based browsers should not need to enable this setting since the Yomitan extension has
-                    the <code>unlimitedStorage</code> permission, which should prevent data deletion.<sup><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=680392#c15" target="_blank" rel="noopener">[1]</a></sup>
-                </p>
-                <p>
-                    <a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
-                </p>
-            </div>
-        </div>
-    </div>
-
-    <!-- General -->
-    <div class="heading-container">
-        <div class="heading-container-icon"><span class="icon" data-icon="cog"></span></div>
-        <div class="heading-container-left"><h2 id="general"><a href="#!general">General</a></h2></div>
-    </div>
-    <div class="settings-group">
-        <div class="settings-item"><div class="settings-item-inner">
-            <div class="settings-item-left">
-                <div class="settings-item-label">Enable content scanning</div>
-            </div>
-            <div class="settings-item-right">
-                <label class="toggle"><input type="checkbox" data-setting="general.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-            </div>
-        </div></div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
-            <div class="settings-item-left">
-                <div class="settings-item-label">
-                    Language
-                </div>
-                <div class="settings-item-description">
-                    Language of the text that is being looked up.
-                </div>
-            </div>
-            <div class="settings-item-right">
-                <select id="language-select" data-setting="general.language"></select>
-            </div>
-        </div></div>
-        <div class="settings-item"><div class="settings-item-inner">
-            <div class="settings-item-left">
-                <div class="settings-item-label">Show the <a href="/welcome.html" target="_blank" rel="noopener">welcome guide</a> on browser startup</div>
-            </div>
-            <div class="settings-item-right">
-                <label class="toggle"><input type="checkbox" data-setting="general.showGuide"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-            </div>
-        </div></div>
-        <div class="settings-item">
-            <div class="settings-item-inner settings-item-inner-wrappable">
-                <div class="settings-item-left">
-                    <div class="settings-item-label">Result grouping mode</div>
-                    <div class="settings-item-description">
-                        Change how related results are grouped.
-                        <a tabindex="0" class="more-toggle more-only" data-parent-distance="4">More&hellip;</a>
-                    </div>
-                </div>
-                <div class="settings-item-right">
-                    <select data-setting="general.resultOutputMode"
-                        data-transform='{
-                            "type": "setVisibility",
-                            "selector": "#main-dictionary-container",
-                            "condition": {"op": "===", "value": "merge"}
-                        }'
-                    >
-                        <option value="split">No grouping</option>
-                        <option value="group">Group term-reading pairs</option>
-                        <option value="merge">Group related terms</option>
-                    </select>
-                </div>
-            </div>
-            <div class="settings-item-children more" hidden>
-                <ul>
-                    <li>
-                        <strong>No grouping</strong> -
-                        Every definition will be listed as a separate entry.
-                    </li>
-                    <li>
-                        <strong>Group term-reading pairs</strong> -
-                        Definitions for the same term with the same reading will be grouped together.
-                    </li>
-                    <li>
-                        <p>
-                            <strong>Group related terms</strong> -
-                            Related terms that share the same definitions will be grouped together.
-                        </p>
-                        <p>
-                            The <em>Primary dictionary</em> option should be assigned to a dictionary which contains related term information,
-                            and configuring the <em>Secondary dictionaries</em> will allow definitions for the related terms to be
-                            included from other dictionaries.
-                        </p>
-                        <p class="warning-text">
-                            Not all dictionaries are able to be selected as the <em>Primary dictionary</em>.
-                        </p>
-                    </li>
-                </ul>
-                <p>
-                    <a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
-                </p>
-            </div>
-            <div class="settings-item-children settings-item-children-group" id="main-dictionary-container" hidden>
-                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
-                    <div class="settings-item-left">
-                        <div class="settings-item-label">Primary dictionary</div>
-                    </div>
-                    <div class="settings-item-right">
-                        <select data-setting="general.mainDictionary"></select>
-                    </div>
-                </div></div>
-                <div class="settings-item settings-item-button" data-modal-action="show,secondary-search-dictionaries"><div class="settings-item-inner">
-                    <div class="settings-item-left">
-                        <div class="settings-item-label">Secondary dictionaries&hellip;</div>
-                    </div>
-                    <div class="settings-item-right open-panel-button-container">
-                        <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
-                    </div>
-                </div></div>
-            </div>
-        </div>
-        <div class="settings-item advanced-only">
             <div class="settings-item-inner settings-item-inner-wrappable">
                 <div class="settings-item-left">
                     <div class="settings-item-label">Frequency sorting dictionary</div>
@@ -328,7 +228,7 @@
                     <a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
                 </p>
             </div>
-            <div class="settings-item-children settings-item-children-group" id="sort-frequency-dictionary-order-container" hidden>
+            <div class="settings-item-children settings-item-children-group advanced-only" id="sort-frequency-dictionary-order-container" hidden>
                 <div class="settings-item">
                     <div class="settings-item-inner settings-item-inner-wrappable">
                         <div class="settings-item-left">
@@ -372,15 +272,45 @@
                 </div>
             </div>
         </div>
-        <div class="settings-item advanced-only"><div class="settings-item-inner settings-item-inner-wrappable">
-            <div class="settings-item-left">
-                <div class="settings-item-label">Maximum number of results</div>
-                <div class="settings-item-description">Adjust the maximum number of results shown for lookups.</div>
+        <div class="settings-item">
+            <div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Persistent storage</div>
+                    <div class="settings-item-description">
+                        Enable to help prevent the browser from unexpectedly clearing the database.
+                        <a tabindex="0" class="more-toggle more-only" data-parent-distance="4">More&hellip;</a>
+                    </div>
+                </div>
+                <div class="settings-item-right">
+                    <label class="toggle"><input type="checkbox" id="storage-persistent-checkbox"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                </div>
             </div>
-            <div class="settings-item-right">
-                <input type="number" min="1" data-setting="general.maxResults">
+            <div class="settings-item-children more" hidden>
+                <p>
+                    Web browsers will sometimes clear stored data if the device is running low on storage space.
+                    This can result in the imported dictionaries being deleted unexpectedly, causing Yomitan to stop functioning.
+                    Enabling persistent storage tells the browser that the data should not be deleted in those circumstances.
+                </p>
+                <p data-show-for-browser="firefox firefox-mobile" class="storage-use-invalid" hidden>
+                    On Firefox and Firefox for Android, the storage information feature may be hidden behind a browser flag.
+
+                    To enable this flag, open <a href="about:config" target="_blank" rel="noopener">about:config</a> and search for
+                    <strong>dom.storageManager.enabled</strong>.
+
+                    Setting its value to <strong>true</strong> should allow storage information to be calculated.
+                </p>
+                <p data-show-for-browser="firefox-mobile">
+                    It may not be possible to enable Persistent Storage on Firefox for Android.
+                </p>
+                <p data-show-for-browser="chrome edge">
+                    Chromium-based browsers should not need to enable this setting since the Yomitan extension has
+                    the <code>unlimitedStorage</code> permission, which should prevent data deletion.<sup><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=680392#c15" target="_blank" rel="noopener">[1]</a></sup>
+                </p>
+                <p>
+                    <a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
+                </p>
             </div>
-        </div></div>
+        </div>
     </div>
 
     <!-- Scanning -->
@@ -434,61 +364,7 @@
                 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
             </div>
         </div></div>
-        <div class="settings-item">
-            <div class="settings-item-inner">
-                <div class="settings-item-left">
-                    <div class="settings-item-label">Auto-hide search popup</div>
-                    <div class="settings-item-description">When no definitions are found after scanning text, the popup will be hidden.</div>
-                </div>
-                <div class="settings-item-right">
-                    <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
-                        data-transform='{
-                            "type": "setVisibility",
-                            "selector": "#auto-hide-search-popup-options",
-                            "condition": {"op": "===", "value": true}
-                        }'
-                    ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                </div>
-            </div>
-            <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
-                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
-                    <div class="settings-item-left">
-                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
-                    </div>
-                    <div class="settings-item-right">
-                        <input type="number" data-setting="scanning.hideDelay" min="0">
-                    </div>
-                </div></div>
-            </div>
-        </div>
-        <div class="settings-item">
-            <div class="settings-item-inner">
-                <div class="settings-item-left">
-                    <div class="settings-item-label">Hide popup on cursor exit</div>
-                    <div class="settings-item-description">When the cursor exits the popup, the popup will be hidden.</div>
-                </div>
-                <div class="settings-item-right">
-                    <label class="toggle"><input type="checkbox" data-setting="scanning.hidePopupOnCursorExit"
-                        data-transform='{
-                            "type": "setVisibility",
-                            "selector": "#hide-popup-on-cursor-exit-options",
-                            "condition": {"op": "===", "value": true}
-                        }'
-                    ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                </div>
-            </div>
-            <div class="settings-item-children settings-item-children-group" id="hide-popup-on-cursor-exit-options" hidden>
-                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
-                    <div class="settings-item-left">
-                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
-                    </div>
-                    <div class="settings-item-right">
-                        <input type="number" data-setting="scanning.hidePopupOnCursorExitDelay" min="0">
-                    </div>
-                </div></div>
-            </div>
-        </div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+        <div class="settings-item advanced-only"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Scan delay <span class="light">(in milliseconds)</span></div>
                 <div class="settings-item-description">Change the delay before scanning occurs when no modifier key is required.</div>
@@ -589,6 +465,9 @@
             <div class="settings-item-left">
                 <div class="settings-item-label">Text scan length</div>
                 <div class="settings-item-description">Change how many characters are read when scanning for terms.</div>
+                <div class="warning-text margin-above">
+                    <strong>Setting this value too high (100+) may impact performance.</strong>
+                </div>
             </div>
             <div class="settings-item-right">
                 <input type="number" data-setting="scanning.length" min="1" step="1">
@@ -640,10 +519,10 @@
         </div></div>
     </div>
 
-    <!-- Popup -->
+    <!-- Popup Behavior -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="popup"></span></div>
-        <div class="heading-container-left"><h2 id="popup"><a href="#!popup">Popup</a></h2></div>
+        <div class="heading-container-left"><h2 id="popup"><a href="#!popup">Popup Behavior</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
@@ -685,6 +564,60 @@
                 </div></div>
             </div>
         </div>
+        <div class="settings-item">
+            <div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Auto-hide search popup</div>
+                    <div class="settings-item-description">When an existing popup is present, upon scanning again, hide the existing popup even if no definitions are found when scanning again.</div>
+                </div>
+                <div class="settings-item-right">
+                    <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
+                        data-transform='{
+                            "type": "setVisibility",
+                            "selector": "#auto-hide-search-popup-options",
+                            "condition": {"op": "===", "value": true}
+                        }'
+                    ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                </div>
+            </div>
+            <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
+                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+                    <div class="settings-item-left">
+                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
+                    </div>
+                    <div class="settings-item-right">
+                        <input type="number" data-setting="scanning.hideDelay" min="0">
+                    </div>
+                </div></div>
+            </div>
+        </div>
+        <div class="settings-item">
+            <div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Hide popup on cursor exit</div>
+                    <div class="settings-item-description">When the cursor exits the popup, the popup will be hidden.</div>
+                </div>
+                <div class="settings-item-right">
+                    <label class="toggle"><input type="checkbox" data-setting="scanning.hidePopupOnCursorExit"
+                        data-transform='{
+                            "type": "setVisibility",
+                            "selector": "#hide-popup-on-cursor-exit-options",
+                            "condition": {"op": "===", "value": true}
+                        }'
+                    ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                </div>
+            </div>
+            <div class="settings-item-children settings-item-children-group" id="hide-popup-on-cursor-exit-options" hidden>
+                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+                    <div class="settings-item-left">
+                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
+                    </div>
+                    <div class="settings-item-right">
+                        <input type="number" data-setting="scanning.hidePopupOnCursorExitDelay" min="0">
+                    </div>
+                </div></div>
+            </div>
+        </div>
         <div class="settings-item advanced-only"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Search terms when clicking text from the results list</div>
@@ -723,10 +656,10 @@
         </div>
     </div>
 
-    <!-- Popup Appearance -->
+    <!-- Appearance -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="palette"></span></div>
-        <div class="heading-container-left"><h2 id="popup-appearance"><a href="#!popup-appearance">Popup Appearance</a></h2></div>
+        <div class="heading-container-left"><h2 id="appearance"><a href="#!appearance">Appearance</a></h2></div>
     </div>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
@@ -855,6 +788,21 @@
                 </select>
             </div>
         </div></div>
+        <div class="settings-item advanced-only"><div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Reading mode</div>
+                <div class="settings-item-description">Change what type of furigana is displayed for parsed text.</div>
+            </div>
+            <div class="settings-item-right">
+                <select data-setting="parsing.readingMode" lang="ja">
+                    <option value="none">None</option>
+                    <option value="hiragana">ひらがな</option>
+                    <option value="katakana">カタカナ</option>
+                    <option value="romaji">Romaji</option>
+                    <option value="dictionary-reading">Dictionary reading</option>
+                </select>
+            </div>
+        </div></div>
         <div class="settings-item advanced-only"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Frequency display style</div>
@@ -890,7 +838,7 @@
                 </div>
             </div>
         </div>
-        <div class="settings-item advanced-only">
+        <div class="settings-item">
             <div class="settings-item-inner settings-item-inner-wrappable">
                 <div class="settings-item-left">
                     <div class="settings-item-label">
@@ -962,7 +910,7 @@
                 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
             </div>
         </div></div>
-        <div class="settings-item settings-item-button" data-modal-action="show,custom-css"><div class="settings-item-inner">
+        <div class="settings-item settings-item-button advanced-only" data-modal-action="show,custom-css"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Configure custom CSS&hellip;</div>
             </div>
@@ -972,6 +920,85 @@
         </div></div>
     </div>
 
+    <!-- Result Display -->
+    <div class="heading-container">
+        <div class="heading-container-icon"><span class="icon" data-icon="monitor"></span></div>
+        <div class="heading-container-left"><h2 id="result-display"><a href="#!result-display">Result Display</a></h2></div>
+    </div>
+    <div class="settings-group">
+        <div class="settings-item">
+            <div class="settings-item-inner settings-item-inner-wrappable">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Result grouping mode</div>
+                    <div class="settings-item-description">
+                        Change how related results are grouped.
+                        <a tabindex="0" class="more-toggle more-only" data-parent-distance="4">More&hellip;</a>
+                    </div>
+                </div>
+                <div class="settings-item-right">
+                    <select data-setting="general.resultOutputMode"
+                        data-transform='{
+                            "type": "setVisibility",
+                            "selector": "#main-dictionary-container",
+                            "condition": {"op": "===", "value": "merge"}
+                        }'
+                    >
+                        <option value="split">No grouping</option>
+                        <option value="group">Group term-reading pairs</option>
+                        <option value="merge">Group related terms</option>
+                    </select>
+                </div>
+            </div>
+            <div class="settings-item-children more" hidden>
+                <ul>
+                    <li>
+                        <strong>No grouping</strong> -
+                        Every definition will be listed as a separate entry.
+                    </li>
+                    <li>
+                        <strong>Group term-reading pairs</strong> -
+                        Definitions for the same term with the same reading will be grouped together.
+                    </li>
+                    <li>
+                        <p>
+                            <strong>Group related terms</strong> -
+                            Related terms that share the same definitions will be grouped together.
+                        </p>
+                        <p>
+                            The <em>Primary dictionary</em> option should be assigned to a dictionary which contains related term information,
+                            and configuring the <em>Secondary dictionaries</em> will allow definitions for the related terms to be
+                            included from other dictionaries.
+                        </p>
+                        <p class="warning-text">
+                            Not all dictionaries are able to be selected as the <em>Primary dictionary</em>.
+                        </p>
+                    </li>
+                </ul>
+                <p>
+                    <a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
+                </p>
+            </div>
+            <div class="settings-item-children settings-item-children-group" id="main-dictionary-container" hidden>
+                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+                    <div class="settings-item-left">
+                        <div class="settings-item-label">Primary dictionary</div>
+                    </div>
+                    <div class="settings-item-right">
+                        <select data-setting="general.mainDictionary"></select>
+                    </div>
+                </div></div>
+                <div class="settings-item settings-item-button" data-modal-action="show,secondary-search-dictionaries"><div class="settings-item-inner">
+                    <div class="settings-item-left">
+                        <div class="settings-item-label">Secondary dictionaries&hellip;</div>
+                    </div>
+                    <div class="settings-item-right open-panel-button-container">
+                        <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
+                    </div>
+                </div></div>
+            </div>
+        </div>
+    </div>
+
     <!-- Popup Position & Size -->
     <div class="heading-container">
         <div class="heading-container-icon"><span class="icon" data-icon="popup-size"></span></div>
@@ -1368,7 +1395,7 @@
         </div>
     </div>
     <div class="settings-group">
-        <div class="settings-item">
+        <div class="settings-item advanced-only">
             <div class="settings-item-inner">
                 <div class="settings-item-left">
                     <div class="settings-item-label">Parse sentences using Yomitan's internal parser</div>
@@ -1435,21 +1462,6 @@
                 <label class="toggle"><input type="checkbox" data-setting="parsing.termSpacing"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
-            <div class="settings-item-left">
-                <div class="settings-item-label">Reading mode</div>
-                <div class="settings-item-description">Change what type of furigana is displayed for parsed text.</div>
-            </div>
-            <div class="settings-item-right">
-                <select data-setting="parsing.readingMode" lang="ja">
-                    <option value="none">None</option>
-                    <option value="hiragana">ひらがな</option>
-                    <option value="katakana">カタカナ</option>
-                    <option value="romaji">Romaji</option>
-                    <option value="dictionary-reading">Dictionary reading</option>
-                </select>
-            </div>
-        </div></div>
         <div class="settings-item advanced-only"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Sentence scanning extent</div>
@@ -1895,7 +1907,7 @@
                 <label class="toggle"><input type="checkbox" class="permissions-toggle" data-permissions-setting="clipboard.enableSearchPageMonitor" data-required-permissions="clipboardRead"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+        <div class="settings-item advanced-only"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Maximum clipboard text search length</div>
                 <div class="settings-item-description">Limit the number of characters used when searching clipboard text.</div>
@@ -2039,20 +2051,6 @@
                 </div>
             </div>
         </div></div>
-        <div class="settings-item"><div class="settings-item-inner">
-            <div class="settings-item-left">
-                <div class="settings-item-progress-report" id="db-ops-progress-report">
-                    Placeholder text.
-                </div>
-            </div>
-        </div></div>
-        <div class="settings-item"><div class="settings-item-inner">
-            <div class="settings-item-left">
-                <div class="settings-item-error-report" id="db-ops-error-report">
-                    Placeholder text.
-                </div>
-            </div>
-        </div></div>
     </div>
 
     <!-- Accessibility -->
diff --git a/ext/welcome.html b/ext/welcome.html
index d15686a1..f2192686 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -26,6 +26,22 @@
 
     <h1>Welcome to Yomitan!</h1>
 
+    <h2><strong>Recommended Permissions &#40;Important&#41;</strong></h2>
+    <div class="settings-group">
+        <div class="settings-item"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Enable recommended permissions</div>
+                <div class="settings-item-description">This will allow Yomitan to scan text from most sites. Further configuration is available on the <a href="/permissions.html" rel="noopener">Permissions page</a>.</div>
+                <div class="danger-text margin-above" id="permissions-disabled" hidden><strong>Yomitan features will be limited if the recommended permissions are not enabled.</strong></div>
+                <div class="success-text margin-above" id="permissions-enabled" hidden><strong>All Yomitan features are available.</strong></div>
+                <div id="recommended-permissions-error" class="margin-above danger-text" hidden></div>
+            </div>
+            <div class="settings-item-right">
+                <label class="toggle"><input type="checkbox" id="recommended-permissions-toggle" data-origin="&lt;all_urls&gt;"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+            </div>
+        </div></div>
+    </div>
+
     <!-- Notifications -->
     <div class="settings-group settings-group-top-margin warn-custom-templates-notification">
       <div class="settings-item">
@@ -41,103 +57,37 @@
     <!-- Content -->
     <h2>Here are some basics to get started</h2>
     <div class="settings-group">
-        <div class="settings-item">
-            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                Clicking the <img src="/images/yomitan-icon.svg" class="inline-icon" alt=""> <em>Yomitan</em> button in the browser bar will open the quick-actions popup.
-            </div></div></div>
-            <div class="settings-item-children settings-item-children-group">
-                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    The <img src="/images/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="/settings.html" target="_blank" rel="noopener">Settings</a> page.
-                </div></div></div></div>
-                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    The <img src="/images/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/search.html" target="_blank" rel="noopener">Search</a> page,
-                    enabling text and terms to be looked up using the installed dictionaries.
-                    This can even be used in offline mode!
-                </div></div></div></div>
-                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    The <img src="/images/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/info.html" target="_blank" rel="noopener">Information</a> page,
-                    which has some helpful information and links about Yomitan.
-                </div></div></div></div>
-            </div>
-        </div>
-        <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/blob/master/docs/dictionaries.md#dictionaries" target="_blank" rel="noopener noreferrer">Yomitan homepage</a>.
-                Dictionaries can be configured using the button below,
-                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">
-                    <div class="settings-item-left">
-                        <div class="settings-item-label">Install or remove dictionaries&hellip;</div>
-                    </div>
-                    <div class="settings-item-right open-panel-button-container">
-                        <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
-                    </div>
-                </div></div>
+        <a href="/quick-start-guide.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Yomitan Quick Start Guide</div>
             </div>
-        </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 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 interested in importing your data into Yomitan.
-                Please follow instructions from <a href="https://github.com/themoeway/yomitan/blob/master/docs/yomichan-migration.md#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/blob/master/docs/yomichan-migration.md#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">
-            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
-                The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
-            </div></div></div>
-            <div class="settings-item-children settings-item-children-group">
-                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    Clicking the <img src="/images/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
-                    will play an audio clip of a term's pronunciation using an online dictionary, if available.
-                </div></div></div></div>
-                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    Clicking on a kanji character in a term's definition will show additional information about that character.
-                    <span class="light">(Requires a kanji dictionary to be installed.)</span>
-                </div></div></div></div>
+            <div class="settings-item-right open-panel-button-container">
+                <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
             </div>
-        </div>
-        <div class="settings-item">
-            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                This startup notification can be turned off using the options below, or later from the <a href="/settings.html" rel="noopener">Settings</a> page.
-            </div></div></div>
-        </div>
+        </div></a>
     </div>
 
-    <h2>Recommended Permissions &#40;Important&#41;</h2>
+    <h2>Basic customization</h2>
     <div class="settings-group">
         <div class="settings-item"><div class="settings-item-inner">
             <div class="settings-item-left">
-                <div class="settings-item-label">Enable recommended permissions</div>
-                <div class="settings-item-description">This will allow Yomitan to scan text from most sites. Further configuration is available on the <a href="/permissions.html" rel="noopener">Permissions page</a>.</div>
+                <div class="settings-item-label">Show this welcome guide on browser startup</div>
             </div>
             <div class="settings-item-right">
-                <label class="toggle"><input type="checkbox" class="recommended-permissions-toggle" data-origin="&lt;all_urls&gt;"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                <label class="toggle"><input type="checkbox" data-setting="general.showGuide"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
-            <div id="recommended-permissions-error" class="margin-above danger-text" hidden></div>
         </div></div>
-    </div>
-
-    <h2>Basic customization</h2>
-    <div class="settings-group">
-        <div class="settings-item"><div class="settings-item-inner">
+        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
-                <div class="settings-item-label">Show this welcome guide on browser startup</div>
+                <div class="settings-item-label">
+                    Language
+                </div>
+                <div class="settings-item-description">
+                    Language of the text that is being looked up.
+                </div>
             </div>
             <div class="settings-item-right">
-                <label class="toggle"><input type="checkbox" data-setting="general.showGuide"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                <select id="language-select" data-setting="general.language"></select>
             </div>
         </div></div>
         <div class="settings-item">
@@ -160,42 +110,6 @@
                 <label class="toggle"><input type="checkbox" id="middle-mouse-button-scan"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
-        <div class="settings-item">
-            <div class="settings-item-inner">
-                <div class="settings-item-left">
-                    <div class="settings-item-label">Auto-hide search popup</div>
-                    <div class="settings-item-description">When no definitions are found after scanning text, the popup will be hidden.</div>
-                </div>
-                <div class="settings-item-right">
-                    <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
-                        data-transform='{
-                            "type": "setVisibility",
-                            "selector": "#auto-hide-search-popup-options",
-                            "condition": {"op": "===", "value": true}
-                        }'
-                    ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                </div>
-            </div>
-            <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
-                <div class="settings-item"><div class="settings-item-inner">
-                    <div class="settings-item-left">
-                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
-                    </div>
-                    <div class="settings-item-right">
-                        <input type="number" data-setting="scanning.hideDelay" min="0">
-                    </div>
-                </div></div>
-            </div>
-        </div>
-        <div class="settings-item"><div class="settings-item-inner">
-            <div class="settings-item-left">
-                <div class="settings-item-label">Scan delay <span class="light">(in milliseconds)</span></div>
-                <div class="settings-item-description">Change the delay before scanning occurs when no modifier key is required.</div>
-            </div>
-            <div class="settings-item-right">
-                <input type="number" data-setting="scanning.delay" min="0">
-            </div>
-        </div></div>
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Theme</div>