feat: Improved scrolling and fixed identifying contrast on custom colors, b=bug #9185, c=common, workspaces

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

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;
+ }
+ 

src/zen/common/styles/zen-browser-ui.css

@@ -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 */

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);

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];
     }
   }
 

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'
-          );
-          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;
     }