Bug 1428631 - Show a placeholder when the attachment bucket with attachments is collapsed. r=jorgk,aceman

mail/components/compose/content/MsgComposeCommands.js

@@ -687,10 +687,8 @@ var defaultController = {
           cmdToggleAttachmentPane.setAttribute("checked", "true");
         }
 
-        // Enable this command when the compose window isn't locked;
-        // disable for full, visible bucket (effective for menu only; command's
-        // shortcut key will still work via bucket's identical access key).
-        return (!gWindowLocked && !(bucket.itemCount > 0 && paneShown))
+        // Enable this command when the compose window isn't locked.
+        return !gWindowLocked;
       },
       doCommand: function() {
         toggleAttachmentPane();
@@ -5188,7 +5186,7 @@ function moveSelectedAttachments(aDirection)
 }
 
 /**
- * Toggle attachment pane view state: show or hide it (only if bucket is empty).
+ * Toggle attachment pane view state: show or hide it.
  * If aAction parameter is omitted, auto-cycling of view states, bias for "show".
  * Note: In the current UI layout, forcing "hide" is not recommended for full
  *       bucket as it may violate ux-error-prevention.
@@ -5201,18 +5199,16 @@ function moveSelectedAttachments(aDirection)
 function toggleAttachmentPane(aAction = "toggle") {
   let bucket = GetMsgAttachmentElement();
   let attachmentsBox = document.getElementById("attachments-box");
-  let emptyBucket = (bucket.itemCount == 0);
   let bucketHasFocus = (document.activeElement == bucket);
   let attachmentBucketSizer = document.getElementById("attachmentbucket-sizer");
 
   if (aAction == "toggle") {
-    if (!attachmentsBox.collapsed && bucket.itemCount == 0) {
-      // Menu click (View > Attachment Pane) with empty, shown bucket: Hide it.
+    if (!attachmentsBox.collapsed) {
+      // Menu click (View > Attachment Pane) with shown bucket: Hide it.
       aAction = "hide"
     } else {
       // Menu click with hidden bucket (empty or full)
-      // or cmd_toggleAttachmentPane via shortcut key;
-      // we disable the menu to prevent hiding full and shown bucket.
+      // or cmd_toggleAttachmentPane via shortcut key.
       aAction = "show";
     }
   }
@@ -5221,6 +5217,7 @@ function toggleAttachmentPane(aAction = "toggle") {
     case "show":
       attachmentsBox.collapsed = false;
       attachmentBucketSizer.collapsed = false;
+      attachmentBucketSizer.setAttribute("state", "");
       if (!bucketHasFocus)
         bucket.focus();
       break;
@@ -5229,7 +5226,7 @@ function toggleAttachmentPane(aAction = "toggle") {
       if (bucketHasFocus)
         SetMsgBodyFrameFocus();
       attachmentsBox.collapsed = true;
-      attachmentBucketSizer.collapsed = true;
+      attachmentBucketSizer.setAttribute("state", "collapsed");
       break;
 
     case "focus":
@@ -5459,11 +5456,11 @@ function AttachmentElementHasItems()
 
 function attachmentBucketMarkEmptyBucket() {
   let attachmentBucket = GetMsgAttachmentElement();
-  let bucketSizer = document.getElementById("attachmentbucket-sizer");
+  let attachmentsBox = document.getElementById("attachments-box");
   if (attachmentBucket.itemCount > 0) {
-    attachmentBucket.removeAttribute("empty");
+    attachmentsBox.removeAttribute("empty");
   } else {
-    attachmentBucket.setAttribute("empty", "true");
+    attachmentsBox.setAttribute("empty", "true");
   }
 }
 

mail/components/compose/content/messengercompose.xul

@@ -2021,6 +2021,9 @@
                           ondragstart="nsDragAndDrop.startDrag(event, attachmentBucketDNDObserver);"
                           onblur="attachmentBucketOnBlur();"/>
         </vbox>
+        <vbox id="attachments-placeholder-box"
+              hidden="true"
+              onclick="goDoCommand('cmd_toggleAttachmentPane')"/>
       </hbox>
     </toolbar>
 

mail/themes/linux/mail/compose/messengercompose.css

@@ -11,7 +11,7 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#attachmentBucket[empty]:focus {
+#attachments-box[empty] > #attachmentBucket:focus {
   box-shadow: 0 0 2px Highlight inset, 0 0 2px Highlight inset;
 }
 

mail/themes/osx/mail/compose/messengercompose.css

@@ -28,7 +28,7 @@
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
-#attachmentBucket[empty]:focus {
+#attachments-box[empty] > #attachmentBucket:focus {
   box-shadow: 0 0 1.5px 1px -moz-mac-focusring inset;
 }
 

mail/themes/shared/mail/messengercompose.css

@@ -14,6 +14,22 @@
   padding: 1px;
 }
 
+#attachments-box[collapsed="true"]:not([empty="true"]) + #attachments-placeholder-box {
+  display: -moz-box;
+  width: 32px;
+  background: url("chrome://messenger/skin/icons/attach.svg") center / 32px no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#attachments-box[collapsed="true"]:not([empty="true"]) + #attachments-placeholder-box:hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+#attachments-box[collapsed="true"]:not([empty="true"]) + #attachments-placeholder-box:hover:active {
+  background-color: var(--toolbarbutton-active-background);
+}
+
 #compose-toolbox > toolbar {
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;

mail/themes/windows/mail/compose/messengercompose.css

@@ -13,13 +13,14 @@
 
 #attachmentBucket {
   -moz-appearance: none;
-  border-top: 1px solid #A9B7C9; /* The same color as the splitters */
-  border-bottom: 1px solid #A9B7C9;
+  border-top: 1px solid #a9b7c9; /* The same color as the splitters */
+  border-inline-start: 1px solid #a9b7c9;
+  border-bottom: 1px solid #a9b7c9;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
-#attachmentBucket[empty]:focus {
+#attachments-box[empty] > #attachmentBucket:focus {
   box-shadow: 0 0 1px Highlight inset, 0 0 1px Highlight inset;
 }
 
@@ -629,7 +630,7 @@ toolbar:not(:-moz-lwtheme) {
   width: 5px;
   margin-inline-end: -4px;
   border-inline-end-width: 0;
-  border-inline-start: 1px solid #a9b7c9;
+  border-inline-start: 1px solid transparent;
   background-color: transparent;
 }