Bug 1418603 - Allow setting the urlbar and the searchbar border color. r=jaws draft
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 19 Nov 2017 17:05:30 +0000
changeset 700249 ac359ca7a2b0d7ed91c9d41552759dc67ceec7e4
parent 700247 ef82504a27826468cf9885b22380acefac277bda
child 740820 1ba3e72e65dd8163aaff39240e8eeaf05392acd3
push id89777
push userbmo:ntim.bugs@gmail.com
push dateSun, 19 Nov 2017 17:05:53 +0000
reviewersjaws
bugs1418603
milestone59.0a1
Bug 1418603 - Allow setting the urlbar and the searchbar border color. r=jaws MozReview-Commit-ID: HcALXHaYIV1
browser/themes/shared/urlbar-searchbar.inc.css
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -40,16 +40,21 @@
 }
 
 #urlbar:-moz-lwtheme,
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme {
   background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8));
   color: var(--url-and-searchbar-color, black);
 }
 
+#urlbar:not([focused="true"]):-moz-lwtheme,
+#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme {
+  border-color: var(--url-and-searchbar-border-color, hsla(240,5%,5%,.25));
+}
+
 #urlbar:-moz-lwtheme:hover,
 #urlbar:-moz-lwtheme[focused="true"],
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover,
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
   background-color: var(--url-and-searchbar-background-color, white);
 }
 
 :root[uidensity=compact] #urlbar,
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -138,16 +138,17 @@ class Theme {
           break;
         case "toolbar_text":
         case "bookmark_text":
           this.lwtStyles.toolbar_text = cssColor;
           break;
         case "tab_text":
         case "toolbar_field":
         case "toolbar_field_text":
+        case "toolbar_field_border":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
           this.lwtStyles[color] = cssColor;
           break;
       }
     }
   }
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -104,16 +104,20 @@
               "toolbar_field": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "toolbar_field_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "toolbar_field_border": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "toolbar_top_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "toolbar_bottom_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -5,30 +5,43 @@
 
 add_task(async function setup() {
   await SpecialPowers.pushPrefEnv({set: [
     ["extensions.webextensions.themes.enabled", true],
     ["browser.search.widget.inNavBar", true],
   ]});
 });
 
+function testBorderColor(element, expected) {
+  Assert.equal(window.getComputedStyle(element).borderLeftColor,
+    "rgb(" + hexToRGB(expected).join(", ") + ")", "Field left border color should be set.");
+  Assert.equal(window.getComputedStyle(element).borderRightColor,
+    "rgb(" + hexToRGB(expected).join(", ") + ")", "Field right border color should be set.");
+  Assert.equal(window.getComputedStyle(element).borderTopColor,
+    "rgb(" + hexToRGB(expected).join(", ") + ")", "Field top border color should be set.");
+  Assert.equal(window.getComputedStyle(element).borderBottomColor,
+    "rgb(" + hexToRGB(expected).join(", ") + ")", "Field bottom border color should be set.");
+}
+
 add_task(async function test_support_toolbar_field_properties() {
   const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
   const TOOLBAR_FIELD_COLOR = "#00ff00";
+  const TOOLBAR_FIELD_BORDER = "#aaaaff";
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "headerURL": "image1.png",
         },
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "toolbar_field": TOOLBAR_FIELD_BACKGROUND,
           "toolbar_field_text": TOOLBAR_FIELD_COLOR,
+          "toolbar_field_border": TOOLBAR_FIELD_BORDER,
         },
       },
     },
     files: {
       "image1.png": BACKGROUND,
     },
   });
 
@@ -51,15 +64,16 @@ add_task(async function test_support_too
 
   info(`Checking toolbar background colors and colors for ${fields.length} toolbar fields.`);
   for (let field of fields) {
     info(`Testing ${field.id || field.className}`);
     Assert.equal(window.getComputedStyle(field).backgroundColor,
       "rgb(" + hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ") + ")", "Field background should be set.");
     Assert.equal(window.getComputedStyle(field).color,
       "rgb(" + hexToRGB(TOOLBAR_FIELD_COLOR).join(", ") + ")", "Field color should be set.");
+    testBorderColor(field, TOOLBAR_FIELD_BORDER);
   }
 
   // Restore the `remotecontrol` attribute at the end of the test.
   document.documentElement.setAttribute("remotecontrol", "true");
 
   await extension.unload();
 });
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -16,16 +16,17 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 const kCSSVarsMap = new Map([
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
   ["--theme-tab-text", "tab_text"],
   ["--toolbar-bgcolor", "toolbarColor"],
   ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"],
+  ["--url-and-searchbar-border-color", "toolbar_field_border"],
   ["--tabs-border-color", "toolbar_top_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--urlbar-separator-color", "toolbar_vertical_separator"],
 ]);
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;