Bug 1547233 - [de-xbl] convert toolbar.xml#menu-button binding to custom element. r=khushil
authorMagnus Melin <mkmelin+mozilla@iki.fi>
Thu, 23 May 2019 22:13:45 +0200
changeset 35666 b7c1cd832766baf8ffcddc02ec5645d09396d0d4
parent 35665 4ae242ef0d4cbe718bba9bdd1dacd182ee0c5045
child 35667 42690276c3c0db3b7998943338800dd82933cdc6
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewerskhushil
bugs1547233
Bug 1547233 - [de-xbl] convert toolbar.xml#menu-button binding to custom element. r=khushil
calendar/base/content/calendar-task-view.xul
calendar/base/content/dialogs/calendar-summary-dialog.xul
calendar/lightning/content/imip-bar-overlay.xul
calendar/lightning/content/lightning-toolbar.xul
mail/base/content/bindings.css
mail/base/content/customElements.js
mail/base/content/mainMailToolbox.inc.xul
mail/base/content/msgAttachmentView.inc.xul
mail/base/content/msgHdrView.inc.xul
mail/base/content/toolbarbutton-menu-button.js
mail/base/jar.mn
mail/components/compose/content/messengercompose.xul
--- a/calendar/base/content/calendar-task-view.xul
+++ b/calendar/base/content/calendar-task-view.xul
@@ -116,17 +116,17 @@
                                 <textbox id="task-actions-category-textbox"
                                          placeholder="&event.categories.textbox.label;"
                                          onblur="this.parentNode.removeAttribute(&quot;ignorekeys&quot;);"
                                          onfocus="this.parentNode.setAttribute(&quot;ignorekeys&quot;, &quot;true&quot;);"
                                          onkeypress="taskDetailsView.categoryTextboxKeypress(event);"/>
                                 <menuseparator />
                               </menupopup>
                           </toolbarbutton>
-                          <toolbarbutton id="task-actions-markcompleted"
+                          <toolbarbutton is="toolbarbutton-menu-button" id="task-actions-markcompleted"
                                          type="menu-button"
                                          label="&calendar.context.markcompleted.label;"
                                          tooltiptext="&calendar.task.complete.button.tooltip;"
                                          command="calendar_toggle_completed_command"
                                          observes="calendar_toggle_completed_command"
                                          class="toolbarbutton-1 msgHeaderView-button">
                             <menupopup is="calendar-task-progress-menupopup" id="task-actions-markcompleted-menupopup"/>
                           </toolbarbutton>
--- a/calendar/base/content/dialogs/calendar-summary-dialog.xul
+++ b/calendar/base/content/dialogs/calendar-summary-dialog.xul
@@ -38,16 +38,17 @@
 
   <!-- Javascript includes -->
   <script src="chrome://calendar/content/calendar-summary-dialog.js"/>
   <script src="chrome://calendar/content/calendar-dialog-utils.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
   <script src="chrome://calendar/content/calendar-item-editing.js"/>
   <script src="chrome://calendar/content/calApplicationUtils.js"/>
   <script src="chrome://calendar/content/calendar-item-bindings.js"/>
+  <script src="chrome://messenger/content/customElements.js"/>
 
   <toolbox id="summary-toolbox"
            class="mail-toolbox"
            mode="full"
            defaultmode="full"
            iconsize="small"
            defaulticonsize="small"
            labelalign="end"
@@ -58,57 +59,57 @@
              customizable="false"
              labelalign="end"
              defaultlabelalign="end">
       <toolbarbutton id="saveandcloseButton"
                      tooltiptext="&summary.dialog.saveclose.tooltiptext;"
                      label="&summary.dialog.saveclose.label;"
                      oncommand="saveAndClose();"
                      class="cal-event-toolbarbutton toolbarbutton-1 saveandcloseButton"/>
-      <toolbarbutton id="acceptButton"
+      <toolbarbutton is="toolbarbutton-menu-button" id="acceptButton"
+                     type="menu-button"
                      tooltiptext="&summary.dialog.accept.tooltiptext;"
                      label="&summary.dialog.accept.label;"
                      oncommand="if (event.target.id == this.id) { reply('AUTO', 'ACCEPTED'); }"
                      value="ACCEPTED"
-                     type="menu-button"
                      class="cal-event-toolbarbutton toolbarbutton-1 replyButton">
         <menupopup id="acceptDropdown">
           <menuitem id="acceptButton_Send"
                     tooltiptext="&summary.dialog.send.tooltiptext;"
                     label="&summary.dialog.send.label;"
                     oncommand="reply('AUTO', 'ACCEPTED');"/>
           <menuitem id="acceptButton_DontSend"
                     tooltiptext="&summary.dialog.dontsend.tooltiptext;"
                     label="&summary.dialog.dontsend.label;"
                     oncommand="reply('NONE', 'ACCEPTED');"/>
         </menupopup>
       </toolbarbutton>
-      <toolbarbutton id="tentativeButton"
+      <toolbarbutton is="toolbarbutton-menu-button" id="tentativeButton"
+                     type="menu-button"
                      tooltiptext="&summary.dialog.tentative.tooltiptext;"
                      label="&summary.dialog.tentative.label;"
                      oncommand="if (event.target.id == this.id) { reply('AUTO', 'TENTATIVE'); }"
                      value="TENTATIVE"
-                     type="menu-button"
                      class="cal-event-toolbarbutton toolbarbutton-1 replyButton">
         <menupopup id="tentativeDropdown">
           <menuitem id="tenatativeButton_Send"
                     tooltiptext="&summary.dialog.send.tooltiptext;"
                     label="&summary.dialog.send.label;"
                     oncommand="reply('AUTO', 'TENTATIVE');"/>
           <menuitem id="tenativeButton_DontSend"
                     tooltiptext="&summary.dialog.dontsend.tooltiptext;"
                     label="&summary.dialog.dontsend.label;"
                     oncommand="reply('NONE', 'TENTATIVE');"/>
         </menupopup>
       </toolbarbutton>
-      <toolbarbutton id="declineButton"
+      <toolbarbutton is="toolbarbutton-menu-button" id="declineButton"
+                     type="menu-button"
                      tooltiptext="&summary.dialog.decline.tooltiptext;"
                      label="&summary.dialog.decline.label;"
                      oncommand="if (event.target.id == this.id) { reply('AUTO', 'DECLINED'); }"
-                     type="menu-button"
                      value="DECLINED"
                      class="cal-event-toolbarbutton toolbarbutton-1 replyButton">
         <menupopup id="declineDropdown">
           <menuitem id="declineButton_Send"
                     tooltiptext="&summary.dialog.send.tooltiptext;"
                     label="&summary.dialog.send.label;"
                     oncommand="reply('AUTO', 'DECLINED');"/>
           <menuitem id="declineButton_DontSend"
--- a/calendar/lightning/content/imip-bar-overlay.xul
+++ b/calendar/lightning/content/imip-bar-overlay.xul
@@ -116,17 +116,17 @@
               <toolbarbutton id="imipReconfirmButton"
                              label="&lightning.imipbar.btnReconfirm2.label;"
                              tooltiptext="&lightning.imipbar.btnReconfirm.tooltiptext;"
                              class="toolbarbutton-1 msgHeaderView-button imipReconfirmButton"
                              oncommand="ltnImipBar.executeAction()"
                              hidden="true"/>
 
               <!-- accept -->
-              <toolbarbutton id="imipAcceptButton"
+              <toolbarbutton is="toolbarbutton-menu-button" id="imipAcceptButton"
                              tooltiptext="&lightning.imipbar.btnAccept2.tooltiptext;"
                              label="&lightning.imipbar.btnAccept.label;"
                              oncommand="if (event.target.id == this.id) { ltnImipBar.executeAction('ACCEPTED', 'AUTO'); }"
                              type="menu-button"
                              class="imip-button toolbarbutton-1 msgHeaderView-button imipAcceptButton"
                              hidden="true">
                 <menupopup id="imipAcceptDropdown">
                   <label id="imipAcceptButton_AcceptLabel"
@@ -154,17 +154,17 @@
                             tooltiptext="&lightning.imipbar.btnDontSend.tooltiptext;"
                             label="&lightning.imipbar.btnDontSend.label;"
                             oncommand="ltnImipBar.executeAction('TENTATIVE', 'NONE');"/>
                   <!-- add here more menuitem as needed -->
                 </menupopup>
               </toolbarbutton>
 
               <!-- accept recurrences -->
-              <toolbarbutton id="imipAcceptRecurrencesButton"
+              <toolbarbutton is="toolbarbutton-menu-button" id="imipAcceptRecurrencesButton"
                              tooltiptext="&lightning.imipbar.btnAcceptRecurrences2.tooltiptext;"
                              label="&lightning.imipbar.btnAcceptRecurrences.label;"
                              oncommand="if (event.target.id == this.id) { ltnImipBar.executeAction('ACCEPTED', 'AUTO'); }"
                              type="menu-button"
                              class="imip-button toolbarbutton-1 msgHeaderView-button imipAcceptRecurrencesButton"
                              hidden="true">
                 <menupopup id="imipAcceptRecurrencesDropdown">
                   <label id="imipAcceptRecurrencesButton_AcceptLabel"
@@ -193,17 +193,17 @@
                             label="&lightning.imipbar.btnDontSend.label;"
                             oncommand="ltnImipBar.executeAction('TENTATIVE', 'NONE');"/>
                   <!-- add here more menuitem as needed -->
                 </menupopup>
               </toolbarbutton>
 
               <!-- tentative; should only be used, if no imipMoreButton is used and
                  - imipDeclineButton/imipAcceptButton have no visible menuitems //-->
-              <toolbarbutton id="imipTentativeButton"
+              <toolbarbutton is="toolbarbutton-menu-button" id="imipTentativeButton"
                              label="&lightning.imipbar.btnTentative.label;"
                              tooltiptext="&lightning.imipbar.btnTentative2.tooltiptext;"
                              class="toolbarbutton-1 msgHeaderView-button imipTentativeButton"
                              oncommand="if (event.target.id == this.id) { ltnImipBar.executeAction('TENTATIVE', 'AUTO'); }"
                              type="menu-button"
                              hidden="true">
                 <menupopup id="imipTentativeDropdown">
                   <menuitem id="imipTentativeButton_Tentative"
@@ -215,17 +215,17 @@
                             label="&lightning.imipbar.btnDontSend.label;"
                             oncommand="ltnImipBar.executeAction('TENTATIVE', 'NONE');"/>
                   <!-- add here more menuitem as needed -->
                 </menupopup>
               </toolbarbutton>
 
               <!-- tentative recurrences; should only be used, if no imipMoreButton is used and
                  - imipDeclineRecurrencesButton/imipAcceptRecurrencesButton have no visible menuitems //-->
-              <toolbarbutton id="imipTentativeRecurrencesButton"
+              <toolbarbutton is="toolbarbutton-menu-button" id="imipTentativeRecurrencesButton"
                              label="&lightning.imipbar.btnTentativeRecurrences.label;"
                              tooltiptext="&lightning.imipbar.btnTentativeRecurrences2.tooltiptext;"
                              class="toolbarbutton-1 msgHeaderView-button imipTentativeRecurrencesButton"
                              oncommand="if (event.target.id == this.id) { ltnImipBar.executeAction('TENTATIVE', 'AUTO'); }"
                              type="menu-button"
                              hidden="true">
                 <menupopup id="imipTentativeRecurrencesDropdown">
                   <menuitem id="imipTentativeRecurrencesButton_Tentative"
@@ -236,17 +236,17 @@
                             tooltiptext="&lightning.imipbar.btnDontSendSeries.tooltiptext;"
                             label="&lightning.imipbar.btnDontSend.label;"
                             oncommand="ltnImipBar.executeAction('TENTATIVE', 'NONE');"/>
                   <!-- add here more menuitem as needed -->
                 </menupopup>
               </toolbarbutton>
 
               <!-- decline -->
-              <toolbarbutton id="imipDeclineButton"
+              <toolbarbutton is="toolbarbutton-menu-button" id="imipDeclineButton"
                              tooltiptext="&lightning.imipbar.btnDecline2.tooltiptext;"
                              label="&lightning.imipbar.btnDecline.label;"
                              oncommand="if (event.target.id == this.id) { ltnImipBar.executeAction('DECLINED', 'AUTO'); }"
                              type="menu-button"
                              class="toolbarbutton-1 msgHeaderView-button imipDeclineButton"
                              hidden="true">
                 <menupopup id="imipDeclineDropdown">
                   <menuitem id="imipDeclineButton_Decline"
@@ -257,17 +257,17 @@
                             tooltiptext="&lightning.imipbar.btnDontSend.tooltiptext;"
                             label="&lightning.imipbar.btnDontSend.label;"
                             oncommand="ltnImipBar.executeAction('DECLINED', 'NONE');"/>
                   <!-- add here more menuitem as needed -->
                 </menupopup>
               </toolbarbutton>
 
               <!-- decline recurrences -->
-              <toolbarbutton id="imipDeclineRecurrencesButton"
+              <toolbarbutton is="toolbarbutton-menu-button" id="imipDeclineRecurrencesButton"
                              tooltiptext="&lightning.imipbar.btnDeclineRecurrences2.tooltiptext;"
                              label="&lightning.imipbar.btnDeclineRecurrences.label;"
                              oncommand="if (event.target.id == this.id) { ltnImipBar.executeAction('DECLINED'); }"
                              type="menu-button"
                              class="toolbarbutton-1 msgHeaderView-button imipDeclineRecurrencesButton"
                              hidden="true">
                 <menupopup id="imipDeclineRecurrencesDropdown">
                   <menuitem id="imipDeclineRecurrencesButton_DeclineAll"
--- a/calendar/lightning/content/lightning-toolbar.xul
+++ b/calendar/lightning/content/lightning-toolbar.xul
@@ -30,62 +30,40 @@
       <menuseparator id="customizeTaskToolbarMenuSeparator"/>
       <menuitem id="CustomizeTaskToolbar"
                 label="&calendar.menu.customize.label;"
                 accesskey="&calendar.menu.customize.accesskey;"
                 oncommand="CustomizeMailToolbar('task-toolbox', 'CustomizeTaskToolbar')"/>
     </menupopup>
   </popupset>
 
-  <!-- The popup id here must match the popup id in the SeaMonkey
-       New Message button. See Bug 506461 -->
-  <toolbarbutton id="button-newmsg"
-                 type="menu-button">
-    <menupopup id="button-newMsgPopup">
-      <menuitem id="newMsgButton-mail-menuitem"
-                label="&newMessageCmd.label;"
-                class="menuitem-iconic"
-                oncommand="event.stopPropagation(); MsgNewMessage(event)"/>
-      <menuitem id="newMsgButton-calendar-menuitem"
-                label="&lightning.toolbar.newevent.label;"
-                class="menuitem-iconic"
-                command="calendar_new_event_command"
-                observes="calendar_new_event_command"/>
-      <menuitem id="newMsgButton-task-menuitem"
-                label="&lightning.toolbar.newtask.label;"
-                class="menuitem-iconic"
-                command="calendar_new_todo_command"
-                observes="calendar_new_todo_command"/>
-    </menupopup>
-  </toolbarbutton>
-
   <toolbarpalette id="MailToolbarPalette">
     <toolbarbutton id="lightning-button-calendar"
                    class="toolbarbutton-1"
                    label="&lightning.toolbar.calendar.label;"
                    tooltiptext="&lightning.toolbar.calendar.tooltip;"
                    command="new_calendar_tab"/>
     <toolbarbutton id="lightning-button-tasks"
                    class="toolbarbutton-1"
                    label="&lightning.toolbar.task.label;"
                    tooltiptext="&lightning.toolbar.task.tooltip;"
                    command="new_task_tab"/>
-    <toolbarbutton id="extractEventButton"
+    <toolbarbutton is="toolbarbutton-menu-button" id="extractEventButton"
+                   type="menu-button"
                    class="toolbarbutton-1"
-                   type="menu-button"
                    label="&calendar.extract.event.button;"
                    tooltiptext="&calendar.extract.event.button.tooltip;"
                    oncommand="calendarExtract.extractFromEmail(true);">
       <menupopup id="extractEventLocaleList"
                  oncommand="calendarExtract.extractWithLocale(event, true);"
                  onpopupshowing="calendarExtract.onShowLocaleMenu(event.target);"/>
     </toolbarbutton>
-    <toolbarbutton id="extractTaskButton"
+    <toolbarbutton is="toolbarbutton-menu-button" id="extractTaskButton"
+                   type="menu-button"
                    class="toolbarbutton-1"
-                   type="menu-button"
                    label="&calendar.extract.task.button;"
                    tooltiptext="&calendar.extract.task.button.tooltip;"
                    oncommand="calendarExtract.extractFromEmail(false);">
       <menupopup id="extractTaskLocaleList"
                  oncommand="calendarExtract.extractWithLocale(event, false);"
                  onpopupshowing="calendarExtract.onShowLocaleMenu(event.target);"/>
     </toolbarbutton>
   </toolbarpalette>
--- a/mail/base/content/bindings.css
+++ b/mail/base/content/bindings.css
@@ -15,20 +15,16 @@ toolbar {
 }
 
 %ifndef XP_MACOSX
 toolbar[type="menubar"][autohide="true"] {
   -moz-binding: url("chrome://messenger/content/toolbar.xml#toolbar-menubar-autohide");
 }
 %endif
 
-toolbarbutton[type="menu-button"] {
-  -moz-binding: url("chrome://messenger/content/toolbar.xml#menu-button");
-}
-
 toolbarpaletteitem {
   -moz-binding: url("chrome://messenger/content/toolbar.xml#toolbarpaletteitem");
 }
 
 toolbarpaletteitem[place="palette"] {
   -moz-box-orient: vertical;
   -moz-binding: url("chrome://messenger/content/toolbar.xml#toolbarpaletteitem-palette");
 }
--- a/mail/base/content/customElements.js
+++ b/mail/base/content/customElements.js
@@ -13,13 +13,14 @@ const isDummyDocument = document.documen
 if (!isDummyDocument) {
   for (let script of [
     "chrome://chat/content/conversation-browser.js",
     "chrome://messenger/content/mailWidgets.js",
     "chrome://messenger/content/generalBindings.js",
     "chrome://messenger/content/statuspanel.js",
     "chrome://messenger/content/foldersummary.js",
     "chrome://messenger/content/addressbook/menulist-addrbooks.js",
+    "chrome://messenger/content/toolbarbutton-menu-button.js",
   ]) {
     Services.scriptloader.loadSubScript(script, window);
   }
 }
 })();
--- a/mail/base/content/mainMailToolbox.inc.xul
+++ b/mail/base/content/mainMailToolbox.inc.xul
@@ -9,17 +9,17 @@
 #ifdef XP_MACOSX
          iconsize="small"
          defaulticonsize="small"
 #endif
          labelalign="end"
          defaultlabelalign="end">
 
   <toolbarpalette id="MailToolbarPalette">
-    <toolbarbutton id="button-getmsg"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-getmsg"
                    type="menu-button"
                    class="toolbarbutton-1"
                    label="&getMsgButton1.label;"
                    tooltiptext="&getMsgButton.tooltip;"
                    oncommand="MsgGetMessagesForAccount();"
                    observes="button_getNewMessages">
       <menupopup id="button-getMsgPopup"
                  onpopupshowing="getMsgToolbarMenu_init();"
@@ -52,17 +52,17 @@
                    observes="button_replyall"
                    command="cmd_replyall"/>
     <toolbarbutton id="button-replylist"
                    class="toolbarbutton-1"
                    label="&replyListButton.label;"
                    tooltiptext="&replyListButton.tooltip;"
                    observes="button_replylist"
                    command="cmd_replylist"/>
-    <toolbarbutton id="button-forward"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-forward"
                    type="menu-button"
                    class="toolbarbutton-1"
                    label="&forwardButton.label;"
                    tooltiptext="&forwardButton.tooltip;"
                    observes="button_forward"
                    command="cmd_forward">
       <menupopup id="button-ForwardPopup">
         <menuitem id="button-ForwardAsInlineMenu"
@@ -97,31 +97,31 @@
                    observes="button_archive"
                    oncommand="MsgArchiveSelectedMessages(event)"/>
     <toolbarbutton id="button-showconversation"
                    class="toolbarbutton-1"
                    label="&openConversationButton.label;"
                    tooltiptext="&openConversationButton.tooltip;"
                    observes="button_showconversation"
                    oncommand="gConversationOpener.openConversationForMessages(gFolderDisplay.selectedMessages)"/>
-    <toolbarbutton id="button-goback"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-goback"
+                   type="menu-button"
                    class="toolbarbutton-1"
-                   type="menu-button"
                    label="&backButton1.label;"
                    oncommand="goDoCommand('cmd_goBack')"
                    tooltiptext="&goBackButton.tooltip;"
                    observes="button_goBack">
       <menupopup id="button-goBackPopup" onpopupshowing="backToolbarMenu_init(this)">
         <menuitem id="button-goBack" label="&goBackCmd.label;" command="cmd_goBack"/>
         <menuseparator id="button-goBackSeparator"/>
       </menupopup>
     </toolbarbutton>
-    <toolbarbutton id="button-goforward"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-goforward"
+                   type="menu-button"
                    class="toolbarbutton-1"
-                   type="menu-button"
                    label="&goForwardButton1.label;"
                    oncommand="goDoCommand('cmd_goForward')"
                    tooltiptext="&goForwardButton.tooltip;"
                    observes="button_goForward">
       <menupopup id="button-goForwardPopup" onpopupshowing="forwardToolbarMenu_init(this)">
         <menuitem id="button-goForward"
                   label="&goForwardCmd.label;"
                   command="cmd_goForward"/>
@@ -197,37 +197,37 @@
 #ifdef XP_MACOSX
     <toolbarbutton id="button-print"
                    class="toolbarbutton-1"
                    label="&printButton.label;"
                    observes="button_print"
                    oncommand="goDoCommand('cmd_print')"
                    tooltiptext="&printButton.tooltip;"/>
 #else
-    <toolbarbutton id="button-print"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-print"
+                   type="menu-button"
                    class="toolbarbutton-1"
                    label="&printButton.label;"
                    observes="button_print"
                    oncommand="goDoCommand('cmd_print')"
-                   tooltiptext="&printButton.tooltip;"
-                   type="menu-button">
+                   tooltiptext="&printButton.tooltip;">
       <menupopup id="printMenu" onpopupshowing="goUpdateCommand('cmd_printpreview');">
         <menuitem id="button-printMenu"
                   label="&printCmd.label;"
                   accesskey="&printCmd.accesskey;"
                   default="true"/>
         <menuitem id="button-printPreviewMenu"
                   label="&printPreviewCmd.label;"
                   accesskey="&printPreviewCmd.accesskey;"
                   observes="cmd_printpreview"
                   command="cmd_printpreview"/>
       </menupopup>
     </toolbarbutton>
 #endif
-    <toolbarbutton id="button-mark"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-mark"
                    type="menu-button"
                    class="toolbarbutton-1"
                    label="&markButton.label;"
                    oncommand="goDoCommand('button_mark')"
                    observes="button_mark"
                    tooltiptext="&markButton.tooltip;">
       <menupopup id="button-markPopup" onpopupshowing="InitMessageMark()">
         <menuitem id="markReadToolbarItem"
--- a/mail/base/content/msgAttachmentView.inc.xul
+++ b/mail/base/content/msgAttachmentView.inc.xul
@@ -27,17 +27,18 @@
                                enough space. -->
                           <spacer flex="9999"/>
 
                           <vbox id="attachment-view-toolbox">
                             <hbox id="attachment-view-toolbar"
                                   context="attachment-toolbar-context-menu">
                               <toolbaritem id="attachmentSaveAll"
                                            title="&saveAllAttachmentsButton1.label;">
-                                <toolbarbutton type="menu-button" id="attachmentSaveAllSingle"
+                                <toolbarbutton is="toolbarbutton-menu-button" id="attachmentSaveAllSingle"
+                                               type="menu-button"
                                                class="toolbarbutton-1 msgHeaderView-button"
                                                label="&saveAttachmentButton1.label;"
                                                tooltiptext="&saveAttachmentButton1.tooltip;"
                                                onclick="event.stopPropagation();"
                                                oncommand="TryHandleAllAttachments('saveAs'); RestoreFocusAfterHdrButton();"
                                                hidden="true">
                                   <menupopup id="attachmentSaveAllSingleMenu"
                                              onpopupshowing="onShowSaveAttachmentMenuSingle();">
@@ -55,17 +56,18 @@
                                               label="&detachAttachmentCmd.label;"
                                               accesskey="&detachAttachmentCmd.accesskey;"/>
                                     <menuitem id="button-deleteAttachment"
                                               oncommand="TryHandleAllAttachments('delete'); event.stopPropagation(); RestoreFocusAfterHdrButton();"
                                               label="&deleteAttachmentCmd.label;"
                                               accesskey="&deleteAttachmentCmd.accesskey;"/>
                                   </menupopup>
                                 </toolbarbutton>
-                                <toolbarbutton type="menu-button" id="attachmentSaveAllMultiple"
+                                <toolbarbutton is="toolbarbutton-menu-button" id="attachmentSaveAllMultiple"
+                                               type="menu-button"
                                                class="toolbarbutton-1 msgHeaderView-button"
                                                label="&saveAllAttachmentsButton1.label;"
                                                tooltiptext="&saveAllAttachmentsButton1.tooltip;"
                                                onclick="event.stopPropagation();"
                                                oncommand="TryHandleAllAttachments('save'); RestoreFocusAfterHdrButton();">
                                   <menupopup id="attachmentSaveAllMultipleMenu"
                                              onpopupshowing="onShowSaveAttachmentMenuMultiple();">
                                     <menuitem id="button-openAllAttachments"
--- a/mail/base/content/msgHdrView.inc.xul
+++ b/mail/base/content/msgHdrView.inc.xul
@@ -39,45 +39,45 @@
                                       <toolbarbutton id="hdrDummyReplyButton" label="&hdrSmartReplyButton1.label;"
                                                      hidden="true"
                                                      class="toolbarbutton-1 msgHeaderView-button hdrDummyReplyButton"/>
                                       <toolbarbutton id="hdrReplyButton" label="&hdrReplyButton1.label;"
                                                      tooltiptext="&hdrReplyButton2.tooltip;"
                                                      oncommand="MsgReplySender(event); RestoreFocusAfterHdrButton();"
                                                      observes="button_reply"
                                                      class="toolbarbutton-1 msgHeaderView-button hdrReplyButton"/>
-                                      <toolbarbutton id="hdrReplyAllButton"
+                                      <toolbarbutton is="toolbarbutton-menu-button" id="hdrReplyAllButton"
+                                                     type="menu-button"
                                                      label="&hdrReplyAllButton1.label;"
                                                      tooltiptext="&hdrReplyAllButton1.tooltip;"
                                                      oncommand="MsgReplyToAllMessage(event); RestoreFocusAfterHdrButton();"
                                                      observes="button_replyall"
                                                      class="toolbarbutton-1 msgHeaderView-button hdrReplyButton hdrReplyAllButton"
-                                                     type="menu-button"
                                                      hidden="true">
                                         <menupopup id="hdrReplyAllDropdown">
                                           <menuitem id="hdrReplyAll_ReplyAllSubButton"
                                                     label="&hdrReplyAllButton1.label;"
                                                     tooltiptext="&hdrReplyAllButton1.tooltip;"
                                                     observes="button_replyall"/>
                                           <menuseparator id="hdrReplyAllSubSeparator"/>
                                           <menuitem id="hdrReplySubButton"
                                                     label="&hdrReplyButton1.label;"
                                                     tooltiptext="&hdrReplyButton2.tooltip;"
                                                     observes="button_reply"
                                                     oncommand="MsgReplySender(event); event.stopPropagation();
                                                                RestoreFocusAfterHdrButton();"/>
                                         </menupopup>
                                       </toolbarbutton>
-                                      <toolbarbutton id="hdrReplyListButton"
+                                      <toolbarbutton is="toolbarbutton-menu-button" id="hdrReplyListButton"
+                                                     type="menu-button"
                                                      label="&hdrReplyListButton1.label;"
                                                      tooltiptext="&hdrReplyListButton1.tooltip;"
                                                      oncommand="MsgReplyToListMessage(event); RestoreFocusAfterHdrButton();"
                                                      observes="button_replylist"
                                                      class="toolbarbutton-1 msgHeaderView-button hdrReplyButton hdrReplyListButton"
-                                                     type="menu-button"
                                                      hidden="true">
                                         <menupopup id="hdrReplyListDropdown">
                                           <menuitem id="hdrReplyList_ReplyListSubButton"
                                                     label="&hdrReplyListButton1.label;"
                                                     tooltiptext="&hdrReplyListButton1.tooltip;"
                                                     observes="button_replylist"/>
                                           <menuseparator id="hdrReplyListSubSeparator"/>
                                           <menuitem id="hdrRelplyList_ReplyAllSubButton"
@@ -89,22 +89,22 @@
                                           <menuitem id="hdrReplyList_ReplySubButton"
                                                     label="&hdrReplyButton1.label;"
                                                     tooltiptext="&hdrReplyButton2.tooltip;"
                                                     observes="button_reply"
                                                     oncommand="MsgReplySender(event); event.stopPropagation();
                                                                RestoreFocusAfterHdrButton();"/>
                                         </menupopup>
                                       </toolbarbutton>
-                                      <toolbarbutton id="hdrFollowupButton" label="&hdrFollowupButton1.label;"
+                                      <toolbarbutton is="toolbarbutton-menu-button" id="hdrFollowupButton" label="&hdrFollowupButton1.label;"
+                                                     type="menu-button"
                                                      tooltiptext="&hdrFollowupButton1.tooltip;"
                                                      oncommand="MsgReplyGroup(event); RestoreFocusAfterHdrButton();"
                                                      observes="button_followup"
-                                                     class="toolbarbutton-1 msgHeaderView-button hdrFollowupButton"
-                                                     type="menu-button">
+                                                     class="toolbarbutton-1 msgHeaderView-button hdrFollowupButton">
                                         <menupopup id="hdrFollowupDropdown">
                                           <menuitem id="hdrFollowup_FollowupSubButton"
                                                     label="&hdrFollowupButton1.label;"
                                                     tooltiptext="&hdrFollowupButton1.tooltip;"
                                                     observes="button_followup"/>
                                           <menuseparator id="hdrFollowupSubSeparator"/>
                                           <menuitem id="hdrFollowup_ReplyAllSubButton"
                                                     label="&hdrReplyAllButton1.label;"
new file mode 100644
--- /dev/null
+++ b/mail/base/content/toolbarbutton-menu-button.js
@@ -0,0 +1,67 @@
+/* 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/. */
+
+"use strict";
+
+/* global MozXULElement */
+
+// Wrap in a block to prevent leaking to window scope.
+{
+  /**
+   * The MozToolbarButtonMenuButton widget is a toolbarbutton with
+   * type="menu-button". Place a menupopup element inside the button to create
+   * the menu popup. When the dropmarker in the toobarbutton is pressed the
+   * menupopup will open. When clicking the main area of the button it works
+   * like a normal toolbarbutton.
+   *
+   * @extends MozToolbarbutton
+   */
+  class MozToolbarButtonMenuButton extends customElements.get("toolbarbutton") {
+    static get inheritedAttributes() {
+      return {
+        ...super.inheritedAttributes,
+        ".toolbarbutton-menubutton-button": "disabled",
+        ".toolbarbutton-menubutton-dropmarker": "open,disabled",
+      };
+    }
+    static get menubuttonFragment() {
+      let frag = document.importNode(MozXULElement.parseXULToFragment(`
+        <toolbarbutton class="box-inherit toolbarbutton-menubutton-button" flex="1" allowevents="true"></toolbarbutton>
+        <dropmarker type="menu-button" class="toolbarbutton-menubutton-dropmarker"></dropmarker>
+      `), true);
+      Object.defineProperty(this, "menubuttonFragment", {value: frag});
+      return frag;
+    }
+
+    /** @override */
+    get _hasConnected() {
+      return (this.querySelector(":scope > toolbarbutton > .toolbarbutton-text") != null);
+    }
+
+    /** @override */
+    render() {
+      this.appendChild(this.constructor.menubuttonFragment.cloneNode(true));
+      this.initializeAttributeInheritance();
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback() || this._hasConnected) {
+        return;
+      }
+
+      // Defer creating DOM elements for content inside popups.
+      // These will be added in the popupshown handler above.
+      let panel = this.closest("panel");
+      if (panel && !panel.hasAttribute("hasbeenopened")) {
+        return;
+      }
+      this.setAttribute("is", "toolbarbutton-menu-button");
+      this.setAttribute("type", "menu-button");
+
+      this.render();
+    }
+  }
+  customElements.define("toolbarbutton-menu-button", MozToolbarButtonMenuButton,
+                        { extends: "toolbarbutton" });
+}
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@@ -24,16 +24,17 @@ messenger.jar:
 *   content/messenger/messenger.xul                 (content/messenger.xul)
 *   content/messenger/hiddenWindow.xul              (content/hiddenWindow.xul)
     content/messenger/hiddenWindow.js               (content/hiddenWindow.js)
     content/messenger/msgHdrView.js                 (content/msgHdrView.js)
     content/messenger/msgViewNavigation.js          (content/msgViewNavigation.js)
     content/messenger/mailWidgets.xml               (content/mailWidgets.xml)
     content/messenger/mailWidgets.js                (content/mailWidgets.js)
     content/messenger/button-menu-button.js         (content/button-menu-button.js)
+    content/messenger/toolbarbutton-menu-button.js  (content/toolbarbutton-menu-button.js)
     content/messenger/customElements.js             (content/customElements.js)
     content/messenger/customizeToolbar.css          (../../common/src/customizeToolbar.css)
     content/messenger/customizeToolbar.js           (../../common/src/customizeToolbar.js)
 *   content/messenger/customizeToolbar.xul          (../../common/src/customizeToolbar.xul)
     content/messenger/viewSource.js                 (../../common/src/viewSource.js)
 *   content/messenger/viewSource.xul                (../../common/src/viewSource.xul)
     content/messenger/viewZoomOverlay.js            (../../common/src/viewZoomOverlay.js)
     content/messenger/generalBindings.xml           (../../common/bindings/generalBindings.xml)
--- a/mail/components/compose/content/messengercompose.xul
+++ b/mail/components/compose/content/messengercompose.xul
@@ -1775,23 +1775,25 @@
     </toolbarbutton>
 
     <toolbarbutton class="toolbarbutton-1"
                id="button-contacts" label="&addressButton.label;"
                tooltiptext="&addressButton.tooltip;"
                autoCheck="false" type="checkbox"
                oncommand="toggleAddressPicker();"/>
 
-    <toolbarbutton class="toolbarbutton-1" type="menu-button"
-               id="button-attach" label="&attachButton.label;"
-               tooltiptext="&attachButton.tooltip2;"
-               command="cmd_attachFile"
-               ondragover="nsDragAndDrop.dragOver(event, envelopeDragObserver);"
-               ondrop="nsDragAndDrop.drop(event, envelopeDragObserver);"
-               ondragexit="nsDragAndDrop.dragExit(event, envelopeDragObserver);">
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-attach"
+                   type="menu-button"
+                   class="toolbarbutton-1"
+                   label="&attachButton.label;"
+                   tooltiptext="&attachButton.tooltip2;"
+                   command="cmd_attachFile"
+                   ondragover="nsDragAndDrop.dragOver(event, envelopeDragObserver);"
+                   ondrop="nsDragAndDrop.drop(event, envelopeDragObserver);"
+                   ondragexit="nsDragAndDrop.dragExit(event, envelopeDragObserver);">
       <menupopup id="button-attachPopup" onpopupshowing="updateAttachmentItems();">
         <menuitem id="button-attachPopup_attachFileItem"
                   label="&attachFileCmd.label;"
                   accesskey="&attachFileCmd.accesskey;"
                   command="cmd_attachFile"/>
         <menu id="button-attachPopup_attachCloudMenu"
               label="&attachCloudCmd.label;"
               accesskey="&attachCloudCmd.accesskey;"
@@ -1812,17 +1814,17 @@
         <menuitem id="button-attachPopup_remindLaterItem"
                   type="checkbox"
                   label="&remindLater.label;"
                   accesskey="&remindLater.accesskey;"
                   command="cmd_remindLater"/>
       </menupopup>
     </toolbarbutton>
 
-    <toolbarbutton id="button-security"
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-security"
                    type="menu-button"
                    class="toolbarbutton-1"
                    label="&securityButton.label;"
                    tooltiptext="&securityButton.tooltip;"
                    oncommand="doSecurityButton();">
       <menupopup onpopupshowing="setSecuritySettings(2);">
         <menuitem id="menu_securityEncryptRequire2"
                   type="checkbox"
@@ -1837,30 +1839,34 @@
         <menuseparator id="smimeToolbarButtonSeparator"/>
         <menuitem id="menu_securityStatus2"
                   label="&menu_securityStatus.label;"
                   accesskey="&menu_securityStatus.accesskey;"
                   oncommand="setNextCommand('show');"/>
       </menupopup>
     </toolbarbutton>
 
-    <toolbarbutton class="toolbarbutton-1" type="menu-button"
-               id="spellingButton" label="&spellingButton.label;"
-               tooltiptext="&spellingButton.tooltip;"
-               command="cmd_spelling">
+    <toolbarbutton is="toolbarbutton-menu-button" id="spellingButton"
+                   type="menu-button"
+                   class="toolbarbutton-1"
+                   label="&spellingButton.label;"
+                   tooltiptext="&spellingButton.tooltip;"
+                   command="cmd_spelling">
       <!-- workaround for the bug that split menu doesn't take popup="popupID" -->
       <menupopup onpopupshowing="event.preventDefault();
                                  showPopupById('languageMenuList',
                                                'spellingButton');"/>
     </toolbarbutton>
 
-    <toolbarbutton class="toolbarbutton-1" type="menu-button"
-               id="button-save" label="&saveButton.label;"
-               tooltiptext="&saveButton.tooltip;"
-               command="cmd_saveDefault">
+    <toolbarbutton is="toolbarbutton-menu-button" id="button-save"
+                   type="menu-button"
+                   class="toolbarbutton-1"
+                   label="&saveButton.label;"
+                   tooltiptext="&saveButton.tooltip;"
+                   command="cmd_saveDefault">
          <menupopup id="button-savePopup" onpopupshowing="InitFileSaveAsMenu();">
            <menuitem id="savePopup_saveAsFile"
                      label="&saveAsFileCmd.label;" accesskey="&saveAsFileCmd.accesskey;"
                      command="cmd_saveAsFile" type="radio" name="radiogroup_SaveAs"/>
            <menuseparator/>
            <menuitem id="savePopup_saveAsDraft"
                      label="&saveAsDraftCmd.label;" accesskey="&saveAsDraftCmd.accesskey;"
                      command="cmd_saveAsDraft" type="radio" name="radiogroup_SaveAs"/>
@@ -1872,22 +1878,22 @@
 
 #ifdef XP_MACOSX
     <toolbarbutton id="button-print"
                    class="toolbarbutton-1"
                    label="&printButton.label;"
                    command="cmd_print"
                    tooltiptext="&printButton.tooltip;"/>
 #else
-    <toolbarbutton id="button-print"
+    <toolbarbutton is="toolbarbutton-menu-button"  id="button-print"
+                   type="menu-button"
                    class="toolbarbutton-1"
                    label="&printButton.label;"
                    command="cmd_print"
-                   tooltiptext="&printButton.tooltip;"
-                   type="menu-button">
+                   tooltiptext="&printButton.tooltip;">
       <menupopup id="button-printPopup"
                  onpopupshowing="goUpdateCommand('cmd_printpreview');">
         <menuitem id="button-printMenu"
                   label="&printCmd.label;"
                   accesskey="&printCmd.accesskey;"
                   command="cmd_print"
                   default="true"
                   class="menuitem-iconic"/>