diff --git a/l10n b/l10n index 6b7d9d351..bb99a55c2 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 6b7d9d351f2c874e2700204eeebf1d8a4b1529f5 +Subproject commit bb99a55c2dbad4cd1207f6dbd3c1380801eec751 diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index d659102a9..7a6e48b6c 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -107,7 +107,8 @@ pref('zen.view.compact.toolbar-flash-popup.duration', 800); 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.view.use-deprecated-urlbar', false); + +pref('zen.urlbar.behavior', 'float'); // default, floating-on-type, float #ifdef XP_MACOSX // Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens @@ -130,9 +131,7 @@ 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); -#endif pref('zen.tabs.dim-pending', true); pref('zen.tabs.newtab-on-middle-click', true); @@ -294,3 +293,5 @@ pref('browser.download.autohideButton', false); #ifdef XP_MACOSX pref('widget.macos.titlebar-blend-mode.behind-window', true); #endif + +pref("browser.urlbar.maxRichResults", 5); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 182bebbc5..0edb2a523 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -378,6 +378,11 @@ var gZenVerticalTabsManager = { } } + // Case: single toolbar, not compact mode, not right side and macos styled buttons + if (doNotChangeWindowButtons && isSingleToolbar && !isCompactMode && !isRightSide && !this.isWindowsStyledButtons) { + topButtons.prepend(windowButtons); + } + if (doNotChangeWindowButtons) { if (isRightSide && !isSidebarExpanded) { navBar.appendChild(windowButtons); diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index 807c33138..43b836a33 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -25,6 +25,21 @@ } } +@keyframes zen-new-tab-appear-vertical { + 0% { + opacity: 0; + transform: translateY(-25px); + } + 60% { + opacity: 0.8 ; + transform: translateY(4px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + @keyframes zen-main-app-wrapper-animation { from { opacity: 1; diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index 0d20f0c47..bf00d2605 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -53,6 +53,10 @@ } } +:root:not([zen-single-toolbar='true']) #zen-appcontent-wrapper { + z-index: 2; +} + #zen-main-app-wrapper { background: transparent; overflow: hidden; 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 acc0f28ce..4c169ad6d 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -2,6 +2,14 @@ @media (-moz-bool-pref: 'zen.view.compact') { :root:not([customizing]):not([inDOMFullscreen='true']) { + #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) { + max-height: 0 !important; + min-height: 0 !important; + opacity: 0; + overflow: hidden; + pointer-events: none; + } + @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') { #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) { margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important; @@ -19,15 +27,6 @@ display: none !important; } - - #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) { - max-height: 0 !important; - min-height: 0 !important; - opacity: 0; - overflow: hidden; - pointer-events: none; - } - #navigator-toolbox { --zen-toolbox-max-width: 54px !important; --zen-compact-float: calc(var(--zen-element-separation) - 1px); @@ -147,7 +146,7 @@ border-bottom-right-radius: var(--zen-border-radius); border-top-left-radius: env(-moz-gtk-csd-titlebar-radius); border-top-right-radius: env(-moz-gtk-csd-titlebar-radius); - transition: all 0.1s ease-in-out; + transition: all 0.15s ease; width: 100%; opacity: 0; background: var(--zen-dialog-background); @@ -157,6 +156,11 @@ position: relative !important; } + & #urlbar { + transform: translateY(-50%); + transition: transform 0.1s ease-in-out; + } + :root[zen-window-buttons-reversed='true'] & { padding-left: 0 !important; padding-right: var(--zen-toolbox-padding) !important; @@ -181,6 +185,10 @@ border-top-width: 1px; top: -1px; + + & #urlbar { + transform: translateY(0); + } } } } 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 54335dcff..7cf3799c9 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 @@ -42,6 +42,12 @@ } } } + + #vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox { + .tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] { + animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); + } + } } :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container { @@ -218,7 +224,6 @@ } & .tabbrowser-tab { - animation: none; transition: scale 0.1s ease-in-out; &[fadein='true']:not([zen-essential='true']) { #tabbrowser-tabs[zen-workspace-animation='previous'] & { @@ -366,7 +371,7 @@ padding-right: 0; :root[zen-single-toolbar='true'] & { - margin-left: var(--zen-toolbox-padding); + margin-left: calc(var(--zen-toolbox-padding) / 2); width: calc(100% - var(--zen-toolbox-padding)); & #urlbar:not([breakout-extend='true']) .urlbar-input-container { padding-left: 4px; diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index d06cc1142..d6be69b67 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -337,47 +337,112 @@ button.popup-notification-dropmarker { } } -@media not (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') { - #urlbar[open] { - z-index: 1000; - min-width: 45vw; - max-width: 45vw; - top: 0 !important; - --urlbar-container-height: 55px !important; - --urlbar-margin-inline: 10px !important; - font-size: 1.1em; - - & #urlbar-background { - /* We cant have a transparent background with a backdrop-filter because on normal websites, - the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended - due to performance issues */ - background-color: var(--zen-branding-bg) !important; - box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important; - outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important; - outline-offset: -1px !important; - } +#urlbar[open] { + --urlbar-container-height: 55px !important; + --urlbar-margin-inline: 10px !important; + font-size: 1.1em; + + & #urlbar-background { + /* We cant have a transparent background with a backdrop-filter because on normal websites, + the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended + due to performance issues */ + background-color: var(--zen-branding-bg) !important; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important; + outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important; + outline-offset: -1px !important; + } +} - & #identity-box { - margin-right: var(--urlbar-margin-inline); - } +#urlbar[open][zen-floating-urlbar='true'] { + z-index: 1000; + min-width: 45vw; + max-width: 45vw; + top: 0 !important; - :root[zen-right-side='true'] & { - right: 0; - } - position: absolute; + & #identity-box { + margin-right: var(--urlbar-margin-inline); + } - top: calc(var(--zen-toolbar-height) * 2) !important; - left: 28vw; + :root[zen-right-side='true'] & { + right: 0; + } + position: absolute; - #urlbar-container:has(&) { - border-radius: 10px; - background: var(--toolbarbutton-hover-background); - } + top: calc(var(--zen-toolbar-height) * 2) !important; + left: 28vw; + + #urlbar-container:has(&) { + border-radius: 10px; + background: var(--toolbarbutton-hover-background); } } -@media (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') { - #urlbar[open] { - top: 0 !important; +/* Code ~~stolen~~ taken inspiration from https://github.com/greeeen-dev/zen-arc-cmd-bar + * + * MIT License + * + * Copyright (c) 2024 green. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + **/ +.urlbarView-title, .urlbarView-title-separator, .urlbarView-action, .urlbarView-url { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.urlbarView-title { + font-size: 14px !important; + font-weight: 500 !important; +} + +.urlbarView-url, .urlbarView-title-separator::before { + font-size: 14px !important; + font-weight: 500 !important; + color: #aaa !important; +} + +.urlbarView-favicon { + margin-left: 0 !important; + margin-right: 12px !important; + padding: 6px !important; + border-radius: 6px !important; +} + +.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) .urlbarView-action { + margin-left: auto !important; + margin-right: 0 !important; +} + +.urlbarView-row { + .urlbarView-favicon { + transition: background-color 0.05s; + } + + &:hover { + background-color: var(--zen-colors-primary) !important; + + .urlbarView-favicon { + background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important; + } + + .urlbarView-url, .urlbarView-title-separator::before { + color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important; + } } } diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 9675f4c89..2207e4094 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -1087,6 +1087,11 @@ Preferences.addAll([ type: "bool", default: true, }, + { + id: "zen.urlbar.behavior", + type: "string", + default: "float", + }, { id: "zen.view.compact.color-sidebar", type: "bool", diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml index d13ab9b6d..170c6745b 100644 --- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml +++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml @@ -340,6 +340,29 @@ + + + +