Bug 1562200 - Attachment list messagepane display regressions. r=jorgk
authorAlessandro Castellani <alessandro@thunderbird.net>
Thu, 04 Jul 2019 11:54:47 -0700
changeset 36034 8fbca3217e6e712c53529bc952649ce9c7fbb15b
parent 36033 63f12343e6576da40e0098c70f04ee7790dee33b
child 36035 2d6811274bb185fd102ddb53118e99cdd4135d72
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersjorgk
bugs1562200
Bug 1562200 - Attachment list messagepane display regressions. r=jorgk
mail/base/content/attachmentList.css
mail/base/content/mailWidgets.js
mail/base/content/msgHdrView.js
mail/components/compose/content/MsgComposeCommands.js
--- a/mail/base/content/attachmentList.css
+++ b/mail/base/content/attachmentList.css
@@ -66,10 +66,19 @@
   text-decoration-line: line-through;
 }
 
 .attachmentItem > * {
   pointer-events: none;
 }
 
 .attachmentcell-size {
+  color: -moz-FieldText;
   opacity: 0.6;
-}
\ No newline at end of file
+}
+
+.attachmentItem:not(.notfound).text-link:hover {
+  text-decoration: none !important;
+}
+
+.attachmentItem:not(.notfound).text-link:hover label.attachmentcell-name {
+  text-decoration: underline;
+}
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -1351,16 +1351,20 @@ class MozAttachmentlist extends MozEleme
   }
 
   insertItemAt(index, attachment, name) {
     let item = this.ownerDocument.createXULElement("richlistitem");
     item.classList.add("attachmentItem");
     item.setAttribute("name", name || attachment.name);
     item.setAttribute("role", "option");
 
+    let itemContainer = this.ownerDocument.createXULElement("hbox");
+    itemContainer.setAttribute("flex", "1");
+    itemContainer.classList.add("attachmentcell-text");
+
     item.addEventListener("dblclick", (event) => {
       let evt = document.createEvent("XULCommandEvent");
       evt.initCommandEvent("command", true, true, window, 0, event.ctrlKey,
         event.altKey, event.shiftKey, event.metaKey, null);
       event.originalTarget.dispatchEvent(evt);
     });
 
     let iconContainer = this.ownerDocument.createXULElement("hbox");
@@ -1387,18 +1391,19 @@ class MozAttachmentlist extends MozEleme
 
     let sizeLabel = this.ownerDocument.createXULElement("label");
     sizeLabel.classList.add("attachmentcell-size");
 
     textContainer.appendChild(textName);
     textContainer.appendChild(spacer);
     textContainer.appendChild(sizeLabel);
 
-    item.appendChild(iconContainer);
-    item.appendChild(textContainer);
+    itemContainer.appendChild(iconContainer);
+    itemContainer.appendChild(textContainer);
+    item.appendChild(itemContainer);
 
     let size;
     if (attachment.size != null && attachment.size != -1) {
       size = this.messenger.formatFileSize(attachment.size);
     } else {
       // Use a zero-width space so the size label has the right height.
       size = "\u200b";
     }
--- a/mail/base/content/msgHdrView.js
+++ b/mail/base/content/msgHdrView.js
@@ -2333,17 +2333,16 @@ function displayAttachmentsForExpandedVi
   for (let attachmentitem of attachmentList.children) {
     let attachment = attachmentitem.attachment;
     if (attachment.isDeleted) {
       attachmentitem.classList.add("notfound");
     }
 
     if (attachment.isExternalAttachment) {
       displayUrl = attachment.displayUrl;
-      attachmentitem.textContent = displayUrl;
       attachmentitem.setAttribute("tooltiptext", "");
       attachmentitem.setAttribute("onmouseover",
                                   `MsgStatusFeedback.setOverLink("${displayUrl}")`);
       attachmentitem.setAttribute("onmouseout",
                                   "MsgStatusFeedback.setOverLink('')");
       attachmentitem.setAttribute("onfocus",
                                   `MsgStatusFeedback.setOverLink("${displayUrl}")`);
       attachmentitem.setAttribute("onblur",
@@ -2446,22 +2445,25 @@ function updateAttachmentsDisplay(attach
     if (!attachmentItem.hasAttribute("image")) {
       let icon = attachmentItem.querySelector("image");
       let attr = "image" + attachmentItem.getAttribute("imagesize");
       if (icon != null && attachmentItem.hasAttribute(attr)) {
         icon.setAttribute("src", attachmentItem.getAttribute(attr));
       }
     }
 
+    let sizeLabel = attachmentItem.querySelector(".attachmentcell-size");
     if (attachmentInfo.hasFile) {
       attachmentItem.setAttribute("size", sizeStr);
+      sizeLabel.setAttribute("value", sizeStr);
       attachmentItem.removeAttribute("tooltiptext");
       attachmentItem.classList.remove("notfound");
     } else {
       attachmentItem.removeAttribute("size");
+      sizeLabel.setAttribute("value", "");
       attachmentItem.setAttribute("tooltiptext", tooltiptextExternalNotFound);
       attachmentItem.classList.add("notfound");
     }
 
     // The attachmentbar.
     updateSaveAllAttachmentsButton();
     attachmentSize.value = getAttachmentsTotalSizeStr();
     let attachemtsBusy = attachmentList.querySelectorAll(".attachmentItem.busy");
--- a/mail/components/compose/content/MsgComposeCommands.js
+++ b/mail/components/compose/content/MsgComposeCommands.js
@@ -1524,17 +1524,19 @@ async function uploadCloudAttachment(att
   // and show a "connecting" icon for the attachment.
   attachment.sendViaCloud = true;
   gNumUploadingAttachments++;
   updateSendCommands(true);
 
   let bucket = document.getElementById("attachmentBucket");
   let attachmentItem = bucket.findItemForAttachment(attachment);
   if (attachmentItem) {
+    let itemIcon = attachmentItem.querySelector(".attachmentcell-icon");
     attachmentItem.image = "chrome://global/skin/icons/loading.png";
+    itemIcon.setAttribute("src", "chrome://global/skin/icons/loading.png");
     attachmentItem.setAttribute("tooltiptext",
       getComposeBundle().getFormattedString("cloudFileUploadingTooltip", [
         cloudFileAccounts.getDisplayName(cloudFileAccount),
       ]));
     attachmentItem.uploading = true;
     attachmentItem.cloudFileAccount = cloudFileAccount;
   }
 
@@ -1559,22 +1561,25 @@ async function uploadCloudAttachment(att
       attachmentItem.setAttribute("tooltiptext",
         getComposeBundle().getFormattedString("cloudFileUploadedTooltip", [
           cloudFileAccounts.getDisplayName(cloudFileAccount),
         ]));
       attachmentItem.uploading = false;
 
       // Set the icon for the attachment.
       let iconURL = cloudFileAccount.iconURL;
+      let itemIcon = attachmentItem.querySelector(".attachmentcell-icon");
       if (iconURL) {
         attachmentItem.image = iconURL;
+        itemIcon.setAttribute("src", iconURL);
       } else {
         // Should we use a generic "cloud" icon here? Or an overlay icon?
         // I think the provider should provide an icon, end of story.
         attachmentItem.image = null;
+        itemIcon.setAttribute("src", "");
       }
 
       attachmentItem.dispatchEvent(
         new CustomEvent("attachment-uploaded", { bubbles: true, cancelable: true })
       );
     }
   } else {
     let title;
@@ -1687,29 +1692,34 @@ function attachToCloud(event) {
 function attachToCloudRepeat(upload, account) {
   let file = FileUtils.File(upload.path);
   let attachment = FileToAttachment(file);
   attachment.contentLocation = upload.url;
   attachment.sendViaCloud = true;
   attachment.cloudFileAccountKey = account.accountKey;
 
   AddAttachments([attachment], function(item) {
+    let itemIcon = item.querySelector(".attachmentcell-icon");
+    let itemLabel = item.querySelector(".attachmentcell-name");
     item.account = account;
     item.setAttribute("name", upload.leafName);
+    itemLabel.setAttribute("value", upload.leafName);
     item.cloudFileUpload = {
       ...upload,
       repeat: true,
     };
     let iconURL = account.iconURL;
     if (iconURL) {
       item.image = iconURL;
+      itemIcon.setAttribute("src", iconURL);
     } else {
       // Should we use a generic "cloud" icon here? Or an overlay icon?
       // I think the provider should provide an icon, end of story.
       item.image = null;
+      itemIcon.setAttribute("src", "");
     }
     item.dispatchEvent(
       new CustomEvent("attachment-uploaded", { bubbles: true, cancelable: true })
     );
   });
 }
 
 /**
@@ -4774,18 +4784,20 @@ function RenameSelectedAttachment() {
                       getComposeBundle().getString("renameAttachmentMessage"),
                       attachmentName,
                       null,
                       {value: 0})) {
     if (attachmentName.value == "")
       return; // name was not filled, bail out
 
     let originalName = item.attachment.name;
+    let itemLabel = item.querySelector(".attachmentcell-name");
     item.attachment.name = attachmentName.value;
     item.setAttribute("name", attachmentName.value);
+    itemLabel.setAttribute("value", attachmentName.value);
 
     gContentChanged = true;
 
     let event = document.createEvent("CustomEvent");
     event.initCustomEvent("attachment-renamed", true, true, originalName);
     item.dispatchEvent(event);
   }