Bug 1491698 - Convert mail-emailaddress to custom element; r=mkmelin
authorArshad Khan <arshdkhn1@gmail.com>
Mon, 17 Sep 2018 00:11:11 +0530
changeset 33627 0363b10132179b85f1ed33c720eda3bba858317d
parent 33626 d7ee8a2c861b29c1295cbab99a6748614fb08a13
child 33628 3be6410d75a4a9c7d6bf28653356181e72ae2ecd
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersmkmelin
bugs1491698
Bug 1491698 - Convert mail-emailaddress to custom element; r=mkmelin
mail/base/content/mailWidgets.js
mail/base/content/mailWidgets.xml
mail/base/content/mainPopupSet.inc
mail/base/content/messenger.css
mail/base/content/msgHdrView.js
mail/test/mozmill/message-header/test-message-header.js
mail/test/mozmill/multiple-identities/test-display-names.js
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -1,14 +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, openUILink, MessageIdClick */
+/* global MozXULElement, openUILink, MessageIdClick, onClickEmailStar, onClickEmailPresence */
 
 class MozMailHeaderfield extends MozXULElement {
   connectedCallback() {
     this.setAttribute("context", "copyPopup");
     this.classList.add("headerValue");
   }
 
   set headerValue(val) {
@@ -149,14 +149,110 @@ class MozMailMessageid extends MozXULEle
     return val;
   }
 
   get label() {
     return this.getAttribute("label");
   }
 }
 
+class MozMailEmailaddress extends MozXULElement {
+  static get observedAttributes() {
+    return [
+      "hascard",
+      "label",
+      "crop",
+      "tooltipstar",
+      "chatStatus",
+      "presenceTooltip",
+    ];
+  }
+
+  connectedCallback() {
+    this.classList.add("emailDisplayButton");
+    this.setAttribute("context", "emailAddressPopup");
+    this.setAttribute("popup", "emailAddressPopup");
+
+    const label = document.createElement("label");
+    label.classList.add("emaillabel");
+
+    const emailStarImage = document.createElement("image");
+    emailStarImage.classList.add("emailStar");
+    emailStarImage.setAttribute("context", "emailAddressPopup");
+
+    const emailPresenceImage = document.createElement("image");
+    emailPresenceImage.classList.add("emailPresence");
+
+    this.appendChild(label);
+    this.appendChild(emailStarImage);
+    this.appendChild(emailPresenceImage);
+
+    this._areChildrenAppended = true;
+
+    this._update();
+    this._setupEventListeners();
+  }
+
+  attributeChangedCallback() {
+    this._update();
+  }
+
+  _update() {
+    if (!this.isConnected || !this._areChildrenAppended) {
+      return;
+    }
+
+    const emailLabel = this.querySelector(".emaillabel");
+    const emailStarImage = this.querySelector(".emailStar");
+    const emailPresenceImage = this.querySelector(".emailPresence");
+
+    this._updateNodeAttributes(emailLabel, "crop");
+    this._updateNodeAttributes(emailLabel, "value", "label");
+
+    this._updateNodeAttributes(emailStarImage, "hascard");
+    this._updateNodeAttributes(emailStarImage, "chatStatus");
+    this._updateNodeAttributes(emailStarImage, "tooltiptext", "tooltipstar");
+
+    this._updateNodeAttributes(emailPresenceImage, "chatStatus");
+    this._updateNodeAttributes(
+      emailPresenceImage, "tooltiptext", "presenceTooltip"
+    );
+  }
+
+  _updateNodeAttributes(attrNode, attr, mappedAttr) {
+    mappedAttr = mappedAttr || attr;
+
+    if (this.hasAttribute(mappedAttr) && (this.getAttribute(mappedAttr) != null)) {
+      attrNode.setAttribute(attr, this.getAttribute(mappedAttr));
+    } else {
+      attrNode.removeAttribute(attr);
+    }
+  }
+
+  _setupEventListeners() {
+    const emailStarImage = this.querySelector(".emailStar");
+    const emailPresenceImage = this.querySelector(".emailPresence");
+
+    emailStarImage.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+    });
+
+    emailStarImage.addEventListener("click", (event) => {
+      onClickEmailStar(event, this);
+    });
+
+    emailPresenceImage.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+    });
+
+    emailPresenceImage.addEventListener("click", (event) => {
+      onClickEmailPresence(event, this);
+    });
+  }
+}
+
 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);
--- a/mail/base/content/mailWidgets.xml
+++ b/mail/base/content/mailWidgets.xml
@@ -878,53 +878,16 @@
             // remove anything inside of each of our labels....
             this.clearChildNodes(this.emailAddresses);
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
-  <binding id="mail-emailaddress">
-    <content>
-      <xul:hbox anonid="emailValue" class="emailDisplayButton"
-                xbl:inherits="hascard,aria-label" align="center"
-                context="emailAddressPopup" popup="emailAddressPopup"
-                flex="1" role="textbox" aria-readonly="true">
-        <xul:label class="emaillabel" anonid="emaillabel"
-                   xbl:inherits="value=label,crop"/>
-        <xul:image class="emailStar" anonid="emailStar"
-                   context="emailAddressPopup"
-                   onmousedown="event.preventDefault();"
-                   onclick="onClickEmailStar(event, this.parentNode.parentNode);"
-                   xbl:inherits="hascard,tooltiptext=tooltipstar,chatStatus"/>
-        <xul:image class="emailPresence" anonid="emailPresence"
-                   onmousedown="event.preventDefault();"
-                   onclick="onClickEmailPresence(event, this.parentNode.parentNode);"
-                   xbl:inherits="chatStatus,tooltiptext=presenceTooltip"/>
-      </xul:hbox>
-    </content>
-
-    <implementation>
-      <property name="label"      onset="this.getPart('emailValue').setAttribute('label',val); return val;"
-                                  onget="return this.getPart('emailValue').getAttribute('label');"/>
-      <property name="crop"       onset="this.getPart('emailValue').setAttribute('crop',val); return val;"
-                                  onget="return this.getPart('emailValue').getAttribute('crop');"/>
-      <property name="disabled"   onset="this.getPart('emailValue').setAttribute('disabled',val); return val;"
-                                  onget="return this.getPart('emailValue').getAttribute('disabled');"/>
-
-      <method name="getPart">
-        <parameter name="aPartId"/>
-        <body><![CDATA[
-          return document.getAnonymousElementByAttribute(this, "anonid", aPartId);
-        ]]></body>
-      </method>
-    </implementation>
-  </binding>
-
   <binding id="mail-messageids-headerfield">
     <content>
       <xul:hbox class="headerNameBox" align="start" pack="end">
         <xul:image class="addresstwisty" anonid="toggleIcon"
                    onclick="toggleWrap();"/>
       </xul:hbox>
       <xul:hbox class="headerValueBox" flex="1">
         <xul:label class="headerValue" anonid="headerValue" flex="1"/>
--- a/mail/base/content/mainPopupSet.inc
+++ b/mail/base/content/mainPopupSet.inc
@@ -1156,44 +1156,44 @@
                   oncommand="openAboutDialog();"/>
             </menupopup>
         </splitmenu>
       </vbox>
     </hbox>
   </menupopup>
 
   <menupopup id="emailAddressPopup" position="after_start" class="emailAddressPopup"
-             onpopupshowing="setupEmailAddressPopup(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup')); goUpdateCommand('cmd_createFilterFromPopup')"
-             onpopuphiding="hideEmailNewsPopup(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'));">
+             onpopupshowing="setupEmailAddressPopup(document.popupNode); goUpdateCommand('cmd_createFilterFromPopup')"
+             onpopuphiding="hideEmailNewsPopup(document.popupNode);">
     <menuitem id="emailAddressPlaceHolder"
               disabled="true"/>
     <menuseparator/>
     <menuitem id="addToAddressBookItem"
               label="&AddDirectlyToAddressBook.label;"
               accesskey="&AddDirectlyToAddressBook.accesskey;"
-              oncommand="AddContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
+              oncommand="AddContact(document.popupNode)"/>
     <menuitem id="editContactItem" label="&EditContact1.label;" hidden="true"
               accesskey="&EditContact1.accesskey;"
-              oncommand="EditContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
+              oncommand="EditContact(document.popupNode)"/>
     <menuitem id="viewContactItem" label="&ViewContact.label;" hidden="true"
               accesskey="&ViewContact.accesskey;"
-              oncommand="EditContact(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
+              oncommand="EditContact(document.popupNode)"/>
     <menuitem id="sendMailToItem" label="&SendMessageTo.label;"
               accesskey="&SendMessageTo.accesskey;"
-              oncommand="SendMailToNode(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'), event)"/>
+              oncommand="SendMailToNode(document.popupNode, event)"/>
     <menuitem id="copyEmailAddressItem" label="&CopyEmailAddress.label;"
               accesskey="&CopyEmailAddress.accesskey;"
-              oncommand="CopyEmailNewsAddress(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'))"/>
+              oncommand="CopyEmailNewsAddress(document.popupNode)"/>
     <menuitem id="copyNameAndEmailAddressItem" label="&CopyNameAndEmailAddress.label;"
               accesskey="&CopyNameAndEmailAddress.accesskey;"
-              oncommand="CopyEmailNewsAddress(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'), true)"/>
+              oncommand="CopyEmailNewsAddress(document.popupNode, true)"/>
     <menuseparator/>
     <menuitem id="createFilterFromItem" label="&CreateFilterFrom.label;"
               accesskey="&CreateFilterFrom.accesskey;"
-              oncommand="CreateFilter(findEmailNodeFromPopupNode(document.popupNode, 'emailAddressPopup'), gMessageDisplay.displayedMessage)"
+              oncommand="CreateFilter(document.popupNode, gMessageDisplay.displayedMessage)"
               observes="cmd_createFilterFromPopup"/>
   </menupopup>
 
   <menupopup id="copyPopup">
     <menuitem id="copyMenuitem"
               label="&copyCmd.label;"
               accesskey="&copyCmd.accesskey;"
               tooltiptext="&copyCmd.label;"
--- a/mail/base/content/messenger.css
+++ b/mail/base/content/messenger.css
@@ -15,20 +15,16 @@
 }
 
 /* message header widgets */
 
 mail-messageids-headerfield {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-messageids-headerfield");
 }
 
-mail-emailaddress {
-  -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-emailaddress");
-}
-
 .emailDisplayButton {
   -moz-user-focus: normal;
 }
 
 .emailStar {
   -moz-user-focus: normal;
 }
 
--- a/mail/base/content/msgHdrView.js
+++ b/mail/base/content/msgHdrView.js
@@ -1464,26 +1464,29 @@ function findEmailNodeFromPopupNode(elt,
     if (elt == null)
       return null;
   }
   return elt.parentNode;
 }
 
 function hideEmailNewsPopup(addressNode)
 {
+  addressNode = addressNode.hasAttribute("newsgroup") ?
+                  addressNode.closest("mail-newsgroup") :
+                  addressNode.closest("mail-emailaddress");
   // highlight the emailBox/newsgroupBox
   addressNode.removeAttribute("selected");
 }
 
 function setupEmailAddressPopup(emailAddressNode)
 {
+  emailAddressNode = emailAddressNode.closest("mail-emailaddress");
+  emailAddressNode.setAttribute("selected", "true");
   var emailAddressPlaceHolder = document.getElementById("emailAddressPlaceHolder");
-  var emailAddress = emailAddressNode.getPart("emaillabel").value;
-  emailAddressNode.setAttribute("selected", "true");
-  emailAddressPlaceHolder.setAttribute("label", emailAddress);
+  emailAddressPlaceHolder.setAttribute("label", emailAddressNode.getAttribute("label"));
 
   if (emailAddressNode.cardDetails && emailAddressNode.cardDetails.card) {
     document.getElementById("addToAddressBookItem").setAttribute("hidden", true);
     if (!emailAddressNode.cardDetails.book.readOnly) {
       document.getElementById("editContactItem").removeAttribute("hidden");
       document.getElementById("viewContactItem").setAttribute("hidden", true);
     } else {
       document.getElementById("editContactItem").setAttribute("hidden", true);
@@ -1540,16 +1543,17 @@ function onClickEmailPresence(event, ema
 /**
  * Takes the email address node, adds a new contact from the node's
  * displayName and emailAddress attributes to the personal address book.
  *
  * @param emailAddressNode  a node with displayName and emailAddress attributes
  */
 function AddContact(emailAddressNode)
 {
+  emailAddressNode = emailAddressNode.closest("mail-emailaddress");
   // When we collect an address, it updates the AB which sends out
   // notifications to update the UI. In the add case we don't want to update
   // the UI so that accidentally double-clicking on the star doesn't lead
   // to something strange (i.e star would be moved out from underneath,
   // leaving something else there).
   emailAddressNode.setAttribute("updatingUI", true);
 
   const kPersonalAddressbookURI = "moz-abmdbdirectory://abook.mab";
@@ -1563,30 +1567,35 @@ function AddContact(emailAddressNode)
   // Just save the new node straight away.
   addressBook.addCard(card);
 
   emailAddressNode.removeAttribute("updatingUI");
 }
 
 function EditContact(emailAddressNode)
 {
+  emailAddressNode = emailAddressNode.closest("mail-emailaddress");
   if (emailAddressNode.cardDetails.card)
     editContactInlineUI.showEditContactPanel(emailAddressNode.cardDetails,
                                              emailAddressNode);
 }
 
 /**
  * Takes the email address title button, extracts the email address we stored
  * in there and opens a compose window with that address.
  *
  * @param addressNode  a node which has a "fullAddress" or "newsgroup" attribute
  * @param aEvent       the event object when user triggers the menuitem
  */
 function SendMailToNode(addressNode, aEvent)
 {
+
+  addressNode = addressNode.hasAttribute("newsgroup") ?
+                  addressNode.closest("mail-newsgroup") :
+                  addressNode.closest("mail-emailaddress");
   let fields = Cc["@mozilla.org/messengercompose/composefields;1"]
                  .createInstance(Ci.nsIMsgCompFields);
   let params = Cc["@mozilla.org/messengercompose/composeparams;1"]
                  .createInstance(Ci.nsIMsgComposeParams);
 
   fields.newsgroups = addressNode.getAttribute("newsgroup");
   if (addressNode.hasAttribute("fullAddress")) {
     let addresses = MailServices.headerParser.makeFromDisplayAddress(
@@ -1617,16 +1626,19 @@ function SendMailToNode(addressNode, aEv
  *
  * @param addressNode  a node which has an "emailAddress" or "newsgroup"
  *                     attribute
  * @param aIncludeName when true, also copy the name onto the clipboard,
  *                     otherwise only the email address
  */
 function CopyEmailNewsAddress(addressNode, aIncludeName = false)
 {
+  addressNode = addressNode.hasAttribute("newsgroup") ?
+                  addressNode.closest("mail-newsgroup") :
+                  addressNode.closest("mail-emailaddress");
   let clipboard = Cc["@mozilla.org/widget/clipboardhelper;1"]
                     .getService(Ci.nsIClipboardHelper);
   let address = addressNode.getAttribute(aIncludeName ? "fullAddress"
                                                       : "emailAddress") ||
                 addressNode.getAttribute("newsgroup");
   clipboard.copyString(address);
 }
 
@@ -1637,16 +1649,17 @@ function CopyEmailNewsAddress(addressNod
  * @param aHeaderNode  A node which has an "emailAddress" attribute
  *                     or a "headerName" attribute.
  * @param aMessage     Optional nsIMsgHdr of the message from which the values
  *                     are taken. Will be used to preselect its folder in the
  *                     filter list.
  */
 function CreateFilter(aHeaderNode, aMessage)
 {
+  aHeaderNode = aHeaderNode.closest("mail-emailaddress");
   let nodeIsAddress = aHeaderNode.hasAttribute("emailAddress");
   let nodeValue = nodeIsAddress ? aHeaderNode.getAttribute("emailAddress") :
                                   aHeaderNode.textContent;
   let folder = aMessage ? aMessage.folder : null;
   top.MsgFilters(nodeValue, folder, aHeaderNode.getAttribute("headerName"));
 }
 
 /**
--- a/mail/test/mozmill/message-header/test-message-header.js
+++ b/mail/test/mozmill/message-header/test-message-header.js
@@ -20,16 +20,21 @@ var MODULE_REQUIRES = ['folder-display-h
 var elib = {};
 ChromeUtils.import("chrome://mozmill/content/modules/elementslib.js", elib);
 ChromeUtils.import("resource:///modules/MailServices.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 
 var folder, folderMore;
 var gInterestingMessage;
 
+/**
+ * Wraps a call to querySelector in an elib.Elem.
+ */
+const getElement = (elem, query) => new elib.Elem(elem.querySelector(query));
+
 function setupModule(module) {
   for (let lib of MODULE_REQUIRES) {
     collector.getModule(lib).installInto(module);
   }
 
   folder = create_folder("MessageWindowA");
   folderMore = create_folder("MesageHeaderMoreButton");
 
@@ -369,31 +374,36 @@ function test_clicking_star_opens_inline
   // Add a new message
   let msg = create_message();
   add_message_to_folder(folder, msg);
   // Open the latest message
   let curMessage = select_click_row(-1);
   wait_for_message_display_completion(mc);
   // Make sure the star is clicked, and we add the
   // new contact to our address book
-  let toDescription = mc.a('expandedtoBox', {class: "headerValue"});
+  let toDescription = mc.window.document.getAnonymousElementByAttribute(
+                        mc.window.document.getElementById("expandedtoBox"),
+                        "anonid",
+                        "emailAddresses"
+                      );
+
 
   // Ensure that the inline contact editing panel is not open
   let contactPanel = mc.eid('editContactPanel').getNode();
   assert_not_equals(contactPanel.state, "open");
   subtest_more_widget_star_click(toDescription);
 
   // Ok, if we're here, then the star has been clicked, and
   // the contact has been added to our AB.
   let addrs = toDescription.getElementsByTagName('mail-emailaddress');
   let lastAddr = get_last_visible_address(addrs);
 
   // Click on the star, and ensure that the inline contact
   // editing panel opens
-  mc.click(mc.aid(lastAddr, {class: 'emailStar'}));
+  mc.click(getElement(lastAddr, ".emailStar"));
   mc.waitFor(() => contactPanel.state == "open",
              () => ("Timeout waiting for contactPanel to open; state=" +
                     contactPanel.state));
   contactPanel.hidePopup();
 }
 
 /**
  * Ensure that the specified element is visible/hidden
@@ -456,32 +466,36 @@ function test_address_book_switch_disabl
   // Make sure we're in the right folder
   be_in_folder(folder);
 
   // Open the latest message
   let curMessage = select_click_row(-1);
 
   // Make sure the star is clicked, and we add the
   // new contact to our address book
-  let toDescription = mc.a('expandedtoBox', {class: "headerValue"});
+  let toDescription = mc.window.document.getAnonymousElementByAttribute(
+                        mc.window.document.getElementById("expandedtoBox"),
+                        "anonid",
+                        "emailAddresses"
+                      );
 
   // Ensure that the inline contact editing panel is not open
   let contactPanel = mc.eid('editContactPanel').getNode();
   assert_not_equals(contactPanel.state, "open");
 
   subtest_more_widget_star_click(toDescription);
 
   // Ok, if we're here, then the star has been clicked, and
   // the contact has been added to our AB.
   let addrs = toDescription.getElementsByTagName('mail-emailaddress');
   let lastAddr = get_last_visible_address(addrs);
 
   // Click on the star, and ensure that the inline contact
   // editing panel opens
-  mc.click(mc.aid(lastAddr, {class: 'emailStar'}));
+  mc.click(getElement(lastAddr, ".emailStar"));
   mc.waitFor(() => contactPanel.state == "open",
              () => ("Timeout waiting for contactPanel to open; state=" +
                     contactPanel.state));
 
   let abDrop = mc.eid('editContactAddressBookList').getNode();
   let warningMsg = mc.eid('contactMoveDisabledText').getNode();
 
   // Ensure that the address book dropdown is not disabled
@@ -518,17 +532,17 @@ function test_address_book_switch_disabl
   // Now we have to retrieve the mailing list from
   // the address book, in order for us to add and
   // delete cards from it.
   ml = get_mailing_list_from_address_book(ab, MAILING_LIST_DIRNAME);
 
   ml.addressLists.appendElement(card);
 
   // Re-open the inline contact editing panel
-  mc.click(mc.aid(lastAddr, {class: 'emailStar'}));
+  mc.click(getElement(lastAddr, ".emailStar"));
   mc.waitFor(() => contactPanel.state == "open",
              () => ("Timeout waiting for contactPanel to open; state=" +
                     contactPanel.state));
 
   // The dropdown should be disabled now
   assert_true(abDrop.disabled);
   // We should be displaying a warning
   assert_true(!warningMsg.collapsed);
@@ -540,17 +554,17 @@ function test_address_book_switch_disabl
   // menu re-enabled.
 
   let cardArray = Cc["@mozilla.org/array;1"]
                   .createInstance(Ci.nsIMutableArray);
   cardArray.appendElement(card);
   ml.deleteCards(cardArray);
 
   // Re-open the inline contact editing panel
-  mc.click(mc.aid(lastAddr, {class: 'emailStar'}));
+  mc.click(getElement(lastAddr, ".emailStar"));
   mc.waitFor(() => contactPanel.state == "open",
              () => ("Timeout waiting for contactPanel to open; state=" +
                     contactPanel.state));
 
   // Ensure that the address book dropdown is not disabled
   assert_true(!abDrop.disabled);
   // We should not be displaying any warning
   assert_true(warningMsg.collapsed);
@@ -638,17 +652,21 @@ function test_more_widget() {
  // It is at the second last message in the display list.
  let curMessage = select_click_row(-2);
 
   // make sure it loads
   wait_for_message_display_completion(mc);
   assert_selected_and_displayed(mc, curMessage);
 
   // get the description element containing the addresses
-  let toDescription = mc.a('expandedtoBox', {class: "headerValue"});
+  let toDescription = mc.window.document.getAnonymousElementByAttribute(
+                        mc.window.document.getElementById("expandedtoBox"),
+                        "anonid",
+                        "emailAddresses"
+                      );
 
   subtest_more_widget_display(toDescription);
   subtest_more_widget_click(toDescription);
   subtest_more_widget_star_click(toDescription);
 
   let showNLinesPref = Services.prefs.getIntPref("mailnews.headers.show_n_lines_before_more");
   Services.prefs.clearUserPref("mailnews.headers.show_n_lines_before_more");
   change_to_header_normal_mode();
@@ -686,17 +704,21 @@ function test_show_all_header_mode() {
   // It is at the second last position in the display list.
   let curMessage = select_click_row(-2);
 
   // make sure it loads
   wait_for_message_display_completion(mc);
   assert_selected_and_displayed(mc, curMessage);
 
   // get the description element containing the addresses
-  let toDescription = mc.a('expandedtoBox', {class: "headerValue"});
+  let toDescription = mc.window.document.getAnonymousElementByAttribute(
+                        mc.window.document.getElementById("expandedtoBox"),
+                        "anonid",
+                        "emailAddresses"
+                      );
 
   change_to_header_normal_mode();
   subtest_more_widget_display(toDescription);
   subtest_change_to_all_header_mode(toDescription);
   change_to_header_normal_mode();
   subtest_more_widget_click(toDescription);
 }
 
@@ -808,17 +830,17 @@ function subtest_more_widget_star_click(
   let addrs = toDescription.getElementsByTagName('mail-emailaddress');
   let lastAddr = get_last_visible_address(addrs);
   ensure_no_card_exists(lastAddr.getAttribute("emailAddress"));
 
   // scroll to the bottom first so the address is in view
   let view = mc.e('expandedHeaderView');
   view.scrollTop = view.scrollHeight - view.clientHeight;
 
-  mc.click(mc.aid(lastAddr, {class: 'emailStar'}));
+  mc.click(getElement(lastAddr, ".emailStar"));
   if (lastAddr.getAttribute('hascard') == 'false') {
     throw new Error("address not updated after clicking star");
   }
 }
 
 /**
  * Make sure the (more) widget hidden pref actually works with a
  * non-default value.
@@ -860,17 +882,21 @@ function test_more_widget_with_disabled_
 
   // test that (n more) is gone
   let moreNode = mc.a('expandedtoBox', {class: 'moreIndicator'});
   if (!moreNode.collapsed) {
     throw new Error("more node should be collapsed in n=0 case");
   }
 
   // get the description element containing the addresses
-  let toDescription = mc.a('expandedtoBox', {class: "headerValue"});
+  let toDescription = mc.window.document.getAnonymousElementByAttribute(
+                        mc.window.document.getElementById("expandedtoBox"),
+                        "anonid",
+                        "emailAddresses"
+                      );
 
   // test that we actually have more lines than the 3 we know are filled
   let newNumLines = help_get_num_lines(toDescription);
   if (newNumLines <= 3) {
     throw new Error("number of address lines present in all addresses mode = " +
       newNumLines + "<= number of expected minimum of 3 lines filled");
   }
 }
--- a/mail/test/mozmill/multiple-identities/test-display-names.js
+++ b/mail/test/mozmill/multiple-identities/test-display-names.js
@@ -87,19 +87,18 @@ function ensure_multiple_identities() {
 
 function help_test_display_name(message, field, expectedValue) {
   // Switch to a decoy folder first to ensure that we refresh the message we're
   // looking at in order to update information changed in address book entries.
   be_in_folder(decoyFolder);
   be_in_folder(folder);
   let curMessage = select_click_row(message);
 
-  let value = mc.window.document.getAnonymousElementByAttribute(
-    mc.a("expanded"+field+"Box", {tagName: "mail-emailaddress"}),
-    "class", "emaillabel").value;
+  let value = mc.a("expanded"+field+"Box", {tagName: "mail-emailaddress"})
+                .querySelector(".emaillabel").value;
 
   if (value != expectedValue)
     throw new Error("got '"+value+"' but expected '"+expectedValue+"'");
 }
 
 
 
 function test_single_identity() {