Bug 1554648 - [de-xbl] convert the calendar-subscriptions-richlistitem binding to custom element. r=philipp
authorKhushil Mistry <khushil324@gmail.com>
Sun, 09 Jun 2019 04:23:00 +0200
changeset 35814 a7bf84ab2a7585a118fa6d66fa6f79e1618b7172
parent 35813 5fa5def104b3a0f96b553e47f6d0defde3f96cda
child 35815 97712b1f5c4be2d92e565e283727c5fec1564b4b
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersphilipp
bugs1554648
Bug 1554648 - [de-xbl] convert the calendar-subscriptions-richlistitem binding to custom element. r=philipp
calendar/base/content/dialogs/calendar-subscriptions-dialog.css
calendar/base/content/dialogs/calendar-subscriptions-dialog.js
calendar/base/content/dialogs/calendar-subscriptions-dialog.xul
calendar/base/content/widgets/calendar-subscriptions-list.js
calendar/base/content/widgets/calendar-subscriptions-list.xml
calendar/base/jar.mn
calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css
--- a/calendar/base/content/dialogs/calendar-subscriptions-dialog.css
+++ b/calendar/base/content/dialogs/calendar-subscriptions-dialog.css
@@ -1,8 +1,7 @@
 /* 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/. */
 
-calendar-subscriptions-richlistitem {
-  -moz-binding: url("chrome://calendar/content/calendar-subscriptions-list.xml#calendar-subscriptions-richlistitem");
+richlistitem[is="calendar-subscriptions-richlistitem"] {
   -moz-user-focus: normal;
 }
--- a/calendar/base/content/dialogs/calendar-subscriptions-dialog.js
+++ b/calendar/base/content/dialogs/calendar-subscriptions-dialog.js
@@ -98,17 +98,18 @@ function onSearch() {
     for (let calendar of cal.getCalendarManager().getCalendars({})) {
         registeredCals[calendar.id] = true;
     }
 
     let opListener = {
         onResult: function(operation, result) {
             if (result) {
                 for (let calendar of result) {
-                    let newNode = document.createXULElement("calendar-subscriptions-richlistitem");
+                    let newNode = document.createXULElement("richlistitem",
+                        { is: "calendar-subscriptions-richlistitem" });
                     newNode.calendar = calendar;
                     newNode.subscribed = registeredCals[calendar.id];
                     richListBox.appendChild(newNode);
                 }
             }
             if (!operation.isPending) {
                 let statusDeck = document.getElementById("status-deck");
                 if (richListBox.getRowCount() > 0) {
--- a/calendar/base/content/dialogs/calendar-subscriptions-dialog.xul
+++ b/calendar/base/content/dialogs/calendar-subscriptions-dialog.xul
@@ -22,16 +22,17 @@
   onunload="return onUnload();"
   onkeypress="onKeyPress(event);"
   persist="screenX screenY width height"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
 
   <!-- Javascript includes -->
   <script src="chrome://calendar/content/calendar-subscriptions-dialog.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
+  <script src="chrome://calendar/content/calendar-subscriptions-list.js"/>
 
   <vbox flex="1">
     <grid flex="1">
       <columns>
         <column flex="1"/>
         <column/>
       </columns>
       <rows>
rename from calendar/base/content/widgets/calendar-subscriptions-list.xml
rename to calendar/base/content/widgets/calendar-subscriptions-list.js
--- a/calendar/base/content/widgets/calendar-subscriptions-list.xml
+++ b/calendar/base/content/widgets/calendar-subscriptions-list.js
@@ -1,102 +1,96 @@
-<?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/. */
 
-<bindings id="calendar-subscriptions-list-bindings"
-          xmlns="http://www.mozilla.org/xbl"
-          xmlns:html="http://www.w3.org/1999/xhtml"
-          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-          xmlns:xbl="http://www.mozilla.org/xbl">
+"use strict";
+
+/* global MozXULElement, MozElements */
 
-  <binding id="calendar-subscriptions-richlistitem"
-           extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
-    <content>
-      <xul:hbox flex="1">
-        <xul:checkbox anonid="subscription-checkbox" class="calendar-subscriptions-richlistitem-checkbox"/>
-        <xul:label anonid="subscription-name" flex="1" crop="end"/>
-      </xul:hbox>
-    </content>
+// This is loaded into all XUL windows. Wrap in a block to prevent
+// leaking to window scope.
+{
+    /**
+     * The MozCalendarSubscriptionsRichlistitem widget is used to display the
+     * calendar details: i.e. checkbox and label as a richlistitem in the calendar
+     * subscriptions richlistbox.
+     *
+     * @extends {MozElements.MozRichlistitem}
+     */
+    class MozCalendarSubscriptionsRichlistitem extends MozElements.MozRichlistitem {
+        connectedCallback() {
+            if (this.delayConnectedCallback() || this.hasChildNodes()) {
+                return;
+            }
 
-    <implementation>
-      <field name="mCalendar">null</field>
-      <field name="mSubscribed">false</field>
+            this.setAttribute("is", "calendar-subscriptions-richlistitem");
 
-      <property name="calendar">
-        <getter><![CDATA[
-            return this.mCalendar;
-        ]]></getter>
-        <setter><![CDATA[
+            this.appendChild(MozXULElement.parseXULToFragment(`
+                <hbox flex="1" align="center">
+                    <checkbox class="calendar-subscriptions-richlistitem-checkbox"></checkbox>
+                    <label class="subscription-name" flex="1" crop="end"></label>
+                </hbox>
+            `));
+
+            this.mCalendar = null;
+            this.mSubscribed = false;
+        }
+
+        set calendar(val) {
             this.setCalendar(val);
             return val;
-        ]]></setter>
-      </property>
+        }
 
-      <property name="subscribed">
-        <getter><![CDATA[
-            return this.mSubscribed;
-        ]]></getter>
-        <setter><![CDATA[
+        get calendar() {
+            return this.mCalendar;
+        }
+
+        set subscribed(val) {
             this.mSubscribed = val;
             this.checked = val;
             return val;
-        ]]></setter>
-      </property>
+        }
 
-      <property name="checked">
-        <getter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
-            if (checkbox.getAttribute("checked") == "true") {
-                return true;
-            } else {
-                return false;
-            }
-        ]]></getter>
-        <setter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
+        get subscribed() {
+            return this.mSubscribed;
+        }
+
+        set checked(val) {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
             if (val) {
                 checkbox.setAttribute("checked", "true");
             } else {
                 checkbox.removeAttribute("checked");
             }
             return val;
-        ]]></setter>
-      </property>
+        }
 
-      <property name="disabled">
-        <getter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
-            if (checkbox.getAttribute("disabled") == "true") {
-                return true;
-            } else {
-                return false;
-            }
-        ]]></getter>
-        <setter><![CDATA[
-            let checkbox = document.getAnonymousElementByAttribute(
-              this, "anonid", "subscription-checkbox");
+        get checked() {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
+            return checkbox.getAttribute("disabled") == "true";
+        }
+
+        set disabled(val) {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
             if (val) {
                 checkbox.setAttribute("disabled", "true");
             } else {
                 checkbox.removeAttribute("disabled");
             }
             return val;
-        ]]></setter>
-      </property>
+        }
 
-      <method name="setCalendar">
-        <parameter name="aCalendar"/>
-        <body><![CDATA[
+        get disabled() {
+            let checkbox = this.querySelector(".calendar-subscriptions-richlistitem-checkbox");
+            return checkbox.getAttribute("disabled") == "true";
+        }
+
+        setCalendar(aCalendar) {
             this.mCalendar = aCalendar;
-            let label = document.getAnonymousElementByAttribute(
-                this, "anonid", "subscription-name");
+            let label = this.querySelector(".subscription-name");
             label.setAttribute("value", aCalendar.name);
-        ]]></body>
-      </method>
-    </implementation>
-  </binding>
-</bindings>
+        }
+    }
+
+    customElements.define("calendar-subscriptions-richlistitem", MozCalendarSubscriptionsRichlistitem,
+        { extends: "richlistitem" });
+}
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -90,17 +90,17 @@ calendar.jar:
     content/calendar/preferences/editCategory.xul          (content/preferences/editCategory.xul)
     content/calendar/preferences/editCategory.js           (content/preferences/editCategory.js)
     content/calendar/preferences/general.js                (content/preferences/general.js)
     content/calendar/preferences/views.js                  (content/preferences/views.js)
     content/calendar/widgets/minimonth.xml                 (content/widgets/minimonth.xml)
     content/calendar/widgets/calendar-alarm-widget.js      (content/widgets/calendar-alarm-widget.js)
     content/calendar/widgets/calendar-widgets.xml          (content/widgets/calendar-widgets.xml)
     content/calendar/widgets/calendar-list-tree.js         (content/widgets/calendar-list-tree.js)
-    content/calendar/calendar-subscriptions-list.xml       (content/widgets/calendar-subscriptions-list.xml)
+    content/calendar/calendar-subscriptions-list.js        (content/widgets/calendar-subscriptions-list.js)
     content/calendar/widgets/calendar-widget-bindings.css  (content/widgets/calendar-widget-bindings.css)
     content/calendar/calApplicationUtils.js                (src/calApplicationUtils.js)
     content/calendar/calFilter.js                          (src/calFilter.js)
     content/calendar/WindowsNTToZoneInfoTZId.properties    (src/WindowsNTToZoneInfoTZId.properties)
 % skin calendar classic/1.0 chrome/skin/linux/calendar/
 % skin calendar classic/1.0 chrome/skin/osx/calendar/ os=Darwin
 % skin calendar classic/1.0 chrome/skin/windows/calendar/ os=WINNT
 % skin calendar-common classic/1.0 chrome/skin/common/
--- a/calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-subscriptions-dialog.css
@@ -18,17 +18,17 @@
   padding-top: 2px;
   padding-bottom: 3px;
   padding-inline-start: 4px;
   padding-inline-end: 2px;
   display: flex;
   flex-direction: column;
 }
 
-calendar-subscriptions-richlistitem[selected="true"] {
+richlistitem[is="calendar-subscriptions-richlistitem"][selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }
 
 .calendar-subscriptions-richlistitem-checkbox {
   margin-inline-end: 0px;
 }