Bug 1348551 - Fix the focusring around the editContactPanel button. r=clokep a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sat, 18 Mar 2017 14:47:51 +0100
changeset 27813 0292cd5151ac03ae9415ff7af281fb90c59b11a1
parent 27812 aa6dfc810660c998859d9714a885d4c6a8dc75ee
child 27814 2a43cb0bf95314a7cb7ce384fa88f1dd0b6b49a1
push id1924
push usermozilla@jorgk.com
push dateTue, 25 Apr 2017 09:02:43 +0000
treeherdercomm-beta@75634f13d8d7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersclokep, jorgk
bugs1348551
Bug 1348551 - Fix the focusring around the editContactPanel button. r=clokep a=jorgk
mail/themes/osx/mail/editContactOverlay.css
--- a/mail/themes/osx/mail/editContactOverlay.css
+++ b/mail/themes/osx/mail/editContactOverlay.css
@@ -34,97 +34,43 @@
 }
 
 #editContactEmail {
   min-width: 20em;
 }
 
 /**** HUD style buttons ****/
 
+#editContactAddressBookList,
 #editContactPanel > hbox > button,
-#editContactPanel > hbox > vbox > hbox > button,
-#editContactPanel > #editContactPanelBottomButtons > button {
+#editContactPanelBottomButtons > button {
   -moz-appearance: none;
   color: #434343;
   border-radius: 4px;
-  border: 1px solid #B5B5B5;
-  background: linear-gradient(#FFFFFF, #F2F2F2);
+  border: 1px solid #b5b5b5;
+  background: linear-gradient(#fff, #f2f2f2);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.8),
               inset 0 0 1px rgba(255, 255, 255, 0.25),
               0 1px rgba(255, 255, 255, 0.3);
   background-clip: padding-box;
   background-origin: padding-box;
   padding: 2px 6px;
   margin: 6px;
   min-width: 79px;
   min-height: 22px;
 }
 
 #editContactPanel > hbox > button:hover:active,
-#editContactPanel > hbox > vbox > hbox > button:hover:active,
-#editContactPanel > #editContactPanelBottomButtons > button:hover:active {
+#editContactPanelBottomButtons > button:hover:active {
   box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
 }
 
+#editContactAddressBookList:focus,
 #editContactPanel > hbox > button:focus,
-#editContactPanel > hbox > vbox > hbox > button:focus,
-#editContactPanel > #editContactPanelBottomButtons > button:focus {
-  outline: 2px solid -moz-mac-focusring;
-  outline-offset: -2px;
-  -moz-outline-radius: 100%;
-}
-
-.editContactTextbox {
-  -moz-appearance: none !important;
-  cursor: text;
-  margin: 2px 6px;
-  background: linear-gradient(#FAFAFA, #FFFFFF);
-  background-clip: padding-box;
-  border-radius: 3px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
-              0 1px rgba(255, 255, 255, 0.3);
-  padding: 3px 6px;
-}
-
-.editContactTextbox[readonly="true"] {
-  -moz-appearance: none;
-  border-color: transparent;
-  background: #EDEDED;
-  box-shadow: none;
-}
-
-.editContactTextbox[focused="true"] {
-  border-color: -moz-mac-focusring !important;
-  box-shadow: 0 0 1px -moz-mac-focusring inset,
-              0 0 4px 1px -moz-mac-focusring,
-              0 0 1.5px 1px -moz-mac-focusring;
-}
-
-.editContactTextbox[focused="true"][readonly="true"] {
-  border-color: transparent !important;
-  box-shadow: none;
-}
-
-#editContactAddressBookList {
-  -moz-appearance: none;
-  color: #434343;
-  border-radius: 4px;
-  border: 1px solid #B5B5B5;
-  background: linear-gradient(#FFFFFF, #F2F2F2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8),
-              inset 0 0 1px rgba(255, 255, 255, 0.25),
-              0 1px rgba(255, 255, 255, 0.3);
-  background-clip: padding-box;
-  background-origin: padding-box;
-  padding: 2px 6px;
-  margin: 0 6px;
-}
-
-#editContactAddressBookList:focus {
+#editContactPanelBottomButtons > button:focus {
   outline: 2px solid -moz-mac-focusring;
   outline-offset: -2px;
   -moz-outline-radius: 5px;
 }
 
 #editContactAddressBookList[disabled="true"] {
   color: GrayText !important;
 }
@@ -139,12 +85,44 @@
   padding-inline-end: 4px;
   width: 7px;
 }
 
 #editContactAddressBookList > .menulist-dropmarker > .dropmarker-icon {
   list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
 }
 
+.editContactTextbox {
+  -moz-appearance: none !important;
+  cursor: text;
+  margin: 2px 6px;
+  background: linear-gradient(#fafafa, #fff);
+  background-clip: padding-box;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
+              0 1px rgba(255, 255, 255, 0.3);
+  padding: 3px 6px;
+}
+
+.editContactTextbox[readonly="true"] {
+  -moz-appearance: none;
+  border-color: transparent;
+  background: #ededed;
+  box-shadow: none;
+}
+
+.editContactTextbox[focused="true"] {
+  border-color: -moz-mac-focusring !important;
+  box-shadow: 0 0 1px -moz-mac-focusring inset,
+              0 0 4px 1px -moz-mac-focusring,
+              0 0 1.5px 1px -moz-mac-focusring;
+}
+
+.editContactTextbox[focused="true"][readonly="true"] {
+  border-color: transparent !important;
+  box-shadow: none;
+}
+
 #contactMoveDisabledText {
   margin-left: 8px;
   width: 20em;
 }