Working on the sidebar web panel features!

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

@@ -104,7 +104,6 @@ pref('zen.welcomeScreen.enabled', true);
 pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.theme.accent-color', "#aac7ff");
-pref('zen.theme.panel-separation', /*7*/0);
 pref('zen.theme.toolbar-themed', true);
 
 

src/browser/base/content/ZenSidebarManager.mjs

@@ -5,9 +5,9 @@ var gZenBrowserManagerSidebar = {
   _sidebarElement: null,
   _currentPanel: null,
   _lastOpenedPanel: null,
-  _hasRegisteredPinnedClickOutside: false,
   _hasChangedConfig: true,
   _splitterElement: null,
+  _hSplitterElement: null,
   _isDragging: false,
   contextTab: null,
 
@@ -39,7 +39,7 @@ var gZenBrowserManagerSidebar = {
       let computedStyle = window.getComputedStyle(sidebar);
       let maxWidth = parseInt(computedStyle.getPropertyValue("max-width").replace("px", ""));
       let minWidth = parseInt(computedStyle.getPropertyValue("min-width").replace("px", ""));
-      
+
       if (!this._isDragging) { // Prevent multiple resizes
         this._isDragging = true;
         let sidebarWidth = sidebar.getBoundingClientRect().width;
@@ -65,6 +65,38 @@ var gZenBrowserManagerSidebar = {
       }
     }).bind(this));
 
+    this.hSplitterElement.addEventListener("mousedown", (function(event) {
+      let computedStyle = window.getComputedStyle(sidebar);
+      const parent = sidebar.parentElement;
+      // relative to avoid the top margin
+      // 20px is the padding
+      let parentRelativeHeight = parent.getBoundingClientRect().height - parent.getBoundingClientRect().top + 20;
+      let minHeight = parseInt(computedStyle.getPropertyValue("min-height").replace("px", ""));
+      if (!this._isDragging) { // Prevent multiple resizes
+        this._isDragging = true;
+        let sidebarHeight = sidebar.getBoundingClientRect().height;
+        let startY = event.clientY;
+        let startHeight = sidebarHeight;
+        let mouseMove = (function(e) {
+          let newHeight = startHeight + e.clientY - startY;
+          if (newHeight <= minHeight+10) {
+            newHeight = minHeight+1;
+          } else if (newHeight >= parentRelativeHeight) { // 10px is the padding
+            newHeight = parentRelativeHeight;
+          }
+          sidebar.style.height = `${newHeight}px`;
+        });
+        let mouseUp = (function() {
+          this.handleEvent();
+          this._isDragging = false;
+          document.removeEventListener("mousemove", mouseMove);
+          document.removeEventListener("mouseup", mouseUp);
+        }).bind(this);
+        document.addEventListener("mousemove", mouseMove);
+        document.addEventListener("mouseup", mouseUp);
+      }
+    }).bind(this));
+
     this.handleEvent();
   },
 
@@ -73,14 +105,6 @@ var gZenBrowserManagerSidebar = {
     this.update();
     this._hasChangedConfig = false;
 
-    if (Services.prefs.getBoolPref("zen.sidebar.floating") && !this._hasRegisteredPinnedClickOutside) {
-      document.addEventListener("mouseup", this._handleClickOutside.bind(this));
-      this._hasRegisteredPinnedClickOutside = true;
-    } else {
-      document.removeEventListener("mouseup", this._handleClickOutside.bind(this));
-      this._hasRegisteredPinnedClickOutside = false;
-    }
-
     const button = document.getElementById("zen-sidepanel-button");
     if (Services.prefs.getBoolPref("zen.sidebar.enabled")) {
       button.removeAttribute("hidden");
@@ -91,18 +115,6 @@ 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;
-    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();
-  },
-
   toggle() {
     if (!this._currentPanel) {
       this._currentPanel = this._lastOpenedPanel;
@@ -390,6 +402,13 @@ var gZenBrowserManagerSidebar = {
     return this._splitterElement;
   },
 
+  get hSplitterElement() {
+    if (!this._hSplitterElement) {
+      this._hSplitterElement = document.getElementById("zen-sidebar-web-panel-hsplitter");
+    }
+    return this._hSplitterElement;
+  },
+
   // Context menu
 
   updateContextMenu(aPopupMenu) {

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..6b310b355fce987ab0996e05a5f80148e4a6feb4 100644
+index d445abe7e743b2ec5d46d42f8f149c000e3c7997..b40fee5724a60171a8fa8849e6c778d2a17980f7 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -2,27 +2,20 @@
+@@ -2,27 +2,19 @@
  # 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,10 +29,9 @@ index d445abe7e743b2ec5d46d42f8f149c000e3c7997..6b310b355fce987ab0996e05a5f80148
      <!-- 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">
++#include zen-sidebar-panel.inc.xhtml
        <tabpanels id="tabbrowser-tabpanels"
                    flex="1" selectedIndex="0"/>
 -    </tabbox>

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

@@ -23,5 +23,6 @@
       <toolbarbutton id="zen-sidebar-add-panel-button" class="zen-sidebar-panel-button toolbarbutton-1 chromeclass-toolbar-additional" onclick="gZenBrowserManagerSidebar._openAddPanelDialog();"/>
     </toolbar>
     <html:span id="zen-sidebar-web-panel-splitter"></html:span>
+    <html:span id="zen-sidebar-web-panel-hsplitter"></html:span>
   </box>
 </box>

src/browser/base/content/zenThemeModifier.js

@@ -13,7 +13,6 @@
 
 {
   const kZenThemeAccentColorPref = "zen.theme.accent-color";
-  const kZenThemePanelSeparationPref = "zen.theme.panel-separation";
 
   /**
   * ZenThemeModifier controls the application of theme data to the browser,
@@ -34,6 +33,7 @@
     init() {
       this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
       this.listenForEvents();
+      this.updateExtraBrowserStyles();
       this.updateAllThemeBasics();
       this._zenInitBrowserLayout();
     },
@@ -41,9 +41,6 @@
     listenForEvents() {
       addEventListener("LightweightTheme:Set", this);
       Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
-      if (this._inMainBrowserWindow) {
-        Services.prefs.addObserver(kZenThemePanelSeparationPref, this.handleEvent.bind(this));
-      }
     },
 
     handleEvent(event) {
@@ -56,7 +53,6 @@
       */
     updateAllThemeBasics() {
       this.updateAccentColor();
-      this.updateExtraBrowserStyles();
     },
 
     /**
@@ -75,60 +71,26 @@
     updateExtraBrowserStyles() {
       // If we are in the main browser window, we can add some extra styles.
       if (!this._inMainBrowserWindow) return;
-      const panelSeparation = Services.prefs.getIntPref(kZenThemePanelSeparationPref, 7);
+      document.documentElement.style.setProperty("--zen-appcontent-separator-from-window-single", "0px");
-      document.documentElement.style.setProperty("--zen-appcontent-separator-from-window-single", panelSeparation + "px");
+      document.documentElement.style.setProperty("--zen-appcontent-border-radius", "0px");
-      if (panelSeparation <= 0) {
+      this._changeSidebarLocation();
-        document.documentElement.style.setProperty("--zen-appcontent-border-radius", "0px");
-      } else {
-        document.documentElement.style.setProperty("--zen-appcontent-border-radius", "var(--zen-panel-radius)");
-      }
-      this._changeSidebarLocation(panelSeparation);
     },
 
-    _changeSidebarLocation(value) {
+    _changeSidebarLocation() {
       const kElementsToAppend = [
-        "zen-sidebar-web-panel-wrapper",
         "sidebar-splitter",
         "sidebar-box",
         "navigator-toolbox",
       ];
-      const kInlineIndicatorElements = [
-        "nav-bar",
-        "tabbrowser-tabbox",
-        "appcontent",
-        ...kElementsToAppend,
-      ];
       const wrapper = document.getElementById("zen-tabbox-wrapper");
       const appWrapepr = document.getElementById("zen-sidebar-box-container");
-      if (value <= 0) {
+      for (let id of kElementsToAppend) {
-        for (let id of kElementsToAppend) {
+        const elem = document.getElementById(id);
-          const elem = document.getElementById(id);
+        if (elem) {
-          if (elem) {
+          wrapper.prepend(elem);
-            wrapper.prepend(elem);
-          }
-        }
-        appWrapepr.setAttribute("hidden", "true");
-        for (let id of kInlineIndicatorElements) {
-          const elem = document.getElementById(id);
-          if (elem) {
-            elem.setAttribute("inlinedwithsidebar", "true");
-          }
-        }
-      } else {
-        for (let i = kElementsToAppend.length - 1; i >= 0; i--) {
-          const elem = document.getElementById(kElementsToAppend[i]);
-          if (elem) {
-            appWrapepr.appendChild(elem);
-          }
-        }
-        appWrapepr.removeAttribute("hidden");
-        for (let id of kInlineIndicatorElements) {
-          const elem = document.getElementById(id);
-          if (elem) {
-            elem.removeAttribute("inlinedwithsidebar");
-          }
         }
       }
+      appWrapepr.setAttribute("hidden", "true");
     },
 
     _zenInitBrowserLayout() {

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

@@ -221,9 +221,6 @@ button.popup-notification-dropmarker {
   -moz-window-dragging: no-drag;
   
   --zen-sidebar-action-button-width: 38px;
-}
-
-#navigator-toolbox[inlinedwithsidebar="true"] #TabsToolbar {
   padding-bottom: calc(5px + 5px); /* Taking into consideration the padding of the sidebar without being inlined */
 }
 
@@ -436,8 +433,10 @@ panelmultiview {
 
 /** No space in panels overrides */
 
-#tabbrowser-tabbox[inlinedwithsidebar="true"] {
+#tabbrowser-tabbox {
   background: var(--toolbar-bgcolor);
+  display: flex;
+  flex-direction: row;
 }
 
 #tabbrowser-tabpanels {
@@ -445,18 +444,18 @@ panelmultiview {
   margin-right: 10px;
 }
 
-#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels .browserSidebarContainer {
+#tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
   border-radius: var(--zen-browser-border-radius);
   border: var(--zen-appcontent-border);
   width: 100%;
   margin: 0 10px 10px 0;
 }
 
-#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels .browserStack > browser {
+#tabbrowser-tabbox #tabbrowser-tabpanels .browserStack > browser {
   border-radius: var(--zen-browser-border-radius);
 }
 
-#nav-bar[inlinedwithsidebar="true"] {
+#nav-bar {
   padding-top: 5px;
   padding-bottom: 5px;
 }

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

@@ -52,6 +52,7 @@
   height: 100%;
   margin-right: 0;
   display: flex;
+  pointer-events: none;
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
@@ -59,10 +60,20 @@
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
+  --zen-sidebar-web-panel-spacing: 10px;
   margin: var(--zen-appcontent-separator-from-window);
+  position: absolute;
+  z-index: 1;
+  width: -moz-available;
+  padding: var(--zen-sidebar-web-panel-spacing);
+}
+
+#zen-sidebar-web-panel:not([pinned="true"]) {
+  --zen-sidebar-web-panel-spacing: calc(10px / 3);
 }
 
 #zen-sidebar-web-panel {
+  --zen-initial-height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
   border-radius: var(--zen-panel-radius);
   overflow: hidden;
   border: var(--zen-appcontent-border);
@@ -72,8 +83,15 @@
   flex-direction: column;
   min-width: var(--zen-default-sidebar-width);
   max-width: 720px;
+  min-height: var(--zen-default-sidebar-width);
   width: calc(var(--zen-default-sidebar-width) + 200px);
-  height: calc(100% - 10px);
+  height: var(--zen-initial-height);
+  pointer-events: all;
+}
+
+#zen-sidebar-web-panel:not([pinned="true"]) {
+  /* We need to always override the height */
+  height: var(--zen-initial-height) !important;
 }
 
 #zen-sidebar-web-panel-splitter {
@@ -87,7 +105,20 @@
   cursor: ew-resize;
 }
 
-#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter {
+#zen-sidebar-web-panel-hsplitter {
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 7px;
+  background: transparent;
+  border: none;
+  cursor: ns-resize;
+}
+
+#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter,
+#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-hsplitter,
+#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned="true"])) + #zen-sidebar-web-panel-splitter {
   display: none;
 }
 
@@ -103,7 +134,7 @@
   display: flex; 
 }
 
-#zen-sidebar-web-panel-wrapper[inlinedwithsidebar="true"] {
+#zen-sidebar-web-panel-wrapper {
   margin: 0 10px 10px 0;
 }
 
@@ -150,6 +181,7 @@
   background: transparent;
   position: relative;
   color-scheme: var(--toolbar-color-scheme);
+  -moz-window-dragging: no-drag;
 }
 
 #zen-sidebar-web-header {

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

@@ -39,9 +39,6 @@
   background: transparent !important;  
   border-color: transparent !important;
   width: 1px !important;
-}
-
-#sidebar-splitter[inlinedwithsidebar="true"] {
   background-color: -moz-dialog !important;
 }
 

src/toolkit/content/zen-xul.css

@@ -29,13 +29,12 @@ html#main-window > body {
   margin: var(--zen-appcontent-separator-from-window);
 }
 
-#appcontent[inlinedwithsidebar="true"] {
+#appcontent {
   background: var(--toolbar-bgcolor);
 }
 
 :not([inDOMFullscreen="true"]) #appcontent,
-#sidebar-box,
+#sidebar-box {
-#navigator-toolbox:not([inlinedwithsidebar="true"]) #TabsToolbar {
   /** Sidebar is already hidden in full screen mode */
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   border: none;