Better yet...dynamic switching between tab bar and Sidebery

userChrome.css

@@ -1,6 +1,42 @@
-@-moz-document url("chrome://browser/content/browser.xhtml") {
-    #TabsToolbar {
-        visibility: collapse !important;
-        margin-bottom: 21px !important;
-    }
+#sidebar-header {
+    font-size: 1.2em !important;
+    padding: 2px 6px 2px 3px !important;
+}
+
+#sidebar-header #sidebar-close {
+    padding: 3px !important;
+}
+
+#sidebar-header #sidebar-close .toolbarbutton-icon {
+    width: 14px !important;
+    height: 14px !important;
+    opacity: 0.6 !important;
+}
+
+#main-window #titlebar {
+    overflow: hidden;
+    transition: height 0.3s 0.3s !important;
+}
+
+/* Default state: Set initial height to enable animation */
+#main-window #titlebar {
+    height: 3em !important;
+}
+
+#main-window[uidensity="touch"] #titlebar {
+    height: 3.35em !important;
+}
+
+#main-window[uidensity="compact"] #titlebar {
+    height: 2.7em !important;
+}
+
+/* Hidden state: Hide native tabs strip */
+#main-window[titlepreface*="XXX"] #titlebar {
+    height: 0 !important;
+}
+
+/* Hidden state: Fix z-index of active pinned tabs */
+#main-window[titlepreface*="XXX"] #tabbrowser-tabs {
+    z-index: 0 !important;
 }