mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed compact mode animations for macos, having laggy window buttons and splitter size for macos

Browse Source
This commit is contained in:
mr. M
2024-12-21 22:07:02 +01:00
parent c0515c961e
commit 8f2429e61c
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -38,8 +38,7 @@
&:not([animate='true']) {
position: absolute;
z-index: 10;
transition: transform 0.25s ease, opacity 1.5s ease;
transform: translateX(0);
transition: left 0.25s ease, right 0.25s ease, opacity 1.5s ease;
top: 0;
bottom: var(--zen-element-separation);
opacity: 0;
@@ -60,7 +59,7 @@
}
&:not([zen-right-side='true']) #navigator-toolbox {
right: calc(100% - var(--zen-element-separation) + 1px);
left: calc(-1 * var(--zen-sidebar-width) + 1px);
}
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
@@ -75,7 +74,10 @@
&[zen-right-side='true'] {
& #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
left: calc(100% - var(--zen-element-separation) + 1px);
&:not([animate='true']) {
right: calc(-1 * var(--zen-sidebar-width) + 1px);
}
}
& .browserSidebarContainer {
@@ -114,12 +116,13 @@
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*:is([open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)) {
&:not([animate='true']) {
transition: transform 0.25s ease;
transition: left 0.25s ease, right 0.25s ease;
opacity: 1;
transform: translateX(calc(100% - var(--zen-compact-float)));
left: -1px;
:root[zen-right-side='true'] & {
transform: translateX(calc(-100% + var(--zen-compact-float)));
right: -1px;
left: auto;
}
}
}

3
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -679,7 +679,8 @@
/* Mark: Separator styling */
#zen-sidebar-splitter {
opacity: 0;
width: var(--zen-toolbox-padding);
max-width: var(--zen-toolbox-padding) !important;
min-width: var(--zen-toolbox-padding) !important;
height: 100%;
transition: opacity 0.2s ease-in-out;
background: var(--zen-colors-border);

16
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -102,7 +102,7 @@ var gZenCompactModeManager = {
animateCompactMode() {
const isCompactMode = this.prefefence;
const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
if (this._isAnimating || !this._canAnimateSidebar) {
if (this._isAnimating) {
return;
}
this._isAnimating = true;
@@ -110,6 +110,12 @@ var gZenCompactModeManager = {
this.sidebar.setAttribute("animate", "true");
window.requestAnimationFrame(() => {
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
this.sidebar.style.setProperty("--zen-sidebar-width", `${sidebarWidth}px`);
if (!this._canAnimateSidebar) {
this.sidebar.removeAttribute("animate");
this._isAnimating = false;
return;
}
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
this.sidebar.style.position = "unset";
@@ -125,16 +131,18 @@ var gZenCompactModeManager = {
window.requestAnimationFrame(() => {
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("margin-right");
this.sidebar.style.removeProperty("transform");
this.sidebar.style.removeProperty("left");
document.getElementById('browser').style.removeProperty("overflow");
this.sidebar.removeAttribute("animate");
this.sidebar.style.removeProperty("transition");
window.requestAnimationFrame(() => {
this.sidebar.style.removeProperty("transition");
this._isAnimating = false;
});
});
}, 450);
});