From 93eaee9765c7478ee5ad7485d664b86acf3d4510 Mon Sep 17 00:00:00 2001 From: siikamiika Date: Thu, 13 Feb 2020 01:43:01 +0200 Subject: [PATCH 1/7] simplify DisplayGenerator initialization --- ext/mixed/js/display-generator.js | 26 ++++---------------------- ext/mixed/js/display.js | 11 +++-------- 2 files changed, 7 insertions(+), 30 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index d5ab9dbc..ee3ac4cf 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -19,9 +19,6 @@ class DisplayGenerator { constructor() { - this._isInitialized = false; - this._initializationPromise = null; - this._termEntryTemplate = null; this._termExpressionTemplate = null; this._termDefinitionItemTemplate = null; @@ -40,18 +37,10 @@ class DisplayGenerator { this._tagFrequencyTemplate = null; } - isInitialized() { - return this._isInitialized; - } - - initialize() { - if (this._isInitialized) { - return Promise.resolve(); - } - if (this._initializationPromise === null) { - this._initializationPromise = this._initializeInternal(); - } - return this._initializationPromise; + async prepare() { + const html = await apiGetDisplayTemplatesHtml(); + const doc = new DOMParser().parseFromString(html, 'text/html'); + this._setTemplates(doc); } createTermEntry(details) { @@ -303,13 +292,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'); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index a6cfe848..cee63d9b 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -243,6 +243,7 @@ class Display { } async initialize(options=null) { + await this.displayGenerator.prepare(); await this.updateOptions(options); yomichan.on('optionsUpdate', () => this.updateOptions(null)); } @@ -365,10 +366,7 @@ class Display { window.focus(); } - if (!this.displayGenerator.isInitialized()) { - await this.displayGenerator.initialize(); - if (this.setContentToken !== token) { return; } - } + if (this.setContentToken !== token) { return; } this.definitions = definitions; if (context.disableHistory) { @@ -429,10 +427,7 @@ class Display { window.focus(); } - if (!this.displayGenerator.isInitialized()) { - await this.displayGenerator.initialize(); - if (this.setContentToken !== token) { return; } - } + if (this.setContentToken !== token) { return; } this.definitions = definitions; if (context.disableHistory) { From df37acd17f9459c17185552f11dc4cc424e01958 Mon Sep 17 00:00:00 2001 From: siikamiika Date: Thu, 13 Feb 2020 01:59:26 +0200 Subject: [PATCH 2/7] rename display initialize methods to prepare --- ext/bg/js/search.js | 2 +- ext/fg/js/float.js | 30 +++++++++++++++--------------- ext/mixed/js/display.js | 24 ++++++++++++------------ 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 6641255f..86ed675a 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -47,7 +47,7 @@ class DisplaySearch extends Display { async prepare() { try { - await this.initialize(); + await super.prepare(); await this.queryParser.prepare(); diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 8d61d8f6..3766d5a4 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -33,6 +33,20 @@ 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); + } + onError(error) { if (this._orphaned) { this.setContent('orphaned'); @@ -92,20 +106,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([ @@ -122,7 +122,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)] ]); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index cee63d9b..8dea625d 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -43,6 +43,16 @@ class Display { this.setInteractive(true); } + async prepare(options=null) { + await this.displayGenerator.prepare(); + await this.updateOptions(options); + yomichan.on('optionsUpdate', () => this.updateOptions(null)); + } + + isPrepared() { + return this.options !== null; + } + onError(_error) { throw new Error('Override me'); } @@ -238,16 +248,6 @@ class Display { throw new Error('Override me'); } - isInitialized() { - return this.options !== null; - } - - async initialize(options=null) { - await this.displayGenerator.prepare(); - 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); @@ -358,7 +358,7 @@ class Display { async setContentTerms(definitions, context, token) { if (!context) { throw new Error('Context expected'); } - if (!this.isInitialized()) { return; } + if (!this.isPrepared()) { return; } this.setEventListenersActive(false); @@ -419,7 +419,7 @@ class Display { async setContentKanji(definitions, context, token) { if (!context) { throw new Error('Context expected'); } - if (!this.isInitialized()) { return; } + if (!this.isPrepared()) { return; } this.setEventListenersActive(false); From c0225f1f844376e5f61222a4d8186a2c914026eb Mon Sep 17 00:00:00 2001 From: siikamiika Date: Thu, 13 Feb 2020 13:18:54 +0200 Subject: [PATCH 3/7] notify popup about initialization --- ext/fg/js/float.js | 2 ++ ext/fg/js/popup.js | 20 +++++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 3766d5a4..8871160f 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -45,6 +45,8 @@ class DisplayFloat extends Display { } this.setContentScale(scale); + + window.parent.postMessage('initialized', '*'); } onError(error) { diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index e7dae93e..6cfe49e5 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -45,6 +45,8 @@ class Popup { this._container.style.height = '0px'; this._updateVisibility(); + + window.addEventListener('message', (e) => this.onMessage(e), false); } // Public properties @@ -129,6 +131,18 @@ class Popup { } } + onMessage(e) { + const action = e.data; + const handler = Popup._windowMessageHandlers.get(action); + if (typeof handler !== 'function') { return; } + + handler(this); + } + + setInitialized() { + throw new Error('Override me'); + } + // Popup-only public functions setParent(parent) { @@ -237,7 +251,7 @@ class Popup { childrenSupported: this._childrenSupported, scale: this._contentScale }); - resolve(); + this.setInitialized = resolve; }); this._observeFullscreen(); this._onFullscreenChanged(); @@ -535,4 +549,8 @@ class Popup { } } +Popup._windowMessageHandlers = new Map([ + ['initialized', (self) => self.setInitialized()] +]); + Popup.outerStylesheet = null; From 8abab28c4db4bae6e1bce003fc228d26e0458c78 Mon Sep 17 00:00:00 2001 From: siikamiika Date: Thu, 13 Feb 2020 14:36:32 +0200 Subject: [PATCH 4/7] remove isPrepared check --- ext/mixed/js/display.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 8dea625d..b524fe34 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -49,10 +49,6 @@ class Display { yomichan.on('optionsUpdate', () => this.updateOptions(null)); } - isPrepared() { - return this.options !== null; - } - onError(_error) { throw new Error('Override me'); } @@ -358,7 +354,6 @@ class Display { async setContentTerms(definitions, context, token) { if (!context) { throw new Error('Context expected'); } - if (!this.isPrepared()) { return; } this.setEventListenersActive(false); @@ -419,7 +414,6 @@ class Display { async setContentKanji(definitions, context, token) { if (!context) { throw new Error('Context expected'); } - if (!this.isPrepared()) { return; } this.setEventListenersActive(false); From 38a6433a46a4259666864a57c5adbd58cb59db86 Mon Sep 17 00:00:00 2001 From: siikamiika Date: Thu, 13 Feb 2020 15:04:10 +0200 Subject: [PATCH 5/7] remove isInjected checks from Popup --- ext/fg/js/popup.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 6cfe49e5..ad4e5181 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -27,8 +27,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; @@ -119,16 +117,12 @@ 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}); } onMessage(e) { @@ -160,7 +154,7 @@ class Popup { } isVisibleSync() { - return this._isInjected && (this._visibleOverride !== null ? this._visibleOverride : this._visible); + return (this._visibleOverride !== null ? this._visibleOverride : this._visible); } updateTheme() { @@ -239,7 +233,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: { @@ -256,7 +249,6 @@ class Popup { this._observeFullscreen(); this._onFullscreenChanged(); this.setCustomOuterCss(this._options.general.customPopupOuterCss, false); - this._isInjected = true; }); } @@ -341,10 +333,9 @@ class Popup { } _invokeApi(action, params={}) { - if (!this._isInjectedAndLoaded) { - throw new Error('Frame not loaded'); + if (this._container.contentWindow) { + this._container.contentWindow.postMessage({action, params}, '*'); } - this._container.contentWindow.postMessage({action, params}, '*'); } _observeFullscreen() { From d7e1ef01d8af4a315a31364eb5138e24a132ea1e Mon Sep 17 00:00:00 2001 From: siikamiika Date: Thu, 13 Feb 2020 16:26:45 +0200 Subject: [PATCH 6/7] use Promise.all to await dependencies --- ext/bg/js/search.js | 6 +++--- ext/mixed/js/display.js | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 86ed675a..bb27205c 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -47,9 +47,9 @@ class DisplaySearch extends Display { async prepare() { try { - await super.prepare(); - - await this.queryParser.prepare(); + const superPromise = super.prepare(); + const queryParserPromise = this.queryParser.prepare(); + await Promise.all([superPromise, queryParserPromise]); const {queryParams: {query='', mode=''}} = parseUrl(window.location.href); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index b524fe34..d49c205e 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -44,8 +44,9 @@ class Display { } async prepare(options=null) { - await this.displayGenerator.prepare(); - await this.updateOptions(options); + const displayGeneratorPromise = this.displayGenerator.prepare(); + const updateOptionsPromise = this.updateOptions(options); + await Promise.all([displayGeneratorPromise, updateOptionsPromise]); yomichan.on('optionsUpdate', () => this.updateOptions(null)); } From 810a7e7d92d15412974810702d954de60453dd31 Mon Sep 17 00:00:00 2001 From: siikamiika Date: Fri, 14 Feb 2020 02:33:54 +0200 Subject: [PATCH 7/7] use sendMessage to notify about initialization --- ext/fg/js/float.js | 2 +- ext/fg/js/frontend.js | 3 ++- ext/fg/js/popup-proxy-host.js | 8 +++++++- ext/fg/js/popup-proxy.js | 5 +++++ ext/fg/js/popup.js | 18 ++---------------- 5 files changed, 17 insertions(+), 19 deletions(-) diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 8871160f..b42ab8ee 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -46,7 +46,7 @@ class DisplayFloat extends Display { this.setContentScale(scale); - window.parent.postMessage('initialized', '*'); + apiForward('popupSetDisplayInitialized'); } onError(error) { diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 2286bf19..571bbf91 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -243,5 +243,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(); }] ]); diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js index 427172c6..8ea70857 100644 --- a/ext/fg/js/popup-proxy-host.js +++ b/ext/fg/js/popup-proxy-host.js @@ -42,7 +42,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)] ])); } @@ -103,6 +104,11 @@ 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 63aa6bbe..f1743064 100644 --- a/ext/fg/js/popup-proxy.js +++ b/ext/fg/js/popup-proxy.js @@ -102,6 +102,11 @@ 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 ad4e5181..b8233cc2 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -43,8 +43,6 @@ class Popup { this._container.style.height = '0px'; this._updateVisibility(); - - window.addEventListener('message', (e) => this.onMessage(e), false); } // Public properties @@ -125,15 +123,7 @@ class Popup { this._invokeApi('setContentScale', {scale}); } - onMessage(e) { - const action = e.data; - const handler = Popup._windowMessageHandlers.get(action); - if (typeof handler !== 'function') { return; } - - handler(this); - } - - setInitialized() { + setDisplayInitialized() { throw new Error('Override me'); } @@ -244,7 +234,7 @@ class Popup { childrenSupported: this._childrenSupported, scale: this._contentScale }); - this.setInitialized = resolve; + this.setDisplayInitialized = resolve; }); this._observeFullscreen(); this._onFullscreenChanged(); @@ -540,8 +530,4 @@ class Popup { } } -Popup._windowMessageHandlers = new Map([ - ['initialized', (self) => self.setInitialized()] -]); - Popup.outerStylesheet = null;