Bug 1686529 - Update the tab and toolbar colors for Proton Light and Proton Dark themes. r=desktop-theme-reviewers,harry

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

browser/base/content/tabbrowser-tab.js

@@ -13,7 +13,6 @@
         ? `
         <vbox class="tab-background">
           <hbox class="tab-context-line"/>
-          <hbox class="tab-line"/>
           <spacer flex="1" class="tab-background-inner"/>
         </vbox>
 `

browser/themes/addons/alpenglow/manifest.json

@@ -9,7 +9,7 @@
 
   "name": "Firefox Alpenglow",
   "description": "Use a colorful appearance for buttons, menus, and windows.",
-  "version": "1.3",
+  "version": "1.4",
   "icons": { "32": "icon.svg" },
 
   "theme": {
@@ -42,11 +42,11 @@
       "toolbar_field_focus": "hsla(261, 53%, 15%, .96)",
       "toolbar_field_text": "hsla(261, 53%, 15%, 1)",
       "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
-      "toolbar_field_border": "hsla(261, 53%, 15%, .32)",
+      "toolbar_field_border": "transparent",
       "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
       "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
       "toolbar_field_separator": "hsla(261, 53%, 15%, .32)",
-      "toolbar_top_separator": "hsla(261, 53%, 15%, 1)",
+      "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "hsla(261, 53%, 15%, .32)",
       "bookmark_text": "hsla(261, 53%, 15%, 1)",
       "tab_text": "hsla(261, 53%, 15%, 1)",
@@ -99,11 +99,11 @@
       "toolbar_field_focus": "hsla(250, 43%, 25%, .98)",
       "toolbar_field_text": "hsla(255, 100%, 94%, 1)",
       "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
-      "toolbar_field_border": "hsla(255, 100%, 94%, .32)",
+      "toolbar_field_border": "transparent",
       "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
       "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
       "toolbar_field_separator": "hsla(261, 53%, 15%, .32)",
-      "toolbar_top_separator": "hsla(255, 100%, 94%, .32)",
+      "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "hsla(245, 38%, 33%, .96)",
       "bookmark_text": "hsla(255, 100%, 94%, 1)",
       "tab_selected": "rgb(60, 31, 123)",

browser/themes/addons/proton-dark/manifest.json

@@ -10,13 +10,15 @@
   "name": "Proton Dark",
   "description": "A theme with a dark color scheme.",
   "author": "Mozilla",
-  "version": "1.1",
+  "version": "1.2",
 
   "icons": {"32": "icon.svg"},
 
   "theme": {
     "colors": {
       "tab_background_text": "#fbfbfe",
+      "tab_selected": "rgb(66,65,77)",
+      "tab_text": "rgb(251,251,254)",
       "icons": "rgb(249, 249, 250, 0.7)",
       "frame": "#1c1b22",
       "popup": "rgb(66,65,77)",
@@ -24,7 +26,7 @@
       "popup_border": "rgb(82,82,94)",
       "popup_highlight": "rgb(43,42,51)",
       "tab_line": "#0a84ff",
-      "toolbar": "hsl(240, 1%, 20%)",
+      "toolbar": "rgb(43,42,51)",
       "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
       "toolbar_field": "rgb(28,27,34)",
       "toolbar_field_border": "transparent",

browser/themes/addons/proton-light/manifest.json

@@ -10,13 +10,15 @@
   "name": "Proton Light",
   "description": "A theme with a light color scheme.",
   "author": "Mozilla",
-  "version": "1.1",
+  "version": "1.2",
 
   "icons": {"32": "icon.svg"},
 
   "theme": {
     "colors": {
-      "tab_background_text": "#15141a",
+      "tab_background_text": "rgb(21,20,26)",
+      "tab_selected": "#fff",
+      "tab_text": "rgb(21,20,26)",
       "icons": "rgb(24, 25, 26, 0.7)",
       "frame": "#f0f0f4",
       "popup": "#fff",

browser/themes/linux/browser.css

@@ -25,6 +25,7 @@
 
   --panel-separator-color: ThreeDShadow;
 
+  --tabs-border-color: rgba(0,0,0,.3);
 
   --chrome-content-separator-color: ThreeDShadow;
 }
@@ -35,10 +36,6 @@
 }
 } /*** END proton ***/
 
-#navigator-toolbox {
-  --tabs-border-color: rgba(0,0,0,.3);
-}
-
 #tabbrowser-tabs {
   --tab-line-color: -moz-accent-color;
 }

browser/themes/osx/browser.css

@@ -34,17 +34,24 @@
   --arrowpanel-field-background: rgba(12,12,13,.3);
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 #navigator-toolbox {
   appearance: none;
   --tabs-border-color: rgba(0,0,0,.2);
 }
+} /*** end !proton ***/
+
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+#navigator-toolbox {
+  appearance: none;
+}
 
-@supports -moz-bool-pref("browser.proton.enabled") {
 #navigator-toolbox:not(:-moz-lwtheme) {
   background-color: #f0f0f4;
 }
 } /*** END proton ***/
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
   --tabs-border-color: rgba(0,0,0,.05);
 }
@@ -52,6 +59,7 @@
 #navigator-toolbox:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 }
+} /*** end !proton ***/
 
 /*
   This is a workaround for Bug 1482157

browser/themes/shared/browser-custom-colors.inc.css

@@ -41,6 +41,10 @@
     --input-bgcolor: rgb(255,255,255);
     --input-border-color: rgb(143,143,157);
     --input-error-border-color: #E22850;
+
+    --tab-selected-bgcolor: rgb(255,255,255);
+    --tabs-border-color: transparent;
+    --toolbar-color: rgb(21,20,26);
   }
   } /** END Proton **/
 

browser/themes/shared/tabs.inc.css

@@ -703,15 +703,11 @@
   color: var(--lwt-tab-text, var(--toolbar-color));
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-line {
   height: 2px;
 }
-
-@supports -moz-bool-pref("browser.proton.tabs.enabled") {
-.tab-line {
-  display: none;
-}
-} /*** END proton ***/
+} /* end !proton */
 
 /* Selected tab */
 
@@ -730,12 +726,8 @@
   margin-top: 0 !important;
 }
 
-.tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background {
-  box-shadow: 0px 1px 2px rgba(58, 57, 68, 0.1);
-}
-
-.tabbrowser-tab[visuallyselected=true]:hover > .tab-stack > .tab-background {
-  box-shadow: 0px 2px var(--tab-shadow-max-size) rgba(58, 57, 68, 0.2);
+#TabsToolbar:not([brighttext]) .tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background {
+  box-shadow: 0 0 1.5px rgba(128,128,142,0.9), 0 0 4px rgba(128,128,142,0.5);
 }
 } /*** END proton ***/
 
@@ -765,7 +757,7 @@
 .tab-background[multiselected=true],
 .tab-background[selected=true] {
   border-top-color: var(--tabs-border-color);
-  background-color: var(--toolbar-bgcolor);
+  background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
@@ -776,10 +768,12 @@
   opacity: .1;
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-line[multiselected],
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
 }
+} /* end !proton */
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
@@ -801,6 +795,7 @@
 
 /* Tab hover */
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
   background-color: rgba(0,0,0,.1);
 }
@@ -808,7 +803,15 @@
 #TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
   background-color: rgba(255,255,255,.1);
 }
+} /* END !proton */
 
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
+  background-color: color-mix(in srgb, currentColor 11%, transparent);
+}
+} /* END proton */
+
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 @media (prefers-reduced-motion: no-preference) {
   .tab-line:not([selected=true], [multiselected]) {
     transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
@@ -833,6 +836,7 @@
 .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line[multiselected]:not([selected=true]) {
   opacity: 0.5;
 }
+} /* end !proton */
 
 /* Pinned tabs */
 

browser/themes/windows/browser-aero.css

@@ -44,6 +44,7 @@
   @media not (-moz-os-version: windows-win7) {
     @media not (-moz-os-version: windows-win8) {
       @media (-moz-windows-default-theme) {
+        @supports not -moz-bool-pref("browser.proton.enabled") {
         :root:not(:-moz-lwtheme) {
           background-color: hsl(0, 0%, 78%);
         }
@@ -75,9 +76,18 @@
             --toolbarbutton-icon-fill-opacity: .7;
           }
         }
+        } /*** end !proton ***/
+
+        @supports -moz-bool-pref("browser.proton.enabled") {
+        @media (-moz-windows-accent-color-in-titlebar) {
+          :root[sizemode=normal][tabsintitlebar] {
+            border-top: .5px solid -moz-accent-color;
+          }
+        }
+        } /*** END proton ***/
 
         :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive {
-          border-top-color: rgba(0,0,0,.3);
+          border-top-color: rgb(57,57,57);
         }
 
         :root[tabsintitlebar] .tab-label:-moz-window-inactive {
@@ -87,7 +97,7 @@
         }
 
         @supports -moz-bool-pref("browser.proton.tabs.enabled") {
-        :root[tabsintitlebar] .tab-icon-sound:-moz-window-inactive {
+        :root[tabsintitlebar] .tab-secondary-label:-moz-window-inactive {
           opacity: .6;
         }
         } /*** END proton ***/

browser/themes/windows/browser.css

@@ -21,6 +21,7 @@
   --panel-separator-color: ThreeDLightShadow;
 
   --chrome-content-separator-color: ThreeDShadow;
+  --tabs-border-color: threedshadow;
 }
 
 @supports not -moz-bool-pref("browser.proton.enabled") {
@@ -29,10 +30,6 @@
 }
 } /* END !proton */
 
-#navigator-toolbox {
-  --tabs-border-color: threedshadow;
-}
-
 #tabbrowser-tabs {
   --tab-line-color: highlight;
 }
@@ -52,9 +49,11 @@
     --toolbar-field-non-lwt-bgcolor: #f0f0f4;
   }
 
+  @supports not -moz-bool-pref("browser.proton.tabs.enabled") {
   #navigator-toolbox {
     --tabs-border-color: rgba(0,0,0,.3);
   }
+  } /* END !proton */
 
   #tabbrowser-tabs {
     --tab-line-color: #0a84ff;
@@ -71,9 +70,11 @@
   --panel-separator-color: rgba(249,249,250,.1);
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 #navigator-toolbox:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 }
+} /* END !proton */
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */

browser/themes/windows/compacttheme.css

@@ -47,12 +47,14 @@
       color: hsl(240,9%,98%);
     }
 
+    @supports not -moz-bool-pref("browser.proton.tabs.enabled") {
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
      * correct color for the tab hover state for the light theme. */
     .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true], [multiselected]):-moz-lwtheme-darktext {
       background-color: rgba(0,0,0,.2) !important;
     }
+    } /* end !proton */
   }
 }
 } /*** END !proton ***/

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

@@ -30,13 +30,7 @@ add_task(async function test_support_tab_line() {
       ".tabbrowser-tab[selected]"
     );
     let line = selectedTab.querySelector(".tab-line");
-    if (protonTabsEnabled) {
-      Assert.equal(
-        newWin.getComputedStyle(line).display,
-        "none",
-        "Tab line should not be displayed when Proton is enabled"
-      );
-    } else {
+    if (!protonTabsEnabled) {
       Assert.equal(
         newWin.getComputedStyle(line).backgroundColor,
         `rgb(${hexToRGB(TAB_LINE_COLOR).join(", ")})`,

toolkit/mozapps/extensions/default-theme/manifest.json

@@ -19,22 +19,78 @@
 
   "dark_theme": {
     "colors": {
-      "tab_background_text": "rgb(249, 249, 250)",
+      "tab_background_text": "#fbfbfe",
+      "tab_selected": "rgb(66,65,77)",
+      "tab_text": "rgb(251,251,254)",
       "icons": "rgb(249, 249, 250, 0.7)",
-      "frame": "hsl(240, 5%, 5%)",
-      "popup": "#4a4a4f",
-      "popup_text": "rgb(249, 249, 250)",
-      "popup_border": "#27272b",
+      "frame": "#1c1b22",
+      "popup": "rgb(66,65,77)",
+      "popup_text": "rgb(251,251,254)",
+      "popup_border": "rgb(82,82,94)",
+      "popup_highlight": "rgb(43,42,51)",
       "tab_line": "#0a84ff",
-      "toolbar": "hsl(240, 1%, 20%)",
+      "toolbar": "#2b2a33",
       "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
-      "toolbar_field": "rgb(71, 71, 73)",
-      "toolbar_field_border": "rgba(249, 249, 250, 0.2)",
+      "toolbar_field": "rgb(28,27,34)",
+      "toolbar_field_border": "transparent",
+      "toolbar_field_text": "rgb(251,251,254)",
+      "toolbar_field_focus": "rgb(66,65,77)",
       "toolbar_field_separator": "#5F6670",
-      "toolbar_field_text": "rgb(249, 249, 250)",
+      "toolbar_text": "#BFBFC9",
+      "ntp_background": "#2A2A2E",
+      "ntp_text": "rgb(249, 249, 250)",
       "sidebar": "#38383D",
       "sidebar_text": "rgb(249, 249, 250)",
-      "sidebar_border": "rgba(255, 255, 255, 0.1)"
+      "sidebar_border": "rgba(255, 255, 255, 0.1)",
+      "button": "rgb(43,42,51)",
+      "button_hover": "rgb(82,82,94)",
+      "button_active": "rgb(91,91,102)",
+      "checkbox_border_color": "rgb(143, 143, 157)",
+      "checkbox_unchecked_background": "rgb(43, 42, 51)",
+      "checkbox_unchecked_background_hover": "rgb(82, 82, 94)",
+      "checkbox_unchecked_background_active": "rgb(91, 91, 102)",
+      "checkbox_checked_background": "rgb(0, 221, 255)",
+      "checkbox_checked_color": "rgb(43, 42, 51)",
+      "checkbox_checked_background_hover": "rgb(128, 235, 255)",
+      "checkbox_checked_background_active": "rgb(170, 242, 255)",
+      "error_text_color": "rgb(255, 154, 162)",
+      "input_background": "#42414D",
+      "input_color": "#BFBFC9",
+      "input_border": "#8f8f9d",
+      "input_border_error": "rgb(255, 132, 138)",
+      "zoom_controls": "rgb(74,74,85)"
+    },
+    "properties": {
+      "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
+      "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
+      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)"
+    }
+  },
+
+  "theme_experiment": {
+    "colors": {
+      "button": "--button-bgcolor",
+      "button_hover": "--button-hover-bgcolor",
+      "button_active": "--button-active-bgcolor",
+      "checkbox_border_color": "--checkbox-border-color",
+      "checkbox_unchecked_background": "--checkbox-unchecked-bgcolor",
+      "checkbox_unchecked_background_hover": "--checkbox-unchecked-hover-bgcolor",
+      "checkbox_unchecked_background_active": "--checkbox-unchecked-active-bgcolor",
+      "checkbox_checked_background": "--checkbox-checked-bgcolor",
+      "checkbox_checked_color": "--checkbox-checked-color",
+      "checkbox_checked_background_hover": "--checkbox-checked-hover-bgcolor",
+      "checkbox_checked_background_active": "--checkbox-checked-active-bgcolor",
+      "error_text_color": "--error-text-color",
+      "input_background": "--input-bgcolor",
+      "input_color": "--input-color",
+      "input_border": "--input-border-color",
+      "input_border_error": "--input-error-border-color",
+      "zoom_controls": "--zoom-controls-bgcolor"
+    },
+    "properties": {
+      "panel_hover": "--arrowpanel-dimmed",
+      "panel_active": "--arrowpanel-dimmed-further",
+      "panel_active_darker": "--arrowpanel-dimmed-even-further"
     }
   }
 }