diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index b931cbd17..8f7c81c58 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -120,6 +120,7 @@ pref('zen.view.show-bottom-border', false); pref('zen.view.use-single-toolbar', true); pref('zen.view.sidebar-expanded', true); pref('zen.view.sidebar-collapsed.hide-mute-button', true); +pref('zen.view.experimental-force-window-controls-left', false); #ifndef XP_MACOSX pref('zen.view.hide-window-controls', true); @@ -175,7 +176,11 @@ pref('zen.essentials.enabled', true); pref('zen.workspaces.container-specific-essentials-enabled', false); // Zen Watermark +#ifdef MOZILLA_OFFICIAL pref('zen.watermark.enabled', true, sticky); +#else +pref('zen.watermark.enabled', false, sticky); +#endif // Smooth scrolling pref('apz.overscroll.enabled', true); // not DEFAULT on Linux diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 32c8f406f..0520efab5 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -118,7 +118,8 @@ var gZenUIManager = { var gZenVerticalTabsManager = { init() { ChromeUtils.defineLazyGetter(this, 'isWindowsStyledButtons', () => { - return !(window.AppConstants.platform === 'macosx' || window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches); + return !(window.AppConstants.platform === 'macosx' || window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches + || Services.prefs.getBoolPref('zen.view.experimental-force-window-controls-left')); }); var updateEvent = this._updateEvent.bind(this); @@ -131,9 +132,10 @@ var gZenVerticalTabsManager = { this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement; gZenCompactModeManager.addEventListener(updateEvent); - this._updateEvent(); this.initRightSideOrderContextMenu(); + window.addEventListener('DOMContentLoaded', updateEvent, { once: true }); + const tabs = document.getElementById('tabbrowser-tabs'); XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true); diff --git a/src/browser/base/content/zen-styles/zen-tabs.css b/src/browser/base/content/zen-styles/zen-tabs.css index 3603023a4..ea738b686 100644 --- a/src/browser/base/content/zen-styles/zen-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs.css @@ -4,6 +4,7 @@ #zen-tabbox-wrapper { position: relative; + z-index: 0; } @media (-moz-bool-pref: 'zen.workspaces.hide-default-container-indicator') { diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index fdd3560a0..775490818 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -89,7 +89,7 @@ & #urlbar-container, & #urlbar { - --urlbar-container-height: 40px !important; + --urlbar-container-height: 40px; --urlbar-height: 38px !important; } @@ -169,7 +169,10 @@ :root[zen-window-buttons-reversed='true'] & { &:has(#PersonalToolbar[collapsed="true"]) { - display: none; + opacity: 0; + & > * { + display: none; + } } } } @@ -361,7 +364,10 @@ padding: var(--zen-toolbox-padding); padding-left: 0; padding-top: 0; - z-index: 1; + + #PersonalToolbar:not([collapsed='true']) { + padding-left: 0 !important; + } & #titlebar { min-width: 150px; @@ -377,7 +383,7 @@ :root[zen-single-toolbar='true'] & { margin-left: var(--zen-toolbox-padding); width: calc(100% - var(--zen-toolbox-padding)); - & .urlbar-input-container { + & #urlbar:not([breakout-extend='true']) .urlbar-input-container { padding-left: 4px; padding-right: 4px; } diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 31a4e33eb..af900d3a6 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -96,6 +96,8 @@ --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b); --zen-main-browser-background-toolbar: var(--zen-main-browser-background); + --browser-area-z-index-toolbox: 2 !important; + --zen-appcontent-border: 1px solid var(--zen-colors-border); --zen-panel-radius: var(--zen-border-radius); diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index c836765b8..d9b29dc32 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -10,12 +10,50 @@ --urlbarView-hover-background: var(--toolbarbutton-hover-background); --urlbarView-highlight-background: var(--toolbarbutton-hover-background); border-radius: var(--toolbarbutton-border-radius); - overflow: hidden; padding: 1px; + font-size: 1.1em; } -#urlbar[focused='true'][breakout-extend='true'] { - overflow: visible; +#urlbar[breakout-extend='true'] { + z-index: 1000; + max-width: 45%; + min-width: 45%; + --urlbar-container-height: 55px !important; + --urlbar-margin-inline: 10px !important; + position: fixed; + + top: calc(var(--zen-toolbar-height) * 4); + left: 50%; + transform: translateX(-50%); + + & #urlbar-background { + background: var(--zen-branding-bg) !important; + backdrop-filter: blur(10px); + border: 1px solid var(--arrowpanel-border-color) !important; + } + + & #identity-box { + margin-right: var(--urlbar-margin-inline); + } + + #urlbar-container:has(&) { + border-radius: var(--toolbarbutton-border-radius); + background: var(--toolbarbutton-hover-background); + + &::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: -1; + width: 100%; + height: 100%; + pointer-events: none; + } + } } #searchbar:focus-within { @@ -84,7 +122,7 @@ position: relative; } -#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) { +#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) { margin-inline-end: 0 !important; } @@ -126,10 +164,6 @@ } :root[zen-single-toolbar='true'] { - #urlbar[breakout-extend='true'] { - top: 0px !important; - width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline) * 4); - } #notification-popup-box { align-items: center; @@ -308,7 +342,3 @@ button.popup-notification-dropmarker { /*.titlebar-button:last-child { padding-right: var(--zen-element-separation) !important; }*/ - -#PersonalToolbar:not([collapsed='true']) { - padding-left: 0 !important; -} diff --git a/src/browser/base/zen-components/ZenPinnedTabManager.mjs b/src/browser/base/zen-components/ZenPinnedTabManager.mjs index 6388bc761..b860c08d9 100644 --- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs +++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs @@ -492,7 +492,7 @@ // Return as a proper data URL return `data:${faviconData.mimeType};base64,${base64String}`; } catch (ex) { - console.error("Failed to get favicon:", ex); + // console.error("Failed to get favicon:", ex); return null; } } @@ -577,4 +577,4 @@ } window.gZenPinnedTabManager = new ZenPinnedTabManager(); -} \ No newline at end of file +} diff --git a/src/browser/themes/shared/browser-shared-css.patch b/src/browser/themes/shared/browser-shared-css.patch index 577cb8896..4d96f3d11 100644 --- a/src/browser/themes/shared/browser-shared-css.patch +++ b/src/browser/themes/shared/browser-shared-css.patch @@ -1,8 +1,8 @@ diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css -index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a331ea42b 100644 +index 08bc078c2572fb218b435e580ef71be2586989c3..e440b6dc3f331785c841e1702887f67a67e00e96 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css -@@ -188,7 +187,6 @@ body { +@@ -144,7 +144,6 @@ body { transition: background-color var(--inactive-window-transition); &:-moz-window-inactive { @@ -10,8 +10,8 @@ index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a color: var(--toolbox-non-lwt-textcolor-inactive); } -@@ -196,6 +194,31 @@ body { - border-bottom-color: var(--chrome-content-separator-color); +@@ -163,6 +162,31 @@ body { + border-bottom-color: var(--chrome-content-separator-color); } + @@ -38,7 +38,7 @@ index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right top, var(--lwt-background-alignment); + } -+ ++ :root[customizing] & { border-bottom-style: none; }