diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc
index 8c9b41f62..41d515f20 100644
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -33,14 +33,22 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -53,14 +61,22 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css
index 430486c26..156a1b5d5 100644
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -369,7 +369,6 @@ menuseparator {
var(--zen-primary-color) -40%,
color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
);
- color: var(--toolbar-color);
box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
display: flex;
@@ -391,6 +390,8 @@ menuseparator {
& label {
margin-top: 0;
margin-bottom: 0;
+ /* Invert the color based on the background */
+ color: light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.9));
}
& button {
@@ -401,7 +402,7 @@ menuseparator {
border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important;
border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important;
- color: var(--toolbar-color);
+ color: var(--zen-colors-secondary);
:root[zen-right-side='true'] & {
order: -1;
diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css
index 0fbc76a27..fb9ea9a87 100644
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -259,10 +259,10 @@
}
&,
- & #tabbrowser-tabpanels,
& panel,
& menupopup,
- & #zen-browser-background {
+ & #zen-browser-background,
+ & #urlbar[breakout-extend='true'] {
@media -moz-pref('zen.theme.window.scheme', 'dark') {
color-scheme: dark;
}
diff --git a/src/zen/common/styles/zen-urlbar.css b/src/zen/common/styles/zen-urlbar.css
index 5509c6b73..8839e00c9 100644
--- a/src/zen/common/styles/zen-urlbar.css
+++ b/src/zen/common/styles/zen-urlbar.css
@@ -162,9 +162,10 @@
}
& #urlbar-background {
- --zen-urlbar-background-base: light-dark(
- hsl(0, 0%, 100%),
- color-mix(in srgb, hsl(0, 0%, 5%) 80%, var(--zen-colors-primary) 20%)
+ --zen-urlbar-background-base: color-mix(
+ in srgb,
+ light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 5%)) 80%,
+ var(--zen-colors-primary) 20%
);
@media -moz-pref('zen.theme.acrylic-elements') {
--zen-urlbar-background-transparent: color-mix(
diff --git a/src/zen/media/zen-media-controls.css b/src/zen/media/zen-media-controls.css
index 42734c60c..f44a74107 100644
--- a/src/zen/media/zen-media-controls.css
+++ b/src/zen/media/zen-media-controls.css
@@ -16,7 +16,6 @@
.toolbarbutton-1 {
border-radius: 5px;
- color: white;
}
#zen-media-buttons-hbox {
@@ -77,19 +76,19 @@
transition: height 0.15s ease-out;
&::-moz-range-track {
- background: var(--zen-colors-border);
+ background: var(--zen-toolbar-element-bg);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-progress {
- background: var(--zen-primary-color);
+ background: color-mix(in srgb, var(--zen-primary-color) 70%, light-dark(black, white) 30%);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-thumb {
- background: var(--zen-primary-color);
+ background: color-mix(in srgb, var(--zen-primary-color) 70%, light-dark(black, white) 30%);
border: none;
width: calc(var(--progress-height) * 2);
height: calc(var(--progress-height) * 2);
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index 317ebc0eb..a56456fd3 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -59,6 +59,7 @@
#sinePoints = parseSinePath(this.#sinePath);
#colorPage = 0;
+ #gradientsCache = new Map();
constructor() {
super();
@@ -1012,10 +1013,9 @@
if (color.isCustom) {
return color.c;
}
- const opacity = this.currentOpacity;
+ let opacity = this.currentOpacity;
if (forToolbar) {
- const toolbarBg = this.getToolbarModifiedBase();
- return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${opacity * 100}%, ${toolbarBg} ${(1 - opacity) * 100}%)`;
+ opacity = 1; // Toolbar colors should always be fully opaque
}
return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${opacity})`;
}
@@ -1089,10 +1089,13 @@
return `linear-gradient(${rotation}deg, ${colorStops})`;
}
if (themedColors.length === 2) {
- return [
- `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
- `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
- ].join(', ');
+ if (!forToolbar) {
+ return [
+ `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
+ `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
+ ].join(', ');
+ }
+ return `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 100%)`;
} else if (themedColors.length === 3) {
let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
@@ -1104,6 +1107,7 @@
`linear-gradient(to top, ${color1} 0%, transparent 60%)`,
].join(', ');
}
+ // TODO(m): Stop doing this once we have support for bluring the sidebar
return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
}
}
@@ -1320,28 +1324,10 @@
browser.gZenThemePicker.previousBackgroundResolve();
}
delete browser.gZenThemePicker.previousBackgroundOpacity;
+ browser.gZenThemePicker.invalidateGradientCache();
}
browser.gZenThemePicker.resetCustomColorList();
- if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
- const gradient = browser.gZenThemePicker.getGradient([]);
- const gradientToolbar = browser.gZenThemePicker.getGradient([], true);
- browser.document.documentElement.style.setProperty(
- '--zen-main-browser-background',
- gradient
- );
- browser.document.documentElement.style.setProperty(
- '--zen-main-browser-background-toolbar',
- gradientToolbar
- );
- browser.gZenThemePicker.updateNoise(0);
- browser.document.documentElement.style.setProperty(
- '--zen-primary-color',
- this.getNativeAccentColor()
- );
- browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
- return;
- }
browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
@@ -1626,6 +1612,26 @@
});
return newPathData.trim();
}
+
+ invalidateGradientCache() {
+ this.#gradientsCache = {};
+ }
+
+ async getGradientForWorkspace(workspace) {
+ const uuid = workspace.uuid;
+ if (this.#gradientsCache[uuid]) {
+ return this.#gradientsCache[uuid];
+ }
+ const previousOpacity = this.currentOpacity;
+ const previousLightness = this.#currentLightness;
+ this.currentOpacity = workspace.theme.opacity ?? 0.5;
+ this.#currentLightness = workspace.theme.lightness ?? 70;
+ const gradient = this.getGradient(workspace.theme.gradientColors);
+ this.currentOpacity = previousOpacity;
+ this.#currentLightness = previousLightness;
+ this.#gradientsCache[uuid] = gradient;
+ return gradient;
+ }
}
window.nsZenThemePicker = nsZenThemePicker;
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index cb2cf45c8..19da750be 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -646,9 +646,10 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.addEventListener(
'MozSwipeGestureEnd',
- (event) => {
+ () => {
document.documentElement.removeAttribute('swipe-gesture');
gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
+ delete this._hasAnimatedBackgrounds;
this.updateTabsContainers();
document.removeEventListener('popupshown', this.popupOpenHandler, { once: true });
},
@@ -1662,6 +1663,35 @@ 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) {
+ document.documentElement.style.setProperty(
+ '--zen-main-browser-background-old',
+ existingBackground
+ );
+ document.documentElement.style.setProperty(
+ '--zen-main-browser-background',
+ nextGradient
+ );
+ }
+ }
+ }
+ document.documentElement.style.setProperty(
+ '--zen-background-opacity',
+ Math.abs(offsetPixels) / 200
+ );
+ } else {
+ delete this._hasAnimatedBackgrounds;
+ }
delete this._organizingWorkspaceStrip;
}
@@ -1801,6 +1831,24 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
const newWorkspaceEssentialsContainer = clonedEssentials.find((cloned) =>
cloned.workspaces.some((w) => w.uuid === newWorkspace.uuid)
);
+ // Get a list of essentials containers that are in between the first and last workspace
+ const essentialsContainersInBetween = clonedEssentials.filter((cloned) => {
+ const essentialsWorkspaces = cloned.workspaces;
+ const firstIndex = workspaces.workspaces.findIndex(
+ (w) => w.uuid === essentialsWorkspaces[0].uuid
+ );
+ const lastIndex = workspaces.workspaces.findIndex(
+ (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
+ );
+
+ const [start, end] = [
+ Math.min(previousWorkspaceIndex, newWorkspaceIndex),
+ Math.max(previousWorkspaceIndex, newWorkspaceIndex),
+ ];
+
+ // Check if any part of the container overlaps with the movement range
+ return firstIndex <= end && lastIndex >= start;
+ });
for (const cloned of clonedEssentials) {
const container = cloned.container;
const essentialsWorkspaces = cloned.workspaces;
@@ -1827,8 +1875,18 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
cloned.originalContainer.style.removeProperty('transform');
// Check if the container is even going to appear on the screen, to save on animation
if (
- (isGoingLeft && newWorkspaceIndex > lastWorkspaceIndex) ||
- (!isGoingLeft && newWorkspaceIndex < firstWorkspaceIndex)
+ // We also need to check if the container is even going to appear on the screen.
+ // In order to do this, we need to check if the container is between the first and last workspace.
+ // Note that essential containers can have multiple workspaces,
+ // so we need to check if any of the workspaces in the container are between the
+ // first and last workspace.
+ !essentialsContainersInBetween.find(
+ (clonedEssentials) =>
+ clonedEssentials.workspaces.some((w) => w.uuid === essentialsWorkspaces[0].uuid) &&
+ clonedEssentials.workspaces.some(
+ (w) => w.uuid === essentialsWorkspaces[essentialsWorkspaces.length - 1].uuid
+ )
+ )
) {
continue;
}
diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css
index c1d5a0043..4cf4ea21b 100644
--- a/src/zen/workspaces/zen-gradient-generator.css
+++ b/src/zen/workspaces/zen-gradient-generator.css
@@ -105,6 +105,13 @@
position: relative;
transition: transform 0.1s;
+ &[data-num-dots='3'] {
+ background:
+ radial-gradient(circle at 0% 0%, var(--c1), transparent 100%),
+ radial-gradient(circle at 100% 0%, var(--c2), transparent 100%),
+ linear-gradient(to top, var(--c3) 0%, transparent 60%);
+ }
+
&::after {
content: '';
position: absolute;