1 files changed, 80 insertions, 0 deletions
diff --git a/comm/mail/base/content/widgets/toolbarbutton-menu-button.js b/comm/mail/base/content/widgets/toolbarbutton-menu-button.js
new file mode 100644
index 0000000000..c514aa7357
--- /dev/null
+++ b/comm/mail/base/content/widgets/toolbarbutton-menu-button.js
@@ -0,0 +1,80 @@
+/* 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". 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.
+   *
+   * @augments MozToolbarbutton
+   */
+  class MozToolbarButtonMenuButton extends customElements.get("toolbarbutton") {
+    static get inheritedAttributes() {
+      return {
+        ...super.inheritedAttributes,
+        ".toolbarbutton-menubutton-button":
+          "command,hidden,disabled,align,dir,pack,orient,label,wrap,tooltiptext=buttontooltiptext",
+        ".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"
+                      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");
+
+      this.render();
+    }
+  }
+  customElements.define(
+    "toolbarbutton-menu-button",
+    MozToolbarButtonMenuButton,
+    { extends: "toolbarbutton" }
+  );
+}