Frontend/popup proxy message refactoring (#520)

* Use direct message handler functions

* Remove unused targetPopupId

* Make target a member of FrontendApiSender

* Rename frameId to parentFrameId for clarity

* Remove _parentFrameId

* Rename _parentId to _parentPopupId for clarity

ext/fg/js/content-script-main.js

@@ -37,11 +37,11 @@ async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
         }
     );
     apiBroadcastTab('rootPopupRequestInformationBroadcast');
-    const {popupId, frameId} = await rootPopupInformationPromise;
+    const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
 
     const getFrameOffset = frameOffsetForwarder.getOffset.bind(frameOffsetForwarder);
 
-    const popup = new PopupProxy(popupId, 0, null, frameId, getFrameOffset, setDisabled);
+    const popup = new PopupProxy(popupId, 0, null, parentFrameId, getFrameOffset, setDisabled);
     await popup.prepare();
 
     return popup;

ext/fg/js/frontend-api-sender.js

@@ -17,7 +17,8 @@
 
 
 class FrontendApiSender {
-    constructor() {
+    constructor(target) {
+        this._target = target;
         this._senderId = yomichan.generateId(16);
         this._ackTimeout = 3000; // 3 seconds
         this._responseTimeout = 10000; // 10 seconds
@@ -27,7 +28,7 @@ class FrontendApiSender {
         this._port = null;
     }
 
-    invoke(action, params, target) {
+    invoke(action, params) {
         if (this._disconnected) {
             // attempt to reconnect the next time
             this._disconnected = false;
@@ -46,7 +47,7 @@ class FrontendApiSender {
             this._callbacks.set(id, info);
             info.timer = setTimeout(() => this._onError(id, 'Timeout (ack)'), this._ackTimeout);
 
-            this._port.postMessage({id, action, params, target, senderId: this._senderId});
+            this._port.postMessage({id, action, params, target: this._target, senderId: this._senderId});
         });
     }
 

ext/fg/js/frontend.js

@@ -47,14 +47,14 @@ class Frontend {
         });
 
         this._windowMessageHandlers = new Map([
-            ['popupClose', () => this._textScanner.clearSelection(false)],
-            ['selectionCopy', () => document.execCommand('copy')]
+            ['popupClose', this._onMessagePopupClose.bind(this)],
+            ['selectionCopy', this._onMessageSelectionCopy.bind()]
         ]);
 
         this._runtimeMessageHandlers = new Map([
-            ['popupSetVisibleOverride', ({visible}) => { this._popup.setVisibleOverride(visible); }],
-            ['rootPopupRequestInformationBroadcast', () => { this._broadcastRootPopupInformation(); }],
-            ['requestDocumentInformationBroadcast', ({uniqueId}) => { this._broadcastDocumentInformation(uniqueId); }]
+            ['popupSetVisibleOverride', this._onMessagePopupSetVisibleOverride.bind(this)],
+            ['rootPopupRequestInformationBroadcast', this._onMessageRootPopupRequestInformationBroadcast.bind(this)],
+            ['requestDocumentInformationBroadcast', this._onMessageRequestDocumentInformationBroadcast.bind(this)]
         ]);
     }
 
@@ -145,6 +145,28 @@ class Frontend {
         return this._lastShowPromise;
     }
 
+    // Message handlers
+
+    _onMessagePopupClose() {
+        this._textScanner.clearSelection(false);
+    }
+
+    _onMessageSelectionCopy() {
+        document.execCommand('copy');
+    }
+
+    _onMessagePopupSetVisibleOverride({visible}) {
+        this._popup.setVisibleOverride(visible);
+    }
+
+    _onMessageRootPopupRequestInformationBroadcast() {
+        this._broadcastRootPopupInformation();
+    }
+
+    _onMessageRequestDocumentInformationBroadcast({uniqueId}) {
+        this._broadcastDocumentInformation(uniqueId);
+    }
+
     // Private
 
     _onResize() {
@@ -160,9 +182,6 @@ class Frontend {
     }
 
     _onRuntimeMessage({action, params}, sender, callback) {
-        const {targetPopupId} = params || {};
-        if (typeof targetPopupId !== 'undefined' && targetPopupId !== this._popup.id) { return; }
-
         const handler = this._runtimeMessageHandlers.get(action);
         if (typeof handler !== 'function') { return false; }
 

ext/fg/js/popup-proxy.js

@@ -20,12 +20,11 @@
  */
 
 class PopupProxy {
-    constructor(id, depth, parentId, parentFrameId, getFrameOffset=null, setDisabled=null) {
-        this._parentId = parentId;
-        this._parentFrameId = parentFrameId;
+    constructor(id, depth, parentPopupId, parentFrameId, getFrameOffset=null, setDisabled=null) {
         this._id = id;
         this._depth = depth;
-        this._apiSender = new FrontendApiSender();
+        this._parentPopupId = parentPopupId;
+        this._apiSender = new FrontendApiSender(`popup-factory#${parentFrameId}`);
         this._getFrameOffset = getFrameOffset;
         this._setDisabled = setDisabled;
 
@@ -51,7 +50,7 @@ class PopupProxy {
     // Public functions
 
     async prepare() {
-        const {id} = await this._invoke('getOrCreatePopup', {id: this._id, parentId: this._parentId});
+        const {id} = await this._invoke('getOrCreatePopup', {id: this._id, parentId: this._parentPopupId});
         this._id = id;
     }
 
@@ -112,10 +111,7 @@ class PopupProxy {
     // Private
 
     _invoke(action, params={}) {
-        if (typeof this._parentFrameId !== 'number') {
-            return Promise.reject(new Error('Invalid frame'));
-        }
-        return this._apiSender.invoke(action, params, `popup-factory#${this._parentFrameId}`);
+        return this._apiSender.invoke(action, params);
     }
 
     async _updateFrameOffset() {