Bug 1434476 - Allow changing the background color of the selected tab. r=jaws
authorvinicius <viniciuscosta0197@gmail.com>
Fri, 02 Mar 2018 15:24:05 -0300
changeset 461456 65f5b5e79d2ec54f346b6340bae40e3eba39902e
parent 461455 99809c2e06ae8aa4cc8fa8109c1c94ec61f6cd4b
child 461457 71edaf2bd1b01daffb805627623712bd329fb5f9
child 461460 df8bffb2a6ac34f43c1cfa857a992119b1686fb1
push id1683
push usersfraser@mozilla.com
push dateThu, 26 Apr 2018 16:43:40 +0000
treeherdermozilla-release@5af6cb21869d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1434476
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1434476 - Allow changing the background color of the selected tab. r=jaws *** MozReview-Commit-ID: 3GpBSWepNe3 ***
browser/modules/ThemeVariableMap.jsm
browser/themes/shared/tabs.inc.css
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_tab_selected.js
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -18,9 +18,10 @@ const ThemeVariableMap = [
   ["--urlbar-separator-color", "toolbar_field_separator"],
   ["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
   ["--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/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -525,23 +525,24 @@ tabbrowser {
 
 /*
  * 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] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-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 */
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(0,0,0,.1);
 }
 
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -145,16 +145,17 @@ class Theme {
         case "icons":
           this.lwtStyles.icon_color = cssColor;
           break;
         case "icons_attention":
           this.lwtStyles.icon_attention_color = cssColor;
           break;
         case "tab_loading":
         case "tab_text":
+        case "tab_selected":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
         case "toolbar_field_separator":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
         case "button_background_hover":
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -64,16 +64,20 @@
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }
           },
           "colors": {
             "type": "object",
             "optional": true,
             "properties": {
+              "tab_selected": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "accentcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "frame": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -16,8 +16,9 @@ support-files =
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_loading.js]
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
 [browser_ext_themes_toolbarbutton_colors.js]
 [browser_ext_themes_arrowpanels.js]
+[browser_ext_themes_tab_selected.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_selected.js
@@ -0,0 +1,48 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color of selected tab are applied correctly.
+
+add_task(async function test_tab_background_color_property() {
+  const TAB_BACKGROUND_COLOR = "#9400ff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "tab_selected": TAB_BACKGROUND_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  info("Checking selected tab color");
+
+  let openTab = document.querySelector(".tabbrowser-tab[visuallyselected=true]");
+  let openTabBackground = document.getAnonymousElementByAttribute(openTab, "class", "tab-background");
+
+  let selectedTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:blank");
+  let selectedTabBackground = document.getAnonymousElementByAttribute(selectedTab, "class", "tab-background");
+
+  let openTabGradient = window.getComputedStyle(openTabBackground).getPropertyValue("background-image");
+  let selectedTabGradient = window.getComputedStyle(selectedTabBackground).getPropertyValue("background-image");
+
+  let rgbRegex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/g;
+  let selectedTabColors = selectedTabGradient.match(rgbRegex);
+
+  Assert.equal(selectedTabColors[0], "rgb(" + hexToRGB(TAB_BACKGROUND_COLOR).join(", ") + ")",
+               "Selected tab background color should be set.");
+  Assert.equal(openTabGradient, "none");
+
+  gBrowser.removeTab(selectedTab);
+  await extension.unload();
+});