Bug 1287763 - Use flat yosemite-style border-box for focused styling in OSX, in more places
* Fix border-box styles for focused elements/controls in editBookmarkPanel, identity-container, tracking-protection-container, tabbedbrowser tabs
* Define a --focus-ring-box-shadow variable for osx, override for -moz-mac-yosemite-theme.
* Replace hudButtonFocused withe focus-ring-box-shadow variable.
* Fix text-link focus styles and other stragglers in toolkit osx theme
MozReview-Commit-ID: 9c1w87Rgdm3
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1485,24 +1485,17 @@ toolbar .toolbarbutton-1 > .toolbarbutto
box-shadow: none;
border-color: rgba(0,0,0,0.1);
}
}
#urlbar[focused="true"],
.searchbar-textbox[focused="true"] {
border-color: -moz-mac-focusring;
- box-shadow: @focusRingShadow@;
-}
-
-@media (-moz-mac-yosemite-theme) {
- #urlbar[focused="true"],
- .searchbar-textbox[focused="true"] {
- box-shadow: @yosemiteFocusRingShadow@;
- }
+ box-shadow: var(--focus-ring-box-shadow);
}
#urlbar-container {
-moz-box-align: center;
}
#urlbar {
border-radius: @toolbarbuttonCornerRadius@;
@@ -1567,18 +1560,17 @@ toolbar .toolbarbutton-1 > .toolbarbutto
}
#identity-box:-moz-locale-dir(rtl) {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
#identity-box:-moz-focusring {
- box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
- 0 0 2px 2px -moz-mac-focusring;
+ box-shadow: var(--focus-ring-box-shadow);
border-inline-end-style: none;
padding-inline-end: 5px;
}
.urlbar-input-box {
margin-inline-start: 0;
padding: 3px 0 2px;
}
@@ -2065,17 +2057,17 @@ html|span.ac-emphasize-text-url {
0 1px rgba(255,255,255,.3);
margin: 0;
padding: 3px 6px;
}
#editBMPanel_rows > row > textbox[focused="true"],
#editBMPanel_rows > row > hbox > textbox[focused="true"] {
border-color: -moz-mac-focusring !important;
- box-shadow: @focusRingShadow@;
+ box-shadow: var(--focus-ring-box-shadow);
}
/**** HUD style buttons ****/
.editBookmarkPanelHeaderButton,
.editBookmarkPanelBottomButton {
@hudButton@
margin: 0;
@@ -2085,17 +2077,17 @@ html|span.ac-emphasize-text-url {
.editBookmarkPanelHeaderButton:hover:active,
.editBookmarkPanelBottomButton:hover:active {
@hudButtonPressed@
}
.editBookmarkPanelHeaderButton:-moz-focusring,
.editBookmarkPanelBottomButton:-moz-focusring {
- @hudButtonFocused@
+ box-shadow: var(--focus-ring-box-shadow);
}
.editBookmarkPanelBottomButton[default="true"] {
background-color: #666;
}
#editBookmarkPanelHeader {
margin-bottom: 6px;
@@ -2139,17 +2131,17 @@ html|span.ac-emphasize-text-url {
}
#editBMPanel_newFolderButton:hover:active {
background: linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4);
}
#editBMPanel_newFolderButton:-moz-focusring {
- @hudButtonFocused@
+ box-shadow: var(--focus-ring-box-shadow);
}
#editBMPanel_newFolderButton .button-text {
display: none;
}
#editBMPanel_folderMenuList {
@hudButton@
@@ -2158,17 +2150,17 @@ html|span.ac-emphasize-text-url {
min-height: 22px;
padding-top: 2px;
padding-bottom: 1px;
padding-inline-start: 8px;
padding-inline-end: 4px;
}
#editBMPanel_folderMenuList:-moz-focusring {
- @hudButtonFocused@
+ box-shadow: var(--focus-ring-box-shadow);
}
#editBMPanel_folderMenuList[open="true"],
#editBMPanel_folderMenuList:hover:active {
@hudButtonPressed@
}
#editBMPanel_folderMenuList > .menulist-dropmarker {
@@ -2198,17 +2190,17 @@ html|span.ac-emphasize-text-url {
box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
0 1px rgba(255,255,255,.3);
margin: 0;
}
#editBMPanel_folderTree:-moz-focusring,
#editBMPanel_tagsSelector:-moz-focusring {
border-color: -moz-mac-focusring;
- box-shadow: @focusRingShadow@;
+ box-shadow: var(--focus-ring-box-shadow);
}
#editBMPanel_folderTree {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
margin: 0 !important;
@@ -2224,17 +2216,17 @@ html|span.ac-emphasize-text-url {
margin: 0;
margin-inline-start: 4px;
min-width: 27px;
min-height: 22px;
}
#editBookmarkPanel .expander-up:-moz-focusring,
#editBookmarkPanel .expander-down:-moz-focusring {
- @hudButtonFocused@
+ box-shadow: var(--focus-ring-box-shadow);
}
#editBookmarkPanel .expander-up:hover:active,
#editBookmarkPanel .expander-down:hover:active {
@hudButtonPressed@
}
#editBookmarkPanel .expander-up {
@@ -2528,17 +2520,17 @@ toolbarbutton.chevron > .toolbarbutton-m
-moz-box-align: center;
border: solid transparent;
border-width: 0 11px;
}
.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned],
.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
- box-shadow: @focusRingShadow@;
+ box-shadow: var(--focus-ring-box-shadow);
}
#TabsToolbar {
-moz-appearance: none;
/* overlap the nav-bar's top border */
margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
}
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -9,21 +9,21 @@
margin-top: 1px;
}
.identity-popup-expander:-moz-focusring {
padding: 2px;
}
.identity-popup-expander:-moz-focusring > .button-box {
- @hudButtonFocused@
+ box-shadow: var(--focus-ring-box-shadow);
}
.identity-popup-permission-remove-button:-moz-focusring {
- box-shadow: @focusRingShadow@;
+ box-shadow: var(--focus-ring-box-shadow);
}
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
border-bottom-right-radius: 3.5px;
}
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) {
border-bottom-right-radius: 0;
@@ -44,11 +44,12 @@
#identity-popup-securityView-body > button:hover:active {
@hudButtonPressed@
}
#tracking-action-block:-moz-focusring,
#tracking-action-unblock:-moz-focusring,
#tracking-action-unblock-private:-moz-focusring,
#identity-popup-securityView-body > button:-moz-focusring {
- @hudButtonFocused@
+ box-shadow: var(--focus-ring-box-shadow);
}
+
--- a/browser/themes/osx/shared.inc
+++ b/browser/themes/osx/shared.inc
@@ -5,9 +5,8 @@
%define fgTabTexture linear-gradient(transparent 2px, hsl(0,0%,99%) 2px, hsl(0,0%,93%))
%define fgTabTextureYosemiteInactive linear-gradient(transparent 2px, hsl(0,0%,99%) 2px, hsl(0,0%,97%))
%define toolbarColorLWT rgba(253,253,253,0.45)
%define fgTabTextureLWT linear-gradient(transparent 2px, rgba(254,254,254,.72) 2px, @toolbarColorLWT@)
%define fgTabBackgroundColor transparent
%define hudButton -moz-appearance: none; color: #434343; border-radius: 4px; border: 1px solid #b5b5b5; background: linear-gradient(#fff, #f2f2f2); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 0 1px rgba(255,255, 255,.25), 0 1px rgba(255,255,255,.3); background-clip: padding-box; background-origin: padding-box; padding: 2px 6px;
%define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255,255,255,.3);
-%define hudButtonFocused box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -16,16 +16,23 @@ menulist > menupopup {
/* ::::: Variables ::::: */
:root {
--arrowpanel-padding: 16px;
--arrowpanel-background: linear-gradient(hsla(0,0%,99%,1), hsla(0,0%,99%,.975) 10%, hsla(0,0%,98%,.975));
--arrowpanel-color: hsl(0,0%,10%);
--arrowpanel-border-color: hsla(210,4%,10%,.05);
--arrowpanel-border-radius: 3.5px;
+ --focus-ring-box-shadow: @focusRingShadow@;
+}
+
+@media (-moz-mac-yosemite-theme) {
+ :root {
+ --focus-ring-box-shadow: @yosemiteFocusRingShadow@;
+ }
}
/* ::::: root elements ::::: */
window,
page,
dialog,
wizard,
@@ -231,17 +238,17 @@ label[disabled="true"] {
cursor: pointer;
}
.text-link:hover {
text-decoration: underline;
}
.text-link:-moz-focusring {
- box-shadow: @focusRingShadow@;
+ box-shadow: var(--focus-ring-box-shadow);
}
.toolbar-focustarget {
-moz-user-focus: ignore !important;
}
notification > button {
margin: 0 3px;