Bug 1488000 - Allow theming sidebar border color. r=jaws

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

--HG--
extra : moz-landing-system : lando

browser/modules/ThemeVariableMap.jsm

@@ -97,6 +97,10 @@ const ThemeVariableMap = [
     lwtProperty: "sidebar_text",
     optionalElementID: "sidebar-box",
   }],
+  ["--sidebar-border-color", {
+    lwtProperty: "sidebar_border",
+    optionalElementID: "browser",
+  }],
 ];
 
 const ThemeContentPropertyList = [

toolkit/components/extensions/parent/ext-theme.js

@@ -187,6 +187,7 @@ class Theme {
         case "ntp_background":
         case "ntp_text":
         case "sidebar":
+        case "sidebar_border":
         case "sidebar_text":
         case "sidebar_highlight":
         case "sidebar_highlight_text":

toolkit/components/extensions/schemas/theme.json

@@ -241,6 +241,10 @@
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "sidebar_border": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "sidebar_text": {
                 "$ref": "ThemeColor",
                 "optional": true

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

@@ -147,3 +147,41 @@ add_task(async function test_support_sidebar_colors() {
     }, 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();
+});