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: Display scroll fixes (#1046)

* Update focus when internal focus is changed

* Update scroll layout
---
 ext/mixed/css/display.css |  9 +++++++++
 ext/mixed/js/display.js   | 37 ++++++++++++++++++++++++++-----------
 2 files changed, 35 insertions(+), 11 deletions(-)

(limited to 'ext/mixed')

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();
+        }
+    }
 }
-- 
cgit v1.2.3