Bug 1346280 - Use --focus-ring-box-shadow in place of @focusRingShadow@/@yosemiteRingFocusShadow@ in osx theme. r?Gijs draft
authorSam Foster <sfoster@mozilla.com>
Mon, 13 Mar 2017 12:46:33 -0700
changeset 497837 86374f6f523c46464770beafa4c88127759ff29c
parent 497654 7b19a63862252ffb89bfe1ba79724e76e20fb6f4
child 549003 97ea07dcb83864e1a7be10a93a39218e64aaa616
push id49025
push userbmo:sfoster@mozilla.com
push dateMon, 13 Mar 2017 22:23:29 +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 MozReview-Commit-ID: Dw1meSEbmcV
browser/themes/osx/controlcenter/panel.css
toolkit/themes/osx/global/findBar.css
toolkit/themes/osx/global/global.css
toolkit/themes/osx/global/tree.css
--- 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/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) {