Simplify process to wait for iframe prepare completion

5 files changed, 28 insertions, 24 deletions

diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 46d1314e..35a78d48 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -34,7 +34,7 @@ class DisplayFloat extends Display {
         window.addEventListener('message', (e) => this.onMessage(e), false);
     }
 
-    async prepare(options, popupInfo, url, childrenSupported, scale) {
+    async prepare(options, popupInfo, url, childrenSupported, scale, uniqueId) {
         await super.prepare(options);
 
         const {id, depth, parentFrameId} = popupInfo;
@@ -47,7 +47,7 @@ class DisplayFloat extends Display {
 
         this.setContentScale(scale);
 
-        apiForward('popupSetDisplayInitialized');
+        apiForward('popupPrepareCompleted', {uniqueId});
     }
 
     onError(error) {
@@ -125,7 +125,7 @@ DisplayFloat._messageHandlers = new Map([
     ['setContent', (self, {type, details}) => self.setContent(type, details)],
     ['clearAutoPlayTimer', (self) => self.clearAutoPlayTimer()],
     ['setCustomCss', (self, {css}) => self.setCustomCss(css)],
-    ['initialize', (self, {options, popupInfo, url, childrenSupported, scale}) => self.prepare(options, popupInfo, url, childrenSupported, scale)],
+    ['prepare', (self, {options, popupInfo, url, childrenSupported, scale, uniqueId}) => self.prepare(options, popupInfo, url, childrenSupported, scale, uniqueId)],
     ['setContentScale', (self, {scale}) => self.setContentScale(scale)]
 ]);
 
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index c3050514..67045241 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -244,6 +244,5 @@ Frontend._windowMessageHandlers = new Map([
 ]);
 
 Frontend._runtimeMessageHandlers = new Map([
-    ['popupSetVisibleOverride', (self, {visible}) => { self.popup.setVisibleOverride(visible); }],
-    ['popupSetDisplayInitialized', (self) => { self.popup.setDisplayInitialized(); }]
+    ['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 f6a3d451..98729796 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -43,8 +43,7 @@ class PopupProxyHost {
             ['showContent', ({id, elementRect, writingMode, type, details}) => this._onApiShowContent(id, elementRect, writingMode, type, details)],
             ['setCustomCss', ({id, css}) => this._onApiSetCustomCss(id, css)],
             ['clearAutoPlayTimer', ({id}) => this._onApiClearAutoPlayTimer(id)],
-            ['setContentScale', ({id, scale}) => this._onApiSetContentScale(id, scale)],
-            ['setDisplayInitialized', ({id}) => this._onApiSetDisplayInitialized(id)]
+            ['setContentScale', ({id, scale}) => this._onApiSetContentScale(id, scale)]
         ]));
     }
 
@@ -105,11 +104,6 @@ class PopupProxyHost {
         return popup.setContentScale(scale);
     }
 
-    async _onApiSetDisplayInitialized(id) {
-        const popup = this._getPopup(id);
-        return popup.setDisplayInitialized();
-    }
-
     // Private functions
 
     _createPopupInternal(parentId, depth) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 6f3c0f1c..db6dffb1 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -103,11 +103,6 @@ class PopupProxy {
         this._invokeHostApi('setContentScale', {id, scale});
     }
 
-    async setDisplayInitialized() {
-        const id = await this._getPopupId();
-        this._invokeHostApi('setDisplayInitialized', {id});
-    }
-
     // Private
 
     _getPopupId() {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 55f3e0aa..5f6a777b 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -123,10 +123,6 @@ class Popup {
         this._invokeApi('setContentScale', {scale});
     }
 
-    setDisplayInitialized() {
-        throw new Error('Override me');
-    }
-
     // Popup-only public functions
 
     setParent(parent) {
@@ -223,7 +219,10 @@ class Popup {
         return new Promise((resolve) => {
             const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null);
             this._container.addEventListener('load', () => {
-                this._invokeApi('initialize', {
+                const uniqueId = yomichan.generateId(32);
+                Popup._listenForDisplayPrepareCompleted(uniqueId, resolve);
+
+                this._invokeApi('prepare', {
                     options: this._options,
                     popupInfo: {
                         id: this._id,
@@ -232,9 +231,9 @@ class Popup {
                     },
                     url: this.url,
                     childrenSupported: this._childrenSupported,
-                    scale: this._contentScale
+                    scale: this._contentScale,
+                    uniqueId
                 });
-                this.setDisplayInitialized = resolve;
             });
             this._observeFullscreen();
             this._onFullscreenChanged();
@@ -357,6 +356,23 @@ class Popup {
         }
     }
 
+    static _listenForDisplayPrepareCompleted(uniqueId, resolve) {
+        const runtimeMessageCallback = ({action, params}, sender, callback) => {
+            if (
+                action === 'popupPrepareCompleted' &&
+                typeof params === 'object' &&
+                params !== null &&
+                params.uniqueId === uniqueId
+            ) {
+                chrome.runtime.onMessage.removeListener(runtimeMessageCallback);
+                callback();
+                resolve();
+                return false;
+            }
+        };
+        chrome.runtime.onMessage.addListener(runtimeMessageCallback);
+    }
+
     static _getPositionForHorizontalText(elementRect, width, height, viewport, offsetScale, optionsGeneral) {
         const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below');
         const horizontalOffset = optionsGeneral.popupHorizontalOffset * offsetScale;