Update Display initialization process

ext/bg/js/search.js

@@ -33,23 +33,37 @@ class DisplaySearch extends Display {
         this.introAnimationTimer = null;
 
         this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
+    }
 
-        if (this.search !== null) {
+    static create() {
-            this.search.addEventListener('click', (e) => this.onSearch(e), false);
+        const instance = new DisplaySearch();
-        }
+        instance.prepare();
-        if (this.query !== null) {
+        return instance;
-            this.query.addEventListener('input', () => this.onSearchInput(), false);
+    }
 
-            const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
+    async prepare() {
-            if (query !== null) {
+        try {
-                this.query.value = window.wanakana.toKana(query);
+            await this.initialize();
-                this.onSearchQueryUpdated(query, false);
+
+            if (this.search !== null) {
+                this.search.addEventListener('click', (e) => this.onSearch(e), false);
+            }
+            if (this.query !== null) {
+                this.query.addEventListener('input', () => this.onSearchInput(), false);
+
+                const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
+                if (query !== null) {
+                    this.query.value = window.wanakana.toKana(query);
+                    this.onSearchQueryUpdated(query, false);
+                }
+
+                window.wanakana.bind(this.query);
             }
 
-            window.wanakana.bind(this.query);
+            this.updateSearchButton();
+        } catch (e) {
+            this.onError(e);
         }
-
-        this.updateSearchButton();
     }
 
     onError(error) {
@@ -89,7 +103,7 @@ class DisplaySearch extends Display {
             this.updateSearchButton();
             if (valid) {
                 const {definitions} = await apiTermsFind(query, this.optionsContext);
-                this.termsShow(definitions, await apiOptionsGet(this.optionsContext));
+                this.termsShow(definitions, this.options);
             } else {
                 this.container.textContent = '';
             }
@@ -98,6 +112,10 @@ class DisplaySearch extends Display {
         }
     }
 
+    getOptionsContext() {
+        return this.optionsContext;
+    }
+
     setIntroVisible(visible, animate) {
         if (this.introVisible === visible) {
             return;
@@ -164,4 +182,4 @@ class DisplaySearch extends Display {
     }
 }
 
-window.yomichan_search = new DisplaySearch();
+window.yomichan_search = DisplaySearch.create();

ext/fg/js/float.js

@@ -84,6 +84,10 @@ class DisplayFloat extends Display {
         super.onKeyDown(e);
     }
 
+    getOptionsContext() {
+        return this.optionsContext;
+    }
+
     autoPlayAudio() {
         this.clearAutoPlayTimer();
         this.autoPlayAudioTimer = window.setTimeout(() => super.autoPlayAudio(), 400);
@@ -96,7 +100,9 @@ class DisplayFloat extends Display {
         }
     }
 
-    initialize(options, popupInfo, url, childrenSupported) {
+    async initialize(options, popupInfo, url, childrenSupported) {
+        await super.initialize(options);
+
         const css = options.general.customPopupCss;
         if (css) {
             this.setStyle(css);

ext/fg/js/popup.js

@@ -61,11 +61,7 @@ class Popup {
             const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
             this.container.addEventListener('load', () => {
                 this.invokeApi('initialize', {
-                    options: {
+                    options: options,
-                        general: {
-                            customPopupCss: options.general.customPopupCss
-                        }
-                    },
                     popupInfo: {
                         id: this.id,
                         depth: this.depth,

ext/mixed/js/display.js

@@ -29,7 +29,6 @@ class Display {
         this.audioPlaying = null;
         this.audioFallback = null;
         this.audioCache = {};
-        this.optionsContext = {};
 
         this.eventListeners = [];
         this.persistentEventListeners = [];
@@ -76,7 +75,7 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            const kanjiDefs = await apiKanjiFind(link.textContent, this.optionsContext);
+            const kanjiDefs = await apiKanjiFind(link.textContent, this.getOptionsContext());
             this.kanjiShow(kanjiDefs, this.options, context);
         } catch (e) {
             this.onError(e);
@@ -99,7 +98,7 @@ class Display {
             try {
                 textSource.setEndOffset(this.options.scanning.length);
 
-                ({definitions, length} = await apiTermsFind(textSource.text(), this.optionsContext));
+                ({definitions, length} = await apiTermsFind(textSource.text(), this.getOptionsContext()));
                 if (definitions.length === 0) {
                     return false;
                 }
@@ -175,6 +174,28 @@ class Display {
         }
     }
 
+    onRuntimeMessage({action, params}, sender, callback) {
+        const handlers = Display.runtimeMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
+            callback();
+        }
+    }
+
+    getOptionsContext() {
+        throw new Error('Override me');
+    }
+
+    async initialize(options=null) {
+        await this.updateOptions(options);
+        chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+    }
+
+    async updateOptions(options) {
+        this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
+    }
+
     setInteractive(interactive) {
         interactive = !!interactive;
         if (this.interactive === interactive) { return; }
@@ -314,7 +335,7 @@ class Display {
 
     async adderButtonUpdate(modes, sequence) {
         try {
-            const states = await apiDefinitionsAddable(this.definitions, modes, this.optionsContext);
+            const states = await apiDefinitionsAddable(this.definitions, modes, this.getOptionsContext());
             if (!states || sequence !== this.sequence) {
                 return;
             }
@@ -416,7 +437,7 @@ class Display {
                 }
             }
 
-            const noteId = await apiDefinitionAdd(definition, mode, context, this.optionsContext);
+            const noteId = await apiDefinitionAdd(definition, mode, context, this.getOptionsContext());
             if (noteId) {
                 const index = this.definitions.indexOf(definition);
                 const adderButton = this.adderButtonFind(index, mode);
@@ -446,7 +467,7 @@ class Display {
             }
 
             const sources = this.options.audio.sources;
-            let {audio, source} = await audioGetFromSources(expression, sources, this.optionsContext, true, this.audioCache);
+            let {audio, source} = await audioGetFromSources(expression, sources, this.getOptionsContext(), true, this.audioCache);
             let info;
             if (audio === null) {
                 if (this.audioFallback === null) {
@@ -706,3 +727,7 @@ Display.onKeyDownHandlers = {
         return false;
     }
 };
+
+Display.runtimeMessageHandlers = {
+    optionsUpdate: (self) => self.updateOptions(null)
+};