Bug #223340 --> Redesign mail attachments UI to fix the problem where multiple attachements cause the attachment pane to hide the contents of the message pane. thanks to Wayne Woods <w.woods@optusnet.com.au> for putting this patch together.sr=mscott

mail/app/profile/all-thunderbird.js

@@ -181,7 +181,7 @@ pref("mail.showFolderPaneColumns", false); // setting to true will allow total/u
 pref("mail.showCondensedAddresses", true); // show the friendly display name for people I know
 
 // hidden pref for changing how we present attachments in the message pane
-pref("mailnews.attachments.display.largeView", false); 
+pref("mailnews.attachments.display.largeView", true); 
 pref("mail.pane_config.dynamic",            0);
 pref("mailnews.reuse_thread_window2",     true);
 pref("mail.spam.display.sanitize", true); // sanitize the HTML in spam messages

mail/base/content/messageWindow.xul

@@ -161,6 +161,7 @@
              style="height: 0px; min-height: 1px" flex="1" name="messagepane" 
              disablesecurity="true" disablehistory="true" type="content-primary" 
              src="about:blank" onclick="return contentAreaClick(event);" autofind="false"/>
+    <splitter id="attachment-splitter" collapse="after" resizebefore="closest" resizeafter="closest" collapsed="true"/>
     <hbox id="attachmentView"/>
     <findbar id="FindToolbar" browserid="messagepane"/>
   </vbox>  

mail/base/content/messenger.xul

@@ -403,6 +403,7 @@
                    minheight="1" flex="1" name="messagepane"
                    disablehistory="true" type="content-primary" src="about:blank"
                    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"/>
         </vbox>  

mail/base/content/msgHdrViewOverlay.js

@@ -775,6 +775,11 @@ function UpdateMessageHeaders()
   // header view table...
 
   var headerName;
+
+  // Remove the height attr so that it redraws correctly. Works around a problem that
+  // attachment-splitter causes if it's moved high enough to affect the header box:
+  document.getElementById('msgHeaderView').removeAttribute('height');
+
   for (headerName in currentHeaderData)
   {
     var headerField = currentHeaderData[headerName];
@@ -858,6 +863,7 @@ function HideMessageHeaderPane()
   document.getElementById("fileAttachmentMenu").setAttribute("disabled", "true");
   // disable the attachment box
   document.getElementById("attachmentView").collapsed = true;
+  document.getElementById("attachment-splitter").collapsed = true;
 }
 
 function OutputNewsgroups(headerEntry, headerValue)
@@ -1223,17 +1229,26 @@ 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 numAttachments = currentAttachments.length; 
   var expandedAttachmentBox = document.getElementById('attachmentView');
-  expandedAttachmentBox.collapsed = numAttachments <= 0;
+  var attachmentSplitter = document.getElementById('attachment-splitter');
 
-  if (numAttachments > 0 && !gBuildAttachmentsForCurrentMsg)
+  if (numAttachments <= 0)
   {
+    expandedAttachmentBox.collapsed = true;
+    attachmentSplitter.collapsed = true;
+  }
+  else if (!gBuildAttachmentsForCurrentMsg)
+  {
+    // 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.
+    expandedAttachmentBox.collapsed = false;
+    attachmentSplitter.collapsed = false;
+
+    // Remove height attribute, or the attachments box could be drawn badly:
+    expandedAttachmentBox.removeAttribute("height");
+
     var attachmentList = document.getElementById('attachmentList');
     for (index in currentAttachments)
     {
@@ -1262,7 +1277,19 @@ function displayAttachmentsForExpandedView()
       var item = attachmentList.appendChild(attachmentView);
     } // for each attachment
     gBuildAttachmentsForCurrentMsg = true;
-  }
+
+    // Switch overflow off (via css attribute selector) temporarily to get the preferred window height:
+    var attachmentContainer = document.getElementById('attachmentView');
+    attachmentContainer.setAttribute("attachmentOverflow", "false");
+    var attachmentHeight = expandedAttachmentBox.boxObject.height;
+    attachmentContainer.setAttribute("attachmentOverflow", "true");
+
+    // If the attachments box takes up too much of the message pane, downsize:
+    var maxAttachmentHeight = document.getElementById('messagepanebox').boxObject.height / 4;
+    if (attachmentHeight > maxAttachmentHeight)
+      attachmentHeight = maxAttachmentHeight;
+    expandedAttachmentBox.setAttribute("height", attachmentHeight);
+ }
 }
 
 // attachment --> the attachment struct containing all the information on the attachment
@@ -1271,7 +1298,7 @@ function setApplicationIconForAttachment(attachment, listitem, largeView)
 {
   var iconSize = largeView ? kLargeIcon : kSmallIcon;
   // generate a moz-icon url for the attachment so we'll show a nice icon next to it.
-  if ( attachment.contentType == 'text/x-moz-deleted' )
+  if (attachment.contentType == 'text/x-moz-deleted')
     listitem.setAttribute('image', 'chrome://messenger/skin/icons/message-mail-attach-del.png');
   else
     listitem.setAttribute('image', "moz-icon:" + "//" + attachment.displayName + "?size=" + iconSize + "&contentType=" + attachment.contentType);

mail/base/content/msgHdrViewOverlay.xul

@@ -162,10 +162,10 @@
 </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="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">
+<hbox id="attachmentView" collapsed="true">
+  <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>
 </hbox>
 

mail/locales/en-US/chrome/messenger/msgHdrViewOverlay.dtd

@@ -54,7 +54,6 @@
 <!ENTITY saveAll.label "Save All..">
 
 <!ENTITY editMessage.label "Edit Draft...">
-<!ENTITY attachmentsTree.label "Attachments:">
 
 <!ENTITY openAttachmentCmd.label    "Open">  
 <!ENTITY openAttachmentCmd.accesskey		"O">  

mail/themes/pinstripe/mail/messageHeader.css

@@ -43,8 +43,6 @@
 
 
 /* ::::: msg header toolbars ::::: */
-
-#attachmentView,
 #collapsedHeaderView,
 #expandedHeaderView {
   min-width: 1px;
@@ -60,7 +58,7 @@
 
 #attachmentList
 {
-  margin: 5px 30px 5px 15px;
+  margin: 0px;
 }
 
 /* XXX: Move all of the description attributes to the toolkit */
@@ -110,20 +108,24 @@ description[selectable="true"]:focus > descriptionitem[selected="true"]
   -moz-box-pack: center;
 }
 
-#attachmentView {
-  background-color: #E6E6E6;
-  border: 1px solid #C8C8C8;
-  -moz-border-radius: 7px;
-  margin: 6px;
-  padding: 4px;
+#attachmentView
+{
+  background-color: #E6E6E6;
+  border: 1px solid #C8C8C8;
+  -moz-border-radius: 7px;
+  margin: 0px 6px 6px 6px;
+  padding: 4px;  
+  min-height: 55px;
 }
 
-#attachmentLabel {
-  color: #505050;
-  -moz-box-orient: vertical;
-  -moz-box-align: center;
+#attachmentView[attachmentOverflow="true"] {
+  overflow: auto;
 }
 
+#attachment-splitter {
+  min-height: 7px;
+  border-top: 1px solid #C8C8C8;
+}
 
 /* ::::: msg header captions ::::: */
 
@@ -214,15 +216,13 @@ description[selectable="true"]:focus > descriptionitem[selected="true"]
 }
 
 .emailDisplayImage:hover, .emailDisplayImage[open] {
-list-style-image: url("chrome://messenger/skin/addressbook/icons/silhouette-hover.png");
+  list-style-image: url("chrome://messenger/skin/addressbook/icons/silhouette-hover.png");
 }
  
 /* ::::: email address twisty ::::: */
 
 .addresstwisty {
-
   padding-right: 5px;
-
   padding-top: 3px;
   list-style-image:url("chrome://global/skin/tree/treetwisty.png");
   height: 9px !important;

mail/themes/qute/mail/messageHeader.css

@@ -43,7 +43,6 @@
 
 /* ::::: msg header toolbars ::::: */
 
-#attachmentView,
 #collapsedHeaderView,
 #expandedHeaderView {
   min-width: 1px;
@@ -61,18 +60,9 @@
 
 #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;
+  margin: 0px;
   background-color: -moz-Field;
   color: -moz-FieldText;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  -moz-margin-start: 15px;
-  -moz-margin-end: 30px;
 }
 
 /* XXX: Move all of the description attributes to the toolkit */
@@ -118,9 +108,11 @@ description[selectable="true"]:focus > descriptionitem[selected="true"]
 
 #attachmentView
 {
-  border-top: 1px solid ThreeDShadow;
-  border-bottom: none;
-  background-color: -moz-Dialog;
+  min-height: 55px;
+}
+
+#attachmentView[attachmentOverflow="true"] {
+  overflow: auto;
 }
 
 /* ::::: msg header captions ::::: */