mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-07 21:49:58 +02:00
feat: Improved swiping between workspaces and other contrasting issues, b=no-bug, c=common, media, workspaces
This commit is contained in:
mr. m
parent
ffdae9a05b
commit
f0169277a0
8 changed files with 144 additions and 56 deletions
|
|
@ -33,14 +33,22 @@
|
|||
<box data-lightness="50" data-algo="float" data-num-dots="1" data-position="81,84" style="background: #919bb5;"></box>
|
||||
</hbox>
|
||||
<hbox>
|
||||
<box data-lightness="90" data-algo="analogous" data-num-dots="3" data-position="240,240" style="background: linear-gradient(135deg, #f4efdf, rgb(244, 223, 244));"></box>
|
||||
<box data-lightness="85" data-algo="analogous" data-num-dots="3" data-position="233,157" style="background: linear-gradient(135deg, #f0b8cd,rgb(244, 237, 224));"></box>
|
||||
<box data-lightness="80" data-algo="analogous" data-num-dots="3" data-position="236,111" style="background: linear-gradient(135deg, #e9c3e3,rgb(144, 97, 116));"></box>
|
||||
<box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="234,173" style="background: linear-gradient(135deg, #da7682,rgb(242, 197, 160));"></box>
|
||||
<box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="220,187" style="background: linear-gradient(135deg, #eb8570,rgb(229, 244, 164));"></box>
|
||||
<box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="225,237" style="background: linear-gradient(135deg, #dcce7f,rgb(115, 195, 128));"></box>
|
||||
<box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="147,195" style="background: linear-gradient(135deg, #5becad,rgb(195, 248, 207));"></box>
|
||||
<box data-lightness="55" data-algo="analogous" data-num-dots="3" data-position="81,84" style="background: linear-gradient(135deg, #919bb5,rgb(179, 176, 223));"></box>
|
||||
<box data-lightness="90" data-algo="analogous" data-num-dots="3" data-position="240,240"
|
||||
style="--c1: rgb(245, 237, 214); --c2: rgb(221, 243, 216); --c3: rgb(243, 216, 225);" />
|
||||
<box data-lightness="85" data-algo="analogous" data-num-dots="3" data-position="233,157"
|
||||
style="--c1: rgb(243, 190, 222); --c2: rgb(247, 222, 186); --c3: rgb(223, 195, 238);" />
|
||||
<box data-lightness="80" data-algo="analogous" data-num-dots="3" data-position="236,111"
|
||||
style="--c1: rgb(229, 179, 228); --c2: rgb(236, 172, 178); --c3: rgb(197, 185, 223);" />
|
||||
<box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="234,173"
|
||||
style="--c1: rgb(235, 122, 159); --c2: rgb(239, 239, 118); --c3: rgb(210, 133, 224);" />
|
||||
<box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="220,187"
|
||||
style="--c1: rgb(242, 115, 123); --c2: rgb(175, 242, 115); --c3: rgb(230, 125, 232);" />
|
||||
<box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="225,237"
|
||||
style="--c1: rgb(221, 205, 85); --c2: rgb(97, 212, 94); --c3: rgb(215, 91, 124);" />
|
||||
<box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="147,195"
|
||||
style="--c1: rgb(75, 231, 210); --c2: rgb(84, 175, 222); --c3: rgb(62, 244, 112);" />
|
||||
<box data-lightness="55" data-algo="analogous" data-num-dots="3" data-position="81,84"
|
||||
style="--c1: rgb(122, 132, 158); --c2: rgb(137, 117, 164); --c3: rgb(116, 162, 164);" />
|
||||
</hbox>
|
||||
<hbox>
|
||||
<box data-lightness="10" data-algo="float" data-num-dots="1" data-position="171,72" style="background:rgb(93, 86, 106);"></box>
|
||||
|
|
@ -53,14 +61,22 @@
|
|||
<box data-lightness="20" data-algo="float" data-num-dots="1" data-position="118,215" style="background: #447464;"></box>
|
||||
</hbox>
|
||||
<hbox>
|
||||
<box data-lightness="10" data-algo="analogous" data-num-dots="3" data-position="171,72" style="background: linear-gradient(135deg, #584e69,rgb(32, 27, 41));"></box>
|
||||
<box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="265,79" style="background: linear-gradient(135deg, #997096,rgb(125, 62, 88));"></box>
|
||||
<box data-lightness="35" data-algo="analogous" data-num-dots="3" data-position="301,176" style="background: linear-gradient(135deg, #956066,rgb(116, 82, 131));"></box>
|
||||
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="237,210" style="background: linear-gradient(135deg, #9c6645,rgb(171, 195, 109));"></box>
|
||||
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="91,228" style="background: linear-gradient(135deg, #517b6c,rgb(118, 141, 164));"></box>
|
||||
<box data-lightness="25" data-algo="analogous" data-num-dots="3" data-position="67,159" style="background: linear-gradient(135deg, #576e75,rgb(67, 66, 92));"></box>
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="314,235" style="background: linear-gradient(135deg, #665951,rgb(81, 67, 59));"></box>
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="118,215" style="background: linear-gradient(135deg, #447464,rgb(109, 129, 168));"></box>
|
||||
<box data-lightness="10" data-algo="analogous" data-num-dots="3" data-position="171,72"
|
||||
style="--c1: rgb(23, 17, 34); --c2: rgb(37, 14, 35); --c3: rgb(18, 22, 33);" />
|
||||
<box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="265,79"
|
||||
style="--c1: rgb(128, 76, 124); --c2: rgb(141, 63, 66); --c3: rgb(97, 88, 116);" />
|
||||
<box data-lightness="35" data-algo="analogous" data-num-dots="3" data-position="301,176"
|
||||
style="--c1: rgb(122, 56, 64); --c2: rgb(126, 121, 52); --c3: rgb(111, 68, 110);" />
|
||||
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="237,210"
|
||||
style="--c1: rgb(131, 65, 22); --c2: rgb(64, 128, 25); --c3: rgb(122, 31, 91);" />
|
||||
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="91,228"
|
||||
style="--c1: rgb(45, 108, 85); --c2: rgb(52, 85, 101); --c3: rgb(52, 118, 35);" />
|
||||
<box data-lightness="25" data-algo="analogous" data-num-dots="3" data-position="67,159"
|
||||
style="--c1: rgb(45, 74, 83); --c2: rgb(46, 50, 81); --c3: rgb(38, 90, 65);" />
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="314,235"
|
||||
style="--c1: rgb(64, 47, 38); --c2: rgb(55, 64, 38); --c3: rgb(59, 43, 52);" />
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="118,215"
|
||||
style="--c1: rgb(22, 80, 61); --c2: rgb(26, 60, 76); --c3: rgb(27, 87, 15);" />
|
||||
</hbox>
|
||||
</hbox>
|
||||
<toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue