Fix: Tab Group supports #1086

css/leptonChrome.css

@@ -4239,6 +4239,15 @@
   .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
     max-width: var(--tab-max-width) !important; /* Original: 225px */
   }
+  #tabbrowser-tabs[orient="horizontal"]
+    tab-group[collapsed]
+    > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
+    min-width: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow-clip-margin: 0;
+  }
   /* neighbouring tabs should "pinch" together */
   :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
   #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
@@ -4246,6 +4255,9 @@
     > #tabbrowser-arrowscrollbox-periphery {
     min-width: 3px;
   }
+  #tabbrowser-tabs[orient="horizontal"] .tab-group-label-container {
+    margin-inline-start: 4px !important;
+  }
   @media not -moz-pref("userChrome.tab.photon_like_padding") {
     @media -moz-pref("userChrome.tab.lepton_like_padding") {
       #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] {
@@ -6920,6 +6932,9 @@
     margin-top: 0px !important;
     margin-bottom: 0px !important;
   }
+  #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
+    transform: translateY(calc(var(--tab-group-line-thickness) * -1));
+  }
   /* Remove line at Toolbar's top */
   #tabbrowser-tabs {
     z-index: 1 !important;
@@ -6977,6 +6992,19 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[selected] {
     /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
      */
@@ -6997,6 +7025,19 @@
       > #tabbrowser-arrowscrollbox
       > .tabbrowser-tab
       > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-arrowscrollbox
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+      > #tabbrowser-arrowscrollbox
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
       > .tab-background[selected] {
       background-image: linear-gradient(transparent, transparent),
         linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
@@ -7017,6 +7058,12 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[multiselected]:not([selected]) {
     /* Original:
     background-attachment: scroll, scroll, fixed;
@@ -7789,6 +7836,13 @@
       opacity: var(--tab-separator-opacity);
     }
   }
+  #tabbrowser-tabs[orient="horizontal"]
+    tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected]))
+    + .tabbrowser-tab
+    .tab-stack::before,
+  #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before {
+    opacity: 0 !important;
+  }
   #navigator-toolbox:not([movingtab])
     .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(
       [visuallyselected],
@@ -18425,6 +18479,15 @@
   .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
     max-width: var(--tab-max-width) !important; /* Original: 225px */
   }
+  #tabbrowser-tabs[orient="horizontal"]
+    tab-group[collapsed]
+    > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
+    min-width: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow-clip-margin: 0;
+  }
 }
 @media (-moz-bool-pref: "userChrome.padding.tabbar_width") {
   :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
@@ -18434,6 +18497,11 @@
     min-width: 3px;
   }
 }
+@media (-moz-bool-pref: "userChrome.padding.tabbar_width") {
+  #tabbrowser-tabs[orient="horizontal"] .tab-group-label-container {
+    margin-inline-start: 4px !important;
+  }
+}
 @media (-moz-bool-pref: "userChrome.padding.tabbar_width") and (not (-moz-bool-pref: "userChrome.tab.photon_like_padding")) and (-moz-bool-pref: "userChrome.tab.lepton_like_padding") {
   #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] {
     padding-inline: 1px !important;
@@ -21536,6 +21604,9 @@
     margin-top: 0px !important;
     margin-bottom: 0px !important;
   }
+  #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
+    transform: translateY(calc(var(--tab-group-line-thickness) * -1));
+  }
   /* Remove line at Toolbar's top */
   #tabbrowser-tabs {
     z-index: 1 !important;
@@ -21597,6 +21668,19 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[selected] {
     /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
      */
@@ -21618,6 +21702,19 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[selected],
+  :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[selected] {
     background-image: linear-gradient(transparent, transparent),
       linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
@@ -21637,6 +21734,12 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[multiselected]:not([selected]) {
     /* Original:
     background-attachment: scroll, scroll, fixed;
@@ -22547,6 +22650,15 @@
     opacity: var(--tab-separator-opacity);
   }
 }
+@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
+  #tabbrowser-tabs[orient="horizontal"]
+    tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected]))
+    + .tabbrowser-tab
+    .tab-stack::before,
+  #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before {
+    opacity: 0 !important;
+  }
+}
 @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
   #navigator-toolbox:not([movingtab])
     .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(

css/leptonChromeESR.css

@@ -4562,6 +4562,15 @@
   .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
     max-width: var(--tab-max-width) !important; /* Original: 225px */
   }
+  #tabbrowser-tabs[orient="horizontal"]
+    tab-group[collapsed]
+    > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
+    min-width: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow-clip-margin: 0;
+  }
   /* neighbouring tabs should "pinch" together */
   :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
   #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
@@ -4569,6 +4578,9 @@
     > #tabbrowser-arrowscrollbox-periphery {
     min-width: 3px;
   }
+  #tabbrowser-tabs[orient="horizontal"] .tab-group-label-container {
+    margin-inline-start: 4px !important;
+  }
   @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") {
     @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") {
       #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] {
@@ -7356,6 +7368,9 @@
     margin-top: 0px !important;
     margin-bottom: 0px !important;
   }
+  #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
+    transform: translateY(calc(var(--tab-group-line-thickness) * -1));
+  }
   /* Remove line at Toolbar's top */
   #tabbrowser-tabs {
     z-index: 1 !important;
@@ -7413,6 +7428,19 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[selected] {
     /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
      */
@@ -7433,6 +7461,19 @@
       > #tabbrowser-arrowscrollbox
       > .tabbrowser-tab
       > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-arrowscrollbox
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+      > #tabbrowser-arrowscrollbox
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
       > .tab-background[selected] {
       background-image: linear-gradient(transparent, transparent),
         linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
@@ -7453,6 +7494,12 @@
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
     > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
     > .tab-background[multiselected]:not([selected]) {
     /* Original:
     background-attachment: scroll, scroll, fixed;
@@ -8231,6 +8278,13 @@
       opacity: var(--tab-separator-opacity);
     }
   }
+  #tabbrowser-tabs[orient="horizontal"]
+    tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected]))
+    + .tabbrowser-tab
+    .tab-stack::before,
+  #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before {
+    opacity: 0 !important;
+  }
   #navigator-toolbox:not([movingtab])
     .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(
       [visuallyselected],

src/padding/_tabbar_width.scss

@@ -92,6 +92,14 @@
 }
 .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
   max-width: var(--tab-max-width) !important; /* Original: 225px */
+
+  #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > & {
+    min-width: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;;
+    margin: 0 !important;
+    overflow-clip-margin: 0;
+  }
 }
 
 /* neighbouring tabs should "pinch" together */
@@ -100,6 +108,9 @@
   > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery {
   min-width: 3px; // With Panorama Tab Groups #643 #846
 }
+#tabbrowser-tabs[orient="horizontal"] .tab-group-label-container {
+  margin-inline-start: 4px !important;
+}
 @include NotOption("userChrome.tab.photon_like_padding") {
   @include Option("userChrome.tab.lepton_like_padding") {
     #TabsToolbar:not([multibar]) .tabbrowser-tab {

src/tab/_connect_to_window.scss

@@ -18,6 +18,10 @@
   margin-bottom: 0px !important;
 }
 
+#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
+  transform: translateY(calc(var(--tab-group-line-thickness) * -1));
+}
+
 /* Remove line at Toolbar's top */
 #tabbrowser-tabs {
   z-index: 1 !important;

src/tab/selected_tab/_color_like_toolbar.scss

@@ -15,6 +15,17 @@
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
   > .tab-stack
+  > .tab-background[selected],
+#tabbrowser-arrowscrollbox
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+  > #tabbrowser-arrowscrollbox
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
   > .tab-background[selected] {
   @include lwtheme(false) {
     /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)

src/tab/selected_tab/_multi_selected.scss

@@ -10,6 +10,12 @@
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
   > .tab-stack
+  > .tab-background[multiselected]:not([selected]),
+#tabbrowser-tabs:not([movingtab])
+  > #tabbrowser-arrowscrollbox
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
   > .tab-background[multiselected]:not([selected]) {
    /* Original:
    background-attachment: scroll, scroll, fixed;

src/tab/unselected_tab/_dynamic_separator.scss

@@ -95,6 +95,13 @@
   }
 }
 
+#tabbrowser-tabs[orient="horizontal"] tab-group {
+  &:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before,
+  &[collapsed] + .tabbrowser-tab .tab-stack::before {
+    opacity: 0 !important;
+  }
+}
+
 #navigator-toolbox:not([movingtab])
   .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover)
   .tab-stack::before,