From bbe6cebe3f488a54dfd286b83b02e1dd92eff0bb Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 9 Jul 2022 22:44:43 +0900
Subject: [PATCH] Add: Vertical Tab - `userChrome.tab.as_titlebar`

---
 css/leptonChrome.css                          | 154 ++++++++++++------
 src/tabbar/_as_titlebar.scss                  |  43 +++++
 .../{_centerted.scss => _centered.scss}       |   0
 src/tabbar/_clipped_tab.scss                  |   4 +-
 src/tabbar/_index.scss                        |   5 +
 user.js                                       |   1 +
 6 files changed, 154 insertions(+), 53 deletions(-)
 create mode 100644 src/tabbar/_as_titlebar.scss
 rename src/tabbar/{_centerted.scss => _centered.scss} (100%)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index ebfad75..5908513 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -4036,6 +4036,53 @@
     }
   }
 }
+/*= Tab Bar - Show only current tab ==========================================*/
+@supports -moz-bool-pref("userChrome.tab.as_titlebar") {
+  :root:not([tabsintitlebar="true"]) #tabbrowser-tabs,
+  #scrollbutton-up,
+  #scrollbutton-down,
+  .titlebar-spacer[type="pre-tabs"],
+  spacer[part="overflow-end-indicator"],
+  .tabbrowser-tab:not([selected="true"]),
+  .tabbrowser-tab[selected="true"] .tab-background,
+  .tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after),
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+  #tabs-newtab-button {
+    display: none !important;
+  }
+
+  .tabbrowser-tab[selected="true"] {
+    -moz-window-dragging: drag;
+    --tab-max-width: 100%;
+  }
+
+  .tabbrowser-tab[selected="true"] .tab-label-container {
+    margin-inline: 0 !important;
+  }
+
+  .tab-content {
+    margin-inline: auto;
+    width: 100%;
+  }
+
+  /* Pinned */
+  #tabbrowser-tabs {
+    padding-inline: 0 !important;
+    /* Original: var(--tab-overflow-pinned-tabs-width) 0; */
+  }
+
+  .tab-throbber[pinned],
+  .tab-icon-pending[pinned],
+  .tab-icon-image[pinned],
+  .tab-sharing-icon-overlay[pinned],
+  .tab-icon-overlay[pinned] {
+    margin-inline-end: 5.5px;
+  }
+
+  .tab-label-container[pinned] {
+    width: unset !important;
+  }
+}
 /*= Tab Bar - Connect to window ==============================================*/
 @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
   .tab-background {
@@ -4800,36 +4847,20 @@
 }
 /** Clipped tabs - Show close button at pinned tab ****************************/
 @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
-  #tabbrowser-tabs {
-    --uc-close-button-size: 24px;
-    --uc-close-button-padding: 6px;
-    --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
-  }
+  @supports not -moz-bool-pref("userChrome.tab.as_titlebar") {
+    #tabbrowser-tabs {
+      --uc-close-button-size: 24px;
+      --uc-close-button-padding: 6px;
+      --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
+    }
 
-  #tabbrowser-tabs[closebuttons="activetab"] {
-    --uc-close-button-size: 20px;
-    --uc-close-button-padding: 4px;
-  }
+    #tabbrowser-tabs[closebuttons="activetab"] {
+      --uc-close-button-size: 20px;
+      --uc-close-button-padding: 4px;
+    }
 
-  .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button {
-    display: -moz-box !important;
-    -moz-box-ordinal-group: 0 !important;
-    /* Looks like hover */
-    width: var(--uc-close-button-size) !important;
-    height: var(--uc-close-button-size) !important;
-    padding: var(--uc-close-button-padding) !important;
-    margin-inline: var(--uc-close-button-margin) !important;
-  }
-  .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
-    width: 0 !important;
-    position: absolute;
-    bottom: 8px;
-  }
-  .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image {
-    display: none !important;
-  }
-  @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") {
-    .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {
+    .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy])
+      .tab-close-button {
       display: -moz-box !important;
       -moz-box-ordinal-group: 0 !important;
       /* Looks like hover */
@@ -4838,39 +4869,58 @@
       padding: var(--uc-close-button-padding) !important;
       margin-inline: var(--uc-close-button-margin) !important;
     }
-    .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
+    .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
       width: 0 !important;
       position: absolute;
       bottom: 8px;
     }
-    .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {
+    .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image {
       display: none !important;
     }
-  }
-  @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") {
-    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button {
-      display: -moz-box !important;
-      -moz-box-ordinal-group: 0 !important;
-      /* Looks like hover */
-      width: var(--uc-close-button-size) !important;
-      height: var(--uc-close-button-size) !important;
-      padding: var(--uc-close-button-padding) !important;
-      margin-inline: var(--uc-close-button-margin) !important;
+    @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") {
+      .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {
+        display: -moz-box !important;
+        -moz-box-ordinal-group: 0 !important;
+        /* Looks like hover */
+        width: var(--uc-close-button-size) !important;
+        height: var(--uc-close-button-size) !important;
+        padding: var(--uc-close-button-padding) !important;
+        margin-inline: var(--uc-close-button-margin) !important;
+      }
+      .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
+        width: 0 !important;
+        position: absolute;
+        bottom: 8px;
+      }
+      .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {
+        display: none !important;
+      }
     }
-    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
-      width: 0 !important;
-      position: absolute;
-      bottom: 8px;
+    @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") {
+      .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button {
+        display: -moz-box !important;
+        -moz-box-ordinal-group: 0 !important;
+        /* Looks like hover */
+        width: var(--uc-close-button-size) !important;
+        height: var(--uc-close-button-size) !important;
+        padding: var(--uc-close-button-padding) !important;
+        margin-inline: var(--uc-close-button-margin) !important;
+      }
+      .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
+        width: 0 !important;
+        position: absolute;
+        bottom: 8px;
+      }
+      .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image {
+        display: none !important;
+      }
     }
-    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image {
-      display: none !important;
-    }
-  }
 
-  #tabbrowser-tabs[closebuttons="activetab"]
-    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy])
-    .tab-close-button {
-    margin-inline-end: var(--uc-close-button-margin) !important;
+    #tabbrowser-tabs[closebuttons="activetab"]
+      .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy])
+      .tab-close-button {
+      margin-inline-end: var(--uc-close-button-margin) !important;
+    }
   }
 }
 /** Clipped tabs - Always show tab icon ***************************************/
diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss
new file mode 100644
index 0000000..b9b7459
--- /dev/null
+++ b/src/tabbar/_as_titlebar.scss
@@ -0,0 +1,43 @@
+:root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */
+#scrollbutton-up, /* Defaults */
+#scrollbutton-down,
+.titlebar-spacer[type="pre-tabs"],
+spacer[part="overflow-end-indicator"],
+.tabbrowser-tab:not([selected="true"]),
+.tabbrowser-tab[selected="true"] .tab-background,
+.tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after),
+.tabbrowser-tab[selected="true"] .tab-close-button,
+#tabs-newtab-button {
+  display: none !important;
+}
+
+.tabbrowser-tab[selected="true"] {
+  -moz-window-dragging: drag;
+  --tab-max-width: 100%;
+}
+.tabbrowser-tab[selected="true"] .tab-label-container {
+  margin-inline: 0 !important;
+}
+
+.tab-content {
+  margin-inline: auto;
+  width: 100%;
+}
+
+
+/* Pinned */
+#tabbrowser-tabs {
+  padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */
+}
+.tab-throbber,
+.tab-icon-pending,
+.tab-icon-image,
+.tab-sharing-icon-overlay,
+.tab-icon-overlay {
+  &[pinned] {
+    margin-inline-end: 5.5px;
+  }
+}
+.tab-label-container[pinned] {
+  width: unset !important;
+}
diff --git a/src/tabbar/_centerted.scss b/src/tabbar/_centered.scss
similarity index 100%
rename from src/tabbar/_centerted.scss
rename to src/tabbar/_centered.scss
diff --git a/src/tabbar/_clipped_tab.scss b/src/tabbar/_clipped_tab.scss
index 8b237a8..0762caf 100644
--- a/src/tabbar/_clipped_tab.scss
+++ b/src/tabbar/_clipped_tab.scss
@@ -10,7 +10,9 @@
 
 /** Clipped tabs - Show close button at pinned tab ****************************/
 @include Option("userChrome.tab.close_button_at_pinned") {
-  @import "clipped_tab/pinned_close_button";
+  @include NotOption("userChrome.tab.as_titlebar") {
+    @import "clipped_tab/pinned_close_button";
+  }
 }
 
 /** Clipped tabs - Always show tab icon ***************************************/
diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss
index e6d0096..fe5808f 100644
--- a/src/tabbar/_index.scss
+++ b/src/tabbar/_index.scss
@@ -33,6 +33,11 @@
   @import "layout";
 }
 
+/*= Tab Bar - Show only current tab ==========================================*/
+@include Option("userChrome.tab.as_titlebar") {
+  @import "as_titlebar";
+}
+
 /*= Tab Bar - Connect to window ==============================================*/
 @include Option("userChrome.tab.connect_to_window") {
   @import "connect_to_window";
diff --git a/user.js b/user.js
index 1694895..811031f 100644
--- a/user.js
+++ b/user.js
@@ -99,6 +99,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.tab.on_bottom.menubar_on_top",        true); // Need on_bottom
 // user_pref("userChrome.tab.one_line",                        true);
 // user_pref("userChrome.tab.one_line.tabbar_first",           true);
+// user_pref("userChrome.tab.as_titlebar",                     true);
 // user_pref("userChrome.tab.always_show_tab_icon",            true);
 // user_pref("userChrome.tab.close_button_at_pinned",          true);
 // user_pref("userChrome.tab.close_button_at_pinned.always",   true);