1 files changed, 70 insertions, 0 deletions
diff --git a/comm/mail/components/im/content/toolbarbutton-badge-button.js b/comm/mail/components/im/content/toolbarbutton-badge-button.js
new file mode 100644
index 0000000000..def96faf27
--- /dev/null
+++ b/comm/mail/components/im/content/toolbarbutton-badge-button.js
@@ -0,0 +1,70 @@
+/* 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";
+
+/* globals MozXULElement */
+
+// Wrap in a block to prevent leaking to window scope.
+{
+  /**
+   * The MozBadgebutton widget is used to display a chat toolbar button in
+   * the main Toolbox in the messenger window. It displays icon and label
+   * for the button. It also shows a badge on top of the chat icon with a number.
+   * That number is the count of unread messages in the chat.
+   *
+   * @augments MozToolbarbutton
+   */
+  class MozBadgebutton extends customElements.get("toolbarbutton") {
+    static get inheritedAttributes() {
+      return {
+        ".toolbarbutton-icon": "src=image",
+        ".toolbarbutton-text": "value=label,accesskey,crop",
+      };
+    }
+
+    static get markup() {
+      return `
+      <stack>
+        <html:img class="toolbarbutton-icon" alt="" />
+        <html:span class="badgeButton-badge" hidden="hidden"></html:span>
+      </stack>
+      <label class="toolbarbutton-text" crop="end" flex="1"></label>
+      `;
+    }
+
+    /**
+     * toolbarbutton overwrites the fragment getter from MozXULElement.
+     */
+    static get fragment() {
+      return Reflect.get(MozXULElement, "fragment", this);
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback() || this.hasChildNodes()) {
+        return;
+      }
+      this.setAttribute("is", "toolbarbutton-badge-button");
+      this.appendChild(this.constructor.fragment);
+
+      this._badgeCount = 0;
+      this.initializeAttributeInheritance();
+    }
+
+    set badgeCount(count) {
+      this._badgeCount = count;
+      let badge = this.querySelector(".badgeButton-badge");
+      badge.textContent = count;
+      badge.hidden = count == 0;
+    }
+
+    get badgeCount() {
+      return this._badgeCount;
+    }
+  }
+
+  customElements.define("toolbarbutton-badge-button", MozBadgebutton, {
+    extends: "toolbarbutton",
+  });
+}