Add option for maximum nested popup depth

ext/bg/js/options.js

@@ -219,7 +219,8 @@ function optionsSetDefaults(options) {
             delay: 20,
             length: 10,
             modifier: 'shift',
-            deepDomScan: false
+            deepDomScan: false,
+            popupNestingMaxDepth: 0
         },
 
         dictionaries: {},

ext/bg/js/settings.js

@@ -51,6 +51,7 @@ async function formRead() {
     optionsNew.scanning.delay = parseInt($('#scan-delay').val(), 10);
     optionsNew.scanning.length = parseInt($('#scan-length').val(), 10);
     optionsNew.scanning.modifier = $('#scan-modifier-key').val();
+    optionsNew.scanning.popupNestingMaxDepth = parseInt($('#popup-nesting-max-depth').val(), 10);
 
     optionsNew.anki.enable = $('#anki-enable').prop('checked');
     optionsNew.anki.tags = $('#card-tags').val().split(/[,; ]+/);
@@ -192,6 +193,7 @@ async function onReady() {
     $('#scan-delay').val(options.scanning.delay);
     $('#scan-length').val(options.scanning.length);
     $('#scan-modifier-key').val(options.scanning.modifier);
+    $('#popup-nesting-max-depth').val(options.scanning.popupNestingMaxDepth);
 
     $('#dict-purge-link').click(utilAsync(onDictionaryPurge));
     $('#dict-file').change(utilAsync(onDictionaryImport));

ext/bg/settings.html

@@ -215,6 +215,11 @@
                         <option value="shift">Shift</option>
                     </select>
                 </div>
+
+                <div class="form-group options-advanced">
+                    <label for="popup-nesting-max-depth">Maximum nested popup depth</label>
+                    <input type="number" min="0" id="popup-nesting-max-depth" class="form-control">
+                </div>
             </div>
 
             <div>

ext/fg/float.html

@@ -44,10 +44,6 @@
 
         <script src="/fg/js/float.js"></script>
 
-        <!-- TODO : Make these conditional based on options -->
-        <script src="/fg/js/frontend-api-sender.js"></script>
-        <script src="/fg/js/popup.js"></script>
-        <script src="/fg/js/popup-proxy.js"></script>
-        <script src="/fg/js/frontend.js"></script>
+        <script src="/fg/js/popup-nested.js"></script>
     </body>
 </html>

ext/fg/js/popup-nested.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2019 Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+async function popupNestedSetup() {
+    const options = await apiOptionsGet();
+    const popupNestingMaxDepth = options.scanning.popupNestingMaxDepth;
+
+    let depth = null;
+    const match = /[&?]depth=([^&]*?)(?:&|$)/.exec(location.href);
+    if (match !== null) {
+        depth = parseInt(match[1], 10);
+    }
+
+    if (!(typeof popupNestingMaxDepth === 'number' && typeof depth === 'number' && depth < popupNestingMaxDepth)) {
+        return;
+    }
+
+    const scriptSrcs = [
+        '/fg/js/frontend-api-sender.js',
+        '/fg/js/popup.js',
+        '/fg/js/popup-proxy.js',
+        '/fg/js/frontend.js'
+    ];
+    for (const src of scriptSrcs) {
+        const script = document.createElement('script');
+        script.async = false;
+        script.src = src;
+        document.body.appendChild(script);
+    }
+}
+
+popupNestedSetup();

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

@@ -36,9 +36,10 @@ class PopupProxyHost {
 
     createPopup(parentId) {
         const parent = (typeof parentId === 'string' && this.popups.hasOwnProperty(parentId) ? this.popups[parentId] : null);
+        const depth = (parent !== null ? parent.depth + 1 : 0);
         const id = `${this.nextId}`;
         ++this.nextId;
-        const popup = new Popup(id);
+        const popup = new Popup(id, depth);
         if (parent !== null) {
             popup.parent = parent;
             parent.children.push(popup);

ext/fg/js/popup.js

@@ -18,15 +18,16 @@
 
 
 class Popup {
-    constructor(id) {
+    constructor(id, depth) {
         this.id = id;
+        this.depth = depth;
         this.parent = null;
         this.children = [];
         this.container = document.createElement('iframe');
         this.container.id = 'yomichan-float';
         this.container.addEventListener('mousedown', e => e.stopPropagation());
         this.container.addEventListener('scroll', e => e.stopPropagation());
-        this.container.setAttribute('src', chrome.extension.getURL(`/fg/float.html?id=${id}`));
+        this.container.setAttribute('src', chrome.extension.getURL(`/fg/float.html?id=${id}&depth=${depth}`));
         this.container.style.width = '0px';
         this.container.style.height = '0px';
         this.injected = null;