diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index d71b441fb..e8c539bf8 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -86,6 +86,7 @@ pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts pref('zen.keyboard.shortcuts.disable-firefox', false); pref('zen.tabs.dim-pending', true); pref('zen.themes.updated-value-observer', false); +pref('zen.themes.tabs.legacy-location', false); // Pref to enable the new profiles (TODO: Check this out!) //pref("browser.profiles.enabled", true); diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 92e8ea731..41d0c2d69 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -80,10 +80,15 @@ var ZenStartup = { }, _changeSidebarLocation() { + const legacyLocation = Services.prefs.getBoolPref("zen.themes.tabs.legacy-location", false); const kElementsToAppend = [ "sidebar-splitter", "sidebar-box", ]; + if (legacyLocation) { + kElementsToAppend.push("navigator-toolbox"); + window.document.documentElement.setAttribute("zen-sidebar-legacy", "true"); + } const wrapper = document.getElementById("zen-tabbox-wrapper"); const appWrapepr = document.getElementById("zen-sidebar-box-container"); for (let id of kElementsToAppend) { @@ -96,7 +101,9 @@ var ZenStartup = { const browser = document.getElementById("browser") const toolbox = document.getElementById("navigator-toolbox"); - browser.prepend(toolbox); + if (!legacyLocation) { + browser.prepend(toolbox); + } // remove all styles except for the width, since we are xulstoring the complet style list const width = toolbox.style.width; diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index 5b82ad473..754573697 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -83,7 +83,19 @@ @keyframes zen-sidebar-panel-animation-2 { 0% { opacity: 0; - transform: translateX(-50px); + transform: translateX(-5px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes zen-sidebar-panel-animation-right { + 0% { + opacity: 0; + transform: translateX(5px); } 100% { 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 e786c593e..d66acd22f 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -80,6 +80,10 @@ * 4. Calculate toolbar height, taken from zen-urlbar.css */ --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); + + :root[zen-sidebar-legacy="true"] & { + --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single); + } } #zen-sidebar-web-panel-wrapper, diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index bb71cc00c..461477719 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -165,6 +165,7 @@ --zen-sidebar-action-content-separator: calc(10px + var(--zen-tabbrowser-padding)); padding-top: var(--zen-sidebar-action-content-separator); margin-top: var(--zen-sidebar-action-content-separator); + color-scheme: inherit !important; } #zen-sidebar-icons-wrapper::before { 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 dc84784ac..0c7c93850 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 @@ -248,7 +248,7 @@ } @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { - #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) { + :root:not([zen-sidebar-legacy="true"]) #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) { padding-right: 47px !important; } } @@ -260,6 +260,7 @@ #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), :not([zen-user-hover="true"])) { + --zen-hover-animation: zen-sidebar-panel-animation-2; --zen-navigation-toolbar-min-width: 155px; min-width: var(--zen-navigation-toolbar-min-width) !important; align-items: start; @@ -267,7 +268,7 @@ width: 170px; border: none; padding-left: 2px; - animation: zen-sidebar-panel-animation-2 0.3s backwards; + animation: var(--zen-hover-animation) 0.3s backwards; & .tab-label-container { display: block; @@ -386,13 +387,17 @@ /* Display the vertical tabs on the right side */ @media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) { #navigator-toolbox { - order: 6 !important; + order: 8 !important; padding-left: 0 !important; + --zen-hover-animation: zen-sidebar-panel-animation-right !important; + } + + :root:not([zen-sidebar-legacy="true"]) { padding: calc(var(--zen-tabbrowser-padding) * 1.5); } #zen-sidebar-splitter { - order: 5 !important; + order: 7 !important; } #tabbrowser-tabpanels .browserSidebarContainer { @@ -477,7 +482,7 @@ border-top-right-radius: 0; border-top-left-radius: var(--zen-border-radius); - right: 100%; + right: 0; } #navigator-toolbox:hover,