Bug 1418603 - Allow setting the urlbar and the searchbar border color. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 19 Nov 2017 17:05:30 +0000
changeset 392887 a850e3bc63717beb66e9202da6d6930c1e7305a3
parent 392886 696edf3997a4e70e0502fa7d9a6b8bc2ab0bb22b
child 392888 76b5c4e2c6a200e017161f60f61bdbe525f3f45d
push id32945
push userccoroiu@mozilla.com
push dateTue, 21 Nov 2017 23:30:10 +0000
treeherdermozilla-central@0ee6ca490391 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1418603
milestone59.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 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;