Destroy in-content UI after it is hidden

Author: piroor

webextensions/resources/module/InContentPanel.js

@@ -268,13 +268,13 @@ export default class InContentPanel {
           if (message.targetId) {
             this.lastTimestampFor.set(message.targetId, message.timestamp);
           }
-          this.panel.classList.remove('open');
+          this.hide();
           return true;
         })();
 
       case 'treestyletab:notify-sidebar-closed':
         if (this.panel) {
-          this.panel.classList.remove('open');
+          this.hide();
         }
         break;
     }
@@ -289,7 +289,7 @@ export default class InContentPanel {
       return;
 
     if (this.panel) {
-      this.panel.parentNode.removeChild(this.panel);
+      this.panel.remove();
       this.panel = null;
     }
 
@@ -301,6 +301,23 @@ export default class InContentPanel {
     this.root = this.onMessageSelf = this.destroySelf = null;
   }
 
+  async hide() {
+    if (!this.panel)
+      return;
+
+    this.panel.classList.remove('open');
+
+    if (this.panel.classList.contains('animation')) {
+      await new Promise((resolve, _reject) => {
+        this.panel.addEventListener('transitionend', resolve, { once: true });
+      });
+    }
+
+    browser.runtime.sendMessage({
+      type: `treestyletab:${this.type}:notify-panel-hidden`,
+    });
+  }
+
   get UISource() { // this can be overridden by subclasses
     return '';
   }

webextensions/resources/module/InContentPanelController.js

@@ -102,6 +102,22 @@ export default class InContentPanelController {
       this.hideIn(activeInfo.tabId, { timestamp });
       this.hideIn(activeInfo.previousTabId, { timestamp });
     });
+
+    browser.runtime.onMessage.addListener((message, sender) => {
+      switch (message?.type) {
+        case `treestyletab:${this.type}:notify-panel-hidden`:
+          if (sender.tab) {
+            browser.sessions.removeTabValue(sender.tab.id, KEY_CLOSED_CONTAINER_TYPE).catch(_error => null);
+            browser.tabs.sendMessage(sender.tab.id, {
+              type: `treestyletab:${this.type}:destroy`,
+            });
+          }
+          break;
+
+        default:
+          break;
+      }
+    });
   }
 
   value(property) {
@@ -215,6 +231,7 @@ export default class InContentPanelController {
                   if (message.stillVisibleInSplitView)
                     return;
                 case '${Constants.kCOMMAND_NOTIFY_TAB_DETACHED_FROM_WINDOW}':
+                case 'treestyletab:' + instance.type + ':destroy':
                   window.destroyClosedContents(destructor);
                   break;
               }