diff --git a/src/modules/libpref/init/zen-static-prefs.inc b/src/modules/libpref/init/zen-static-prefs.inc index 982b531a..dae70434 100644 --- a/src/modules/libpref/init/zen-static-prefs.inc +++ b/src/modules/libpref/init/zen-static-prefs.inc @@ -16,3 +16,8 @@ type: bool value: true mirror: always + +- name: zen.swipe.is-fast-swipe + type: bool + value: true + mirror: always diff --git a/src/widget/SwipeTracker-cpp.patch b/src/widget/SwipeTracker-cpp.patch new file mode 100644 index 00000000..d90839d8 --- /dev/null +++ b/src/widget/SwipeTracker-cpp.patch @@ -0,0 +1,21 @@ +diff --git a/widget/SwipeTracker.cpp b/widget/SwipeTracker.cpp +index b09252fd60beb10d5865d226c39ee0c8a9c22d87..91f68161209c6ca3f3bac22997d4e2066f1fafec 100644 +--- a/widget/SwipeTracker.cpp ++++ b/widget/SwipeTracker.cpp +@@ -5,6 +5,7 @@ + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + + #include "SwipeTracker.h" ++#include "mozilla/StaticPrefs_zen.h" + + #include "InputData.h" + #include "mozilla/FlushType.h" +@@ -90,7 +91,7 @@ bool SwipeTracker::ComputeSwipeSuccess() const { + + return (mGestureAmount * targetValue + + mCurrentVelocity * targetValue * +- StaticPrefs::widget_swipe_success_velocity_contribution()) >= ++ (StaticPrefs::zen_swipe_is_fast_swipe() ? 0.5 : StaticPrefs::widget_swipe_success_velocity_contribution())) >= + kSwipeSuccessThreshold; + } + diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index f2ec1fdf..3d487d79 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -93,7 +93,9 @@ z-index: 1; opacity: var(--zen-grainy-background-opacity, 0); mix-blend-mode: overlay; - transition: opacity 0.3s ease-in-out; + :root:not([swipe-gesture='true']) & { + transition: opacity 0.3s ease-in-out; + } } } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index fb9ea9a8..49f2a178 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -130,8 +130,8 @@ --toolbarbutton-hover-background: color-mix( in srgb, - var(--zen-branding-bg-reverse) 5%, - transparent 95% + var(--zen-branding-bg-reverse) 7.5%, + transparent 92.5% ); --toolbarbutton-active-background: color-mix( @@ -192,11 +192,7 @@ --zen-active-tab-scale: 0.98; /* Define tab hover background color */ - --tab-hover-background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background) 50%, - transparent 50% - ); + --tab-hover-background-color: var(--toolbarbutton-hover-background); /* Nativity */ --zen-native-content-radius: var(--zen-border-radius); diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index a56456fd..a5beed1f 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -1253,7 +1253,11 @@ }; getMostDominantColor(allColors) { - return this.getPrimaryColor(allColors); + const color = this.getPrimaryColor(allColors); + if (typeof color === 'string') { + return this.hexToRgb(color); + } + return color; } blendColors(rgb1, rgb2, percentage) { @@ -1629,8 +1633,8 @@ const gradient = this.getGradient(workspace.theme.gradientColors); this.currentOpacity = previousOpacity; this.#currentLightness = previousLightness; - this.#gradientsCache[uuid] = gradient; - return gradient; + this.#gradientsCache[uuid] = [gradient, workspace.theme.texture ?? 0]; + return this.#gradientsCache[uuid]; } } diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 19da750b..8f3b3e75 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -647,6 +647,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { element.addEventListener( 'MozSwipeGestureEnd', () => { + Services.prefs.setBoolPref('zen.swipe.is-fast-swipe', false); document.documentElement.removeAttribute('swipe-gesture'); gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width'); delete this._hasAnimatedBackgrounds; @@ -694,6 +695,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { lastDelta: 0, direction: null, }; + Services.prefs.setBoolPref('zen.swipe.is-fast-swipe', true); } _handleSwipeUpdate(event) { @@ -714,7 +716,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { translateX = this._swipeState.lastDelta; } - if (Math.abs(delta) > 1) { + if (Math.abs(delta) > 0.8) { this._swipeState.direction = delta > 0 ? 'left' : 'right'; } @@ -1665,30 +1667,33 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { } if (offsetPixels) { // Find the next workspace we are scrolling to - if (!this._hasAnimatedBackgrounds) { - this._hasAnimatedBackgrounds = true; - const nextWorkspace = workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)]; - if (nextWorkspace) { - const nextGradient = await gZenThemePicker.getGradientForWorkspace(nextWorkspace); - const existingBackground = document.documentElement.style.getPropertyValue( - '--zen-main-browser-background' + const nextWorkspace = workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)]; + if (nextWorkspace) { + const [nextGradient, nextGrain] = + await gZenThemePicker.getGradientForWorkspace(nextWorkspace); + const [existingBackground, existingGrain] = + await gZenThemePicker.getGradientForWorkspace(workspace); + const percentage = Math.abs(offsetPixels) / 200; + if (!this._hasAnimatedBackgrounds) { + this._hasAnimatedBackgrounds = true; + document.documentElement.style.setProperty( + '--zen-main-browser-background-old', + existingBackground ); - if (existingBackground !== nextGradient) { - document.documentElement.style.setProperty( - '--zen-main-browser-background-old', - existingBackground - ); - document.documentElement.style.setProperty( - '--zen-main-browser-background', - nextGradient - ); - } + document.documentElement.style.setProperty('--zen-main-browser-background', nextGradient); } + document.documentElement.style.setProperty('--zen-background-opacity', percentage); + // Fit the offsetPixels into the grain limits. Both ends may be nextGrain and existingGrain, + // so we need to use the min and max of both. For example, existing may be 0.2 and next may be 0.5, + // meaning we should convert the offset to a percentage between 0.2 and 0.5. BUT if existingGrain + // is 0.5 and nextGrain is 0.2, we should still convert the offset to a percentage between 0.2 and 0.5. + const minGrain = Math.min(existingGrain, nextGrain); + const maxGrain = Math.max(existingGrain, nextGrain); + const grainValue = + minGrain + + (maxGrain - minGrain) * (existingGrain > nextGrain ? 1 - percentage : percentage); + gZenThemePicker.updateNoise(grainValue); } - document.documentElement.style.setProperty( - '--zen-background-opacity', - Math.abs(offsetPixels) / 200 - ); } else { delete this._hasAnimatedBackgrounds; }