diff --git a/src/browser/base/content/ZenSidebarManager.mjs b/src/browser/base/content/ZenSidebarManager.mjs
index dfeaaae61..74e615680 100644
--- a/src/browser/base/content/ZenSidebarManager.mjs
+++ b/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");
- document.getElementById("zen-sidebar-web-panel-pinned").setAttribute("pinned", "true");
+ this._setPinnedToElements();
}
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");
- }
- if (sidebar.hasAttribute("pinned")) {
- elem.setAttribute("pinned", "true");
- } else {
- elem.removeAttribute("pinned");
+ this._setPinnedToElements();
}
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) {
diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml
index dc3d0002a..86789a47d 100644
--- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml
+++ b/src/browser/base/content/zen-sidebar-panel.inc.xhtml
@@ -11,5 +11,6 @@
+
-
\ No newline at end of file
+
diff --git a/src/browser/themes/shared/zen-sidebar-panels.css b/src/browser/themes/shared/zen-sidebar-panels.css
index dac65efaa..fb7026658 100644
--- a/src/browser/themes/shared/zen-sidebar-panels.css
+++ b/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;
}
diff --git a/src/toolkit/themes/shared/zen-popup.css b/src/toolkit/themes/shared/zen-popup.css
index 71ababf41..cb644d01f 100644
--- a/src/toolkit/themes/shared/zen-popup.css
+++ b/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;
+ }
+}