added legacy toolbar support and fixed right side animation

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);

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");
+    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;

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% {

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,

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 {

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,