Bug 1547947 - [de-xbl] convert attachmentitem binding to richlistitem. r=mkmelin
authorAlessandro Castellani <alessandro@thunderbird.net>
Tue, 11 Jun 2019 15:07:24 -0700
changeset 35834 0f52c1933b47e5e15cc6e12d4962a90a0513d515
parent 35833 18519908af98b0500d7e21b9e3394eb54143de5c
child 35835 9400a58105984dd20dc914e32b9494b74e365d53
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1547947
Bug 1547947 - [de-xbl] convert attachmentitem binding to richlistitem. r=mkmelin
mail/base/content/attachmentList.css
mail/base/content/mailWidgets.js
mail/base/content/mailWidgets.xml
mail/base/content/msgAttachmentView.inc.xul
mail/base/content/msgHdrView.js
mail/test/mozmill/attachment/test-attachment-menus.js
mail/themes/linux/mail/attachmentList.css
mail/themes/linux/mail/messageHeader.css
mail/themes/osx/mail/attachmentList.css
mail/themes/osx/mail/messageHeader.css
mail/themes/windows/mail/attachmentList.css
mail/themes/windows/mail/messageHeader.css
--- a/mail/base/content/attachmentList.css
+++ b/mail/base/content/attachmentList.css
@@ -1,29 +1,27 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .attachmentList {
   -moz-appearance: listbox;
   -moz-user-focus: normal;
+  margin: 0;
+  padding: 3px;
 }
 
 .attachmentList[orient="horizontal"] {
   display: block;
 }
 
 .attachmentList[collapsed] {
   height: 0;
 }
 
-.attachmentItem {
-  -moz-binding: url("chrome://messenger/content/mailWidgets.xml#attachmentitem");
-}
-
 .attachmentcell-content {
   -moz-box-orient: horizontal;
 }
 
 .attachmentcell-text {
   -moz-box-orient: horizontal;
 }
 
@@ -43,16 +41,18 @@
 
 .attachmentList[view="tile"] .attachmentcell-text {
   -moz-box-align: center;
   -moz-box-orient: vertical;
 }
 
 .attachmentList[orient="horizontal"] .attachmentItem {
   min-width: 10em;
+  padding: 1px 3px;
+  border-radius: 2px;
 }
 
 .attachmentList[orient="horizontal"][view="tile"] .attachmentItem {
   min-width: 5em;
   max-width: 10em;
 }
 
 #attachmentMenuList > menu:hover > .text-link {
@@ -60,8 +60,16 @@
 }
 
 #attachmentName.notfound,
 .attachmentItem.notfound,
 #attachmentMenuList > menu.notfound,
 #appmenu_attachmentMenuList > menu.notfound {
   text-decoration-line: line-through;
 }
+
+.attachmentItem > * {
+  pointer-events: none;
+}
+
+.attachmentcell-size {
+  opacity: 0.6;
+}
\ No newline at end of file
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -1347,45 +1347,91 @@ class MozAttachmentlist extends MozEleme
 
   appendItem(attachment, name) {
     // -1 appends due to the way getItemAtIndex is implemented.
     return this.insertItemAt(-1, attachment, name);
   }
 
   insertItemAt(index, attachment, name) {
     let item = this.ownerDocument.createXULElement("richlistitem");
-    item.className = "attachmentItem";
+    item.classList.add("attachmentItem");
     item.setAttribute("name", name || attachment.name);
     item.setAttribute("role", "option");
 
+    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");
+    iconContainer.setAttribute("align", "center");
+    let icon = this.ownerDocument.createXULElement("image");
+    icon.classList.add("attachmentcell-icon");
+    iconContainer.appendChild(icon);
+
+    let textContainer = this.ownerDocument.createXULElement("hbox");
+    textContainer.setAttribute("flex", "1");
+    textContainer.classList.add("attachmentcell-text");
+    let textName = this.ownerDocument.createXULElement("hbox");
+    textName.setAttribute("flex", "1");
+    textName.classList.add("attachmentcell-nameselection");
+    let textLabel = this.ownerDocument.createXULElement("label");
+    textLabel.setAttribute("flex", "1");
+    textLabel.setAttribute("crop", "center");
+    textLabel.classList.add("attachmentcell-name");
+    textLabel.setAttribute("value", name || attachment.name);
+    textName.appendChild(textLabel);
+
+    let spacer = this.ownerDocument.createXULElement("spacer");
+    spacer.setAttribute("flex", "99999");
+
+    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);
+
     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";
     }
     item.setAttribute("size", size);
+    sizeLabel.setAttribute("value", size);
 
     // Pick out some nice icons (small and large) for the attachment
     if (attachment.contentType == "text/x-moz-deleted") {
       let base = "chrome://messenger/skin/icons/";
       item.setAttribute("image16", base + "attachment-deleted.png");
       item.setAttribute("image32", base + "attachment-deleted-large.png");
     } else {
       item.setAttribute("image16", "moz-icon://" + attachment.name +
         "?size=16&contentType=" + attachment.contentType);
       item.setAttribute("image32", "moz-icon://" + attachment.name +
         "?size=32&contentType=" + attachment.contentType);
     }
 
-    item.setAttribute("imagesize", this.sizes[this.getAttribute("view")] || 16);
+    let imageSize = this.sizes[this.getAttribute("view")] || 16;
+    item.setAttribute("imagesize", imageSize);
     item.setAttribute("context", this.getAttribute("itemcontext"));
     item.attachment = attachment;
 
+    let attr = "image" + imageSize;
+    if (item.hasAttribute(attr)) {
+      icon.setAttribute("src", item.getAttribute(attr));
+    }
+
     this.insertBefore(item, this.getItemAtIndex(index));
     return item;
   }
 
   /**
    * Find the attachmentitem node for the specified nsIMsgAttachment.
    */
   findItemForAttachment(aAttachment) {
--- a/mail/base/content/mailWidgets.xml
+++ b/mail/base/content/mailWidgets.xml
@@ -14,87 +14,16 @@
 %messengerDTD;
 ]>
 
 <bindings id="mailBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
 
-  <binding id="attachmentitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
-    <implementation>
-      <constructor><![CDATA[
-        this._updateImage();
-      ]]></constructor>
-
-      <property name="imageSize">
-        <getter><![CDATA[
-          return this.getAttribute("imagesize");
-        ]]></getter>
-        <setter><![CDATA[
-          this.setAttribute("imagesize", val);
-          this._updateImage();
-          return val;
-        ]]></setter>
-      </property>
-
-      <property name="image">
-        <getter><![CDATA[
-          return this.getAttribute("image");
-        ]]></getter>
-        <setter><![CDATA[
-          if (val)
-            this.setAttribute("image", val);
-          else
-            this.removeAttribute("image");
-          this._updateImage();
-          return val;
-        ]]></setter>
-      </property>
-
-      <method name="_updateImage">
-        <body><![CDATA[
-          if (!this.hasAttribute("image")) {
-            let icon = document.getAnonymousElementByAttribute(this, "anonid",
-                                                               "icon");
-            let attr = "image" + this.imageSize;
-            if (this.hasAttribute(attr))
-              icon.setAttribute("src", this.getAttribute(attr));
-          }
-        ]]></body>
-      </method>
-    </implementation>
-    <!-- Below, we want the name label to flex but not be any bigger than
-         necessary, so add a spacer with a huge flex value. -->
-    <content>
-      <xul:hbox class="attachmentcell-content" flex="1">
-        <xul:hbox align="center">
-          <xul:image class="attachmentcell-icon" anonid="icon"
-                     xbl:inherits="src=image"/>
-        </xul:hbox>
-        <xul:hbox class="attachmentcell-text" flex="1">
-          <xul:hbox class="attachmentcell-nameselection" flex="1">
-              <xul:label class="attachmentcell-name" xbl:inherits="value=name"
-                         flex="1" crop="center"/>
-          </xul:hbox>
-          <xul:spacer flex="99999"/>
-          <xul:label class="attachmentcell-size" xbl:inherits="value=size"/>
-        </xul:hbox>
-      </xul:hbox>
-    </content>
-    <handlers>
-      <handler event="click" button="0" clickcount="2"><![CDATA[
-        let evt = document.createEvent("XULCommandEvent");
-        evt.initCommandEvent("command", true, true, window, 0, event.ctrlKey,
-                             event.altKey, event.shiftKey, event.metaKey, null);
-        this.dispatchEvent(evt);
-      ]]></handler>
-    </handlers>
-  </binding>
-
   <binding id="splitmenu">
     <content>
       <xul:hbox anonid="menuitem" flex="1"
                 class="splitmenu-menuitem"
                 xbl:inherits="iconic,label,disabled,onclick=oncommand,_moz-menuactive=active"/>
       <xul:menu anonid="menu" class="splitmenu-menu"
                 xbl:inherits="disabled,_moz-menuactive=active"
                 oncommand="event.stopPropagation();">
--- a/mail/base/content/msgAttachmentView.inc.xul
+++ b/mail/base/content/msgAttachmentView.inc.xul
@@ -91,15 +91,14 @@
                                 </toolbarbutton>
                               </toolbaritem>
                             </hbox>
                           </vbox>
                         </hbox>
                         <richlistbox is="attachment-list" id="attachmentList"
                                      class="attachmentList"
                                      orient="horizontal"
-                                     flex="1"
                                      seltype="multiple"
                                      context="attachmentListContext"
                                      itemcontext="attachmentItemContext"
                                      role="listbox"
                                      ondragstart="nsDragAndDrop.startDrag(event, attachmentListDNDObserver);"
                                      ondragover="nsDragAndDrop.dragOver(event, attachmentListDNDObserver);"/>
--- a/mail/base/content/msgHdrView.js
+++ b/mail/base/content/msgHdrView.js
@@ -2343,19 +2343,18 @@ function displayAttachmentsForExpandedVi
       attachmentitem.setAttribute("onmouseover",
                                   `MsgStatusFeedback.setOverLink("${displayUrl}")`);
       attachmentitem.setAttribute("onmouseout",
                                   "MsgStatusFeedback.setOverLink('')");
       attachmentitem.setAttribute("onfocus",
                                   `MsgStatusFeedback.setOverLink("${displayUrl}")`);
       attachmentitem.setAttribute("onblur",
                                   "MsgStatusFeedback.setOverLink('')");
-      let name = document.getAnonymousNodes(attachmentitem)[0]
-        .getElementsByClassName("attachmentcell-name");
-      name[0].classList.add("text-link");
+
+      attachmentitem.classList.add("text-link");
 
       if (attachment.isLinkAttachment) {
         if (index == 0) {
           attachment.size = currentAttachments[index].size;
         }
       }
 
       if (!attachment.hasFile) {
@@ -2438,17 +2437,25 @@ function updateAttachmentsDisplay(attach
       sizeStr = bundle.getString("attachmentSizeUnknown");
     } else {
       sizeStr = messenger.formatFileSize(attachmentInfo.size);
     }
 
     // The attachment listitem.
     attachmentItem.classList.remove("busy");
     attachmentItem.removeAttribute("image");
-    attachmentItem._updateImage();
+
+    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));
+      }
+    }
+
     if (attachmentInfo.hasFile) {
       attachmentItem.setAttribute("size", sizeStr);
       attachmentItem.removeAttribute("tooltiptext");
       attachmentItem.classList.remove("notfound");
     } else {
       attachmentItem.removeAttribute("size");
       attachmentItem.setAttribute("tooltiptext", tooltiptextExternalNotFound);
       attachmentItem.classList.add("notfound");
--- a/mail/test/mozmill/attachment/test-attachment-menus.js
+++ b/mail/test/mozmill/attachment/test-attachment-menus.js
@@ -353,28 +353,19 @@ function check_toolbar_menu_states_multi
  * Check that the menu states in the single item context menu are correct
  *
  * @param expected a dictionary containing the expected states
  */
 function check_menu_states_single(index, expected) {
   let attachmentList = mc.e("attachmentList");
   let node = attachmentList.getItemAtIndex(index);
 
-  // So this next bit is a little ugly. Attachment items themselves ignore
-  // mouse events, but the attachment name always responds to them, so that's
-  // what we want to interact with.  We drag out the attachment name
-  // by querying for it via getAnonymousElementByAttribute.
-  let clickable = mc.window
-                    .document
-                    .getAnonymousElementByAttribute(node, "class",
-                                                    "attachmentcell-nameselection");
-
   attachmentList.selectItem(node);
   let menu = mc.getMenu("#attachmentItemContext");
-  menu.open(new elib.Elem(clickable));
+  menu.open(new elib.Elem(node));
   wait_for_popup_to_open(mc.e("attachmentItemContext"));
 
   try {
     assert_shown("context-openAttachment", true);
     assert_shown("context-saveAttachment", true);
     assert_shown("context-menu-separator", true);
     assert_shown("context-detachAttachment", true);
     assert_shown("context-deleteAttachment", true);
--- a/mail/themes/linux/mail/attachmentList.css
+++ b/mail/themes/linux/mail/attachmentList.css
@@ -11,12 +11,8 @@
   width: 16px;
   height: 16px;
 }
 
 .attachmentcell-name,
 .attachmentcell-size {
   padding-top: 1px;
 }
-
-.attachmentcell-size {
-  color: GrayText;
-}
--- a/mail/themes/linux/mail/messageHeader.css
+++ b/mail/themes/linux/mail/messageHeader.css
@@ -88,16 +88,17 @@
 
 #attachmentView {
   border-top: 1px solid ThreeDShadow;
 }
 
 #attachmentBar {
   background-color: -moz-dialog;
   color: -moz-dialogtext;
+  padding: 3px 0;
 }
 
 /* ::::: msg header captions ::::: */
 
 #msgHeaderView {
   font-size: 100%;
   padding: 0 !important;
   margin: 0 !important;
--- a/mail/themes/osx/mail/attachmentList.css
+++ b/mail/themes/osx/mail/attachmentList.css
@@ -13,12 +13,8 @@
   width: 16px;
   height: 16px;
 }
 
 .attachmentcell-name,
 .attachmentcell-size {
   padding-top: 1px;
 }
-
-.attachmentcell-size {
-  color: #999;
-}
--- a/mail/themes/osx/mail/messageHeader.css
+++ b/mail/themes/osx/mail/messageHeader.css
@@ -84,29 +84,26 @@
 
 #attachmentView {
   border-top: 1px solid ThreeDShadow;
 }
 
 #attachmentBar {
   background-color: #fff;
   color: -moz-dialogtext;
+  padding: 3px 0;
 }
 
 /* ::::: attachment list ::::: */
 
 .attachmentcell-name,
 .attachmentcell-size {
   padding-top: 1px;
 }
 
-.attachmentcell-size {
-  color: GrayText;
-}
-
 .attachmentList:focus .attachmentItem[selected="true"][current="true"] {
   outline: 1px dotted #F3D982;
 }
 
 .attachmentList:focus .attachmentItem[current="true"] {
   outline: 1px dotted;
   outline-offset: -1px;
 }
--- a/mail/themes/windows/mail/attachmentList.css
+++ b/mail/themes/windows/mail/attachmentList.css
@@ -12,20 +12,16 @@
   height: 16px;
 }
 
 .attachmentcell-name,
 .attachmentcell-size {
   padding-top: 1px;
 }
 
-.attachmentcell-size {
-  color: GrayText;
-}
-
 @media (-moz-windows-default-theme) {
   .attachmentItem {
     border: 1px solid transparent;
     color: -moz-FieldText !important;
     background-color: transparent;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     padding: 1px;
--- a/mail/themes/windows/mail/messageHeader.css
+++ b/mail/themes/windows/mail/messageHeader.css
@@ -72,16 +72,17 @@
 #attachmentSize {
   margin: 0;
   margin-inline-start: 8px;
 }
 
 #attachmentBar {
   color: -moz-dialogtext;
   background-color: -moz-Dialog;
+  padding: 3px 0;
 }
 
 .findbar-container {
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
 /* ::::: msg header captions ::::: */