ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 18:15:30 +02:00
Code Releases Wiki Activity

Refactor URL bar behavior, update compact mode styles, and enhance sidebar animations

Browse source
This commit is contained in:
mr. M 2024-12-14 17:43:17 +01:00
parent 37f5756ddb
commit a35c0fc1a7
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
6 changed files with 83 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/browser/app/profile/zen-browser.js
View file

@ -108,7 +108,7 @@ pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
pref('zen.view.compact.color-toolbar', true);
pref('zen.view.compact.color-sidebar', true);
pref('zen.urlbar.behavior', 'float'); // default, floating-on-type, float
pref('zen.urlbar.behavior', 'floating-on-type'); // default, floating-on-type, float
#ifdef XP_MACOSX
// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens

1
src/browser/base/content/zen-styles/zen-browser-container.css
View file

@ -12,7 +12,6 @@
margin: 1px;
:root[zen-right-side='true'] & {
margin-right: 0;
margin-left: var(--zen-element-separation);
}

6
src/browser/base/content/zen-styles/zen-compact-mode.css
View file

@ -33,7 +33,6 @@
position: absolute;
z-index: 10;
transition: transform 0.25s ease, opacity 0.1s ease-in-out;
right: calc(100% - var(--zen-element-separation));
top: 0;
bottom: var(--zen-element-separation);
opacity: 0;
@ -50,6 +49,10 @@
}
}
&:not([zen-right-side='true']) #navigator-toolbox {
right: calc(100% - var(--zen-element-separation));
}
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
* we need to adjust the top-padding of the toolbox to account for the
* extra toolbar height. */
@ -65,7 +68,6 @@
padding-left: unset !important;
padding-right: var(--zen-compact-float) !important;
left: calc(100% - var(--zen-element-separation));
right: unset;
}
& .browserSidebarContainer {

7
src/browser/base/content/zen-styles/zen-urlbar.css
View file

@ -353,9 +353,12 @@ button.popup-notification-dropmarker {
}
}
:root[zen-single-toolbar='true'] #urlbar[open] {
min-width: 45vw;
}
#urlbar[open][zen-floating-urlbar='true'] {
z-index: 1000;
min-width: 45vw;
max-width: 45vw;
top: 0 !important;
@ -435,7 +438,7 @@ button.popup-notification-dropmarker {
}
&:hover {
background-color: var(--zen-colors-primary) !important;
background-color: light-dark(var(--zen-colors-secondary), var(--zen-colors-primary)) !important;
.urlbarView-favicon {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;

91
src/browser/base/zen-components/ZenCompactMode.mjs
View file

@ -104,48 +104,71 @@ var gZenCompactModeManager = {
return;
}
this._isAnimating = true;
const sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
this.sidebar.style.pointerEvents = "none";
this.sidebar.style.opacity = "0";
document.getElementById('browser').style.overflow = "hidden";
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
this.sidebar.style.left = "0";
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
}
this.sidebar.style.pointerEvents = "none";
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("opacity");
});
}, 300);
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("opacity");
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("pointer-events");
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");
});
});
}, 400);
} else if (canHideSidebar && !isCompactMode) {
// we are in compact mode and we are exiting it
this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
document.getElementById('browser').style.overflow = "hidden";
this.sidebar.style.position = "relative";
this.sidebar.style.left = "0";
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
this.sidebar.style.transform = `translateX(${sidebarWidth}px)`;
}
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin-left .3s ease";
this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease";
// we are in compact mode and we are exiting it
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = "0";
this.sidebar.style.pointerEvents = "none";
} else {
this.sidebar.style.marginRight = "0";
this.sidebar.style.transform = "translateX(0)";
}
this.sidebar.style.pointerEvents = "none";
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("pointer-events");
});
}, 300);
});
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty("position");
this.sidebar.style.removeProperty("pointer-events");
this.sidebar.style.removeProperty("opacity");
this.sidebar.style.removeProperty("margin-left");
this.sidebar.style.removeProperty("margin-right");
this.sidebar.style.removeProperty("transform");
this.sidebar.style.removeProperty("transition");
this.sidebar.style.removeProperty("left");
document.getElementById('browser').style.removeProperty("overflow");
});
}, 400);
});
}
},

17
src/browser/base/zen-components/ZenKeyboardShortcuts.mjs
View file

@ -702,7 +702,7 @@ function zenGetDefaultShortcuts() {
}
class ZenKeyboardShortcutsVersioner {
static LATEST_KBS_VERSION = 4;
static LATEST_KBS_VERSION = 5;
constructor() {}
@ -807,6 +807,21 @@ class ZenKeyboardShortcutsVersioner {
// since it's not used anymore.
data = data.filter((shortcut) => shortcut.getID() != 'zen-toggle-sidebar');
}
if (version < 5) {
// Migrate from 4 to 5
// Here, we are adding the 'zen-toggle-sidebar' shortcut back, but with a new action
data.push(
new KeyShortcut(
'zen-toggle-sidebar',
'B',
'',
ZEN_OTHER_SHORTCUTS_GROUP,
KeyShortcutModifiers.fromObject({ alt: true }),
'code:gZenVerticalTabsManager.toggleExpand()',
'zen-sidebar-shortcut-toggle'
)
);
}
return data;
}
}