mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 00:10:00 +02:00
feat: Improved scrolling and fixed identifying contrast on custom colors, b=bug #9185, c=common, workspaces
This commit is contained in:
parent
f0169277a0
commit
51d4396088
6 changed files with 66 additions and 33 deletions
|
@ -16,3 +16,8 @@
|
|||
type: bool
|
||||
value: true
|
||||
mirror: always
|
||||
|
||||
- name: zen.swipe.is-fast-swipe
|
||||
type: bool
|
||||
value: true
|
||||
mirror: always
|
||||
|
|
21
src/widget/SwipeTracker-cpp.patch
Normal file
21
src/widget/SwipeTracker-cpp.patch
Normal file
|
@ -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;
|
||||
}
|
||||
|
|
@ -93,9 +93,11 @@
|
|||
z-index: 1;
|
||||
opacity: var(--zen-grainy-background-opacity, 0);
|
||||
mix-blend-mode: overlay;
|
||||
:root:not([swipe-gesture='true']) & {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-box {
|
||||
/** Sidebar is already hidden in full screen mode */
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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'
|
||||
);
|
||||
if (existingBackground !== nextGradient) {
|
||||
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
|
||||
);
|
||||
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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue