Merge pull request #357 from siikamiika/simplify-display-prepare

Simplify display prepare

ext/bg/js/search.js

@@ -49,9 +49,9 @@ class DisplaySearch extends Display {
 
     async prepare() {
         try {
-            await this.initialize();
+            const superPromise = super.prepare();
-
+            const queryParserPromise = this.queryParser.prepare();
-            await this.queryParser.prepare();
+            await Promise.all([superPromise, queryParserPromise]);
 
             const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
 

ext/fg/js/float.js

@@ -34,6 +34,22 @@ class DisplayFloat extends Display {
         window.addEventListener('message', (e) => this.onMessage(e), false);
     }
 
+    async prepare(options, popupInfo, url, childrenSupported, scale) {
+        await super.prepare(options);
+
+        const {id, depth, parentFrameId} = popupInfo;
+        this.optionsContext.depth = depth;
+        this.optionsContext.url = url;
+
+        if (childrenSupported) {
+            popupNestedInitialize(id, depth, parentFrameId, url);
+        }
+
+        this.setContentScale(scale);
+
+        apiForward('popupSetDisplayInitialized');
+    }
+
     onError(error) {
         if (this._orphaned) {
             this.setContent('orphaned');
@@ -93,20 +109,6 @@ class DisplayFloat extends Display {
     setContentScale(scale) {
         document.body.style.fontSize = `${scale}em`;
     }
-
-    async initialize(options, popupInfo, url, childrenSupported, scale) {
-        await super.initialize(options);
-
-        const {id, depth, parentFrameId} = popupInfo;
-        this.optionsContext.depth = depth;
-        this.optionsContext.url = url;
-
-        if (childrenSupported) {
-            popupNestedInitialize(id, depth, parentFrameId, url);
-        }
-
-        this.setContentScale(scale);
-    }
 }
 
 DisplayFloat._onKeyDownHandlers = new Map([
@@ -123,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.initialize(options, popupInfo, url, childrenSupported, scale)],
+    ['initialize', (self, {options, popupInfo, url, childrenSupported, scale}) => self.prepare(options, popupInfo, url, childrenSupported, scale)],
     ['setContentScale', (self, {scale}) => self.setContentScale(scale)]
 ]);
 

ext/fg/js/frontend.js

@@ -244,5 +244,6 @@ Frontend._windowMessageHandlers = new Map([
 ]);
 
 Frontend._runtimeMessageHandlers = new Map([
-    ['popupSetVisibleOverride', (self, {visible}) => { self.popup.setVisibleOverride(visible); }]
+    ['popupSetVisibleOverride', (self, {visible}) => { self.popup.setVisibleOverride(visible); }],
+    ['popupSetDisplayInitialized', (self) => { self.popup.setDisplayInitialized(); }]
 ]);

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

@@ -43,7 +43,8 @@ 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)]
+            ['setContentScale', ({id, scale}) => this._onApiSetContentScale(id, scale)],
+            ['setDisplayInitialized', ({id}) => this._onApiSetDisplayInitialized(id)]
         ]));
     }
 
@@ -104,6 +105,11 @@ class PopupProxyHost {
         return popup.setContentScale(scale);
     }
 
+    async _onApiSetDisplayInitialized(id) {
+        const popup = this._getPopup(id);
+        return popup.setDisplayInitialized();
+    }
+
     // Private functions
 
     _createPopupInternal(parentId, depth) {

ext/fg/js/popup-proxy.js

@@ -103,6 +103,11 @@ class PopupProxy {
         this._invokeHostApi('setContentScale', {id, scale});
     }
 
+    async setDisplayInitialized() {
+        const id = await this._getPopupId();
+        this._invokeHostApi('setDisplayInitialized', {id});
+    }
+
     // Private
 
     _getPopupId() {

ext/fg/js/popup.js

@@ -28,8 +28,6 @@ class Popup {
         this._child = null;
         this._childrenSupported = true;
         this._injectPromise = null;
-        this._isInjected = false;
-        this._isInjectedAndLoaded = false;
         this._visible = false;
         this._visibleOverride = null;
         this._options = null;
@@ -118,16 +116,16 @@ class Popup {
     }
 
     clearAutoPlayTimer() {
-        if (this._isInjectedAndLoaded) {
+        this._invokeApi('clearAutoPlayTimer');
-            this._invokeApi('clearAutoPlayTimer');
-        }
     }
 
     setContentScale(scale) {
         this._contentScale = scale;
-        if (this._isInjectedAndLoaded) {
+        this._invokeApi('setContentScale', {scale});
-            this._invokeApi('setContentScale', {scale});
+    }
-        }
+
+    setDisplayInitialized() {
+        throw new Error('Override me');
     }
 
     // Popup-only public functions
@@ -147,7 +145,7 @@ class Popup {
     }
 
     isVisibleSync() {
-        return this._isInjected && (this._visibleOverride !== null ? this._visibleOverride : this._visible);
+        return (this._visibleOverride !== null ? this._visibleOverride : this._visible);
     }
 
     updateTheme() {
@@ -226,7 +224,6 @@ class Popup {
         return new Promise((resolve) => {
             const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null);
             this._container.addEventListener('load', () => {
-                this._isInjectedAndLoaded = true;
                 this._invokeApi('initialize', {
                     options: this._options,
                     popupInfo: {
@@ -238,12 +235,11 @@ class Popup {
                     childrenSupported: this._childrenSupported,
                     scale: this._contentScale
                 });
-                resolve();
+                this.setDisplayInitialized = resolve;
             });
             this._observeFullscreen();
             this._onFullscreenChanged();
             this.setCustomOuterCss(this._options.general.customPopupOuterCss, false);
-            this._isInjected = true;
         });
     }
 
@@ -328,10 +324,9 @@ class Popup {
     }
 
     _invokeApi(action, params={}) {
-        if (!this._isInjectedAndLoaded) {
+        if (this._container.contentWindow) {
-            throw new Error('Frame not loaded');
+            this._container.contentWindow.postMessage({action, params}, '*');
         }
-        this._container.contentWindow.postMessage({action, params}, '*');
     }
 
     _observeFullscreen() {

ext/mixed/js/display-generator.js

@@ -20,9 +20,6 @@
 
 class DisplayGenerator {
     constructor() {
-        this._isInitialized = false;
-        this._initializationPromise = null;
-
         this._termEntryTemplate = null;
         this._termExpressionTemplate = null;
         this._termDefinitionItemTemplate = null;
@@ -41,18 +38,10 @@ class DisplayGenerator {
         this._tagFrequencyTemplate = null;
     }
 
-    isInitialized() {
+    async prepare() {
-        return this._isInitialized;
+        const html = await apiGetDisplayTemplatesHtml();
-    }
+        const doc = new DOMParser().parseFromString(html, 'text/html');
-
+        this._setTemplates(doc);
-    initialize() {
-        if (this._isInitialized) {
-            return Promise.resolve();
-        }
-        if (this._initializationPromise === null) {
-            this._initializationPromise = this._initializeInternal();
-        }
-        return this._initializationPromise;
     }
 
     createTermEntry(details) {
@@ -304,13 +293,6 @@ class DisplayGenerator {
         return node;
     }
 
-    async _initializeInternal() {
-        const html = await apiGetDisplayTemplatesHtml();
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        this._setTemplates(doc);
-        this._isInitialized = true;
-    }
-
     _setTemplates(doc) {
         this._termEntryTemplate = doc.querySelector('#term-entry-template');
         this._termExpressionTemplate = doc.querySelector('#term-expression-template');

ext/mixed/js/display.js

@@ -48,6 +48,13 @@ class Display {
         this.setInteractive(true);
     }
 
+    async prepare(options=null) {
+        const displayGeneratorPromise = this.displayGenerator.prepare();
+        const updateOptionsPromise = this.updateOptions(options);
+        await Promise.all([displayGeneratorPromise, updateOptionsPromise]);
+        yomichan.on('optionsUpdate', () => this.updateOptions(null));
+    }
+
     onError(_error) {
         throw new Error('Override me');
     }
@@ -243,15 +250,6 @@ class Display {
         throw new Error('Override me');
     }
 
-    isInitialized() {
-        return this.options !== null;
-    }
-
-    async initialize(options=null) {
-        await this.updateOptions(options);
-        yomichan.on('optionsUpdate', () => this.updateOptions(null));
-    }
-
     async updateOptions(options) {
         this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
         this.updateDocumentOptions(this.options);
@@ -362,7 +360,6 @@ class Display {
 
     async setContentTerms(definitions, context, token) {
         if (!context) { throw new Error('Context expected'); }
-        if (!this.isInitialized()) { return; }
 
         this.setEventListenersActive(false);
 
@@ -370,10 +367,7 @@ class Display {
             window.focus();
         }
 
-        if (!this.displayGenerator.isInitialized()) {
+        if (this.setContentToken !== token) { return; }
-            await this.displayGenerator.initialize();
-            if (this.setContentToken !== token) { return; }
-        }
 
         this.definitions = definitions;
         if (context.disableHistory) {
@@ -426,7 +420,6 @@ class Display {
 
     async setContentKanji(definitions, context, token) {
         if (!context) { throw new Error('Context expected'); }
-        if (!this.isInitialized()) { return; }
 
         this.setEventListenersActive(false);
 
@@ -434,10 +427,7 @@ class Display {
             window.focus();
         }
 
-        if (!this.displayGenerator.isInitialized()) {
+        if (this.setContentToken !== token) { return; }
-            await this.displayGenerator.initialize();
-            if (this.setContentToken !== token) { return; }
-        }
 
         this.definitions = definitions;
         if (context.disableHistory) {