Backed out changeset 8c47ea741114 (bug 1742111) for causing Bug 1742237. a=backout

browser/base/content/browser.css

@@ -57,7 +57,7 @@ body {
 @media not (-moz-os-version: windows-win7) {
   @media not (-moz-os-version: windows-win8) {
     #navigator-toolbox:-moz-lwtheme {
-      background-color: var(--lwt-frame);
+      background-color: var(--lwt-accent-color);
     }
 
     /* When a theme defines both theme_frame and additional_backgrounds, show
@@ -69,7 +69,7 @@ body {
    }
 
    #navigator-toolbox:-moz-window-inactive:-moz-lwtheme {
-     background-color: var(--lwt-frame-inactive, var(--lwt-frame));
+     background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
    }
   }
 }
@@ -77,7 +77,7 @@ body {
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
   :root:-moz-lwtheme {
-    background-color: var(--lwt-frame);
+    background-color: var(--lwt-accent-color);
     background-image: var(--lwt-additional-images);
     background-repeat: var(--lwt-background-tiling);
     background-position: var(--lwt-background-alignment);
@@ -90,7 +90,7 @@ body {
   }
 
   :root:-moz-lwtheme:-moz-window-inactive {
-    background-color: var(--lwt-frame-inactive, var(--lwt-frame));
+    background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
   }
 }
 

browser/themes/ThemeVariableMap.jsm

@@ -8,9 +8,9 @@ const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 
 const ThemeVariableMap = [
   [
-    "--lwt-frame-inactive",
+    "--lwt-accent-color-inactive",
     {
-      lwtProperty: "frame_inactive",
+      lwtProperty: "accentcolorInactive",
     },
   ],
   [

browser/themes/shared/browser.inc.css

@@ -95,7 +95,7 @@
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
-  --toolbar-color: var(--lwt-text-color);
+  --toolbar-color: var(--lwt-text-color, inherit);
 
   color: var(--lwt-text-color);
 }
@@ -293,14 +293,14 @@ menupopup::part(drop-indicator) {
 }
 
 :root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
-  background-color: var(--lwt-frame);
+  background-color: var(--lwt-accent-color);
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
   border-top-color: var(--chrome-content-separator-color);
   color: var(--toolbar-color);
 }
 
 :root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme:-moz-window-inactive {
-  background-color: var(--lwt-frame-inactive, var(--lwt-frame));
+  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
 }
 
 /* Private browsing and accessibility indicators */

mozglue/misc/PreXULSkeletonUI.cpp

@@ -1337,7 +1337,7 @@ ThemeColors GetTheme(ThemeMode themeId) {
       theme.tabColor = 0x42414d;
       theme.toolbarForegroundColor = 0x6a6a6d;
       theme.tabOutlineColor = 0x1c1b22;
-      // controlled by css variable --lwt-frame
+      // controlled by css variable --lwt-accent-color
       theme.tabBarColor = 0x1c1b22;
       // controlled by --toolbar-non-lwt-textcolor in browser.css
       theme.chromeContentDividerColor = 0x0c0c0d;

toolkit/components/extensions/parent/ext-theme.js

@@ -179,6 +179,15 @@ class Theme {
       }
 
       switch (color) {
+        case "frame":
+          styles.accentcolor = cssColor;
+          break;
+        case "frame_inactive":
+          styles.accentcolorInactive = cssColor;
+          break;
+        case "tab_background_text":
+          styles.textcolor = cssColor;
+          break;
         case "toolbar":
           styles.toolbarColor = cssColor;
           break;
@@ -192,10 +201,7 @@ class Theme {
         case "icons_attention":
           styles.icon_attention_color = cssColor;
           break;
-        case "frame":
-        case "frame_inactive":
         case "tab_background_separator":
-        case "tab_background_text":
         case "tab_loading":
         case "tab_text":
         case "tab_line":

toolkit/modules/LightweightThemeConsumer.jsm

@@ -28,9 +28,9 @@ ChromeUtils.defineModuleGetter(
 
 const toolkitVariableMap = [
   [
-    "--lwt-frame",
+    "--lwt-accent-color",
     {
-      lwtProperty: "frame",
+      lwtProperty: "accentcolor",
       processColor(rgbaChannels, element) {
         if (!rgbaChannels || rgbaChannels.a == 0) {
           return "white";
@@ -44,7 +44,7 @@ const toolkitVariableMap = [
   [
     "--lwt-text-color",
     {
-      lwtProperty: "tab_background_text",
+      lwtProperty: "textcolor",
       processColor(rgbaChannels, element) {
         if (!rgbaChannels) {
           rgbaChannels = { r: 0, g: 0, b: 0 };
@@ -426,10 +426,10 @@ function _determineToolbarAndContentTheme(aDoc, aTheme) {
     return _isColorDark(aColor.r, aColor.g, aColor.b) ? 1 : 0;
   }
 
-  // Fall back to black as tab_background_text processing does above.
+  // Fall back to black as textcolor processing does above.
   let toolbarColor = _cssColorToRGBA(
     aDoc,
-    aTheme ? aTheme.toolbar_text || aTheme.tab_background_text || "black" : null
+    aTheme ? aTheme.toolbar_text || aTheme.textcolor || "black" : null
   );
   let contentColor = _cssColorToRGBA(aDoc, aTheme?.ntp_text);
   Services.prefs.setIntPref(