diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 7a6e48b6c..c22bae3f5 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -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 diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css index ffd3abb45..72985e22b 100644 --- a/src/browser/base/content/zen-styles/zen-browser-container.css +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -12,7 +12,6 @@ margin: 1px; :root[zen-right-side='true'] & { - margin-right: 0; margin-left: var(--zen-element-separation); } diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 4c169ad6d..fae4ce351 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -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 { diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index d6be69b67..e918b8f69 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -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; diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index 0899054cb..8311116da 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/src/browser/base/zen-components/ZenCompactMode.mjs @@ -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); }); } }, diff --git a/src/browser/base/zen-components/ZenKeyboardShortcuts.mjs b/src/browser/base/zen-components/ZenKeyboardShortcuts.mjs index 62b138fe4..a986f5d16 100644 --- a/src/browser/base/zen-components/ZenKeyboardShortcuts.mjs +++ b/src/browser/base/zen-components/ZenKeyboardShortcuts.mjs @@ -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; } }