Remove and unload the popup frame if an unexpected load occurs (#490)

* Remove and unload the popup frame if an unexpected load occurs

* Remove unused fields

* Only update _injectPromiseComplete if the promise is the most recent one

* Remove redundant this._injectPromise !== null check

1 files changed, 31 insertions, 3 deletions

diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 00658f58..2b33b714 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -31,6 +31,7 @@ class Popup {
         this._child = null;
         this._childrenSupported = true;
         this._injectPromise = null;
+        this._injectPromiseComplete = false;
         this._visible = false;
         this._visibleOverride = null;
         this._options = null;
@@ -47,6 +48,7 @@ class Popup {
         this._container.addEventListener('scroll', (e) => e.stopPropagation());
         this._container.style.width = '0px';
         this._container.style.height = '0px';
+        this._container.addEventListener('load', this._onFrameLoad.bind(this));
 
         this._fullscreenEventListeners = new EventListenerCollection();
 
@@ -199,10 +201,19 @@ class Popup {
     // Private functions
 
     _inject() {
-        if (this._injectPromise === null) {
-            this._injectPromise = this._createInjectPromise();
+        let injectPromise = this._injectPromise;
+        if (injectPromise === null) {
+            injectPromise = this._createInjectPromise();
+            this._injectPromise = injectPromise;
+            injectPromise.then(
+                () => {
+                    if (injectPromise !== this._injectPromise) { return; }
+                    this._injectPromiseComplete = true;
+                },
+                () => { this._resetFrame(); }
+            );
         }
-        return this._injectPromise;
+        return injectPromise;
     }
 
     async _createInjectPromise() {
@@ -243,6 +254,23 @@ class Popup {
         return popupPreparedPromise;
     }
 
+    _onFrameLoad() {
+        if (!this._injectPromiseComplete) { return; }
+        this._resetFrame();
+    }
+
+    _resetFrame() {
+        const parent = this._container.parentNode;
+        if (parent !== null) {
+            parent.removeChild(this._container);
+        }
+        this._container.removeAttribute('src');
+        this._container.removeAttribute('srcdoc');
+
+        this._injectPromise = null;
+        this._injectPromiseComplete = false;
+    }
+
     async _injectStyles() {
         try {
             await Popup._injectStylesheet('yomichan-popup-outer-stylesheet', 'file', '/fg/css/client.css', true);