Bug 1538533 - de-xbl calendar-invitations-richlistitem binding. r=mkmelin

2019-05-20 10:59:20 +02:00 · 2019-05-20 10:59:20 +02:00 · cbd347a00c
--- a/calendar/base/content/dialogs/calendar-invitations-dialog.css
+++ b/calendar/base/content/dialogs/calendar-invitations-dialog.css
@ -2,10 +2,6 @@
 * 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-invitations-richlistitem {
-  -moz-binding: url(chrome://calendar/content/calendar-invitations-list.xml#calendar-invitations-richlistitem);
-}
-
-calendar-invitations-richlistitem[selected="true"] {
+richlistitem.calendar-invitations-richlistitem[selected="true"] {
  -moz-user-focus: normal;
 }
--- a/calendar/base/content/dialogs/calendar-invitations-dialog.js
+++ b/calendar/base/content/dialogs/calendar-invitations-dialog.js
@ -4,9 +4,195 @@

 /* exported onLoad, onUnload */

-/* globals invitationsText */// From calendar-invitations-dialog.xul.
+/* globals invitationsText, MozXULElement, MozElements */// From calendar-invitations-dialog.xul.

 var { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
+var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+
+class MozCalendarInvitationsRichlistitem extends MozElements.MozRichlistitem {
+    constructor() {
+        super();
+
+        this.mDateFormatter = null;
+        this.mCalendarItem = null;
+        this.mInitialParticipationStatus = null;
+        this.mParticipationStatus = null;
+        this.mDateFormatter = cal.getDateFormatter();
+        this.calInvitationsProps = Services.strings
+            .createBundle("chrome://calendar/locale/calendar-invitations-dialog.properties");
+    }
+
+    getString(propName) {
+        return this.calInvitationsProps.GetStringFromName(propName);
+    }
+
+    connectedCallback() {
+        if (this.delayConnectedCallback() || this.hasChildNodes()) {
+            return;
+        }
+
+        this.setAttribute("is", "calendar-invitations-richlistitem");
+
+        this.appendChild(MozXULElement.parseXULToFragment(`
+        <hbox align="start" flex="1">
+            <image class="calendar-invitations-richlistitem-icon"/>
+            <vbox flex="1">
+                <label class="calendar-invitations-richlistitem-title" crop="end"/>
+                <label class="calendar-invitations-richlistitem-date" crop="end"/>
+                <label class="calendar-invitations-richlistitem-recurrence" crop="end"/>
+                <label class="calendar-invitations-richlistitem-location" crop="end"/>
+                <label class="calendar-invitations-richlistitem-organizer" crop="end"/>
+                <label class="calendar-invitations-richlistitem-attendee" crop="end"/>
+                <label class="calendar-invitations-richlistitem-spacer" value="" hidden="true"/>
+            </vbox>
+            <vbox>
+                <button group="${this.getAttribute("itemId")}"
+                        type="radio"
+                        class="calendar-invitations-richlistitem-accept-button
+                        calendar-invitations-richlistitem-button"
+                        label="&calendar.invitations.list.accept.button.label;"
+                        oncommand="accept();"/>
+                <button group="${this.getAttribute("itemId")}"
+                        type="radio"
+                        class="calendar-invitations-richlistitem-decline-button
+                        calendar-invitations-richlistitem-button"
+                        label="&calendar.invitations.list.decline.button.label;"
+                        oncommand="decline();"/>
+            </vbox>
+        </hbox>
+        `, ["chrome://calendar/locale/calendar-invitations-dialog.dtd"]));
+    }
+
+    set calendarItem(val) {
+        this.setCalendarItem(val);
+        return val;
+    }
+
+    get calendarItem() {
+        return this.mCalendarItem;
+    }
+
+    set initialParticipationStatus(val) {
+        this.mInitialParticipationStatus = val;
+        return val;
+    }
+
+    get initialParticipationStatus() {
+        return this.mInitialParticipationStatus;
+    }
+
+    set participationStatus(val) {
+        this.mParticipationStatus = val;
+        let icon = this.querySelector(".calendar-invitations-richlistitem-icon");
+        icon.setAttribute("status", val);
+        return val;
+    }
+
+    get participationStatus() {
+        return this.mParticipationStatus;
+    }
+
+    setCalendarItem(item) {
+        this.mCalendarItem = item;
+        this.mInitialParticipationStatus =
+            this.getCalendarItemParticipationStatus(item);
+        this.participationStatus = this.mInitialParticipationStatus;
+
+        let titleLabel = this.querySelector(".calendar-invitations-richlistitem-title");
+        titleLabel.setAttribute("value", item.title);
+
+        let dateLabel = this.querySelector(".calendar-invitations-richlistitem-date");
+        let dateString = this.mDateFormatter.formatItemInterval(item);
+        if (item.startDate.isDate) {
+            dateString += ", " + this.getString("alldayEvent");
+        }
+        dateLabel.setAttribute("value", dateString);
+
+        let recurrenceLabel = this.querySelector(".calendar-invitations-richlistitem-recurrence");
+        if (item.recurrenceInfo) {
+            recurrenceLabel.setAttribute("value", this.getString("recurrentEvent"));
+        } else {
+            recurrenceLabel.setAttribute("hidden", "true");
+            let spacer = this.querySelector(".calendar-invitations-richlistitem-spacer");
+            spacer.removeAttribute("hidden");
+        }
+
+        let locationLabel = this.querySelector(".calendar-invitations-richlistitem-location");
+        let locationProperty = item.getProperty("LOCATION") || this.getString("none");
+        let locationString = this.calInvitationsProps.formatStringFromName(
+            "location", [locationProperty], 1
+        );
+
+        locationLabel.setAttribute("value", locationString);
+
+        let organizerLabel = this.querySelector(".calendar-invitations-richlistitem-organizer");
+        let org = item.organizer;
+        let organizerProperty = "";
+        if (org) {
+            if (org.commonName && org.commonName.length > 0) {
+                organizerProperty = org.commonName;
+            } else if (org.id) {
+                organizerProperty = org.id.replace(/^mailto:/i, "");
+            }
+        }
+        let organizerString = this.calInvitationsProps.formatStringFromName(
+            "organizer", [organizerProperty], 1
+        );
+        organizerLabel.setAttribute("value", organizerString);
+
+        let attendeeLabel = this.querySelector(".calendar-invitations-richlistitem-attendee");
+        let att = cal.itip.getInvitedAttendee(item);
+        let attendeeProperty = "";
+        if (att) {
+            if (att.commonName && att.commonName.length > 0) {
+                attendeeProperty = att.commonName;
+            } else if (att.id) {
+                attendeeProperty = att.id.replace(/^mailto:/i, "");
+            }
+        }
+        let attendeeString = this.calInvitationsProps.formatStringFromName(
+            "attendee", [attendeeProperty], 1
+        );
+        attendeeLabel.setAttribute("value", attendeeString);
+        Array.from(this.querySelectorAll("button")).map(
+            button => button.setAttribute("group", item.hashId)
+        );
+    }
+
+    getCalendarItemParticipationStatus(item) {
+        let att = cal.itip.getInvitedAttendee(item);
+        return (att ? att.participationStatus : null);
+    }
+
+    setCalendarItemParticipationStatus(item, status) {
+        let calendar = cal.wrapInstance(item.calendar, Ci.calISchedulingSupport);
+        if (calendar) {
+            let att = calendar.getInvitedAttendee(item);
+            if (att) {
+                let att_ = att.clone();
+                att_.participationStatus = status;
+
+                // Update attendee
+                item.removeAttendee(att);
+                item.addAttendee(att_);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    accept() {
+        this.participationStatus = "ACCEPTED";
+    }
+
+    decline() {
+        this.participationStatus = "DECLINED";
+    }
+}
+customElements.define(
+    "calendar-invitations-richlistitem",
+    MozCalendarInvitationsRichlistitem, { "extends": "richlistitem" }
+);

 /**
 * Sets up the invitations dialog from the window arguments, retrieves the
@ -36,9 +222,10 @@ function onLoad() {
            updatingBox.setAttribute("hidden", "true");
            let richListBox = document.getElementById("invitations-listbox");
            for (let item of aItems) {
-                let newNode = document.createXULElement("calendar-invitations-richlistitem");
-                newNode.calendarItem = item;
+                let newNode = document.createXULElement("richlistitem", { is: "calendar-invitations-richlistitem" });
+                newNode.classList.add("calendar-invitations-richlistitem");
                richListBox.appendChild(newNode);
+                newNode.calendarItem = item;
            }
        }
    };
--- a/calendar/base/content/dialogs/calendar-invitations-list.xml
+++ b/calendar/base/content/dialogs/calendar-invitations-list.xml
@ -1,224 +0,0 @@
-<?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/. -->
-
-<!-- import-globals-from calendar-invitations-dialog.js -->
-
-<!DOCTYPE dialog [
-  <!ENTITY % dtd1 SYSTEM "chrome://calendar/locale/calendar-invitations-dialog.dtd" >  %dtd1;
-]>
-
-<bindings id="calendar-invitations-list-bindings"
-          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">
-  <binding id="calendar-invitations-richlistitem"
-           extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
-    <content>
-      <xul:hbox align="start" flex="1">
-        <xul:image anonid="icon" class="calendar-invitations-richlistitem-icon"/>
-        <xul:vbox flex="1">
-          <xul:label anonid="title" class="calendar-invitations-richlistitem-title"
-                     crop="end"/>
-          <xul:label anonid="date" crop="end"/>
-          <xul:label anonid="recurrence" crop="end"/>
-          <xul:label anonid="location" crop="end"/>
-          <xul:label anonid="organizer" crop="end"/>
-          <xul:label anonid="attendee" crop="end"/>
-          <xul:label anonid="spacer" value="" hidden="true"/>
-        </xul:vbox>
-        <xul:vbox>
-          <xul:button anonid="accept"
-            xbl:inherits="group=itemId"
-            type="radio"
-            class="calendar-invitations-richlistitem-accept-button
-            calendar-invitations-richlistitem-button"
-            label="&calendar.invitations.list.accept.button.label;"
-            oncommand="accept();"/>
-          <xul:button anonid="decline"
-            xbl:inherits="group=itemId"
-            type="radio"
-            class="calendar-invitations-richlistitem-decline-button
-            calendar-invitations-richlistitem-button"
-            label="&calendar.invitations.list.decline.button.label;"
-            oncommand="decline();"/>
-        </xul:vbox>
-      </xul:hbox>
-    </content>
-
-    <implementation>
-      <!-- fields -->
-      <field name="mDateFormatter">null</field>
-      <field name="mCalendarItem">null</field>
-      <field name="mInitialParticipationStatus">null</field>
-      <field name="mParticipationStatus">null</field>
-
-      <property name="mStrings">
-        <getter>
-            return {
-                alldayEvent: "&calendar.invitations.list.alldayevent.text;",
-                recurrentEvent: "&calendar.invitations.list.recurrentevent.text;",
-                location: "&calendar.invitations.list.location.text;",
-                organizer: "&calendar.invitations.list.organizer.text;",
-                attendee: "&calendar.invitations.list.attendee.text;",
-                none: "&calendar.invitations.list.none.text;"
-            };
-        </getter>
-      </property>
-
-      <!-- properties -->
-      <property name="calendarItem">
-        <getter><![CDATA[
-            return this.mCalendarItem;
-        ]]></getter>
-        <setter><![CDATA[
-            this.setCalendarItem(val);
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="initialParticipationStatus">
-        <getter><![CDATA[
-            return this.mInitialParticipationStatus;
-        ]]></getter>
-        <setter><![CDATA[
-            this.mInitialParticipationStatus = val;
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="participationStatus">
-        <getter><![CDATA[
-            return this.mParticipationStatus;
-        ]]></getter>
-        <setter><![CDATA[
-            this.mParticipationStatus = val;
-            let icon = document.getAnonymousElementByAttribute(
-                this, "anonid", "icon");
-            icon.setAttribute("status", val);
-            return val;
-        ]]></setter>
-      </property>
-
-      <!-- constructor -->
-      <constructor><![CDATA[
-          const { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
-          this.mDateFormatter = cal.getDateFormatter();
-      ]]></constructor>
-
-      <!-- methods -->
-      <method name="setCalendarItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            this.mCalendarItem = aItem;
-            this.mInitialParticipationStatus =
-                this.getCalendarItemParticipationStatus(aItem);
-            this.participationStatus = this.mInitialParticipationStatus;
-
-            let titleLabel = document.getAnonymousElementByAttribute(
-                this, "anonid", "title");
-            titleLabel.setAttribute("value", aItem.title);
-
-            let dateLabel = document.getAnonymousElementByAttribute(
-                this, "anonid", "date");
-            let dateString = this.mDateFormatter.formatItemInterval(aItem);
-            if (aItem.startDate.isDate) {
-                dateString += ", " + this.mStrings.alldayEvent;
-            }
-            dateLabel.setAttribute("value", dateString);
-
-            let recurrenceLabel = document.getAnonymousElementByAttribute(
-                this, "anonid", "recurrence");
-            if (aItem.recurrenceInfo) {
-                recurrenceLabel.setAttribute("value", this.mStrings.recurrentEvent);
-            } else {
-                recurrenceLabel.setAttribute("hidden", "true");
-                let spacer = document.getAnonymousElementByAttribute(
-                    this, "anonid", "spacer");
-                spacer.removeAttribute("hidden");
-            }
-
-            let locationLabel = document.getAnonymousElementByAttribute(
-                this, "anonid", "location");
-            let locationString = this.mStrings.location;
-            let locationProperty = aItem.getProperty("LOCATION");
-            if (locationProperty && locationProperty.length > 0) {
-                locationString += locationProperty;
-            } else {
-                locationString += this.mStrings.none;
-            }
-            locationLabel.setAttribute("value", locationString);
-
-            let organizerLabel = document.getAnonymousElementByAttribute(
-                this, "anonid", "organizer");
-            let organizerString = this.mStrings.organizer;
-            let org = aItem.organizer;
-            if (org) {
-                if (org.commonName && org.commonName.length > 0) {
-                    organizerString += org.commonName;
-                } else if (org.id) {
-                    organizerString += org.id.replace(/^mailto:/i, "");
-                }
-            }
-            organizerLabel.setAttribute("value", organizerString);
-
-            let attendeeLabel = document.getAnonymousElementByAttribute(
-                this, "anonid", "attendee");
-            let attendeeString = this.mStrings.attendee;
-            let att = cal.itip.getInvitedAttendee(aItem);
-            if (att) {
-                if (att.commonName && att.commonName.length > 0) {
-                    attendeeString += att.commonName;
-                } else if (att.id) {
-                    attendeeString += att.id.replace(/^mailto:/i, "");
-                }
-            }
-            attendeeLabel.setAttribute("value", attendeeString);
-            this.setAttribute("itemId", aItem.hashId);
-        ]]></body>
-      </method>
-
-      <method name="getCalendarItemParticipationStatus">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            let att = cal.itip.getInvitedAttendee(aItem);
-            return (att ? att.participationStatus : null);
-        ]]></body>
-      </method>
-
-      <method name="setCalendarItemParticipationStatus">
-        <parameter name="aItem"/>
-        <parameter name="aStatus"/>
-        <body><![CDATA[
-            let calendar = cal.wrapInstance(aItem.calendar, Ci.calISchedulingSupport);
-            if (calendar) {
-                let att = calendar.getInvitedAttendee(aItem);
-                if (att) {
-                    let att_ = att.clone();
-                    att_.participationStatus = aStatus;
-
-                    // Update attendee
-                    aItem.removeAttendee(att);
-                    aItem.addAttendee(att_);
-                    return true;
-                }
-            }
-            return false;
-        ]]></body>
-      </method>
-
-      <method name="accept">
-        <body><![CDATA[
-            this.participationStatus = "ACCEPTED";
-        ]]></body>
-      </method>
-
-      <method name="decline">
-        <body><![CDATA[
-            this.participationStatus = "DECLINED";
-        ]]></body>
-      </method>
-    </implementation>
-  </binding>
-</bindings>
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@ -67,7 +67,6 @@ calendar.jar:
    content/calendar/calendar-invitations-dialog.css       (content/dialogs/calendar-invitations-dialog.css)
    content/calendar/calendar-invitations-dialog.js        (content/dialogs/calendar-invitations-dialog.js)
    content/calendar/calendar-invitations-dialog.xul       (content/dialogs/calendar-invitations-dialog.xul)
-    content/calendar/calendar-invitations-list.xml         (content/dialogs/calendar-invitations-list.xml)
    content/calendar/calendar-migration-dialog.js          (content/dialogs/calendar-migration-dialog.js)
    content/calendar/calendar-migration-dialog.xul         (content/dialogs/calendar-migration-dialog.xul)
    content/calendar/calendar-occurrence-prompt.xul        (content/dialogs/calendar-occurrence-prompt.xul)
--- a/calendar/base/themes/common/dialogs/calendar-invitations-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-invitations-dialog.css
@ -20,7 +20,7 @@
  flex-direction: column;
 }

-calendar-invitations-richlistitem {
+.calendar-invitations-richlistitem {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-inline-start: 7px;
@ -29,7 +29,7 @@ calendar-invitations-richlistitem {
  border-bottom: 1px dotted #C0C0C0;
 }

-calendar-invitations-richlistitem[selected="true"] {
+.calendar-invitations-richlistitem[selected="true"] {
  background-color: Highlight;
  color: HighlightText;
  border-bottom: 1px dotted #7F9DB9;
@ -59,7 +59,7 @@ calendar-invitations-richlistitem[selected="true"] {
  visibility: hidden;
 }

-calendar-invitations-richlistitem[selected="true"] .calendar-invitations-richlistitem-button {
+.calendar-invitations-richlistitem[selected="true"] .calendar-invitations-richlistitem-button {
  visibility: visible;
 }

--- a/calendar/locales/en-US/chrome/calendar/calendar-invitations-dialog.dtd
+++ b/calendar/locales/en-US/chrome/calendar/calendar-invitations-dialog.dtd
@ -11,9 +11,3 @@
 <!-- Calendar Invitations List -->
 <!ENTITY calendar.invitations.list.accept.button.label                  "Accept">
 <!ENTITY calendar.invitations.list.decline.button.label                 "Decline">
-<!ENTITY calendar.invitations.list.recurrentevent.text                  "Repeating event">
-<!ENTITY calendar.invitations.list.alldayevent.text                     "All day event">
-<!ENTITY calendar.invitations.list.location.text                        "Location: ">
-<!ENTITY calendar.invitations.list.organizer.text                       "Organizer: ">
-<!ENTITY calendar.invitations.list.attendee.text                        "Attendee: ">
-<!ENTITY calendar.invitations.list.none.text                            "None">
--- a/calendar/locales/en-US/chrome/calendar/calendar-invitations-dialog.properties
+++ b/calendar/locales/en-US/chrome/calendar/calendar-invitations-dialog.properties
@ -0,0 +1,10 @@
+# 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/.
+
+allday-event=All day event
+recurrent-event=Repeating event
+location=Location: %S
+organizer=Organizer: %S
+attendee=Attendee: %S
+none=None
--- a/calendar/locales/jar.mn
+++ b/calendar/locales/jar.mn
@ -13,6 +13,7 @@ calendar-@AB_CD@.jar:
    locale/@AB_CD@/calendar/calendar-alarms.properties     (%chrome/calendar/calendar-alarms.properties)
    locale/@AB_CD@/calendar/calendar-event-dialog.dtd      (%chrome/calendar/calendar-event-dialog.dtd)
    locale/@AB_CD@/calendar/calendar-event-dialog.properties  (%chrome/calendar/calendar-event-dialog.properties)
+    locale/@AB_CD@/calendar/calendar-invitations-dialog.properties  (%chrome/calendar/calendar-invitations-dialog.properties)
    locale/@AB_CD@/calendar/calendar-invitations-dialog.dtd  (%chrome/calendar/calendar-invitations-dialog.dtd)
    locale/@AB_CD@/calendar/calendar-occurrence-prompt.dtd (%chrome/calendar/calendar-occurrence-prompt.dtd)
    locale/@AB_CD@/calendar/calendar-occurrence-prompt.properties  (%chrome/calendar/calendar-occurrence-prompt.properties)