Bug 1538547 [de-xbl] convert badgebutton binding to custom element. r=jorgk
authorKhushil Mistry <khushil324@gmail.com>
Wed, 12 Jun 2019 14:57:39 +0200
changeset 35840 f6f0c189c55a7e2d1acf453c220da679b2e17dae
parent 35839 08f782cdbba08eac23bd41d5638e600b331db091
child 35841 5fb059126bfaa39464ac0db87db20e608b40fbc6
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersjorgk
bugs1538547
Bug 1538547 [de-xbl] convert badgebutton binding to custom element. r=jorgk
mail/base/content/mainMailToolbox.inc.xul
mail/base/content/messenger.xul
mail/components/im/content/badgebutton.xml
mail/components/im/content/chat.css
mail/components/im/content/toolbarbutton-badge-button.js
mail/components/im/jar.mn
mail/test/mozmill/im/test-toolbar-buttons.js
--- a/mail/base/content/mainMailToolbox.inc.xul
+++ b/mail/base/content/mainMailToolbox.inc.xul
@@ -292,17 +292,17 @@
                 attribute="checked"/>
     </toolbarbutton>
 #endif
     <toolbarbutton id="button-address"
                    class="toolbarbutton-1"
                    label="&addressBookButton.label;"
                    oncommand="toAddressBook();"
                    tooltiptext="&addressBookButton.tooltip;"/>
-    <toolbarbutton id="button-chat"
+    <toolbarbutton is="toolbarbutton-badge-button" id="button-chat"
                    class="toolbarbutton-1"
                    label="&chatButton.label;"
                    command="cmd_chat"
                    observes="cmd_chat"
                    tooltiptext="&chatButton.tooltip;"/>
     <toolbaritem id="throbber-box" title="&throbberItem.title;" align="center" pack="center"
                  mousethrough="always">
        <image/>
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -148,16 +148,17 @@
 <script src="chrome://messenger/content/quickFilterBar.js"/>
 <script src="chrome://messenger/content/newmailaccount/uriListener.js"/>
 <script src="chrome://messenger/content/chat/chat-conversation-info.js"/>
 <script src="chrome://gloda/content/autocomplete-richlistitem.js"/>
 <script src="chrome://messenger/content/chat/chat-contact.js"/>
 <script src="chrome://messenger/content/chat/chat-group.js"/>
 <script src="chrome://messenger/content/chat/chat-imconv.js"/>
 <script src="chrome://messenger/content/tabbrowser-tab.js"/>
+<script src="chrome://messenger/content/chat/toolbarbutton-badge-button.js"/>
 #ifdef XP_MACOSX
 <script src="chrome://messenger/content/macMessengerMenu.js"/>
 <script src="chrome://global/content/macWindowMenu.js"/>
 #endif
 
 <!-- move needed functions into a single js file -->
 <script src="chrome://messenger/content/threadPane.js"/>
 
--- a/mail/components/im/content/chat.css
+++ b/mail/components/im/content/chat.css
@@ -65,20 +65,16 @@ tooltip[type="im"] {
 #statusMessage:not([statusType="offline"]):not([disabled]), .statusMessage[editable] {
   cursor: text;
 }
 
 #statusMessage[editing], .statusMessage[editing] {
   -moz-appearance: textfield;
 }
 
-#button-chat {
-  -moz-binding: url('chrome://messenger/content/chat/badgebutton.xml#badgebutton');
-}
-
 toolbar[mode="text"] #button-chat {
   -moz-box-orient: horizontal;
 }
 
 .badgeButton-badge {
   display: none;
   background-color: red;
   border: 1px solid white;
rename from mail/components/im/content/badgebutton.xml
rename to mail/components/im/content/toolbarbutton-badge-button.js
--- a/mail/components/im/content/badgebutton.xml
+++ b/mail/components/im/content/toolbarbutton-badge-button.js
@@ -1,56 +1,71 @@
-<?xml version="1.0"?>
-<!-- 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/. -->
+/* 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/. */
 
-<!DOCTYPE bindings>
+"use strict";
 
-<bindings id="badgebuttonBindings"
-          xmlns="http://www.mozilla.org/xbl"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-          xmlns:xbl="http://www.mozilla.org/xbl">
+/* globals MozXULElement */
 
-  <binding id="badgebutton"
-           extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton"
-           role="xul:toolbarbutton">
-    <content>
-      <children includes="observes|template|menupopup|panel|tooltip"/>
-      <xul:stack>
-        <xul:hbox>
-          <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
-        </xul:hbox>
-        <xul:box class="badgeButton-badge">
-          <xul:label class="badgeButton-badgeLabel" anonid="badge"/>
-        </xul:box>
-      </xul:stack>
-      <xul:label class="toolbarbutton-text" crop="right" flex="1"
-                 xbl:inherits="value=label,accesskey,crop"/>
-    </content>
-    <implementation>
-      <field name="_badgeCount">
-      0
-      </field>
+// This is loaded into all XUL windows. 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. It also gets
+   * filled blue when there are any unread messages.
+   *
+   * @extends MozToolbarbutton
+   */
+  class MozBadgebutton extends customElements.get("toolbarbutton") {
+    static get inheritedAttributes() {
+      return {
+        ".toolbarbutton-icon": "validate,src=image,label",
+        ".toolbarbutton-text": "value=label,accesskey,crop",
+      };
+    }
+    connectedCallback() {
+      if (this.delayConnectedCallback() || this.hasChildNodes()) {
+        return;
+      }
+      this.setAttribute("is", "toolbarbutton-badge-button");
+      this.appendChild(MozXULElement.parseXULToFragment(`
+        <stack>
+          <hbox>
+            <image class="toolbarbutton-icon"></image>
+          </hbox>
+          <box class="badgeButton-badge">
+            <label class="badgeButton-badgeLabel"></label>
+          </box>
+        </stack>
+        <label class="toolbarbutton-text" crop="right" flex="1"></label>
+      `));
 
-      <property name="badgeCount" onget="return this._badgeCount;"
-                                  onset="return this._setBadgeCount(val);">
-      </property>
+      this._badgeCount = 0;
+      this.initializeAttributeInheritance();
+    }
 
-      <method name="_setBadgeCount">
-        <parameter name="aNewCount"/>
-        <body>
-        <![CDATA[
-          this._badgeCount = aNewCount;
-          let badge = document.getAnonymousElementByAttribute(this, "anonid", "badge");
-          badge.value = this._badgeCount;
+    set badgeCount(val) {
+      return this._setBadgeCount(val);
+    }
+
+    get badgeCount() {
+      return this._badgeCount;
+    }
 
-          if (this._badgeCount > 0)
-            this.setAttribute("showingBadge", "true");
-          else
-            this.removeAttribute("showingBadge");
-        ]]>
-        </body>
-      </method>
-    </implementation>
+    _setBadgeCount(aNewCount) {
+      this._badgeCount = aNewCount;
+      let badge = this.querySelector(".badgeButton-badgeLabel");
+      badge.value = this._badgeCount;
 
-  </binding>
-</bindings>
+      if (this._badgeCount > 0) {
+        this.setAttribute("showingBadge", "true");
+      } else {
+        this.removeAttribute("showingBadge");
+      }
+    }
+  }
+
+  customElements.define("toolbarbutton-badge-button", MozBadgebutton, { extends: "toolbarbutton" });
+}
--- a/mail/components/im/jar.mn
+++ b/mail/components/im/jar.mn
@@ -4,31 +4,31 @@
 
 messenger.jar:
     content/messenger/chat/chat-messenger.js             (content/chat-messenger.js)
     content/messenger/chat/chat.css                      (content/chat.css)
     content/messenger/am-im.js                           (content/am-im.js)
     content/messenger/am-im.xul                          (content/am-im.xul)
     content/messenger/chat/addbuddy.js                   (content/addbuddy.js)
     content/messenger/chat/addbuddy.xul                  (content/addbuddy.xul)
-    content/messenger/chat/badgebutton.xml               (content/badgebutton.xml)
     content/messenger/chat/joinchat.js                   (content/joinchat.js)
     content/messenger/chat/joinchat.xul                  (content/joinchat.xul)
     content/messenger/chat/imAccounts.css                (content/imAccounts.css)
     content/messenger/chat/imAccounts.js                 (content/imAccounts.js)
     content/messenger/chat/imAccounts.xul                (content/imAccounts.xul)
     content/messenger/chat/imAccountWizard.xul           (content/imAccountWizard.xul)
     content/messenger/chat/imAccountWizard.js            (content/imAccountWizard.js)
     content/messenger/chat/imContextMenu.js              (content/imContextMenu.js)
     content/messenger/chat/imStatusSelector.js           (content/imStatusSelector.js)
     content/messenger/chat/chat-contact.js               (content/chat-contact.js)
     content/messenger/chat/imconversation.xml            (content/imconversation.xml)
     content/messenger/chat/chat-group.js                 (content/chat-group.js)
     content/messenger/chat/chat-imconv.js                (content/chat-imconv.js)
     content/messenger/chat/chat-conversation-info.js     (content/chat-conversation-info.js)
+    content/messenger/chat/toolbarbutton-badge-button.js (content/toolbarbutton-badge-button.js)
 % skin messenger-messagestyles classic/1.0 %skin/classic/messenger/messages/
 	skin/classic/messenger/messages/mail/Bitmaps/minus-hover.png          (messages/mail/Bitmaps/minus-hover.png)
 	skin/classic/messenger/messages/mail/Bitmaps/minus.png                (messages/mail/Bitmaps/minus.png)
 	skin/classic/messenger/messages/mail/Bitmaps/plus-hover.png           (messages/mail/Bitmaps/plus-hover.png)
 	skin/classic/messenger/messages/mail/Bitmaps/plus.png                 (messages/mail/Bitmaps/plus.png)
 	skin/classic/messenger/messages/mail/Footer.html                      (messages/mail/Footer.html)
 	skin/classic/messenger/messages/mail/Incoming/buddy_icon.png          (messages/mail/Incoming/buddy_icon.png)
 	skin/classic/messenger/messages/mail/Outgoing/buddy_icon.png          (messages/mail/Incoming/buddy_icon.png)
--- a/mail/test/mozmill/im/test-toolbar-buttons.js
+++ b/mail/test/mozmill/im/test-toolbar-buttons.js
@@ -15,17 +15,16 @@ var {Services} = ChromeUtils.import("res
 function setupModule(module) {
   collector.getModule("folder-display-helpers").installInto(module);
 }
 
 /* This test checks that the toolbar buttons of the chat toolbar are
  * correctly disabled/enabled, and that the placeholder displayed in
  * the middle of the chat tab is correct.
  */
-test_toolbar_and_placeholder.__force_skip__ = true;
 function test_toolbar_and_placeholder() {
   assert_not_equals(mc.tabmail.selectedTab.mode.type, "chat",
                     "the chat tab shouldn't be selected at startup");
   mc.click(mc.eid("button-chat"));
   assert_equals(mc.tabmail.selectedTab.mode.type, "chat",
                 "the chat tab should be selected");
 
   // Check that "No connected account" placeholder is correct.