Show panel and website controls for website side panels

src/browser/base/content/ZenSidebarManager.mjs

@@ -1,6 +1,7 @@
 
 var ZenSidebarManager = {
   _sidebarElement: null,
+  _currentPanel: null,
 
   init() {
     this.update();
@@ -34,21 +35,79 @@ var ZenSidebarManager = {
       let button = document.createXULElement("toolbarbutton");
       button.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional");
       button.setAttribute("flex", "1");
+      button.setAttribute("zen-sidebar-id", site);
       button.style.listStyleImage = this._getWebPanelIcon(panel.url);
+      button.addEventListener("click", this._handleClick.bind(this));
       this.sidebarElement.appendChild(button);
     }
   },
 
+  _openAndGetWebPanelWrapper() {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    sidebar.removeAttribute("hidden");
+    return sidebar;
+  },
+
+  _closeSidebarPanel() {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    sidebar.setAttribute("hidden", "true");
+  },
+
+  _handleClick(event) {
+    let target = event.target;
+    let panelId = target.getAttribute("zen-sidebar-id");
+    if (this._currentPanel === panelId) {
+      return;
+    }
+    this._currentPanel = panelId;
+    this._updateButtons();
+    this._updateWebPanel();
+  },
+
+  _updateButtons() {
+    for (let button of this.sidebarElement.querySelectorAll(".zen-sidebar-panel-button")) {
+      if (button.getAttribute("zen-sidebar-id") === this._currentPanel) {
+        button.setAttribute("selected", "true");
+      } else {
+        button.removeAttribute("selected");
+      }
+    }
+  },
+
+  _updateWebPanel() {
+    let sidebar = this._openAndGetWebPanelWrapper();
+  },
+
   _getWebPanelIcon(url) {
     return `url(page-icon:${url})`;
   },
 
+  reload() {
+
+  },
+
+  forward() {
+
+  },
+
+  back() {
+      
+  },
+
+  home() {
+        
+  },
+
+  close() {
+    this._closeSidebarPanel();
+  },
+
   get sidebarElement() {
     if (!this._sidebarElement) {
       this._sidebarElement = document.getElementById("zen-sidebar-panels-wrapper");
     }
     return this._sidebarElement;
-  }
+  },
 };
 
 ZenSidebarManager.init();

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

@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index d445abe7e743b2ec5d46d42f8f149c000e3c7997..9ef4a0be1dbfc8fd50b57118b59304ef34597364 100644
+index d445abe7e743b2ec5d46d42f8f149c000e3c7997..6b310b355fce987ab0996e05a5f80148e4a6feb4 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -2,27 +2,18 @@
+@@ -2,27 +2,20 @@
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
  
@@ -29,6 +29,8 @@ index d445abe7e743b2ec5d46d42f8f149c000e3c7997..9ef4a0be1dbfc8fd50b57118b59304ef
      <!-- gNotificationBox will be added here lazily. -->
 -    <tabbox id="tabbrowser-tabbox"
 +    <hbox id="zen-tabbox-wrapper" flex="1">
++#include zen-sidebar-panel.inc.xhtml
++
 +      <tabbox id="tabbrowser-tabbox"
              flex="1" tabcontainer="tabbrowser-tabs">
        <tabpanels id="tabbrowser-tabpanels"

src/browser/base/content/zen-sidebar-panel.inc.xhtml

@@ -0,0 +1,9 @@
+<box id="zen-sidebar-web-panel" hidden="true" class="chromeclass-extrachrome">
+  <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
+    <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.back();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.forward();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.reload();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.home();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.hide();"/>
+  </toolbar>
+</box>

src/browser/base/content/zenThemeModifier.js

@@ -94,6 +94,8 @@
       const kInlineIndicatorElements = [
         "nav-bar",
         "tabbrowser-tabbox",
+        "zen-sidebar-web-panel",
+        "appcontent",
         ...kElementsToAppend,
       ];
       const wrapper = document.getElementById("zen-tabbox-wrapper");