Display profile panel (#1178)

* Expose Display.displayGenerator

* Update search when assigning options context

* Don't clear selection unless the popup changes

* Merge search styles

* Create panel for changing the profile

6 files changed, 208 insertions, 12 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 63eb6cb3..8ebdf756 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -38,6 +38,7 @@
     --action-button-padding: 0.3em;
 
     --list-margin: 0.72em;
+    --main-content-size: 100%;
     --main-content-vertical-padding: 0em;
     --main-content-horizontal-padding: 0em;
     --entry-horizontal-padding: 0.72em;
@@ -77,6 +78,7 @@
     --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
 
     --animation-duration: 0.125s;
+    --animation-duration2: calc(2 * var(--animation-duration));
 
     /* Colors */
     --background-color: #ffffff;
@@ -239,6 +241,12 @@ h2 {
     margin: 0.25em 0 0;
     border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color);
 }
+h3 {
+    font-size: 1em;
+    font-weight: bold;
+    margin: 0.25em 0 0.375em;
+    padding: 0;
+}
 a {
     color: var(--link-color);
     text-decoration: underline;
@@ -323,7 +331,10 @@ a {
     position: relative;
 }
 .content-body-inner {
-    width: 100%;
+    width: var(--main-content-size);
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0 auto;
     padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
 }
 .content-footer-container1 {
@@ -344,8 +355,8 @@ a {
     flex: 1 1 auto;
 }
 .content-footer {
-    max-width: var(--main-content-size);
-    width: 100%;
+    width: var(--main-content-size);
+    max-width: 100%;
 }
 
 
@@ -365,7 +376,7 @@ a {
     overflow-x: hidden;
     overflow-y: auto;
     background-color: var(--sidebar-background-color);
-    z-index: 1;
+    z-index: 10;
     position: relative;
     display: block;
 }
@@ -502,6 +513,9 @@ button.sidebar-button.danger:hover .sidebar-button-icon,
 button.sidebar-button.danger:focus .sidebar-button-icon {
     background-color: var(--sidebar-button-danger-icon-color);
 }
+button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
+    background-color: var(--accent-color);
+}
 .sidebar-button-icon[data-icon=cross] {
     mask-image: url(/mixed/img/cross.svg);
     -webkit-mask-image: url(/mixed/img/cross.svg);
@@ -1459,6 +1473,78 @@ button.action-button[data-icon=source-term]::before {
 }
 
 
+/* Overlays */
+.overlay-panel-container {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 6;
+}
+.overlay-panel {
+    pointer-events: auto;
+    background-color: var(--background-color);
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--main-content-size);
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
+    overflow-y: scroll;
+    transform: none;
+    opacity: 1;
+    visibility: visible;
+    transition:
+        opacity var(--animation-duration2) ease-out,
+        visibility 0s linear,
+        transform var(--animation-duration2) ease-out;
+}
+.overlay-panel[hidden] {
+    transform: translate(4em, 0);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity var(--animation-duration2) ease-in,
+        visibility 0s linear var(--animation-duration2),
+        transform var(--animation-duration2) ease-in;
+}
+.overlay-panel[hidden]:not(.hidden-animating) {
+    display: none;
+}
+.overlay-panel-inner {
+    padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
+}
+
+
+/* Profile panel */
+.profile-list {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+}
+.profile-list-item {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    cursor: pointer;
+}
+.profile-list-item-selection {
+    flex: 0 0 auto;
+    text-align: center;
+    padding: 0.25em 0.5em 0.25em 0;
+}
+.profile-list-item-name {
+    flex: 1 1 auto;
+    padding: 0.25em 0;
+}
+
+
 /* Conditional styles */
 :root:not([data-enable-search-tags=true]) .tag[data-category=search] {
     display: none;
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 5d4a8f78..6527f920 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -57,14 +57,6 @@ h1 {
     border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1);
 }
 
-/* Content layout */
-.content-body-inner {
-    width: var(--main-content-size);
-    max-width: 100%;
-    box-sizing: border-box;
-    margin: 0 auto;
-}
-
 /* Search bar */
 .search-textbox-container {
     display: flex;
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 26252634..b24ab09f 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -129,5 +129,9 @@
     <div class="footer-notification-body"></div>
     <button class="footer-notification-close-button"><span class="footer-notification-close-button-icon"></span></button>
 </div></template>
+<template id="profile-list-item-template"><label class="profile-list-item">
+    <div class="profile-list-item-selection"><label class="radio"><input type="radio" class="profile-entry-is-default-radio" name="profile-entry-default-radio"><span class="radio-body"><span class="radio-border"></span><span class="radio-dot"></span></span></label></div>
+    <div class="profile-list-item-name"></div>
+</label></template>
 
 </body></html>
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 1ccd5941..d25b7def 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -121,6 +121,10 @@ class DisplayGenerator {
         return this._templates.instantiate('footer-notification');
     }
 
+    createProfileListItem() {
+        return this._templates.instantiate('profile-list-item');
+    }
+
     // Private
 
     _createTermExpression(details) {
diff --git a/ext/mixed/js/display-profile-selection.js b/ext/mixed/js/display-profile-selection.js
new file mode 100644
index 00000000..b66099ff
--- /dev/null
+++ b/ext/mixed/js/display-profile-selection.js
@@ -0,0 +1,105 @@
+/*
+ * 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
+ * PanelElement
+ * api
+ */
+
+class DisplayProfileSelection {
+    constructor(display) {
+        this._display = display;
+        this._profielList = document.querySelector('#profile-list');
+        this._profileButton = document.querySelector('#profile-button');
+        this._profilePanel = new PanelElement({
+            node: document.querySelector('#profile-panel'),
+            closingAnimationDuration: 375 // Milliseconds; includes buffer
+        });
+        this._profileListNeedsUpdate = false;
+        this._eventListeners = new EventListenerCollection();
+        this._source = generateId(16);
+    }
+
+    async prepare() {
+        yomichan.on('optionsUpdated', this._onOptionsUpdated.bind(this));
+        this._profileButton.addEventListener('click', this._onProfileButtonClick.bind(this), false);
+        this._profileListNeedsUpdate = true;
+    }
+
+    // Private
+
+    _onOptionsUpdated({source}) {
+        if (source === this._source) { return; }
+        this._profileListNeedsUpdate = true;
+        if (this._profilePanel.isVisible()) {
+            this._updateProfileList();
+        }
+    }
+
+    _onProfileButtonClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._setProfilePanelVisible(!this._profilePanel.isVisible());
+    }
+
+    _setProfilePanelVisible(visible) {
+        this._profilePanel.setVisible(visible);
+        this._profileButton.classList.toggle('sidebar-button-highlight', visible);
+        if (visible && this._profileListNeedsUpdate) {
+            this._updateProfileList();
+        }
+    }
+
+    async _updateProfileList() {
+        this._profileListNeedsUpdate = false;
+        const options = await api.optionsGetFull();
+
+        this._eventListeners.removeAllEventListeners();
+        const displayGenerator = this._display.displayGenerator;
+
+        const {profileCurrent, profiles} = options;
+        const fragment = document.createDocumentFragment();
+        for (let i = 0, ii = profiles.length; i < ii; ++i) {
+            const {name} = profiles[i];
+            const entry = displayGenerator.createProfileListItem();
+            const radio = entry.querySelector('.profile-entry-is-default-radio');
+            radio.checked = (i === profileCurrent);
+            const nameNode = entry.querySelector('.profile-list-item-name');
+            nameNode.textContent = name;
+            fragment.appendChild(entry);
+            this._eventListeners.addEventListener(radio, 'change', this._onProfileRadioChange.bind(this, i), false);
+        }
+        this._profielList.textContent = '';
+        this._profielList.appendChild(fragment);
+    }
+
+    _onProfileRadioChange(index, e) {
+        if (e.currentTarget.checked) {
+            this._setProfileCurrent(index);
+        }
+    }
+
+    async _setProfileCurrent(index) {
+        await api.modifySettings([{
+            action: 'set',
+            path: 'profileCurrent',
+            value: index,
+            scope: 'global'
+        }], this._source);
+        this._setProfilePanelVisible(false);
+    }
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index b9ea3802..c0d84dce 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -170,6 +170,10 @@ class Display extends EventDispatcher {
         ]);
     }
 
+    get displayGenerator() {
+        return this._displayGenerator;
+    }
+
     get autoPlayAudioDelay() {
         return this._autoPlayAudioDelay;
     }
@@ -523,6 +527,7 @@ class Display extends EventDispatcher {
 
     _onMessageSetOptionsContext({optionsContext}) {
         this.setOptionsContext(optionsContext);
+        this.searchLast();
     }
 
     _onMessageSetContent({details}) {