fix: Prevent black flash when switching workspaces to split view, p=#11966

This commit is contained in:
Moaed Yahia
2026-01-21 06:26:26 +00:00
committed by GitHub
parent fdf453d34e
commit 116d70d08a

View File

@@ -1354,10 +1354,15 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
}
});
// Apply grid to tabs first to set zen-split attribute on containers
// before setting zen-split-view on parents. This prevents the black flash
// caused by CSS rules that hide containers without zen-split attribute
// when the parent has zen-split-view attribute.
this.applyGridToTabs(splitData.tabs);
this.tabBrowserPanel.setAttribute("zen-split-view", "true");
document.getElementById("tabbrowser-tabbox").setAttribute("zen-split-view", "true");
this.applyGridToTabs(splitData.tabs);
this.applyGridLayout(splitData.layoutTree);
this.setTabsDocShellState(splitData.tabs, true);
this.toggleWrapperDisplay(true);
@@ -1403,6 +1408,10 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
tab.setAttribute("split-view", "true");
const container = tab.linkedBrowser?.closest(".browserSidebarContainer");
container.setAttribute("is-zen-split", "true");
// Set zen-split early to prevent visibility flash when switching workspaces.
// The CSS rule for [is-zen-split]:not([zen-split]) sets visibility:hidden,
// so we must set zen-split before the parent zen-split-view attribute is applied.
container.setAttribute("zen-split", "true");
if (!container?.querySelector(".zen-tab-rearrange-button")) {
// insert a header into the container
const header = this._createHeader(container);