From aa30854600c553f6f42d2b4a5327b62e0c1e5923 Mon Sep 17 00:00:00 2001 From: Vinty Date: Mon, 30 Dec 2024 20:20:39 -0500 Subject: [PATCH 1/3] Fix split view splitters being offset by sidebar --- .../base/zen-components/ZenViewSplitter.mjs | 32 +++++++++++++++ .../sidebar/browser-sidebar-js.patch | 41 +++++++++++++++++-- 2 files changed, 69 insertions(+), 4 deletions(-) diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index 3a97526fd..ec783438e 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -86,6 +86,12 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { () => document.getElementById('zen-splitview-dropzone') ); + ChromeUtils.defineLazyGetter( + this, + 'sidebarBox', + () => document.getElementById('sidebar-box') + ); + window.addEventListener('TabClose', this.handleTabClose.bind(this)); this.initializeContextMenu(); this.insertPageActionButton(); @@ -217,6 +223,31 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { wrapper.setAttribute('hidden', !value); } + /** + * Updates the padding on the wrapper to account for sidebar width + * and properly align vertical splitters + */ + updateWrapperDisplay() { + const wrapper = this.overlay?.parentNode; + if (!wrapper) return; + + const isRight = this.sidebarBox.getAttribute('positionend') !== null; + const sidebarShown = this.sidebarBox.getAttribute('hidden') === null; + const sidebarWidth = this.sidebarBox.style.width; + + if (!sidebarShown) { + wrapper.style.paddingLeft = 0; + wrapper.style.paddingRight = 0; + } + else if (isRight) { + wrapper.style.paddingLeft = 0; + wrapper.style.paddingRight = sidebarWidth; + } else { + wrapper.style.paddingLeft = sidebarWidth; + wrapper.style.paddingRight = 0; + } + } + enableTabRearrangeView() { if (this.rearrangeViewEnabled) return; this.rearrangeViewEnabled = true; @@ -750,6 +781,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { this.updateSplitViewButton(false); this.applyGridToTabs(splitData.tabs); this.applyGridLayout(splitData.layoutTree); + this.updateWrapperDisplay(); this.toggleWrapperDisplay(true); } diff --git a/src/browser/components/sidebar/browser-sidebar-js.patch b/src/browser/components/sidebar/browser-sidebar-js.patch index c17d4f10e..9c8ae3716 100644 --- a/src/browser/components/sidebar/browser-sidebar-js.patch +++ b/src/browser/components/sidebar/browser-sidebar-js.patch @@ -1,8 +1,35 @@ diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js -index 4a124003976684e014435854aef69ce29da541d2..61ce44751c36eea3e5ae2ddcc62e42c01459629b 100644 +index e95aa93e912d97aca2f60bf094562ea43a8d179b..166497ed26b075995b2151c5f841dc5dd6d20699 100644 --- a/browser/components/sidebar/browser-sidebar.js +++ b/browser/components/sidebar/browser-sidebar.js -@@ -578,7 +578,7 @@ var SidebarController = { +@@ -246,6 +246,8 @@ var SidebarController = { + _localesObserverAdded: false, + _mainResizeObserverAdded: false, + _mainResizeObserver: null, ++ _sidebarResizeObserverAdded: false, ++ _sidebarResizeObserver: null, + _ongoingAnimations: [], + + /** +@@ -334,6 +336,17 @@ var SidebarController = { + sidebarBox.style.maxWidth = `calc(75vw - ${entry.contentBoxSize[0].inlineSize}px)`; + }); + ++ if (this._sidebarResizeObserver) { ++ this._sidebarResizeObserver.disconnect(); ++ } ++ this._sidebarResizeObserver = new ResizeObserver(async () => { ++ gZenViewSplitter.updateWrapperDisplay(); ++ }) ++ if (!this._sidebarResizeObserverAdded) { ++ this._sidebarResizeObserver.observe(this._box); ++ this._sidebarResizeObserverAdded = true; ++ } ++ + if (this.sidebarRevampEnabled) { + if (!customElements.get("sidebar-main")) { + ChromeUtils.importESModule( +@@ -654,7 +667,7 @@ var SidebarController = { */ setPosition() { // First reset all ordinals to match DOM ordering. @@ -11,7 +38,7 @@ index 4a124003976684e014435854aef69ce29da541d2..61ce44751c36eea3e5ae2ddcc62e42c0 [...browser.children].forEach((node, i) => { node.style.order = i + 1; }); -@@ -592,9 +592,10 @@ var SidebarController = { +@@ -668,9 +681,10 @@ var SidebarController = { let boxOrdinal = this._box.style.order; this._box.style.order = tabbox.style.order; @@ -24,7 +51,7 @@ index 4a124003976684e014435854aef69ce29da541d2..61ce44751c36eea3e5ae2ddcc62e42c0 // Indicate we've switched ordering to the box this._box.toggleAttribute("positionend", true); sidebarMain.toggleAttribute("positionend", true); -@@ -603,6 +604,9 @@ var SidebarController = { +@@ -681,9 +695,15 @@ var SidebarController = { this._box.toggleAttribute("positionend", false); sidebarMain.toggleAttribute("positionend", false); sidebarContainer.toggleAttribute("positionend", false); @@ -34,3 +61,9 @@ index 4a124003976684e014435854aef69ce29da541d2..61ce44751c36eea3e5ae2ddcc62e42c0 this.toolbarButton && this.toolbarButton.toggleAttribute("positionend", false); } ++ ++ // Update split view wrapper padding ++ gZenViewSplitter.updateWrapperDisplay(); + + this.hideSwitcherPanel(); + From e5b7c61437f8686f32ccf4f9cb4e4897438280e5 Mon Sep 17 00:00:00 2001 From: Vinty Date: Tue, 31 Dec 2024 17:11:36 -0500 Subject: [PATCH 2/3] Move spltiview overlay inside tabpanels --- src/browser/base/content/browser-box-inc-xhtml.patch | 11 +++++++---- .../base/content/zen-tabbrowser-elements.inc.xhtml | 2 -- 2 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 src/browser/base/content/zen-tabbrowser-elements.inc.xhtml diff --git a/src/browser/base/content/browser-box-inc-xhtml.patch b/src/browser/base/content/browser-box-inc-xhtml.patch index 5a4860b5d..0c3b47e44 100644 --- a/src/browser/base/content/browser-box-inc-xhtml.patch +++ b/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 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..7e764f08346a048fd352d7f7c06ea434f9b19903 100644 +index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..715029fe126cac7b0d89e108415569d5742f4be9 100644 --- a/browser/base/content/browser-box.inc.xhtml +++ b/browser/base/content/browser-box.inc.xhtml -@@ -22,7 +22,14 @@ +@@ -22,7 +22,16 @@