Bug 1449765 - Fix urlbar focusring on macOS. r=jaws
MozReview-Commit-ID: VHpMDilA0p
--- 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 {