Merge pull request #439 from siikamiika/popup-live-toggle

Popup live toggle

3 files changed, 143 insertions, 59 deletions

diff --git a/ext/fg/js/frontend-initialize.js b/ext/fg/js/frontend-initialize.js
index 5af7fdf0..2b942258 100644
--- a/ext/fg/js/frontend-initialize.js
+++ b/ext/fg/js/frontend-initialize.js
@@ -24,49 +24,101 @@
  * apiOptionsGet
  */
 
+async function createIframePopupProxy(url, frameOffsetForwarder) {
+    const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
+        chrome.runtime.onMessage,
+        ({action, params}, {resolve}) => {
+            if (action === 'rootPopupInformation') {
+                resolve(params);
+            }
+        }
+    );
+    apiBroadcastTab('rootPopupRequestInformationBroadcast');
+    const {popupId, frameId} = await rootPopupInformationPromise;
+
+    const getFrameOffset = frameOffsetForwarder.getOffset.bind(frameOffsetForwarder);
+
+    const popup = new PopupProxy(popupId, 0, null, frameId, url, getFrameOffset);
+    await popup.prepare();
+
+    return popup;
+}
+
+async function getOrCreatePopup(depth) {
+    const popupHost = new PopupProxyHost();
+    await popupHost.prepare();
+
+    const popup = popupHost.getOrCreatePopup(null, null, depth);
+
+    return popup;
+}
+
+async function createPopupProxy(depth, id, parentFrameId, url) {
+    const popup = new PopupProxy(null, depth + 1, id, parentFrameId, url);
+    await popup.prepare();
+
+    return popup;
+}
+
 async function main() {
     await yomichan.prepare();
 
     const data = window.frontendInitializationData || {};
-    const {id, depth=0, parentFrameId, url, proxy=false} = data;
-
-    const optionsContext = {depth, url};
-    const options = await apiOptionsGet(optionsContext);
-
-    let popup;
-    if (!proxy && (window !== window.parent) && options.general.showIframePopupsInRootFrame) {
-        const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
-            chrome.runtime.onMessage,
-            ({action, params}, {resolve}) => {
-                if (action === 'rootPopupInformation') {
-                    resolve(params);
-                }
+    const {id, depth=0, parentFrameId, url=window.location.href, proxy=false, isSearchPage=false} = data;
+
+    const isIframe = !proxy && (window !== window.parent);
+
+    const popups = {
+        iframe: null,
+        proxy: null,
+        normal: null
+    };
+
+    let frontend = null;
+    let frontendPreparePromise = null;
+    let frameOffsetForwarder = null;
+
+    const applyOptions = async () => {
+        const optionsContext = {depth: isSearchPage ? 0 : depth, url};
+        const options = await apiOptionsGet(optionsContext);
+
+        if (!proxy && frameOffsetForwarder === null) {
+            frameOffsetForwarder = new FrameOffsetForwarder();
+            frameOffsetForwarder.start();
+        }
+
+        let popup;
+        if (isIframe && options.general.showIframePopupsInRootFrame) {
+            popup = popups.iframe || await createIframePopupProxy(url, frameOffsetForwarder);
+            popups.iframe = popup;
+        } else if (proxy) {
+            popup = popups.proxy || await createPopupProxy(depth, id, parentFrameId, url);
+            popups.proxy = popup;
+        } else {
+            popup = popups.normal || await getOrCreatePopup(depth);
+            popups.normal = popup;
+        }
+
+        if (frontend === null) {
+            frontend = new Frontend(popup);
+            frontendPreparePromise = frontend.prepare();
+            await frontendPreparePromise;
+        } else {
+            await frontendPreparePromise;
+            if (isSearchPage) {
+                const disabled = !options.scanning.enableOnSearchPage;
+                frontend.setDisabledOverride(disabled);
+            }
+
+            if (isIframe) {
+                await frontend.setPopup(popup);
             }
-        );
-        apiBroadcastTab('rootPopupRequestInformationBroadcast');
-        const {popupId, frameId} = await rootPopupInformationPromise;
-
-        const frameOffsetForwarder = new FrameOffsetForwarder();
-        frameOffsetForwarder.start();
-        const getFrameOffset = frameOffsetForwarder.getOffset.bind(frameOffsetForwarder);
-
-        popup = new PopupProxy(popupId, 0, null, frameId, url, getFrameOffset);
-        await popup.prepare();
-    } else if (proxy) {
-        popup = new PopupProxy(null, depth + 1, id, parentFrameId, url);
-        await popup.prepare();
-    } else {
-        const frameOffsetForwarder = new FrameOffsetForwarder();
-        frameOffsetForwarder.start();
-
-        const popupHost = new PopupProxyHost();
-        await popupHost.prepare();
-
-        popup = popupHost.getOrCreatePopup(null, null, depth);
-    }
-
-    const frontend = new Frontend(popup);
-    await frontend.prepare();
+        }
+    };
+
+    yomichan.on('optionsUpdated', applyOptions);
+
+    await applyOptions();
 }
 
 main();
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 95427c4c..eecfe2e1 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -29,11 +29,14 @@ class Frontend extends TextScanner {
     constructor(popup) {
         super(
             window,
-            popup.isProxy() ? [] : [popup.getContainer()],
+            () => this.popup.isProxy() ? [] : [this.popup.getContainer()],
             [(x, y) => this.popup.containsPoint(x, y)]
         );
 
         this.popup = popup;
+
+        this._disabledOverride = false;
+
         this.options = null;
 
         this.optionsContext = {
@@ -132,8 +135,20 @@ class Frontend extends TextScanner {
         ];
     }
 
+    setDisabledOverride(disabled) {
+        this._disabledOverride = disabled;
+        this.setEnabled(this.options.general.enable, this._canEnable());
+    }
+
+    async setPopup(popup) {
+        this.onSearchClear(false);
+        this.popup = popup;
+        await popup.setOptions(this.options);
+    }
+
     async updateOptions() {
-        this.setOptions(await apiOptionsGet(this.getOptionsContext()));
+        this.options = await apiOptionsGet(this.getOptionsContext());
+        this.setOptions(this.options, this._canEnable());
 
         const ignoreNodes = ['.scan-disable', '.scan-disable *'];
         if (!this.options.scanning.enableOnPopupExpressions) {
@@ -259,7 +274,7 @@ class Frontend extends TextScanner {
     }
 
     _broadcastRootPopupInformation() {
-        if (!this.popup.isProxy() && this.popup.depth === 0) {
+        if (!this.popup.isProxy() && this.popup.depth === 0 && this.popup.frameId === 0) {
             apiBroadcastTab('rootPopupInformation', {popupId: this.popup.id, frameId: this.popup.frameId});
         }
     }
@@ -272,6 +287,10 @@ class Frontend extends TextScanner {
         });
     }
 
+    _canEnable() {
+        return this.popup.depth <= this.options.scanning.popupNestingMaxDepth && !this._disabledOverride;
+    }
+
     async _updatePopupPosition() {
         const textSource = this.getCurrentTextSource();
         if (textSource !== null && await this.popup.isVisible()) {
diff --git a/ext/fg/js/popup-nested.js b/ext/fg/js/popup-nested.js
index 1b24614b..c140f9c8 100644
--- a/ext/fg/js/popup-nested.js
+++ b/ext/fg/js/popup-nested.js
@@ -19,24 +19,7 @@
  * apiOptionsGet
  */
 
-let popupNestedInitialized = false;
-
-async function popupNestedInitialize(id, depth, parentFrameId, url) {
-    if (popupNestedInitialized) {
-        return;
-    }
-    popupNestedInitialized = true;
-
-    const optionsContext = {depth, url};
-    const options = await apiOptionsGet(optionsContext);
-    const popupNestingMaxDepth = options.scanning.popupNestingMaxDepth;
-
-    if (!(typeof popupNestingMaxDepth === 'number' && typeof depth === 'number' && depth < popupNestingMaxDepth)) {
-        return;
-    }
-
-    window.frontendInitializationData = {id, depth, parentFrameId, url, proxy: true};
-
+function injectPopupNested() {
     const scriptSrcs = [
         '/mixed/js/text-scanner.js',
         '/fg/js/frontend-api-sender.js',
@@ -52,3 +35,33 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) {
         document.body.appendChild(script);
     }
 }
+
+async function popupNestedInitialize(id, depth, parentFrameId, url) {
+    let optionsApplied = false;
+
+    const applyOptions = async () => {
+        const optionsContext = {depth, url};
+        const options = await apiOptionsGet(optionsContext);
+        const popupNestingMaxDepth = options.scanning.popupNestingMaxDepth;
+
+        const maxPopupDepthExceeded = !(
+            typeof popupNestingMaxDepth === 'number' &&
+            typeof depth === 'number' &&
+            depth < popupNestingMaxDepth
+        );
+        if (maxPopupDepthExceeded || optionsApplied) {
+            return;
+        }
+
+        optionsApplied = true;
+
+        window.frontendInitializationData = {id, depth, parentFrameId, url, proxy: true};
+        injectPopupNested();
+
+        yomichan.off('optionsUpdated', applyOptions);
+    };
+
+    yomichan.on('optionsUpdated', applyOptions);
+
+    await applyOptions();
+}