Fixed web panel controls, fixed panels not being active and added context menu for panel manipulation

src/browser/base/content/ZenSidebarManager.mjs

@@ -2,6 +2,7 @@
 export var gZenBrowserManagerSidebar = {
   _sidebarElement: null,
   _currentPanel: null,
+  contextTab: null,
 
   DEFAULT_MOBILE_USER_AGENT: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36 Edg/114.0.1823.79",
 
@@ -33,6 +34,7 @@ export var gZenBrowserManagerSidebar = {
     if (!data.data || !data.index) {
       return;
     }
+    this.sidebarElement.innerHTML = "";
     for (let site of data.index) {
       let panel = data.data[site];
       if (!panel || !panel.url) {
@@ -42,6 +44,7 @@ export var gZenBrowserManagerSidebar = {
       button.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional");
       button.setAttribute("flex", "1");
       button.setAttribute("zen-sidebar-id", site);
+      button.setAttribute("context", "zenWebPanelContextMenu");
       button.style.listStyleImage = this._getWebPanelIcon(panel.url);
       button.addEventListener("click", this._handleClick.bind(this));
       this.sidebarElement.appendChild(button);
@@ -86,6 +89,7 @@ export var gZenBrowserManagerSidebar = {
     let sidebar = this._openAndGetWebPanelWrapper();
     for (let browser of sidebar.querySelectorAll("browser[zen-sidebar-id]")) {
       browser.setAttribute("hidden", "true");
+      browser.browsingContext.isActive = false;
     }
   },
 
@@ -94,16 +98,18 @@ export var gZenBrowserManagerSidebar = {
     this._hideAllWebPanels();
     let existantWebview = sidebar.querySelector(`browser[zen-sidebar-id="${this._currentPanel}"]`);
     if (existantWebview) {
+      existantWebview.browsingContext.isActive = true;
       existantWebview.removeAttribute("hidden");
       return;
     }
     let data = this._getWebPanelData(this._currentPanel);
     let browser = this._createWebPanelBrowser(data);
     let browserContainers = document.getElementById("zen-sidebar-web-panel-browser-containers");
-    browserContainers.appendChild(browser.linkedBrowser);
+    browserContainers.appendChild(browser.linkedBrowser.closest(".browserContainer"));
     if (data.ua) {
       browser.linkedBrowser.browsingContext.customUserAgent = this.DEFAULT_MOBILE_USER_AGENT;
     }
+    browser.linkedBrowser.browsingContext.isActive = true;
   },
 
   _getWebPanelData(id) {
@@ -120,20 +126,16 @@ export var gZenBrowserManagerSidebar = {
 
   _createWebPanelBrowser(data) {
     let tab = gBrowser.addTab(data.url, {
+      insertTab: false,
       triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
     });
     tab.linkedBrowser.setAttribute("disablefullscreen", "true");
     tab.linkedBrowser.setAttribute("src", data.url);
     tab.linkedBrowser.setAttribute("zen-sidebar-id", data.id);
-    tab.linkedBrowser.setAttribute("type", "content");
-    tab.linkedBrowser.setAttribute("flex", "1");
     tab.linkedBrowser.setAttribute("disableglobalhistory", "true");
     tab.linkedBrowser.setAttribute("autoscroll", "false");
-    tab.linkedBrowser.setAttribute("remote", "true");
     tab.linkedBrowser.setAttribute("autocompletepopup", "PopupAutoComplete");
-    tab.linkedBrowser.setAttribute("messagemanagergroup", "browsers");
-    tab.linkedBrowser.setAttribute("message", "true");
-    tab.setAttribute("hidden", "true");
+    tab.linkedBrowser.setAttribute("contextmenu", "contentAreaContextMenu");
     return tab;
   },
 
@@ -141,9 +143,13 @@ export var gZenBrowserManagerSidebar = {
     return `url(page-icon:${url})`;
   },
 
-  _getCurrentBrowser() {
+  _getBrowserById(id) {
     let sidebar = document.getElementById("zen-sidebar-web-panel");
-    return sidebar.querySelector(`browser[zen-sidebar-id="${this._currentPanel}"]`);
+    return sidebar.querySelector(`browser[zen-sidebar-id="${id}"]`);
+  },
+
+  _getCurrentBrowser() {
+    return this._getBrowserById(this._currentPanel);
   },
 
   reload() {
@@ -185,6 +191,72 @@ export var gZenBrowserManagerSidebar = {
     }
     return this._sidebarElement;
   },
+
+  // Context menu
+
+  updateContextMenu(aPopupMenu) {
+    let panel =
+      aPopupMenu.triggerNode &&
+      (aPopupMenu.triggerNode || aPopupMenu.triggerNode.closest("toolbarbutton[zen-sidebar-id]"));
+    if (!panel) {
+      return;
+    }
+    let id = panel.getAttribute("zen-sidebar-id");
+    this.contextTab = id;
+    let data = this._getWebPanelData(id);
+    let browser = this._getBrowserById(id);
+    let isMuted = browser && browser.audioMuted;
+    let mutedContextItem = document.getElementById("context_zenToggleMuteWebPanel");
+    document.l10n.setAttributes(mutedContextItem, 
+      !isMuted ? "zen-web-side-panel-context-mute-panel" : "zen-web-side-panel-context-unmute-panel");
+    if (!isMuted) {
+      mutedContextItem.setAttribute("muted", "true");
+    } else {
+      mutedContextItem.removeAttribute("muted");
+    }
+    document.l10n.setAttributes(document.getElementById("context_zenToogleUAWebPanel"), 
+      data.ua ? "zen-web-side-panel-context-disable-ua" : "zen-web-side-panel-context-enable-ua");
+    if (!browser) {
+      document.getElementById("context_zenUnloadWebPanel").setAttribute("disabled", "true");
+    } else {
+      document.getElementById("context_zenUnloadWebPanel").removeAttribute("disabled");
+    }
+  },
+
+  contextToggleMuteAudio() {
+    let browser = this._getBrowserById(this.contextTab);
+    if (browser.audioMuted) {
+      browser.unmute();
+    } else {
+      browser.mute();
+    }
+  },
+
+  contextToggleUserAgent() {
+    let browser = this._getBrowserById(this.contextTab);
+    browser.browsingContext.customUserAgent = browser.browsingContext.customUserAgent ? null : this.DEFAULT_MOBILE_USER_AGENT;
+    let data = this.sidebarData;
+    data.data[this.contextTab].ua = !data.data[this.contextTab].ua;
+    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data));
+    browser.reload();
+  },
+
+  contextDelete() {
+    let data = this.sidebarData;
+    delete data.data[this.contextTab];
+    data.index = data.index.filter(id => id !== this.contextTab);
+    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data));
+    this._updateWebPanels();
+    let browser = this._getBrowserById(this.contextTab);
+    browser.remove();
+    this._closeSidebarPanel();
+  },
+
+  contextUnload() {
+    let browser = this._getBrowserById(this.contextTab);
+    browser.remove();
+    this._closeSidebarPanel();
+  },
 };
 
 gZenBrowserManagerSidebar.init();

src/browser/base/content/browser-xhtml.patch

@@ -1,16 +1,17 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..e81ccd535dc3dbcb485d39001b879970d7648693 100644
+index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..b23c3cf40e9894d6fe3f5c2899a8d2d163b0b091 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -144,6 +144,7 @@
+@@ -144,6 +144,8 @@
    window.addEventListener("DOMContentLoaded",
      gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
  </script>
++#include zen-locales.inc.xhtml
 +#include zen-scripts.inc.xhtml
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -165,9 +166,13 @@
+@@ -165,9 +167,13 @@
      </vbox>
    </html:template>
  

src/browser/base/content/main-popupset-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
-index 4074f35ffc622d5ec44a4b4e4c766aa5ecefd9f2..b308e81ea73ea1dd363fd7de6aad798ba9b27f55 100644
+index bff8d98b27819b149a0c51c1195e1ee3668f2e31..622cbe099be0f1da8f48132204b73e577483ceae 100644
 --- a/browser/base/content/main-popupset.inc.xhtml
 +++ b/browser/base/content/main-popupset.inc.xhtml
 @@ -166,6 +166,10 @@
@@ -28,3 +28,12 @@ index 4074f35ffc622d5ec44a4b4e4c766aa5ecefd9f2..b308e81ea73ea1dd363fd7de6aad798b
      </panel>
    </html:template>
  
+@@ -491,6 +497,8 @@
+ 
+ #include popup-notifications.inc
+ 
++#include zen-popupset.inc.xhtml
++
+ #include ../../components/customizableui/content/panelUI.inc.xhtml
+ #include ../../components/controlcenter/content/identityPanel.inc.xhtml
+ #include ../../components/controlcenter/content/permissionPanel.inc.xhtml

src/browser/base/content/zen-locales.inc.xhtml

@@ -0,0 +1 @@
+<link rel="localization" href="browser/zen-web-side-panels.ftl"/>

src/browser/base/content/zen-popupset.inc.xhtml

@@ -0,0 +1,9 @@
+<menupopup id="zenWebPanelContextMenu"
+            onpopupshowing="if (event.target == this) gZenBrowserManagerSidebar.updateContextMenu(this);"
+            onpopuphidden="if (event.target == this) gZenBrowserManagerSidebar.contextTab = null;">
+  <menuitem id="context_zenUnloadWebPanel" oncommand="gZenBrowserManagerSidebar.contextUnload();" data-l10n-id="zen-web-side-panel-context-unload"/>
+  <menuitem id="context_zenToggleMuteWebPanel" oncommand="gZenBrowserManagerSidebar.contextToggleMuteAudio();"/>
+  <menuitem id="context_zenToogleUAWebPanel" oncommand="gZenBrowserManagerSidebar.contextToggleUserAgent();"/>
+  <menuseparator/>
+  <menuitem id="context_zenDeleteWebPanel" oncommand="gZenBrowserManagerSidebar.contextDelete();" data-l10n-id="zen-web-side-panel-context-delete"/>
+</menupopup>

src/browser/themes/shared/zen-icons/icons.css

@@ -653,7 +653,8 @@ menuitem[id="placesContext_deleteBookmark"],
 menuitem[id="placesContext_deleteFolder"],
 menuitem[id="placesContext_delete"],
 menuitem[id="placesContext_delete_history"],
-menuitem[id="placesContext_deleteHost"] {
+menuitem[id="placesContext_deleteHost"],
+#context_zenDeleteWebPanel {
 	--menu-image: url("edit-delete.svg");
 }
 
@@ -809,13 +810,15 @@ menuitem[id="placesContext_open:newprivatewindow"] {
 
 #context-media-mute,
 #context_toggleMuteTab,
-#context_toggleMuteSelectedTabs {
+#context_toggleMuteSelectedTabs,
+#context_zenToggleMuteWebPanel {
 	--menu-image: url("media-mute.svg");
 }
 
 #context-media-unmute,
 #context_toggleMuteTab[muted],
-#context_toggleMuteSelectedTabs[muted] {
+#context_toggleMuteSelectedTabs[muted],
+#context_zenToggleMuteWebPanel[muted] {
 	--menu-image: url("media-unmute.svg");
 }