Bug 1346280 - Use --focus-ring-box-shadow in place of @focusRingShadow@/@yosemiteRingFocusShadow@ in osx theme. r?Gijs draft
authorSam Foster <sfoster@mozilla.com>
Wed, 15 Mar 2017 12:44:40 -0700
changeset 499473 1c9ae2c8d472e09c438d2c713817618f2d1021c9
parent 499337 8c89d1991786625a64d868798281610872a2bc26
child 549363 71be17d0948d2c6a19217be42896e26d56c2887c
push id49421
push userbmo:sfoster@mozilla.com
push dateWed, 15 Mar 2017 21:01:39 +0000
reviewersGijs
bugs1346280
milestone55.0a1
Bug 1346280 - Use --focus-ring-box-shadow in place of @focusRingShadow@/@yosemiteRingFocusShadow@ in osx theme. r?Gijs * replace use of @focusRingShadow@ with the CSS variable in toolkit osx theme and browser theme files * remove redundant @media blocks as --focus-ring-box-shadow is already mac-theme specific * fix focus style for tabprompt buttons (alert buttons) * fix focus style for notification anchor icons MozReview-Commit-ID: EFAMwSbwdGX
browser/themes/osx/browser.css
browser/themes/osx/controlcenter/panel.css
toolkit/themes/osx/global/findBar.css
toolkit/themes/osx/global/global.css
toolkit/themes/osx/global/tabprompts.css
toolkit/themes/osx/global/tree.css
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2904,18 +2904,17 @@ toolbarbutton.chevron > .toolbarbutton-m
   height: 2px;
   margin-inline-end: -4em;
   background-color: Highlight;
 }
 
 %include ../shared/notification-icons.inc.css
 
 .notification-anchor-icon:-moz-focusring {
-  box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
-              0 0 3px 2px -moz-mac-focusring;
+  box-shadow: var(--focus-ring-box-shadow);
 }
 
 /* Translation */
 
 %include ../shared/translation/infobar.inc.css
 
 notification[value="translation"] {
   color: #484848;
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -46,10 +46,8 @@
 }
 
 #tracking-action-block:-moz-focusring,
 #tracking-action-unblock:-moz-focusring,
 #tracking-action-unblock-private:-moz-focusring,
 #identity-popup-securityView-body > button:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
 }
-
-
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -100,17 +100,17 @@ label.findbar-find-fast:-moz-lwtheme,
 .findbar-highlight {
   margin-inline-start: 8px;
 }
 
 .findbar-container > toolbarbutton:-moz-focusring,
 .findbar-find-next:-moz-focusring,
 .findbar-find-previous:-moz-focusring {
   position: relative;
-  box-shadow: @focusRingShadow@, @roundButtonShadow@;
+  box-shadow: var(--focus-ring-box-shadow), @roundButtonShadow@;
 }
 
 .findbar-container > toolbarbutton[disabled] {
   color: GrayText !important;
 }
 
 .findbar-find-next:not([disabled]):hover:active,
 .findbar-find-previous:not([disabled]):hover:active,
@@ -124,30 +124,17 @@ label.findbar-find-fast:-moz-lwtheme,
   background: @roundButtonPressedBackground@;
   box-shadow: @roundButtonPressedShadow@;
 }
 
 .findbar-find-next:hover:active:-moz-focusring,
 .findbar-find-previous:hover:active:-moz-focusring {
   text-shadow: @loweredShadow@;
   background: @roundButtonPressedBackground@;
-  box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
-}
-
-@media (-moz-mac-yosemite-theme) {
-  .findbar-container > toolbarbutton:-moz-focusring,
-  .findbar-find-next:-moz-focusring,
-  .findbar-find-previous:-moz-focusring {
-    box-shadow: @yosemiteFocusRingShadow@, @roundButtonShadow@;
-  }
-
-  .findbar-find-next:hover:active:-moz-focusring,
-  .findbar-find-previous:hover:active:-moz-focusring {
-    box-shadow: @yosemiteFocusRingShadow@, @roundButtonPressedShadow@;
-  }
+  box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
 }
 
 /* Search field */
 
 .findbar-textbox {
   position: relative;
   -moz-appearance: none;
   border: @roundButtonBorder@;
@@ -175,23 +162,17 @@ label.findbar-find-fast:-moz-lwtheme,
   }
 }
 
 .findbar-textbox:not([focused="true"]):-moz-lwtheme {
   opacity: 0.9;
 }
 
 .findbar-textbox[focused="true"] {
-  box-shadow: @focusRingShadow@;
-}
-
-@media (-moz-mac-yosemite-theme) {
-  .findbar-textbox[focused="true"] {
-    box-shadow: @yosemiteFocusRingShadow@;
-  }
+  box-shadow: var(--focus-ring-box-shadow);
 }
 
 .findbar-textbox[flash="true"] {
   background-color: #F7E379;
 }
 
 .findbar-textbox[status="notfound"] {
   background-color: #FD919B;
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -31,17 +31,17 @@ menulist > menupopup {
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,
 wizard,
-prefwindow { 
+prefwindow {
   -moz-appearance: dialog;
   background-color: #FFFFFF;
   color: -moz-DialogText;
   font: message-box;
 }
 
 prefwindow[type="child"] {
   padding-top: 18px;
@@ -113,17 +113,17 @@ statusbar {
 statusbarpanel {
   -moz-box-align: center;
   -moz-box-pack: center;
   padding: 0 4px;
 }
 
 .statusbarpanel-iconic {
   padding: 0px;
-}    
+}
 
 /* ::::: miscellaneous formatting ::::: */
 
 :root:-moz-lwtheme {
   -moz-appearance: none;
 }
 
 :root:-moz-lwtheme-darktext {
@@ -142,50 +142,50 @@ statusbar:-moz-lwtheme {
 }
 
 .inset {
   border: 1px solid ThreeDShadow;
   border-right-color: ThreeDHighlight;
   border-bottom-color: ThreeDHighlight;
   margin: 0 5px 5px;
 }
-  
+
 .outset {
   border: 1px solid ThreeDShadow;
   border-left-color: ThreeDHighlight;
   border-top-color: ThreeDHighlight;
 }
 
 separator:not([orient="vertical"]) {
   height: 1.5em;
 }
 separator[orient="vertical"] {
   width: 1.5em;
 }
 
 separator.thin:not([orient="vertical"]) {
   height: 0.5em;
-}  
+}
 separator.thin[orient="vertical"] {
   width: 0.5em;
 }
 
 separator.groove:not([orient="vertical"]) {
   border-top: 1px solid #A3A3A3;
   height: 0;
   margin-top: 0.4em;
   margin-bottom: 0.4em;
 }
 separator.groove[orient="vertical"] {
   border-left: 1px solid #A3A3A3;
   width: 0;
   margin-left: 0.4em;
   margin-right: 0.4em;
 }
-    
+
 .plain {
   -moz-appearance: none;
   margin: 0 !important;
   border: none;
   padding: 0;
 }
 
 description,
@@ -236,17 +236,17 @@ label[disabled="true"] {
 .text-link {
   color: -moz-nativehyperlinktext;
   cursor: pointer;
 }
 
 .text-link:hover {
   text-decoration: underline;
 }
-  
+
 .text-link:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 .toolbar-focustarget {
   -moz-user-focus: ignore !important;
 }
 
@@ -266,21 +266,21 @@ notification > button {
 
 notification > button:active:hover {
   color: @roundButtonColor@;
   background: @roundButtonPressedBackground@;
   box-shadow: @roundButtonPressedShadow@;
 }
 
 notification > button:-moz-focusring {
-  box-shadow: @focusRingShadow@, @roundButtonShadow@;
+  box-shadow: var(--focus-ring-box-shadow), @roundButtonShadow@;
 }
 
 notification > button:active:hover:-moz-focusring {
-  box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
+  box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
 }
 
 notification > button > .button-box > .button-text {
   margin: 0 !important;
 }
 
 popupnotificationcontent {
   margin-top: .5em;
--- a/toolkit/themes/osx/global/tabprompts.css
+++ b/toolkit/themes/osx/global/tabprompts.css
@@ -39,29 +39,26 @@ button {
   background-image: linear-gradient(hsla(0,0%,100%,.7), transparent);
   background-clip: padding-box;
   border: 1px solid;
   border-color: hsl(0,0%,65%) hsl(0,0%,60%) hsl(0,0%,50%);
   box-shadow: 0 1px 0 hsla(0,0%,100%,.9) inset,
               0 1px 2px hsla(0,0%,0%,.1);
 }
 
-
 button[default=true] {
   background-color: hsl(0,0%,79%);
 }
 
 button:hover {
   background-color: hsl(0,0%,96%);
 }
 
 button:hover:active {
   background-image: linear-gradient(hsla(0,0%,100%,.2), transparent);
   background-color: hsl(0,0%,70%);
   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
               0 1px 3px hsla(0,0%,0%,.2);
 }
 
 button:focus {
-  box-shadow: 0 0 1px -moz-mac-focusring inset,
-              0 0 4px 1px -moz-mac-focusring,
-              0 0 1.5px 1px -moz-mac-focusring;
+  box-shadow: var(--focus-ring-box-shadow)
 }
--- a/toolkit/themes/osx/global/tree.css
+++ b/toolkit/themes/osx/global/tree.css
@@ -10,17 +10,17 @@ tree {
   color: -moz-DialogText;
   background-color: #FFFFFF;
   -moz-appearance: listbox;
 }
 
 /* ::::: tree focusring ::::: */
 
 .focusring > .tree-stack > .tree-rows > .tree-bodybox {
-  border: 1px solid transparent;  
+  border: 1px solid transparent;
 }
 
 .focusring:focus > .tree-stack > .tree-rows > .tree-bodybox {
   border: 1px solid -moz-mac-focusring;
 }
 
 
 /* ::::: tree rows ::::: */
@@ -158,17 +158,17 @@ treechildren::-moz-tree-progressmeter {
 treechildren::-moz-tree-cell-text(progressmeter) {
   margin: 2px 4px;
   -moz-appearance: progressbar;
 }
 
 /* ::::: tree columns ::::: */
 
 treecol,
-treecolpicker { 
+treecolpicker {
   -moz-appearance: treeheadercell;
   -moz-box-align: center;
   -moz-box-pack: center;
   border: 2px solid;
   -moz-border-top-colors: ThreeDHighlight ThreeDLightShadow;
   -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
   -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
   -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow;
@@ -273,17 +273,17 @@ treechildren.gridlines::-moz-tree-row {
   border: none;
 }
 
 /* ::::: editable tree ::::: */
 
 .tree-input {
   -moz-appearance: none;
   border-width: 0;
-  box-shadow: @focusRingShadow@;
+  box-shadow: var(--focus-ring-box-shadow);
   margin: 0;
   margin-inline-start: -2px;
   padding: 2px 1px 1px;
 }
 
 treechildren::-moz-tree-cell(active, selected, focus, editing),
 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing),
 tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) {