Frontend initialization refactor (#737)

* Fix incorrect popup depth reassignment

* Rename variable

* Rename property

* Use explicit parameter values

* Refactor setupNestedPopups

* Refactor frontend initialization

ext/bg/js/search.js

@@ -330,7 +330,7 @@ class DisplaySearch extends Display {
             try {
                 await this.setupNestedPopups({
                     depth: 1,
-                    proxy: false,
+                    useProxyPopup: false,
                     isSearchPage: true
                 });
             } catch (e) {

ext/bg/js/settings/popup-preview-frame.js

@@ -55,13 +55,16 @@ class PopupPreviewFrame {
         api.optionsGet = this._apiOptionsGet.bind(this);
 
         // Overwrite frontend
-        this._frontend = new Frontend(
-            this._frameId,
-            this._popupFactory,
-            {
-                allowRootFramePopupProxy: false
-            }
-        );
+        this._frontend = new Frontend({
+            frameId: this._frameId,
+            popupFactory: this._popupFactory,
+            depth: 0,
+            parentPopupId: null,
+            parentFrameId: null,
+            useProxyPopup: false,
+            isSearchPage: false,
+            allowRootFramePopupProxy: false
+        });
         this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
         this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
         await this._frontend.prepare();

ext/fg/js/content-script-main.js

@@ -34,11 +34,16 @@
         const popupFactory = new PopupFactory(frameId);
         popupFactory.prepare();
 
-        const frontend = new Frontend(
+        const frontend = new Frontend({
             frameId,
             popupFactory,
-            {}
-        );
+            depth: 0,
+            parentPopupId: null,
+            parentFrameId: null,
+            useProxyPopup: false,
+            isSearchPage: false,
+            allowRootFramePopupProxy: true
+        });
         await frontend.prepare();
 
         yomichan.ready();

ext/fg/js/float.js

@@ -105,8 +105,8 @@ class DisplayFloat extends Display {
         await this.updateOptions();
 
         if (childrenSupported && !this._nestedPopupsPrepared) {
-            const {depth, url} = optionsContext;
-            this._prepareNestedPopups(popupId, depth, frameId, url);
+            const {depth} = optionsContext;
+            this._prepareNestedPopups(depth + 1, popupId, frameId);
             this._nestedPopupsPrepared = true;
         }
 
@@ -168,13 +168,13 @@ class DisplayFloat extends Display {
         body.style.fontSize = `${scale}em`;
     }
 
-    async _prepareNestedPopups(id, depth, parentFrameId, url) {
+    async _prepareNestedPopups(depth, parentPopupId, parentFrameId) {
         let complete = false;
 
         const onOptionsUpdated = async () => {
             const optionsContext = this.getOptionsContext();
             const options = await api.optionsGet(optionsContext);
-            const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
+            const maxPopupDepthExceeded = !(typeof depth === 'number' && depth <= options.scanning.popupNestingMaxDepth);
             if (maxPopupDepthExceeded || complete) { return; }
 
             complete = true;
@@ -182,11 +182,10 @@ class DisplayFloat extends Display {
 
             try {
                 await this.setupNestedPopups({
-                    id,
                     depth,
+                    parentPopupId,
                     parentFrameId,
-                    url,
-                    proxy: true
+                    useProxyPopup: true
                 });
             } catch (e) {
                 yomichan.logError(e);

ext/fg/js/frontend.js

@@ -25,7 +25,16 @@
  */
 
 class Frontend {
-    constructor(frameId, popupFactory, frontendInitializationData) {
+    constructor({
+        frameId,
+        popupFactory,
+        depth,
+        parentPopupId,
+        parentFrameId,
+        useProxyPopup,
+        isSearchPage,
+        allowRootFramePopupProxy
+    }) {
         this._id = yomichan.generateId(16);
         this._popup = null;
         this._disabledOverride = false;
@@ -43,16 +52,7 @@ class Frontend {
             search: this._search.bind(this),
             documentUtil: this._documentUtil
         });
-
-        const {
-            depth=0,
-            id: proxyPopupId,
-            parentFrameId,
-            proxy: useProxyPopup=false,
-            isSearchPage=false,
-            allowRootFramePopupProxy=true
-        } = frontendInitializationData;
-        this._proxyPopupId = proxyPopupId;
+        this._parentPopupId = parentPopupId;
         this._parentFrameId = parentFrameId;
         this._useProxyPopup = useProxyPopup;
         this._isSearchPage = isSearchPage;
@@ -320,7 +320,6 @@ class Frontend {
 
         this._textScanner.clearSelection(true);
         this._popup = popup;
-        this._depth = popup.depth;
     }
 
     async _getDefaultPopup() {
@@ -328,7 +327,7 @@ class Frontend {
     }
 
     async _getProxyPopup() {
-        const popup = new PopupProxy(null, this._depth + 1, this._proxyPopupId, this._parentFrameId, this._frameId);
+        const popup = new PopupProxy(null, this._depth, this._parentPopupId, this._parentFrameId, this._frameId);
         await popup.prepare();
         return popup;
     }

ext/mixed/js/display.js

@@ -348,7 +348,7 @@ class Display extends EventDispatcher {
         }
     }
 
-    async setupNestedPopups(frontendInitializationData) {
+    async setupNestedPopups({depth, parentPopupId, parentFrameId, useProxyPopup}) {
         await dynamicLoader.loadScripts([
             '/mixed/js/text-scanner.js',
             '/mixed/js/frame-client.js',
@@ -364,7 +364,16 @@ class Display extends EventDispatcher {
         const popupFactory = new PopupFactory(frameId);
         popupFactory.prepare();
 
-        const frontend = new Frontend(frameId, popupFactory, frontendInitializationData);
+        const frontend = new Frontend({
+            frameId,
+            popupFactory,
+            depth,
+            parentPopupId,
+            parentFrameId,
+            useProxyPopup,
+            isSearchPage: false,
+            allowRootFramePopupProxy: true
+        });
         await frontend.prepare();
     }