From aba436f30b7595a9614e3dd3b48076cb6053cd00 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Sun, 28 Apr 2024 18:11:10 +0200 Subject: [PATCH] Sidebar panels can be resized now! (closes #21) --- .../base/content/ZenSidebarManager.mjs | 65 ++++++++++++++++--- .../base/content/zen-sidebar-panel.inc.xhtml | 3 +- .../themes/shared/zen-sidebar-panels.css | 40 +++++++++--- src/toolkit/themes/shared/zen-popup.css | 13 ++++ 4 files changed, 102 insertions(+), 19 deletions(-) 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; + } +}