Settings page v2 (#606)

* Initial setup of settings page v2

* Add security options

* Add layout-aware scanning option

* Fix style

* Set up simple setting bindings

* Convert colors to variables

* Refactor, remove unused

* Set up variables for some size values

* Mark expandable entries with a pointer cursor

* Add scroll top link

* Update sidebar styles

* Update icon button styles

* Fix padding when settings are wrapped

* Update shadow styles

* Use animation timings

* Add support for being able to open the sidebar on small-screen/mobile devices

* Update styles and preview sidebar

* Add ability to expand the preview sidebar

* Scroll to initial target only after advanced setting is set

* Fix rebase issues

* Update z-index of modal

* Use Modal for testing

* Set up modal controller

* Update button styles

* Update modal design

* Update styling of multi-part inputs

* Fix button styles

* Create SettingsDisplayController

* Update scanning inputs

* Use nested option

* Update animation timings

* Update modals to be display:none when not open

* Update included scripts

* Move modal link/input control to SettingsDisplayController

* Simplify event handlers

* Add audio sources options modal

* Allow certain nodes to be selected on click

* Implement top link

* Add environment-specific display styles

* Implement storage info

* Update modal controller

* Remove TODO

* Remove unnecessary <br>

* Add primary dictionary option under result grouping option

* Simplify transform

* Update styles for short inputs

* Add toggleable status footer

* Update modal styles

* Fix more-toggle elements sometimes affecting wrong targets

* Add selector-observer.js reference

* Add support for dynamically-generated more-toggle elements

* Rename result grouping modes and add descriptions

* Update icon button style

* Add a no-more-only class

* Use absolute URLs

* Add kebab-menu icon button

* Update text styles

* Add disabled styles

* Update toggle styles to support default pointer when disabled

* Update modal.js reference

* Disable box shadow for disabled buttons

* Add support for menus, use menus for audio source removal

* Disable pointer events when a modal is closing

* Update the escape key to close menus before closing modals

* Add support for dictionary modals

* Remove debug log

* Remove redundant spinner

* Update nested option visibility

* Add support for import/export/reset

* Update URL

* Reorganize

* Add comments

* Fix toggle highlight not working

* Add radio style

* Fix dictionary separator line

* Add mouse icon

* Add support for an icon button container with input height

* Update profile selects

* Add support for editing profiles and profile conditions

* Enable overflow scrolling for popup menus

* Add support for input suffix buttons

* Style updates

* Implement Anki card controls

* Improve dictionary information

* Punctuation

* Add support for Anki card templates

* Add support for using the tab key

* Add support for custom CSS modal

* Add support for simple scanning inputs

* Simplify

* Don't exit modals/menus when pressing escape while an input is focused

* Add checkbox styles

* Set up advanced scanning inpugs

* Reorganize

* Add outer theme option

* Add controller for nested popups

* Update scannings inputs

* Set up settings for touch/pen inputs

* Add modal for input prevention

* Update label styles

* Options updates

* Update duplicate scope options

* Only show quality when format is JPEG

* Add auto-scaling options

* Update navigation options

* Rearrange options

* Fix icon

* Add group for popup-size

* Update styles for inputs

* Update description

* Update appearance of checkboxes, toggles, and radios

* Add more advanced popup options

* Add debug option

* Add pitch accent display options

* Update input fields

* Add conjugation

* Update guide link

* Update and simplify primary/secondary dictionaries

* Update link

* Un-nest a setting

* Update wordings

* Use consistent styling for lists

* Fix custom CSS modal fade affecting the layout

* Fix z-index of the top link

* Disable word wrap on some text

* Disable highlight color

* Update FAB positioning and sizing

* Update button spacing

* Remove preview frame controller code

* Remove welcome.html

* Update seconds units

* Use all appearance styles

* Add option for anki.checkForDuplicates

* Rearrange options

* Fix redundant margin assignment

* Move scanning.enableOnSearchPage option such that it is not nested

* Organize/update options

1 files changed, 71 insertions, 0 deletions

diff --git a/ext/bg/js/settings2/nested-popups-controller.js b/ext/bg/js/settings2/nested-popups-controller.js
new file mode 100644
index 00000000..41bf0e11
--- /dev/null
+++ b/ext/bg/js/settings2/nested-popups-controller.js
@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2020  Yomichan 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/>.
+ */
+
+/* global
+ * DOMDataBinder
+ */
+
+class NestedPopupsController {
+    constructor(settingsController) {
+        this._settingsController = settingsController;
+        this._popupNestingMaxDepth = 0;
+    }
+
+    async prepare() {
+        this._nestedPopupsEnabled = document.querySelector('#nested-popups-enabled');
+        this._nestedPopupsCount = document.querySelector('#nested-popups-count');
+        this._nestedPopupsEnabledMoreOptions = document.querySelector('#nested-popups-enabled-more-options');
+
+        const options = await this._settingsController.getOptions();
+
+        this._nestedPopupsEnabled.addEventListener('change', this._onNestedPopupsEnabledChange.bind(this), false);
+        this._nestedPopupsCount.addEventListener('change', this._onNestedPopupsCountChange.bind(this), false);
+        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
+        this._onOptionsChanged({options});
+    }
+
+    // Private
+
+    _onOptionsChanged({options}) {
+        this._updatePopupNestingMaxDepth(options.scanning.popupNestingMaxDepth);
+    }
+
+    _onNestedPopupsEnabledChange(e) {
+        const value = e.currentTarget.checked;
+        if (value && this._popupNestingMaxDepth > 0) { return; }
+        this._setPopupNestingMaxDepth(value ? 1 : 0);
+    }
+
+    _onNestedPopupsCountChange(e) {
+        const node = e.currentTarget;
+        const value = Math.max(1, DOMDataBinder.convertToNumber(node.value, node));
+        this._setPopupNestingMaxDepth(value);
+    }
+
+    _updatePopupNestingMaxDepth(value) {
+        const enabled = (value > 0);
+        this._popupNestingMaxDepth = value;
+        this._nestedPopupsEnabled.checked = enabled;
+        this._nestedPopupsCount.value = `${value}`;
+        this._nestedPopupsEnabledMoreOptions.hidden = !enabled;
+    }
+
+    async _setPopupNestingMaxDepth(value) {
+        this._updatePopupNestingMaxDepth(value);
+        await this._settingsController.setProfileSetting('scanning.popupNestingMaxDepth', value);
+    }
+}