Bug 1467423 - Make findbar textbox focused state follow theme properties. r=jaws draft
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 19 Jun 2018 15:25:49 +0100
changeset 808430 fe80a319a8a092df757dbae3ade800c8b374bfd9
parent 808423 75df8c6facf7eda425d18b8053dc4c2eb9ed3ec7
push id113380
push userbmo:ntim.bugs@gmail.com
push dateTue, 19 Jun 2018 14:26:52 +0000
reviewersjaws
bugs1467423
milestone62.0a1
Bug 1467423 - Make findbar textbox focused state follow theme properties. r=jaws MozReview-Commit-ID: GfkUVIdmWjw
browser/modules/ThemeVariableMap.jsm
toolkit/modules/LightweightThemeConsumer.jsm
toolkit/themes/osx/global/findBar.css
toolkit/themes/shared/findBar.inc.css
--- 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"] {