Bug 1467423 - Make findbar textbox focused state follow theme properties. r=jaws
MozReview-Commit-ID: GfkUVIdmWjw
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -31,28 +31,16 @@ const ThemeVariableMap = [
lwtProperty: "tab_background_separator",
}],
["--toolbar-bgcolor", {
lwtProperty: "toolbarColor"
}],
["--toolbar-color", {
lwtProperty: "toolbar_text"
}],
- ["--lwt-toolbar-field-border-color", {
- lwtProperty: "toolbar_field_border"
- }],
- ["--lwt-toolbar-field-focus", {
- lwtProperty: "toolbar_field_focus"
- }],
- ["--lwt-toolbar-field-focus-color", {
- lwtProperty: "toolbar_field_text_focus"
- }],
- ["--toolbar-field-focus-border-color", {
- lwtProperty: "toolbar_field_border_focus"
- }],
["--urlbar-separator-color", {
lwtProperty: "toolbar_field_separator"
}],
["--tabs-border-color", {
lwtProperty: "toolbar_top_separator",
optionalElementID: "navigator-toolbox"
}],
["--lwt-toolbar-vertical-separator", {
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -78,16 +78,28 @@ const toolkitVariableMap = [
if (_isTextColorDark(r, g, b)) {
element.removeAttribute("lwt-toolbar-field-brighttext");
} else {
element.setAttribute("lwt-toolbar-field-brighttext", "true");
}
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
}],
+ ["--lwt-toolbar-field-border-color", {
+ lwtProperty: "toolbar_field_border"
+ }],
+ ["--lwt-toolbar-field-focus", {
+ lwtProperty: "toolbar_field_focus"
+ }],
+ ["--lwt-toolbar-field-focus-color", {
+ lwtProperty: "toolbar_field_text_focus"
+ }],
+ ["--toolbar-field-focus-border-color", {
+ lwtProperty: "toolbar_field_border_focus"
+ }],
];
// Get the theme variables from the app resource directory.
// This allows per-app variables.
ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
"resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -80,14 +80,15 @@ label.findbar-find-fast:-moz-lwtheme,
background-image: url("chrome://global/skin/icons/search-textbox.svg");
background-repeat: no-repeat;
background-position: 5px center;
margin: 0;
padding-inline-start: 19px;
}
.findbar-textbox[focused="true"] {
- box-shadow: var(--focus-ring-box-shadow);
+ box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
+ 0 0 0 1px var(--toolbar-field-focus-border-color);
}
.findbar-textbox:-moz-locale-dir(rtl) {
background-position-x: right 5px;
}
--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@@ -65,17 +65,19 @@ findbar[noanim] {
}
.findbar-textbox:-moz-locale-dir(rtl) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.findbar-textbox[focused="true"] {
- border-color: Highlight;
+ background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, -moz-Field));
+ color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, -moz-FieldText));
+ border-color: var(--toolbar-field-focus-border-color, Highlight);
}
.findbar-textbox[status="notfound"] {
background-color: rgba(255,0,57,.3);
color: inherit;
}
.findbar-textbox[flash="true"] {