From 4cd0a0149eb4205538c4e389e737d5b98ba7bb90 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 17 Apr 2023 01:27:36 +0900
Subject: [PATCH] Add: Tab - Container on top #478

---
 css/leptonChrome.css        | 92 ++++++++++++++++++++++---------------
 src/tab/_container_tab.scss | 90 +++++++++++++++++++++---------------
 user.js                     |  1 +
 3 files changed, 111 insertions(+), 72 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index fa69947..ecdaf81 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -8295,12 +8295,18 @@
     #tabbrowser-tabs {
       --uc-container-position-x: 9px;
       --uc-container-position-y-default: 11.5px;
-      --uc-container-position-y: calc(50% + var(--uc-container-position-y-default));
+      --uc-container-position-y-bottom: calc(50% + var(--uc-container-position-y-default));
+      --uc-container-position-y: var(--uc-container-position-y-bottom);
       --uc-titlechanged-container-position-x: 32%, 50%, 70%;
     }
     #tabbrowser-tabs:-moz-locale-dir(rtl) {
       --uc-container-position-x: -9px;
     }
+    @supports -moz-bool-pref("userChrome.tab.container.on_top") {
+      #tabbrowser-tabs {
+        --uc-container-position-y: calc(50% - var(--uc-container-position-y-default));
+      }
+    }
     :root[uidensity="compact"] #tabbrowser-tabs {
       --uc-container-position-y-default: 10.5px;
       --uc-titlechanged-container-position-x: 30%, 50%, 70%;
@@ -8308,7 +8314,7 @@
     :root[uidensity="touch"] #tabbrowser-tabs {
       --uc-container-position-y-default: 12.5px;
     }
-    .tab-content:not([titlechanged])::before {
+    .tab-content::before {
       /* Box Model */
       content: "";
       display: block;
@@ -8344,42 +8350,56 @@
         opacity: 0;
       }
     }
-    /* Pinned Tab - Titlechanged Indicator override */
-    .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
-    .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-      /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
-      --dotted-identity-image: radial-gradient(
-        circle,
-        var(--identity-icon-color),
-        var(--identity-icon-color) 2px,
-        transparent 2px
-      );
-      background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
-      background-position-x: var(--uc-titlechanged-container-position-x) !important;
-    }
-    .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
-    .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-      /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
-      background-position-y: top var(--uc-container-position-y) !important;
-    }
-    /* Pinned Tab - Titlechanged & soundplaying */
-    .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-      > .tab-stack
-      > .tab-content[attention]:not([selected="true"]),
-    .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-      > .tab-stack
-      > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-      --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
-    }
-    :root[uidensity="compact"]
+    @supports not -moz-bool-pref("userChrome.tab.container.on_top") {
+      .tab-content[titlechanged]::before {
+        opacity: 0;
+      }
+      /* Pinned Tab - Titlechanged Indicator override */
+      .tabbrowser-tab:is([image], [pinned])[usercontextid]
+        > .tab-stack
+        > .tab-content[attention]:not([selected="true"]),
+      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+        /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
+        --dotted-identity-image: radial-gradient(
+          circle,
+          var(--identity-icon-color),
+          var(--identity-icon-color) 2px,
+          transparent 2px
+        );
+        background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
+        background-position-x: var(--uc-titlechanged-container-position-x) !important;
+      }
+      .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+        /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
+        background-position-y: top var(--uc-container-position-y) !important;
+      }
+      /* Pinned Tab - Titlechanged & soundplaying */
       .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-      > .tab-stack
-      > .tab-content[attention]:not([selected="true"]),
-    :root[uidensity="compact"]
+        > .tab-stack
+        > .tab-content[attention]:not([selected="true"]),
       .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-      > .tab-stack
-      > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-      --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
+        > .tab-stack
+        > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+        --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
+      }
+      :root[uidensity="compact"]
+        .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[attention]:not([selected="true"]),
+      :root[uidensity="compact"]
+        .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+        --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
+      }
+    }
+    @supports -moz-bool-pref("userChrome.tab.container.on_top") {
+      .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+        /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
+        background-position-y: top var(--uc-container-position-y-bottom) !important;
+      }
     }
   }
 }
diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss
index a52f9d1..139ccae 100644
--- a/src/tab/_container_tab.scss
+++ b/src/tab/_container_tab.scss
@@ -12,7 +12,11 @@
   }
 
   --uc-container-position-y-default: 11.5px;
-  --uc-container-position-y: calc(50% + var(--uc-container-position-y-default));
+  --uc-container-position-y-bottom: calc(50% + var(--uc-container-position-y-default));
+  --uc-container-position-y: var(--uc-container-position-y-bottom);
+  @include Option("userChrome.tab.container.on_top") {
+    --uc-container-position-y: calc(50% - var(--uc-container-position-y-default));
+  }
 
   // Pinned Tab - Titlechanged Indicator override
   --uc-titlechanged-container-position-x: 32%, 50%, 70%;
@@ -25,7 +29,7 @@
 :root[uidensity="touch"] #tabbrowser-tabs {
   --uc-container-position-y-default: 12.5px;
 }
-.tab-content:not([titlechanged])::before {
+.tab-content::before {
   /* Box Model */
   content: "";
   display: block;
@@ -66,42 +70,56 @@
   // Don't hide at userChrome.tab.close_button_at_pinned.background
 }
 
-/* Pinned Tab - Titlechanged Indicator override */
-.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
-.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
-  --dotted-identity-image: radial-gradient(
-    circle,
-    var(--identity-icon-color),
-    var(--identity-icon-color) 2px,
-    transparent 2px
-  );
-  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
-  background-position-x: var(--uc-titlechanged-container-position-x) !important;
-}
+@include NotOption("userChrome.tab.container.on_top") {
+  .tab-content[titlechanged]::before {
+    opacity: 0;
+  }
 
-.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
-.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
-  background-position-y: top var(--uc-container-position-y) !important;
-}
+  /* Pinned Tab - Titlechanged Indicator override */
+  .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+    /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
+    --dotted-identity-image: radial-gradient(
+      circle,
+      var(--identity-icon-color),
+      var(--identity-icon-color) 2px,
+      transparent 2px
+    );
+    background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
+    background-position-x: var(--uc-titlechanged-container-position-x) !important;
+  }
 
-/* Pinned Tab - Titlechanged & soundplaying */
-.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-  > .tab-stack
-  > .tab-content[attention]:not([selected="true"]),
-.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-  > .tab-stack
-  > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
-}
-:root[uidensity="compact"]
+  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
+    background-position-y: top var(--uc-container-position-y) !important;
+  }
+
+  /* Pinned Tab - Titlechanged & soundplaying */
   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-  > .tab-stack
-  > .tab-content[attention]:not([selected="true"]),
-:root[uidensity="compact"]
+    > .tab-stack
+    > .tab-content[attention]:not([selected="true"]),
   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
-  > .tab-stack
-  > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
+    > .tab-stack
+    > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+    --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
+  }
+  :root[uidensity="compact"]
+    .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected="true"]),
+  :root[uidensity="compact"]
+    .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+    --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
+  }
+}
+
+@include Option("userChrome.tab.container.on_top") {
+  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
+    background-position-y: top var(--uc-container-position-y-bottom) !important;
+  }
 }
diff --git a/user.js b/user.js
index 91ce2d6..af9c5e9 100644
--- a/user.js
+++ b/user.js
@@ -183,6 +183,7 @@ user_pref("userChrome.rounding.square_tab",           false);
 // user_pref("userChrome.tab.close_button_at_hover.always",    true); // Need close_button_at_hover
 // user_pref("userChrome.tab.close_button_at_hover.with_selected", true);  // Need close_button_at_hover
 // user_pref("userChrome.tab.sound_show_label",                true); // Need remove sound_hide_label
+// user_pref("userChrome.tab.container.on_top",                true);
 // user_pref("userChrome.tab.selected_bold",                   true);
 
 // user_pref("userChrome.navbar.as_sidebar",                   true);