Bug 1491756 - Convert mail-tagfield to custom element; r=mkmelin
authorArshad Khan <arshdkhn1@gmail.com>
Mon, 17 Sep 2018 13:21:35 +0530
changeset 33301 205e5b8392186d7fe9c28f5f08c33703ea0a8f3a
parent 33300 5e8a03122a95a977451fc26cf14ceded41720fbf
child 33302 042d0c2e51531351740c75b4b13e11430bbe6961
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersmkmelin
bugs1491756
Bug 1491756 - Convert mail-tagfield to custom element; r=mkmelin
mail/base/content/mailWidgets.js
mail/base/content/mailWidgets.xml
mail/base/content/messenger.css
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -1,15 +1,14 @@
 /**
  * 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/. */
 
-/* global MozXULElement */
-/* global openUILink */
+/* global MozXULElement, openUILink */
 
 class MozMailHeaderfield extends MozXULElement {
   connectedCallback() {
     this.setAttribute("context", "copyPopup");
     this.classList.add("headerValue");
   }
 
   set headerValue(val) {
@@ -24,10 +23,56 @@ class MozMailUrlfield extends MozMailHea
     this.addEventListener("click", (event) => {
       if (event.button != 2) {
         openUILink(encodeURI(event.target.textContent), event);
       }
     });
   }
 }
 
+class MozMailHeaderfieldTags extends MozXULElement {
+  connectedCallback() {
+    this.classList.add("headerValue");
+    ChromeUtils.import("resource:///modules/MailServices.jsm");
+  }
+
+  set headerValue(val) {
+    return this.buildTags(val);
+  }
+
+  buildTags(tags) {
+    // tags contains a list of actual tag names (not the keys), delimited by spaces
+    // each tag name is encoded.
+
+    // remove any existing tag items we've appended to the list
+    while (this.hasChildNodes()) {
+      this.lastChild.remove();
+    }
+
+    // tokenize the keywords based on ' '
+    const tagsArray = tags.split(" ");
+    for (let i = 0; i < tagsArray.length; i++) {
+      // for each tag, create a label, give it the font color that corresponds to the
+      // color of the tag and append it.
+      let tagName;
+      try {
+        // if we got a bad tag name, getTagForKey will throw an exception, skip it
+        // and go to the next one.
+        tagName = MailServices.tags.getTagForKey(tagsArray[i]);
+      } catch (ex) {
+        continue;
+      }
+
+      let color = MailServices.tags.getColorForKey(tagsArray[i]);
+
+      // now create a label for the tag name, and set the color
+      const label = document.createElement("label");
+      label.setAttribute("value", tagName);
+      label.className = "tagvalue blc-" + color.substr(1);
+
+      this.appendChild(label);
+    }
+  }
+}
+
 customElements.define("mail-headerfield", MozMailHeaderfield);
 customElements.define("mail-urlfield", MozMailUrlfield);
+customElements.define("mail-tagfield", MozMailHeaderfieldTags);
--- a/mail/base/content/mailWidgets.xml
+++ b/mail/base/content/mailWidgets.xml
@@ -1177,82 +1177,16 @@
         <parameter name="aPartId"/>
         <body><![CDATA[
           return document.getAnonymousElementByAttribute(this, "anonid", 'messageIdValue');
         ]]></body>
       </method>
     </implementation>
   </binding>
 
-  <!-- Header field for showing the tags associated with a message -->
-  <binding id="mail-headerfield-tags">
-    <content>
-      <xul:label class="headerValue" anonid="headerValue" flex="1"/>
-    </content>
-
-    <implementation>
-      <property name="headerValue" onset="return this.buildTags(val);"/>
-      <method name="buildTags">
-        <parameter name="aTags"/>
-        <body>
-          <![CDATA[
-            // aTags contains a list of actual tag names (not the keys), delimited by spaces
-            // each tag name is encoded.
-
-            // remove any existing tag items we've appended to the list
-            var headerValueNode = document.getAnonymousElementByAttribute(this, 'anonid', 'headerValue');
-            while (headerValueNode.hasChildNodes())
-              headerValueNode.lastChild.remove();
-
-            // tokenize the keywords based on ' '
-            var tagsArray = aTags.split(' ');
-            for (var index = 0; index < tagsArray.length; index++)
-            {
-              // for each tag, create a label, give it the font color that corresponds to the
-              // color of the tag and append it.
-              var tagName;
-              try {
-                // if we got a bad tag name, getTagForKey will throw an exception, skip it
-                // and go to the next one.
-                tagName = MailServices.tags.getTagForKey(tagsArray[index]);
-              } catch (ex) { continue; }
-
-              let color = MailServices.tags.getColorForKey(tagsArray[index]);
-
-              // now create a label for the tag name, and set the color
-              var label = document.createElement("label");
-              label.setAttribute('value', tagName);
-              label.className = "tagvalue blc-" + color.substr(1);
-
-              // Since the control attribute points to the
-              // <mail-headerfield-tags> rather than the XUL <label>, screen
-              // readers don't know to automagically prepend the label when
-              // reading the tag, so we force this.  Furthermore, at least on
-              // Mac, there is no JS labelElement property at all, so we
-              // skip in that case.  We get away with it because there's no
-              // screen reader support on the Mac.
-              if ("labelElement" in this) {
-                let ariaLabel = this.labelElement.value + ": "
-                                + tagName;
-                label.setAttribute("aria-label", ariaLabel);
-              }
-
-              headerValueNode.appendChild(label);
-            }
-        ]]>
-        </body>
-      </method>
-      <constructor>
-        <![CDATA[
-          ChromeUtils.import("resource:///modules/MailServices.jsm");
-        ]]>
-      </constructor>
-    </implementation>
-  </binding>
-
   <binding id="search-menulist-abstract" name="searchMenulistAbstract" extends="xul:box">
     <content>
       <xul:menulist class="search-menulist" xbl:inherits="flex,disabled" oncommand="this.parentNode.onSelect(event)">
         <xul:menupopup class="search-menulist-popup"/>
       </xul:menulist>
     </content>
 
     <implementation>
--- a/mail/base/content/messenger.css
+++ b/mail/base/content/messenger.css
@@ -51,20 +51,16 @@ mail-multi-emailHeaderField {
 mail-newsgroup {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-newsgroup");
 }
 
 mail-newsgroups-headerfield {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-newsgroups-headerfield");
 }
 
-mail-tagfield {
-  -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-headerfield-tags");
-}
-
 mail-tagfield[collapsed="true"] {
   display: none;
 }
 
 #searchTermList > richlistitem {
   -moz-binding: url("chrome://messenger/content/searchWidgets.xml#filterlistitem");
 }