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");

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

@@ -420,7 +420,6 @@ panelmultiview {
 }
 
 #tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels {
-  --zen-browser-border-radius: 10px;
   margin: 0 10px 10px 0;
   border-radius: var(--zen-browser-border-radius);
   border: 1px solid light-dark(#ddd, #4a4a4a);

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

@@ -9,20 +9,24 @@
 	border-radius: 100% !important;
 }
 
-#back-button {
+#back-button,
+#zen-sidebar-web-panel-back {
 	list-style-image: url("back.svg") !important;
 }
 
-#forward-button {
+#forward-button,
+#zen-sidebar-web-panel-forward {
 	list-style-image: url("forward.svg") !important;
 }
 
-#reload-button {
+#reload-button,
+#zen-sidebar-web-panel-reload {
 	list-style-image: url("reload.svg") !important;
 }
 
 #stop-button,
-.close-icon {
+.close-icon,
+#zen-sidebar-web-panel-close {
 	list-style-image: url("close.svg") !important;
 }
 
@@ -230,7 +234,8 @@
 	list-style-image: url("bookmark-star-on-tray.svg") !important;
 }
 
-#home-button {
+#home-button,
+#zen-sidebar-web-panel-home {
 	list-style-image: url("home.svg") !important;
 }
 
@@ -520,6 +525,11 @@
 	> #reload-button[displaystop]
 	+ #stop-button
 	> .toolbarbutton-animatable-box
+	> .toolbarbutton-animatable-image,
+#zen-sidebar-web-panel-reload[animate]
+	> #zen-sidebar-web-panel-reload-button[displaystop]
+	+ #zen-sidebar-web-panel-stop-button
+	> .toolbarbutton-animatable-box
 	> .toolbarbutton-animatable-image {
 	background-image: url("reload-to-stop.svg") !important;
 }
@@ -527,6 +537,10 @@
 #stop-reload-button[animate]
 	> #reload-button
 	> .toolbarbutton-animatable-box
+	> .toolbarbutton-animatable-image,
+#zen-sidebar-web-panel-reload[animate]
+	> #zen-sidebar-web-panel-reload-button
+	> .toolbarbutton-animatable-box
 	> .toolbarbutton-animatable-image {
 	background-image: url("stop-to-reload.svg") !important;
 }

src/browser/themes/shared/zen-sidebar-panels.css

@@ -1,6 +1,6 @@
 
 #zen-sidebar-panels-wrapper {
-  min-height: 500px;
+  /*min-height: 500px;*/
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -21,12 +21,65 @@
 .zen-sidebar-panel-button image {
   border-radius: 15px !important;
   background: var(--toolbarbutton-hover-background);
+  border: 2px solid transparent;
 }
 
 .zen-sidebar-panel-button:hover image {
   background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
 }
 
-.zen-sidebar-panel-button {
+.zen-sidebar-panel-button,
-  margin-bottom: 5px !important;
+.zen-sidebar-panel-button image {
+  margin-bottom: 7px !important;
+}
+
+.zen-sidebar-panel-button[selected="true"] image {
+  border-color: var(--zen-primary-color);
+}
+
+/** Sidebar view */
+
+#zen-sidebar-web-panel {
+  --zen-default-sidebar-width: 300px;
+  width: calc(var(--zen-default-sidebar-width) + 100px);
+  border-radius: var(--zen-browser-border-radius);
+  overflow: hidden;
+  margin: var(--zen-appcontent-separator-from-window);
+  border: var(--zen-appcontent-border);
+  min-width: var(--zen-default-sidebar-width);
+  background: var(--zen-colors-tertiary);
+  animation: zen-sidebar-panel-animation 0.3s ease-in-out;
+}
+
+#zen-sidebar-web-panel[inlinedwithsidebar="true"] {
+  margin: 0 10px 10px 0;
+}
+
+@keyframes zen-sidebar-panel-animation {
+  0% {
+    opacity: 0;
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+#zen-sidebar-web-header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  border: var(--zen-appcontent-border);
+  border-width: 0 !important;
+  border-bottom-width: 1px !important;
+  background: transparent;
+  position: relative;
+}
+
+#zen-sidebar-web-panel-close {
+  margin-left: auto !important;
 }

src/toolkit/content/zen-fullscreen-override.css

@@ -1,5 +1,6 @@
 
-[inDOMFullscreen="true"] #nav-bar {
+[inDOMFullscreen="true"] #nav-bar,
+[inDOMFullscreen="true"] #zen-sidebar-web-panel {
   display: none !important;
 }
 

src/toolkit/content/zen-xul.css

@@ -7,6 +7,7 @@
   --zen-appcontent-separator-from-window: var(--zen-appcontent-separator-from-window-single);
   --zen-appcontent-border-radius: var(--zen-panel-radius);
   --zen-appcontent-border: 1px solid light-dark(#ddd, #4a4a4a);
+  --zen-browser-border-radius: 10px;
 }
 
 toolbox#navigator-toolbox, 
@@ -28,6 +29,10 @@ html#main-window > body {
   margin: var(--zen-appcontent-separator-from-window);
 }
 
+#appcontent[inlinedwithsidebar="true"] {
+  background: var(--toolbar-bgcolor);
+}
+
 :not([inDOMFullscreen="true"]) #appcontent,
 #sidebar-box,
 #navigator-toolbox:not([inlinedwithsidebar="true"]) #TabsToolbar {

src/toolkit/themes/shared/zen-popup.css

@@ -243,6 +243,7 @@ toolbarbutton:not(:is(
   .zen-sidebar-action-button, 
   .all-tabs-close-button,
   .zen-sidebar-panel-button,
+  #zen-sidebar-web-panel-close,
   #PanelUI-zen-profiles-managePrfs
 )),
 #PanelUI-zen-profiles menuitem {