Bug 1467423 - Make findbar textbox focused state follow theme properties. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 19 Jun 2018 15:25:49 +0100
changeset 422951 855360a8022769672528a24501c1902235d76021
parent 422950 135bf31e39c7fc349e0c6ef1b9181aa386c32eda
child 422952 81864d0dfb82a4d1812607225114797c1d1df052
push id34159
push userdluca@mozilla.com
push dateTue, 19 Jun 2018 21:53:05 +0000
treeherdermozilla-central@33c34fbb0b0d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1467423
milestone62.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 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"] {