Message reader view overhaul, part I (bug 449691), ui-r=clarkbw, r=Standard8
authorDan Mosedale <dmose@mozilla.org>
Tue, 16 Sep 2008 17:14:17 -0700
changeset 350 bc29303430f462870e6f28087e8a75290e6e85ce
parent 349 5ad568b3a57beb8e190f0dbc9b0ab31a1fe1cb69
child 351 ad0d92b8cfa845af9e40caf40d8feeabe5862303
push idunknown
push userunknown
push dateunknown
reviewersclarkbw, Standard8
bugs449691
Message reader view overhaul, part I (bug 449691), ui-r=clarkbw, r=Standard8
mail/base/content/mailWindowOverlay.xul
mail/base/content/messageWindow.xul
mail/base/content/messenger.xul
mail/base/content/msgHdrViewOverlay.js
mail/base/content/msgHdrViewOverlay.xul
mail/base/jar.mn
mail/locales/en-US/chrome/messenger/messenger.dtd
mail/locales/en-US/chrome/messenger/msgHdrViewOverlay.dtd
mail/themes/pinstripe/mail/messageHeader.css
mail/themes/pinstripe/mail/primaryToolbar.css
mail/themes/qute/mail/messageHeader.css
mailnews/base/resources/content/mailWidgets.xml
--- a/mail/base/content/mailWindowOverlay.xul
+++ b/mail/base/content/mailWindowOverlay.xul
@@ -1819,18 +1819,18 @@
      URL.
 -->
 <deck id="msgNotificationBar" selectedIndex="0" collapsed="true">
   <hbox id="msgNotificationNoStatus"/>
 
   <hbox id="phishingBar" class="msgNotificationBar" align="center">
     <image id="phishingBarImage"/>
     <vbox flex="1">
-      <description flex="1" class="msgNotificationBarText">&phishingBarMessage1.label;</description>
-      <label id="reportPhishingError" value="&reportPhishingError.label;" class="msgNotificaton-smallText text-link" collapsed="true"/>
+      <description flex="1" class="msgNotificationBarText">&phishingBarMessage2.label;</description>
+      <label id="reportPhishingError" value="&reportPhishingError1.label;" class="msgNotificaton-smallText text-link" collapsed="true"/>
     </vbox>
     <button label="&removePhishingBarButton1.label;" oncommand="IgnorePhishingWarning();"/>
   </hbox>
 
   <hbox id="junkBar" class="msgNotificationBar" align="center">
     <image id="junkBarImage"/>
     <description flex="1" class="msgNotificationBarText">&junkBarMessage1.label;</description>
     <button label="&junkBarButton1.label;" oncommand="JunkSelectedMessages(false);"/>
@@ -1838,17 +1838,17 @@
 
   <hbox id="remoteContentBar" class="msgNotificationBar" align="center">
     <image id="remoteContentImage"/>
     <vbox flex="1">
       <description class="msgNotificationBarText">&remoteContentMessage1.label;</description>
       <label id="allowRemoteContentForAuthorDesc" class="msgNotificaton-smallText text-link"
              onclick="allowRemoteContentForSender();"/>
     </vbox>
-    <button label="&loadRemoteContentButton1.label;" oncommand="LoadMsgWithRemoteContent();"/>
+    <button label="&loadRemoteContentButton2.label;" oncommand="LoadMsgWithRemoteContent();"/>
   </hbox>
 </deck>
 
 <statusbar class="chromeclass-status" id="status-bar">
   <hbox insertbefore="unreadMessageCount"  id="statusTextBox" flex="1">
     <statusbarpanel id="offline-status" class="statusbarpanel-iconic" oncommand="MailOfflineMgr.toggleOfflineStatus();"/>
     <statusbarpanel id="statusText" label="&statusText.label;" flex="1"/>
     <statusbarpanel class="statusbarpanel-progress" collapsed="true" id="statusbar-progresspanel">
--- a/mail/base/content/messageWindow.xul
+++ b/mail/base/content/messageWindow.xul
@@ -153,18 +153,19 @@
   </toolbox>
 
  <!-- msg header view -->
   <vbox id="messagepanebox" flex="3" persist="collapsed"
         ondragover="nsDragAndDrop.dragOver(event, messagepaneObserver);"
         ondragdrop="nsDragAndDrop.drop(event, messagepaneObserver);"
         ondragexit="nsDragAndDrop.dragExit(event, messagepaneObserver);">
 
+    <hbox id="msgHeaderView"/>
+    <hbox id="editMessageBox"/>
     <deck id="msgNotificationBar"/>
-    <hbox id="msgHeaderView"/>
 
     <!-- message view -->
     <browser id="messagepane" context="messagePaneContext"
              style="height: 0px; min-height: 1px" flex="1" name="messagepane"
              disablesecurity="true" disablehistory="true" type="content-primary"
              onresize="return messagePaneOnResize(event);" autofind="false"
              src="about:blank" onclick="return contentAreaClick(event);" />
     <splitter id="attachment-splitter" collapse="after" resizebefore="closest" resizeafter="closest" collapsed="true"/>
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -409,18 +409,20 @@
         </deck> <!-- displayDeck -->
 
       <!-- if you change this id, please change GetThreadAndMessagePaneSplitter() and MsgToggleMessagePane() -->
         <splitter id="threadpane-splitter" collapse="after" persist="state" collapsed="true"
                   onmouseup="OnMouseUpThreadAndMessagePaneSplitter()"/>
 
         <vbox id="messagepanebox" flex="2" minheight="100" height="200"
               minwidth="100" width="200" persist="height width">
+
+          <hbox id="msgHeaderView"/>
+          <hbox id="editMessageBox"/>
           <deck id="msgNotificationBar"/>
-          <hbox id="msgHeaderView"/>
           <browser id="messagepane" context="messagePaneContext" autofind="false"
                    minheight="1" flex="1" name="messagepane"
                    disablehistory="true" type="content-primary" src="about:blank"
                    onresize="return messagePaneOnResize(event);"
                    disablesecurity="true" onclick="return contentAreaClick(event);"/>
           <splitter id="attachment-splitter" collapse="after" resizebefore="closest" resizeafter="closest" collapsed="true"/>
           <hbox id="attachmentView"/>
           <findbar id="FindToolbar" browserid="messagepane"/>
--- a/mail/base/content/msgHdrViewOverlay.js
+++ b/mail/base/content/msgHdrViewOverlay.js
@@ -93,28 +93,35 @@ var gMessageListeners = new Array();
 // fields.
 var gCollapsedHeaderList = [ {name:"subject", outputFunction:updateHeaderValueInTextNode},
                              {name:"from", useToggle:true, useShortView:true, outputFunction:OutputEmailAddresses},
                              {name:"date", outputFunction:updateHeaderValueInTextNode}];
 
 // 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:"sender", outputFunction:OutputEmailAddresses},
                             {name:"reply-to", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"date"},
                             {name:"to", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"cc", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"bcc", useToggle:true, outputFunction:OutputEmailAddresses},
                             {name:"newsgroups", outputFunction:OutputNewsgroups},
-                            {name:"references", outputFunction:OutputMessageIds},
                             {name:"followup-to", outputFunction:OutputNewsgroups},
                             {name:"content-base"},
                             {name:"tags"} ];
 
+// XXXdmose need to decide if we want to keep the special elements for these
+// headers when users manually add them to their "display these extended
+// headers" pref.  If so, we'll need to write code that actually uses the below
+// array.  If not, we should get rid of the array as well as the XUL elements.
+// 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"];
 
 // 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.
@@ -203,17 +210,17 @@ function initializeHeaderViewTables()
       var headerName = gExpandedHeaderList[index].name;
       gExpandedHeaderView[headerName] = new createHeaderEntry('expanded', gExpandedHeaderList[index]);
     }
 
     var extraHeaders = prefBranch.getCharPref("mailnews.headers.extraExpandedHeaders").split(' ');
     for (index = 0; index < extraHeaders.length; index++)
     {
       var extraHeader = extraHeaders[index];
-      gExpandedHeaderView[extraHeader.toLowerCase()] = new createNewHeaderView(extraHeader, extraHeader + ':');
+      gExpandedHeaderView[extraHeader.toLowerCase()] = new createNewHeaderView(extraHeader, extraHeader);
     }
     if (prefBranch.getBoolPref("mailnews.headers.showOrganization"))
     {
       var organizationEntry = {name:"organization", outputFunction:updateHeaderValue};
       gExpandedHeaderView[organizationEntry.name] = new createHeaderEntry('expanded', organizationEntry);
     }
 
     if (prefBranch.getBoolPref("mailnews.headers.showUserAgent"))
@@ -363,17 +370,17 @@ var messageHeaderSink = {
       }
 
       ClearCurrentHeaders();
       gBuiltExpandedView = false;
       gBuiltCollapsedView = false;
       gBuildAttachmentsForCurrentMsg = false;
       gBuildAttachmentPopupForCurrentMsg = true;
       ClearAttachmentList();
-      ClearEditMessageButton();
+      ClearEditMessageBox();
       gMessageNotificationBar.clearMsgNotifications();
 
       for (index in gMessageListeners)
         gMessageListeners[index].onStartHeaders();
     },
 
     onEndHeaders: function()
     {
@@ -381,17 +388,17 @@ var messageHeaderSink = {
       // trigger a reflow!
       ClearHeaderView(gCollapsedHeaderView);
       ClearHeaderView(gExpandedHeaderView);
 
       EnsureSubjectValue(); // make sure there is a subject even if it's empty so we'll show the subject and the twisty
 
       ShowMessageHeaderPane();
       UpdateMessageHeaders();
-      ShowEditMessageButton();
+      ShowEditMessageBox();
 
       for (index in gMessageListeners)
         gMessageListeners[index].onEndHeaders();
     },
 
     processHeaders: function(headerNameEnumerator, headerValueEnumerator, dontCollectAddress)
     {
       this.onStartHeaders();
@@ -755,17 +762,16 @@ function updateHeaderViews()
 }
 
 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...
   document.getElementById('msgHeaderViewDeck').selectedPanel.collapsed = true;
-
   UpdateMessageHeaders();
 
   // select the new panel.
   document.getElementById('msgHeaderViewDeck').selectedIndex = gCollapsedHeaderViewMode ? 0 : 1;
 
   // 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...
   document.getElementById('msgHeaderViewDeck').selectedPanel.collapsed = false;
@@ -850,18 +856,19 @@ function UpdateMessageHeaders()
         // fill in a headerEntry
         if (headerName == "message-id" || headerName == "in-reply-to")
         {
           var messageIdEntry = {name:headerName, outputFunction:OutputMessageIds};
           gExpandedHeaderView[headerName] = new createHeaderEntry('expanded', messageIdEntry);
         }
         else
         {
-          gExpandedHeaderView[headerName] = new createNewHeaderView(headerName,
-                                                                    currentHeaderData[headerName].headerName + ':');
+          gExpandedHeaderView[headerName] = 
+            new createNewHeaderView(headerName, 
+                                    currentHeaderData[headerName].headerName);
         }
 
         headerEntry = gExpandedHeaderView[headerName];
       }
     } // if we are in expanded view....
 
     if (headerEntry)
     {
@@ -913,16 +920,18 @@ function HideMessageHeaderPane()
 {
   document.getElementById('msgHeaderView').collapsed = true;
 
   // disable the File/Attachments menuitem
   document.getElementById("fileAttachmentMenu").setAttribute("disabled", "true");
   // disable the attachment box
   document.getElementById("attachmentView").collapsed = true;
   document.getElementById("attachment-splitter").collapsed = true;
+  
+  ClearEditMessageBox();
 }
 
 function OutputNewsgroups(headerEntry, headerValue)
 {
   headerValue = headerValue.replace(/,/g,", ");
   updateHeaderValue(headerEntry, headerValue);
 }
 
@@ -1701,34 +1710,34 @@ function ClearAttachmentList()
 
   // clear selection
   var list = document.getElementById('attachmentList');
 
   while (list.hasChildNodes())
     list.removeChild(list.lastChild);
 }
 
-function ShowEditMessageButton()
+function ShowEditMessageBox()
 {
   // it would be nice if we passed in the msgHdr from the back end
   var msgHdr;
   try
   {
     msgHdr = gDBView.hdrForFirstSelectedMessage;
   }
   catch (ex)
   {
     return;
   }
 
   if (IsSpecialFolder(msgHdr.folder, MSG_FOLDER_FLAG_DRAFTS, true))
     document.getElementById("editMessageBox").collapsed = false;
 }
 
-function ClearEditMessageButton()
+function ClearEditMessageBox()
 {
   var editBox = document.getElementById("editMessageBox");
   if (editBox)
     editBox.collapsed = true;
 }
 
 // CopyWebsiteAddress takes the website address title button, extracts
 // the website address we stored in there and copies it to the clipboard
--- a/mail/base/content/msgHdrViewOverlay.xul
+++ b/mail/base/content/msgHdrViewOverlay.xul
@@ -1,53 +1,51 @@
 <?xml version="1.0"?>
 
-# ***** BEGIN LICENSE BLOCK *****
-# Version: MPL 1.1/GPL 2.0/LGPL 2.1
-#
-# The contents of this file are subject to the Mozilla Public License Version
-# 1.1 (the "License"); you may not use this file except in compliance with
-# the License. You may obtain a copy of the License at
-# http://www.mozilla.org/MPL/
-#
-# Software distributed under the License is distributed on an "AS IS" basis,
-# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
-# for the specific language governing rights and limitations under the
-# License.
-#
-# The Original Code is Mozilla Communicator client code, released
-# March 31, 1998.
-#
-# The Initial Developer of the Original Code is
-# Netscape Communications Corporation.
-# Portions created by the Initial Developer are Copyright (C) 1998-1999
-# the Initial Developer. All Rights Reserved.
-#
-# Contributor(s):
-#
-# Alternatively, the contents of this file may be used under the terms of
-# either the GNU General Public License Version 2 or later (the "GPL"), or
-# the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
-# in which case the provisions of the GPL or the LGPL are applicable instead
-# of those above. If you wish to allow use of your version of this file only
-# under the terms of either the GPL or the LGPL, and not to allow others to
-# use your version of this file under the terms of the MPL, indicate your
-# decision by deleting the provisions above and replace them with the notice
-# and other provisions required by the GPL or the LGPL. If you do not delete
-# the provisions above, a recipient may use your version of this file under
-# the terms of any one of the MPL, the GPL or the LGPL.
-#
-# ***** END LICENSE BLOCK *****
+<!-- ***** BEGIN LICENSE BLOCK *****
+   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
+   -
+   - The contents of this file are subject to the Mozilla Public License Version
+   - 1.1 (the "License"); you may not use this file except in compliance with
+   - the License. You may obtain a copy of the License at
+   - http://www.mozilla.org/MPL/
+   -
+   - Software distributed under the License is distributed on an "AS IS" basis,
+   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+   - for the specific language governing rights and limitations under the
+   - License.
+   -
+   - The Original Code is Mozilla Communicator client code.
+   -
+   - The Initial Developer of the Original Code is
+   - Netscape Communications Corporation.
+   - Portions created by the Initial Developer are Copyright (C) 1998-1999
+   - the Initial Developer. All Rights Reserved.
+   -
+   - Contributor(s):
+   -
+   - Alternatively, the contents of this file may be used under the terms of
+   - either the GNU General Public License Version 2 or later (the "GPL"), or
+   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+   - in which case the provisions of the GPL or the LGPL are applicable instead
+   - of those above. If you wish to allow use of your version of this file only
+   - under the terms of either the GPL or the LGPL, and not to allow others to
+   - use your version of this file under the terms of the MPL, indicate your
+   - decision by deleting the provisions above and replace them with the notice
+   - and other provisions required by the LGPL or the GPL. If you do not delete
+   - the provisions above, a recipient may use your version of this file under
+   - the terms of any one of the MPL, the GPL or the LGPL.
+   -
+   - ***** END LICENSE BLOCK ***** -->
 
 <!DOCTYPE overlay SYSTEM "chrome://messenger/locale/msgHdrViewOverlay.dtd">
 
 <?xml-stylesheet href="chrome://messenger/skin/messageHeader.css" type="text/css"?>
 
-<overlay xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <script src="chrome://messenger/content/msgHdrViewOverlay.js"/>
 
 <!-- drag and drop -->
 <script type="application/x-javascript" src="chrome://global/content/nsDragAndDrop.js"/>
 
 <stringbundleset id="stringbundleset">
   <stringbundle id="bundle_messenger" src="chrome://messenger/locale/messenger.properties"/>
@@ -96,88 +94,184 @@
   <menuitem id="file-deleteAllAttachments" label="&deleteAllAttachmentsCmd.label;" 
     accesskey="&deleteAllAttachmentsCmd.accesskey;" oncommand="HandleAllAttachments('delete');" />
 </popup>
 
 <popup id="copyUrlPopup" popupanchor="bottomleft">
   <menuitem label="&copyLinkCmd.label;" accesskey="&copyLinkCmd.accesskey;" oncommand="CopyWebsiteAddress(document.popupNode)"/>
 </popup>
 
-<hbox id="msgHeaderView" collapsed="true">
+<hbox id="msgHeaderView" collapsed="true" class="main-header-area">
   <deck id="msgHeaderViewDeck" persist="selectedIndex" selectedIndex="1" flex="1">
-    <!-- the message pane consists of 3 'boxes'. Box #1 is a grid, showing a brief view of the headers -->
+    <!-- the message pane consists of 4 'boxes'. Box #1 is a grid, showing a brief view of the headers -->
     <grid id="collapsedHeaderView" class="header-part1 headerContainer" flex="1">
       <rows>
         <row flex="1"/>
       </rows>
       <columns>
         <column class="collapsedToggleHdrBox">
-          <hbox align="start">
+          <hbox align="baseline">
             <image id="toggleHeaderView" class="collapsedHeaderViewButton"
               onclick="ToggleHeaderView();"/>
           </hbox>
         </column>
 
         <column id="collapsedsubjectBox" collapsed="true" flex="1">
-          <hbox>
-            <label class="collapsedHeaderDisplayName" value="&subjectField.label;" control="collapsedsubjectValue"/>
+          <hbox align="baseline">
+            <label class="headerName" value="&subjectField2.label;" control="collapsedsubjectValue"/>
             <textbox id="collapsedsubjectValue" class="collapsedHeaderValue plain" readonly="true" crop="right" appendoriginalclass="true" flex="1"/>
           </hbox>
         </column>
 
         <column id="collapsedfromBox" flex="1">
-          <hbox align="start">
-            <mail-multi-emailHeaderField id="collapsedfromValue" class="collapsedHeaderDisplayName" label="&fromField.label;" collapsed="true" flex="1"/>
+          <hbox align="baseline">
+            <mail-multi-emailHeaderField id="collapsedfromValue"
+                                         class="collapsedHeaderDisplayName"
+                                         label="&fromField2.label;" 
+                                         collapsed="true" flex="1"/>
           </hbox>
         </column>
 
         <column id = "collapseddateBox" collapsed="true">
-          <hbox align="start">
+          <hbox align="baseline">
             <textbox id="collapseddateValue" class="collapsedHeaderValue plain" readonly="true"/>
           </hbox>
         </column>
       </columns>
     </grid>
 
     <!-- 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">
-        <mail-toggle-headerfield id="expandedsubjectBox" class="subjectvalue" label="&subjectField.label;" ontwistyclick="ToggleHeaderView();" collapsed="true"/>
+
+        <hbox id="expandedHeadersTopBox" align="end" pack="end">
+
+          <mail-multi-emailHeaderField id="expandedfromBox"
+                                       label="&fromField2.label;"
+                                       collapsed="true"/>
+
+          <spacer id="fromAndToolbarSpacer" flex="1"/>
+
+          <!-- This might want to become a customizable toolbar at some
+               point -->
+          <hbox id="expandedHeadersButtonBox">
 
-        <mail-multi-emailHeaderField id="expandedfromBox" label="&fromField.label;" collapsed="true"/>
-        <mail-emailheaderfield id="expandedsenderBox" label="&senderField.label;" collapsed="true"/>
-        <mail-headerfield id="expandedorganizationBox" label="&organizationField.label;" collapsed="true"/>
-        <mail-multi-emailHeaderField id="expandedreply-toBox" label="&replyToField.label;" collapsed="true"/>
+            <!-- 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 -->
 
-        <mail-headerfield id="expandeddateBox" label="&dateField.label;" collapsed="true"/>
+            <button id="replyButton" label="&replyButton.label;"
+                    oncommand="MsgReplyMessage(null);" observes="button_reply"
+                    class="msgHeaderView-button"/>
+            <button id="forwardButton" label="&forwardButton.label;"
+                    oncommand="MsgForwardMessage(null);"
+                    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>
+        </hbox>
 
-        <mail-multi-emailHeaderField id="expandedtoBox"  label="&toField.label;"  collapsed="true"/>
-        <mail-multi-emailHeaderField id="expandedccBox"  label="&ccField.label;"  collapsed="true"/>
-        <mail-multi-emailHeaderField id="expandedbccBox" label="&bccField.label;" collapsed="true"/>
+        <mail-headerfield id="expandedsubjectBox" label="&subjectField2.label;"
+                          collapsed="true"/>
 
-        <mail-headerfield id="expandednewsgroupsBox"  label="&newsgroupsField.label;" collapsed="true"/>
-        <mail-headerfield id="expandedfollowup-toBox" label="&followupToField.label;" collapsed="true"/>
-        <mail-messageids-headerfield id="expandedmessage-idBox" label="&messageIdField.label;" collapsed="true"/>
-        <mail-messageids-headerfield id="expandedin-reply-toBox" label="&inReplyToField.label;" collapsed="true"/>
-        <mail-messageids-headerfield id="expandedreferencesBox" label="&referencesField.label;" collapsed="true"/>
-        <mail-tagfield    id="expandedtagsBox" label="&tagsHdr.label;" collapsed="true"/>
-        <mail-urlfield    id="expandedcontent-baseBox" label="&originalWebsite.label;" collapsed="true"/>    
-        <mail-headerfield id="expandeduser-agentBox"  label="&userAgentField.label;"  collapsed="true"/>
+        <hbox id="otherHeadersAndButtonsBox"> 
+          <vbox id="variousHeadersBox">
+            <mail-headerfield id="expandedorganizationBox"
+                              label="&organizationField2.label;"
+                              collapsed="true"/>
+            <mail-emailheaderfield id="expandedsenderBox"
+                                   label="&senderField2.label;"
+                                   collapsed="true"/>
+            <mail-multi-emailHeaderField id="expandedreply-toBox"
+                                         label="&replyToField2.label;"
+                                         collapsed="true"/>
+            <mail-multi-emailHeaderField id="expandedtoBox"
+                                         label="&toField2.label;"
+                                         collapsed="true"/>
+            <mail-multi-emailHeaderField id="expandedccBox"
+                                         label="&ccField2.label;"
+                                         collapsed="true"/>
+            <mail-multi-emailHeaderField id="expandedbccBox" 
+                                         label="&bccField2.label;"
+                                         collapsed="true"/>
+            <mail-headerfield id="expandednewsgroupsBox"
+                              label="&newsgroupsField2.label;"
+                              collapsed="true"/>
+            <mail-headerfield id="expandedfollowup-toBox"
+                              label="&followupToField2.label;"
+                              collapsed="true"/>
+            <mail-headerfield id="expandeddateBox" label="&dateField2.label;"
+                              collapsed="true"/>
+            <mail-messageids-headerfield id="expandedmessage-idBox"
+                                         label="&messageIdField2.label;"
+                                         collapsed="true"/>
+            <mail-messageids-headerfield id="expandedin-reply-toBox"
+                                         label="&inReplyToField2.label;"
+                                         collapsed="true"/>
+            <mail-messageids-headerfield id="expandedreferencesBox"
+                                         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>
+
+          <spacer flex="1"/>
+
+          <!-- perhaps this should be a customizable toolbar too -->
+          <vbox id="hideDetailsBox" align="end">
+            <button type="menu" id="otherActionsButton"
+                    label="&otherActionsButton.label;"
+                    class="msgHeaderView-button">
+              <menupopup id="otherActionsPopup">
+                <menuitem id="viewSourceMenuItem"
+                          label="&viewSourceMenuItem.label;"
+                          accesskey="&viewSourceMenuItem.accesskey;"
+                          oncommand="MsgViewPageSource();" />
+                <menuitem id="saveAsMenuItem" label="&saveAsMenuItem.label;"
+                          accesskey="&saveAsMenuItem.accesskey;"
+                          oncommand="MsgSaveAsFile();" />
+              </menupopup>
+            </button>
+            <button id="hideDetailsButton" label="&hideDetailsButton.label;"
+                    onclick="ToggleHeaderView();"
+                    class="msgHeaderView-button"/>
+          </vbox>
+        </hbox>
       </vbox>
-
-      <vbox id="editMessageBox" class="header-part1" originalclass="header-part1" collapsed="true">
-        <spacer flex="1"/>
-        <button id="editMessageButton" label="&editMessage.label;" oncommand="MsgComposeDraftMessage()"/>
-        <spacer flex="1"/>
-      </vbox>
-    </hbox>   
+    </hbox>
   </deck>
 </hbox>
 
-<!-- the message pane consists of 3 'boxes'. Box #3 is the attachment box which can be toggled into a slim or an expanded view -->   
+<hbox id="editMessageBox" pack="start" align="center" collapsed="true"
+      class="main-header-area">
+  <label id="editMessageDescription" control="editMessageButton"
+         value="&editMessageDescription.label;"/>
+  <button id="editMessageButton" label="&editMessageButton.label;"
+          oncommand="MsgComposeDraftMessage()" class="msgHeaderView-button"/>
+</hbox>
+
+<!-- the message pane consists of 4 'boxes'. Box #4 is the attachment box which
+     can be toggled into a slim or an expanded view -->
 <hbox id="attachmentView" collapsed="true">
   <description selectable="true" id="attachmentList" flex="1"
                seltype="multiple" disableKeyNavigation="true"
                onclick="attachmentListClick(event);" ondraggesture="nsDragAndDrop.startDrag(event,attachmentAreaDNDObserver);"
                ondragover="nsDragAndDrop.dragOver(event, attachmentAreaDNDObserver);" context="attachmentListContext">
   </description>
 </hbox>
 
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@@ -10,17 +10,17 @@ messenger.jar:
 *   content/messenger/mailOverlay.xul               (content/mailOverlay.xul)
 *   content/messenger/messageWindow.xul             (content/messageWindow.xul)
 *   content/messenger/messageWindow.js              (content/messageWindow.js)
 *   content/messenger/mailContextMenus.js           (content/mailContextMenus.js)
 *   content/messenger/messenger.xul                 (content/messenger.xul)
 *   content/messenger/hiddenWindow.xul              (content/hiddenWindow.xul)
 *   content/messenger/hiddenWindow.js               (content/hiddenWindow.js)
 *   content/messenger/msgHdrViewOverlay.js          (content/msgHdrViewOverlay.js)
-*   content/messenger/msgHdrViewOverlay.xul         (content/msgHdrViewOverlay.xul)
+    content/messenger/msgHdrViewOverlay.xul         (content/msgHdrViewOverlay.xul)
     content/messenger/editContactOverlay.js         (content/editContactOverlay.js)
 *   content/messenger/editContactOverlay.xul        (content/editContactOverlay.xul)
 *   content/messenger/msgMail3PaneWindow.js         (content/msgMail3PaneWindow.js)
 *   content/messenger/mail3PaneWindowCommands.js    (content/mail3PaneWindowCommands.js)
 *   content/messenger/mailCommands.js               (content/mailCommands.js)
 *   content/messenger/mailCore.js                   (content/mailCore.js)
 *   content/messenger/commandglue.js                (content/commandglue.js)
 *   content/messenger/widgetglue.js                 (content/widgetglue.js)
--- a/mail/locales/en-US/chrome/messenger/messenger.dtd
+++ b/mail/locales/en-US/chrome/messenger/messenger.dtd
@@ -622,22 +622,22 @@
 
 <!-- Junk Bar -->
 <!ENTITY junkBarMessage1.label "Junk Mail">
 <!ENTITY junkBarButton1.label "Not Junk">
 <!ENTITY junkInfoButton.label "?">
 
 <!-- Remote Content Bar -->
 <!ENTITY remoteContentMessage1.label "To protect your privacy, remote images have been blocked.">
-<!ENTITY loadRemoteContentButton1.label "Load Images">
+<!ENTITY loadRemoteContentButton2.label "Display Images Now">
 
 <!-- Phishing Bar -->
-<!ENTITY phishingBarMessage1.label "Suspected Email Scam">
+<!ENTITY phishingBarMessage2.label "This message may be a scam.">
 <!ENTITY removePhishingBarButton1.label "Ignore Warning">
-<!ENTITY reportPhishingError.label "This isn't an email scam">
+<!ENTITY reportPhishingError1.label "This message doesn't appear to be a scam.">
 
 <!-- Quick Search Bar -->
 <!ENTITY quickSearchCmd.key "k">
 
 <!-- Message Header Context Menu -->
 <!ENTITY AddToAddressBook.label "Add to Address Book…">
 <!ENTITY AddToAddressBook.accesskey "B">
 <!ENTITY AddDirectlyToAddressBook.label "Add to Address Book">
--- a/mail/locales/en-US/chrome/messenger/msgHdrViewOverlay.dtd
+++ b/mail/locales/en-US/chrome/messenger/msgHdrViewOverlay.dtd
@@ -30,38 +30,51 @@
  use your version of this file under the terms of the MPL, indicate your
  decision by deleting the provisions above and replace them with the notice
  and other provisions required by the GPL or the LGPL. If you do not delete
  the provisions above, a recipient may use your version of this file under
  the terms of any one of the MPL, the GPL or the LGPL.
 
  ***** END LICENSE BLOCK ***** -->
 
-<!ENTITY toField.label "To: ">
-<!ENTITY fromField.label "From: ">
-<!ENTITY senderField.label "Sender: ">
-<!ENTITY organizationField.label "Organization: ">
-<!ENTITY replyToField.label "Reply-To: ">
+<!ENTITY toField2.label "to ">
+<!ENTITY fromField2.label "from ">
+<!ENTITY senderField2.label "sender ">
+<!ENTITY organizationField2.label "organization ">
+<!ENTITY replyToField2.label "reply-to ">
 
-<!ENTITY subjectField.label "Subject: ">
-<!--# LOCALIZATION NOTE (ccField.label): DONT_TRANSLATE -->
-<!ENTITY ccField.label "Cc: ">
-<!ENTITY bccField.label "Bcc: ">
-<!ENTITY newsgroupsField.label "Newsgroups: ">
-<!ENTITY followupToField.label "Followup-To: ">
-<!ENTITY tagsHdr.label "Tags: ">
-<!ENTITY dateField.label "Date: ">
-<!ENTITY userAgentField.label "User-Agent: ">
-<!ENTITY referencesField.label "References: ">
-<!ENTITY messageIdField.label "Message-ID: ">
-<!ENTITY inReplyToField.label "In-Reply-To: ">
-<!ENTITY originalWebsite.label "Website: ">
+<!ENTITY subjectField2.label "subject ">
+<!--# LOCALIZATION NOTE (ccField2.label): DONT_TRANSLATE -->
+<!ENTITY ccField2.label "cc ">
+<!ENTITY bccField2.label "bcc ">
+<!ENTITY newsgroupsField2.label "newsgroups ">
+<!ENTITY followupToField2.label "followup-to ">
+<!ENTITY tagsHdr2.label "tags ">
+<!ENTITY dateField2.label "date ">
+<!ENTITY userAgentField2.label "user-agent ">
+<!ENTITY referencesField2.label "references ">
+<!ENTITY messageIdField2.label "message-id ">
+<!ENTITY inReplyToField2.label "in-reply-to ">
+<!ENTITY originalWebsite2.label "website ">
 <!ENTITY saveAll.label "Save All…">
 
-<!ENTITY editMessage.label "Edit Draft…">
+<!ENTITY editMessageDescription.label "This is a draft message">
+<!ENTITY editMessageButton.label "Edit…">
+<!ENTITY replyButton.label "reply…">
+<!ENTITY forwardButton.label "forward…">
+<!ENTITY junkButton.label "mark as junk">
+<!ENTITY trashButton.tooltiptext "delete">
+
+<!ENTITY otherActionsButton.label "other actions">
+<!ENTITY saveAsMenuItem.label "save as…">
+<!ENTITY saveAsMenuItem.accesskey "S">
+<!ENTITY viewSourceMenuItem.label "view source…">
+<!ENTITY viewSourceMenuItem.accesskey "V">
+
+<!ENTITY hideDetailsButton.label "hide details">
 
 <!ENTITY openAttachmentCmd.label    "Open">
 <!ENTITY openAttachmentCmd.accesskey    "O">
 <!ENTITY saveAsAttachmentCmd.label    "Save As…">
 <!ENTITY saveAsAttachmentCmd.accesskey    "A">
 <!ENTITY detachAttachmentCmd.label    "Detach…">
 <!ENTITY deleteAttachmentCmd.label    "Delete">
 <!ENTITY saveAllAttachmentsCmd.label    "Save All…">
--- a/mail/themes/pinstripe/mail/messageHeader.css
+++ b/mail/themes/pinstripe/mail/messageHeader.css
@@ -36,29 +36,70 @@
  * ***** END LICENSE BLOCK ***** */
 
 /* ===== messageHeader.css ==============================================
   == Styles for the header toolbars of a mail message.
   ======================================================================= */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+/* ::::: for the entire area ::::: */
+.main-header-area {
+  background-color: #6d84a2;
+  color: #ffffff; 
+  font-size: 12px;
+  overflow: hidden;
+}
 
 /* ::::: msg header toolbars ::::: */
 #collapsedHeaderView,
 #expandedHeaderView {
   min-width: 1px;
 }
 
 /* ::::: msg header buttons ::::: */
 .headerContainer
 {
   min-width: 1px;
 }
 
+#otherActionsButton {
+  margin-bottom: .1em;   
+}
+
+#trashButton {
+  -moz-box-orient: vertical;
+  list-style-image: url("chrome://messenger/skin/icons/folder-trash.png");
+}
+
+/* ::::: expanded header pane ::::: */
+
+#expandedHeadersButtonBox {
+  padding-bottom: .3em;
+}
+
+#variousHeadersBox {
+  padding-bottom: 1.3em;
+}
+  
+/* ::::: edit message bar ::::: */
+
+#editMessageBox
+{
+  min-width: 1px;
+  -moz-border-radius-bottomleft: 0.2em;
+  -moz-border-radius-bottomright: 0.2em;
+}
+
+#editMessageDescription
+{
+  font-style: italic;
+  font-weight: bolder;
+}
+
 /* ::::: attachment view ::::: */
 
 #attachmentList
 {
   margin: 0px;
 }
 
 /* XXX: Move all of the description attributes to the toolkit */
@@ -130,83 +171,89 @@ description[selectable="true"]:focus > d
   min-height: 7px;
   border-top: 1px solid #C8C8C8;
   background-color: #E6E6E6;
 }
 
 /* ::::: msg header captions ::::: */
 
 #msgHeaderView {
-  background-color: #FFFFFF;
-  border: none;
+  border-left: 2px solid #8597b0;
+  border-right: 2px solid #8597b0;
   font-family: Arial;
   font-size: 12px;
+  -moz-border-radius-bottomleft: 0.2em;
+  -moz-border-radius-bottomright: 0.2em;
 }
 
-#msgHeaderView > deck {
-  margin: 0 8px 0 8px;
-  padding: 8px 0 4px 0;
-  border-bottom: 1px solid #ccc;
+#msgHeaderViewDeck {
+  margin: 0;
+  padding: 0;
+}
+
+
+.msgHeaderView-button {
+  min-width: 1px;
+  /* XXX need to pick a good outline-color here */
 }
 
 #msgHeaderView textbox {
   background-color: transparent;
+  color: inherit;
 }
 
+
 .headerNameBox {
-  width: 8em;
+  width: 7em;
   background-color: transparent;
-  color: #8f8f8f;
 }
 
 .headerName {
-  font-weight: bold;
+  color: #bbbbbb;
   text-align: right;
   background-color: transparent;
   padding: 0px;
   margin-top: 0;
 }
 
 .headerValue {
   margin: 0;
   min-width: 50px;
   white-space: normal;
   background-color: transparent;
   padding: 0px;
 }
 
 .headerValueBox {
+  background-color: transparent;
 }
 
 .headerValueUrl {
   cursor: pointer;
   color: #0000FF;
   text-decoration: underline;
 }
 
 .headerValueUrl:hover {
   color: red;
 }
 
 .headerValueBox[singleline="true"] {
   overflow: hidden;
 }
 
-#collapsedsubjectBox .collapsedHeaderDisplayName {
-  font-weight: bold;
-  color: #8f8f8f;
+.headerField {
+  color: inherit;
+}
+
+#collapsedsubjectBox {
   margin-top: 0;
   -moz-margin-start: 8px;
 }
 
-.subjectvalue {
-  font-weight: bold;
-  background-color: transparent;
-}
-
 .tagvalue {
   font-weight: bold;
   margin-left: 0px;
 }
 
 /* ::::: msg header message ids ::::: */
 
 .messageIdDisplayButton {
--- a/mail/themes/pinstripe/mail/primaryToolbar.css
+++ b/mail/themes/pinstripe/mail/primaryToolbar.css
@@ -569,19 +569,33 @@ toolbar[iconsize="small"] #button-compac
 
 /* ::::: remote content bar status rules ::::: */
 
 #remoteContentImage {
   list-style-image: url("chrome://messenger/skin/icons/warning.png");
 }
 
 #remoteContentBar {
-  background-color: #EFF3D4;
-  padding: 6px 8px;
+  background-color: #FBFBC8;
+  border: 1px solid #DDDDE1;
   color: black;
+  padding: 0.3em 0.2em;
+  -moz-border-radius-bottomleft: 0.2em;
+  -moz-border-radius-bottomright: 0.2em;
+  -moz-border-radius-topleft: 0.2em;
+  -moz-border-radius-topright: 0.2em;
+}
+
+#remoteContentDescription {
+  margin-left: 1.1em;
+}
+
+#remoteContentButton {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 #phishingBarImage {
 /* for now, temporarily copy the remote image icon until we can get a new one */
   list-style-image: url("chrome://messenger/skin/icons/warning.png");
 }
 
 #phishingBar {
--- a/mail/themes/qute/mail/messageHeader.css
+++ b/mail/themes/qute/mail/messageHeader.css
@@ -36,31 +36,73 @@
  * ***** END LICENSE BLOCK ***** */
 
 /* ===== messageHeader.css ==============================================
   == Styles for the header toolbars of a mail message.
   ======================================================================= */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+/* ::::: for the entire area ::::: */
+.main-header-area {
+  background-color: #6d84a2;
+  color: #ffffff; 
+  font-size: 12px;
+  overflow: hidden;
+}
+
 /* ::::: msg header toolbars ::::: */
 
 #collapsedHeaderView,
 #expandedHeaderView {
   min-width: 1px;
 }
 
 /* ::::: msg header buttons ::::: */
 .headerContainer
 {
-  border-bottom: 1px solid ThreeDDarkShadow;
   min-width: 1px;
   background-color: transparent;
 }
 
+#otherActionsButton {
+  margin-bottom: .1em;   
+}
+
+#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-bottom: .3em;
+}
+
+#variousHeadersBox {
+  padding-bottom: 1.3em;
+}
+  
+/* ::::: edit message bar ::::: */
+
+#editMessageBox
+{
+  min-width: 1px;
+  -moz-border-radius-bottomleft: 0.2em;
+  -moz-border-radius-bottomright: 0.2em;
+}
+
+#editMessageDescription
+{
+  font-style: italic;
+  font-weight: bolder;
+}
+
 /* ::::: attachment view ::::: */
 
 #attachmentList
 {
   margin: 0px;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
@@ -117,58 +159,63 @@ description[selectable="true"]:focus > d
 
 #attachmentView[attachmentOverflow="true"] {
   overflow: auto;
 }
 
 /* ::::: msg header captions ::::: */
 
 #msgHeaderView {
-  -moz-appearance: toolbox;
-  background-color: -moz-Dialog;
+  border-left: 2px solid #8597b0;
+  border-right: 2px solid #8597b0;
+  font-family: Arial;
+  font-size: 12px;
+  -moz-border-radius-bottomleft: 0.2em;
+  -moz-border-radius-bottomright: 0.2em;
+  
+}
+
+.msgHeaderView-button {
+  min-width: 1px !important;
 }
 
 .headerNameBox {
   width: 7.7em;
   background-color: transparent;
 }
 
 .headerName {
   margin: 0 .5em 5px 0;
-  font-weight: bold;
   text-align: right;
+  color: #bbbbbb;
   background-color: transparent;
 }
 
 .headerValue {
   margin: 0;
   min-width: 50px;
   white-space: normal;
   background-color: transparent;
+  color: inherit;
 }
 
 .headerValueBox {
   margin: 0 0 5px 0; 
 }
 
 .headerValueUrl {
   cursor: pointer;
   color: #0000FF;
   text-decoration: underline;
 }
 
 .headerValueBox[singleline="true"] {
   overflow: hidden;
 }
 
-.subjectvalue {
-  font-weight: bold;
-  background-color: transparent;
-}
-
 .tagvalue {
   margin-left: 0px;
   margin-top: 0px;
 }
 /* ::::: msg header message ids ::::: */
 
 .messageIdDisplayButton {
   cursor: pointer;
@@ -187,25 +234,23 @@ description[selectable="true"]:focus > d
   -moz-box-pack: end;
 }
 
 
 /* ::::: msg header email addresses ::::: */
 
 .emailDisplayButton {
   cursor: pointer;
-  color: #0000FF;
-  text-decoration: underline;
   margin: 0;
   background-color: transparent;
 }
 
 .headerValueUrl:hover,
 .emailDisplayButton:hover {
-  color: #FF0000;
+  color: blue;
 }
 
 .emailDisplayImage {
   -moz-padding-start: 2px;
   -moz-box-pack: end;
 }
  
 /* ::::: email address twisty ::::: */
@@ -236,16 +281,17 @@ description[selectable="true"]:focus > d
 }
 
 /* ::::: collapsed view styles ::::: */
 
 #collapseddateValue {
   margin: 0 .5em;
   text-align: right;
   background-color: transparent;
+  color: inherit;
 }
 
 #collapseddateValue > .textbox-input-box menupopup { 
   text-align: left;
 }
 
 #collapsedfromBox {
   width: 18em;
@@ -255,16 +301,16 @@ description[selectable="true"]:focus > d
 #collapseddateBox {
   width: 12em;
   background-color: transparent;
 }
 
 .collapsedHeaderDisplayName { 
   margin: 0 .5em 0 .8em;
   min-height: 16px;
-  font-weight: bold;
   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
@@ -200,17 +200,17 @@
     </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 anonid="emailAddressNode"/>
+      <xul:mail-emailaddress class="headerValue" anonid="emailAddressNode"/>
     </content>
 
     <implementation>
       <property name="emailAddressNode" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'emailAddressNode');"
         readonly="true"/>
     </implementation>
   </binding>