diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 5f4929e12..9f9044756 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -123,6 +123,10 @@ pref('zen.view.sidebar-expanded.max-width', 400); pref('zen.view.show-bottom-border', false); pref('zen.view.use-single-toolbar', true); +#ifndef XP_MACOSX +pref('zen.view.hide-window-controls', true); +#endif + pref('zen.tabs.dim-pending', true); pref('zen.tabs.newtab-on-middle-click', true); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 055a98218..2d93a86dc 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -167,6 +167,16 @@ var gZenVerticalTabsManager = { return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches); }, + get _topButtonsSeparatorElement() { + if (this.__topButtonsSeparatorElement) { + return this.__topButtonsSeparatorElement; + } + this.__topButtonsSeparatorElement = document.createElement('div'); + this.__topButtonsSeparatorElement.id = 'zen-sidebar-top-buttons-separator'; + this.__topButtonsSeparatorElement.setAttribute('skipintoolbarset', 'true'); + return this.__topButtonsSeparatorElement; + }, + _updateEvent() { this._updateMaxWidth(); const topButtons = document.getElementById('zen-sidebar-top-buttons'); @@ -197,16 +207,22 @@ var gZenVerticalTabsManager = { let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)'); elements = Array.from(elements); const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target'); + // Add separator if it doesn't exist + if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) { + buttonsTarget.append(this._topButtonsSeparatorElement); + } for (const button of elements) { buttonsTarget.append(button); } - topButtons.appendChild(document.getElementById('unified-extensions-button')); - topButtons.appendChild(document.getElementById('PanelUI-button')); + buttonsTarget.prepend(document.getElementById('unified-extensions-button')); + buttonsTarget.prepend(document.getElementById('PanelUI-button')); if (this.isWindowsStyledButtons) { - document.getElementById('zen-appcontent-navbar-container').append( - document.querySelector('#nav-bar > .titlebar-buttonbox-container') - ); + const windowButtons = document.querySelector('#nav-bar > .titlebar-buttonbox-container'); + if (windowButtons) { + document.getElementById('zen-appcontent-navbar-container').append(windowButtons); + } } + document.documentElement.setAttribute("zen-single-toolbar", true); } // Always move the splitter next to the sidebar 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 fccc6df57..1a32300ec 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 @@ -7,6 +7,24 @@ height: 100%; } + :root[zen-single-toolbar='true'] { + & #zen-appcontent-navbar-container, + & #zen-sidebar-top-buttons { + --zen-toolbar-height: 32px; + height: var(--zen-toolbar-height); + } + + & #zen-sidebar-top-buttons .toolbarbutton-1 { + & > .toolbarbutton-icon { + padding: 5px; + } + } + + & #zen-sidebar-top-buttons-separator { + width: 100%; + } + } + #TabsToolbar > * { justify-content: center; } @@ -17,12 +35,53 @@ #browser { --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5); - :root[zen-no-padding='true'] & { --zen-toolbox-padding: 4px; } } + :root[zen-single-toolbar='true'] { + #urlbar-container { + width: -moz-available !important; + } + + .sharing-icon, + #identity-icon, + .urlbar-icon, + #permissions-granted-icon, + #tracking-protection-icon, + #tracking-protection-icon-box, + #blocked-permissions-container > .blocked-permission-icon { + width: 12px; + height: 12px; + } + + #identity-icon-box, + #identity-permission-box { + margin-top: auto; + margin-bottom: auto; + padding: 6px; + } + + & #urlbar-container, + & #urlbar { + --urlbar-container-height: 40px !important; + --urlbar-height: 38px !important; + } + + & #nav-bar { + margin-bottom: 8px; + } + + & #zen-sidebar-top-buttons { + margin: 4px 0; + } + + & #PanelUI-menu-button { + padding: 0 !important; + } + } + #vertical-pinned-tabs-container-separator { background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)); margin: 8px auto; @@ -55,22 +114,51 @@ & toolbarspring { display: none; } } - @media (-moz-bool-pref: 'zen.view.use-single-toolbar') { - & #zen-appcontent-navbar-container > .titlebar-buttonbox-container { - margin-left: auto; - width: fit-content; - } - - & #urlbar-container { - width: -moz-available !important; - } - } - .titlebar-spacer[type='pre-tabs'], .titlebar-spacer[type='post-tabs'] { display: none; } + :root[zen-single-toolbar='true'] { + #zen-appcontent-navbar-container { + display: flex; + -moz-window-dragging: drag; + + & #PersonalToolbar { + width: -moz-available; + } + + @media (not (-moz-platform: macos)) and (not (-moz-gtk-csd-reversed-placement)) { + @media (-moz-bool-pref: 'zen.view.hide-window-controls') { + & { + transition: height 0.2s ease-out, opacity 0.2s ease-out; + } + + &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) { + transition-delay: 0.2s; + height: var(--zen-element-separation); + overflow: hidden; + opacity: 0; + & > * { + pointer-events: none; + } + } + } + + & .titlebar-buttonbox-container { + margin-left: auto; + width: fit-content; + } + } + + @media (-moz-platform: macos) and (-moz-gtk-csd-reversed-placement) { + &:has(#PersonalToolbar[collapsed="true"]) { + display: none; + } + } + } + } + #TabsToolbar-customization-target { position: relative; max-width: 100%; @@ -248,12 +336,24 @@ } & #nav-bar { - padding: var(--zen-element-separation); padding-right: 0; - #browser:has(#navigator-toolbox[zen-right-side='true']) & { - padding-left: 0; - padding-right: var(--zen-element-separation); + :root[zen-single-toolbar='true'] & { + margin-left: var(--zen-toolbox-padding); + width: calc(100% - var(--zen-toolbox-padding)); + & .urlbar-input-container { + padding-left: 2px; + } + + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + padding-left: 0; + margin-right: var(--zen-toolbox-padding); + + & .urlbar-input-container { + padding-right: 2px; + padding-left: 0; + } + } } } @@ -503,18 +603,20 @@ order: -1; min-width: unset !important; - --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; + --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important; & #zen-sidebar-top-buttons-customization-target { height: 100%; align-items: center; + padding-inline-start: var(--zen-toolbox-padding); #nav-bar:has(&) & { padding-inline-start: var(--toolbarbutton-outer-padding); } #browser:has(#navigator-toolbox[zen-right-side='true']) & { - padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; + padding-inline-start: 0; + padding-inline-end: var(--zen-toolbox-padding); } & toolbarbutton { diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index 3394e1b09..41088e388 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -9,7 +9,6 @@ --urlbarView-separator-color: var(--zen-colors-border); --urlbarView-hover-background: var(--toolbarbutton-hover-background); --urlbarView-highlight-background: var(--toolbarbutton-hover-background); - box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); border-radius: var(--toolbarbutton-border-radius); overflow: hidden; padding: 1px; @@ -36,12 +35,14 @@ } #urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background { - background: color-mix(in srgb, light-dark(#fff, var(--zen-colors-tertiary)) 60%, transparent 40%) !important; + background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important; backdrop-filter: blur(10px); } #urlbar-background { border: transparent !important; + margin: 1px; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); } #urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background, @@ -51,15 +52,13 @@ outline-color: none !important; } -#identity-icon-box, -#identity-permission-box { - background: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%) !important; - margin: 0 8px 0 0 !important; +#identity-icon-box { + background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important; } -#identity-permission-box { - background: var(--zen-colors-border) !important; -} +#identity-permission-box:not(:hover):not(:focus-within) { + background: transparent !important; +} #urlbar:is([focused], [open]) > #urlbar-background, #searchbar:focus-within { @@ -95,6 +94,10 @@ padding: 0 !important; justify-content: center !important; align-items: center !important; + margin: 0; +} + +#tracking-protection-icon-container { margin: 0 0 0 2px !important; } @@ -102,11 +105,8 @@ #tracking-protection-icon-container { width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important; height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important; -} - -#identity-permission-box { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; + margin-top: auto !important; + margin-bottom: auto !important; } #identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box, @@ -205,15 +205,6 @@ button.popup-notification-dropmarker { border-radius: 10px !important; } -/* Border radius of boxes on the left */ -#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid']) - #identity-icon-box { - border-top-left-radius: 10px !important; - border-bottom-left-radius: 10px !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - /* Extensions or similar */ #urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box { border-radius: 10px !important; @@ -275,6 +266,5 @@ button.popup-notification-dropmarker { }*/ #PersonalToolbar:not([collapsed='true']) { - padding-bottom: 10px; padding-left: 0 !important; } diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 159769bef..fddc69f39 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -491,7 +491,6 @@ var gZenLooksAndFeel = { this.__hasInitialized = true; this._initializeColorPicker(this._getInitialAccentColor()); window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this); - this._initializeTabbarExpandForm(); gZenThemeBuilder.init(); gZenMarketplaceManager.init(); var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this); diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index d1a61be52..2bad6e6fb 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -74,7 +74,7 @@ #sidebar-button:-moz-locale-dir(ltr):not([positionend]), #sidebar-button:-moz-locale-dir(rtl)[positionend], #zen-sidepanel-button { - list-style-image: url('sidebars.svg') !important; + list-style-image: url('chrome://browser/skin/sidebars.svg') !important; } #downloads-button, @@ -927,7 +927,7 @@ menuitem[contexttype='fullscreen'][label*='Exit'] { } #zen-context-menu-compact-mode { - --menu-image: url('sidebars.svg'); + --menu-image: url('chrome://browser/skin/sidebars.svg'); } #context_bookmarkTab, @@ -954,7 +954,7 @@ menuitem[id='placesContext_showAllBookmarks'], } #BMB_viewBookmarksSidebar { - --menu-image: url('sidebars.svg'); + --menu-image: url('chrome://browser/skin/sidebars.svg'); } #BMB_searchBookmarks { diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn index e363add07..c6e75732b 100644 --- a/src/browser/themes/shared/zen-icons/jar.inc.mn +++ b/src/browser/themes/shared/zen-icons/jar.inc.mn @@ -113,7 +113,6 @@ skin/classic/browser/zen-icons/settings.svg (../shared/zen-icons/settings.svg) skin/classic/browser/zen-icons/share.svg (../shared/zen-icons/share.svg) skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/sidebars-right.svg) - skin/classic/browser/zen-icons/sidebars.svg (../shared/zen-icons/sidebars.svg) skin/classic/browser/zen-icons/source-code.svg (../shared/zen-icons/source-code.svg) skin/classic/browser/zen-icons/spell-check.svg (../shared/zen-icons/spell-check.svg) skin/classic/browser/zen-icons/split.svg (../shared/zen-icons/split.svg) diff --git a/src/browser/themes/shared/zen-icons/sidebars.svg b/src/browser/themes/shared/zen-icons/sidebars.svg deleted file mode 100644 index 72eca38a0..000000000 --- a/src/browser/themes/shared/zen-icons/sidebars.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file