From e6893e77c8bcc544cd95863ec0211c770e5b7c60 Mon Sep 17 00:00:00 2001
From: Richard Marti <richard.marti@gmail.com>
Date: Sat, 21 Apr 2018 20:27:33 +0200
Subject: [PATCH] Bug 1428631 - Show a placeholder when the attachment bucket
 with attachments is collapsed. r=jorgk,aceman

---
 .../compose/content/MsgComposeCommands.js     | 25 ++++++++-----------
 .../compose/content/messengercompose.xul      |  3 +++
 .../linux/mail/compose/messengercompose.css   |  2 +-
 .../osx/mail/compose/messengercompose.css     |  2 +-
 mail/themes/shared/mail/messengercompose.css  | 16 ++++++++++++
 .../windows/mail/compose/messengercompose.css |  9 ++++---
 6 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/mail/components/compose/content/MsgComposeCommands.js b/mail/components/compose/content/MsgComposeCommands.js
index 17f0d9c83b..85678f1df4 100644
--- a/mail/components/compose/content/MsgComposeCommands.js
+++ b/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");
   }
 }
 
diff --git a/mail/components/compose/content/messengercompose.xul b/mail/components/compose/content/messengercompose.xul
index ac54e9caa2..bc4cd6b93a 100644
--- a/mail/components/compose/content/messengercompose.xul
+++ b/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>
 
diff --git a/mail/themes/linux/mail/compose/messengercompose.css b/mail/themes/linux/mail/compose/messengercompose.css
index 422d026451..48d14ed932 100644
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/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;
 }
 
diff --git a/mail/themes/osx/mail/compose/messengercompose.css b/mail/themes/osx/mail/compose/messengercompose.css
index 0504978ba7..9fc31b5656 100644
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/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;
 }
 
diff --git a/mail/themes/shared/mail/messengercompose.css b/mail/themes/shared/mail/messengercompose.css
index 1912bb9173..9907fcf798 100644
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/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;
diff --git a/mail/themes/windows/mail/compose/messengercompose.css b/mail/themes/windows/mail/compose/messengercompose.css
index 4dca340f87..9be328ba59 100644
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/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;
 }