From 181ade93d64ca54cee35415e795f42e58d556f54 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Fri, 20 Nov 2020 22:42:49 -0500
Subject: [PATCH] Display scroll fixes (#1046)

* Update focus when internal focus is changed

* Update scroll layout
---
 ext/bg/search.html        |  4 ++--
 ext/fg/float.html         |  4 ++--
 ext/mixed/css/display.css |  9 +++++++++
 ext/mixed/js/display.js   | 37 ++++++++++++++++++++++++++-----------
 4 files changed, 39 insertions(+), 15 deletions(-)
diff --git a/ext/bg/search.html b/ext/bg/search.html
index caa9106f..bffbcd82 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -16,7 +16,7 @@
 </head>
 <body>
 
-<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+<div class="content"><div class="content-scroll scrollbar" id="content-scroll"><div class="content-body" id="content-body">
     <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
     <div class="content-body-inner">
 
@@ -60,7 +60,7 @@
         </div>
 
     </div>
-</div></div>
+</div></div></div>
 
 <!-- Scripts -->
 <script src="/mixed/lib/wanakana.min.js"></script>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 0ee8fd7d..bee79d10 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -16,7 +16,7 @@
 <body>
 
 <div class="content-outer">
-<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+<div class="content"><div class="content-scroll scrollbar" id="content-scroll"><div class="content-body" id="content-body">
     <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
     <div class="content-body-inner">
 
@@ -48,7 +48,7 @@
         </div>
 
     </div>
-</div></div>
+</div></div></div>
 <div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
     <div class="content-sidebar-top">
         <button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 6986696f..997aa40a 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -238,6 +238,15 @@ a {
 
 /* Main layout */
 .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    position: relative;
+    align-items: stretch;
+    justify-content: flex-start;
+}
+.content-scroll {
     width: 100%;
     height: 100%;
     display: flex;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 715b3f3d..299cb026 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -87,7 +87,7 @@ class Display extends EventDispatcher {
             renderTemplate: this._renderTemplate.bind(this)
         });
         this._updateAdderButtonsPromise = Promise.resolve();
-        this._contentScrollElement = document.querySelector('#content');
+        this._contentScrollElement = document.querySelector('#content-scroll');
         this._contentScrollBodyElement = document.querySelector('#content-body');
         this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
         this._windowScroll = new WindowScroll(this._contentScrollElement);
@@ -183,6 +183,9 @@ class Display extends EventDispatcher {
             ['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}]
         ]);
         window.addEventListener('focus', this._onWindowFocus.bind(this), false);
+        document.documentElement.addEventListener('focusin', this._onDocumentFocusIn.bind(this), false);
+        document.documentElement.addEventListener('focusout', this._onDocumentFocusOut.bind(this), false);
+        this._updateFocusedElement();
         this._progressIndicatorVisible.on('change', this._onProgressIndicatorVisibleChanged.bind(this));
     }
 
@@ -582,16 +585,15 @@ class Display extends EventDispatcher {
     }
 
     _onWindowFocus() {
-        const target = this._contentScrollFocusElement;
-        if (target === null) { return; }
-        const {activeElement} = document;
-        if (
-            activeElement === null ||
-            activeElement === document.documentElement ||
-            activeElement === document.body
-        ) {
-            target.focus();
-        }
+        this._updateFocusedElement();
+    }
+
+    _onDocumentFocusIn() {
+        this._updateFocusedElement();
+    }
+
+    _onDocumentFocusOut() {
+        this._updateFocusedElement();
     }
 
     async _onKanjiLookup(e) {
@@ -1569,4 +1571,17 @@ class Display extends EventDispatcher {
         if (deepEqual(this._optionsContext, optionsContext)) { return; }
         await this.setOptionsContext(optionsContext);
     }
+
+    _updateFocusedElement() {
+        const target = this._contentScrollFocusElement;
+        if (target === null) { return; }
+        const {activeElement} = document;
+        if (
+            activeElement === null ||
+            activeElement === document.documentElement ||
+            activeElement === document.body
+        ) {
+            target.focus();
+        }
+    }
 }
