Merge pull request #417 from siikamiika/iframe-popups-2

Show iframe popups on root page

ext/bg/data/options-schema.json

@@ -108,7 +108,8 @@
                                     "enableClipboardMonitor",
                                     "showPitchAccentDownstepNotation",
                                     "showPitchAccentPositionNotation",
-                                    "showPitchAccentGraph"
+                                    "showPitchAccentGraph",
+                                    "showIframePopupsInRootFrame"
                                 ],
                                 "properties": {
                                     "enable": {
@@ -242,6 +243,10 @@
                                     "showPitchAccentGraph": {
                                         "type": "boolean",
                                         "default": false
+                                    },
+                                    "showIframePopupsInRootFrame": {
+                                        "type": "boolean",
+                                        "default": false
                                     }
                                 }
                             },

ext/bg/js/options.js

@@ -127,7 +127,8 @@ function profileOptionsCreateDefaults() {
             enableClipboardMonitor: false,
             showPitchAccentDownstepNotation: true,
             showPitchAccentPositionNotation: true,
-            showPitchAccentGraph: false
+            showPitchAccentGraph: false,
+            showIframePopupsInRootFrame: false
         },
 
         audio: {

ext/bg/js/search-frontend.js

@@ -35,6 +35,7 @@ async function searchFrontendSetup() {
     const scriptSrcs = [
         '/mixed/js/text-scanner.js',
         '/fg/js/frontend-api-receiver.js',
+        '/fg/js/frame-offset-forwarder.js',
         '/fg/js/popup.js',
         '/fg/js/popup-proxy-host.js',
         '/fg/js/frontend.js',

ext/bg/js/settings/main.js

@@ -87,6 +87,7 @@ async function formRead(options) {
     options.general.showPitchAccentDownstepNotation = $('#show-pitch-accent-downstep-notation').prop('checked');
     options.general.showPitchAccentPositionNotation = $('#show-pitch-accent-position-notation').prop('checked');
     options.general.showPitchAccentGraph = $('#show-pitch-accent-graph').prop('checked');
+    options.general.showIframePopupsInRootFrame = $('#show-iframe-popups-in-root-frame').prop('checked');
     options.general.popupTheme = $('#popup-theme').val();
     options.general.popupOuterTheme = $('#popup-outer-theme').val();
     options.general.customPopupCss = $('#custom-popup-css').val();
@@ -167,6 +168,7 @@ async function formWrite(options) {
     $('#show-pitch-accent-downstep-notation').prop('checked', options.general.showPitchAccentDownstepNotation);
     $('#show-pitch-accent-position-notation').prop('checked', options.general.showPitchAccentPositionNotation);
     $('#show-pitch-accent-graph').prop('checked', options.general.showPitchAccentGraph);
+    $('#show-iframe-popups-in-root-frame').prop('checked', options.general.showIframePopupsInRootFrame);
     $('#popup-theme').val(options.general.popupTheme);
     $('#popup-outer-theme').val(options.general.popupOuterTheme);
     $('#custom-popup-css').val(options.general.customPopupCss);

ext/bg/settings.html

@@ -174,6 +174,10 @@
                     <label><input type="checkbox" id="show-pitch-accent-graph"> Show graph for pitch accents</label>
                 </div>
 
+                <div class="checkbox options-advanced">
+                    <label><input type="checkbox" id="show-iframe-popups-in-root-frame"> Show iframe popups in root frame</label>
+                </div>
+
                 <div class="checkbox options-advanced">
                     <label><input type="checkbox" id="show-debug-info"> Show debug information</label>
                 </div>

ext/fg/js/frame-offset-forwarder.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2020  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * apiForward
+ */
+
+class FrameOffsetForwarder {
+    constructor() {
+        this._started = false;
+
+        this._forwardFrameOffset = (
+            window !== window.parent ?
+            this._forwardFrameOffsetParent.bind(this) :
+            this._forwardFrameOffsetOrigin.bind(this)
+        );
+
+        this._windowMessageHandlers = new Map([
+            ['getFrameOffset', ({offset, uniqueId}, e) => this._onGetFrameOffset(offset, uniqueId, e)]
+        ]);
+    }
+
+    start() {
+        if (this._started) { return; }
+        window.addEventListener('message', this.onMessage.bind(this), false);
+        this._started = true;
+    }
+
+    async getOffset() {
+        const uniqueId = yomichan.generateId(16);
+
+        const frameOffsetPromise = yomichan.getTemporaryListenerResult(
+            chrome.runtime.onMessage,
+            ({action, params}, {resolve}) => {
+                if (action === 'frameOffset' && isObject(params) && params.uniqueId === uniqueId) {
+                    resolve(params);
+                }
+            },
+            5000
+        );
+
+        window.parent.postMessage({
+            action: 'getFrameOffset',
+            params: {
+                uniqueId,
+                offset: [0, 0]
+            }
+        }, '*');
+
+        const {offset} = await frameOffsetPromise;
+        return offset;
+    }
+
+    onMessage(e) {
+        const {action, params} = e.data;
+        const handler = this._windowMessageHandlers.get(action);
+        if (typeof handler !== 'function') { return; }
+        handler(params, e);
+    }
+
+    _onGetFrameOffset(offset, uniqueId, e) {
+        let sourceFrame = null;
+        for (const frame of document.querySelectorAll('frame, iframe:not(.yomichan-float)')) {
+            if (frame.contentWindow !== e.source) { continue; }
+            sourceFrame = frame;
+            break;
+        }
+        if (sourceFrame === null) {
+            this._forwardFrameOffsetOrigin(null, uniqueId);
+            return;
+        }
+
+        const [forwardedX, forwardedY] = offset;
+        const {x, y} = sourceFrame.getBoundingClientRect();
+        offset = [forwardedX + x, forwardedY + y];
+
+        this._forwardFrameOffset(offset, uniqueId);
+    }
+
+    _forwardFrameOffsetParent(offset, uniqueId) {
+        window.parent.postMessage({action: 'getFrameOffset', params: {offset, uniqueId}}, '*');
+    }
+
+    _forwardFrameOffsetOrigin(offset, uniqueId) {
+        apiForward('frameOffset', {offset, uniqueId});
+    }
+}

ext/fg/js/frontend-initialize.js

@@ -17,9 +17,12 @@
  */
 
 /* global
+ * FrameOffsetForwarder
  * Frontend
  * PopupProxy
  * PopupProxyHost
+ * apiForward
+ * apiOptionsGet
  */
 
 async function main() {
@@ -28,10 +31,35 @@ async function main() {
     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) {
+    if (!proxy && (window !== window.parent) && options.general.showIframePopupsInRootFrame) {
+        const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
+            chrome.runtime.onMessage,
+            ({action, params}, {resolve}) => {
+                if (action === 'rootPopupInformation') {
+                    resolve(params);
+                }
+            }
+        );
+        apiForward('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();
 

ext/fg/js/frontend.js

@@ -18,6 +18,7 @@
 
 /* global
  * TextScanner
+ * apiForward
  * apiGetZoom
  * apiKanjiFind
  * apiOptionsGet
@@ -52,7 +53,8 @@ class Frontend extends TextScanner {
         ]);
 
         this._runtimeMessageHandlers = new Map([
-            ['popupSetVisibleOverride', ({visible}) => { this.popup.setVisibleOverride(visible); }]
+            ['popupSetVisibleOverride', ({visible}) => { this.popup.setVisibleOverride(visible); }],
+            ['rootPopupRequestInformationBroadcast', () => { this._broadcastRootPopupInformation(); }]
         ]);
     }
 
@@ -76,6 +78,7 @@ class Frontend extends TextScanner {
             chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
 
             this._updateContentScale();
+            this._broadcastRootPopupInformation();
         } catch (e) {
             this.onError(e);
         }
@@ -255,6 +258,12 @@ class Frontend extends TextScanner {
         this._updatePopupPosition();
     }
 
+    _broadcastRootPopupInformation() {
+        if (!this.popup.isProxy() && this.popup.depth === 0) {
+            apiForward('rootPopupInformation', {popupId: this.popup.id, frameId: this.popup.frameId});
+        }
+    }
+
     async _updatePopupPosition() {
         const textSource = this.getCurrentTextSource();
         if (textSource !== null && await this.popup.isVisible()) {

ext/fg/js/popup-proxy-host.js

@@ -26,17 +26,17 @@ class PopupProxyHost {
     constructor() {
         this._popups = new Map();
         this._apiReceiver = null;
-        this._frameIdPromise = null;
+        this._frameId = null;
     }
 
     // Public functions
 
     async prepare() {
-        this._frameIdPromise = apiFrameInformationGet();
+        const {frameId} = await apiFrameInformationGet();
-        const {frameId} = await this._frameIdPromise;
         if (typeof frameId !== 'number') { return; }
+        this._frameId = frameId;
 
-        this._apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${frameId}`, new Map([
+        this._apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${this._frameId}`, new Map([
             ['getOrCreatePopup', this._onApiGetOrCreatePopup.bind(this)],
             ['setOptions', this._onApiSetOptions.bind(this)],
             ['hide', this._onApiHide.bind(this)],
@@ -87,7 +87,7 @@ class PopupProxyHost {
         } else if (depth === null) {
             depth = 0;
         }
-        const popup = new Popup(id, depth, this._frameIdPromise);
+        const popup = new Popup(id, depth, this._frameId);
         if (parent !== null) {
             popup.setParent(parent);
         }
@@ -95,7 +95,7 @@ class PopupProxyHost {
         return popup;
     }
 
-    // Message handlers
+    // API message handlers
 
     async _onApiGetOrCreatePopup({id, parentId}) {
         const popup = this.getOrCreatePopup(id, parentId);

ext/fg/js/popup-proxy.js

@@ -21,14 +21,18 @@
  */
 
 class PopupProxy {
-    constructor(id, depth, parentId, parentFrameId, url) {
+    constructor(id, depth, parentId, parentFrameId, url, getFrameOffset=null) {
         this._parentId = parentId;
         this._parentFrameId = parentFrameId;
         this._id = id;
-        this._idPromise = null;
         this._depth = depth;
         this._url = url;
         this._apiSender = new FrontendApiSender();
+        this._getFrameOffset = getFrameOffset;
+
+        this._frameOffset = null;
+        this._frameOffsetPromise = null;
+        this._frameOffsetUpdatedAt = null;
     }
 
     // Public properties
@@ -51,79 +55,63 @@ class PopupProxy {
 
     // Public functions
 
+    async prepare() {
+        const {id} = await this._invokeHostApi('getOrCreatePopup', {id: this._id, parentId: this._parentId});
+        this._id = id;
+    }
+
     isProxy() {
         return true;
     }
 
     async setOptions(options) {
-        const id = await this._getPopupId();
+        return await this._invokeHostApi('setOptions', {id: this._id, options});
-        return await this._invokeHostApi('setOptions', {id, options});
     }
 
     hide(changeFocus) {
-        if (this._id === null) {
-            return;
-        }
         this._invokeHostApi('hide', {id: this._id, changeFocus});
     }
 
     async isVisible() {
-        const id = await this._getPopupId();
+        return await this._invokeHostApi('isVisible', {id: this._id});
-        return await this._invokeHostApi('isVisible', {id});
     }
 
     setVisibleOverride(visible) {
-        if (this._id === null) {
-            return;
-        }
         this._invokeHostApi('setVisibleOverride', {id: this._id, visible});
     }
 
     async containsPoint(x, y) {
-        if (this._id === null) {
+        if (this._getFrameOffset !== null) {
-            return false;
+            await this._updateFrameOffset();
+            [x, y] = this._applyFrameOffset(x, y);
         }
         return await this._invokeHostApi('containsPoint', {id: this._id, x, y});
     }
 
     async showContent(elementRect, writingMode, type=null, details=null) {
-        const id = await this._getPopupId();
+        let {x, y, width, height} = elementRect;
-        elementRect = PopupProxy._convertDOMRectToJson(elementRect);
+        if (this._getFrameOffset !== null) {
-        return await this._invokeHostApi('showContent', {id, elementRect, writingMode, type, details});
+            await this._updateFrameOffset();
+            [x, y] = this._applyFrameOffset(x, y);
+        }
+        elementRect = {x, y, width, height};
+        return await this._invokeHostApi('showContent', {id: this._id, elementRect, writingMode, type, details});
     }
 
     async setCustomCss(css) {
-        const id = await this._getPopupId();
+        return await this._invokeHostApi('setCustomCss', {id: this._id, css});
-        return await this._invokeHostApi('setCustomCss', {id, css});
     }
 
     clearAutoPlayTimer() {
-        if (this._id === null) {
-            return;
-        }
         this._invokeHostApi('clearAutoPlayTimer', {id: this._id});
     }
 
     async setContentScale(scale) {
-        const id = await this._getPopupId();
+        this._invokeHostApi('setContentScale', {id: this._id, scale});
-        this._invokeHostApi('setContentScale', {id, scale});
     }
 
     // Private
 
-    _getPopupId() {
-        if (this._idPromise === null) {
-            this._idPromise = this._getPopupIdAsync();
-        }
-        return this._idPromise;
-    }
-
-    async _getPopupIdAsync() {
-        const {id} = await this._invokeHostApi('getOrCreatePopup', {id: this._id, parentId: this._parentId});
-        this._id = id;
-        return id;
-    }
-
     _invokeHostApi(action, params={}) {
         if (typeof this._parentFrameId !== 'number') {
             return Promise.reject(new Error('Invalid frame'));
@@ -131,12 +119,42 @@ class PopupProxy {
         return this._apiSender.invoke(action, params, `popup-proxy-host#${this._parentFrameId}`);
     }
 
-    static _convertDOMRectToJson(domRect) {
+    async _updateFrameOffset() {
-        return {
+        const now = Date.now();
-            x: domRect.x,
+        const firstRun = this._frameOffsetUpdatedAt === null;
-            y: domRect.y,
+        const expired = firstRun || this._frameOffsetUpdatedAt < now - PopupProxy._frameOffsetExpireTimeout;
-            width: domRect.width,
+        if (this._frameOffsetPromise === null && !expired) { return; }
-            height: domRect.height
+
-        };
+        if (this._frameOffsetPromise !== null) {
+            if (firstRun) {
+                await this._frameOffsetPromise;
+            }
+            return;
+        }
+
+        const promise = this._updateFrameOffsetInner(now);
+        if (firstRun) {
+            await promise;
+        }
+    }
+
+    async _updateFrameOffsetInner(now) {
+        this._frameOffsetPromise = this._getFrameOffset();
+        try {
+            const offset = await this._frameOffsetPromise;
+            this._frameOffset = offset !== null ? offset : [0, 0];
+            this._frameOffsetUpdatedAt = now;
+        } catch (e) {
+            logError(e);
+        } finally {
+            this._frameOffsetPromise = null;
+        }
+    }
+
+    _applyFrameOffset(x, y) {
+        const [offsetX, offsetY] = this._frameOffset;
+        return [x + offsetX, y + offsetY];
     }
 }
+
+PopupProxy._frameOffsetExpireTimeout = 1000;

ext/fg/js/popup.js

@@ -22,11 +22,10 @@
  */
 
 class Popup {
-    constructor(id, depth, frameIdPromise) {
+    constructor(id, depth, frameId) {
         this._id = id;
         this._depth = depth;
-        this._frameIdPromise = frameIdPromise;
+        this._frameId = frameId;
-        this._frameId = null;
         this._parent = null;
         this._child = null;
         this._childrenSupported = true;
@@ -69,6 +68,10 @@ class Popup {
         return this._depth;
     }
 
+    get frameId() {
+        return this._frameId;
+    }
+
     get url() {
         return window.location.href;
     }
@@ -193,40 +196,42 @@ class Popup {
     }
 
     async _createInjectPromise() {
-        try {
-            const {frameId} = await this._frameIdPromise;
-            if (typeof frameId === 'number') {
-                this._frameId = frameId;
-            }
-        } catch (e) {
-            // NOP
-        }
-
         if (this._messageToken === null) {
             this._messageToken = await apiGetMessageToken();
         }
 
-        return new Promise((resolve) => {
+        const popupPreparedPromise = yomichan.getTemporaryListenerResult(
-            const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null);
+            chrome.runtime.onMessage,
-            this._container.setAttribute('src', chrome.runtime.getURL('/fg/float.html'));
+            ({action, params}, {resolve}) => {
-            this._container.addEventListener('load', () => {
+                if (
-                this._listenForDisplayPrepareCompleted(resolve);
+                    action === 'popupPrepareCompleted' &&
+                    isObject(params) &&
+                    params.targetPopupId === this._id
+                ) {
+                    resolve();
+                }
+            }
+        );
 
-                this._invokeApi('prepare', {
+        const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null);
-                    popupInfo: {
+        this._container.setAttribute('src', chrome.runtime.getURL('/fg/float.html'));
-                        id: this._id,
+        this._container.addEventListener('load', () => {
-                        depth: this._depth,
+            this._invokeApi('prepare', {
-                        parentFrameId
+                popupInfo: {
-                    },
+                    id: this._id,
-                    url: this.url,
+                    depth: this._depth,
-                    childrenSupported: this._childrenSupported,
+                    parentFrameId
-                    scale: this._contentScale
+                },
-                });
+                url: this.url,
+                childrenSupported: this._childrenSupported,
+                scale: this._contentScale
             });
-            this._observeFullscreen(true);
-            this._onFullscreenChanged();
-            this._injectStyles();
         });
+        this._observeFullscreen(true);
+        this._onFullscreenChanged();
+        this._injectStyles();
+
+        return popupPreparedPromise;
     }
 
     async _injectStyles() {
@@ -361,22 +366,6 @@ class Popup {
         contentWindow.postMessage({action, params, token}, this._targetOrigin);
     }
 
-    _listenForDisplayPrepareCompleted(resolve) {
-        const runtimeMessageCallback = ({action, params}, sender, callback) => {
-            if (
-                action === 'popupPrepareCompleted' &&
-                isObject(params) &&
-                params.targetPopupId === this._id
-            ) {
-                chrome.runtime.onMessage.removeListener(runtimeMessageCallback);
-                callback();
-                resolve();
-                return false;
-            }
-        };
-        chrome.runtime.onMessage.addListener(runtimeMessageCallback);
-    }
-
     static _getFullscreenElement() {
         return (
             document.fullscreenElement ||

ext/manifest.json

@@ -23,9 +23,12 @@
             "mixed/js/api.js",
             "mixed/js/text-scanner.js",
             "fg/js/document.js",
+            "fg/js/frontend-api-sender.js",
             "fg/js/frontend-api-receiver.js",
             "fg/js/popup.js",
             "fg/js/source.js",
+            "fg/js/frame-offset-forwarder.js",
+            "fg/js/popup-proxy.js",
             "fg/js/popup-proxy-host.js",
             "fg/js/frontend.js",
             "fg/js/frontend-initialize.js"

ext/mixed/js/core.js

@@ -278,11 +278,16 @@ const yomichan = (() => {
         constructor() {
             super();
 
-            this._isBackendPreparedResolve = null;
+            this._isBackendPreparedPromise = this.getTemporaryListenerResult(
-            this._isBackendPreparedPromise = new Promise((resolve) => (this._isBackendPreparedResolve = resolve));
+                chrome.runtime.onMessage,
+                ({action}, {resolve}) => {
+                    if (action === 'backendPrepared') {
+                        resolve();
+                    }
+                }
+            );
 
             this._messageHandlers = new Map([
-                ['backendPrepared', this._onBackendPrepared.bind(this)],
                 ['getUrl', this._onMessageGetUrl.bind(this)],
                 ['optionsUpdated', this._onMessageOptionsUpdated.bind(this)],
                 ['zoomChanged', this._onMessageZoomChanged.bind(this)]
@@ -312,6 +317,42 @@ const yomichan = (() => {
             this.trigger('orphaned', {error});
         }
 
+        getTemporaryListenerResult(eventHandler, userCallback, timeout=null) {
+            if (!(
+                typeof eventHandler.addListener === 'function' &&
+                typeof eventHandler.removeListener === 'function'
+            )) {
+                throw new Error('Event handler type not supported');
+            }
+
+            return new Promise((resolve, reject) => {
+                const runtimeMessageCallback = ({action, params}, sender, sendResponse) => {
+                    let timeoutId = null;
+                    if (timeout !== null) {
+                        timeoutId = window.setTimeout(() => {
+                            timeoutId = null;
+                            eventHandler.removeListener(runtimeMessageCallback);
+                            reject(new Error(`Listener timed out in ${timeout} ms`));
+                        }, timeout);
+                    }
+
+                    const cleanupResolve = (value) => {
+                        if (timeoutId !== null) {
+                            window.clearTimeout(timeoutId);
+                            timeoutId = null;
+                        }
+                        eventHandler.removeListener(runtimeMessageCallback);
+                        sendResponse();
+                        resolve(value);
+                    };
+
+                    userCallback({action, params}, {resolve: cleanupResolve, sender});
+                };
+
+                eventHandler.addListener(runtimeMessageCallback);
+            });
+        }
+
         // Private
 
         _onMessage({action, params}, sender, callback) {
@@ -323,10 +364,6 @@ const yomichan = (() => {
             return false;
         }
 
-        _onBackendPrepared() {
-            this._isBackendPreparedResolve();
-        }
-
         _onMessageGetUrl() {
             return {url: window.location.href};
         }

test/test-database.js

@@ -27,7 +27,8 @@ require('fake-indexeddb/auto');
 const chrome = {
     runtime: {
         onMessage: {
-            addListener() { /* NOP */ }
+            addListener() { /* NOP */ },
+            removeListener() { /* NOP */ }
         },
         getURL(path2) {
             return url.pathToFileURL(path.join(__dirname, '..', 'ext', path2.replace(/^\//, '')));