Display scroll fixes (#1046)

* Update focus when internal focus is changed

* Update scroll layout

2 files changed, 35 insertions, 11 deletions

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
@@ -242,6 +242,15 @@ a {
     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;
+    flex-flow: column nowrap;
     overflow-x: hidden;
     overflow-y: scroll;
     position: relative;
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();
+        }
+    }
 }