Defer load of iframe on the settings page (#1313)

ext/bg/js/settings2/settings-display-controller.js

@@ -54,6 +54,10 @@ class SettingsDisplayController {
             node.addEventListener('keydown', onInputTabActionKeyDown, false);
         }
 
+        for (const node of document.querySelectorAll('.defer-load-iframe')) {
+            this._setupDeferLoadIframe(node);
+        }
+
         this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this);
         const moreSelectorObserver = new SelectorObserver({
             selector: '.more-toggle',
@@ -305,4 +309,33 @@ class SettingsDisplayController {
                 return false;
         }
     }
+
+    _setupDeferLoadIframe(element) {
+        const parent = this._getMoreContainer(element);
+        if (parent === null) { return; }
+
+        let mutationObserver = null;
+        const callback = () => {
+            if (!this._isElementVisible(element)) { return false; }
+
+            const src = element.dataset.src;
+            delete element.dataset.src;
+            element.src = src;
+
+            if (mutationObserver === null) { return true; }
+
+            mutationObserver.disconnect();
+            mutationObserver = null;
+            return true;
+        };
+
+        if (callback()) { return; }
+
+        mutationObserver = new MutationObserver(callback);
+        mutationObserver.observe(parent, {attributes: true});
+    }
+
+    _isElementVisible(element) {
+        return (element.offsetParent !== null);
+    }
 }

ext/bg/settings2.html

@@ -720,7 +720,7 @@
                     Pitch accents for terms and expressions can be shown if a dictionary supporting pitch accents is installed.
                     There are currently three different ways that pitch accents can be presented:
                 </p>
-                <iframe src="/bg/pitch-accents-preview.html" id="pitch-accents-preview-frame"></iframe>
+                <iframe data-src="/bg/pitch-accents-preview.html" id="pitch-accents-preview-frame" class="defer-load-iframe" data-parent-distance="1"></iframe>
                 <p>
                     <a class="more-toggle" data-parent-distance="3">Less&hellip;</a>
                 </p>