Frontend initialization refactor (#610)

* Create member functions for ignoreElements and ignorePoint

* Create addFullscreenChangeEventListener utility

* Move popup creation management into Frontend

* Move getUrl implementation

* Remove old setup

* Remove try/catch block

* Error wrap

* Add prepare call to TextScanner

* Update depth when popup changes

* Refactor how Frontend gets PopupFactory and frameId

* Update popup preview to work

* Update popup preview frame to use the frontend's popup

* Update how nested popups are set up

* Error wrap

* Update how popups are set up on the search page

* Error wrap

* Error unwrap

* Add missing prepare

* Remove use of frontendInitializationData

* Catch and log errors

6 files changed, 137 insertions, 92 deletions

diff --git a/ext/bg/js/search-main.js b/ext/bg/js/search-main.js
index f18d6d88..13bd8767 100644
--- a/ext/bg/js/search-main.js
+++ b/ext/bg/js/search-main.js
@@ -18,42 +18,16 @@
 /* global
  * DisplaySearch
  * api
- * dynamicLoader
  */
 
-async function injectSearchFrontend() {
-    await dynamicLoader.loadScripts([
-        '/mixed/js/text-scanner.js',
-        '/fg/js/frame-offset-forwarder.js',
-        '/fg/js/popup.js',
-        '/fg/js/popup-factory.js',
-        '/fg/js/frontend.js',
-        '/fg/js/content-script-main.js'
-    ]);
-}
-
 (async () => {
-    api.forwardLogsToBackend();
-    await yomichan.prepare();
-
-    const displaySearch = new DisplaySearch();
-    await displaySearch.prepare();
-
-    let optionsApplied = false;
-
-    const applyOptions = async () => {
-        const optionsContext = {depth: 0, url: window.location.href};
-        const options = await api.optionsGet(optionsContext);
-        if (!options.scanning.enableOnSearchPage || optionsApplied) { return; }
-
-        optionsApplied = true;
-        yomichan.off('optionsUpdated', applyOptions);
-
-        window.frontendInitializationData = {depth: 1, proxy: false, isSearchPage: true};
-        await injectSearchFrontend();
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-
-    await applyOptions();
+    try {
+        api.forwardLogsToBackend();
+        await yomichan.prepare();
+
+        const displaySearch = new DisplaySearch();
+        await displaySearch.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();
diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
index 97e98b40..86524b66 100644
--- a/ext/bg/js/search-query-parser.js
+++ b/ext/bg/js/search-query-parser.js
@@ -42,6 +42,7 @@ class QueryParser {
 
     async prepare() {
         await this._queryParserGenerator.prepare();
+        this._textScanner.prepare();
         this._queryParser.addEventListener('click', this._onClick.bind(this));
     }
 
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 08c02624..88be335f 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -19,8 +19,11 @@
  * ClipboardMonitor
  * DOM
  * Display
+ * Frontend
+ * PopupFactory
  * QueryParser
  * api
+ * dynamicLoader
  * wanakana
  */
 
@@ -73,51 +76,49 @@ class DisplaySearch extends Display {
     }
 
     async prepare() {
-        try {
-            await super.prepare();
-            await this.updateOptions();
-            yomichan.on('optionsUpdated', () => this.updateOptions());
-            await this.queryParser.prepare();
+        await super.prepare();
+        await this.updateOptions();
+        yomichan.on('optionsUpdated', () => this.updateOptions());
+        await this.queryParser.prepare();
+
+        const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
+
+        document.documentElement.dataset.searchMode = mode;
 
-            const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
+        if (this.options.general.enableWanakana === true) {
+            this.wanakanaEnable.checked = true;
+            wanakana.bind(this.query);
+        } else {
+            this.wanakanaEnable.checked = false;
+        }
 
-            document.documentElement.dataset.searchMode = mode;
+        this.setQuery(query);
+        this.onSearchQueryUpdated(this.query.value, false);
 
-            if (this.options.general.enableWanakana === true) {
-                this.wanakanaEnable.checked = true;
-                wanakana.bind(this.query);
+        if (mode !== 'popup') {
+            if (this.options.general.enableClipboardMonitor === true) {
+                this.clipboardMonitorEnable.checked = true;
+                this.clipboardMonitor.start();
             } else {
-                this.wanakanaEnable.checked = false;
+                this.clipboardMonitorEnable.checked = false;
             }
+            this.clipboardMonitorEnable.addEventListener('change', this.onClipboardMonitorEnableChange.bind(this));
+        }
 
-            this.setQuery(query);
-            this.onSearchQueryUpdated(this.query.value, false);
-
-            if (mode !== 'popup') {
-                if (this.options.general.enableClipboardMonitor === true) {
-                    this.clipboardMonitorEnable.checked = true;
-                    this.clipboardMonitor.start();
-                } else {
-                    this.clipboardMonitorEnable.checked = false;
-                }
-                this.clipboardMonitorEnable.addEventListener('change', this.onClipboardMonitorEnableChange.bind(this));
-            }
+        chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
 
-            chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+        this.search.addEventListener('click', this.onSearch.bind(this), false);
+        this.query.addEventListener('input', this.onSearchInput.bind(this), false);
+        this.wanakanaEnable.addEventListener('change', this.onWanakanaEnableChange.bind(this));
+        window.addEventListener('popstate', this.onPopState.bind(this));
+        window.addEventListener('copy', this.onCopy.bind(this));
+        this.clipboardMonitor.on('change', this.onExternalSearchUpdate.bind(this));
 
-            this.search.addEventListener('click', this.onSearch.bind(this), false);
-            this.query.addEventListener('input', this.onSearchInput.bind(this), false);
-            this.wanakanaEnable.addEventListener('change', this.onWanakanaEnableChange.bind(this));
-            window.addEventListener('popstate', this.onPopState.bind(this));
-            window.addEventListener('copy', this.onCopy.bind(this));
-            this.clipboardMonitor.on('change', this.onExternalSearchUpdate.bind(this));
+        this.updateSearchButton();
 
-            this.updateSearchButton();
+        await this._prepareNestedPopups();
 
-            this._isPrepared = true;
-        } catch (e) {
-            this.onError(e);
-        }
+        this._isPrepared = true;
     }
 
     onError(error) {
@@ -401,4 +402,53 @@ class DisplaySearch extends Display {
             document.title = `${text} - Yomichan Search`;
         }
     }
+
+    async _prepareNestedPopups() {
+        let complete = false;
+
+        const onOptionsUpdated = async () => {
+            const optionsContext = this.getOptionsContext();
+            const options = await api.optionsGet(optionsContext);
+            if (!options.scanning.enableOnSearchPage || complete) { return; }
+
+            complete = true;
+            yomichan.off('optionsUpdated', onOptionsUpdated);
+
+            try {
+                await this._setupNestedPopups();
+            } catch (e) {
+                yomichan.logError(e);
+            }
+        };
+
+        yomichan.on('optionsUpdated', onOptionsUpdated);
+
+        await onOptionsUpdated();
+    }
+
+    async _setupNestedPopups() {
+        await dynamicLoader.loadScripts([
+            '/mixed/js/text-scanner.js',
+            '/fg/js/frame-offset-forwarder.js',
+            '/fg/js/popup.js',
+            '/fg/js/popup-factory.js',
+            '/fg/js/frontend.js'
+        ]);
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {
+                depth: 1,
+                proxy: false,
+                isSearchPage: true
+            }
+        );
+        await frontend.prepare();
+    }
 }
diff --git a/ext/bg/js/settings/popup-preview-frame-main.js b/ext/bg/js/settings/popup-preview-frame-main.js
index 7c4e2eb9..4c6096ec 100644
--- a/ext/bg/js/settings/popup-preview-frame-main.js
+++ b/ext/bg/js/settings/popup-preview-frame-main.js
@@ -16,12 +16,23 @@
  */
 
 /* global
+ * PopupFactory
  * PopupPreviewFrame
  * api
  */
 
 (async () => {
-    api.forwardLogsToBackend();
-    const preview = new PopupPreviewFrame();
-    await preview.prepare();
+    try {
+        api.forwardLogsToBackend();
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const preview = new PopupPreviewFrame(frameId, popupFactory);
+        await preview.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();
diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js
index 21fee7ee..98630503 100644
--- a/ext/bg/js/settings/popup-preview-frame.js
+++ b/ext/bg/js/settings/popup-preview-frame.js
@@ -18,17 +18,17 @@
 /* global
  * Frontend
  * Popup
- * PopupFactory
  * TextSourceRange
  * api
  */
 
 class PopupPreviewFrame {
-    constructor() {
+    constructor(frameId, popupFactory) {
+        this._frameId = frameId;
+        this._popupFactory = popupFactory;
         this._frontend = null;
         this._frontendGetOptionsContextOld = null;
         this._apiOptionsGetOld = null;
-        this._popup = null;
         this._popupSetCustomOuterCssOld = null;
         this._popupShown = false;
         this._themeChangeTimeout = null;
@@ -55,24 +55,25 @@ class PopupPreviewFrame {
         api.optionsGet = this._apiOptionsGet.bind(this);
 
         // Overwrite frontend
-        const {frameId} = await api.frameInformationGet();
-
-        const popupFactory = new PopupFactory(frameId);
-        await popupFactory.prepare();
-
-        this._popup = popupFactory.getOrCreatePopup();
-        this._popup.setChildrenSupported(false);
-
-        this._popupSetCustomOuterCssOld = this._popup.setCustomOuterCss.bind(this._popup);
-        this._popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
-
-        this._frontend = new Frontend(this._popup);
+        this._frontend = new Frontend(
+            this._frameId,
+            this._popupFactory,
+            {
+                allowRootFramePopupProxy: false
+            }
+        );
         this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
         this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
         await this._frontend.prepare();
         this._frontend.setDisabledOverride(true);
         this._frontend.canClearSelection = false;
 
+        const popup = this._frontend.popup;
+        popup.setChildrenSupported(false);
+
+        this._popupSetCustomOuterCssOld = popup.setCustomOuterCss.bind(popup);
+        popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
+
         // Update search
         this._updateSearch();
     }
@@ -132,7 +133,9 @@ class PopupPreviewFrame {
         }
         this._themeChangeTimeout = setTimeout(() => {
             this._themeChangeTimeout = null;
-            this._popup.updateTheme();
+            const popup = this._frontend.popup;
+            if (popup === null) { return; }
+            popup.updateTheme();
         }, 300);
     }
 
@@ -154,12 +157,16 @@ class PopupPreviewFrame {
 
     _setCustomCss({css}) {
         if (this._frontend === null) { return; }
-        this._popup.setCustomCss(css);
+        const popup = this._frontend.popup;
+        if (popup === null) { return; }
+        popup.setCustomCss(css);
     }
 
     _setCustomOuterCss({css}) {
         if (this._frontend === null) { return; }
-        this._popup.setCustomOuterCss(css, false);
+        const popup = this._frontend.popup;
+        if (popup === null) { return; }
+        popup.setCustomOuterCss(css, false);
     }
 
     async _updateOptionsContext({optionsContext}) {
@@ -188,7 +195,8 @@ class PopupPreviewFrame {
         this._textSource = source;
         await this._frontend.showContentCompleted();
 
-        if (this._popup.isVisibleSync()) {
+        const popup = this._frontend.popup;
+        if (popup !== null && popup.isVisibleSync()) {
             this._popupShown = true;
         }
 
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index 5eecd005..75bf06c8 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -131,6 +131,7 @@
         <script src="/fg/js/source.js"></script>
         <script src="/fg/js/popup-factory.js"></script>
         <script src="/fg/js/frontend.js"></script>
+        <script src="/fg/js/frame-offset-forwarder.js"></script>
         <script src="/bg/js/settings/popup-preview-frame.js"></script>
 
         <script src="/bg/js/settings/popup-preview-frame-main.js"></script>