Bug 1489795 - Migrate statuspanel to custom element. r=mkmelin
☠☠ backed out by f386902fa732 ☠ ☠
authorArshad Khan <arshdkhn1@gmail.com>
Sun, 09 Sep 2018 00:34:20 +0530
changeset 33305 b4b14a46f3f83f60dc13628b250903a1b12c2eb3
parent 33304 ff185577e79d45203202dd6e9f587fa6888a505a
child 33306 8a607b0960af73bb04908e4a035e700654b60bfb
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersmkmelin
bugs1489795
Bug 1489795 - Migrate statuspanel to custom element. r=mkmelin
common/content/customElements.js
mail/base/content/messenger.css
mail/base/content/messenger.xul
mail/base/content/statuspanel.js
mail/base/content/tabmail.xml
mail/base/jar.mn
--- a/common/content/customElements.js
+++ b/common/content/customElements.js
@@ -3,12 +3,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 
 for (let script of [
   "chrome://messenger/content/mailWidgets.js",
+  "chrome://messenger/content/statuspanel.js",
 ]) {
   Services.scriptloader.loadSubScript(script, window);
 }
 
--- a/mail/base/content/messenger.css
+++ b/mail/base/content/messenger.css
@@ -620,17 +620,16 @@ statusbar {
 window[sizemode="maximized"] statusbarpanel.statusbar-resizerpanel {
   visibility: collapse;
 }
 %endif
 
 /* Status panel */
 
 statuspanel {
-  -moz-binding: url("chrome://messenger/content/tabmail.xml#statuspanel");
   position: fixed;
   margin-top: -3em;
   left: 0;
   z-index: 20;
   max-width: 50%;
   transition: opacity 100ms ease-out;
 }
 
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -735,17 +735,17 @@
   </hbox>
   <panel id="customizeToolbarSheetPopup" noautohide="true">
     <iframe id="customizeToolbarSheetIFrame"
             style="&dialog.dimensions;"
             hidden="true"/>
   </panel>
 
   <notificationbox id="mail-notification-box" notificationside="bottom"/>
-  <statuspanel id="statusbar-display" label=""/>
+  <statuspanel id="statusbar-display"/>
   <statusbar id="status-bar" class="chromeclass-status">
 #include mainStatusbar.inc
     <statusbarpanel id="unreadMessageCount"/>
     <statusbarpanel id="totalMessageCount"/>
   </statusbar>
 
 </window>
 
new file mode 100644
--- /dev/null
+++ b/mail/base/content/statuspanel.js
@@ -0,0 +1,76 @@
+/**
+ * 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/. */
+
+/* global MozXULElement */
+
+class MozStatuspanel extends MozXULElement {
+  static get observedAttributes() {
+    return ["label", "mirror"];
+  }
+
+  connectedCallback() {
+    const hbox = document.createElement("hbox");
+    hbox.setAttribute("class", "statuspanel-inner");
+
+    const label = document.createElement("label");
+    label.setAttribute("class", "statuspanel-label");
+    label.setAttribute("flex", "1");
+    label.setAttribute("crop", "end");
+
+    hbox.appendChild(label);
+    this.appendChild(hbox);
+
+    this._updateAttributes();
+    this._setupEventListeners();
+  }
+
+  attributeChangedCallback() {
+    this._updateAttributes();
+  }
+
+  set label(val) {
+    if (!this.label) {
+      this.removeAttribute("mirror");
+    }
+    this.setAttribute("label", val);
+    return val;
+  }
+
+  get label() {
+    return this.getAttribute("label");
+  }
+
+  _updateAttributes() {
+    if (!this.isConnected) {
+      return;
+    }
+
+    const statuspanelLabel = this.querySelector(".statuspanel-label");
+
+    if (this.hasAttribute("label")) {
+      statuspanelLabel.setAttribute("value", this.getAttribute("label"));
+    } else {
+      statuspanelLabel.removeAttribute("value");
+    }
+
+    if (this.hasAttribute("mirror")) {
+      statuspanelLabel.setAttribute("mirror", this.getAttribute("mirror"));
+    } else {
+      statuspanelLabel.removeAttribute("mirror");
+    }
+  }
+
+  _setupEventListeners() {
+    this.addEventListener("mouseover", event => {
+      if (this.hasAttribute("mirror")) {
+        this.removeAttribute("mirror");
+      } else {
+        this.setAttribute("mirror", "true");
+      }
+    });
+  }
+}
+
+customElements.define("statuspanel", MozStatuspanel);
--- a/mail/base/content/tabmail.xml
+++ b/mail/base/content/tabmail.xml
@@ -2920,44 +2920,9 @@
           tabbedBrowser.removeCurrentTab();
       ]]></handler>
       <handler event="dblclick" button="0" phase="capturing">
         // for the one-close-button case
         event.stopPropagation();
       </handler>
     </handlers>
   </binding>
-
-  <binding id="statuspanel" display="xul:hbox">
-    <content>
-      <xul:hbox class="statuspanel-inner">
-        <xul:label class="statuspanel-label"
-                   xbl:inherits="value=label,mirror"
-                   flex="1"
-                   crop="end"/>
-      </xul:hbox>
-    </content>
-
-    <implementation>
-      <property name="label">
-        <setter>
-          if (!this.label)
-            this.removeAttribute("mirror");
-          this.setAttribute("label", val);
-          return val;
-        </setter>
-        <getter>
-          return this.getAttribute("label");
-        </getter>
-      </property>
-    </implementation>
-
-    <handlers>
-      <handler event="mouseover">
-        if (this.hasAttribute("mirror"))
-          this.removeAttribute("mirror");
-        else
-          this.setAttribute("mirror", "true");
-      </handler>
-    </handlers>
-  </binding>
-
 </bindings>
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@@ -74,16 +74,17 @@ messenger.jar:
     content/messenger/searchBar.js                  (content/searchBar.js)
     content/messenger/phishingDetector.js           (content/phishingDetector.js)
     content/messenger/mail-offline.js               (content/mail-offline.js)
     content/messenger/aboutDialog.css               (content/aboutDialog.css)
 *   content/messenger/messenger.css                 (content/messenger.css)
     content/messenger/search.xml                    (content/search.xml)
     content/messenger/tabmail.xml                   (content/tabmail.xml)
     content/messenger/tabmail.css                   (content/tabmail.css)
+    content/messenger/statuspanel.js                (content/statuspanel.js)
     content/messenger/newTagDialog.xul              (content/newTagDialog.xul)
     content/messenger/newTagDialog.js               (content/newTagDialog.js)
     content/messenger/composerOverlay.css           (content/composerOverlay.css)
     content/messenger/threadPane.js                 (content/threadPane.js)
     content/messenger/threadPaneColumnPicker.xml    (content/threadPaneColumnPicker.xml)
     content/messenger/protovis-r2.6-modded.js       (content/protovis-r2.6-modded.js)
     content/messenger/dark.icon.svg                 (content/dark.icon.svg)
     content/messenger/light.icon.svg                (content/light.icon.svg)