Hide sidebar webpanel when clicked outside

src/browser/base/content/ZenSidebarManager.mjs

@@ -8,6 +8,7 @@ var gZenBrowserManagerSidebar = {
   _hasChangedConfig: true,
   _splitterElement: null,
   _hSplitterElement: null,
+  _hasRegisteredPinnedClickOutside: false,
   _isDragging: false,
   contextTab: null,
 
@@ -106,6 +107,16 @@ var gZenBrowserManagerSidebar = {
     this.update();
     this._hasChangedConfig = false;
 
+    // https://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind
+    var clickOutsideHandler = this._handleClickOutside.bind(this);
+    if (Services.prefs.getBoolPref("zen.sidebar.floating") && !this._hasRegisteredPinnedClickOutside) {
+      document.addEventListener("mouseup", clickOutsideHandler);
+      this._hasRegisteredPinnedClickOutside = true;
+    } else if (!Services.prefs.getBoolPref("zen.sidebar.floating") && this._hasRegisteredPinnedClickOutside) {
+      document.removeEventListener("mouseup", clickOutsideHandler);
+      this._hasRegisteredPinnedClickOutside = false;
+    }
+
     const button = document.getElementById("zen-sidepanel-button");
     if (Services.prefs.getBoolPref("zen.sidebar.enabled")) {
       button.removeAttribute("hidden");
@@ -116,6 +127,25 @@ var gZenBrowserManagerSidebar = {
     }
   },
 
+  _handleClickOutside(event) {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    if (!sidebar.hasAttribute("pinned") || !this._currentPanel || this._isDragging) {
+      return;
+    }
+    let target = event.target;
+    const closestSelector = [
+      "#zen-sidebar-web-panel",
+      "#zen-sidebar-panels-wrapper",
+      "#zenWebPanelContextMenu",
+      "#zen-sidebar-web-panel-splitter",
+      "#contentAreaContextMenu"
+    ].join(", ");
+    if (target.closest(closestSelector)) {
+      return;
+    }
+    this.close();
+  },
+
   toggle() {
     if (!this._currentPanel) {
       this._currentPanel = this._lastOpenedPanel;

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

@@ -53,10 +53,12 @@
   margin-right: 0;
   display: flex;
   pointer-events: none;
+  transition: width 0.3s ease-in-out;
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
-  display: none;
+  max-width: 0;
+  padding: 0;
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
@@ -144,6 +146,12 @@
   animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards;
 }
 
+#zen-sidebar-web-panel[hidden="true"][pinned="true"] {
+  display: flex;
+  pointer-events: none;
+  animation: zen-sidebar-panel-animation-reverse 0.2s ease-in-out forwards;
+}
+
 @keyframes zen-sidebar-panel-animation {
   0% {
     opacity: 0;
@@ -168,6 +176,22 @@
   }
 }
 
+@keyframes zen-sidebar-panel-animation-reverse {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  99% {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+
+  100% {
+    display: none !important;
+  }
+}
+
 #zen-sidebar-web-header,
 #zen-sidebar-panels-wrapper {
   width: 100%;