Bug 1502988 - Adding treecol-image custom element; r=mkmelin
authorArshad Khan <arshdkhn1@gmail.com>
Tue, 30 Oct 2018 18:12:38 +0530
changeset 33646 8b5b4aa261935a671fcec24cb9f6249f72555fad
parent 33645 392208e3b586f1022d8b8e4a540ee49a3d215ff3
child 33647 5929093fee143b935be3b26333e6ab541c4f271f
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersmkmelin
bugs1502988
Bug 1502988 - Adding treecol-image custom element; r=mkmelin
mail/base/content/SearchDialog.xul
mail/base/content/mailWidgets.js
mail/base/content/messenger.xul
--- a/mail/base/content/SearchDialog.xul
+++ b/mail/base/content/SearchDialog.xul
@@ -124,52 +124,52 @@
       <vbox id="searchResultListBox" flex="1">
         <tree id="threadTree" class="plain" persist="lastfoldersent" flex="1"
               enableColumnDrag="true" _selectDelay="500" lastfoldersent="false"
               disableKeyNavigation="true"
               context="mailContext"
               onkeydown="ThreadPaneKeyDown(event);"
               onselect="ThreadPaneSelectionChanged();">
           <treecols id="threadCols" pickertooltiptext="&columnChooser2.tooltip;">
-            <treecol id="threadCol" persist="hidden ordinal" fixed="true" cycler="true"
+            <treecol id="threadCol" is="treecol-image" persist="hidden ordinal" fixed="true" cycler="true"
                      class="treecol-image threadColumnHeader" currentView="unthreaded"
                      label="&threadColumn.label;" tooltiptext="&threadColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="subjectCol" persist="hidden ordinal width" flex="7" ignoreincolumnpicker="true"
                      label="&subjectColumn.label;" tooltiptext="&subjectColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
-            <treecol id="junkStatusCol" persist="hidden ordinal width" fixed="true" cycler="true"
+            <treecol id="junkStatusCol" is="treecol-image" persist="hidden ordinal width" fixed="true" cycler="true"
                      class="treecol-image junkStatusHeader"
                      label="&junkStatusColumn.label;" tooltiptext="&junkStatusColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="senderCol" persist="hidden swappedhidden ordinal width" flex="4"
                      hidden="false" swappedhidden="true"
                      label="&fromColumn.label;" tooltiptext="&fromColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="recipientCol" persist="hidden swappedhidden ordinal width" flex="4"
                      hidden="true" swappedhidden="false"
                      label="&recipientColumn.label;" tooltiptext="&recipientColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="correspondentCol" persist="hidden ordinal width" flex="4"
                      label="&correspondentColumn.label;" tooltiptext="&correspondentColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
-            <treecol id="unreadButtonColHeader" persist="hidden ordinal" fixed="true" cycler="true"
+            <treecol id="unreadButtonColHeader" is="treecol-image" persist="hidden ordinal" fixed="true" cycler="true"
                      class="treecol-image readColumnHeader"
                      label="&readColumn.label;" tooltiptext="&readColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="dateCol" persist="hidden ordinal width" flex="2"
                      label="&dateColumn.label;" tooltiptext="&dateColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="statusCol" persist="hidden ordinal width" flex="1" hidden="true"
                      label="&statusColumn.label;" tooltiptext="&statusColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="sizeCol" persist="hidden ordinal width" flex="1" hidden="true"
                      label="&sizeColumn.label;" tooltiptext="&sizeColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
-            <treecol id="flaggedCol" persist="hidden ordinal" fixed="true" cycler="true" hidden="true"
+            <treecol id="flaggedCol" is="treecol-image" persist="hidden ordinal" fixed="true" cycler="true" hidden="true"
                      class="treecol-image flagColumnHeader"
                      label="&starredColumn.label;" tooltiptext="&starredColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="tagsCol" persist="hidden ordinal width" flex="1" hidden="true"
                      label="&tagsColumn.label;" tooltiptext="&tagsColumn2.tooltip;"/>
             <splitter class="tree-splitter"/>
             <treecol id="priorityCol" persist="hidden ordinal width" flex="1"
                      label="&priorityColumn.label;" tooltiptext="&priorityColumn2.tooltip;"/>
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -244,15 +244,48 @@ class MozMailEmailaddress extends MozXUL
     });
 
     emailPresenceImage.addEventListener("click", (event) => {
       onClickEmailPresence(event, this);
     });
   }
 }
 
+class MozTreecolImage extends customElements.get("treecol") {
+  static get observedAttributes() {
+    return ["src"];
+  }
+
+  connectedCallback() {
+    this.image = document.createElement("image");
+    this.image.classList.add("treecol-icon");
+
+    this.appendChild(this.image);
+    this._updateAttributes();
+  }
+
+  attributeChangedCallback() {
+    this._updateAttributes();
+  }
+
+  _updateAttributes() {
+    if (!this.isConnected || !this.image) {
+      return;
+    }
+
+    const src = this.getAttribute("src");
+
+    if (src != null) {
+      this.image.setAttribute("src", src);
+    } else {
+      this.image.removeAttribute("src");
+    }
+  }
+}
+
 customElements.define("mail-headerfield", MozMailHeaderfield);
 customElements.define("mail-urlfield", MozMailUrlfield);
 customElements.define("mail-tagfield", MozMailHeaderfieldTags);
 customElements.define("mail-newsgroup", MozMailNewsgroup);
 customElements.define("mail-newsgroups-headerfield", MozMailNewsgroupsHeaderfield);
 customElements.define("mail-messageid", MozMailMessageid);
 customElements.define("mail-emailaddress", MozMailEmailaddress);
+customElements.define("treecol-image", MozTreecolImage, { extends: "treecol" });
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -561,48 +561,48 @@
                           lastfoldersent="false"
                           keepcurrentinview="true"
                           disableKeyNavigation="true"
                           context="mailContext"
                           onkeydown="ThreadPaneKeyDown(event);"
                           onselect="ThreadPaneSelectionChanged();"
                           >
                       <treecols id="threadCols" pickertooltiptext="&columnChooser2.tooltip;">
-                        <treecol id="threadCol" fixed="true" cycler="true"
+                        <treecol is="treecol-image" id="threadCol" fixed="true" cycler="true"
                                  class="treecol-image threadColumnHeader" currentView="unthreaded"
                                  label="&threadColumn.label;" tooltiptext="&threadColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
-                        <treecol id="flaggedCol" fixed="true" cycler="true"
+                        <treecol is="treecol-image" id="flaggedCol" fixed="true" cycler="true"
                                  class="treecol-image flagColumnHeader"
                                  label="&starredColumn.label;" tooltiptext="&starredColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
-                        <treecol id="attachmentCol" fixed="true"
+                        <treecol is="treecol-image" id="attachmentCol" fixed="true"
                                  class="treecol-image attachmentColumnHeader"
                                  label="&attachmentColumn.label;" tooltiptext="&attachmentColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
                         <treecol id="subjectCol" persist="width" flex="7" ignoreincolumnpicker="true"
                                  label="&subjectColumn.label;" tooltiptext="&subjectColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
-                        <treecol id="unreadButtonColHeader" fixed="true" cycler="true"
+                        <treecol is="treecol-image" id="unreadButtonColHeader" fixed="true" cycler="true"
                                  class="treecol-image readColumnHeader"
                                  label="&readColumn.label;" tooltiptext="&readColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
                         <treecol id="senderCol" persist="width" flex="4"
                                  hidden="false" swappedhidden="true"
                                  label="&fromColumn.label;" tooltiptext="&fromColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
                         <treecol id="recipientCol" persist="width" flex="4"
                                  hidden="true" swappedhidden="false"
                                  label="&recipientColumn.label;" tooltiptext="&recipientColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
                         <treecol id="correspondentCol" persist="width" flex="4" hidden="true"
                                  label="&correspondentColumn.label;" tooltiptext="&correspondentColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
-                        <treecol id="junkStatusCol" persist="width" fixed="true" cycler="true"
-                                 class="treecol-image junkStatusHeader"
+                        <treecol is="treecol-image" id="junkStatusCol" persist="width" fixed="true"
+                                 cycler="true" class="treecol-image junkStatusHeader"
                                  label="&junkStatusColumn.label;" tooltiptext="&junkStatusColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
                         <treecol id="receivedCol" persist="width temphidden" flex="2" hidden="true"
                                  label="&receivedColumn.label;" tooltiptext="&receivedColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>
                         <treecol id="dateCol" persist="width" flex="2"
                                  label="&dateColumn.label;" tooltiptext="&dateColumn2.tooltip;"/>
                         <splitter class="tree-splitter"/>