Sidebar panels can be resized now! (closes #21)

src/browser/base/content/ZenSidebarManager.mjs

@@ -5,6 +5,7 @@ var gZenBrowserManagerSidebar = {
   _hasRegisteredPinnedClickOutside: false,
   _firstRun: 0,
   _hasChangedConfig: true,
+  _splitterElement: null,
   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",
@@ -29,6 +30,37 @@ var gZenBrowserManagerSidebar = {
     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));
+
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    let computedStyle = window.getComputedStyle(sidebar);
+    let maxWidth = parseInt(computedStyle.getPropertyValue("max-width").replace("px", ""));
+    let minWidth = parseInt(computedStyle.getPropertyValue("min-width").replace("px", ""));
+    
+    let isBeingResized = false;
+    this.splitterElement.addEventListener("mousedown", function(event) {
+      if (!isBeingResized) { // Prevent multiple resizes
+        isBeingResized = true;
+        let sidebarWidth = sidebar.getBoundingClientRect().width;
+        let startX = event.clientX;
+        let startWidth = sidebarWidth;
+        let mouseMove = function(event) {
+          let newWidth = startWidth + event.clientX - startX;
+          if (newWidth <= minWidth+10) {
+            newWidth = minWidth+1;
+          } else if (newWidth >= maxWidth-10) {
+            newWidth = maxWidth-1;
+          }
+          sidebar.style.width = `${newWidth}px`;
+        };
+        let mouseUp = function() {
+          isBeingResized = false;
+          document.removeEventListener("mousemove", mouseMove);
+          document.removeEventListener("mouseup", mouseUp);
+        };
+        document.addEventListener("mousemove", mouseMove);
+        document.addEventListener("mouseup", mouseUp);
+      }
+    });
   },
 
   handleEvent() {
@@ -51,7 +83,7 @@ var gZenBrowserManagerSidebar = {
       return;
     }
     let target = event.target;
-    if (target.closest("#zen-sidebar-web-panel") || target.closest("#zen-sidebar-panels-wrapper") || target.closest("zenWebPanelContextMenu")) {
+    if (target.closest("#zen-sidebar-web-panel") || target.closest("#zen-sidebar-panels-wrapper") || target.closest("#zenWebPanelContextMenu") || target.closest("#zen-sidebar-web-panel-splitter") || target.closest("#contentAreaContextMenu")) {
       return;
     }
     this.close();
@@ -125,12 +157,23 @@ var gZenBrowserManagerSidebar = {
     }
   },
 
+  _setPinnedToElements() {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    sidebar.setAttribute("pinned", "true");
+    document.getElementById("zen-sidebar-web-panel-pinned").setAttribute("pinned", "true");
+  },
+
+  _removePinnedFromElements() {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    sidebar.removeAttribute("pinned");
+    document.getElementById("zen-sidebar-web-panel-pinned").removeAttribute("pinned");
+  },
+
   _openAndGetWebPanelWrapper() {
     let sidebar = document.getElementById("zen-sidebar-web-panel");
     sidebar.removeAttribute("hidden");
     if (Services.prefs.getBoolPref("zen.sidebar.pinned")) {
-      sidebar.setAttribute("pinned", "true");
+      this._setPinnedToElements();
-      document.getElementById("zen-sidebar-web-panel-pinned").setAttribute("pinned", "true");
     }
     return sidebar;
   },
@@ -275,14 +318,9 @@ var gZenBrowserManagerSidebar = {
   togglePinned(elem) {
     let sidebar = document.getElementById("zen-sidebar-web-panel");
     if (sidebar.hasAttribute("pinned")) {
-      sidebar.removeAttribute("pinned");
+      this._removePinnedFromElements();
     } else {
-      sidebar.setAttribute("pinned", "true");
+      this._setPinnedToElements();
-    }
-    if (sidebar.hasAttribute("pinned")) {
-      elem.setAttribute("pinned", "true");
-    } else {
-      elem.removeAttribute("pinned");
     }
     Services.prefs.setBoolPref("zen.sidebar.pinned", sidebar.hasAttribute("pinned"));
     this.update();
@@ -295,6 +333,13 @@ var gZenBrowserManagerSidebar = {
     return this._sidebarElement;
   },
 
+  get splitterElement() {
+    if (!this._splitterElement) {
+      this._splitterElement = document.getElementById("zen-sidebar-web-panel-splitter");
+    }
+    return this._splitterElement;
+  },
+
   // Context menu
 
   updateContextMenu(aPopupMenu) {

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

@@ -11,5 +11,6 @@
     <vbox id="zen-sidebar-web-panel-browser-containers">
 
     </vbox>
+    <html:span id="zen-sidebar-web-panel-splitter"></html:span>
   </box>
-</box>
+</box>

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

@@ -45,30 +45,55 @@
 /** Sidebar view */
 
 #zen-sidebar-web-panel-wrapper {
+  --zen-default-sidebar-width: 300px;
   position: relative;
   height: 100%;
+  margin-right: 0;
+  display: flex;
+}
+
+#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
+  display: none;
+}
+
+#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
+  margin: var(--zen-appcontent-separator-from-window);
 }
 
 #zen-sidebar-web-panel {
-  --zen-default-sidebar-width: 300px;
-  width: calc(var(--zen-default-sidebar-width) + 200px);
   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);
   opacity: 0;
   animation-delay: 0.1s;
   flex-direction: column;
-  margin-right: 0;
+  min-width: var(--zen-default-sidebar-width);
+  max-width: 720px;
+  width: calc(var(--zen-default-sidebar-width) + 200px);
+  height: calc(100% - 10px);
+}
+
+#zen-sidebar-web-panel-splitter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 4px;
+  background: transparent;
+  border: none;
+  cursor: ew-resize;
+}
+
+#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter {
+  display: none;
 }
 
 #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 {
+#main-window[customizing="true"] #zen-sidebar-web-panel-wrapper {
   display: none !important;
 }
 
@@ -76,14 +101,13 @@
   display: flex; 
 }
 
-#zen-sidebar-web-panel-wrapper[inlinedwithsidebar="true"] #zen-sidebar-web-panel {
+#zen-sidebar-web-panel-wrapper[inlinedwithsidebar="true"] {
   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;
 }
 

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

@@ -246,6 +246,7 @@ toolbarbutton:not(:is(
   #zen-sidebar-web-panel-pinned,
   #PanelUI-zen-profiles-managePrfs,
   .bookmark-item,
+  .panel-info-button,
 )),
 #PanelUI-zen-profiles menuitem {
   /** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */
@@ -359,6 +360,11 @@ hbox.editBMPanel_folderRow {
   padding-left: 20px;
 }
 
+#identity-popup-clear-sitedata-footer {
+  margin-bottom: 0 !important; 
+  padding-top: 0 !important;
+}
+
 /* Dialog box */
 
 .printDialogBox {
@@ -368,3 +374,10 @@ hbox.editBMPanel_folderRow {
 .printSettingsBrowser {
   min-width: 350px !important;
 }
+
+/* Context menu */
+menu, menuitem {
+  &:where([_moz-menuactive]:not([disabled="true"])) {
+    background-color: var(--zen-colors-border) !important;
+  }
+}