mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-20 22:35:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add a preference for site overlap and glance durations, b=closes #11056, c=glance, common

Browse Source
This commit is contained in:
mr. m
2025-10-29 10:53:53 +01:00
parent 0a260348ed
commit 47ca48e5a5
4 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
prefs/zen/glance.yaml
View File

@@ -12,4 +12,7 @@
value: true
- name: zen.glance.activation-method
value: 'alt' # ctrl, alt, shift, none, hold
value: 'alt' # ctrl, alt, shift
- name: zen.glance.animation-duration
value: 400 # in milliseconds

3
prefs/zen/view.yaml
View File

@@ -54,3 +54,6 @@
- name: zen.view.borderless-fullscreen
value: true
- name: zen.view.shift-down-site-on-hover
value: false

2
src/zen/common/styles/zen-browser-container.css
View File

@@ -43,7 +43,7 @@
}
}
@media not ((-moz-pref('zen.view.experimental-no-window-controls') or (not -moz-pref('zen.view.hide-window-controls'))) and -moz-pref('zen.view.use-single-toolbar')) {
@media (not -moz-pref('zen.view.shift-down-site-on-hover')) and (not ((-moz-pref('zen.view.experimental-no-window-controls') or (not -moz-pref('zen.view.hide-window-controls'))) and -moz-pref('zen.view.use-single-toolbar'))) {
.browserSidebarContainer:is(.deck-selected, [zen-split='true']) .browserContainer {
transition: margin var(--zen-hidden-toolbar-transition);

36
src/zen/glance/ZenGlanceManager.mjs
View File

@@ -34,6 +34,8 @@
ARC_HEIGHT_RATIO: 0.2, // Arc height = distance * ratio (capped at MAX_ARC_HEIGHT)
});
#GLANCE_ANIMATION_DURATION = Services.prefs.getIntPref('zen.glance.animation-duration') / 1000;
init() {
this.#setupEventListeners();
this.#setupPreferences();
@@ -247,7 +249,7 @@
{
duration: 0.2,
type: 'spring',
delay: 0.2,
delay: this.#GLANCE_ANIMATION_DURATION - 0.2,
bounce: 0,
}
);
@@ -395,7 +397,7 @@
opacity: [1, 0.4],
},
{
duration: 0.3,
duration: this.#GLANCE_ANIMATION_DURATION,
type: 'spring',
bounce: 0.2,
}
@@ -464,7 +466,7 @@
opacity: [1, 0],
},
{
duration: 0.1,
duration: this.#GLANCE_ANIMATION_DURATION / 2,
easing: 'easeInOut',
}
);
@@ -491,17 +493,8 @@
* @returns {string} The transform origin CSS value
*/
#getTransformOrigin(data) {
const { clientX, clientY, width, height } = data;
const parentRect = window.windowUtils.getBoundsWithoutFlushing(
this.browserWrapper.parentElement
);
const xPercent = ((clientX + width / 2 - parentRect.left) / parentRect.width) * 100;
const yPercent = ((clientY + height / 2 - parentRect.top) / parentRect.height) * 100;
const xOrigin = xPercent < 33 ? 'left' : xPercent > 66 ? 'right' : 'center';
const yOrigin = yPercent < 33 ? 'top' : yPercent > 66 ? 'bottom' : 'center';
return `${xOrigin} ${yOrigin}`;
const { clientX, clientY } = data;
return `${clientX}px ${clientY}px`;
}
/**
@@ -528,7 +521,7 @@
this.contentWrapper,
{ opacity: [0, 1] },
{
duration: 0.1,
duration: this.#GLANCE_ANIMATION_DURATION / 2,
easing: 'easeInOut',
}
)
@@ -540,7 +533,7 @@
this.#animateParentBackground();
gZenUIManager.motion
.animate(this.browserWrapper, arcSequence, {
duration: gZenUIManager.testingEnabled ? 0 : 0.3,
duration: gZenUIManager.testingEnabled ? 0 : this.#GLANCE_ANIMATION_DURATION,
ease: 'easeInOut',
})
.then(() => {
@@ -892,7 +885,7 @@
{
duration: 0.2,
type: 'spring',
bounce: 0.2,
bounce: this.#GLANCE_ANIMATION_DURATION - 0.1,
}
)
.then(() => {
@@ -929,7 +922,7 @@
opacity: [0.4, 1],
},
{
duration: 0.3,
duration: this.#GLANCE_ANIMATION_DURATION,
type: 'spring',
bounce: 0,
}
@@ -959,7 +952,10 @@
const arcSequence = this.#createGlanceArcSequence(closingData, 'closing');
gZenUIManager.motion
.animate(this.browserWrapper, arcSequence, { duration: 0.3, ease: 'easeOut' })
.animate(this.browserWrapper, arcSequence, {
duration: this.#GLANCE_ANIMATION_DURATION,
ease: 'easeOut',
})
.then(() => {
// Remove element preview after closing animation
const elementPreview = this.browserWrapper.querySelector('.zen-glance-element-preview');
@@ -1490,7 +1486,7 @@
height: ['100%', '100%'],
},
{
duration: 0.3,
duration: this.#GLANCE_ANIMATION_DURATION,
type: 'spring',
bounce: 0,
}