Merge pull request #240 from toasted-nutbread/fix-focus

Fix focus

4 files changed, 32 insertions, 33 deletions

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 58dc0e4a..4ad78aa7 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -145,7 +145,7 @@ class Frontend {
     }
 
     onResize() {
-        this.searchClear(true);
+        this.searchClear(false);
     }
 
     onClick(e) {
@@ -527,8 +527,8 @@ Frontend.runtimeMessageHandlers = {
         self.updateOptions();
     },
 
-    popupSetVisible: (self, {visible}) => {
-        self.popup.setVisible(visible);
+    popupSetVisibleOverride: (self, {visible}) => {
+        self.popup.setVisibleOverride(visible);
     }
 };
 
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index cb9741be..7fad71c1 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -41,7 +41,7 @@ class PopupProxyHost {
             show: ({id, elementRect, options}) => this.show(id, elementRect, options),
             showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options),
             hide: ({id, changeFocus}) => this.hide(id, changeFocus),
-            setVisible: ({id, visible}) => this.setVisible(id, visible),
+            setVisibleOverride: ({id, visible}) => this.setVisibleOverride(id, visible),
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
             termsShow: ({id, elementRect, writingMode, definitions, options, context}) => this.termsShow(id, elementRect, writingMode, definitions, options, context),
             kanjiShow: ({id, elementRect, writingMode, definitions, options, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, options, context),
@@ -103,9 +103,9 @@ class PopupProxyHost {
         return popup.hide(changeFocus);
     }
 
-    async setVisible(id, visible) {
+    async setVisibleOverride(id, visible) {
         const popup = this.getPopup(id);
-        return popup.setVisible(visible);
+        return popup.setVisibleOverride(visible);
     }
 
     async containsPoint(id, x, y) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 072cebc9..99b28549 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -65,9 +65,9 @@ class PopupProxy {
         return await this.invokeHostApi('hide', {id: this.id, changeFocus});
     }
 
-    async setVisible(visible) {
+    async setVisibleOverride(visible) {
         const id = await this.getPopupId();
-        return await this.invokeHostApi('setVisible', {id, visible});
+        return await this.invokeHostApi('setVisibleOverride', {id, visible});
     }
 
     async containsPoint(x, y) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 9dff6f28..9ca91afa 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -34,6 +34,9 @@ class Popup {
         this.container.style.height = '0px';
         this.injectPromise = null;
         this.isInjected = false;
+        this.visible = false;
+        this.visibleOverride = null;
+        this.updateVisibility();
     }
 
     inject(options) {
@@ -105,9 +108,11 @@ class Popup {
         container.style.top = `${y}px`;
         container.style.width = `${width}px`;
         container.style.height = `${height}px`;
-        container.style.visibility = 'visible';
 
-        this.hideChildren(true);
+        this.setVisible(true);
+        if (this.child !== null) {
+            this.child.hide(true);
+        }
     }
 
     static getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) {
@@ -209,41 +214,35 @@ class Popup {
     }
 
     hide(changeFocus) {
-        if (this.isContainerHidden()) {
-            changeFocus = false;
+        if (!this.isVisible()) {
+            return;
+        }
+
+        this.setVisible(false);
+        if (this.child !== null) {
+            this.child.hide(false);
         }
-        this.hideChildren(changeFocus);
-        this.hideContainer();
         if (changeFocus) {
             this.focusParent();
         }
     }
 
-    hideChildren(changeFocus) {
-        // Recursively hides all children.
-        if (this.child !== null && !this.child.isContainerHidden()) {
-            this.child.hide(changeFocus);
-        }
-    }
-
-    hideContainer() {
-        this.container.style.visibility = 'hidden';
+    isVisible() {
+        return this.isInjected && (this.visibleOverride !== null ? this.visibleOverride : this.visible);
     }
 
-    isContainerHidden() {
-        return (this.container.style.visibility === 'hidden');
+    setVisible(visible) {
+        this.visible = visible;
+        this.updateVisibility();
     }
 
-    isVisible() {
-        return this.isInjected && this.container.style.visibility !== 'hidden';
+    setVisibleOverride(visible) {
+        this.visibleOverride = visible;
+        this.updateVisibility();
     }
 
-    setVisible(visible) {
-        if (visible) {
-            this.container.style.setProperty('display', '');
-        } else {
-            this.container.style.setProperty('display', 'none', 'important');
-        }
+    updateVisibility() {
+        this.container.style.setProperty('visibility', this.isVisible() ? 'visible' : 'hidden', 'important');
     }
 
     focusParent() {