mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-07 10:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add experimental window controls preference and improve compact mode sidebar handling

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

1
src/browser/app/profile/zen-browser.js
View File

@@ -138,6 +138,7 @@ pref('zen.view.sidebar-collapsed.hide-mute-button', true);
pref('zen.view.experimental-force-window-controls-left', false); pref('zen.view.experimental-force-window-controls-left', false);
pref('zen.view.hide-window-controls', true); pref('zen.view.hide-window-controls', true);
pref('zen.view.experimental-no-window-controls', false);
pref('zen.tabs.dim-pending', true); pref('zen.tabs.dim-pending', true);
pref('zen.tabs.newtab-on-middle-click', true); pref('zen.tabs.newtab-on-middle-click', true);

11
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css
View File

@@ -2,7 +2,7 @@ height: var(--zen-toolbar-height);
@media (-moz-bool-pref: 'zen.view.hide-window-controls') { @media (-moz-bool-pref: 'zen.view.hide-window-controls') {
& { & {
transition: height 0.2s ease, opacity 0.2s ease-out; transition: height 0.15s ease, opacity 0.1s ease-out;
transition-delay: 0.2s; transition-delay: 0.2s;
& > * { & > * {
@@ -21,6 +21,15 @@ height: var(--zen-toolbar-height);
pointer-events: none; pointer-events: none;
} }
} }
@media (-moz-bool-pref: 'zen.view.experimental-no-window-controls') {
&:has(#PersonalToolbar[collapsed='true']) {
max-height: 0 !important;
overflow: hidden;
opacity: 0 !important;
pointer-events: none !important;
}
}
} }
:root[inDOMFullscreen='true'] & { :root[inDOMFullscreen='true'] & {

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

@@ -67,6 +67,8 @@ var gZenCompactModeManager = {
}, },
updateCompactModeContext(isSingleToolbar) { updateCompactModeContext(isSingleToolbar) {
this.getAndApplySidebarWidth(); // Ignore return value
const IDs = ['zen-context-menu-compact-mode-hide-sidebar', 'zen-context-menu-compact-mode-hide-toolbar', 'zen-context-menu-compact-mode-hide-both']; const IDs = ['zen-context-menu-compact-mode-hide-sidebar', 'zen-context-menu-compact-mode-hide-toolbar', 'zen-context-menu-compact-mode-hide-both'];
for (let id of IDs) { for (let id of IDs) {
document.getElementById(id).disabled = isSingleToolbar; document.getElementById(id).disabled = isSingleToolbar;
@@ -99,6 +101,12 @@ var gZenCompactModeManager = {
this.animateCompactMode(); this.animateCompactMode();
}, },
getAndApplySidebarWidth() {
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
this.sidebar.style.setProperty("--zen-sidebar-width", `${sidebarWidth}px`);
return sidebarWidth;
},
animateCompactMode() { animateCompactMode() {
const isCompactMode = this.prefefence; const isCompactMode = this.prefefence;
const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar'); const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
@@ -109,8 +117,7 @@ var gZenCompactModeManager = {
// Do this so we can get the correct width ONCE compact mode styled have been applied // Do this so we can get the correct width ONCE compact mode styled have been applied
this.sidebar.setAttribute("animate", "true"); this.sidebar.setAttribute("animate", "true");
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
let sidebarWidth = this.sidebar.getBoundingClientRect().width; let sidebarWidth = this.getAndApplySidebarWidth();
this.sidebar.style.setProperty("--zen-sidebar-width", `${sidebarWidth}px`);
if (!this._canAnimateSidebar) { if (!this._canAnimateSidebar) {
this.sidebar.removeAttribute("animate"); this.sidebar.removeAttribute("animate");
this._isAnimating = false; this._isAnimating = false;