Bug 1419898 - Fix address bar border hover state on lightweight themes. r=dao draft
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 05 Dec 2017 19:16:00 +0000
changeset 707744 135a9107e45439d0b1e4ad653c875b27b9c7b138
parent 706571 07f0607be42d8e7524d43786ff802fdedfc3e23d
child 743024 14dc7ea26f5c115cd66ccbc81052627022a111ed
push id92206
push userbmo:ntim.bugs@gmail.com
push dateTue, 05 Dec 2017 19:16:21 +0000
reviewersdao
bugs1419898
milestone59.0a1
Bug 1419898 - Fix address bar border hover state on lightweight themes. r=dao MozReview-Commit-ID: 4e5HGbOZX0X
browser/themes/shared/tabs.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -460,17 +460,17 @@ tabbrowser {
 }
 
 .tabbrowser-tab:not([visuallyselected=true]),
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
 .tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
-  color: var(--theme-tab-text, var(--toolbar-color, inherit));
+  color: var(--lwt-tab-text, var(--toolbar-color, inherit));
 }
 
 .tab-line {
   height: 2px;
 }
 
 /* Selected tab */
 
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -1,14 +1,17 @@
 %if 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
+%define fieldBorderColor hsla(240,5%,5%,.25)
+%define fieldHoverBorderColor hsla(240,5%,5%,.35)
+
 :root {
   /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
   --urlbar-icon-padding: 6px;
 }
 
 :root[uidensity=compact] {
   /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
   --urlbar-icon-padding: 4px;
@@ -18,41 +21,46 @@
   /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
   --urlbar-icon-padding: 7px;
 }
 
 #urlbar,
 .searchbar-textbox {
   -moz-appearance: none;
   background-clip: content-box;
-  border: 1px solid hsla(240,5%,5%,.25);
+  border: 1px solid @fieldBorderColor@;
   border-radius: var(--toolbarbutton-border-radius);
   box-shadow: 0 1px 4px rgba(0,0,0,.05);
   padding: 0;
   margin: 3px 5px;
   min-height: 30px;
   cursor: default;
   overflow: -moz-hidden-unscrollable;
 }
 
 #urlbar:hover,
 .searchbar-textbox:hover {
-  border-color: hsla(240,5%,5%,.35);
+  border-color: @fieldHoverBorderColor@;
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
 #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));
+  border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
+}
+
+#urlbar:not([focused="true"]):-moz-lwtheme:hover,
+#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme:hover {
+  border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
 }
 
 #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);
 }
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -11,22 +11,22 @@ Cu.import("resource://gre/modules/Servic
 Cu.import("resource://gre/modules/AppConstants.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
-  ["--theme-tab-text", "tab_text"],
+  ["--lwt-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"],
+  ["--lwt-toolbar-field-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;