Added support for pinned web panels

src/browser/app/profile/zen-browser.js

@@ -141,3 +141,4 @@ pref('dom.security.sanitizer.enabled', true);
 // Zen Sidebar
 pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n   \"url\":\"https://web.whatsapp.com/\"\n  },\n\"p2\":{\n   \"url\":\"https://open.spotify.com/\",\n\"ua\": true\n  },\n\"p3\": {\n   \"url\": \"https://www.youtube.com/\",\n\"ua\": true\n}},\n\"index\":[\"p1\",\"p2\",\"p3\"]\n}");
 pref('zen.sidebar.enabled', true);
+pref('zen.sidebar.pinned', true);

src/browser/base/content/ZenSidebarManager.mjs

@@ -2,14 +2,15 @@
 export var gZenBrowserManagerSidebar = {
   _sidebarElement: null,
   _currentPanel: null,
+  _hasRegisteredPinnedClickOutside: false,
   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",
   MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button
 
   init() {
-    this._closeSidebarPanel(); // avoid caching
     this.update();
+    this.close(); // avoid caching
     this.listenForPrefChanges();
   },
 
@@ -24,10 +25,31 @@ export var gZenBrowserManagerSidebar = {
   listenForPrefChanges() {
     Services.prefs.addObserver("zen.sidebar.data", this.handleEvent.bind(this));
     Services.prefs.addObserver("zen.sidebar.enabled", this.handleEvent.bind(this));
+    Services.prefs.addObserver("zen.sidebar.pinned", this.handleEvent.bind(this));
   },
 
   handleEvent() {
     this.update();
+
+    if (Services.prefs.getBoolPref("zen.sidebar.pinned") && !this._hasRegisteredPinnedClickOutside) {
+      document.addEventListener("mouseup", this._handleClickOutside.bind(this));
+      this._hasRegisteredPinnedClickOutside = true;
+    } else {
+      document.removeEventListener("mouseup", this._handleClickOutside.bind(this));
+      this._hasRegisteredPinnedClickOutside = false;
+    }
+  },
+
+  _handleClickOutside(event) {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    if (!sidebar.hasAttribute("pinned") || !this._currentPanel) {
+      return;
+    }
+    let target = event.target;
+    if (target.closest("#zen-sidebar-web-panel") || target.closest("#zen-sidebar-panels-wrapper")) {
+      return;
+    }
+    this.close();
   },
 
   update() {
@@ -37,7 +59,6 @@ export var gZenBrowserManagerSidebar = {
   _updateWebPanels() {
     if (Services.prefs.getBoolPref("zen.sidebar.enabled")) {
       this.sidebarElement.removeAttribute("hidden");
-      this._hideAllWebPanels();
     } else {
       this.sidebarElement.setAttribute("hidden", "true");
       return;
@@ -87,6 +108,10 @@ export var gZenBrowserManagerSidebar = {
   _openAndGetWebPanelWrapper() {
     let sidebar = document.getElementById("zen-sidebar-web-panel");
     sidebar.removeAttribute("hidden");
+    if (Services.prefs.getBoolPref("zen.sidebar.pinned")) {
+      sidebar.setAttribute("pinned", "true");
+      document.getElementById("zen-sidebar-web-panel-pinned").setAttribute("pinned", "true");
+    }
     return sidebar;
   },
 
@@ -226,6 +251,22 @@ export var gZenBrowserManagerSidebar = {
     this._closeSidebarPanel();
   },
 
+  togglePinned(elem) {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    if (sidebar.hasAttribute("pinned")) {
+      sidebar.removeAttribute("pinned");
+    } else {
+      sidebar.setAttribute("pinned", "true");
+    }
+    if (sidebar.hasAttribute("pinned")) {
+      elem.setAttribute("pinned", "true");
+    } else {
+      elem.removeAttribute("pinned");
+    }
+    Services.prefs.setBoolPref("zen.sidebar.pinned", sidebar.hasAttribute("pinned"));
+    this.update();
+  },
+
   get sidebarElement() {
     if (!this._sidebarElement) {
       this._sidebarElement = document.getElementById("zen-sidebar-panels-wrapper");
@@ -298,5 +339,3 @@ export var gZenBrowserManagerSidebar = {
     this._closeSidebarPanel();
   },
 };
-
-gZenBrowserManagerSidebar.init();

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

@@ -1,6 +1,7 @@
 <script type="text/javascript">
 document.addEventListener("DOMContentLoaded", () => {
   import("chrome://browser/content/ZenSidebarManager.mjs").then(({ gZenBrowserManagerSidebar }) => {
+      gZenBrowserManagerSidebar.init();
       window.gZenBrowserManagerSidebar = gZenBrowserManagerSidebar
   });
 });

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

@@ -1,12 +1,15 @@
-<box id="zen-sidebar-web-panel" hidden="true" class="chromeclass-extrachrome">
+<box id="zen-sidebar-web-panel-wrapper">
-  <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
+  <box id="zen-sidebar-web-panel" class="chromeclass-extrachrome">
-    <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.back();"/>
+    <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
-    <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.forward();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.back();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.reload();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.forward();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.home();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.reload();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.close();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.home();"/>
-  </toolbar>
+      <toolbarbutton id="zen-sidebar-web-panel-pinned" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.togglePinned(this);"/>
-  <vbox id="zen-sidebar-web-panel-browser-containers">
+      <toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.close();"/>
+    </toolbar>
+    <vbox id="zen-sidebar-web-panel-browser-containers">
 
-  </vbox>
+    </vbox>
+  </box>
 </box>

src/browser/base/content/zenThemeModifier.js

@@ -87,6 +87,7 @@
 
     _changeSidebarLocation(value) {
       const kElementsToAppend = [
+        "zen-sidebar-web-panel-wrapper",
         "sidebar-splitter",
         "sidebar-box",
         "navigator-toolbox",
@@ -94,7 +95,6 @@
       const kInlineIndicatorElements = [
         "nav-bar",
         "tabbrowser-tabbox",
-        "zen-sidebar-web-panel",
         "appcontent",
         ...kElementsToAppend,
       ];

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

@@ -371,6 +371,10 @@ toolbarbutton#scrollbutton-up {
   }
 }
 
+#zen-tabbox-wrapper {
+  position: relative;
+}
+
 .footer-button {
   padding: var(--zen-button-padding) !important;
   border-radius: var(--zen-button-border-radius) !important;

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

@@ -851,6 +851,15 @@ menuitem[contexttype="fullscreen"][label*="Exit"] {
 .customize-context-removeFromToolbar {
 	--menu-image: url("unpin.svg");
 }
+
+#zen-sidebar-web-panel-pinned[pinned="true"] {
+	list-style-image: url("pin.svg") !important;
+}
+
+#zen-sidebar-web-panel-pinned {
+	list-style-image: url("unpin.svg") !important;
+}
+
 #context_duplicateTab,
 #context_duplicateTabs {
 	--menu-image: url("duplicate-tab.svg");

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

@@ -39,18 +39,28 @@
 
 /** Sidebar view */
 
+#zen-sidebar-web-panel-wrapper {
+  position: relative;
+  height: 100%;
+}
+
 #zen-sidebar-web-panel {
   --zen-default-sidebar-width: 300px;
   width: calc(var(--zen-default-sidebar-width) + 100px);
-  border-radius: var(--zen-browser-border-radius);
+  border-radius: var(--zen-panel-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;
+  opacity: 0;
   animation-delay: 0.1s;
   flex-direction: column;
+  margin-right: 0;
+}
+
+#zen-sidebar-web-panel:not([pinned="true"]) {
+  animation: zen-sidebar-panel-animation 0.3s ease-in-out forwards;
 }
 
 #main-window[customizing="true"] #zen-sidebar-web-panel {
@@ -61,10 +71,17 @@
   display: flex; 
 }
 
-#zen-sidebar-web-panel[inlinedwithsidebar="true"] {
+#zen-sidebar-web-panel-wrapper[inlinedwithsidebar="true"] #zen-sidebar-web-panel {
   margin: 0 10px 10px 0;
 }
 
+#zen-sidebar-web-panel[pinned="true"] {
+  position: absolute;
+  z-index: 1;
+  height: calc(100% - 10px);
+  animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards;
+}
+
 @keyframes zen-sidebar-panel-animation {
   0% {
     opacity: 0;
@@ -77,6 +94,18 @@
   }
 }
 
+@keyframes zen-sidebar-panel-animation-2 {
+  0% {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 #zen-sidebar-web-header {
   width: 100%;
   min-height: 50px;
@@ -91,7 +120,7 @@
   color-scheme: var(--toolbar-color-scheme);
 }
 
-#zen-sidebar-web-panel-close {
+#zen-sidebar-web-panel-pinned {
   margin-left: auto !important;
 }
 

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

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