Fix: Theme - Compatibility for new lwtheme #880

Windows7 and Windows8 only exist in the ESR, so there is no compatibility issue and we don't apply them.
black7375 · Apr 20, 2024 · 7db1e4b · 7db1e4b
1 parent 39577ea
commit 7db1e4b
Show file tree

Hide file tree

Showing 22 changed files with 673 additions and 503 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/compatibility/_os.scss b/src/compatibility/_os.scss
@@ -170,19 +170,21 @@
 
   /*= Linux - Titlebar button at lwtheme =====================================*/
   @include NotOption("userChrome.compatibility.os.linux_non_native_titlebar_button") {
-    .titlebar-button:-moz-lwtheme {
-      appearance: auto !important;
-    }
-    .titlebar-min:-moz-lwtheme,
-    .titlebar-max:-moz-lwtheme,
-    .titlebar-restore:-moz-lwtheme,
-    .titlebar-close:-moz-lwtheme {
-      list-style-image: none !important;
-    }
-    .titlebar-button:-moz-lwtheme:hover,
-    .titlebar-button:-moz-lwtheme:hover:active {
-      background-color: unset !important;
-      color: unset !important;
+    @include lwtheme {
+      .titlebar-button {
+        appearance: auto !important;
+      }
+      .titlebar-min,
+      .titlebar-max,
+      .titlebar-restore,
+      .titlebar-close {
+        list-style-image: none !important;
+      }
+      .titlebar-button,
+      .titlebar-button:hover:active {
+        background-color: unset !important;
+        color: unset !important;
+      }
     }
   }
 }
@@ -191,11 +193,13 @@
 //-- Mixin ---------------------------------------------------------------------
 $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
 @mixin _os_linuxDefaultThemeSelectedTab {
-  #tabbrowser-tabs:not([noshadowfortests])
-    .tabbrowser-tab:is([visuallyselected], [multiselected])
-    > .tab-stack
-    > .tab-background:not(:-moz-lwtheme) {
-    @content;
+  @include not_lwtheme {
+    #tabbrowser-tabs:not([noshadowfortests])
+      .tabbrowser-tab:is([visuallyselected], [multiselected])
+      > .tab-stack
+      > .tab-background {
+        @content;
+    }
   }
 }
 

diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss
@@ -52,31 +52,32 @@ menu {
   /* Nightly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
   border: unset !important;
 }
-@mixin _theme_removeTabBorder($options...) {
-  @each $prefix, $postfix in $options {
-    #TabsToolbar#{$prefix}
+
+@include Option("userChrome.tab.connect_to_window") {
+  /* TARGET: original, photon */
+  // Light Theme
+  #TabsToolbar:not([brighttext])
     #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected], [multiselected])
+    > .tab-stack
+    > .tab-background {
+    @include noneBorder;
+  }
+  @include lwtheme {
+    // Dark Theme
+    #TabsToolbar[brighttext]
+      #tabbrowser-tabs:not([noshadowfortests])
       .tabbrowser-tab:is([visuallyselected], [multiselected])
       > .tab-stack
-      > .tab-background#{$postfix} {
+      > .tab-background {
       @include noneBorder;
     }
-  }
-}
 
-@include Option("userChrome.tab.connect_to_window") {
-  /* TARGET: original, photon */
-  @include _theme_removeTabBorder(
-    // Light Theme
-    ":not([brighttext])",
-    // Dark Theme
-    "[brighttext]" ":-moz-lwtheme"
-  );
-
-  #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
-  .tab-background[selected]:-moz-lwtheme {
-    // Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
-    outline-color: transparent !important;
+    #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
+    .tab-background[selected] {
+      // Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
+      outline-color: transparent !important;
+    }
   }
   .keyboard-focused-tab > .tab-stack > .tab-background,
   .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
@@ -116,18 +117,22 @@ menu {
   }
 
   // lwtheme compatibility
-  #navigator-toolbox:-moz-lwtheme {
-    background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
-    background-repeat: var(--lwt-background-tiling) !important;
-    background-position: var(--lwt-background-alignment) !important;
-    background-color: unset !important; /* Original:  var(--lwt-accent-color) */
+  @include lwtheme {
+    #navigator-toolbox {
+      background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
+      background-repeat: var(--lwt-background-tiling) !important;
+      background-position: var(--lwt-background-alignment) !important;
+      background-color: unset !important; /* Original:  var(--lwt-accent-color) */
+    }
   }
 }
 
 /* Navbar Border */
-#navigator-toolbox:-moz-lwtheme {
-  --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4)  */
-  --lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
+@include lwtheme {
+  #navigator-toolbox {
+    --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4)  */
+    --lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
+  }
 }
 
 #customization-container {

diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss
@@ -18,8 +18,10 @@
 @include _animate_bgColor(1s);
 @include _animate_bgColor(0.25s, ":hover");
 @include OS($linux) {
-  .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
-    transition: background-image 0.25s var(--animation-easing-function) !important;
+  @include not_lwtheme {
+    .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background {
+      transition: background-image 0.25s var(--animation-easing-function) !important;
+    }
   }
 }
 

diff --git a/src/fullscreen/_overlap.scss b/src/fullscreen/_overlap.scss
@@ -9,7 +9,7 @@
 
 @include OS($linux) {
   /* Fix transparent background */
-  :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) {
+  :root[tabsintitlebar][sizemode="fullscreen"]#{$not_lwtheme} #TabsToolbar {
     appearance: auto !important;
   }
 }
diff --git a/src/tab/_selected_tab.scss b/src/tab/_selected_tab.scss
@@ -53,9 +53,11 @@
   }
   @include NotOption("userChrome.tab.blue_accent") {
     @include OS("linux") {
-      :root:not(:-moz-lwtheme) #tabbrowser-tabs {
-        @include AccentColor("Highlight") {
-          --tab-line-color: #{$accentColor} !important; /* -moz-accent-color */
+      @include not_lwtheme {
+        #tabbrowser-tabs {
+          @include AccentColor("Highlight") {
+            --tab-line-color: #{$accentColor} !important; /* -moz-accent-color */
+          }
         }
       }
     }

diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss
@@ -73,15 +73,15 @@
 }
 @media (-moz-windows-accent-color-in-titlebar) {
   @include AccentColor {
-    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
+    :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 {
       fill: color-mix(
         in srgb,
         $accentTextColor 10%,
         transparent
       ) !important; /* Hardcoded for compatibility */
     }
-    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
+    :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 {
       fill: color-mix(
         in srgb,
@@ -98,13 +98,13 @@
         "userChrome.tab.bottom_rounded_corner.chrome",
         "userChrome.tab.bottom_rounded_corner.edge"
       ) {
-        :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
+        :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 {
           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, :-moz-lwtheme) #tabs-newtab-button:hover:active,
+        :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 {
           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)),

diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss
@@ -94,13 +94,13 @@
     }
   }
 
-  &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
-     #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme {
-    &::before,
-    &::after {
-      /* As Selected Tab - Box Shadow */
-      stroke: var(--toolbar-color);
-    }
+  &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
+    #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background {
+      &::before,
+      &::after {
+        /* As Selected Tab - Box Shadow */
+        stroke: var(--toolbar-color);
+      }
   }
 
   @include OS($linux) {

diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss
@@ -186,8 +186,10 @@
     }
   }
 }
-#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme {
-  --uc-tab-corner-bgimage: none;
+@include lwtheme {
+  #tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
+    --uc-tab-corner-bgimage: none;
+  }
 }
 
 @include OS($linux) {

diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss
@@ -17,11 +17,11 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
   filter: $ucTabBasicShadow;
 }
 
-:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
+:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
   #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab {
   &:is([selected], [multiselected]) {
     > .tab-stack
-    > .tab-background:-moz-lwtheme {
+    > .tab-background {
       filter: $ucTabBackgroundShadowSoft;
     }
   }
@@ -37,22 +37,22 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
 
 /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border
    around the tab to help themes that are dependent on tab_line to show the selected tab. */
-:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])
+:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])#{$lwtheme}
   #TabsToolbar:not([brighttext])
   #tabbrowser-tabs:not([noshadowfortests])
   .tabbrowser-tab:is([visuallyselected], [multiselected])
   > .tab-stack
-  > .tab-background:-moz-lwtheme {
+  > .tab-background {
   --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
   filter: $ucTabBackgroundShadowHard
           $ucTabAdditionalShadow;
 }
 
-:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
+:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
   #TabsToolbar[brighttext]
   #tabbrowser-tabs:not([noshadowfortests])
   .tabbrowser-tab:is([visuallyselected], [multiselected])
   > .tab-stack
-  > .tab-background:-moz-lwtheme {
+  > .tab-background {
   filter: $ucTabBackgroundShadowHard;
 }
diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss
@@ -1,4 +1,4 @@
-:root:not(:-moz-lwtheme) {
+@include not_lwtheme {
   /* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */
   --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
   --tab-selected-bgimage: unset !important; /* Above FF v101 */
@@ -10,22 +10,24 @@
 #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
   > .tab-stack
-  > .tab-background[selected]:-moz-lwtheme,
+  > .tab-background[selected],
 #tabbrowser-tabs:not([movingtab])
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
   > .tab-stack
-  > .tab-background[selected]:-moz-lwtheme {
-  /* 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)
- */
-  background-image: linear-gradient(transparent, transparent),
-    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
-  background-position: 0, 0, right top;
-  background-attachment: scroll, scroll, fixed;
-  background-repeat: repeat-x, repeat-x, no-repeat !important;
+  > .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)
+     */
+    background-image: linear-gradient(transparent, transparent),
+                      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
+    background-position: 0, 0, right top;
+    background-attachment: scroll, scroll, fixed;
+    background-repeat: repeat-x, repeat-x, no-repeat !important;
+  }
 
   @include Option("userChrome.theme.transparent.frame") {
-    :root:not([lwtheme-image]) & {
+    :root:not([lwtheme-image])#{$lwtheme} & {
       background-image: linear-gradient(transparent, transparent),
                         linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
 

diff --git a/src/tab/selected_tab/_photon_like_contextline.scss b/src/tab/selected_tab/_photon_like_contextline.scss
@@ -52,11 +52,12 @@
 }
 
 /* Remove side's background color border */
+:root#{$lwtheme}
 #TabsToolbar[brighttext]
   #tabbrowser-tabs:not([noshadowfortests])
   .tabbrowser-tab:is([visuallyselected], [multiselected])
   > .tab-stack
-  > .tab-background:-moz-lwtheme {
+  > .tab-background {
   --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
   box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
 }

diff --git a/src/theme/_fully_color.scss b/src/theme/_fully_color.scss
@@ -143,34 +143,36 @@ html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
 }
 
 /*== Bookmark Popup Color ====================================================*/
-#editBMPanel_folderTree:-moz-lwtheme,
-#editBMPanel_tagsSelector:-moz-lwtheme {
-  appearance: none !important;
-  border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
-}
+@include lwtheme {
+  #editBMPanel_folderTree,
+  #editBMPanel_tagsSelector {
+    appearance: none !important;
+    border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
+  }
 
-#editBMPanel_folderTree:-moz-lwtheme,
-#editBMPanel_folderTree:-moz-lwtheme > treechildren,
-#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image,
-#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover),
-#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected),
-#editBMPanel_tagsSelector:-moz-lwtheme,
-#editBMPanel_tagsSelector:-moz-lwtheme > richlistitem {
-  color: var(--lwt-text-color, fieldtext) !important;
-}
-#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) {
-  font-weight: 600 !important;
-}
+  #editBMPanel_folderTree,
+  #editBMPanel_folderTree > treechildren,
+  #editBMPanel_folderTree > treechildren::-moz-tree-image,
+  #editBMPanel_folderTree > treechildren::-moz-tree-cell-text(hover),
+  #editBMPanel_folderTree > treechildren::-moz-tree-cell-text(selected),
+  #editBMPanel_tagsSelector,
+  #editBMPanel_tagsSelector > richlistitem {
+    color: var(--lwt-text-color, fieldtext) !important;
+  }
+  #editBMPanel_folderTree > treechildren::-moz-tree-cell-text(selected) {
+    font-weight: 600 !important;
+  }
 
-#editBMPanel_folderTree:-moz-lwtheme > treechildren,
-#editBMPanel_tagsSelector:-moz-lwtheme {
-  background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important;
+  #editBMPanel_folderTree > treechildren,
+  #editBMPanel_tagsSelector {
+    background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important;
+  }
 }
-#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover),
+:root#{$lwtheme} #editBMPanel_folderTree > treechildren::-moz-tree-row(hover),
 #editBMPanel_tagsSelector > richlistitem:hover {
   background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important;
 }
-#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected),
+:root#{$lwtheme} #editBMPanel_folderTree > treechildren::-moz-tree-row(selected),
 #editBMPanel_tagsSelector > richlistitem[selected="true"] {
   background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
 }