Bug 1491699 - Convert mail-newsgroup and mail-newsgroups-headerfield bindings to custom element. r=mkmelin
☠☠ backed out by 73a9936d6460 ☠ ☠
authorArshad Khan <arshdkhn1@gmail.com>
Mon, 17 Sep 2018 00:35:25 +0530
changeset 33340 849aa9b1b90cdc510a5e4a558826672e41f05bf2
parent 33339 f6d8ba2898f90e8a4887d9ffff4b325aa5f60516
child 33341 73a9936d64609bd700e5218d0b86dcb8d201d138
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersmkmelin
bugs1491699
Bug 1491699 - Convert mail-newsgroup and mail-newsgroups-headerfield bindings to custom element. r=mkmelin
mail/base/content/mailWidgets.js
mail/base/content/mailWidgets.xml
mail/base/content/messenger.css
mail/base/content/messenger.xul
mail/base/content/msgHdrView.inc
mail/themes/linux/mail/messageHeader.css
mail/themes/osx/mail/messageHeader.css
mail/themes/shared/mail/messageHeader.css
mail/themes/windows/mail/messageHeader.css
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -191,12 +191,56 @@ class MozMailEmailaddress extends MozXUL
     });
 
     emailPresenceImage.addEventListener("click", (event) => {
       onClickEmailPresence(event, this);
     });
   }
 }
 
+class MozMailNewsgroup extends MozXULElement {
+  connectedCallback() {
+    this.classList.add("emailDisplayButton");
+    this.setAttribute("context", "newsgroupPopup");
+    this.setAttribute("popup", "newsgroupPopup");
+  }
+}
+
+class MozMailNewsgroupsHeaderfield extends MozXULElement {
+  connectedCallback() {
+    this.classList.add("headerValueBox");
+    this.mNewsgroups = [];
+  }
+
+  addNewsgroupView(aNewsgroup) {
+    this.mNewsgroups.push(aNewsgroup);
+  }
+
+  buildViews() {
+    for (let i = 0; i < this.mNewsgroups.length; i++) {
+      const newNode = document.createElement("mail-newsgroup");
+      if (i > 0) {
+        const textNode = document.createElement("text");
+        textNode.setAttribute("value", ",");
+        textNode.setAttribute("class", "newsgroupSeparator");
+        this.appendChild(textNode);
+      }
+
+      newNode.textContent = this.mNewsgroups[i];
+      newNode.setAttribute("newsgroup", this.mNewsgroups[i]);
+      this.appendChild(newNode);
+    }
+  }
+
+  clearHeaderValues() {
+    this.mNewsgroups = [];
+    while (this.hasChildNodes()) {
+      this.lastChild.remove();
+    }
+  }
+}
+
 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-emailaddress", MozMailEmailaddress);
--- a/mail/base/content/mailWidgets.xml
+++ b/mail/base/content/mailWidgets.xml
@@ -878,110 +878,16 @@
             // remove anything inside of each of our labels....
             this.clearChildNodes(this.emailAddresses);
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
-  <!-- a single newsgroup as displayed in the message header with a drop-down
-       menu for various actions -->
-  <binding id="mail-newsgroup">
-    <content>
-      <xul:hbox anonid="newsgroupValue" class="emailDisplayButton"
-                context="newsgroupPopup" popup="newsgroupPopup"
-                flex="1" align="center">
-        <xul:label class="newsgrouplabel" anonid="newsgrouplabel"
-                   role="textbox" aria-readonly="true"
-                   xbl:inherits="value=label,crop"/>
-      </xul:hbox>
-    </content>
-
-    <implementation>
-      <property name="label"      onset="this.getPart('newsgroupValue').setAttribute('label',val); return val;"
-                                  onget="return this.getPart('newsgroupValue').getAttribute('label');"/>
-    </implementation>
-  </binding>
-
-  <!-- The value of the Newsgroups: headers, as displayed in the message,
-       header, composed of <mail-newsgroup> nodes.  -->
-  <binding id="mail-newsgroups-headerfield">
-    <content>
-      <xul:hbox class="headerValueBox" flex="1">
-        <xul:description class="headerValue" anonid="newsgroups" containsEmail="true"
-                         flex="1"/>
-      </xul:hbox>
-    </content>
-
-    <implementation>
-      <constructor><![CDATA[
-          this.mNewsgroups = new Array;
-      ]]></constructor>
-
-      <property name="newsgroups" onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'newsgroups');"
-        readonly="true"/>
-
-      <!-- add a newsgroup to the internal list of newsgroups -->
-      <method name="addNewsgroupView">
-        <parameter name="aNewsgroup"/>
-        <body><![CDATA[
-          this.mNewsgroups.push(aNewsgroup);
-        ]]></body>
-      </method>
-
-      <!-- build the view for the current list of newsgroups -->
-      <method name="buildViews">
-        <body><![CDATA[
-          for (let i=0; i<this.mNewsgroups.length; i++)
-          {
-            let newNode = document.createElement("mail-newsgroup");
-            if (i)
-            {
-              let textNode = document.createElement("text");
-              textNode.setAttribute("value", ",");
-              textNode.setAttribute("class", "newsgroupSeparator");
-              this.newsgroups.appendChild(textNode);
-            }
-
-            let itemInDocument = this.newsgroups.appendChild(newNode);
-            itemInDocument.setAttribute("label", this.mNewsgroups[i]);
-            itemInDocument.setAttribute("newsgroup", this.mNewsgroups[i]);
-
-            // Since the control attribute points to the <newsgroups>
-            // element 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 + ": " +
-                                this.mNewsgroups[i];
-                let contentElement =
-                  document.getAnonymousElementByAttribute(itemInDocument,
-                                                          "anonid",
-                                                          "newsgrouplabel");
-                contentElement.setAttribute("aria-label", ariaLabel);
-            }
-          }
-        ]]></body>
-      </method>
-
-      <!-- clear the current view and internal list of newsgroups -->
-      <method name="clearHeaderValues">
-        <body><![CDATA[
-          this.mNewsgroups = new Array;
-          while(this.newsgroups.hasChildNodes())
-            this.newsgroups.lastChild.remove();
-        ]]></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/messenger.css
+++ b/mail/base/content/messenger.css
@@ -39,24 +39,16 @@ mail-messageids-headerfield {
 mail-emailheaderfield {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#mail-emailheaderfield");
 }
 
 mail-multi-emailHeaderField {
   -moz-binding: url("chrome://messenger/content/mailWidgets.xml#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[collapsed="true"] {
   display: none;
 }
 
 #searchTermList > richlistitem {
   -moz-binding: url("chrome://messenger/content/searchWidgets.xml#filterlistitem");
 }
 
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -230,34 +230,34 @@
          noautofocus="true" />
   <panel type="autocomplete"
          id="PopupAutoComplete"
          noautofocus="true"/>
 
   <tooltip id="attachmentListTooltip"/>
 
   <menupopup id="newsgroupPopup" position="after_start" class="newsgroupPopup"
-             onpopupshowing="setupNewsgroupPopup(findEmailNodeFromPopupNode(document.popupNode, 'newsgroupPopup')); goUpdateCommand('cmd_createFilterFromPopup')"
-             onpopuphiding="hideEmailNewsPopup(findEmailNodeFromPopupNode(document.popupNode, 'newsgroupPopup'));">
+             onpopupshowing="setupNewsgroupPopup(document.popupNode); goUpdateCommand('cmd_createFilterFromPopup')"
+             onpopuphiding="hideEmailNewsPopup(document.popupNode);">
       <menuitem id="newsgroupPlaceHolder"
                 disabled="true"/>
       <menuseparator/>
       <menuitem id="sendMessageToNewsgroupItem" label="&SendMessageTo.label;"
                 accesskey="&SendMessageTo.accesskey;"
-                oncommand="SendMailToNode(findEmailNodeFromPopupNode(document.popupNode, 'newsgroupPopup'), event)"/>
+                oncommand="SendMailToNode(document.popupNode, event)"/>
       <menuitem id="copyNewsgroupNameItem" label="&CopyNewsgroupName.label;"
                 accesskey="&CopyNewsgroupName.accesskey;"
-                oncommand="CopyEmailNewsAddress(findEmailNodeFromPopupNode(document.popupNode, 'newsgroupPopup'))"/>
+                oncommand="CopyEmailNewsAddress(document.popupNode)"/>
       <menuitem id="copyNewsgroupURLItem" label="&CopyNewsgroupURL.label;"
                 accesskey="&CopyNewsgroupURL.accesskey;"
-                oncommand="CopyNewsgroupURL(findEmailNodeFromPopupNode(document.popupNode, 'newsgroupPopup'))"/>
+                oncommand="CopyNewsgroupURL(document.popupNode)"/>
       <menuseparator id="subscribeToNewsgroupSeparator"/>
       <menuitem id="subscribeToNewsgroupItem" label="&SubscribeToNewsgroup.label;"
                 accesskey="&SubscribeToNewsgroup.accesskey;"
-                oncommand="SubscribeToNewsgroup(findEmailNodeFromPopupNode(document.popupNode, 'newsgroupPopup'))"/>
+                oncommand="SubscribeToNewsgroup(document.popupNode)"/>
   </menupopup>
 
   <menupopup id="pageContextMenu"
              pagemenu="end"
              onpopupshowing="InitPageMenu(this, event);">
   </menupopup>
 
   <!-- We want to be able to do the following:
--- a/mail/base/content/msgHdrView.inc
+++ b/mail/base/content/msgHdrView.inc
@@ -340,23 +340,23 @@
                                       <label id="expandedbccLabel" class="headerName"
                                              value="&bccField4.label;" control="expandedbccBox"/>
                                       <mail-multi-emailHeaderField id="expandedbccBox"/>
                                     </row>
                                     <row id="expandednewsgroupsRow" collapsed="true">
                                       <label id="expandednewsgroupsLabel" class="headerName"
                                              value="&newsgroupsField4.label;"
                                              control="expandednewsgroupsBox"/>
-                                      <mail-newsgroups-headerfield id="expandednewsgroupsBox"/>
+                                      <mail-newsgroups-headerfield id="expandednewsgroupsBox" flex="1"/>
                                     </row>
                                     <row id="expandedfollowup-toRow" collapsed="true">
                                       <label id="expandedfollowup-toLabel" class="headerName"
                                              value="&followupToField4.label;"
                                              control="expandedfollowup-toBox"/>
-                                      <mail-newsgroups-headerfield id="expandedfollowup-toBox"/>
+                                      <mail-newsgroups-headerfield id="expandedfollowup-toBox" flex="1"/>
                                     </row>
                                     <row id="expandeddateRow" collapsed="true">
                                       <label id="expandeddateLabel" class="headerName"
                                              value="&dateField4.label;" control="expandeddateBox"/>
                                       <mail-headerfield id="expandeddateBox" flex="1"/>
                                     </row>
                                     <row id="expandedmessage-idRow" collapsed="true">
                                       <label id="expandedmessage-idLabel" class="headerName"
--- a/mail/themes/linux/mail/messageHeader.css
+++ b/mail/themes/linux/mail/messageHeader.css
@@ -232,22 +232,16 @@ toolbar[mode="icons"] > #otherActionsBut
   color: #888a85; /* lower contrast */
   text-align: right;
   background-color: transparent;
   padding: 0px;
   margin-top: 0;
   margin-inline-end: 3px;
 }
 
-.headerValueBox {
-  overflow:visible;
-  margin-bottom: 0 !important;
-  padding-bottom: 0 !important;
-}
-
 .headerValue {
   min-width: 50px;
   white-space: normal;
   color: WindowText;
   line-height: 1.5em;
   -moz-appearance: none !important;
   padding: .1em 0px !important;
   margin: 0px !important;
--- a/mail/themes/osx/mail/messageHeader.css
+++ b/mail/themes/osx/mail/messageHeader.css
@@ -296,22 +296,16 @@ toolbar[mode="icons"] > #otherActionsBut
   font-weight: bold;
   text-align: right;
   background-color: transparent;
   padding: 0px;
   margin-top: 0;
   margin-inline-end: 3px;
 }
 
-.headerValueBox {
-  overflow: visible;
-  margin-bottom: 0 !important;
-  padding-bottom: 0 !important;
-}
-
 .headerValue {
   min-width: 50px;
   white-space: normal;
   line-height: 1.5em;
   -moz-appearance: none !important;
   padding: .1em 0px !important;
   margin: 0px !important;
   margin-bottom: 3px !important;
--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -100,16 +100,25 @@ toolbarpaletteitem #hdrDummyReplyButton 
 .headerValue[containsEmail="true"] {
   margin-inline-start: 0px !important;
 }
 
 #otherActionsBox {
   margin-inline-start: 8px;
 }
 
+.headerValueBox {
+  overflow: visible;
+}
+
+mail-newsgroups-headerfield.headerValueBox {
+  padding: .1em 0;
+  margin-bottom: 4px;
+}
+
 .headerValueBox[singleline="true"] > .headerValue[containsEmail="true"] {
   white-space: nowrap;
 }
 
 .headerValueBox[singleline="true"] {
   overflow: hidden;
 }
 
--- a/mail/themes/windows/mail/messageHeader.css
+++ b/mail/themes/windows/mail/messageHeader.css
@@ -133,22 +133,16 @@ window[inlinetoolbox] #newtoolbar {
 .headerName {
   text-align: right;
   background-color: transparent;
   padding: 0px;
   margin-top: 0;
   margin-inline-end: 3px;
 }
 
-.headerValueBox {
-  overflow:visible;
-  margin-bottom: 0 !important;
-  padding-bottom: 0 !important;
-}
-
 .headerValue {
   min-width: 50px;
   white-space: normal;
   color: WindowText;
   line-height: 1.5em;
   -moz-appearance: none;
   padding: .1em 0;
   margin: 0;