From 3cd4a0e822d09bf82902224282243570892b9405 Mon Sep 17 00:00:00 2001
From: "scott%scott-macgregor.org" <scott%scott-macgregor.org>
Date: Wed, 23 Jul 2003 19:05:47 +0000
Subject: [PATCH] Bug #213036 --> Land new mail attachment display for
 thunderbird.

If you want the large icon version of this, set: mailnews.attachments.display.largeView to true.

Remove the flex on the message pane. This keeps us from properly remembering the height of the message pane in the various
3-pane configurations now that we generate the 3-pane dynamically.

Remove localstore.rdf information for the alternate 3-pane view xul file which we no longer use.
---
 mail/app/profile/localstore.rdf         |  36 ------
 mail/app/profile/mailnews.js            |   3 +
 mail/base/content/messenger.xul         | 133 ++++++++++-----------
 mail/base/content/msgHdrViewOverlay.js  | 102 ++++++----------
 mail/base/content/msgHdrViewOverlay.xul | 151 ++++++++++++------------
 mail/base/content/msgMail3PaneWindow.js |   6 +-
 mail/base/jar.mn                        |   2 +
 mail/base/skin/messageHeader.css        |  98 ++++++++++-----
 8 files changed, 252 insertions(+), 279 deletions(-)

diff --git a/mail/app/profile/localstore.rdf b/mail/app/profile/localstore.rdf
index 467b7cf42ced..74c1819ede29 100644
--- a/mail/app/profile/localstore.rdf
+++ b/mail/app/profile/localstore.rdf
@@ -42,40 +42,4 @@
     <height>565</height>
   </RDF:Description>
   <RDF:Description about="chrome://messenger/content/messenger.xul#threadOutliner" height="94" />
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul">
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#threadOutliner"/>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#threadOutliner" height="94" />
-
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#flaggedCol">
-    <hidden>true</hidden>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#unreadCol">
-    <hidden>true</hidden>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#totalCol">
-    <hidden>true</hidden>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#OrderReceivedColumn">
-    <hidden>true</hidden>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#statusCol">
-    <hidden>true</hidden>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#sizeCol">
-    <hidden>true</hidden>
-  </RDF:Description>
-  </RDF:Description>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul#folderSizeCol">
-    <hidden>true</hidden>
-  </RDF:Description>
-  <RDF:Description about="chrome://messenger/content/mail3PaneWindowVertLayout.xul">
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#statusCol"/>
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#sizeCol"/>
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#unreadCol"/>
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#totalCol"/>
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#OrderReceivedColumn"/>
-    <NC:persist resource="chrome://messenger/content/mail3PaneWindowVertLayout.xul#flaggedCol"/>
-  </RDF:Description>
 </RDF:RDF>
diff --git a/mail/app/profile/mailnews.js b/mail/app/profile/mailnews.js
index 34145bd62a68..3beb28ab69ef 100644
--- a/mail/app/profile/mailnews.js
+++ b/mail/app/profile/mailnews.js
@@ -70,6 +70,9 @@ pref("mailnews.auto_unzip_saved_attachments", false);
 // is displayed in the message pane or not...
 pref("mailnews.headers.showUserAgent",       false);
 
+// hidden pref for changing how we present attachments in the message pane
+pref("mailnews.attachments.display.largeView", false);
+
 // hidden pref for controlling if the organization string
 // is displayed in the message pane or not...
 pref("mailnews.headers.showOrganization",    false);
diff --git a/mail/base/content/messenger.xul b/mail/base/content/messenger.xul
index f894a66661e2..c38e5b45507d 100644
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -246,81 +246,82 @@
       <box orient="vertical" id="messagesBox" flex="1">
         <hbox id="messengerBox" flex="1" minheight="100" height="100" persist="height">
           <vbox id="threadPaneBox" flex="1">          
-        <tree id="threadTree" flex="2" enableColumnDrag="true" _selectDelay="500" class="plain focusring"
-                     disableKeyNavigation="true"
-                     context="threadPaneContext"
-                     onkeypress="ThreadPaneKeyPress(event);"
-                     onselect="ThreadPaneSelectionChanged();">
-          <treecols pickertooltiptext="&columnChooser.tooltip;">
-            <treecol id="threadCol" persist="hidden ordinal" fixed="true" cycler="true"
-                     class="treecol-image threadColumnHeader" currentView="unthreaded"
-                    display="&threadColumn.label;" tooltiptext="&threadColumn.tooltip;"/>
-            <splitter class="tree-splitter"/>
-            <treecol id="subjectCol" persist="hidden ordinal width" flex="7" ignoreincolumnpicker="true"
-                     label="&subjectColumn.label;" tooltiptext="&subjectColumn.tooltip;"/>
-            <splitter class="tree-splitter"/>
-            <treecol id="junkStatusCol" persist="hidden ordinal width" fixed="true" cycler="true"
-                     class="treecol-image junkStatusHeader"
-                     display="&junkStatusColumn.label;" tooltiptext="&junkStatusColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="senderOrRecipientCol" persist="hidden ordinal width" flex="4"
-                    label="&senderColumn.label;" tooltiptext="&senderColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="unreadButtonColHeader" persist="hidden ordinal" fixed="true" cycler="true"
-                    class="treecol-image readColumnHeader"
-                    display="&readColumn.label;" tooltiptext="&readColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="dateCol" persist="hidden ordinal width" flex="2"
-                    label="&dateColumn.label;" tooltiptext="&dateColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="statusCol" persist="hidden ordinal width" flex="1" hidden="true"
-                    label="&statusColumn.label;" tooltiptext="&statusColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="sizeCol" persist="hidden ordinal width" flex="1" hidden="true"
-                    label="&sizeColumn.label;" tooltiptext="&sizeColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="flaggedCol" persist="hidden ordinal" fixed="true" cycler="true" hidden="true"
-                    class="treecol-image flagColumnHeader"
-                    display="&flagColumn.label;" tooltiptext="&flagColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="labelCol" persist="hidden ordinal width" flex="1" hidden="true"
-                    label="&labelColumn.label;" tooltiptext="&labelColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="priorityCol" persist="hidden ordinal width" flex="1"
-                    label="&priorityColumn.label;" tooltiptext="&priorityColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="unreadCol" persist="hidden ordinal width" flex="1" hidden="true"
-                    label="&unreadColumn.label;" tooltiptext="&unreadColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="totalCol" persist="hidden ordinal width" flex="1" hidden="true"
-                    label="&totalColumn.label;" tooltiptext="&totalColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="locationCol" persist="width" flex="1" hidden="true" ignoreincolumnpicker="true"
-                    label="&locationColumn.label;" tooltiptext="&locationColumn.tooltip;"/>
-           <splitter class="tree-splitter"/>
-           <treecol id="idCol" persist="hidden ordinal width" flex="1" hidden="true"
-                    label="&idColumn.label;" tooltiptext="&idColumn.tooltip;"/>
-          </treecols>
-        <treechildren ondraggesture="BeginDragThreadPane(event);"/>
-      </tree>
-            <vbox id="accountCentralBox" flex="1" collapsed="true">
-              <iframe name="accountCentralPane" width="150" flex="1" src="about:blank"/>
-            </vbox>
+            <tree id="threadTree" flex="2" enableColumnDrag="true" _selectDelay="500" class="plain focusring"
+                         disableKeyNavigation="true"
+                         context="threadPaneContext"
+                         onkeypress="ThreadPaneKeyPress(event);"
+                         onselect="ThreadPaneSelectionChanged();">
+              <treecols pickertooltiptext="&columnChooser.tooltip;">
+                <treecol id="threadCol" persist="hidden ordinal" fixed="true" cycler="true"
+                         class="treecol-image threadColumnHeader" currentView="unthreaded"
+                        display="&threadColumn.label;" tooltiptext="&threadColumn.tooltip;"/>
+                <splitter class="tree-splitter"/>
+                <treecol id="subjectCol" persist="hidden ordinal width" flex="7" ignoreincolumnpicker="true"
+                         label="&subjectColumn.label;" tooltiptext="&subjectColumn.tooltip;"/>
+                <splitter class="tree-splitter"/>
+                <treecol id="junkStatusCol" persist="hidden ordinal width" fixed="true" cycler="true"
+                         class="treecol-image junkStatusHeader"
+                         display="&junkStatusColumn.label;" tooltiptext="&junkStatusColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="senderOrRecipientCol" persist="hidden ordinal width" flex="4"
+                        label="&senderColumn.label;" tooltiptext="&senderColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="unreadButtonColHeader" persist="hidden ordinal" fixed="true" cycler="true"
+                        class="treecol-image readColumnHeader"
+                        display="&readColumn.label;" tooltiptext="&readColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="dateCol" persist="hidden ordinal width" flex="2"
+                        label="&dateColumn.label;" tooltiptext="&dateColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="statusCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&statusColumn.label;" tooltiptext="&statusColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="sizeCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&sizeColumn.label;" tooltiptext="&sizeColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="flaggedCol" persist="hidden ordinal" fixed="true" cycler="true" hidden="true"
+                        class="treecol-image flagColumnHeader"
+                        display="&flagColumn.label;" tooltiptext="&flagColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="labelCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&labelColumn.label;" tooltiptext="&labelColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="priorityCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&priorityColumn.label;" tooltiptext="&priorityColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="unreadCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&unreadColumn.label;" tooltiptext="&unreadColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="totalCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&totalColumn.label;" tooltiptext="&totalColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="locationCol" persist="width" flex="1" hidden="true" ignoreincolumnpicker="true"
+                        label="&locationColumn.label;" tooltiptext="&locationColumn.tooltip;"/>
+               <splitter class="tree-splitter"/>
+               <treecol id="idCol" persist="hidden ordinal width" flex="1" hidden="true"
+                        label="&idColumn.label;" tooltiptext="&idColumn.tooltip;"/>
+              </treecols>
+            <treechildren ondraggesture="BeginDragThreadPane(event);"/>
+          </tree>
+          <vbox id="accountCentralBox" flex="1" collapsed="true">
+            <iframe name="accountCentralPane" width="150" flex="1" src="about:blank"/>
           </vbox>
-        </hbox>
+        </vbox>
+      </hbox>
 
       <!-- if you change this id, please change GetThreadAndMessagePaneSplitter() and MsgToggleMessagePane() -->
         <splitter id="threadpane-splitter" collapse="after" persist="state"
                   onmouseup="OnMouseUpThreadAndMessagePaneSplitter()"/>
 
-        <vbox id="messagepanebox" flex="2" minheight="100" height="200" persist="collapsed height width">
-        <hbox id="junkBar"/>
-        <hbox id="msgHeaderView"/>
+        <vbox id="messagepanebox" height="200" persist="collapsed height width">
+          <hbox id="junkBar"/>
+          <hbox id="msgHeaderView"/>
           <browser id="messagepane" context="messagePaneContext" autofind="false"
                    minheight="1" height="0" flex="1" name="messagepane"
-                 disablehistory="true" type="content-primary" src="about:blank"
+                  disablehistory="true" type="content-primary" src="about:blank"
                    disablesecurity="true" onclick="contentAreaClick(event);"/>
-      </vbox>  
+          <hbox id="attachmentView"/>
+        </vbox>  
       </box>
     </vbox>             
   </hbox>
diff --git a/mail/base/content/msgHdrViewOverlay.js b/mail/base/content/msgHdrViewOverlay.js
index c08296caa011..fc1592a8212e 100644
--- a/mail/base/content/msgHdrViewOverlay.js
+++ b/mail/base/content/msgHdrViewOverlay.js
@@ -34,9 +34,13 @@
 var msgHeaderParserContractID		   = "@mozilla.org/messenger/headerparser;1";
 var abAddressCollectorContractID	 = "@mozilla.org/addressbook/services/addressCollecter;1";
 
+const kLargeIcon = 32;
+const kSmallIcon = 16;
+
 var gViewAllHeaders = false;
 var gNumAddressesToShow = 3;
 var gShowOrganization = false;
+var gShowLargeAttachmentView = false;
 var gShowUserAgent = false;
 var gCollectIncoming = false;
 var gCollectOutgoing = false;
@@ -212,6 +216,7 @@ function OnLoadMsgHeaderPane()
   gCollectOutgoing = pref.getBoolPref("mail.collect_email_address_outgoing");
   gShowUserAgent = pref.getBoolPref("mailnews.headers.showUserAgent");
   gShowOrganization = pref.getBoolPref("mailnews.headers.showOrganization");
+  gShowLargeAttachmentView = pref.getBoolPref("mailnews.attachments.display.largeView");
   initializeHeaderViewTables();
 
   var toggleHeaderView = document.getElementById("msgHeaderView");
@@ -219,11 +224,6 @@ function OnLoadMsgHeaderPane()
   if (initialCollapsedSetting == "true")
     gCollapsedHeaderViewMode = true;   
 
-  // when we start up, attachment view defaults to open...if we aren't supposed to be open
-  // toggle to the slim view
-  if (document.getElementById('toggleAttachmentView').getAttribute("state") == "true")
-    ToggleAttachmentView(); // gSlimAttachmentView is false by default, toggle to true
-
   // dispatch an event letting any listeners know that we have loaded the message pane
   var event = document.createEvent('Events');
   event.initEvent('messagepane-loaded', false, true);
@@ -313,6 +313,11 @@ var messageHeaderSink = {
         // for consistancy sake, let's force all header names to be lower case so
         // we don't have to worry about looking for: Cc and CC, etc.
         var lowerCaseHeaderName = headerNames[index].toLowerCase();
+
+        // if we have an x-mailer string, put it in the user-agent slot which we know how to handle
+        // already. 
+        if (lowerCaseHeaderName == "x-mailer")
+          lowerCaseHeaderName = "user-agent";   
         
         var foo = new Object;        
         foo.headerValue = headerValues[index];
@@ -382,10 +387,7 @@ var messageHeaderSink = {
     
     onEndAllAttachments: function()
     {
-      if (gSlimAttachmentView)
-        displayAttachmentsForSlimView();
-      else
-        displayAttachmentsForExpandedView();
+      displayAttachmentsForExpandedView();
     },
 
     onEndMsgDownload: function(url)
@@ -473,39 +475,7 @@ function updateHeaderViews()
   else
     showHeaderView(gExpandedHeaderView);
 
-  if (gSlimAttachmentView)
-    displayAttachmentsForSlimView();
-  else
-    displayAttachmentsForExpandedView();
-}
-
-function ToggleAttachmentView()
-{
-  // change the toggle icon....
-  var attachmentToggle = document.getElementById('toggleAttachmentView');
-  
-  if (attachmentToggle.hasAttribute("open"))
-    attachmentToggle.removeAttribute("open");
-  else
-    attachmentToggle.setAttribute("open", "true");
-
-  // hide or show the attachment list
-  var attachmentList = document.getElementById('attachmentList');
-  attachmentList.collapsed = !attachmentList.collapsed;
-
-  // if the attachmentlist is collapsed then show the # of attachments
-
-  var numAttachmentsLabel = document.getElementById('numAttachmentsText');
-  numAttachmentsLabel.collapsed = !numAttachmentsLabel.collapsed ;  
-
-  gSlimAttachmentView = !gSlimAttachmentView;
-
-  attachmentToggle.setAttribute("state", gSlimAttachmentView);
-
-  if (gSlimAttachmentView)
-    displayAttachmentsForSlimView();
-  else
-    displayAttachmentsForExpandedView();
+  displayAttachmentsForExpandedView();
 }
 
 function ToggleHeaderView ()
@@ -983,6 +953,14 @@ function cloneAttachment(aAttachment)
 function displayAttachmentsForExpandedView()
 {
   var numAttachments = currentAttachments.length;
+  
+  // IMPORTANT: make sure we uncollapse the attachment box BEFORE we start adding
+  // our attachments to the view. Otherwise, layout doesn't calculate the correct height for
+  // the attachment view and we end up with a box that is too tall.
+
+  var expandedAttachmentBox = document.getElementById('attachmentView');
+  expandedAttachmentBox.collapsed = numAttachments <= 0;
+
   if (numAttachments > 0 && !gBuildAttachmentsForCurrentMsg)
   {
     var attachmentList = document.getElementById('attachmentList');
@@ -992,11 +970,18 @@ function displayAttachmentsForExpandedView()
 
       // create a new attachment widget. set the label, set the 
       // moz-icon img src
+      var attachmentView = attachmentList.appendItem(attachment.displayName);
+      attachmentView.setAttribute("class", "descriptionitem-iconic"); 
 
-      var attachmentView = document.createElement("mail-attachment");
-      attachmentView.setAttribute("label", attachment.displayName);
-      setApplicationIconForAttachment(attachment, attachmentView);
+      if (gShowLargeAttachmentView)
+      {
+        attachmentView.setAttribute("largeView", "true");
+        attachmentView.setAttribute("orient", "vertical");
+      }
+
+      setApplicationIconForAttachment(attachment, attachmentView, gShowLargeAttachmentView);
       attachmentView.setAttribute("tooltip", "attachmentListTooltip");
+      attachmentView.setAttribute("context", "attachmentListContext");      
 
       attachmentView.attachment = cloneAttachment(attachment);
       attachmentView.setAttribute("attachmentUrl", attachment.url);
@@ -1007,30 +992,15 @@ function displayAttachmentsForExpandedView()
     } // for each attachment
     gBuildAttachmentsForCurrentMsg = true;
   }
-
-  var expandedAttachmentBox = document.getElementById('attachmentView');
-  expandedAttachmentBox.collapsed = numAttachments <= 0;
 }
 
 // attachment --> the attachment struct containing all the information on the attachment
 // listitem --> the listitem currently showing the attachment.
-function setApplicationIconForAttachment(attachment, listitem)
+function setApplicationIconForAttachment(attachment, listitem, largeView)
 {
-   // generate a moz-icon url for the attachment so we'll show a nice icon next to it.
-   listitem.setAttribute('image', "moz-icon:" + "//" + attachment.displayName + "?size=16&contentType=" + attachment.contentType);
-}
-
-function displayAttachmentsForSlimView()
-{
-  var numAttachments = currentAttachments.length;
-  if (numAttachments)
-  {
-    var numAttachmentsLabel = document.getElementById('numAttachmentsText');
-    numAttachmentsLabel.value = numAttachments;   
-  }
-
-  // show/hide the attachment view
-  document.getElementById('attachmentView').collapsed = !numAttachments;
+  var iconSize = largeView ? kLargeIcon : kSmallIcon;
+  // generate a moz-icon url for the attachment so we'll show a nice icon next to it.
+  listitem.setAttribute('image', "moz-icon:" + "//" + attachment.displayName + "?size=" + iconSize + "&contentType=" + attachment.contentType);
 }
 
 // Public method called to generate a tooltip over an attachment
@@ -1095,7 +1065,7 @@ function addAttachmentToPopup(popup, attachment, attachmentIndex)
 
       // insert the item just before the separator...the separator is the 2nd to last element in the popup.
       item.setAttribute('class', 'menu-iconic');
-      setApplicationIconForAttachment(attachment,item);
+      setApplicationIconForAttachment(attachment,item, false);
       var numItemsInPopup = popup.childNodes.length;
       item = popup.insertBefore(item, popup.childNodes[numItemsInPopup-2]);
 
@@ -1198,7 +1168,7 @@ var attachmentAreaDNDObserver = {
   onDragStart: function (aEvent, aAttachmentData, aDragAction)
   {
     var target = aEvent.target;
-    if (target.localName == "listitem")
+    if (target.localName == "descriptionitem")
     {
       var attachmentUrl = target.getAttribute("attachmentUrl");
       var attachmentDisplayName = target.getAttribute("label");
diff --git a/mail/base/content/msgHdrViewOverlay.xul b/mail/base/content/msgHdrViewOverlay.xul
index c33ecb93dd2d..bd8b318b46a6 100644
--- a/mail/base/content/msgHdrViewOverlay.xul
+++ b/mail/base/content/msgHdrViewOverlay.xul
@@ -55,102 +55,99 @@
          onpopupshowing="return FillInAttachmentTooltip(document.tooltipNode);"/> 
 
 <hbox id="msgHeaderView" keywordrelated="true" originalclass="none" persist="state">
-
-<vbox flex="1">
-<!-- the message pane consists of 3 'boxes'. Box #1 is a grid, showing a brief view of the headers --> 
-<grid id="collapsedHeaderView" class="header-part1 headerContainer" keywordrelated="true" originalclass="header-part1 headerContainer" flex="1" collapsed="true">
-  <rows>
-    <row flex="1"/>
-  </rows>
-  <columns>
-    <column class="collapsedToggleHdrBox">
-      <hbox align="start">
-        <image id="toggleHeaderView" class="collapsedHeaderViewButton"
-          onclick="ToggleHeaderView();"/>
-      </hbox>
-    </column>
+  <vbox flex="1">
+  <!-- the message pane consists of 3 'boxes'. Box #1 is a grid, showing a brief view of the headers --> 
+    <grid id="collapsedHeaderView" class="header-part1 headerContainer" keywordrelated="true" originalclass="header-part1 headerContainer" flex="1" collapsed="true">
+      <rows>
+        <row flex="1"/>
+      </rows>
+      <columns>
+        <column class="collapsedToggleHdrBox">
+          <hbox align="start">
+            <image id="toggleHeaderView" class="collapsedHeaderViewButton"
+              onclick="ToggleHeaderView();"/>
+          </hbox>
+        </column>
       
-    <column id="collapsedsubjectBox" collapsed="true" flex="1">
-      <hbox>
-        <label class="collapsedHeaderDisplayName" value="&subjectField.label;"/>
-        <textbox id="collapsedsubjectValue" keywordrelated="true" class="collapsedHeaderValue plain" originalclass="collapsedHeaderValue plain" readonly="true" crop="right" appendoriginalclass="true" flex="1"/>
-      </hbox>
-    </column>
+        <column id="collapsedsubjectBox" collapsed="true" flex="1">
+          <hbox>
+            <label class="collapsedHeaderDisplayName" value="&subjectField.label;"/>
+            <textbox id="collapsedsubjectValue" keywordrelated="true" class="collapsedHeaderValue plain" originalclass="collapsedHeaderValue plain" readonly="true" crop="right" appendoriginalclass="true" flex="1"/>
+          </hbox>
+        </column>
 
-    <column id="collapsedfromBox" collapsed="true">
-      <hbox align="start">
-        <label class="collapsedHeaderDisplayName" value="&fromField.label;"/>          
-        <mail-emailaddress id="collapsedfromValue" flex="1"/>
-      </hbox>
-    </column>
+        <column id="collapsedfromBox" collapsed="true">
+          <hbox align="start">
+            <label class="collapsedHeaderDisplayName" value="&fromField.label;"/>          
+            <mail-emailaddress id="collapsedfromValue" flex="1"/>
+          </hbox>
+        </column>
 
-    <column id = "collapseddateBox" collapsed="true">
-      <hbox align="start">
-        <textbox id="collapseddateValue" keywordrelated="true" class="collapsedHeaderValue plain" originalclass="collapsedHeaderValue plain" appendoriginalclass="true" readonly="true"/>
-      </hbox>
-    </column>
+        <column id = "collapseddateBox" collapsed="true">
+          <hbox align="start">
+            <textbox id="collapseddateValue" keywordrelated="true" class="collapsedHeaderValue plain" originalclass="collapsedHeaderValue plain" appendoriginalclass="true" readonly="true"/>
+          </hbox>
+        </column>
 
-    <column id="collapsedKeywordBox">
-      <hbox align="start">
-      <image id="collapsedKeywordImage" keywordrelated="true" originalclass="none"/>  
-      </hbox>
-    </column>
-  </columns>
-</grid>
+        <column id="collapsedKeywordBox">
+          <hbox align="start">
+          <image id="collapsedKeywordImage" keywordrelated="true" originalclass="none"/>  
+          </hbox>
+        </column>
+      </columns>
+    </grid>
 
-<!-- the message pane consists of 3 'boxes'. Box #2 is the expanded headers view (the default view) --> 
+    <!-- the message pane consists of 3 'boxes'. Box #2 is the expanded headers view (the default view) --> 
 
-<hbox id="expandedHeaderView" flex="1" collapsed="true" class="header-part1 headerContainer" keywordrelated="true" originalclass="header-part1">
+    <hbox id="expandedHeaderView" flex="1" collapsed="true" class="header-part1 headerContainer" keywordrelated="true" originalclass="header-part1">
 
-  <vbox id="expandedHeaders" flex="1">
-    <mail-toggle-headerfield keywordrelated="true" id="expandedsubjectBox" class="subjectvalue" label="&subjectField.label;" ontwistyclick="ToggleHeaderView();" collapsed="true"/>
+      <vbox id="expandedHeaders" flex="1">
+        <mail-toggle-headerfield keywordrelated="true" id="expandedsubjectBox" class="subjectvalue" label="&subjectField.label;" ontwistyclick="ToggleHeaderView();" collapsed="true"/>
  
-    <mail-emailheaderfield id="expandedfromBox" label="&fromField.label;" collapsed="true"/>
-    <mail-headerfield id="expandedorganizationBox" label="&organizationField.label;" collapsed="true"/>
-    <mail-emailheaderfield id="expandedreply-toBox" label="&replyToField.label;" collapsed="true"/>
+        <mail-emailheaderfield id="expandedfromBox" label="&fromField.label;" collapsed="true"/>
+        <mail-headerfield id="expandedorganizationBox" label="&organizationField.label;" collapsed="true"/>
+        <mail-emailheaderfield id="expandedreply-toBox" label="&replyToField.label;" collapsed="true"/>
 
-    <mail-headerfield keywordrelated="true" id="expandeddateBox" label="&dateField.label;" collapsed="true"/>
+        <mail-headerfield keywordrelated="true" id="expandeddateBox" label="&dateField.label;" collapsed="true"/>
 
-    <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-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 keywordrelated="true" id="expandednewsgroupsBox"  label="&newsgroupsField.label;" collapsed="true"/>
-    <mail-headerfield keywordrelated="true" id="expandedfollowup-toBox" label="&followupToField.label;" collapsed="true"/>
-    <mail-headerfield keywordrelated="true" id="expandeduser-agentBox"  label="&userAgentField.label;"  collapsed="true"/> 
-  </vbox>
+        <mail-headerfield keywordrelated="true" id="expandednewsgroupsBox"  label="&newsgroupsField.label;" collapsed="true"/>
+        <mail-headerfield keywordrelated="true" id="expandedfollowup-toBox" label="&followupToField.label;" collapsed="true"/>
+        <mail-headerfield keywordrelated="true" id="expandeduser-agentBox"  label="&userAgentField.label;"  collapsed="true"/> 
+      </vbox>
 
-  <vbox id="expandedKeywordBox">
-    <spacer flex="1"/>
-    <image id="expandedKeywordImage" keywordrelated="true" originalclass="none" />
-    <spacer flex="1"/>  
-  </vbox>
+      <vbox id="expandedKeywordBox">
+        <spacer flex="1"/>
+        <image id="expandedKeywordImage" keywordrelated="true" originalclass="none" />
+        <spacer flex="1"/>  
+      </vbox>
  
-  <vbox id="editMessageBox" class="header-part1" keywordrelated="true" originalclass="header-part1" collapsed="true">
-    <spacer flex="1"/>
-    <button id="editMessageButton" label="&editMessage.label;" oncommand="MsgComposeDraftMessage()"/>
-    <spacer flex="1"/>
-  </vbox> 
+      <vbox id="editMessageBox" class="header-part1" keywordrelated="true" originalclass="header-part1" collapsed="true">
+        <spacer flex="1"/>
+        <button id="editMessageButton" label="&editMessage.label;" oncommand="MsgComposeDraftMessage()"/>
+        <spacer flex="1"/>
+      </vbox> 
+
+      <vbox autostretch="never">
+        <spacer flex="1"/>
+        <image style="padding: 5px" id="fromBuddyIcon"/>
+        <spacer flex="1"/>
+      </vbox>
+    </hbox>
 
-  <vbox autostretch="never">
-    <spacer flex="1"/>
-    <image style="padding: 5px" id="fromBuddyIcon"/>
-    <spacer flex="1"/>
   </vbox>
 </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 -->   
-<vbox id="attachmentView" class="headerContainer" collapsed="true">
-  <hbox id="attachmentLabelContainer" autostretch="never" align="start">
-    <image id="toggleAttachmentView" open="true" persist="state" class="addresstwisty" onclick="ToggleAttachmentView();"/>
-    <label id="attachmentText" class="collapsedHeaderDisplayName" value="&attachmentsTree.label;"/>
-    <label id="numAttachmentsText" collapsed="true"/>
-  </hbox>
-  <description flex="1" id="attachmentList" selectable="true" seltype="multiple" onclick="attachmentListClick(event);">
+<hbox id="attachmentView" class="headerContainer" collapsed="true">
+  <label id="attachmentLabel" class="subjectvalue" value="&attachmentsTree.label;"/>
+  <description flex="1" id="attachmentList" selectable="true" seltype="multiple" onclick="attachmentListClick(event);" ondraggesture="nsDragAndDrop.startDrag(event,attachmentAreaDNDObserver);" ondragover="nsDragAndDrop.dragOver(event, attachmentAreaDNDObserver);" context="attachmentListContext">
   </description>
-</vbox>
-
-</vbox>
 </hbox>
+
 </overlay>
 
+
diff --git a/mail/base/content/msgMail3PaneWindow.js b/mail/base/content/msgMail3PaneWindow.js
index 702f1387d12a..4441811a9648 100644
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -655,7 +655,6 @@ function UpdateMailPaneConfig(aMsgWindowInitialized) {
   // now for each config, handle any extra clean up to create that view (such as changing a box orientation)
   if (paneConfig == kStandardPaneConfig) // standard 3-Pane Layout
   {     
-    messagePaneBox.removeAttribute("minwidth");
     threadPaneSplitter.setAttribute("orient", "vertical");
 
     // finally, make sure mailContentWrapper has the correct orientation
@@ -664,8 +663,7 @@ function UpdateMailPaneConfig(aMsgWindowInitialized) {
   }
 
   else if (paneConfig == kWidePaneConfig)  // "Wide" Window Pane Layout
-  {  
-    messagePaneBox.removeAttribute("minwidth");   
+  {     
     threadPaneSplitter.setAttribute("orient", "vertical");
 
     // finally, make sure mailContentWrapper has the correct orientation
@@ -677,8 +675,6 @@ function UpdateMailPaneConfig(aMsgWindowInitialized) {
   {
     messagesBox.setAttribute("orient", "horizontal");
     threadPaneSplitter.removeAttribute("orient");
-    messagePaneBox.setAttribute("minwidth", "400"); // 400 is a made up number since I can't seem to force the thread pane and msg pane
-                                                    // to split the available space in half (why is flex not working here???)
     // finally, make sure mailContentWrapper has the correct orientation
     mailContentWrapper.setAttribute("orient", "horizontal");
   }
diff --git a/mail/base/jar.mn b/mail/base/jar.mn
index cddb1b434118..41ecfb32eda1 100644
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@@ -9,6 +9,8 @@ messenger.jar:
 *+  content/messenger/messageWindow.xul             (content/messageWindow.xul)
 *+  content/messenger/messageWindow.js              (content/messageWindow.js)
 *+  content/messenger/messenger.xul                 (content/messenger.xul)
+*+  content/messenger/msgHdrViewOverlay.js          (content/msgHdrViewOverlay.js)
+*+  content/messenger/msgHdrViewOverlay.xul         (content/msgHdrViewOverlay.xul)
 *+  content/messenger/msgMail3PaneWindow.js         (content/msgMail3PaneWindow.js)
 *+  content/messenger/mail3PaneWindowCommands.js    (content/mail3PaneWindowCommands.js)
 *+  content/messenger/mailCore.js                   (content/mailCore.js)
diff --git a/mail/base/skin/messageHeader.css b/mail/base/skin/messageHeader.css
index 2941594c2f71..e50ce0afbf58 100644
--- a/mail/base/skin/messageHeader.css
+++ b/mail/base/skin/messageHeader.css
@@ -29,28 +29,84 @@
 
 /* ::::: msg header toolbars ::::: */
 
+#attachmentView,
 #collapsedHeaderView,
 #expandedHeaderView {
   min-width: 1px;
 }
 
 /* ::::: msg header buttons ::::: */
-
-#expandedAttachmentBox {
-  height: 0;
-  list-style-image: url("chrome://messenger/skin/icons/attach.gif");
-}
-
-/* XXX I should really have a selector rule here to select just .listcell-icon objects underneath the attachmentList listbox */
-
-.listcell-icon
+.headerContainer
 {
-  margin-left: 2px;
-  margin-top: 2px;
+  border-bottom: 1px solid ThreeDDarkShadow;
+  min-width: 1px;
+  background-color: transparent;
 }
 
-#attachmentText {
-  font-weight: bold;
+/* ::::: attachment view ::::: */
+
+#attachmentList
+{
+  -moz-appearance: listbox; 
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  margin: 5px 30px 5px 15px;
+}
+
+/* XXX: Move all of the description attributes to the toolkit */
+
+description[selectable="true"]
+{
+  margin              : 1px 5px 4px 5px;
+}
+
+descriptionitem
+{
+  border: 1px solid transparent;
+  margin: 1px 1px 1px 1px;
+}
+
+description[selectable="true"]:focus > descriptionitem[selected="true"][current="true"] 
+{
+  border: 1px dotted #F5DB95;
+}
+
+descriptionitem[selected="true"] 
+{
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+description[selectable="true"]:focus > descriptionitem[selected="true"] 
+{
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+.attachmentBox 
+{
+  width: 15em;
+  max-width: 10em;
+  text-align: left;
+}
+
+.attachmentBox[largeView="true"]
+{
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+#attachmentView
+{
+  border-right: 1px solid ThreeDShadow;
+  border-left: 1px solid ThreeDShadow;
+  border-top: 1px solid ThreeDShadow;
+  background-color: -moz-Dialog;
 }
 
 /* ::::: msg header captions ::::: */
@@ -62,13 +118,6 @@
   background-color: -moz-Dialog;
 }
 
-#collapsedHeaderView,
-#expandedHeaderView {
-  border-bottom: 1px solid ThreeDDarkShadow;
-  min-width: 1px;
-  background-color: transparent;
-}
-
 .headerNameBox {
   width: 7.7em;
   background-color: transparent;
@@ -141,10 +190,6 @@
 
 /* ::::: collapsed view styles ::::: */
 
-#collapsedAttachmentBox {
-  -moz-box-pack: center;
-}
-
 #collapseddateValue {
   margin: 0 .5em;
   text-align: right;
@@ -172,8 +217,3 @@
   margin: 0;
   background-color: transparent;
 }
-
-.collapsedAttachmentButton {
-  list-style-image: url("chrome://messenger/skin/icons/message-mail-attach.gif");
-  margin-right: .5em;
-}