Bug 1859977 - Simplify selected tab background and specify proper color-scheme. r=dao,desktop-theme-reviewers

This should fix the concern raised in D191407. I went through a bunch of
themes with images and I don't see why the three layers of backgrounds
were needed tbh.

Depends on D191408

Differential Revision: https://phabricator.services.mozilla.com/D191466

browser/themes/ThemeVariableMap.sys.mjs

@@ -30,6 +30,12 @@ export const ThemeVariableMap = [
       optionalElementID: "tabbrowser-tabs",
     },
   ],
+  [
+    "--tab-selected-bgcolor",
+    {
+      lwtProperty: "tab_selected",
+    },
+  ],
   [
     "--tab-selected-textcolor",
     {
@@ -92,12 +98,6 @@ export const ThemeVariableMap = [
       lwtProperty: "button_background_active",
     },
   ],
-  [
-    "--lwt-selected-tab-background-color",
-    {
-      lwtProperty: "tab_selected",
-    },
-  ],
   [
     "--urlbarView-highlight-background",
     {

browser/themes/shared/tabs.css

@@ -23,6 +23,13 @@
     --tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189));
   }
 
+  &[lwt-tab-selected="light"] {
+    --tab-selected-color-scheme: light;
+  }
+  &[lwt-tab-selected="dark"] {
+    --tab-selected-color-scheme: dark;
+  }
+
   /* --tabpanel-background-color matches $in-content-page-background in newtab
      (browser/components/newtab/content-src/styles/_variables.scss) */
   --tabpanel-background-color: #F9F9FB;
@@ -448,7 +455,7 @@
 #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
 .tabbrowser-tab:is([selected], [multiselected]) {
   color: var(--tab-selected-textcolor, var(--toolbar-color));
-  color-scheme: var(--toolbar-color-scheme);
+  color-scheme: var(--tab-selected-color-scheme, var(--toolbar-color-scheme));
 }
 
 @media (prefers-contrast) {
@@ -480,22 +487,6 @@
   }
 }
 
-/*
- * LightweightThemeConsumer will set the current lightweight theme's header
- * image to the lwt-header-image variable, used in each of the following rulesets.
- */
-#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
-#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background:is([selected], [multiselected]):-moz-lwtheme {
-  background-attachment: scroll, scroll, fixed;
-  background-color: transparent;
-  background-image: 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-position: 0 0, 0 0, right top;
-  background-repeat: repeat-x, repeat-x, no-repeat;
-  background-size: auto 100%, auto 100%, auto auto;
-}
-
 /* Pinned tabs */
 
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),

toolkit/components/extensions/test/browser/browser_ext_themes_tab_selected.js

@@ -30,22 +30,19 @@ add_task(async function test_tab_background_color_property() {
   );
   let selectedTabBackground = selectedTab.querySelector(".tab-background");
 
-  let openTabGradient = window
+  let openTabColor = window
     .getComputedStyle(openTabBackground)
-    .getPropertyValue("background-image");
-  let selectedTabGradient = window
+    .getPropertyValue("background-color");
+  let selectedTabColor = window
     .getComputedStyle(selectedTabBackground)
-    .getPropertyValue("background-image");
-
-  let rgbRegex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/g;
-  let selectedTabColors = selectedTabGradient.match(rgbRegex);
+    .getPropertyValue("background-color");
 
   Assert.equal(
-    selectedTabColors[0],
+    selectedTabColor,
     "rgb(" + hexToRGB(TAB_BACKGROUND_COLOR).join(", ") + ")",
     "Selected tab background color should be set."
   );
-  Assert.equal(openTabGradient, "none");
+  Assert.notEqual(openTabColor, selectedTabColor);
 
   gBrowser.removeTab(selectedTab);
   await extension.unload();

toolkit/modules/LightweightThemeConsumer.sys.mjs

@@ -588,6 +588,7 @@ function _setDarkModeAttributes(doc, root, colors, hasTheme) {
     }
   };
 
+  setAttribute("lwt-tab-selected", "tab_text", "tab_selected");
   setAttribute("lwt-toolbar-field", "toolbar_field_text", "toolbar_field");
   setAttribute(
     "lwt-toolbar-field-focus",