Add: Auto Hide - Tab Bar

css/leptonChrome.css

@@ -5455,6 +5455,54 @@
     z-index: 2;
   }
 }
+@supports -moz-bool-pref("userChrome.autohide.tabbar") {
+  :root:not([customizing]) #navigator-toolbox {
+    position: relative;
+    z-index: 1;
+  }
+
+  #navigator-toolbox:not(:hover) > #titlebar {
+    -moz-window-dragging: no-drag !important;
+    pointer-events: none;
+  }
+
+  :root:not([customizing]) #navigator-toolbox:hover,
+  :root:not([customizing]) #titlebar {
+    margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
+  }
+
+  #TabsToolbar:not([customizing]) {
+    opacity: 0;
+  }
+
+  #navigator-toolbox:hover > #titlebar {
+    margin-bottom: 0px;
+  }
+  #navigator-toolbox:hover #TabsToolbar {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    #navigator-toolbox,
+    #titlebar {
+      transition: margin-bottom 0.25s var(--animation-easing-function) 600ms;
+    }
+
+    #TabsToolbar:not([customizing]) {
+      transition: opacity 0.25s var(--animation-easing-function) 600ms;
+    }
+
+    #navigator-toolbox:hover {
+      transition-delay: 0s;
+    }
+    #navigator-toolbox:hover > #titlebar {
+      transition-delay: 0s;
+    }
+    #navigator-toolbox:hover #TabsToolbar {
+      transition-delay: 0s;
+    }
+  }
+}
 @supports -moz-bool-pref("userChrome.autohide.navbar") {
   :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) {
     transform: translateY(var(--uc-navbar-hide-height));

src/autohide/_index.scss

@@ -3,6 +3,9 @@
 }
 
 @import "common";
+@include Option("userChrome.autohide.tabbar") {
+  @import "tabbar";
+}
 @include Option("userChrome.autohide.navbar") {
   @import "navbar";
 }

src/autohide/_tabbar.scss

@@ -0,0 +1,61 @@
+:root:not([customizing]) #navigator-toolbox {
+  position: relative;
+  z-index: 1;
+}
+
+#navigator-toolbox:not(:hover) > #titlebar {
+  -moz-window-dragging: no-drag !important;
+  pointer-events: none
+}
+
+:root:not([customizing]) #navigator-toolbox:hover,
+:root:not([customizing]) #titlebar {
+  margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
+}
+
+#TabsToolbar:not([customizing]) {
+  opacity: 0;
+}
+
+#navigator-toolbox:hover {
+  > #titlebar {
+    margin-bottom: 0px;
+  }
+  #TabsToolbar {
+    opacity: 1;
+  }
+}
+
+@include Animate {
+  #navigator-toolbox,
+  #titlebar {
+    transition: margin-bottom 0.25s var(--animation-easing-function) 600ms;
+  }
+
+  #TabsToolbar:not([customizing]) {
+    transition: opacity 0.25s var(--animation-easing-function) 600ms;
+  }
+
+  #navigator-toolbox:hover {
+    transition-delay: 0s;
+
+    > #titlebar {
+      transition-delay: 0s;
+    }
+
+    #TabsToolbar {
+      transition-delay: 0s;
+    }
+  }
+}
+
+// /* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */
+// #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
+//   max-height: var(--tab-min-height);
+// }
+// .tab-label {
+//   line-height: 20px !important;
+// }
+// :root[uidensity="compact"] .tab-label {
+//   line-height: 18px !important;
+// }

user.js

@@ -70,8 +70,9 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 
 // user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
 
-// user_pref("userChrome.autohide.bookmarkbar",                true);
+// user_pref("userChrome.autohide.tabbar",                     true);
 // user_pref("userChrome.autohide.navbar",                     true);
+// user_pref("userChrome.autohide.bookmarkbar",                true);
 // user_pref("userChrome.autohide.sidebar",                    true);
 // user_pref("userChrome.autohide.forward_button",             true);