Added support for pinned web panels

2025-09-29 14:38:37 +00:00 · 2024-04-27 17:54:46 +02:00
parent 8bdda39c35
commit bf5896556d
9 changed files with 107 additions and 21 deletions
--- a/src/browser/app/profile/zen-browser.js
+++ b/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);
--- a/src/browser/base/content/ZenSidebarManager.mjs
+++ b/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();
--- a/src/browser/base/content/zen-scripts.inc.xhtml
+++ b/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
  });
 });
--- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml
+++ b/src/browser/base/content/zen-sidebar-panel.inc.xhtml
@@ -1,12 +1,15 @@
-<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="gZenBrowserManagerSidebar.back();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.forward();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.reload();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.home();"/>
-    <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">
+<box id="zen-sidebar-web-panel-wrapper">
+  <box id="zen-sidebar-web-panel" 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="gZenBrowserManagerSidebar.back();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.forward();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.reload();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.home();"/>
+      <toolbarbutton id="zen-sidebar-web-panel-pinned" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.togglePinned(this);"/>
+      <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>
--- a/src/browser/base/content/zenThemeModifier.js
+++ b/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,
      ];
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/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;
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/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");
--- a/src/browser/themes/shared/zen-sidebar-panels.css
+++ b/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;
 }

--- a/src/toolkit/themes/shared/zen-popup.css
+++ b/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,
 )),