Bug 1443226 - Port bug 1434476 and bug 1439734 to TB (tab background color and tab line color). r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Mon, 05 Mar 2018 19:34:55 +0100
changeset 31234 bda7b4ec2e7bc184d86283c94bdc63d04aa42f3b
parent 31233 894cbf4db50135cb80db34ec06b10b7e68429902
child 31235 278d1f336d04a8bc0a6cb2181a98bee40ce6fb9f
push id383
push userclokep@gmail.com
push dateMon, 07 May 2018 21:52:48 +0000
reviewersjorgk
bugs1443226, 1434476, 1439734
Bug 1443226 - Port bug 1434476 and bug 1439734 to TB (tab background color and tab line color). r=jorgk bug 1434476 - Allow changing the background color of the selected tab. bug 1439734 - Allow setting the tab line color.
mail/base/modules/ThemeVariableMap.jsm
mail/themes/shared/mail/tabmail.css
--- a/mail/base/modules/ThemeVariableMap.jsm
+++ b/mail/base/modules/ThemeVariableMap.jsm
@@ -5,22 +5,24 @@
 var EXPORTED_SYMBOLS = ["ThemeVariableMap"];
 
 const ThemeVariableMap = [
   ["--lwt-accent-color-inactive", "accentcolorInactive"],
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
   ["--tab-loading-fill", "tab_loading"],
   ["--lwt-tab-text", "tab_text"],
+  ["--tab-line-color", "tab_line", "tabs-toolbar"],
   ["--toolbar-bgcolor", "toolbarColor"],
   ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"],
   ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
   ["--urlbar-separator-color", "toolbar_field_separator"],
   ["--tabs-border-color", "toolbar_top_separator"],
   ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--lwt-toolbarbutton-icon-fill", "icon_color"],
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
   ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
   ["--lwt-toolbarbutton-active-background", "button_background_active"],
+  ["--lwt-selected-tab-background-color", "tab_selected"],
 ];
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -138,23 +138,25 @@
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
  * image to the lwt-header-image variable, used in each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
 :root[lwtheme-image] .tabmail-tab > .tab-stack > .tab-background[selected=true] {
-  background-attachment: scroll, fixed;
+  background-attachment: scroll, scroll, fixed;
   background-color: transparent;
-  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+  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);
-  background-position: 0 0, right top;
-  background-repeat: repeat-x, no-repeat;
-  background-size: auto 100%, auto auto;
+  background-position: 0 0, 0 0, right top;
+  background-repeat: repeat-x, repeat-x, no-repeat;
+  background-size: auto 100%, auto 100%, auto auto;
 }
 
 /* Tab hover */
 
 .tabmail-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(0,0,0,.1);
 }