Bug 1449765 - Fix urlbar focusring on macOS. r=jaws draft
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 29 Mar 2018 00:38:37 +0200
changeset 774451 3042f91db2b4310133b89210192ded542afcc67b
parent 773304 d91b03764f7808379a9692ec6af3ed951bb46c68
push id104407
push userbmo:ntim.bugs@gmail.com
push dateWed, 28 Mar 2018 22:39:19 +0000
reviewersjaws
bugs1449765
milestone61.0a1
Bug 1449765 - Fix urlbar focusring on macOS. r=jaws MozReview-Commit-ID: VHpMDilA0p
browser/modules/ThemeVariableMap.jsm
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/browser.css
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -43,17 +43,17 @@ const ThemeVariableMap = [
     lwtProperty: "toolbar_field_border"
   }],
   ["--lwt-toolbar-field-focus", {
     lwtProperty: "toolbar_field_focus"
   }],
   ["--lwt-toolbar-field-focus-color", {
     lwtProperty: "toolbar_field_text_focus"
   }],
-  ["--lwt-toolbar-field-focus-border-color", {
+  ["--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"
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -163,21 +163,16 @@ menuitem.bookmark-item {
 
 %include ../shared/urlbar-searchbar.inc.css
 
 #urlbar:not(:-moz-lwtheme):not([focused="true"]),
 .searchbar-textbox:not(:-moz-lwtheme):not([focused="true"]) {
   border-color: ThreeDShadow;
 }
 
-#urlbar[focused="true"],
-.searchbar-textbox[focused="true"] {
-  border-color: Highlight;
-}
-
 /* ::::: URL Bar Zoom Reset Button ::::: */
 @keyframes urlbar-zoom-reset-pulse {
   0% {
     transform: scale(0);
   }
   75% {
     transform: scale(1.5);
   }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -251,31 +251,35 @@
 #fullscreen-button ~ #window-controls > #restore-button {
   display: none;
 }
 
 /* ::::: nav-bar-inner ::::: */
 
 %include ../shared/urlbar-searchbar.inc.css
 
+:root {
+  --toolbar-field-focus-border-color: -moz-mac-focusring;
+}
+
 #urlbar,
 .searchbar-textbox {
   font-size: 1.25em;
 }
 
 /* Ensure diacritics and other edge-of-font-box glyphs do not get clipped,
  * even in non-Latin scripts. */
 html|input.urlbar-input {
   line-height: 1.745em;
 }
 
 #urlbar[focused="true"],
 .searchbar-textbox[focused="true"] {
-  border-color: -moz-mac-focusring;
-  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);
 }
 
 %include ../shared/identity-block/identity-block.inc.css
 
 #identity-box:not(:active):-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
   border-inline-end-style: none;
   padding-inline-end: 5px;
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -3,16 +3,18 @@
  * 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 {
+  --toolbar-field-focus-border-color: Highlight;
+
   /* 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;
 }
@@ -58,21 +60,25 @@
   border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
 }
 
 #urlbar:-moz-lwtheme:hover,
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
   background-color: var(--url-and-searchbar-background-color, white);
 }
 
+#urlbar[focused="true"],
+.searchbar-textbox[focused="true"] {
+  border-color: var(--toolbar-field-focus-border-color);
+}
+
 #urlbar:-moz-lwtheme[focused="true"],
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
   background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
-  border-color: var(--lwt-toolbar-field-focus-border-color, var(--lwt-toolbar-field-border-color, @fieldBorderColor@));
 }
 
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] .searchbar-textbox {
   min-height: 26px;
   margin-top: 3px;
   margin-bottom: 3px;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -520,21 +520,16 @@ menuitem.bookmark-item {
 
 @media (-moz-windows-default-theme: 0) {
   #urlbar:not(:-moz-lwtheme):not([focused="true"]),
   .searchbar-textbox:not(:-moz-lwtheme):not([focused="true"]) {
     border-color: ThreeDShadow;
   }
 }
 
-#urlbar[focused="true"],
-.searchbar-textbox[focused="true"] {
-  border-color: Highlight;
-}
-
 html|*.urlbar-input:-moz-lwtheme::placeholder,
 .searchbar-textbox:-moz-lwtheme > .urlbar-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
   opacity: 1.0;
   color: #777;
 }
 
 /* ::::: URL Bar Zoom Reset Button ::::: */
 @keyframes urlbar-zoom-reset-pulse {