From 73887891542c9c8708fbf064bc70c106abdbbf4f Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com> Date: Wed, 25 Mar 2026 10:41:44 +0100 Subject: [PATCH] no-bug: Make glance perform more localized animation painting (gh-12913) --- prefs/zen/glance.yaml | 5 ++++- src/toolkit/themes/shared/popup-css.patch | 4 ++-- src/zen/common/modules/ZenUIManager.mjs | 11 ++++++----- src/zen/common/styles/zen-popup.css | 2 +- src/zen/common/styles/zen-theme.css | 2 +- src/zen/glance/ZenGlanceManager.mjs | 16 ++++++++++++++-- src/zen/glance/zen-glance.css | 16 ++++++++++++---- src/zen/tabs/zen-tabs/vertical-tabs.css | 7 ++++--- 8 files changed, 44 insertions(+), 19 deletions(-) diff --git a/prefs/zen/glance.yaml b/prefs/zen/glance.yaml index 2246aa916..299e616c7 100644 --- a/prefs/zen/glance.yaml +++ b/prefs/zen/glance.yaml @@ -15,4 +15,7 @@ value: "alt" # ctrl, alt, shift - name: zen.glance.animation-duration - value: 350 # in milliseconds + value: 300 # in milliseconds + +- name: zen.glance.deactivate-docshell-during-animation + value: true diff --git a/src/toolkit/themes/shared/popup-css.patch b/src/toolkit/themes/shared/popup-css.patch index b1a0fbd8a..f22e41417 100644 --- a/src/toolkit/themes/shared/popup-css.patch +++ b/src/toolkit/themes/shared/popup-css.patch @@ -1,5 +1,5 @@ diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css -index 064d39c586c01270545877ee9506ef3befa45a87..9b40bae87c3dd74cb921b5c486be01610c008216 100644 +index 064d39c586c01270545877ee9506ef3befa45a87..9c68eab80f84e5c2e156ded73242a12ca41e767c 100644 --- a/toolkit/themes/shared/popup.css +++ b/toolkit/themes/shared/popup.css @@ -23,8 +23,8 @@ panel { @@ -8,7 +8,7 @@ index 064d39c586c01270545877ee9506ef3befa45a87..9b40bae87c3dd74cb921b5c486be0161 - --panel-shadow-margin: var(--dimension-4); - --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0, 0%, 0%, 0.2); -+ --panel-shadow-margin: 10px; ++ --panel-shadow-margin: 8px; + --panel-shadow: var(--zen-big-shadow); -moz-window-input-region-margin: var(--panel-shadow-margin); margin: calc(-1 * var(--panel-shadow-margin)); diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs index 84526694b..ec722ea91 100644 --- a/src/zen/common/modules/ZenUIManager.mjs +++ b/src/zen/common/modules/ZenUIManager.mjs @@ -1027,7 +1027,8 @@ window.gZenVerticalTabsManager = { }; try { - const itemSize = aItem.getBoundingClientRect().height; + const itemSize = + window.windowUtils.getBoundsWithoutFlushing(aItem).height; const transform = `-${itemSize}px`; gZenUIManager.motion .animate( @@ -1038,7 +1039,7 @@ window.gZenVerticalTabsManager = { marginBottom: isLastItem() ? ["0px", "0px"] : [transform, "0px"], }, { - duration: 0.1, + duration: 0.12, easing: "easeOut", } ) @@ -1061,7 +1062,7 @@ window.gZenVerticalTabsManager = { filter: ["blur(1px)", "blur(0px)"], }, { - duration: 0.075, + duration: 0.1, easing: "easeOut", } ) @@ -1086,7 +1087,7 @@ window.gZenVerticalTabsManager = { ) { return Promise.resolve(); } - const height = aItem.getBoundingClientRect().height; + const height = window.windowUtils.getBoundsWithoutFlushing(aItem).height; const visibleItems = gBrowser.tabContainer.ariaFocusableItems; const isLastItem = visibleItems[visibleItems.length - 1] === aItem; return gZenUIManager.motion.animate( @@ -1101,7 +1102,7 @@ window.gZenVerticalTabsManager = { }), }, { - duration: 0.075, + duration: 0.1, easing: "easeOut", } ); diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index b20e23c53..90a3ead44 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -36,7 +36,7 @@ menupopup, panel { --panel-background: var(--arrowpanel-background); --menuitem-padding: 6px !important; - --panel-shadow-margin: 10px; + --panel-shadow-margin: 8px; /* This should match GetMenuCornerRadius() on macOS, or be overridden below */ @media (-moz-platform: macos) { diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index a6bfb6cab..223763421 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -248,7 +248,7 @@ --panel-separator-color: color-mix(in srgb, currentColor 15%, transparent) !important; - --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)); + --zen-big-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; --zen-active-tab-scale: 0.98; /* Define tab hover background color */ diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs index 362ed7f72..5987faa9d 100644 --- a/src/zen/glance/ZenGlanceManager.mjs +++ b/src/zen/glance/ZenGlanceManager.mjs @@ -438,7 +438,7 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature { parentSidebarContainer, { scale: [1, 0.98], - opacity: [1, 0.4], + opacity: [1, 0.3], }, { duration: this.#GLANCE_ANIMATION_DURATION, @@ -581,6 +581,14 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature { } this.#animateParentBackground(); + let activeValue = browserElement.zenModeActive; + let shouldDeactivateDocShell = Services.prefs.getBoolPref( + "zen.glance.deactivate-docshell-during-animation" + ); + if (shouldDeactivateDocShell) { + browserElement.zenModeActive = false; + browserElement.docShellIsActive = false; + } gZenUIManager.motion .animate(this.browserWrapper, arcSequence, { duration: gZenUIManager.testingEnabled @@ -589,6 +597,10 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature { ease: "easeInOut", }) .then(() => { + if (shouldDeactivateDocShell) { + browserElement.zenModeActive = activeValue; + browserElement.docShellIsActive = true; + } this.#finalizeGlanceOpening(imageDataElement, browserElement, resolve); }); } @@ -993,7 +1005,7 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature { browserSidebarContainer, { scale: [0.98, 1], - opacity: [0.4, 1], + opacity: [0.3, 1], }, { duration: this.#GLANCE_ANIMATION_DURATION / 1.5, diff --git a/src/zen/glance/zen-glance.css b/src/zen/glance/zen-glance.css index 210a323ea..7fe21ab83 100644 --- a/src/zen/glance/zen-glance.css +++ b/src/zen/glance/zen-glance.css @@ -113,6 +113,7 @@ box-shadow: none !important; visibility: inherit; z-index: 1; + overflow: visible !important; :root[zen-no-padding="true"] & { --zen-native-inner-radius: 0px; @@ -125,8 +126,12 @@ width: 85%; height: 100%; - &:not([has-finished-animation="true"]) #statuspanel { - display: none; + &:not([has-finished-animation="true"]) { + will-change: width, height, transform; + + #statuspanel { + display: none; + } } &[has-finished-animation="true"] { @@ -166,15 +171,18 @@ pointer-events: none; width: 100%; height: 100%; + max-width: 100%; + max-height: 100%; z-index: 0; border-radius: var(--zen-native-inner-radius); - top: 0%; + top: 50%; left: 50%; - translate: -50% 0%; + translate: -50% -50%; background: rgba(255, 255, 255, 0.1); & image { width: 100%; max-width: 100%; + max-height: 100%; } } diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index d7adddd34..d64570712 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -313,7 +313,7 @@ &, & .tab-content > image { transition: - scale 0.07s ease, + scale 0.2s ease, var(--zen-tabbox-element-indent-transition); } @@ -329,12 +329,13 @@ #tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) { scale: var(--zen-active-tab-scale); + rotate: 0.01deg; /* Subtle rotation to trigger GPU acceleration and prevent blurriness */ } :root:not([zen-renaming-tab="true"]) #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active { - scale: 0.92; + scale: 0.99; } & .tab-icon-image { @@ -1069,7 +1070,7 @@ #tabs-newtab-button { max-height: var(--tab-min-height); display: flex !important; - transition: scale 0.1s ease; + transition: scale 0.2s ease; #tabbrowser-tabs[movingtab] & { transition: transform 0.1s ease; }