Bug 1287763 - Use flat yosemite-style border-box for focused styling in OSX, in more places draft
authorSam Foster <sfoster@mozilla.com>
Wed, 08 Mar 2017 16:46:26 -0800
changeset 495573 3348b42783f210bd0002db3d34c4a4bebd90ebf5
parent 495323 800ba54a4bd52628833c4db005ddd182586666c4
child 548414 debdbdaa86418e0a36a2cd01578244a41f839fd6
push id48372
push userbmo:sfoster@mozilla.com
push dateThu, 09 Mar 2017 00:56:54 +0000
bugs1287763
milestone55.0a1
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
browser/themes/osx/browser.css
browser/themes/osx/controlcenter/panel.css
browser/themes/osx/shared.inc
toolkit/themes/osx/global/global.css
--- 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;