Skip to content

Fix splitter bad position when sidebar open #13511

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
willrossignol wants to merge 1 commit into
base: dev
Choose a base branch
from
+15 −9
Open

Fix splitter bad position when sidebar open #13511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/browser/base/content/browser-box-inc-xhtml.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index d58fcdf99843d110b708f3fbf9fb317787fadfcf..cfc2aad902641609c3804e615c4cb66ce65299b7 100644
index d58fcdf99843d110b708f3fbf9fb317787fadfcf..45ad1e28b31a4993e56dfce0f88f49f48f25f2de 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -3,12 +3,22 @@
Expand All @@ -25,16 +25,20 @@ index d58fcdf99843d110b708f3fbf9fb317787fadfcf..cfc2aad902641609c3804e615c4cb66c
<vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
<box id="sidebar-header" align="center">
<toolbarbutton id="sidebar-switcher-target" class="tabbable" aria-expanded="false">
@@ -25,7 +35,7 @@
@@ -25,8 +35,10 @@
</stack>
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
- <tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
- <tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0"/>
+#include zen-tabbrowser-elements.inc.xhtml
<tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0"/>
+ <tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0">

@mr-cheffy mr-cheffy May 1, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty sure selectedIndex is used to fetch childs within the tab panel. Adding elements inside might mess that up

@willrossignol willrossignol May 1, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked into this a bit. Every tab keeps track of the index of its panel in the tabpanels element, so the index of the panels is adjusted to be +1 because of the overlay wrapper being inserted first into the tabpanels element. For the splitter, it is always appended to the list of children of tabpanels, so this also doesn't affect the indices of the panels in tabpanels.

I've been testing around creating new tabs, removing tabs, joining and splitting tabs, and using glance, and I haven't encountered any issues.

I can look into another solution though if you're not happy with this!

@willrossignol willrossignol May 1, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic that I was looking at is in toolkit/content/widgets/tabbox.js

@sporocyst sporocyst May 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But... even Firefox itself puts splitter into tab panel! It is probably not really a no-no.

Image

@mr-cheffy mr-cheffy May 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, just not really comfortable with messing around firefox's internals. I guess it could be fine for now

+#include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
+ </tabpanels>
</tabbox>
<splitter id="ai-window-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="none" resizeafter="sibling" collapsed="true"/>
@@ -34,3 +44,5 @@
<vbox id="ai-window-box" collapsed="true" class="chromeclass-extrachrome ai-window-right-sidebar">
@@ -34,3 +46,5 @@
</stack>
</vbox>
</hbox>
Expand Down
1 change: 0 additions & 1 deletion src/browser/base/content/zen-tabbrowser-elements.inc.xhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@

<vbox id="zen-toast-container" />

#include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
#include ../../../zen/glance/zen-glance.inc.xhtml
1 change: 1 addition & 0 deletions src/zen/common/styles/zen-browser-ui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ body,
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.1s ease-in-out;
pointer-events: none;
Expand Down
8 changes: 4 additions & 4 deletions src/zen/split-view/ZenViewSplitter.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1721,7 +1721,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
if (splitNode.direction === "column") {
splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`;
} else {
splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`;
splitter.style.inset = `${childRootPosition.top}% ${childRootPosition.right}% ${childRootPosition.bottom}% calc(${100 - childRootPosition.right}% - var(--zen-split-row-gap))`;
}
}
});
Expand All @@ -1739,7 +1739,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
splitter.className = "zen-split-view-splitter";
splitter.setAttribute("orient", orient);
splitter.setAttribute("gridIdx", idx);
this.overlay.insertAdjacentElement("afterbegin", splitter);
this.tabBrowserPanel.appendChild(splitter);

splitter.addEventListener("mousedown", this.handleSplitterMouseDown);
return splitter;
Expand Down Expand Up @@ -1775,8 +1775,8 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
}

removeSplitters() {
[...this.overlay.children]
.filter(c => c.classList.contains("zen-split-view-splitter"))
this.tabBrowserPanel
.querySelectorAll(".zen-split-view-splitter")
.forEach(s => s.remove());
this._splitNodeToSplitters.clear();
}
Expand Down
2 changes: 2 additions & 0 deletions src/zen/split-view/zen-split-view.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@
pointer-events: none;
padding: inherit;
inset: 0;
-moz-subtree-hidden-only-visually: 0;
z-index: 2;
Comment on lines +119 to +120

@willrossignol willrossignol May 6, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added these changes to ensure contents of zen-splitview-overlay is shown above the tabs. This fixes not seeing the zen-splitview-dropzone

}

#zen-splitview-overlay {
Expand Down