Bug 1419898 - Fix address bar border hover state on lightweight themes. r=dao
MozReview-Commit-ID: 4e5HGbOZX0X
--- 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;