Bug 1159316 - Update compose window theme to work with editable menulists. r=mkmelin AURORA_BASE_20151214
authorRichard Marti <richard.marti@gmail.com>
Mon, 18 May 2015 21:47:53 +0200
changeset 23836 554a35da7bc29d012a24415daa3b31a8fc39960f
parent 23835 8a5605536c6d63b742fc185febe196763a79d6ac
child 23837 7054364b480341023273e3fedc9b040802469987
push id1564
push userclokep@gmail.com
push dateMon, 25 Jan 2016 18:47:24 +0000
treeherdercomm-beta@dec4b138be1d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1159316
Bug 1159316 - Update compose window theme to work with editable menulists. r=mkmelin
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/windows/mail/compose/messengercompose.css
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -354,17 +354,74 @@ treechildren::-moz-tree-image(subscribed
   -moz-appearance: none !important;
   color: WindowText;
   text-shadow: none;
   background-image: url("chrome://messenger/skin/messengercompose/linux-noise.png");
   padding-top: 3px;
 }
 
 #identityLabel {
-  padding-top: 3px;
+  -moz-appearance: none;
+  margin-inline-end: 3px;
+  margin-top: 2px;
+  margin-bottom: 0;
+  padding: 3px 5px;
+  color: ButtonText;
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: background-color .25s ease-in;
+}
+
+#identityLabel:hover {
+  border-color: rgba(125, 125, 125, .4);
+  background-color: rgba(125, 125, 125, .4);
+}
+
+#msgIdentity {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  margin-right: 5px;
+  margin-bottom: 0;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-inline-start: 2px;
+  background: transparent;
+  height: 22px;
+  line-height: 1;
+  border: 2px solid transparent;
+  -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
+  transition: border .2s, background-color .2s;
+}
+
+#msgIdentity:hover,
+#msgIdentity[focused="true"] {
+  background-color: -moz-field;
+  -moz-border-top-colors: ThreeDShadow ThreeDHighlight;
+  -moz-border-right-colors: ThreeDShadow ThreeDHighlight;
+  -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
+  -moz-border-left-colors: ThreeDShadow ThreeDHighlight;
+}
+
+#msgIdentity > .menulist-editable-box {
+  -moz-appearance: none;
+  padding-inline-start: 3px;
+}
+
+#msgIdentity > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  padding: 6px;
+  border: none;
+  background: transparent;
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+}
+
+#msgIdentity > .menulist-dropmarker > .dropmarker-icon {
+  width: 5px;
+  height: 3px;
 }
 
 /* ::::: format toolbar ::::: */
 
 #FormatToolbar {
   -moz-appearance: none;
   color: WindowText;
   margin-left: 3px;
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -225,16 +225,53 @@ 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-inline-end: 4px;
+  padding: 2px 1px;
+  background-color: transparent;
+  border: 1px solid transparent;
+  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;
+}
+
+#msgIdentity:hover,
+#msgIdentity[focused="true"] {
+  background-color: white;
+  border: 1px solid #C6C6C6;
+}
+
+#msgIdentity > .menulist-editable-box {
+  padding-inline-start: 3px;
+}
+
 #addresses-box {
   margin: 4px 6px;
 }
 
 #attachments-box {
   padding-top: 5px;
 }
 
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -104,16 +104,24 @@
 /* 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;
 }
 
+#identityLabel {
+  transition: border .2s, background-color .2s;
+}
+
+#identityLabel > .toolbarbutton-icon {
+  display: none;
+}
+
 #msgSubject {
   -moz-appearance: none;
   -moz-margin-end: 5px;
   background-color: inherit;
   border-color: transparent;
   -moz-border-top-colors: none;
   -moz-border-left-colors: none;
   -moz-border-right-colors: none;
@@ -856,47 +864,64 @@
   #MsgHeadersToolbar {
     -moz-appearance: none;
     border-bottom-width: 0;
     background-color: transparent;
     background-image: url("chrome://messenger/skin/messengercompose/noise.png");
   }
 
   #identityLabel {
-    margin-top: 2px;
-    margin-bottom: 1px;
+    -moz-appearance: none;
+    height: 22px;
+    margin: 1px 3px;
+    padding-top:4px;
+    padding-bottom: 0;
+    padding-inline-start: 4px;
+    padding-inline-end: 2px;
+    border: 1px solid transparent;
+    background-color: transparent;
+    color: ButtonText;
+  }
+
+  #identityLabel:hover {
+    border-color: ThreeDShadow;
+    background-color: -moz-ButtonHoverFace;
   }
 
   #msgIdentity {
-    -moz-padding-end: 18px;
-    -moz-padding-start: 2px !important;
+    padding-inline-start: 2px !important;
     margin-bottom: 1px;
     -moz-border-top-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-bottom-colors: none;
-    background: url("chrome://global/skin/arrow/arrow-dn.gif") no-repeat;
-    background-position: calc(100% - 7px);
   }
 
   @media (-moz-windows-default-theme) {
     #msgIdentity {
       border-width: 1px;
       border-bottom-color: ThreeDShadow;
     }
 
     #msgIdentity:hover,
     #msgIdentity[focused="true"] {
       background-color: -moz-field;
       border-color: ThreeDShadow;
     }
   }
 
+  #msgIdentity > .menulist-editable-box {
+    padding-inline-start: 3px;
+  }
+
   #msgIdentity > .menulist-dropmarker {
-    display: none;
+    -moz-appearance: none;
+    margin-top: 0;
+    border: none;
+    background: transparent;
   }
 
   #appcontent {
     border-left: 1px solid ThreeDShadow;
     border-right: 1px solid ThreeDHighlight;
   }
 
   #attachmentbucket-sizer {
@@ -1089,17 +1114,21 @@
   }
 
   #headers-box {
     border-bottom: 1px solid ThreeDShadow;
     padding-bottom: 2px;
   }
 
   #identityLabel {
-    padding-top: 1px;
+    -moz-appearance: none;
+    border: 1px solid transparent;
+    margin-bottom: 1px;
+    margin-inline-end: 0;
+    padding: 3px 4px 2px;
   }
 
   #compose-toolbox:not(:-moz-lwtheme) {
     -moz-appearance: none;
     background-color: -moz-Dialog;
     border-top: none;
     border-bottom: 1px solid ThreeDShadow;
   }
@@ -1119,27 +1148,45 @@
   }
 
   #msgIdentity {
     -moz-margin-end: 5px;
     -moz-padding-start: 3px !important;
     background-image: none;
   }
 
+  #msgIdentity > .menulist-dropmarker {
+    -moz-appearance: none;
+    margin-top: 0;
+    border: none;
+    background: transparent;
+  }
+
+  #msgIdentity > .menulist-dropmarker > .dropmarker-icon {
+    list-style-image: url("chrome://messenger/skin/icons/dropmarker.svg#win");
+    width: 9px;
+    height: 7px;
+  }
+
   @media (-moz-windows-default-theme) {
     #msgIdentity {
       border-radius: 0;
       border-bottom-color: #a9b7c9;
     }
 
     #msgIdentity:hover,
     #msgIdentity[focused="true"] {
       background-color: -moz-field;
       border-color: #a9b7c9;
     }
+
+    #msgIdentity[editable="true"] > .menulist-dropmarker {
+      margin-inline-start: 3px;
+      margin-inline-end: -3px;
+    }
   }
 
   @media not all and (-moz-windows-default-theme) {
     #msgIdentity {
       border-width: 2px;
       -moz-border-top-colors: none;
       -moz-border-left-colors: none;
       -moz-border-right-colors: none;
@@ -1382,21 +1429,23 @@
       border: 1px solid;
       background: var(--toolbarbutton-hover-background);
       border-color: var(--toolbarbutton-hover-bordercolor);
       box-shadow: var(--toolbarbutton-hover-boxshadow);
       transition-property: background-color, border-color, box-shadow;
       transition-duration: 150ms;
     }
 
+    #identityLabel:hover,
     menulist:not([disabled="true"]):not([open="true"]):hover {
       background: var(--toolbarbutton-active-background);
       border-color: var(--toolbarbutton-active-bordercolor);
     }
 
+    #identityLabel:hover:active,
     menulist[open="true"] {
       background: var(--toolbarbutton-active-background);
       border-color: var(--toolbarbutton-active-bordercolor);
       box-shadow: var(--toolbarbutton-active-boxshadow);
     }
   }
 
   .aw-menulist {
@@ -1509,20 +1558,22 @@
   #headers-box {
     border-bottom-color: #a9b7c9;
   }
 
   findbar {
     background-color: #eef3fa;
   }
 
+  #identityLabel,
   menulist {
     border-radius: 2px;
   }
 
+  #identityLabel:hover:active,
   menulist[open="true"] {
     text-shadow: none;
     transition: none;
   }
 
   .aw-menulist {
     margin: 1px;
     -moz-margin-end: 4px;
@@ -1537,16 +1588,23 @@
   #status-bar {
     -moz-appearance: none;
     border: none;
     border-top: 1px solid threedshadow;
     background-color: hsl(210, 75%, 92%);
   }
 }
 
+@media (-moz-os-version: windows-win8),
+       (-moz-os-version: windows-win10) {
+  #msgIdentity > .menulist-dropmarker > .dropmarker-icon {
+    list-style-image: url("chrome://messenger/skin/icons/dropmarker.svg#win8");
+  }
+}
+
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win8),
        (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
   #button-send {
     list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.svg#send-flat");
   }
 
   #button-contacts {
     list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.svg#contacts-flat");