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

1 files changed, 60 insertions, 5 deletions

diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 12d27a9f..199990e5 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -17,8 +17,10 @@
 
 /* global
  * Display
+ * Frontend
+ * PopupFactory
  * api
- * popupNestedInitialize
+ * dynamicLoader
  */
 
 class DisplayFloat extends Display {
@@ -30,7 +32,7 @@ class DisplayFloat extends Display {
         this._token = null;
 
         this._orphaned = false;
-        this._initializedNestedPopups = false;
+        this._nestedPopupsPrepared = false;
 
         this._onKeyDownHandlers = new Map([
             ['C', (e) => {
@@ -183,10 +185,10 @@ class DisplayFloat extends Display {
 
         await this.updateOptions();
 
-        if (childrenSupported && !this._initializedNestedPopups) {
+        if (childrenSupported && !this._nestedPopupsPrepared) {
             const {depth, url} = optionsContext;
-            popupNestedInitialize(popupId, depth, frameId, url);
-            this._initializedNestedPopups = true;
+            this._prepareNestedPopups(popupId, depth, frameId, url);
+            this._nestedPopupsPrepared = true;
         }
 
         this.setContentScale(scale);
@@ -201,4 +203,57 @@ class DisplayFloat extends Display {
             this._secret === message.secret
         );
     }
+
+    async _prepareNestedPopups(id, depth, parentFrameId, url) {
+        let complete = false;
+
+        const onOptionsUpdated = async () => {
+            const optionsContext = this.optionsContext;
+            const options = await api.optionsGet(optionsContext);
+            const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
+            if (maxPopupDepthExceeded || complete) { return; }
+
+            complete = true;
+            yomichan.off('optionsUpdated', onOptionsUpdated);
+
+            try {
+                await this._setupNestedPopups(id, depth, parentFrameId, url);
+            } catch (e) {
+                yomichan.logError(e);
+            }
+        };
+
+        yomichan.on('optionsUpdated', onOptionsUpdated);
+
+        await onOptionsUpdated();
+    }
+
+    async _setupNestedPopups(id, depth, parentFrameId, url) {
+        await dynamicLoader.loadScripts([
+            '/mixed/js/text-scanner.js',
+            '/fg/js/popup.js',
+            '/fg/js/popup-proxy.js',
+            '/fg/js/popup-factory.js',
+            '/fg/js/frame-offset-forwarder.js',
+            '/fg/js/frontend.js'
+        ]);
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {
+                id,
+                depth,
+                parentFrameId,
+                url,
+                proxy: true
+            }
+        );
+        await frontend.prepare();
+    }
 }