Bug 1207658 - Add a focused state to .aw-menulist and make some code cleanups. r=aleth a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sun, 21 Feb 2016 21:50:12 +0100
changeset 26791 c9bebdf6e63cea2bfddf1c446b9b68334cad2d66
parent 26790 89202952b4be7364e24d77d909cd07c26d2bfc8a
child 26792 b72d062cc0edee6b2847a5653feb57a9ebb41549
push id1850
push userclokep@gmail.com
push dateWed, 08 Mar 2017 19:29:12 +0000
treeherdercomm-esr52@028df196b2d9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleth, jorgk
bugs1207658
Bug 1207658 - Add a focused state to .aw-menulist and make some code cleanups. r=aleth a=jorgk
mail/themes/osx/mail/compose/messengercompose.css
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -234,46 +234,52 @@ toolbar[brighttext] #button-print {
 #MsgHeadersToolbar {
   color: -moz-DialogText;
   text-shadow: none;
   background-image: url("chrome://messenger/skin/noise.png");
   border-bottom: 0px solid;
 }
 
 #identityLabel {
-  margin: 0;
+  margin: 1px 0;
   margin-inline-end: 4px;
-  padding: 2px 1px;
+  padding: 1px;
   background-color: transparent;
   border: 1px solid transparent;
+  border-radius: 2px;
   transition: background-color .25s ease-in;
 }
 
 #identityLabel:hover {
   background-color: rgba(150, 150, 150, .4);
   border-color: rgba(149, 165, 166, 0.3);
 }
 
 #msgIdentity {
-   margin: 0px;
-   padding-inline-start: 3px;
-   background: transparent;
-   line-height: 1;
-   border: 1px solid transparent;
-   border-bottom: 1px solid #C6C6C6;
-   border-radius: 0;
-   -moz-appearance: none;
-   background: url("chrome://global/skin/arrow/arrow-dn.gif") no-repeat right;
-   transition: border .2s, background-color .2s;
+  margin: 0;
+  margin-inline-end: 1px;
+  padding-inline-start: 3px;
+  background: transparent;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-bottom-color: #C6C6C6;
+  border-radius: 2px;
+  -moz-appearance: none;
+  background: url("chrome://global/skin/arrow/arrow-dn.gif") no-repeat right;
+  transition: border .2s, background-color .2s;
+}
+
+#msgIdentity:-moz-locale-dir(rtl) {
+  background-position: left;
 }
 
 #msgIdentity:hover,
 #msgIdentity[focused="true"] {
   background-color: white;
-  border: 1px solid #C6C6C6;
+  border-color: #C6C6C6;
 }
 
 #msgIdentity > .menulist-editable-box {
   padding-inline-start: 3px;
 }
 
 #addresses-box {
   margin: 4px 6px;
@@ -315,49 +321,46 @@ toolbar[brighttext] #button-print {
 /* XXX I should really have a selector rule here to select just .listcell-icon objects underneath the attachmentList listbox */
 
 .listcell-icon {
   -moz-margin-start: 2px;
   margin-top: 2px;
 }
 
 #subjectLabel {
-  margin-top: 0px;
+  margin-top: 0;
   margin-bottom: 4px;
+  margin-inline-end: 6px;
 }
 
 #msgSubject {
-  margin-top: 0px;
-  -moz-margin-start: 0;
-  -moz-margin-end: 1px;
+  margin-top: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 1px;
   background-color: inherit;
   -moz-appearance: none !important;
-  border-top: 1px solid transparent;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid #C6C6C6;
+  border: 1px solid transparent;
+  border-bottom-color: #C6C6C6;
   border-bottom-left-radius: 0px;
   border-top-right-radius: 0px;
   -moz-border-top-colors: none;
   -moz-border-left-colors: none;
   -moz-border-right-colors: none;
   -moz-border-bottom-colors: none;
-  padding: 2px;
-  -moz-padding-start: 5px !important;
+  border-radius: 2px;
+  padding: 1px 2px;
+  padding-inline-start: 5px !important;
   transition: border .2s, background-color .2s;
 }
 
 #msgSubject:hover,
 #msgSubject[focused="true"] {
   background-color: white;
   background-image: none;
-  border-top: 1px solid #C6C6C6;
-  border-left: 1px solid #C6C6C6;
-  border-right: 1px solid #C6C6C6;
-  border-bottom: 1px solid #C6C6C6;
+  border-color: #C6C6C6;
 }
 
 /* ::::: autocomplete icons ::::: */
 
 treechildren::-moz-tree-cell-text(default-match) {
   margin-top: 2px;
   margin-bottom: 2px;
   -moz-margin-start: 15px;
@@ -433,61 +436,68 @@ treechildren::-moz-tree-image(subscribed
 .addressingWidgetItem,
 .dummy-row {
   background-color: inherit !important;
   color: inherit !important;
 }
 
 .textbox-addressingWidget,
 .dummy-row-cell:not(:first-child) {
-  border-top: 1px solid transparent !important;
-  border-left: 1px solid transparent !important;
-  border-right: 1px solid transparent !important;
-  border-bottom: 1px solid #C6C6C6 !important;
-  border-top-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-  padding: 2px !important;
-
+  border: 1px solid transparent !important;
+  border-bottom-color: #C6C6C6 !important;
+  border-top-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  margin-top: 1px !important;
+  margin-bottom: 1px !important;
+  padding: 1px 3px !important;
   transition: border .2s, background-color .2s;
 }
 
 .textbox-addressingWidget[focused="true"],
 .textbox-addressingWidget:hover {
   background-color: white;
   background-image: none;
-  border-top: 1px solid #C6C6C6 !important;
-  border-left: 1px solid #C6C6C6 !important;
-  border-right: 1px solid #C6C6C6 !important;
-  border-bottom: 1px solid #C6C6C6 !important;
+  border-color: #C6C6C6 !important;
 }
 
 .aw-menulist {
   -moz-binding: url("chrome://messenger/content/messengercompose/menulistCompactBindings.xml#menulist-compact");
   -moz-appearance: none;
   -moz-box-align: center;
   -moz-box-pack: center;
-  margin: 0;
-  -moz-margin-end: 4px;
+  min-height: 18px;
+  margin: 1px;
+  margin-inline-end: 4px;
   background-color: rgba(200, 200, 200, .4) !important;
-  border: rgba(149, 165, 166, 0.3) 1px solid;
+  border: rgba(149, 165, 166, .3) 1px solid;
+  border-radius: 2px;
   background: url("chrome://global/skin/arrow/arrow-dn.gif") no-repeat left;
   transition: background-color .25s ease-in;
 }
 
+.aw-menulist:-moz-locale-dir(rtl) {
+  background-position: right;
+}
+
 .aw-menulist:-moz-window-inactive {
   opacity: .7;
 }
 
 .aw-menulist:hover {
   background-color: rgba(150, 150, 150, .4) !important;
 }
 
+.aw-menulist:focus {
+  border-color: -moz-mac-focusring;
+  box-shadow: 0 0 1.5px 1px -moz-mac-focusring;
+}
+
 .aw-menulist  > .menulist-label-box > .menulist-label {
   font: icon;
-  margin: 0 1px !important;
+  margin: 1px 1px 0 !important;
   font-size: 10px;
   text-align: end;
 }
 
 /* ::::: compose toolbar sizer ::::: */
 
 #compose-toolbar-sizer {
   position: relative;