Bug 867161 - Update the Composer style on OSX r=mconley, f=richard.marti, ui-r=richard.marti, a=jcranmer
authorJosiah Bruner <josiah@programmer.net>
Sun, 16 Jun 2013 16:32:52 -0400
changeset 19328 ea395ef923163c5486e56611a9263fc44e6123cf
parent 19327 bbdeef3a2990cef77f1ddc1257953b50fcd1236a
child 19329 39b45b030c767ff945cd33ee837c16e111b05943
push id1103
push usermbanner@mozilla.com
push dateTue, 18 Mar 2014 07:44:06 +0000
treeherdercomm-beta@50c6279a0af0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley, richard.marti, jcranmer
bugs867161
Bug 867161 - Update the Composer style on OSX r=mconley, f=richard.marti, ui-r=richard.marti, a=jcranmer
mail/components/compose/content/messengercompose.xul
mail/themes/osx/mail/compose/messengercompose.css
--- a/mail/components/compose/content/messengercompose.xul
+++ b/mail/components/compose/content/messengercompose.xul
@@ -840,17 +840,17 @@
            defaultset="button-send,separator,button-address,spellingButton,button-attach,button-security,button-save"
 #endif
            customizable="true" context="toolbar-context-menu">
   </toolbar>
 
   <toolbarset id="customToolbars" context="toolbar-context-menu"/>
   </toolbox>
 
-  <hbox flex="1">
+  <hbox flex="1" id="composeContentBox">
     <vbox id="sidebar-box" persist="sidebarVisible width" hidden="true">
       <sidebarheader id="sidebarHeader" align="center">
         <label id="sidebar-title" value="&addressesSidebarTitle.label;"/>
         <spacer flex="1"/>
         <toolbarbutton class="ab-closebutton" oncommand="toggleAddressPicker();"/>
       </sidebarheader>
       <browser id="sidebar" flex="1" src="" disablehistory="true"
                style="min-width: 150px; width: 200px; max-width: 400px;"/>
@@ -910,17 +910,16 @@
                          minresultsforpopup="2" ignoreblurwhilesearching="true"
                          ontextentered="awRecipientTextCommand(eventParam, this)"
                          onerrorcommand="awRecipientErrorCommand(eventParam, this)"
                          onchange="onRecipientsChanged();"
                          oninput="onRecipientsChanged();"
                          onkeypress="awRecipientKeyPress(event, this)"
                          onkeydown="awRecipientKeyDown(event, this)"
                          disableonsend="true">
-                  <image class="person-icon" onclick="this.parentNode.select();"/>
                 </textbox>
               </listcell>
             </listitem>
           </listbox>
           <hbox id="subject-box">
             <hbox align="center" pack="end" style="&headersSpace.style;">
               <label id="subjectLabel" value="&subject.label;" accesskey="&subject.accesskey;" control="msgSubject"/>
             </hbox>
@@ -942,22 +941,17 @@
                           context="msgComposeAttachmentListContext"
                           itemcontext="msgComposeAttachmentItemContext"
                           onclick="AttachmentBucketClicked(event);"
                           onselect="updateAttachmentItems();"
                           ondraggesture="nsDragAndDrop.startDrag(event, attachmentBucketDNDObserver);"/>
         </vbox>
       </hbox>
     </toolbar>
-  </toolbox>
 
-  <splitter id="compose-toolbar-sizer" onmousedown="awSizerListen()"/>
-
-  <!-- The mail message body frame -->
-  <vbox id="appcontent" flex="1">
     <!-- These toolbar items get filled out from the editorOverlay -->
     <toolbox id="FormatToolbox" mode="icons">
       <toolbar class="chromeclass-toolbar" id="FormatToolbar" persist="collapsed"
                customizable="true" nowindowdrag="true">
         <toolbaritem id="paragraph-select-container"/>
         <toolbaritem id="font-face-select-container"/>
         <toolbaritem id="color-buttons-container"
                      disableoncustomize="true"/>
@@ -1014,17 +1008,22 @@
                       oncommand="doStatefulCommand('cmd_smiley', ':\'(' )"/>
             <menuitem id="smileySealed" class="menuitem-iconic" label="&smiley16Cmd.label;"
                       oncommand="doStatefulCommand('cmd_smiley', ':-X' )"/>
           </menupopup>
         </toolbarbutton>
         <spacer flex="1"/>
       </toolbar>
     </toolbox>
+  </toolbox>
 
+  <splitter id="compose-toolbar-sizer" onmousedown="awSizerListen()"/>
+
+  <!-- The mail message body frame -->
+  <vbox id="appcontent" flex="1">
     <editor type="content-primary" id="content-frame" src="about:blank" name="browser.message.body" flex="1"
             ondblclick="EditorDblClick(event);"
             context="msgComposeContext"/>
   </vbox>
 
   </vbox>
   </hbox>
   <panel id="customizeToolbarSheetPopup" noautohide="true">
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -429,45 +429,82 @@ toolbar[mode="icons"] .toolbarbutton-1 >
 
   #button-print:not([disabled="true"]):active {
     -moz-image-region: rect(36px 396px 72px 360px);
   }
 }
 
 /* ::::: special toolbar colors ::::: */
 
-#headers-box {
-  background-color: -moz-dialog;
+#composeContentBox {
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6) inset;
+  background-color: rgb(242, 242, 242);
+
+  /*
+   * In order to remove the shadow border on left/right edges elegantly,
+   * use left/right margins of -3px. Just note that certain elements might need
+   * a margin-left or margin-right change.
+   */
+
+  margin-right: -3px;
+  margin-left: -3px;
+}
+
+#composeContentBox:-moz-window-inactive {
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
+}
+
+#content-frame {
+  -moz-margin-end: 3px;
+}
+
+#attachments-box {
+  -moz-padding-end: 3px;
 }
 
 #MsgHeadersToolbar {
   color: -moz-DialogText;
   text-shadow: none;
-  background-image: none;
+  background-image: url("chrome://messenger/skin/noise.png");
   border-bottom: 0px solid;
 }
 
+#msgIdentity {
+   -moz-margin-start: 0px;
+   -moz-padding-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 {
+  background-color: white;
+  border: 1px solid #C6C6C6;
+}
+
 #addresses-box {
   margin: 4px 6px;
 }
 
 #attachmentbucket-sizer {
   border-top: none;
   border-bottom: none;
   height: 7px;
+  -moz-margin-end: 3px;
 }
 
 #attachmentBucketSize {
   color: #888a85;
 }
 
-#appcontent {
-  border-top: 1px solid #cccccc;
-}
-
 /* ::::: attachment reminder ::::: */
 
 #attachmentNotificationBox > notification .messageImage {
   width: 16px;
   height: 16px;
   background-image: url(chrome://messenger/skin/messengercompose/attachmentnotification.png);
 }
 
@@ -485,19 +522,48 @@ toolbar[mode="icons"] .toolbarbutton-1 >
 
 /* 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;
 }
 
+#subject-box {
+  -moz-margin-start: -2px;
+}
+
 #msgSubject {
-  -moz-margin-start: 1px;
+  -moz-margin-start: 2px;
   -moz-margin-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-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;
+  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;
 }
 
 /* ::::: autocomplete icons ::::: */
 
 treechildren::-moz-tree-cell-text(default-match) {
   margin-top: 2px;
   margin-bottom: 2px;
   -moz-margin-start: 15px;
@@ -562,52 +628,44 @@ treechildren::-moz-tree-image(subscribed
   width: 0;
   margin: 5px 0px;
   border: none;
   background-color: transparent;
 }
 
 #addressingWidget listboxbody {
   margin: 1px 0;
-}
-
-#textcol-addressingWidget {
-  border: 1px solid threedshadow;
-  background-color: -moz-field;
+  background-color: transparent;
 }
 
 .addressingWidgetItem,
 .dummy-row {
-  border: none !important;
   background-color: inherit !important;
   color: inherit !important;
 }
 
-.addressingWidgetCell {
-  border-bottom: 1px solid #DCDCDC;
-  padding: 0px;
-}
+.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;
+  padding: 2px !important;
 
-.addressingWidgetCell:first-child,
-.dummy-row-cell:first-child {
-  border-bottom-color: transparent;
+  transition: border .2s, background-color .2s;
 }
 
-.person-icon {
-  margin: 0 3px;
-  list-style-image: url("chrome://messenger/skin/addressbook/icons/abcard.png");
-}
-
-@media (min-resolution: 2dppx) {
-  .person-icon {
-    width: 16px;
-    height: 16px;
-    list-style-image: url("chrome://messenger/skin/addressbook/icons/addressbook@2x.png");
-    -moz-image-region: rect(0px 160px 32px 128px);
-  }
+.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;
 }
 
 .aw-menulist:-moz-locale-dir(ltr),
 .aw-menulist > .menulist-label-box:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 .aw-menulist:-moz-locale-dir(rtl),
@@ -625,26 +683,30 @@ treechildren::-moz-tree-image(subscribed
   margin: 0 1px !important;
   font-size: 10px;
   text-align: start;
 }
 
 /* ::::: compose toolbar sizer ::::: */
 
 #compose-toolbar-sizer {
-  background-color: -moz-Dialog;
+  background-image: url("chrome://messenger/skin/messengercompose/osx-noise.png");
+  background-color: rgb(242, 242, 242);
+  border-bottom: 1px solid #DCDCDC;
 }
 
 /* ::::: format toolbar ::::: */
 
 #FormatToolbar {
   border-bottom: none;
-  background-image: none;
-  background-color: -moz-Dialog !important;
+  background-image: url("chrome://messenger/skin/messengercompose/osx-noise.png");
+  background-color: rgb(242, 242, 242) !important;
   padding-top: 2px;
+  margin-left: 6px;
+  margin-right: 6px;
 }
 
 #FormatToolbar toolbarseparator {
   background-image: none;
 }
 
 toolbarbutton.formatting-button {
   -moz-appearance: toolbarbutton;
@@ -1381,19 +1443,19 @@ sidebarheader {
   text-shadow: none;
 }
 
 #sidebar-box {
   background-color: -moz-dialog;
 }
 
 #sidebar-splitter {
-   border-right: 1px solid #8e8e8e;
-         border-left: 1px solid #bebebe;
-         background-color: #ececec;
+  border-right: 1px solid #8e8e8e;
+  border-left: 1px solid #bebebe;
+  background-color: #ececec;
 }
 
 #sidebar-title {
   font: icon;
   color: #000;
 }
 
 #searchInput #sidebar {