Fix: Tabbar - tabsintitlebar to customtitlebar compatibility

- mozilla/gecko-dev@c3795ef - mozilla/gecko-dev@06b1c50
black7375 · Dec 26, 2024 · 7d96af3 · 7d96af3
1 parent a42a815
commit 7d96af3
Show file tree

Hide file tree

Showing 16 changed files with 459 additions and 380 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss
@@ -48,11 +48,11 @@
   }
   @include Has {
     :root {
-      &:not([tabsintitlebar]):has(#toolbar-menubar) {
+      &:not([tabsintitlebar]):not([customtitlebar]):has(#toolbar-menubar) {
         --uc-menubar-height: var(--uc-menubar-height-default); // text 1rem, menu padding 0.3em
       }
 
-      &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) {
+      &:is([tabsintitlebar], [customtitlebar]):has(#toolbar-menubar[autohide="true"]) {
         @include OS($linux) {
           --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
         }
@@ -63,12 +63,12 @@
           --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin));
         }
       }
-      &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) {
+      &:is([tabsintitlebar], [customtitlebar]):has(#toolbar-menubar[autohide="false"]) {
         --uc-menubar-height: var(--uc-titlebar-buttonbox-height);
       }
 
-      &:not([tabsintitlebar]),
-      &[tabsintitlebar] {
+      &:not([tabsintitlebar]):not([customtitlebar]),
+      &:is([tabsintitlebar], [customtitlebar]) {
         &:has(#toolbar-menubar[autohide="true"][inactive="true"]) {
           --uc-menubar-height: 0px;
         }

diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss
@@ -1,6 +1,6 @@
 /*= Windows 10 - Top border of accent color at ESR #358 ======================*/
 @include OS($win10) {
-  :root[sizemode=normal][tabsintitlebar] {
+  :root[sizemode=normal]:is([tabsintitlebar], [customtitlebar]) {
     #navigator-toolbox {
       border-top: .5px solid rgb(47, 47, 47) !important;
     }
@@ -231,7 +231,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
 
 /*= Titlebar Container Size at maximized #384 ================================*/
 @include OS($win) {
-  :root[tabsintitlebar] {
+  :root:is([tabsintitlebar], [customtitlebar]) {
     @include NotOption("userChrome.compatibility.os.windows_maximized") {
       #titlebar {
         // Prevent #476 FF v105 above
@@ -263,21 +263,21 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
 // https://github.com/mozilla/gecko-dev/blob/4334cb91a3762ac497c50a1c7b86b8004690229e/browser/themes/windows/browser-aero.css#L71-L81
 @include OS($win) {
   @include WinClassic {
-    :root[tabsintitlebar][sizemode="normal"]:not(:-moz-lwtheme) #navigator-toolbox {
+    :root:is([tabsintitlebar], [customtitlebar])[sizemode="normal"]:not(:-moz-lwtheme) #navigator-toolbox {
       appearance: auto !important;
       -moz-default-appearance: -moz-window-titlebar !important;;
     }
 
-    :root[tabsintitlebar][sizemode="maximized"]:not(:-moz-lwtheme) #navigator-toolbox {
+    :root:is([tabsintitlebar], [customtitlebar])[sizemode="maximized"]:not(:-moz-lwtheme) #navigator-toolbox {
       appearance: auto !important;;
       -moz-default-appearance:-moz-window-titlebar !important;;
     }
 
-    :root[tabsintitlebar]:not(:-moz-lwtheme) #tabbrowser-arrowscrollbox {
+    :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox {
       color: -moz-dialogtext !important;
     }
 
-    :root[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
+    :root:is([tabsintitlebar], [customtitlebar])[sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
       background-image: linear-gradient(
         to bottom,
         ThreeDLightShadow 0, ThreeDLightShadow 1px,

diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss
@@ -35,7 +35,7 @@ menu.subviewbutton {
 }
 
 /*= First visible tab margin at maximized #332 ===============================*/
-:root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar {
+:root:is([tabsintitlebar="true"], [customtitlebar="true"])[sizemode="maximized"] #TabsToolbar {
   margin-left: -1px;
 }
 
@@ -193,9 +193,9 @@ vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] {
 }
 
 /*= Inactive transparent #882 ================================================*/
-:root[tabsintitlebar] #titlebar:-moz-window-inactive,
-:root[tabsintitlebar] #toolbar-menubar:-moz-window-inactive,
-:root[tabsintitlebar] #TabsToolbar:-moz-window-inactive {
+:root:is([tabsintitlebar], [customtitlebar]) #titlebar:-moz-window-inactive,
+:root:is([tabsintitlebar], [customtitlebar]) #toolbar-menubar:-moz-window-inactive,
+:root:is([tabsintitlebar], [customtitlebar]) #TabsToolbar:-moz-window-inactive {
   opacity: 1 !important;
   color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity, 0.75) * 100%), transparent) !important;
   --inactive-toolbarbutton-icon-fill-opacity: calc(var(--toolbarbutton-icon-fill-opacity, 1) * var(--inactive-titlebar-opacity, 0.75));

diff --git a/src/fullscreen/_overlap.scss b/src/fullscreen/_overlap.scss
@@ -18,7 +18,7 @@
 
 @include OS($linux) {
   /* Fix transparent background */
-  :root[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"])#{$not_lwtheme} #TabsToolbar {
+  :root:is([tabsintitlebar], [customtitlebar])[sizemode="fullscreen"]:not([inDOMFullscreen="true"])#{$not_lwtheme} #TabsToolbar {
     appearance: auto !important;
   }
 }
diff --git a/src/padding/_drag_space.scss b/src/padding/_drag_space.scss
@@ -6,11 +6,11 @@
 
 //-- Mixin ---------------------------------------------------------------------
 @mixin _dragSpaceHeight {
-  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
+  :root:is([tabsintitlebar], [customtitlebar])[sizemode="normal"] #toolbar-menubar[autohide="true"] {
     @content;
   }
   @include Option("userChrome.padding.drag_space.maximized") {
-    :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] {
+    :root:is([tabsintitlebar], [customtitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"] {
       @content;
     }
   }

diff --git a/src/padding/_first_tab.scss b/src/padding/_first_tab.scss
@@ -4,14 +4,14 @@
 }
 
 @include NotOption("userChrome.padding.first_tab.always") {
-  :root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
+  :root:not([tabsintitlebar]):not([customtitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
   :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
     padding-inline-start: var(--uc-space-left-tabbar) !important;
   }
 }
 
 @include Option("userChrome.padding.first_tab.always") {
-  :root:not([tabsintitlebar]) #tabbrowser-tabs,
+  :root:not([tabsintitlebar]):not([customtitlebar]) #tabbrowser-tabs,
   :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs {
     padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width, 0px) +  var(--uc-space-left-tabbar)) !important;
   }

diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss
@@ -94,7 +94,7 @@
   border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
 }
 
-:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
+:root:is([tabsintitlebar], [customtitlebar]):not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
   height: calc(
     var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
   ); /* Compact: 28px, Normal: 33px, Touch: 38px */

diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss
@@ -73,16 +73,16 @@
 }
 @media (-moz-windows-accent-color-in-titlebar) {
   @include AccentColor {
-    :root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover,
-    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
+    :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover,
+    :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
       fill: color-mix(
         in srgb,
         $accentTextColor 10%,
         transparent
       ) !important; /* Hardcoded for compatibility */
     }
-    :root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active,
-    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
+    :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active,
+    :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
       fill: color-mix(
         in srgb,
         $accentTextColor 15%,
@@ -98,14 +98,14 @@
         "userChrome.tab.bottom_rounded_corner.chrome",
         "userChrome.tab.bottom_rounded_corner.edge"
       ) {
-        :root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover,
-        :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
+        :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover,
+        :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
           background-image: var(--uc-tab-corner-left-side-svg),
                             linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)),
                             var(--uc-tab-corner-right-side-svg);
         }
-        :root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active,
-        :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
+        :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active,
+        :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
           background-image: var(--uc-tab-corner-left-side-svg),
                             linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)),
                             var(--uc-tab-corner-right-side-svg);

diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss
@@ -12,7 +12,7 @@
 
 //------------------------------------------------------------------------------
 
-:root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */
+:root:not([tabsintitlebar="true"]):not([customtitlebar="true"]) #tabbrowser-tabs, /* Show only */
 #scrollbutton-up, /* Defaults */
 #scrollbutton-down,
 .titlebar-spacer[type="pre-tabs"],
@@ -80,8 +80,8 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
 
 
 @include Option("browser.tabs.tabmanager.enabled") {
-  :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
-  :root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button {
+  :root:not([tabsintitlebar="true"]):not([customtitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
+  :root:not([tabsintitlebar="true"]):not([customtitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button {
     @include Box(true);
   }
 }
diff --git a/src/tabbar/_on_bottom.scss b/src/tabbar/_on_bottom.scss
@@ -82,7 +82,7 @@ See the above repository for updates as well as full license text. */
     width: 100%;
     overflow: hidden;
   }
-  :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
+  :root:is([tabsintitlebar], [customtitlebar]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
     height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */
   }
 

diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss
@@ -53,7 +53,7 @@ See the above repository for updates as well as full license text. */
 }
 
 @include OS($win) {
-  :root[sizemode="maximized"][tabsintitlebar] {
+  :root[sizemode="maximized"]:is([tabsintitlebar], [customtitlebar]) {
     @if mode.isESR() {
       --uc-titlebar-padding: 8px;
     }
@@ -62,8 +62,8 @@ See the above repository for updates as well as full license text. */
       margin-top: calc(-1 * var(--uc-titlebar-padding));
     }
   }
-  :root[sizemode="normal"][tabsintitlebar] #titlebar,
-  :root[sizemode="maximized"][tabsintitlebar] #titlebar {
+  :root[sizemode="normal"]:is([tabsintitlebar], [customtitlebar]) #titlebar,
+  :root[sizemode="maximized"]:is([tabsintitlebar], [customtitlebar]) #titlebar {
     appearance: none !important;
   }
   .browser-toolbar:not(.titlebar-color) {

diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss
@@ -40,7 +40,7 @@
 
 //------------------------------------------------------------------------------
 
-:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+:root:is([tabsintitlebar], [customtitlebar], [sizemode="fullscreen"]) {
   --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px
   --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px
 
@@ -71,20 +71,20 @@
   }
 }
 @include OS($mac) {
-  :root[tabsintitlebar] {
+  :root:is([tabsintitlebar], [customtitlebar]) {
     --uc-window-control-width: 72px;
   }
   :root[sizemode="fullscreen"] {
     @include _remove_spacer_post;
   }
 }
 
-:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
+:root:is([tabsintitlebar][sizemode="maximized"], [customtitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
   @include _remove_spacer_pre;
 }
 
 @include Option("userChrome.tabbar.one_liner") {
-  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+  :root:is([tabsintitlebar], [customtitlebar], [sizemode="fullscreen"]) {
     @include NotOption("userChrome.tabbar.one_liner.responsive") {
       @include _remove_spacer_oneLiner;
     }

diff --git a/src/theme/system_default_theme/_urlbar_focus_color.scss b/src/theme/system_default_theme/_urlbar_focus_color.scss
@@ -1,7 +1,7 @@
 /*= Common - URL Bar focus color =============================================*/
 // TODO: `OS` Not covered case
-$_urlBarFocusSelector: ":root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme}";
-$_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)";
+$_urlBarFocusSelector: ":root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme}";
+$_urlBarFocusDarkSelector: ":root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)";
 
 @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
   /* URL Bar */

diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss
@@ -244,8 +244,8 @@
 
   @include Option("userChrome.theme.system_default") {
     @media (-moz-windows-accent-color-in-titlebar) {
-      :root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme},
-      :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
+      :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme},
+      :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
         --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* As default */
       }
     }
@@ -371,8 +371,8 @@
 /*= Windows10 - Titlebar accent color ========================================*/
 @media (-moz-windows-accent-color-in-titlebar) {
   /* Tab Bar */
-  :root[tabsintitlebar]:not(:-moz-window-inactive)#{$not_lwtheme},
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
+  :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme},
+  :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
     .titlebar-color {
       @include AccentColor {
         color: $accentTextColor;