3 files changed, 87 insertions, 86 deletions

diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 2e952efb..88842eef 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -63,60 +63,25 @@ class DisplayFloat extends Display {
     }
 
     onMessage(e) {
-        const handlers = {
-            termsShow: ({definitions, options, context}) => {
-                this.termsShow(definitions, options, context);
-            },
-
-            kanjiShow: ({definitions, options, context}) => {
-                this.kanjiShow(definitions, options, context);
-            },
-
-            clearAutoPlayTimer: () => {
-                this.clearAutoPlayTimer();
-            },
-
-            orphaned: () => {
-                this.onOrphaned();
-            },
-
-            setOptions: (options) => {
-                const css = options.general.customPopupCss;
-                if (css) {
-                    this.setStyle(css);
-                }
-            },
-
-            popupNestedInitialize: ({id, depth, parentFrameId, url}) => {
-                this.optionsContext.depth = depth;
-                this.optionsContext.url = url;
-                popupNestedInitialize(id, depth, parentFrameId, url);
-            }
-        };
-
         const {action, params} = e.data;
-        const handler = handlers[action];
-        if (handler) {
-            handler(params);
+        const handlers = DisplayFloat.messageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
         }
     }
 
     onKeyDown(e) {
-        const handlers = {
-            67: /* c */ () => {
-                if (e.ctrlKey && !window.getSelection().toString()) {
-                    this.onSelectionCopy();
-                    return true;
-                }
+        const key = Display.getKeyFromEvent(e);
+        const handlers = DisplayFloat.onKeyDownHandlers;
+        if (handlers.hasOwnProperty(key)) {
+            const handler = handlers[key];
+            if (handler(this, e)) {
+                e.preventDefault();
+                return;
             }
-        };
-
-        const handler = handlers[e.keyCode];
-        if (handler && handler()) {
-            e.preventDefault();
-        } else {
-            super.onKeyDown(e);
         }
+        super.onKeyDown(e);
     }
 
     autoPlayAudio() {
@@ -131,6 +96,18 @@ class DisplayFloat extends Display {
         }
     }
 
+    initialize(options, popupInfo, url) {
+        const css = options.general.customPopupCss;
+        if (css) {
+            this.setStyle(css);
+        }
+
+        const {id, depth, parentFrameId} = popupInfo;
+        this.optionsContext.depth = depth;
+        this.optionsContext.url = url;
+        popupNestedInitialize(id, depth, parentFrameId, url);
+    }
+
     setStyle(css) {
         const parent = document.head;
 
@@ -146,4 +123,22 @@ class DisplayFloat extends Display {
     }
 }
 
+DisplayFloat.onKeyDownHandlers = {
+    'C': (self, e) => {
+        if (e.ctrlKey && !window.getSelection().toString()) {
+            self.onSelectionCopy();
+            return true;
+        }
+        return false;
+    }
+};
+
+DisplayFloat.messageHandlers = {
+    termsShow: (self, {definitions, options, context}) => self.termsShow(definitions, options, context),
+    kanjiShow: (self, {definitions, options, context}) => self.kanjiShow(definitions, options, context),
+    clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
+    orphaned: (self) => self.onOrphaned(),
+    initialize: (self, {options, popupInfo, url}) => self.initialize(options, popupInfo, url)
+};
+
 window.yomichan_display = new DisplayFloat();
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 3292cac4..58dc0e4a 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -55,7 +55,7 @@ class Frontend {
         try {
             this.options = await apiOptionsGet(this.getOptionsContext());
 
-            window.addEventListener('message', this.onFrameMessage.bind(this));
+            window.addEventListener('message', this.onWindowMessage.bind(this));
             window.addEventListener('mousedown', this.onMouseDown.bind(this));
             window.addEventListener('mousemove', this.onMouseMove.bind(this));
             window.addEventListener('mouseover', this.onMouseOver.bind(this));
@@ -71,7 +71,7 @@ class Frontend {
                 window.addEventListener('contextmenu', this.onContextMenu.bind(this));
             }
 
-            chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
+            chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
         } catch (e) {
             this.onError(e);
         }
@@ -135,20 +135,12 @@ class Frontend {
         this.popupTimerClear();
     }
 
-    onFrameMessage(e) {
-        const handlers = {
-            popupClose: () => {
-                this.searchClear(true);
-            },
-
-            selectionCopy: () => {
-                document.execCommand('copy');
-            }
-        };
-
-        const handler = handlers[e.data];
-        if (handler) {
-            handler();
+    onWindowMessage(e) {
+        const action = e.data;
+        const handlers = Frontend.windowMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this);
         }
     }
 
@@ -240,20 +232,11 @@ class Frontend {
         this.contextMenuChecking = false;
     }
 
-    onBgMessage({action, params}, sender, callback) {
-        const handlers = {
-            optionsUpdate: () => {
-                this.updateOptions();
-            },
-
-            popupSetVisible: ({visible}) => {
-                this.popup.setVisible(visible);
-            }
-        };
-
-        const handler = handlers[action];
-        if (handler) {
-            handler(params);
+    onRuntimeMessage({action, params}, sender, callback) {
+        const handlers = Frontend.runtimeMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
             callback();
         }
     }
@@ -529,4 +512,25 @@ class Frontend {
     }
 }
 
+Frontend.windowMessageHandlers = {
+    popupClose: (self) => {
+        self.searchClear(true);
+    },
+
+    selectionCopy: () => {
+        document.execCommand('copy');
+    }
+};
+
+Frontend.runtimeMessageHandlers = {
+    optionsUpdate: (self) => {
+        self.updateOptions();
+    },
+
+    popupSetVisible: (self, {visible}) => {
+        self.popup.setVisible(visible);
+    }
+};
+
+
 window.yomichan_frontend = Frontend.create();
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 64da9aef..9dff6f28 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -56,17 +56,19 @@ class Popup {
         return new Promise((resolve) => {
             const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
             this.container.addEventListener('load', () => {
-                this.invokeApi('popupNestedInitialize', {
-                    id: this.id,
-                    depth: this.depth,
-                    parentFrameId,
+                this.invokeApi('initialize', {
+                    options: {
+                        general: {
+                            customPopupCss: options.general.customPopupCss
+                        }
+                    },
+                    popupInfo: {
+                        id: this.id,
+                        depth: this.depth,
+                        parentFrameId
+                    },
                     url: this.url
                 });
-                this.invokeApi('setOptions', {
-                    general: {
-                        customPopupCss: options.general.customPopupCss
-                    }
-                });
                 resolve();
             });
             this.observeFullscreen();