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

3 files changed, 20 insertions, 2 deletions

diff --git a/ext/fg/float.html b/ext/fg/float.html
index d3c9ba27..e4f30d83 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -54,6 +54,14 @@
             </div>
         </div>
         <div class="content-footer-container1"><div class="content-footer-container2"><div class="content-footer" id="content-footer"></div><div class="scrollbar-spacer scrollbar"></div></div></div>
+        <div class="overlay-panel-container">
+            <div class="overlay-panel scrollbar" id="profile-panel" hidden>
+                <div class="overlay-panel-inner">
+                    <h3>Default Profile</h3>
+                    <div class="profile-list" id="profile-list"></div>
+                </div>
+            </div>
+        </div>
     </div>
     <div class="content-sidebar scrollbar" id="content-sidebar" hidden>
         <div class="content-sidebar-inner">
@@ -65,7 +73,7 @@
                 <button class="sidebar-button" disabled id="navigate-next-button" title="Next definition (Alt + F)"><span class="sidebar-button-icon" data-icon="right-chevron"></span></button>
             </div>
             <div class="content-sidebar-bottom">
-                <!--<button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon" data-icon="profile"></span></button>-->
+                <button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon" data-icon="profile"></span></button>
             </div>
         </div>
     </div>
@@ -96,10 +104,12 @@
 <script src="/mixed/js/display-generator.js"></script>
 <script src="/mixed/js/display-history.js"></script>
 <script src="/mixed/js/display-notification.js"></script>
+<script src="/mixed/js/display-profile-selection.js"></script>
 <script src="/mixed/js/document-focus-controller.js"></script>
 <script src="/mixed/js/dynamic-loader.js"></script>
 <script src="/mixed/js/frame-endpoint.js"></script>
 <script src="/mixed/js/media-loader.js"></script>
+<script src="/mixed/js/panel-element.js"></script>
 <script src="/mixed/js/scroll.js"></script>
 <script src="/mixed/js/text-scanner.js"></script>
 <script src="/mixed/js/html-template-collection.js"></script>
diff --git a/ext/fg/js/float-main.js b/ext/fg/js/float-main.js
index aee736a2..a8b3d1b0 100644
--- a/ext/fg/js/float-main.js
+++ b/ext/fg/js/float-main.js
@@ -17,6 +17,7 @@
 
 /* global
  * Display
+ * DisplayProfileSelection
  * DocumentFocusController
  * JapaneseUtil
  * api
@@ -33,6 +34,8 @@
         const japaneseUtil = new JapaneseUtil(null);
         const display = new Display('popup', japaneseUtil, documentFocusController);
         await display.prepare();
+        const displayProfileSelection = new DisplayProfileSelection(display);
+        displayProfileSelection.prepare();
         display.initializeState();
 
         yomichan.ready();
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index cb105341..c9b30d8b 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -349,6 +349,8 @@ class Frontend {
         const {usePopupWindow, showIframePopupsInRootFrame} = this._options.general;
         const isIframe = !this._useProxyPopup && (window !== window.parent);
 
+        const currentPopup = this._popup;
+
         let popupPromise;
         if (usePopupWindow) {
             popupPromise = this._popupCache.get('window');
@@ -393,7 +395,10 @@ class Frontend {
         }
         if (this._updatePopupToken !== token) { return; }
 
-        this._clearSelection(true);
+        if (popup !== currentPopup) {
+            this._clearSelection(true);
+        }
+
         this._popupEventListeners.removeAllEventListeners();
         this._popup = popup;
         if (popup !== null) {