From d775869bbf77778e43faa9b156cc449300dfc674 Mon Sep 17 00:00:00 2001 From: Yosof Badr <23705518+YosofBadr@users.noreply.github.com> Date: Thu, 15 Oct 2026 16:56:57 +0100 Subject: [PATCH 1/4] gh-15785: Keep right sidebar gradients aligned during reveal --- src/zen/compact-mode/zen-compact-mode.css | 8 ++ src/zen/tests/compact_mode/browser.toml | 2 + .../browser_compact_mode_gradient.js | 117 ++++++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 src/zen/tests/compact_mode/browser_compact_mode_gradient.js diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 5640aa91c40..8ad17ff0cc8 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -29,6 +29,14 @@ } } +/* Translation makes fixed backgrounds local to the sidebar. */ +:root[zen-right-side='true'] .zen-toolbar-background { + &::before, + &::after { + background-position: right top !important; + } +} + :root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) { %include ../tabs/zen-tabs/vertical-tabs-topbuttons-fix.css diff --git a/src/zen/tests/compact_mode/browser.toml b/src/zen/tests/compact_mode/browser.toml index ad811e17bda..c206abadbde 100644 --- a/src/zen/tests/compact_mode/browser.toml +++ b/src/zen/tests/compact_mode/browser.toml @@ -4,6 +4,8 @@ [DEFAULT] +["browser_compact_mode_gradient.js"] + ["browser_compact_mode_layout_event.js"] ["browser_compact_mode_width.js"] diff --git a/src/zen/tests/compact_mode/browser_compact_mode_gradient.js b/src/zen/tests/compact_mode/browser_compact_mode_gradient.js new file mode 100644 index 00000000000..0dfd1acb714 --- /dev/null +++ b/src/zen/tests/compact_mode/browser_compact_mode_gradient.js @@ -0,0 +1,117 @@ +/* Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// A translated ancestor changes how a fixed background is painted. Compare the +// same point within the sidebar during and after its reveal, so the gradient +// cannot jump to the opposite end of the window's palette. +add_task(async function test_compact_sidebar_gradient_during_reveal() { + await SpecialPowers.pushPrefEnv({ + set: [ + ["zen.view.use-single-toolbar", true], + ["zen.view.sidebar-expanded", true], + ["zen.view.compact.hide-tabbar", true], + ["zen.view.compact.animate-sidebar", false], + ["zen.view.compact.enable-at-startup", false], + ["zen.theme.acrylic-sidebar", false], + ["zen.window-sync.enabled", false], + ], + }); + + for (const rightSide of [false, true]) { + await SpecialPowers.pushPrefEnv({ + set: [["zen.tabs.vertical.right-side", rightSide]], + }); + const win = await BrowserTestUtils.openNewBrowserWindow(); + try { + await win.gZenWorkspaces.promiseInitialized; + await BrowserTestUtils.openNewForegroundTab(win.gBrowser, "about:robots"); + const manager = win.gZenCompactModeManager; + const sidebar = win.gNavToolbox; + manager.preference = true; + await TestUtils.waitForCondition( + () => + !win.document.documentElement.hasAttribute("zen-compact-animating") && + !sidebar.style.transition, + "Compact-mode setup has finished" + ); + + const background = sidebar.querySelector(".zen-toolbar-background"); + const gradient = "linear-gradient(to right, red, blue)"; + background.style.setProperty( + "--zen-main-browser-background-toolbar", + gradient + ); + background.style.setProperty( + "--zen-main-browser-background-toolbar-old", + gradient + ); + + const canvas = win.document.createElementNS( + "http://www.w3.org/1999/xhtml", + "canvas" + ); + canvas.width = canvas.height = 1; + const context = canvas.getContext("2d"); + const sample = () => { + const rect = background.getBoundingClientRect(); + const x = Math.round(rightSide ? rect.left + 30 : rect.right - 30); + const y = Math.round(rect.top + rect.height * 0.6); + Assert.ok( + x > 0 && x < win.innerWidth, + "The sample is inside the window" + ); + context.drawWindow(win, x, y, 1, 1, "white"); + return [...context.getImageData(0, 0, 1, 1).data].slice(0, 3); + }; + + // Exercise both the incoming and outgoing workspace-theme layers. + for (const opacity of [1, 0]) { + background.style.setProperty("--zen-background-opacity", opacity); + sidebar.style.setProperty("transition", "none", "important"); + manager._setElementExpandAttribute(sidebar, true); + const expected = sample(); + + sidebar.style.setProperty( + "transition", + "translate 250ms linear", + "important" + ); + manager._setElementExpandAttribute(sidebar, false); + win.getComputedStyle(sidebar).translate; + for (const animation of sidebar.getAnimations()) { + animation.finish(); + } + sidebar.getBoundingClientRect(); + + manager._setElementExpandAttribute(sidebar, true); + win.getComputedStyle(sidebar).translate; + const animation = sidebar + .getAnimations() + .find(item => item.transitionProperty === "translate"); + Assert.ok(animation, "Revealing the sidebar starts a translation"); + animation.pause(); + animation.currentTime = 125; + await new Promise(resolve => + win.requestAnimationFrame(() => win.requestAnimationFrame(resolve)) + ); + + const actual = sample(); + const difference = Math.max( + ...actual.map((value, index) => Math.abs(value - expected[index])) + ); + Assert.lessOrEqual( + difference, + 8, + `${rightSide ? "Right" : "Left"} sidebar layer ${opacity} keeps its gradient during reveal: ${actual} versus ${expected}` + ); + animation.finish(); + } + } finally { + await BrowserTestUtils.closeWindow(win); + await SpecialPowers.popPrefEnv(); + } + } + await SpecialPowers.popPrefEnv(); +}); From 0a7731ca478a40f0a0fb5c223a6d8ccfd06820a1 Mon Sep 17 00:00:00 2001 From: Yosof Badr <23705518+YosofBadr@users.noreply.github.com> Date: Thu, 15 Oct 2026 17:16:42 +0100 Subject: [PATCH 2/4] gh-15785: Remove redundant test introduction --- src/zen/tests/compact_mode/browser_compact_mode_gradient.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/zen/tests/compact_mode/browser_compact_mode_gradient.js b/src/zen/tests/compact_mode/browser_compact_mode_gradient.js index 0dfd1acb714..eaabb5f4e82 100644 --- a/src/zen/tests/compact_mode/browser_compact_mode_gradient.js +++ b/src/zen/tests/compact_mode/browser_compact_mode_gradient.js @@ -3,9 +3,6 @@ "use strict"; -// A translated ancestor changes how a fixed background is painted. Compare the -// same point within the sidebar during and after its reveal, so the gradient -// cannot jump to the opposite end of the window's palette. add_task(async function test_compact_sidebar_gradient_during_reveal() { await SpecialPowers.pushPrefEnv({ set: [ From bebb53b1615d72b45e59d2b014eafc3ef2976218 Mon Sep 17 00:00:00 2001 From: Yosof Badr <23705518+YosofBadr@users.noreply.github.com> Date: Thu, 15 Oct 2026 17:24:41 +0100 Subject: [PATCH 3/4] gh-15785: Simplify gradient fix after review --- src/zen/compact-mode/zen-compact-mode.css | 15 ++- src/zen/tests/compact_mode/browser.toml | 2 - .../browser_compact_mode_gradient.js | 114 ------------------ 3 files changed, 7 insertions(+), 124 deletions(-) delete mode 100644 src/zen/tests/compact_mode/browser_compact_mode_gradient.js diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 8ad17ff0cc8..027530a298e 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -22,18 +22,17 @@ background-size: 100vw 100vh !important; } - &, - &::before, - &::after { - border-radius: calc((var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px))); + :root[zen-right-side='true'] & { + &::before, + &::after { + background-position: right top !important; + } } -} -/* Translation makes fixed backgrounds local to the sidebar. */ -:root[zen-right-side='true'] .zen-toolbar-background { + &, &::before, &::after { - background-position: right top !important; + border-radius: calc((var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px))); } } diff --git a/src/zen/tests/compact_mode/browser.toml b/src/zen/tests/compact_mode/browser.toml index c206abadbde..ad811e17bda 100644 --- a/src/zen/tests/compact_mode/browser.toml +++ b/src/zen/tests/compact_mode/browser.toml @@ -4,8 +4,6 @@ [DEFAULT] -["browser_compact_mode_gradient.js"] - ["browser_compact_mode_layout_event.js"] ["browser_compact_mode_width.js"] diff --git a/src/zen/tests/compact_mode/browser_compact_mode_gradient.js b/src/zen/tests/compact_mode/browser_compact_mode_gradient.js deleted file mode 100644 index eaabb5f4e82..00000000000 --- a/src/zen/tests/compact_mode/browser_compact_mode_gradient.js +++ /dev/null @@ -1,114 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - https://creativecommons.org/publicdomain/zero/1.0/ */ - -"use strict"; - -add_task(async function test_compact_sidebar_gradient_during_reveal() { - await SpecialPowers.pushPrefEnv({ - set: [ - ["zen.view.use-single-toolbar", true], - ["zen.view.sidebar-expanded", true], - ["zen.view.compact.hide-tabbar", true], - ["zen.view.compact.animate-sidebar", false], - ["zen.view.compact.enable-at-startup", false], - ["zen.theme.acrylic-sidebar", false], - ["zen.window-sync.enabled", false], - ], - }); - - for (const rightSide of [false, true]) { - await SpecialPowers.pushPrefEnv({ - set: [["zen.tabs.vertical.right-side", rightSide]], - }); - const win = await BrowserTestUtils.openNewBrowserWindow(); - try { - await win.gZenWorkspaces.promiseInitialized; - await BrowserTestUtils.openNewForegroundTab(win.gBrowser, "about:robots"); - const manager = win.gZenCompactModeManager; - const sidebar = win.gNavToolbox; - manager.preference = true; - await TestUtils.waitForCondition( - () => - !win.document.documentElement.hasAttribute("zen-compact-animating") && - !sidebar.style.transition, - "Compact-mode setup has finished" - ); - - const background = sidebar.querySelector(".zen-toolbar-background"); - const gradient = "linear-gradient(to right, red, blue)"; - background.style.setProperty( - "--zen-main-browser-background-toolbar", - gradient - ); - background.style.setProperty( - "--zen-main-browser-background-toolbar-old", - gradient - ); - - const canvas = win.document.createElementNS( - "http://www.w3.org/1999/xhtml", - "canvas" - ); - canvas.width = canvas.height = 1; - const context = canvas.getContext("2d"); - const sample = () => { - const rect = background.getBoundingClientRect(); - const x = Math.round(rightSide ? rect.left + 30 : rect.right - 30); - const y = Math.round(rect.top + rect.height * 0.6); - Assert.ok( - x > 0 && x < win.innerWidth, - "The sample is inside the window" - ); - context.drawWindow(win, x, y, 1, 1, "white"); - return [...context.getImageData(0, 0, 1, 1).data].slice(0, 3); - }; - - // Exercise both the incoming and outgoing workspace-theme layers. - for (const opacity of [1, 0]) { - background.style.setProperty("--zen-background-opacity", opacity); - sidebar.style.setProperty("transition", "none", "important"); - manager._setElementExpandAttribute(sidebar, true); - const expected = sample(); - - sidebar.style.setProperty( - "transition", - "translate 250ms linear", - "important" - ); - manager._setElementExpandAttribute(sidebar, false); - win.getComputedStyle(sidebar).translate; - for (const animation of sidebar.getAnimations()) { - animation.finish(); - } - sidebar.getBoundingClientRect(); - - manager._setElementExpandAttribute(sidebar, true); - win.getComputedStyle(sidebar).translate; - const animation = sidebar - .getAnimations() - .find(item => item.transitionProperty === "translate"); - Assert.ok(animation, "Revealing the sidebar starts a translation"); - animation.pause(); - animation.currentTime = 125; - await new Promise(resolve => - win.requestAnimationFrame(() => win.requestAnimationFrame(resolve)) - ); - - const actual = sample(); - const difference = Math.max( - ...actual.map((value, index) => Math.abs(value - expected[index])) - ); - Assert.lessOrEqual( - difference, - 8, - `${rightSide ? "Right" : "Left"} sidebar layer ${opacity} keeps its gradient during reveal: ${actual} versus ${expected}` - ); - animation.finish(); - } - } finally { - await BrowserTestUtils.closeWindow(win); - await SpecialPowers.popPrefEnv(); - } - } - await SpecialPowers.popPrefEnv(); -}); From 750bdc5eee40e1b00e9ae409191d0ba1f1466d71 Mon Sep 17 00:00:00 2001 From: Yosof Badr <23705518+YosofBadr@users.noreply.github.com> Date: Thu, 15 Oct 2026 18:52:53 +0100 Subject: [PATCH 4/4] gh-15785: Remove unnecessary background-position priority --- src/zen/compact-mode/zen-compact-mode.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 027530a298e..e0fb7492f8d 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -25,7 +25,7 @@ :root[zen-right-side='true'] & { &::before, &::after { - background-position: right top !important; + background-position: right top; } }