Bug 456818 messagereader: Collapsed view should show "to" information. [r=mkmelin,ui-review=clarkbw]
authorDavid Ascher <david.ascher@gmail.com>
Tue, 25 Nov 2008 22:20:59 +0000
changeset 1224 ea449e297e9502f445be313fb6f5b77921fcc912
parent 1223 077a57083c7e4359f4f0505295d6111deeef3ca9
child 1225 7ed6a4b1c9db6782b8727b81cac8d5f386608a93
push idunknown
push userunknown
push dateunknown
reviewersmkmelin
bugs456818
Bug 456818 messagereader: Collapsed view should show "to" information. [r=mkmelin,ui-review=clarkbw]
mail/base/content/mailWindowOverlay.js
mail/base/content/messageWindow.xul
mail/base/content/messenger.css
mail/base/content/messenger.xul
mail/base/content/msgHdrViewOverlay.js
mail/base/content/msgHdrViewOverlay.xul
mail/themes/pinstripe/mail/messageHeader.css
mail/themes/qute/mail/messageHeader.css
mailnews/base/resources/content/mailWidgets.xml
--- a/mail/base/content/mailWindowOverlay.js
+++ b/mail/base/content/mailWindowOverlay.js
@@ -1665,17 +1665,22 @@ function MsgJunk()
 
 function UpdateJunkButton()
 {
   let hdr = gDBView.hdrForFirstSelectedMessage;
   let junkScore = hdr.getStringProperty("junkscore");
   let hideJunk = (junkScore != "") && (junkScore != "0");
   if (isNewsURI(hdr.folder.URI))
     hideJunk = true;
-  document.getElementById('junkButton').disabled = hideJunk;
+  // which DOM node is the current junk button in the
+  // message reader depends on whether it's the collapsed or
+  // expanded header
+  let buttonBox = document.getElementById(gCollapsedHeaderViewMode ?
+                     "collapsedButtonBox" : "expandedButtonBox");
+  buttonBox.getButton('hdrJunkButton').disabled = hideJunk;
 }
 
 function MsgMarkMsgAsRead()
 {
   MarkSelectedMessagesRead(!SelectedMessagesAreRead());
 }
 
 function MsgMarkAsFlagged()
--- a/mail/base/content/messageWindow.xul
+++ b/mail/base/content/messageWindow.xul
@@ -110,41 +110,42 @@
 
   <keyset id="mailKeys">
     <keyset id="tasksKeys"/>
     <key keycode="VK_ESCAPE" oncommand="window.close();"/>
   </keyset>
 
   <popupset>
     <panel id="editContactPanel"/>
-    <popup id="emailAddressPopup" popupanchor="bottomleft"
-           onpopupshowing="setupEmailAddressPopup(document.popupNode.parentNode); goUpdateCommand('cmd_createFilterFromPopup')">
+    <popup id="emailAddressPopup" class="emailAddressPopup" position="after_start"
+           onpopupshowing="setupEmailAddressPopup(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup')); goUpdateCommand('cmd_createFilterFromPopup')"
+           onpopuphiding="hideEmailAddressPopup(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))">
       <menuitem id="emailAddressPlaceHolder" label=""
                 disabled="true"/>
       <menuseparator/>
       <menuitem id="addToAddressBookItem"
                 label="&AddDirectlyToAddressBook.label;"
                 accesskey="&AddDirectlyToAddressBook.accesskey;"
-                oncommand="AddContact(document.popupNode.parentNode)"/>
+                oncommand="AddContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
       <menuitem id="editContactItem" label="&EditContact.label;" hidden="true"
                 accesskey="&EditContact.accesskey;"
-                oncommand="EditContact(document.popupNode.parentNode)"/>
+                oncommand="EditContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
       <menuitem id="viewContactItem" label="&ViewContact.label;" hidden="true"
                 accesskey="&ViewContact.accesskey;"
-                oncommand="EditContact(document.popupNode.parentNode)"/>
+                oncommand="EditContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
       <menuitem id="sendMailToItem" label="&SendMailTo.label;"
                 accesskey="&SendMailTo.accesskey;"
-                oncommand="SendMailToNode(document.popupNode.parentNode)"/>
+                oncommand="SendMailToNode(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
       <menuitem id="copyEmailAddressItem" label="&CopyEmailAddress.label;"
                 accesskey="&CopyEmailAddress.accesskey;"
-                oncommand="CopyEmailAddress(document.popupNode.parentNode)"/>
+                oncommand="CopyEmailAddress(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
       <menuseparator/>
       <menuitem id="createFilterFromItem" label="&CreateFilterFrom.label;"
                 accesskey="&CreateFilterFrom.accesskey;"
-                oncommand="CreateFilter(document.popupNode.parentNode)"
+                oncommand="CreateFilter(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"
                 observes="cmd_createFilterFromPopup"/>
     </popup>
 
     <popup id="messageIdContext"/>
 
     <popup id="messagePaneContext"/>
   </popupset>
 
--- a/mail/base/content/messenger.css
+++ b/mail/base/content/messenger.css
@@ -201,16 +201,21 @@ folderSummary
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#folderSummary");
 }
 
 folderSummaryMessage
 {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#folderSummary-message");
 }
 
+header-view-button-box
+{
+  -moz-binding: url("chrome://messenger/content/mailWidgets.xml#header-view-button-box");
+}
+
 .foldersTree
 {
   margin: 0px;
   border: none;
   -moz-user-focus: ignore;
 }
 
 .foldersTreeChildren
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -132,41 +132,42 @@
 <popup id="threadPaneContext"/>
 <popup id="folderPaneContext"/>
 <popup id="attachmentListContext"/>
 <popup id="copyUrlPopup"/>
 <popup id="toolbar-context-menu"/>
 
 <tooltip id="attachmentListTooltip"/>
 
-<popup id="emailAddressPopup" popupanchor="bottomleft"
-       onpopupshowing="setupEmailAddressPopup(document.popupNode.parentNode); goUpdateCommand('cmd_createFilterFromPopup')">
-    <menuitem id="emailAddressPlaceHolder" label=""
+<popup id="emailAddressPopup" position="after_start" class="emailAddressPopup"
+       onpopupshowing="setupEmailAddressPopup(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup')); goUpdateCommand('cmd_createFilterFromPopup')"
+       onpopuphiding="hideEmailAddressPopup(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'));">
+    <menuitem id="emailAddressPlaceHolder"
               disabled="true"/>
     <menuseparator/>
     <menuitem id="addToAddressBookItem"
               label="&AddDirectlyToAddressBook.label;"
               accesskey="&AddDirectlyToAddressBook.accesskey;"
-              oncommand="AddContact(document.popupNode.parentNode)"/>
+              oncommand="AddContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
     <menuitem id="editContactItem" label="&EditContact.label;" hidden="true"
               accesskey="&EditContact.accesskey;"
-              oncommand="EditContact(document.popupNode.parentNode)"/>
+              oncommand="EditContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
     <menuitem id="viewContactItem" label="&ViewContact.label;" hidden="true"
               accesskey="&ViewContact.accesskey;"
-              oncommand="EditContact(document.popupNode.parentNode)"/>
+              oncommand="EditContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
     <menuitem id="sendMailToItem" label="&SendMailTo.label;"
               accesskey="&SendMailTo.accesskey;"
-              oncommand="SendMailToNode(document.popupNode.parentNode)"/>
+              oncommand="SendMailToNode(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
     <menuitem id="copyEmailAddressItem" label="&CopyEmailAddress.label;"
               accesskey="&CopyEmailAddress.accesskey;"
-              oncommand="CopyEmailAddress(document.popupNode.parentNode)"/>
+              oncommand="CopyEmailAddress(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
     <menuseparator/>
     <menuitem id="createFilterFromItem" label="&CreateFilterFrom.label;"
               accesskey="&CreateFilterFrom.accesskey;"
-              oncommand="CreateFilter(document.popupNode.parentNode)"
+              oncommand="CreateFilter(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"
               observes="cmd_createFilterFromPopup"/>
 </popup>
 
 <popup id="messageIdContext"/>
 
 <tooltip id="folderpopup" class="folderSummaryPopup"/>
 
 <popup id="messagePaneContext"/>
@@ -342,8 +343,9 @@
   </panel>
 #endif
 
   <statusbar id="status-bar" class="chromeclass-status">
     <statusbarpanel id="unreadMessageCount"/>
     <statusbarpanel id="totalMessageCount"/>
   </statusbar>
 </window>
+
--- a/mail/base/content/msgHdrViewOverlay.js
+++ b/mail/base/content/msgHdrViewOverlay.js
@@ -89,17 +89,20 @@ var gMessageListeners = new Array();
 // outputFunction: this is a method which takes a headerEntry (see the definition below) and a header value
 //                 This allows you to provide your own methods for actually determining how the header value
 //                 is displayed. (DEFAULT: updateHeaderValue which just sets the header value on the text node)
 
 // Our first view is the collapsed view. This is very light weight view of the data. We only show a couple
 // fields.
 var gCollapsedHeaderList = [ {name:"subject", outputFunction:updateHeaderValueInTextNode},
                              {name:"from", useToggle:true, useShortView:true, outputFunction:OutputEmailAddresses},
-                             {name:"date", outputFunction:updateHeaderValueInTextNode}];
+                             {name:"toCcBcc", useToggle:true,
+                              useShortView:true,
+                              outputFunction: OutputEmailAddresses},
+                             {name:"date", outputFunction:OutputDate}];
 
 // We also have an expanded header view. This shows many of your more common (and useful) headers.
 var gExpandedHeaderList = [ {name:"subject"},
                             {name:"from", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"reply-to", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"date"},
                             {name:"to", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"cc", useToggle:true, outputFunction:OutputEmailAddresses},
@@ -116,17 +119,17 @@ var gExpandedHeaderList = [ {name:"subje
 // For the moment, display of those things when the user has touched that pref
 // is untested.  It might Just Work as a generic extended header.
 var extraExpandedHeaderList = [ {name:"sender", outputFunction:OutputEmailAddresses},                            
                                 {name:"references", outputFunction:OutputMessageIds} ];
 
 // These are all the items that use a mail-multi-emailHeaderField widget and
 // therefore may require updating if the address book changes.
 const gEmailAddressHeaderNames = ["from", "reply-to",
-                                  "to", "cc", "bcc"];
+                                  "to", "cc", "bcc", "toCcBcc"];
 
 // Now, for each view the message pane can generate, we need a global table of headerEntries. These
 // header entry objects are generated dynamically based on the static date in the header lists (see above)
 // and elements we find in the DOM based on properties in the header lists.
 var gCollapsedHeaderView = {};
 var gExpandedHeaderView  = {};
 
 // currentHeaderData --> this is an array of header name and value pairs for the currently displayed message.
@@ -771,17 +774,17 @@ function updateHeaderViews()
   if (gCollapsedHeaderViewMode)
     showHeaderView(gCollapsedHeaderView);
   else
   {
     if (gMinNumberOfHeaders)
       EnsureMinimumNumberOfHeaders(gExpandedHeaderView);
     showHeaderView(gExpandedHeaderView);
   }
-
+  UpdateJunkButton();
   displayAttachmentsForExpandedView();
 }
 
 function ToggleHeaderView ()
 {
   gCollapsedHeaderViewMode = !gCollapsedHeaderViewMode;
   // Work around a xul deck bug where the height of the deck is determined by the tallest panel in the deck
   // even if that panel is not selected...
@@ -799,21 +802,17 @@ function ToggleHeaderView ()
 // default method for updating a header value into a header entry
 function updateHeaderValue(headerEntry, headerValue)
 {
   headerEntry.enclosingBox.headerValue = headerValue;
 }
 
 function updateHeaderValueInTextNode(headerEntry, headerValue)
 {
-  try {
-      headerEntry.textNode.value = headerValue;
-  } catch (e) {
-    dump("headerEntry = " + headerEntry + " and headerValue = " + headerValue + '\n')
-  }
+  headerEntry.textNode.value = headerValue;
 }
 
 function createNewHeaderView(headerName, label)
 {
   var idName = 'expanded' + headerName + 'Box';
   var newHeader = document.createElement("mail-headerfield");
 
   newHeader.setAttribute('id', idName);
@@ -861,18 +860,20 @@ function UpdateMessageHeaders()
             folder = GetMsgFolderFromUri(gCurrentFolderUri);
           setTitleFromFolder(folder, headerField.headerValue);
         }
       } catch (ex) {}
     }
 
     if (gCollapsedHeaderViewMode && !gBuiltCollapsedView)
     {
-      if (headerName in gCollapsedHeaderView)
-      headerEntry = gCollapsedHeaderView[headerName];
+      if (headerName == "cc" || headerName == "to" || headerName == "bcc")
+        headerEntry = gCollapsedHeaderView["toCcBcc"];
+      else if (headerName in gCollapsedHeaderView)
+        headerEntry = gCollapsedHeaderView[headerName];
     }
     else if (!gCollapsedHeaderViewMode && !gBuiltExpandedView)
     {
       if (headerName in gExpandedHeaderView)
        headerEntry = gExpandedHeaderView[headerName];
 
       if (!headerEntry && gViewAllHeaders)
       {
@@ -968,16 +969,27 @@ function OutputMessageIds(headerEntry, h
 
   headerEntry.enclosingBox.clearHeaderValues();
   for (var i = 0; i < messageIdArray.length; i++)
     headerEntry.enclosingBox.addMessageIdView(messageIdArray[i]);
 
   headerEntry.enclosingBox.fillMessageIdNodes();
 }
 
+function OutputDate(headerEntry, headerValue)
+{
+  headerEntry.textNode.value = headerValue;
+  // The date field is a textbox, and we want it to be as small as possible to
+  // not take space from the subject textbox. This is a bit bigger than
+  // necessary, but guaranteed to fit. We should move to not using textboxes
+  // because of these sizing problems, and instead figure out selectable
+  // labels.
+  headerEntry.textNode.setAttribute("size", Math.round(headerValue.length * 1.2));
+}
+
 // OutputEmailAddresses --> knows how to take a comma separated list of email addresses,
 // extracts them one by one, linkifying each email address into a mailto url.
 // Then we add the link-ified email address to the parentDiv passed in.
 //
 // emailAddresses --> comma separated list of the addresses for this header field
 
 function OutputEmailAddresses(headerEntry, emailAddresses)
 {
@@ -1029,27 +1041,37 @@ function AddExtraAddressProcessing(email
   // Always get the card details so we can show add or edit menu options.
   var cardDetails = getCardForEmail(emailAddress);
   documentNode.cardDetails = cardDetails;
 
   if (!cardDetails.card) {
     documentNode.setAttribute("hascard", "false");
     documentNode.setAttribute("tooltipstar",
       document.getElementById("addToAddressBookItem").label);
-    return;
   }
-
-  documentNode.setAttribute("hascard", "true");
-  documentNode.setAttribute("tooltipstar",
-    document.getElementById("editContactItem").label);
+  else {
+    documentNode.setAttribute("hascard", "true");
+    documentNode.setAttribute("tooltipstar",
+      document.getElementById("editContactItem").label);
+  }
 
   if (!gShowCondensedEmailAddresses)
     return;
 
-  var displayName = cardDetails.card.displayName;
+  var displayName;
+  var identity = getBestIdentity(accountManager.allIdentities);
+  if (emailAddress == identity.email) {
+    displayName = gMessengerBundle.getString("headerFieldYou");
+  }
+  else
+  {
+    if (!cardDetails.card)
+      return;
+    displayName = cardDetails.card.displayName;
+  }
 
   if (!displayName)
     return;
 
   documentNode.setAttribute("label", displayName);
   documentNode.setAttribute("tooltiptext", emailAddress);
 }
 
@@ -1107,17 +1129,17 @@ function UpdateExtraAddressProcessing(aA
       aDocumentNode.cardDetails.card = aItem;
       var displayName = aItem.displayName;
 
       if (gShowCondensedEmailAddresses && displayName)
         aDocumentNode.setAttribute("label", displayName);
       else
         aDocumentNode.setAttribute("label",
                                    aDocumentNode.getAttribute("fullAddress") ||
-                                   aDocumentNode.getAttriubte("displayName"));
+                                   aDocumentNode.getAttribute("displayName"));
     }
     break;
   case nsIAbListener.itemAdded:
     // Is it a new address book?
     if (aItem instanceof Components.interfaces.nsIAbDirectory) {
       // If we don't have a match, search again for updates (e.g. a interface
       // to an existing book may just have been added).
       if (!aDocumentNode.cardDetails.card)
@@ -1149,21 +1171,45 @@ function UpdateExtraAddressProcessing(aA
     break;
   case nsIAbListener.directoryRemoved:
     if (aDocumentNode.cardDetails.book == aItem)
       UpdateEmailNodeDetails(aAddressData.emailAddress, aDocumentNode);
     break;
   }
 }
 
+function findEmailNodeFromPopupNode(elt, popup)
+{
+  // This annoying little function is needed because in the binding for
+  // mail-emailaddress, we set the context on the <description>, but that if
+  // the user clicks on the label, then popupNode is set to it, rather than
+  // the description.  So we have walk up the parent until we find the
+  // element with the popup set, and then return its parent.
+  
+  while (elt.getAttribute("popup") != popup)
+  {
+    elt = elt.parentNode;
+    if (elt == null)
+      return null;
+  }
+  return elt.parentNode;
+}
+
+function hideEmailAddressPopup(emailAddressNode)
+{
+  // highlight the emailBox
+  emailAddressNode.removeAttribute('selected');
+}
+
 function setupEmailAddressPopup(emailAddressNode)
 {
+    dump("emailAddressNode.tagName = " + emailAddressNode.tagName + '\n');
   var emailAddressPlaceHolder = document.getElementById('emailAddressPlaceHolder');
-  var emailAddress = emailAddressNode.getAttribute('emailAddress');
-
+  var emailAddress = emailAddressNode.getPart('emaillabel').value;
+  emailAddressNode.setAttribute('selected', 'true');
   emailAddressPlaceHolder.setAttribute('label', emailAddress);
 
   if (emailAddressNode.cardDetails.card) {
     document.getElementById('addToAddressBookItem').setAttribute('hidden', true);
     if (!emailAddressNode.cardDetails.book.readOnly) {
       document.getElementById('editContactItem').removeAttribute('hidden');
       document.getElementById('viewContactItem').setAttribute('hidden', true);
     }
@@ -1909,8 +1955,9 @@ nsDummyMsgHeader.prototype =
   recipients : null,
   from : null,
   subject : null,
   ccList : null,
   messageId : null,
   accountKey : "",
   folder : null
 };
+
--- a/mail/base/content/msgHdrViewOverlay.xul
+++ b/mail/base/content/msgHdrViewOverlay.xul
@@ -98,142 +98,136 @@
 <popup id="copyUrlPopup" popupanchor="bottomleft">
   <menuitem label="&copyLinkCmd.label;" accesskey="&copyLinkCmd.accesskey;" oncommand="CopyWebsiteAddress(document.popupNode)"/>
 </popup>
 
 <hbox id="msgHeaderView" collapsed="true" class="main-header-area">
   <deck id="msgHeaderViewDeck" persist="selectedIndex" selectedIndex="1" flex="1">
     <!-- the message pane consists of 4 'boxes'. Box #1 is a grid, showing a brief view of the headers -->
     <vbox id="collapsedHeaderView" class="header-part1 headerContainer" flex="1" pack="start">
-      <hbox flex="1">
-        <hbox id="collapsedfromBox" align="baseline">
-          <hbox>
+      <hbox align="baseline">
+        <hbox id="collapsedfromBox" align="baseline" flex="1">
             <mail-multi-emailHeaderField id="collapsedfromValue"
                                          pack="start"
                                          class="collapsedHeaderDisplayName"
                                          label="&fromField2.label;"/>
-          </hbox>
         </hbox>
-        <spacer flex="1"/>
-        <hbox id="collapseddateBox">
-          <hbox>
-            <textbox id="collapseddateValue" class="collapsedHeaderValue plain" readonly="true"/>
-          </hbox>
+        <header-view-button-box id="collapsedButtonBox"/>
+      </hbox>
+
+      <hbox align="baseline">
+        <hbox id="collapsedsubjectBox" flex="1">
+          <textbox id="collapsedsubjectValue" flex="1" readonly="true"
+                   class="collapsedHeaderValue plain"/>
+        </hbox>
+        <hbox id="collapseddateBox" flex="0">
+          <textbox id="collapseddateValue" class="plain collapsedHeaderValue"
+                   flex="0" readonly="true"/>
         </hbox>
       </hbox>
-      <hbox align="baseline" flex="1">
-        <hbox id="collapsedsubjectBox" flex="1">
-          <hbox flex="1" align="center">
-            <textbox flex="1" id="collapsedsubjectValue"
-                     class="collapsedHeaderValue plain" readonly="true"/>
-          </hbox>
-          <vbox>
-            <button align="center"
-                    id="showDetailsButton"
-                    tooltiptext="&showDetailsButton.label;"
-                    onclick="ToggleHeaderView();"
-                    class="msgHeaderView-button"/>
-          </vbox>
+
+      <hbox flex="1" align="center">
+        <hbox id="collapsedtoCcBccBox"
+              align="center" flex="1">
+          <mail-multi-emailHeaderField id="collapsedtoCcBccValue"
+                                       flex="1"
+                                       align="baseline"
+                                       class="collapsedHeaderDisplayName"/>
         </hbox>
+        <button id="showDetailsButton"
+                tooltiptext="&showDetailsButton.label;"
+                onclick="ToggleHeaderView();"
+                class="msgHeaderView-button"/>
       </hbox>
     </vbox>
 
     <!-- the message pane consists of 3 'boxes'. Box #2 is the expanded headers view (the default view) -->
     <hbox id="expandedHeaderView" flex="1">
 
       <!--  XXX this should switch to using <grid> for expandedHeaders to get
             away from gross historical CSS pseudo-boxery used for header
             name positioning -->
       <vbox id="expandedHeaders" flex="1">
 
         <hbox id="expandedHeadersTopBox" flex="1">
 
-          <hbox flex="1" align="end">
+          <hbox flex="1">
             <mail-multi-emailHeaderField id="expandedfromBox"
                                          label="&fromField2.label;"
+                                         align="baseline"
                                          collapsed="false"
                                          flex="1"/>
           </hbox>
-          <!-- This might want to become a customizable toolbar at some
-               point -->
-          <hbox id="expandedHeadersButtonBox" align="start">
-
-            <!-- XXXdmose need to move these commands to a controller, either
-                 on the header view, the message pane, or the default
-                 controller
-                 -->
-
-            <!-- XXXdmose need to audit our shortcut/a11y setup and make sure
-                 these buttons are doing the right thing -->
-
-            <button id="replyButton" label="&replyButton.label;"
-                    oncommand="MsgReplyMessage(event);" observes="button_reply"
-                    class="msgHeaderView-button"/>
-            <button id="forwardButton" label="&forwardButton.label;"
-                    oncommand="MsgForwardMessage(event);"
-                    observes="button_forward" class="msgHeaderView-button"/>
-            <button id="junkButton" label="&junkButton.label;"
-                    observes="button_junk" class="msgHeaderView-button"
-                    oncommand="goDoCommand('button_junk')"/>
-            <button id="trashButton" tooltiptext="&trashButton.tooltiptext;"
-                    class="msgHeaderView-button" observes="button_delete"
-                    oncommand="goDoCommand(event.shiftKey ? 'cmd_shiftDelete' : 'cmd_delete')"/>
-           </hbox>
+          <header-view-button-box id="expandedButtonBox"/>
         </hbox>
 
         <hbox id="otherHeadersAndButtonsBox" flex="1">
           <vbox id="variousHeadersBox" flex="1">
             <mail-headerfield id="expandedsubjectBox" label="&subjectField2.label;"
+                              align="baseline"
                               collapsed="false"/>
             <mail-headerfield id="expandedorganizationBox"
                               label="&organizationField2.label;"
+                              align="baseline"
                               collapsed="true"/>
             <mail-emailheaderfield id="expandedsenderBox"
+                                   align="baseline"
                                    label="&senderField2.label;"
                                    collapsed="true"/>
             <mail-multi-emailHeaderField id="expandedreply-toBox"
                                          label="&replyToField2.label;"
+                                         align="baseline"
                                          collapsed="true"/>
             <mail-multi-emailHeaderField id="expandedtoBox"
                                          label="&toField2.label;"
+                                         align="baseline"
                                          collapsed="true"/>
             <mail-multi-emailHeaderField id="expandedccBox"
                                          label="&ccField2.label;"
+                                         align="baseline"
                                          collapsed="true"/>
             <mail-multi-emailHeaderField id="expandedbccBox" 
                                          label="&bccField2.label;"
+                                         align="baseline"
                                          collapsed="true"/>
             <mail-headerfield id="expandednewsgroupsBox"
                               label="&newsgroupsField2.label;"
+                              align="baseline"
                               collapsed="true"/>
             <mail-headerfield id="expandedfollowup-toBox"
                               label="&followupToField2.label;"
+                              align="baseline"
                               collapsed="true"/>
             <mail-headerfield id="expandeddateBox" label="&dateField2.label;"
+                              align="baseline"
                               collapsed="true"/>
             <mail-messageids-headerfield id="expandedmessage-idBox"
+                              align="baseline"
                                          label="&messageIdField2.label;"
                                          collapsed="true"/>
             <mail-messageids-headerfield id="expandedin-reply-toBox"
+                              align="baseline"
                                          label="&inReplyToField2.label;"
                                          collapsed="true"/>
             <mail-messageids-headerfield id="expandedreferencesBox"
+                              align="baseline"
                                          label="&referencesField2.label;"
                                          collapsed="true"/>
             <mail-tagfield id="expandedtagsBox" label="&tagsHdr2.label;"
                            collapsed="true"/>
             <mail-urlfield id="expandedcontent-baseBox"
                            label="&originalWebsite2.label;" collapsed="true"/>
             <mail-headerfield id="expandeduser-agentBox"
                               label="&userAgentField2.label;"
                               collapsed="true"/>
           </vbox>
 
           <!-- perhaps this should be a customizable toolbar too -->
           <vbox id="hideDetailsBox" align="end">
+            <spacer flex="1"/>
             <button type="menu" id="otherActionsButton"
                     label="&otherActionsButton.label;"
                     class="msgHeaderView-button">
               <menupopup id="otherActionsPopup">
                 <menuitem id="viewSourceMenuItem"
                           label="&viewSourceMenuItem.label;"
                           accesskey="&viewSourceMenuItem.accesskey;"
                           oncommand="ViewPageSource(GetSelectedMessages());" />
--- a/mail/themes/pinstripe/mail/messageHeader.css
+++ b/mail/themes/pinstripe/mail/messageHeader.css
@@ -43,27 +43,27 @@
 
 /* ::::: for the entire area ::::: */
 .main-header-area {
   background-color: #eeeeec;
 }
 
 /* ::::: msg header toolbars ::::: */
 #collapsedHeaderView {
-  padding: .5em;
   min-width: 1px;
+  margin-left: 0.5em;
   color: black;
-  font-size: 120%;
+  font-size: 110%;
+  padding-bottom: 0.5em;
 }
 
 #expandedHeaderView {
   color: #2e3436;
-  font-size: 100%;
-  overflow-y: auto;
   overflow-x: hidden;
+  overflow-y: visible;
   max-height: 14em;
 }
 
 #variousHeadersBox{
   padding-bottom: 1em;
 }
 
 #collapsedHeaderDisplayName {
@@ -72,17 +72,17 @@
 
 /* ::::: msg header buttons ::::: */
 .headerContainer
 {
   min-width: 1px;
 }
 
 #otherActionsButton {
-  margin-bottom: .1em;
+  margin-bottom: 0.1em;
   background: none;
   font-weight: normal;
   color: #41413F; /* higher contrast */
   border: 2px solid transparent;
   font-size: 100%;
   padding-top: 0px;
 }
 
@@ -110,50 +110,57 @@
 }
 
 #hideDetailsButton:hover {
   color: black;
   background-color: rgb(230,231,227);
   border: 2px solid #C0C3C6;
 }
 
-
 #collapsedsubjectValue {
+  margin-left: 3px !important;
   -moz-box-align: stretch;
   font-weight: bold;
 }
 
+#collapseddateValue {
+  -moz-box-align: stretch;
+  text-align: right;
+  padding-right: 0.5em !important;
+}
+
 #showDetailsButton {
   -moz-appearance: none !important;
   border: 2px solid transparent;
   background-color: transparent;
   width: 22px;
+  padding-bottom: 0px !important;
   background-image: url("chrome://messenger/skin/icons/chevron.png");
   background-repeat: no-repeat;
   background-position: center center;
 }
 
 #showDetailsButton:hover {
   background-color: rgb(230,231,227);
   border: 2px solid #C0C3C6;
 }
 
-#trashButton {
+.hdrTrashButton {
   -moz-box-orient: vertical;
   list-style-image: url("chrome://messenger/skin/icons/folder-trash.png");
 }
 
 /* ::::: expanded header pane ::::: */
 
 #expandedHeadersButtonBox {
   padding-bottom: 0;
 }
 
 #expandedfromBox {
-  padding-top: .5em;
+  padding-top: 0.5em;
 }
 
 /* ::::: edit message bar ::::: */
 
 #editMessageBox
 {
   min-width: 1px;
   -moz-border-radius-bottomleft: 0.2em;
@@ -281,48 +288,67 @@ description[selectable="true"]:focus > d
 }
 
 .msgHeaderView-button:hover {
   background-color: rgb(230,231,227);
   border: 2px solid #B0B3B6;
 }
 
 #msgHeaderView textbox {
-  background-color: transparent;
   color: inherit;
 }
 
 
 .headerNameBox {
   width: 7em;
   background-color: transparent;
 }
 
 .headerName {
   color: #888a85; /* lower contrast */
   text-align: right;
   background-color: transparent;
   padding: 0px;
   margin-top: 0;
+  margin-right: 0;
+}
+
+
+.headerValueBox {
+  overflow: visible;
+}
+
+.headerValueBox {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .headerValue {
-  margin: 0;
   min-width: 50px;
   white-space: normal;
   color: black !important;
-  background-color: transparent;
-  padding: 0px;
-}
+  line-height: 1.4em;
+
+  -moz-appearance: none !important;
+  -moz-appearance: none;
 
-.headerValueBox {
+  padding: 0px !important;
+  margin: 0px !important;
+  margin-left: 3px !important;
+  border: none !important;
   background-color: transparent;
 }
 
+.headerValue[containsEmail="true"] {
+  margin-left: 0px !important;
+}
+
+
 .headerValueBox[singleline="true"] {
+  height: 1.8em;
   overflow: hidden;
 }
 
 .headerValueUrl {
   cursor: pointer;
   color: #0000FF;
   text-decoration: underline;
 }
@@ -337,23 +363,45 @@ description[selectable="true"]:focus > d
 
 #collapsedsubjectBox {
   margin: 0px;
   padding: 0px;
 }
 
 #collapsedfromValue > .headerNameBox {
   display: none;
-  /*width: auto !important;*/
+}
+
+#collapsedtoCcBccValue > .headerNameBox {
+  display: none;
+}
+
+#collapsedtoCcBccValue > .headerValueBox[singleline] {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-#junkButton[disabled="true"] {
+#collapsedtoCcBccValue > .headerValueBox:not([singleline]) {
+  padding-top: 0.5em;
+  padding-bottom: 0;
+}
+
+.moreIndicator {
+  font-weight: bold;
+  font-size: small;
+}
+
+.moreIndicator:hover {
+  text-decoration: underline;
+  color: darkred;
+}
+
+.junkButton[disabled="true"] {
   background: none;
   opacity: 0;
-  /*border-color: transparent;*/
 }
 
 .tagvalue {
   margin-left: 0px;
   background-image: url("chrome://messenger/skin/tagbg.png");
   color: black;
   -moz-border-radius: 2px;
   padding-left: 3px;
@@ -377,34 +425,66 @@ description[selectable="true"]:focus > d
   color: blue;
   background: url("chrome://messenger/skin/icons/arrow-dn-black.png") no-repeat center right;
 }
 
 /* ::::: msg header email addresses ::::: */
 
 .emailDisplayButton {
   margin: 0;
+  padding-left: 3px !important;
+  padding-right: 3px !important;
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
+  margin-bottom: 3px !important;
   background-color: transparent;
 }
 
 .emailDisplayButton:hover {
   cursor: pointer;
-  text-decoration: underline;
-  color: #2A46C7;
+  -moz-border-radius: 2px;
+  background-color: #fcaf3e; /* tango orange */
+}
+
+mail-emailaddress[selected="true"] .emailDisplayButton{
+  /* when an email address context menu is selected,
+    make sure that the email bubble stays displayed, and
+    tweak the bottom to blend in more w/ the menu */
+  cursor: pointer;
+  -moz-border-radius: 3px;
+  background-color: #fcaf3e; /* tango orange */
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-bottomright: 0;
 }
 
-.emailDisplayButton:focus, .emailStar:focus, .emailPopup:focus {
+.emailSeparator {
+  /* this is for the comma in between email addresses */
+  -moz-margin-start: -6px; /* squeeze it inside the bubble, by the star */
+}
+
+.emailDisplayButton:focus {
+  border: 1px dotted #fcaf3e; /* tango orange */
+}
+
+.emailStar:focus {
   border: 1px dotted;
 }
 
+.emaillabel {
+  padding: 0px !important;  /* override <label> defaults */
+  margin: 0px !important;  /* override <label> defaults */
+  overflow: hidden;
+}
+
 .emailStar {
   max-width: 1em;
   max-height: 1em;
   -moz-appearance: none;
   -moz-box-orient: vertical;
+  -moz-margin-start: -1px !important;
   padding: 0px;
   margin: 0px 2px;
   list-style-image: url("chrome://messenger/skin/starIcons.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
 .emailStar:hover {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
@@ -435,17 +515,17 @@ description[selectable="true"]:focus > d
 
 .emailPopup:hover {
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-blue.png");
 }
  
 /* ::::: email address twisty ::::: */
 
 .addresstwisty {
-  -moz-padding-end: 5px;
+  -moz-padding-end: 0px;
   padding-top: 4px;
   list-style-image:url("chrome://messenger/skin/icons/arrow/arrow-right-dim.png");
 }
 
 .addresstwisty:hover {
   list-style-image:url("chrome://messenger/skin/icons/arrow/arrow-right.png");
 }
 
@@ -455,33 +535,23 @@ description[selectable="true"]:focus > d
 
 .addresstwisty[open]:hover {
   list-style-image:url("chrome://messenger/skin/icons/arrow/arrow-down.png");
 }
 
 
 /* ::::: view expand and collapse twisties  ::::: */
 
-.expandHeaderViewButton,
-.collapsedHeaderViewButton  {
-
-}
-
 .expandHeaderViewButton {
   list-style-image:url("chrome://messenger/skin/icons/twisty-open.gif");
 }
 
 .collapsedHeaderViewButton  {
   list-style-image:url("chrome://messenger/skin/icons/twisty-closed.gif");
 }
 
 /* ::::: collapsed view styles ::::: */
 
-#collapseddateValue {
-  text-align: right;
-  padding-right: .5em !important;
-}
-
 mail-multi-emailHeaderField,
 mail-headerfield {
   margin: 0;
   padding: 0;
 }
--- a/mail/themes/qute/mail/messageHeader.css
+++ b/mail/themes/qute/mail/messageHeader.css
@@ -44,25 +44,27 @@
 /* ::::: for the entire area ::::: */
 .main-header-area {
   background-color: #eeeeec;
 }
 
 /* ::::: msg header toolbars ::::: */
 
 #collapsedHeaderView {
-  padding: .5em;
   min-width: 1px;
+  margin-left: 0.5em;
   color: black;
-  font-size: 125%;
+  font-size: 110%;
+  padding-bottom: 0.5em;
+  padding-top: 0.5em;
 }
 
 #expandedHeaderView {
   color: #2e3436;
-  font-size: 100%;
+  padding-top: 0.5em;
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 14em;
 }
 
 #variousHeadersBox{
   padding-bottom: 1em;
 }
@@ -70,17 +72,16 @@
 #collapsedHeaderDisplayName {
   text-align: left;
 }
 
 /* ::::: msg header buttons ::::: */
 .headerContainer
 {
   min-width: 1px;
-  background-color: transparent;
 }
 
 #otherActionsButton {
   -moz-appearance: none;
   margin-bottom: .1em;
   background: none;
   font-weight: normal;
   color: #41413F; /* higher contrast */
@@ -119,54 +120,55 @@
 }
 
 #hideDetailsButton:hover {
   color: black;
   background-color: rgb(230,231,227);
   border: 2px solid #C0C3C6;
 }
 
-
 #collapsedsubjectValue {
+  margin-left: 3px !important;
   -moz-box-align: stretch;
   font-weight: bold;
 }
 
+#collapseddateValue {
+  -moz-box-align: stretch;
+  text-align: right;
+  padding-right: 0.5em !important;
+}
 
 #showDetailsButton {
   -moz-appearance: none !important;
   border: 2px solid transparent;
   background-color: transparent;
   width: 22px;
+  padding-bottom: 0px !important;
   height: 22px;
   background-image: url("chrome://messenger/skin/icons/chevron.png");
   background-repeat: no-repeat;
   background-position: center center;
 }
 
 #showDetailsButton:hover {
   background-color: rgb(230,231,227);
   border: 2px solid #C0C3C6;
 }
 
-#trashButton {
-  -moz-box-orient: vertical;
- list-style-image: url("chrome://messenger/skin/icons/folder.png");
-  -moz-image-region: rect(0 144px 16px 128px);
-}
 
 /* ::::: expanded header pane ::::: */
 
 #expandedHeadersButtonBox {
   padding-top: 0.5em;
   padding-bottom: 0;
 }
 
 #expandedfromBox {
-  padding-top: .5em;
+  padding-top: 0.5em;
 }
 /* ::::: edit message bar ::::: */
 
 #editMessageBox
 {
   min-width: 1px;
   -moz-border-radius-bottomleft: 0.2em;
   -moz-border-radius-bottomright: 0.2em;
@@ -249,17 +251,17 @@ description[selectable="true"]:focus > d
 }
 
 #msgHeaderViewDeck {
   margin: 0;
   padding: 0;
 }
 
 .msgHeaderView-button {
-  min-width: 1px;
+  min-width: 1px !important;
   -moz-appearance: none;
   font-size: 95%;
   color: black;
   margin-left: 0px;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -267,78 +269,135 @@ description[selectable="true"]:focus > d
   border: 2px solid #C0C3C6;
   -moz-border-radius: 4px;
   -moz-border-top-colors: none;
   -moz-border-right-colors: none;
   -moz-border-bottom-colors: none;
   -moz-border-left-colors: none;
 }
 
+/* had to set a silly attribute on the XUL element to make it so that this
+  rule overrides the rule above.  Better fix wanted! */
+.hdrTrashButton[trash="true"] { 
+  -moz-box-orient: vertical !important;
+  list-style-image: url("chrome://messenger/skin/icons/folder.png") !important;
+  -moz-image-region: rect(1px 142px 15px 126px);
+}
+
 .msgHeaderView-button[secondary="true"] {
   background: none;
 }
 
 .msgHeaderView-button > .toolbarbutton-text {
   margin: 0;
   padding: 0;
 }
 
 .msgHeaderView-button:hover {
   background-color: rgb(230,231,227);
   border: 2px solid #B0B3B6;
 }
 
-.msgHeaderView-button {
-  min-width: 1px !important;
-}
-
 .headerNameBox {
   width: 7.7em;
   background-color: transparent;
 }
 
 .headerName {
-  margin: 0 .5em 5px 0;
+  color: #888a85; /* lower contrast */
   text-align: right;
-  color: #888a85; /* lower contrast */
   background-color: transparent;
+  padding: 0px;
+  margin-top: 0;
+  margin-right: 0;
+}
+
+.headerValueBox {
+  overflow:visible;
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .headerValue {
-  margin: 0;
   min-width: 50px;
   white-space: normal;
+  color: black !important;
+  line-height: 1.4em;
+
+  -moz-appearance: none !important;
+  -moz-appearance: none;
+
+  padding: 0px !important;
+  margin: 0px !important;
+  margin-left: 3px !important;
+  border: none !important;
   background-color: transparent;
-  color: black !important;
 }
 
-.headerValueBox {
-  margin: 0 0 5px 0; /* XXX needed?*/
+.headerValue[containsEmail="true"] {
+  margin-left: 0px !important;
 }
 
 .headerValueBox[singleline="true"] {
+  height: 1.8em;
   overflow: hidden;
 }
 
 .headerValueUrl {
   cursor: pointer;
   color: #0000FF;
   text-decoration: underline;
 }
 
+.headerValueUrl:hover {
+  color: red;
+}
+
+.headerField {
+  color: inherit;
+}
+
 #collapsedsubjectBox {
   margin: 0px;
   padding: 0px;
 }
 
+#collapsedfromBox {
+  padding-top: 0.5em;
+}
+
 #collapsedfromValue > .headerNameBox {
   display: none;
 }
 
-#junkButton[disabled="true"] {
+#collapsedtoCcBccValue > .headerNameBox {
+  display: none;
+}
+
+#collapsedtoCcBccValue > .headerValueBox[singleline] {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+#collapsedtoCcBccValue > .headerValueBox:not([singleline]) {
+  padding-top: 0.5em;
+  padding-bottom: 0;
+}
+
+.moreIndicator {
+  font-weight: bold;
+  font-size: small;
+}
+
+.moreIndicator:hover {
+  text-decoration: underline;
+  color: darkred;
+}
+
+.hdrJunkButton[disabled="true"] {
   background: none;
   opacity: 0;
 }
 
 .tagvalue {
   margin-left: 0px;
   background-image: url("chrome://messenger/skin/tagbg.png");
   color: black;
@@ -366,41 +425,71 @@ description[selectable="true"]:focus > d
   -moz-padding-start: 2px;
   -moz-box-pack: end;
 }
 
 
 /* ::::: msg header email addresses ::::: */
 
 .emailDisplayButton {
-  cursor: pointer;
   margin: 0;
+  padding-left: 3px !important;
+  padding-right: 3px !important;
+  padding-top: .1em;
+  padding-bottom: .1em;
+  margin-bottom: 3px !important;
   background-color: transparent;
 }
 
-.headerValueUrl:hover,
 .emailDisplayButton:hover {
-  color: #2A46C7;
+  cursor: pointer;
+  -moz-border-radius: 2px;
+  background-color: #729fcf; /* tango blue */
+}
+
+mail-emailaddress[selected="true"] .emailDisplayButton{
+  /* when an email address context menu is selected,
+    make sure that the email bubble stays displayed, and
+    tweak the bottom to blend in more w/ the menu */
+  cursor: pointer;
+  -moz-border-radius: 3px;
+  background-color: #729fcf; /* tango orange */
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-bottomright: 0;
 }
 
-.headerValueUrl:hover {
-  background: url("chrome://messenger/skin/icons/arrow-dn-blue.png") no-repeat center right;
+.emailSeparator {
+  /* this is for the comma in between email addresses */
+  -moz-margin-start: -6px; /* squeeze it inside the bubble, by the star */
+}
+
+.emailDisplayButton:focus {
+  border: 1px dotted #729fcf; /* tango blue */
 }
 
-.emailDisplayButton:focus, .emailStar:focus, .emailPopup:focus {
+.emailStar:focus {
   border: 1px dotted;
 }
 
+.emaillabel {
+  padding: 0px !important;  /* override <label> defaults */
+  margin: 0px !important;  /* override <label> defaults */
+  overflow: hidden;
+}
+
 .emailStar {
   max-width: 1em;
   max-height: 1em;
+  -moz-appearance: none;
+  -moz-box-orient: vertical;
   padding: 0px;
-  margin: 0px 2px;
+  -moz-margin-start: -2px !important;
+  /*margin: 0px 2px;*/
   list-style-image: url("chrome://messenger/skin/starContact.png");
-  -moz-image-region:rect(0px 16px 16px 0px);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
 .emailStar:hover {
   -moz-image-region:rect(0px 32px 16px 16px);
 }
 
 .emailStar:hover:active {
   -moz-image-region:rect(0px 48px 16px 32px);
@@ -419,17 +508,17 @@ description[selectable="true"]:focus > d
 
 .emailPopup:hover {
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-blue.png");
 }
 
 /* ::::: email address twisty ::::: */
 
 .addresstwisty {
-  -moz-padding-end: 5px;
+  -moz-padding-end: 0px;
   padding-top: 4px;
   list-style-image:url("chrome://messenger/skin/icons/arrow/arrow-right-dim.png");
 }
 
 .addresstwisty:hover {
   list-style-image:url("chrome://messenger/skin/icons/arrow/arrow-right.png");
 }
 
@@ -446,28 +535,13 @@ description[selectable="true"]:focus > d
 .expandHeaderViewButton {
   list-style-image: url("chrome://global/skin/tree/twisty-open.png");
 }
 
 .collapsedHeaderViewButton  {
   list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
 }
 
-/* ::::: collapsed view styles ::::: */
-
-#collapseddateValue {
-  margin: 0 .5em;
-  text-align: right;
-  background-color: transparent;
-  color: inherit;
-  padding-right: .5em !important;
+mail-multi-emailHeaderField,
+mail-headerfield {
+  margin: 0;
+  padding: 0;
 }
-
-.collapsedHeaderDisplayName { 
-  min-height: 16px;
-  background-color: transparent;
-}
-
-.collapsedHeaderValue {
-  margin: 0;
-  color: inherit;
-  background-color: transparent;
-}
--- a/mailnews/base/resources/content/mailWidgets.xml
+++ b/mailnews/base/resources/content/mailWidgets.xml
@@ -1,10 +1,17 @@
 <?xml version="1.0"?>
 
+<!DOCTYPE bindings [
+<!ENTITY % msgHdrViewOverlayDTD SYSTEM "chrome://messenger/locale/msgHdrViewOverlay.dtd" >
+%msgHdrViewOverlayDTD;
+<!ENTITY % messengerDTD SYSTEM "chrome://messenger/locale/messenger.dtd" >
+%messengerDTD;
+]>
+
 <bindings   id="mailBindings"
             xmlns="http://www.mozilla.org/xbl"
             xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
             xmlns:nc="http://home.netscape.com/NC-rdf#"
             xmlns:xbl="http://www.mozilla.org/xbl">
 
   <!-- dummy widget to force this file to load -->
   <binding id="dummy" extends="xul:box"/>
@@ -150,98 +157,124 @@
         <xul:image class="descriptioncell-icon" xbl:inherits="src=image"/>
         <xul:label class="descriptioncell-label" xbl:inherits="value=label,flex=flexlabel,crop,disabled,context" flex="1" dir="ltr" crop="center"/>
       </xul:hbox>
     </content>
   </binding>
 
   <!-- Message Pane Widgets -->
 
-  <!-- mail-toggle-headerfield: non email addrss headers which have a toggle associated with them (i.e. the subject).
-       use label to set the header name.
-       use headerValue to set the header value. -->
+  <!-- mail-toggle-headerfield: Non-email addrs headers which have a toggle
+       associated with them (i.e. the subject).
+         Use label to set the header name.
+         Use headerValue to set the header value. -->
   <binding id="mail-toggle-headerfield">
     <content>
-      <xul:hbox class="headerNameBox" align="start">
+      <xul:hbox class="headerNameBox" align="baseline">
         <xul:image class="expandHeaderViewButton" xbl:inherits="onclick=ontwistyclick"/>
         <xul:spacer flex="1"/>
         <xul:label class="headerName" xbl:inherits="value=label" control="headerValue"/>
       </xul:hbox>
-      <xul:textbox class="headerValue plain" anonid="headerValue" flex="1" readonly="true"/>
+      <xul:textbox class="headerValue" anonid="headerValue" flex="1" readonly="true"/>
     </content>
 
     <implementation>
       <property name="headerValue" onset="return document.getAnonymousElementByAttribute(this, 'anonid', 'headerValue').value = val;"/>
     </implementation>
   </binding>
 
   <!-- mail-headerfield: presents standard text header name & value pairs. Don't use this for email addresses.
        use label to set the header name.
        use headerValue to set the header value. -->
   <binding id="mail-headerfield">
     <content>
-      <xul:hbox class="headerNameBox" align="start">
+      <xul:hbox class="headerNameBox" align="baseline">
         <xul:label class="headerName" xbl:inherits="value=label" control="headerValue" flex="1"/>
       </xul:hbox>
-      <xul:textbox class="headerValue plain" anonid="headerValue" flex="1" readonly="true"/>
+      <xul:textbox class="headerValue" anonid="headerValue" flex="1" readonly="true"/>
     </content>
 
     <implementation>
       <property name="headerValue" onset="return document.getAnonymousElementByAttribute(this, 'anonid', 'headerValue').value = val;"/>
     </implementation>
   </binding>
 
   <binding id="mail-urlfield" extends="chrome://messenger/content/mailWidgets.xml#mail-headerfield">
     <content>
       <xul:hbox class="headerNameBox" align="start">
         <xul:label class="headerName" xbl:inherits="value=label" flex="1"/>
       </xul:hbox>
       <xul:label onclick="if (event.button != 2) openUILink(event.target.value, event);"
-                 class="headerValue plain text-link headerValueUrl"
+                 class="headerValue text-link headerValueUrl"
                  anonid="headerValue" flex="1" readonly="true" context="copyUrlPopup"/>
     </content>
   </binding>
 
   <binding id="mail-emailheaderfield">
     <content>
       <xul:hbox class="headerNameBox" align="start">
         <xul:label class="headerName" xbl:inherits="value=label" flex="1"/>
       </xul:hbox>
-      <xul:mail-emailaddress class="headerValue" anonid="emailAddressNode"/>
+      <xul:mail-emailaddress class="headerValue" containsEmail="true"
+                             anonid="emailAddressNode"/>
     </content>
 
     <implementation>
       <property name="emailAddressNode" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'emailAddressNode');"
         readonly="true"/>
     </implementation>
   </binding>
 
   <!-- multi-emailHeaderField: presents multiple emailheaderfields with a toggle -->
   <binding id="mail-multi-emailHeaderField">
     <content>
-      <xul:hbox class="headerNameBox" align="start" pack="end">
-        <xul:image class="addresstwisty" anonid="toggleIcon"
-                   collapsed="true" onclick="toggleWrap();"/>
-        <xul:label class="headerName" xbl:inherits="value=label"/>
-      </xul:hbox>
+        <xul:hbox class="headerNameBox" align="baseline" pack="end">
+          <xul:label class="headerName" xbl:inherits="value=label"/>
+        </xul:hbox>
 
-      <xul:hbox class="headerValueBox" anonid="longEmailAddresses" flex="1"
-                onoverflow="if (event.detail != 1) this.parentNode.toggleIcon.collapsed = false;"
-                onunderflow="if (event.detail != 1) this.parentNode.toggleIcon.collapsed = true;">
-        <xul:description class="headerValue" anonid="emailAddresses" flex="1"/>
-      </xul:hbox>
+        <xul:hbox class="headerValueBox" anonid="longEmailAddresses" flex="1"
+                  singleline="true"
+                  align="baseline"
+                  onoverflow="this.parentNode.overflow(event)"
+                  onunderflow="this.parentNode.underflow(event)">
+          <xul:description class="headerValue" containsEmail="true"
+                           anonid="emailAddresses" flex="1"
+                           orient="vertical" pack="start" />
+          <xul:label class="moreIndicator" value="&more.label;" anonid="more"
+                     collapsed="true"
+                     onclick="this.parentNode.parentNode.toggleWrap()"/>
+        </xul:hbox>
     </content>
 
     <implementation>
       <constructor>
         <![CDATA[
           this.mAddresses = new Array;
         ]]>
       </constructor>
 
+
+      <method name="overflow">
+        <parameter name="event"/>
+        <body>
+        <![CDATA[
+        if (event.detail != 1) this.more.collapsed = false;
+        ]]>
+        </body>
+      </method>
+
+      <method name="underflow">
+        <parameter name="event"/>
+        <body>
+        <![CDATA[
+          if (event.detail != 1) this.more.collapsed = true;
+        ]]>
+        </body>
+      </method>
+
       <field name="mAddresses"/>
       <!-- as a perf optimization we are going to keep a cache of email address nodes which we've
            created around for the lifetime of the widget. mSizeOfAddressCache controls how many of these
            elements we keep around -->
       <field name="mSizeOfAddressCache">3</field>
 
       <!-- addAddressView: a public method used to add an address to this widget.
            aAddresses is an object with 3 properties: displayName, emailAddress and fullAddress
@@ -277,17 +310,17 @@
 
             try
             {
               if ("AddExtraAddressProcessing" in top)
                 AddExtraAddressProcessing(aAddress.emailAddress, aEmailNode);
             }
             catch(ex)
             {
-              dump("AddExtraAddressProcessing failed: " + ex);
+              dump("AddExtraAddressProcessing failed: " + ex + "\n");
             }
           ]]>
         </body>
       </method>
 
       <!-- fillCachedAddresses: private method used to fill up any cached pre-existing
            emailAddress fields without creating new email address fields. Returns a remainder
            for the # of addresses which require new addresses being created.
@@ -352,34 +385,34 @@
             var remainder = this.fillCachedAddresses(aAddressesNode, aNumAddressesToShow);
             var index = numAddresses - remainder;
             while (index < numAddresses && index < aNumAddressesToShow)
             {
               var newAddressNode = document.createElement("mail-emailaddress");
               if (index)
               {
                 var textNode = document.createElement("text");
-                textNode.setAttribute("value", ", ");
+                textNode.setAttribute("value", ",");
                 textNode.setAttribute("class", "emailSeparator");
                 aAddressesNode.appendChild(textNode);
               }
 
               var itemInDocument = aAddressesNode.appendChild(newAddressNode);
               this.updateEmailAddressNode(itemInDocument, this.mAddresses[index]);
               index++;
             }
           ]]>
         </body>
       </method>
 
       <property name="emailAddresses" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'emailAddresses');"
         readonly="true"/>
       <property name="longEmailAddresses" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'longEmailAddresses');"
         readonly="true"/>
-      <property name="toggleIcon" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'toggleIcon');"
+      <property name="more" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'more');"
         readonly="true"/>
 
       <!-- buildView: public method used by callers when they are done adding all the email addresses to the widget
            aNumAddressesToShow: total # of addresses to show in the short view -->
       <method name="buildViews">
         <body>
           <![CDATA[
             this.fillAddressesNode(this.emailAddresses, -1);
@@ -408,23 +441,18 @@
             }
           ]]>
 	</body>
       </method>
 
       <method name="toggleWrap">
         <body>
           <![CDATA[
-            if (this.toggleIcon.hasAttribute("open")) {
-              this.toggleIcon.removeAttribute("open");
-              this.longEmailAddresses.setAttribute("singleline", "true");
-            } else {
-              this.toggleIcon.setAttribute("open", "true");
-              this.longEmailAddresses.removeAttribute("singleline");
-            }
+            this.more.collapsed = true;
+            this.longEmailAddresses.removeAttribute("singleline");
           ]]>
         </body>
       </method>
 
       <!-- internal method used to clear both our divs -->
       <method name="clearChildNodes">
         <parameter name="aParentNode"/>
         <body>
@@ -444,49 +472,47 @@
         </body>
       </method>
 
       <method name="clearHeaderValues">
         <body>
           <![CDATA[
             // clear out our local state
             this.mAddresses = new Array;
-            if (this.toggleIcon.hasAttribute("open"))
-              // no automatic overflow tracking in this case
-              this.toggleIcon.collapsed = true;
-            this.toggleIcon.removeAttribute("open");
             this.longEmailAddresses.setAttribute("singleline", "true");
             // remove anything inside of each of our labels....
             this.clearChildNodes(this.emailAddresses);
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="mail-emailaddress">
 #ifndef MOZ_THUNDERBIRD
     <content popup="emailAddressPopup" context="emailAddressPopup">
-      <xul:description anonid="emailValue" class="emailDisplayButton plain"
+      <xul:description anonid="emailValue" class="emailDisplayButton"
                  xbl:inherits="xbl:text=label,crop" flex="1"/>
       <xul:image class="emailDisplayImage" anonid="emailImage"
                  xbl:inherits="src=image"/>
     </content>
 #else
     <content>
-      <xul:description anonid="emailValue" class="emailDisplayButton plain"
+      <xul:description anonid="emailValue" class="emailDisplayButton"
+                       xbl:inherits="hascard"
                        context="emailAddressPopup" popup="emailAddressPopup"
-                       xbl:inherits="xbl:text=label,crop" flex="1"/>
-      <xul:image class="emailStar" anonid="emailStar"
-                 context="emailAddressPopup"
-                 onclick="onClickEmailStar(event, this.parentNode);"
-                 xbl:inherits="hascard,tooltiptext=tooltipstar"/>
-      <xul:image class="emailPopup" anonid="emailPopup"
-                 context="emailAddressPopup" popup="emailAddressPopup"
-                 xbl:inherits="hascard"/>
+                       flex="1">
+        <xul:label class="emaillabel" anonid="emaillabel"
+                   xbl:inherits="value=label,crop"/>
+        <xul:image class="emailStar" anonid="emailStar"
+                   context="emailAddressPopup"
+                   onmousedown="event.preventDefault();"
+                   onclick="onClickEmailStar(event, this.parentNode.parentNode);"
+                   xbl:inherits="hascard,tooltiptext=tooltipstar"/>
+      </xul:description>
     </content>
 #endif
 
     <implementation>
       <property name="label"      onset="this.getPart('emailValue').setAttribute('label',val); return val;"
                                   onget="return this.getPart('emailValue').getAttribute('label');"/>
       <property name="crop"       onset="this.getPart('emailValue').setAttribute('crop',val); return val;"
                                   onget="return this.getPart('emailValue').getAttribute('crop');"/>
@@ -649,17 +675,17 @@
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="mail-messageid">
     <content context="messageIdContext" onclick="MessageIdClick(this, event);">
-      <xul:label anonid="messageIdValue" class="messageIdDisplayButton plain"
+      <xul:label anonid="messageIdValue" class="messageIdDisplayButton"
                  xbl:inherits="value=label"/>
       <xul:image class="messageIdDisplayImage" anonid="messageIdImage"/>
     </content>
 
     <implementation>
       <property name="label"      onset="this.getPart().setAttribute('label',val); return val;"
                                   onget="return this.getPart('messageIdValue').getAttribute('label');"/>
 
@@ -673,17 +699,17 @@
   </binding>
 
   <!-- Header field for showing the tags associated with a message -->
   <binding id="mail-headerfield-tags">
     <content>
       <xul:hbox class="headerNameBox" align="start">
         <xul:label class="headerName" xbl:inherits="value=label" flex="1"/>
       </xul:hbox>
-      <xul:label class="headerValue plain" anonid="headerValue" flex="1"/>
+      <xul:label class="headerValue" anonid="headerValue" flex="1"/>
     </content>
 
     <implementation>
       <property name="headerValue" onset="return this.buildTags(val);"/>
       <method name="buildTags">
         <parameter name="aTags"/>
         <body>
           <![CDATA[
@@ -2079,9 +2105,49 @@
           }
 
           if (gAlertListener)
             gAlertListener.observe(null, "alertclickcallback", "");
         ]]>
       </handler>
     </handlers>
   </binding>
+
+  <binding id="header-view-button-box">
+    <content>
+      <!-- It might be nice to allow a UI for customization of these buttons -->
+      <xul:hbox align="start">
+
+        <!-- XXXdmose need to move these commands to a controller, either
+             on the header view, the message pane, or the default
+             controller -->
+
+        <!-- XXXdmose need to audit our shortcut/a11y setup and make sure
+             these buttons are doing the right thing -->
+
+       <xul:button anonid="hdrReplyButton" label="&replyButton.label;"
+                   oncommand="MsgReplyMessage(event);" observes="button_reply"
+                   class="msgHeaderView-button hdrReplyButton"/>
+       <xul:button anonid="hdrForwardButton" label="&forwardButton.label;"
+                   oncommand="MsgForwardMessage(event);"
+                   observes="button_forward" class="msgHeaderView-button hdrForwardButton"/>
+       <xul:button anonid="hdrJunkButton" label="&junkButton.label;"
+                   observes="button_junk" class="msgHeaderView-button hdrJunkButton"
+                   oncommand="goDoCommand('button_junk')"/>
+       <xul:button anonid="hdrTrashButton" tooltiptext="&trashButton.tooltiptext;"
+                   observes="button_delete" trash="true"
+                   class="msgHeaderView-button hdrTrashButton" 
+                   oncommand="goDoCommand(event.shiftKey ? 'cmd_shiftDelete' : 'cmd_delete')"/>
+      </xul:hbox>
+    </content>
+
+    <implementation>
+      <method name="getButton">
+        <parameter name="id"/>
+        <body>
+          <![CDATA[
+          return document.getAnonymousElementByAttribute(this, 'anonid', id);
+          ]]>
+        </body>
+      </method>
+    </implementation>
+  </binding>
 </bindings>