Bug 1488000 - Allow theming sidebar border color. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 04 Sep 2018 21:33:46 +0000
changeset 434711 e119dbd3463f
parent 434710 146b7cab1762
child 434712 0db77a36565c
push id34576
push userebalazs@mozilla.com
push dateWed, 05 Sep 2018 09:43:04 +0000
treeherdermozilla-central@46e6b719f5bf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1488000
milestone63.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 1488000 - Allow theming sidebar border color. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D4839
browser/modules/ThemeVariableMap.jsm
toolkit/components/extensions/parent/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -92,16 +92,20 @@ const ThemeVariableMap = [
       // Drop alpha channel
       return `rgb(${r}, ${g}, ${b})`;
     },
   }],
   ["--sidebar-text-color", {
     lwtProperty: "sidebar_text",
     optionalElementID: "sidebar-box",
   }],
+  ["--sidebar-border-color", {
+    lwtProperty: "sidebar_border",
+    optionalElementID: "browser",
+  }],
 ];
 
 const ThemeContentPropertyList = [
   "ntp_background",
   "ntp_text",
   "sidebar",
   "sidebar_highlight",
   "sidebar_highlight_text",
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -182,16 +182,17 @@ class Theme {
         case "popup":
         case "popup_text":
         case "popup_border":
         case "popup_highlight":
         case "popup_highlight_text":
         case "ntp_background":
         case "ntp_text":
         case "sidebar":
+        case "sidebar_border":
         case "sidebar_text":
         case "sidebar_highlight":
         case "sidebar_highlight_text":
           this.lwtStyles[color] = cssColor;
           break;
         default:
           if (this.experiment && this.experiment.colors && color in this.experiment.colors) {
             this.lwtStyles.experimental.colors[color] = cssColor;
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -236,16 +236,20 @@
               "ntp_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "sidebar": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "sidebar_border": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "sidebar_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "sidebar_highlight": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js
@@ -142,8 +142,46 @@ add_task(async function test_support_sid
     await test_sidebar_theme({
       colors: {
         sidebar_highlight: "#a0522d", // sienna
         sidebar_highlight_text: "#fff5ee", // seashell
       },
     }, false);
   }
 });
+
+add_task(async function test_support_sidebar_border_color() {
+  const LIGHT_SALMON = "#ffa07a";
+  const extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          sidebar_border: LIGHT_SALMON,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  const sidebarHeader = document.getElementById("sidebar-header");
+  const sidebarHeaderCS = window.getComputedStyle(sidebarHeader);
+
+  is(sidebarHeaderCS.borderBottomColor, hexToCSS(LIGHT_SALMON),
+     "Sidebar header border should be colored properly");
+
+  if (AppConstants.platform !== "linux") {
+    const sidebarSplitter = document.getElementById("sidebar-splitter");
+    const sidebarSplitterCS = window.getComputedStyle(sidebarSplitter);
+
+    is(sidebarSplitterCS.borderInlineEndColor, hexToCSS(LIGHT_SALMON),
+       "Sidebar splitter should be colored properly");
+
+    SidebarUI.reversePosition();
+
+    is(sidebarSplitterCS.borderInlineStartColor, hexToCSS(LIGHT_SALMON),
+       "Sidebar splitter should be colored properly after switching sides");
+
+    SidebarUI.reversePosition();
+  }
+
+  await extension.unload();
+});