Bug #223340 --> redesign mail attachments UI to fix the problem where multiple attachments 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
 CVS: ----------------------------------------------------------------------


git-svn-id: svn://10.0.0.236/branches/MOZILLA_1_8_BRANCH@220503 18797224-902f-48f8-a5cc-f745e15eee43

mozilla/mail/base/content/messageWindow.xul

@@ -162,6 +162,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"/>
     <toolbar id="FindToolbar"/>
   </vbox>  

mozilla/mail/base/content/messenger.xul

@@ -401,6 +401,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"/>
           <toolbar id="FindToolbar"/>
         </vbox>  

mozilla/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)
@@ -1224,16 +1230,25 @@ function cloneAttachment(aAttachment)
 function displayAttachmentsForExpandedView()
 {
   var numAttachments = currentAttachments.length;
+  var expandedAttachmentBox = document.getElementById('attachmentView');
+  var attachmentSplitter = document.getElementById('attachment-splitter');
   
+  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;
 
-  var expandedAttachmentBox = document.getElementById('attachmentView');
-  expandedAttachmentBox.collapsed = numAttachments <= 0;
+    // Remove height attribute, or the attachments box could be drawn badly:
+    expandedAttachmentBox.removeAttribute("height");
 
-  if (numAttachments > 0 && !gBuildAttachmentsForCurrentMsg)
-  {
     var attachmentList = document.getElementById('attachmentList');
     for (index in currentAttachments)
     {
@@ -1262,6 +1277,18 @@ 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);
   }
 }
 

mozilla/mail/base/content/msgHdrViewOverlay.xul

@@ -163,10 +163,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;"/>
+<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">
+               onclick="attachmentListClick(event);" ondraggesture="nsDragAndDrop.startDrag(event,attachmentAreaDNDObserver);"
+               ondragover="nsDragAndDrop.dragOver(event, attachmentAreaDNDObserver);" context="attachmentListContext">
   </description>
 </hbox>
 

mozilla/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,25 @@ description[selectable="true"]:focus > descriptionitem[selected="true"]
   -moz-box-pack: center;
 }
 
-#attachmentView {
-  background-color: #E6E6E6;
+#attachmentView
+{
+  background-color: #E6E6E6;
+  border: 1px solid #C8C8C8;
+  -moz-border-radius: 7px;
+  margin: 0px 6px 6px 6px;
+  padding: 4px;  
+  min-height: 55px;
+}
+
+#attachmentView[attachmentOverflow="true"] {
+  overflow: auto;
+}
+
+#attachment-splitter {
+  min-height: 7px;
   border-top: 1px solid #C8C8C8;
-  margin: 6px;
-  padding: 4px;
 }
 
-#attachmentLabel {
-  color: #505050;
-  -moz-box-orient: vertical;
-  -moz-box-align: center;
-}
-
-
 /* ::::: msg header captions ::::: */
 
 #msgHeaderView {

mozilla/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 ::::: */