Bug 1459455 - Allow changing the tab separator color. r=jaws
☠☠ backed out by 064204d6d6d9 ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 30 May 2018 00:51:45 +0200
changeset 474560 c6bd6395abb7548670943c86291c669a0959889d
parent 474559 47eee94a27ae515fbf54c47e8018f017f4716b70
child 474561 a5b4905bb6171f41a27cfa9511605aa8f17b6a06
push id9374
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:43:20 +0000
treeherdermozilla-beta@160e085dfb0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1459455
milestone62.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 1459455 - Allow changing the tab separator color. r=jaws MozReview-Commit-ID: EZud6zCay4a
browser/modules/ThemeVariableMap.jsm
browser/themes/shared/tabs.inc.css
toolkit/components/extensions/parent/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_separators.js
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -22,16 +22,19 @@ const ThemeVariableMap = [
   }],
   ["--lwt-tab-text", {
     lwtProperty: "tab_text"
   }],
   ["--tab-line-color", {
     lwtProperty: "tab_line",
     optionalElementID: "tabbrowser-tabs"
   }],
+  ["--lwt-background-tab-separator-color", {
+    lwtProperty: "tab_background_separator",
+  }],
   ["--toolbar-bgcolor", {
     lwtProperty: "toolbarColor"
   }],
   ["--toolbar-color", {
     lwtProperty: "toolbar_text"
   }],
   ["--lwt-toolbar-field-border-color", {
     lwtProperty: "toolbar_field_border"
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -631,23 +631,23 @@
   .titlebar-placeholder[type="post-tabs"] {
     display: none;
   }
 }
 
 /* Tab separators */
 
 .titlebar-placeholder[type="pre-tabs"] {
-  border-inline-end: 1px solid;
+  border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor);
   opacity: 0.2;
 }
 
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
-  border-left: 1px solid;
+  border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor);
   margin-top: 5px;
   margin-bottom: 4px;
   opacity: 0.3;
 }
 
 /* Move the ::before pseudo-element on tabs 1px to the left
  * to avoid resizing the tab when the pseudo-element is removed again
  * (this currently happens when a tab is dragged and dropped).
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -143,16 +143,17 @@ class Theme {
           this.lwtStyles.toolbar_text = cssColor;
           break;
         case "icons":
           this.lwtStyles.icon_color = cssColor;
           break;
         case "icons_attention":
           this.lwtStyles.icon_attention_color = cssColor;
           break;
+        case "tab_background_separator":
         case "tab_loading":
         case "tab_text":
         case "tab_line":
         case "tab_selected":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
         case "toolbar_field_separator":
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -88,16 +88,20 @@
               "textcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "tab_background_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "tab_background_separator": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "tab_loading": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "tab_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -11,20 +11,21 @@ support-files =
 [browser_ext_themes_getCurrent_differentExt.js]
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
 [browser_ext_themes_separators.js]
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_line.js]
 [browser_ext_themes_tab_loading.js]
+[browser_ext_themes_tab_separators.js]
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields_focus.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_theme_transition.js]
 [browser_ext_themes_arrowpanels.js]
 [browser_ext_themes_tab_selected.js]
 [browser_ext_themes_autocomplete_popup.js]
 [browser_ext_themes_sanitization.js]
-[browser_ext_themes_findbar.js]
\ No newline at end of file
+[browser_ext_themes_findbar.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_separators.js
@@ -0,0 +1,34 @@
+"use strict";
+
+add_task(async function test_support_tab_separators() {
+  const TAB_SEPARATOR_COLOR = "#FF0000";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "colors": {
+          "accentcolor": "#000",
+          "textcolor": "#9400ff",
+          "tab_background_separator":  TAB_SEPARATOR_COLOR,
+        },
+      },
+    }
+  });
+  await extension.startup();
+
+  info("Checking background tab separator color");
+
+  let tab = gBrowser.addTab("about:blank");
+
+  Assert.equal(window.getComputedStyle(tab, "::before").borderLeftColor,
+               `rgb(${hexToRGB(TAB_SEPARATOR_COLOR).join(", ")})`,
+               "Left separator has right color.");
+
+  Assert.equal(window.getComputedStyle(tab, "::after").borderLeftColor,
+               `rgb(${hexToRGB(TAB_SEPARATOR_COLOR).join(", ")})`,
+               "Right separator has right color.");
+
+  gBrowser.removeTab(tab);
+
+  await extension.unload();
+});