Bug 1722005 - Replace attendee icon "role" attribute name with "attendeerole". r=darktrojan

Differential Revision: https://phabricator.services.mozilla.com/D120713

calendar/base/content/dialogs/calendar-event-dialog-attendees.js

@@ -544,7 +544,7 @@ function setLeftAndWidth(element, startTime, endTime) {
         "src",
         "chrome://calendar/skin/shared/calendar-event-dialog-attendees.png"
       );
-      this.roleIcon.setAttribute("role", "REQ-PARTICIPANT");
+      this.roleIcon.setAttribute("attendeerole", "REQ-PARTICIPANT");
       this._updateTooltip(this.roleIcon);
       this.roleIcon.addEventListener("click", this);
 
@@ -586,7 +586,7 @@ function setLeftAndWidth(element, startTime, endTime) {
         attendee.commonName = address.name;
       }
       attendee.isOrganizer = this.isOrganizer;
-      attendee.role = this.roleIcon.getAttribute("role");
+      attendee.role = this.roleIcon.getAttribute("attendeerole");
       let userType = this.userTypeIcon.getAttribute("usertype");
       attendee.userType = userType == "INDIVIDUAL" ? null : userType; // INDIVIDUAL is the default
 
@@ -602,7 +602,7 @@ function setLeftAndWidth(element, startTime, endTime) {
         this.value = value.id.replace(/^mailto:/, "");
       }
       this.isOrganizer = value.isOrganizer;
-      this.roleIcon.setAttribute("role", value.role);
+      this.roleIcon.setAttribute("attendeerole", value.role);
       this._updateTooltip(this.roleIcon);
       this.userTypeIcon.setAttribute("usertype", value.userType || "INDIVIDUAL");
       this._updateTooltip(this.userTypeIcon);
@@ -744,8 +744,8 @@ function setLeftAndWidth(element, startTime, endTime) {
 
         let target = event.target;
         if (target == this.roleIcon) {
-          let nextValue = cycle(EventAttendee.roleCycle, target.getAttribute("role"));
-          target.setAttribute("role", nextValue);
+          let nextValue = cycle(EventAttendee.roleCycle, target.getAttribute("attendeerole"));
+          target.setAttribute("attendeerole", nextValue);
           this._updateTooltip(target);
         } else if (target == this.userTypeIcon) {
           if (!this.isOrganizer) {
@@ -759,7 +759,7 @@ function setLeftAndWidth(element, startTime, endTime) {
     _updateTooltip(targetIcon) {
       let tooltip;
       if (targetIcon == this.roleIcon) {
-        let role = targetIcon.getAttribute("role");
+        let role = targetIcon.getAttribute("attendeerole");
         const roleMap = {
           "REQ-PARTICIPANT": "required",
           "OPT-PARTICIPANT": "optional",

calendar/base/content/dialogs/calendar-event-dialog-attendees.xhtml

@@ -77,7 +77,7 @@
           <tr>
             <td>
               <img class="role-icon"
-                   role="REQ-PARTICIPANT"
+                   attendeerole="REQ-PARTICIPANT"
                    src="chrome://calendar/skin/shared/calendar-event-dialog-attendees.png"
                    alt="" />
             </td>
@@ -86,7 +86,7 @@
           <tr>
             <td>
               <img class="role-icon"
-                   role="OPT-PARTICIPANT"
+                   attendeerole="OPT-PARTICIPANT"
                    src="chrome://calendar/skin/shared/calendar-event-dialog-attendees.png"
                    alt="" />
             </td>
@@ -95,7 +95,7 @@
           <tr>
             <td>
               <img class="role-icon"
-                   role="NON-PARTICIPANT"
+                   attendeerole="NON-PARTICIPANT"
                    src="chrome://calendar/skin/shared/calendar-event-dialog-attendees.png"
                    alt="" />
             </td>
@@ -104,7 +104,7 @@
           <tr>
             <td>
               <img class="role-icon"
-                   role="CHAIR"
+                   attendeerole="CHAIR"
                    src="chrome://calendar/skin/shared/calendar-event-dialog-attendees.png"
                    alt="" />
             </td>

calendar/base/modules/utils/calInvitationUtils.jsm

@@ -143,7 +143,7 @@ var calinvitation = {
     icon.classList.add("itip-icon");
     icon.setAttribute("partstat", partstat);
     icon.setAttribute("usertype", userType);
-    icon.setAttribute("role", role);
+    icon.setAttribute("attendeerole", role);
     attendeeLabel.appendChild(icon);
 
     let text = doc.createElement("div");

calendar/base/themes/common/calendar-attendees.css

@@ -101,16 +101,16 @@ html|input.textbox-addressingWidget:disabled {
 .itip-icon[usertype="UNKNOWN"] {
   --itip-icon-usertype: -96px;
 }
-.itip-icon[role="REQ-PARTICIPANT"] {
+.itip-icon[attendeerole="REQ-PARTICIPANT"] {
   --itip-icon-role: 0px;
 }
-.itip-icon[role="OPT-PARTICIPANT"] {
+.itip-icon[attendeerole="OPT-PARTICIPANT"] {
   --itip-icon-role: -16px;
 }
-.itip-icon[role="NON-PARTICIPANT"] {
+.itip-icon[attendeerole="NON-PARTICIPANT"] {
   --itip-icon-role: -32px;
 }
-.itip-icon[role="CHAIR"] {
+.itip-icon[attendeerole="CHAIR"] {
   --itip-icon-role: -32px;
   --itip-icon-usertype: -16px;
 }
@@ -140,31 +140,31 @@ html|span.ac-emphasize-text {
   object-position: top 0 left -138px;
 }
 
-.role-icon[role="REQ-PARTICIPANT"] {
+.role-icon[attendeerole="REQ-PARTICIPANT"] {
   object-position: top 0 left -138px;
 }
-.role-icon[role="REQ-PARTICIPANT"][disabled="true"] {
+.role-icon[attendeerole="REQ-PARTICIPANT"][disabled="true"] {
   object-position: top 0 left -138px;
 }
 
-.role-icon[role="OPT-PARTICIPANT"] {
+.role-icon[attendeerole="OPT-PARTICIPANT"] {
   object-position: top 0 left -159px;
 }
-.role-icon[role="OPT-PARTICIPANT"][disabled="true"] {
+.role-icon[attendeerole="OPT-PARTICIPANT"][disabled="true"] {
   object-position: top 0 left -159px;
 }
 
-.role-icon[role="CHAIR"] {
+.role-icon[attendeerole="CHAIR"] {
   object-position: top 0 left -180px;
 }
-.role-icon[role="CHAIR"][disabled="true"] {
+.role-icon[attendeerole="CHAIR"][disabled="true"] {
   object-position: top 0 left -180px;
 }
 
-.role-icon[role="NON-PARTICIPANT"] {
+.role-icon[attendeerole="NON-PARTICIPANT"] {
   object-position: top 0 left -201px;
 }
-.role-icon[role="NON-PARTICIPANT"][disabled="true"] {
+.role-icon[attendeerole="NON-PARTICIPANT"][disabled="true"] {
   object-position: top 0 left -201px;
 }
 

calendar/test/unit/test_invitationutils.js

@@ -553,7 +553,7 @@ add_task(async function createInvitationOverlay_test() {
               "Attendee 1 <attendee1@example.net> is an optional " +
               "participant. Attendee 1 still needs to reply.",
             icon: {
-              role: "OPT-PARTICIPANT",
+              attendeerole: "OPT-PARTICIPANT",
               usertype: "INDIVIDUAL",
               partstat: "NEEDS-ACTION",
             },
@@ -564,7 +564,7 @@ add_task(async function createInvitationOverlay_test() {
               "attendee2@example.net (group) is a non-participant. " +
               "attendee2@example.net has confirmed attendance.",
             icon: {
-              role: "NON-PARTICIPANT",
+              attendeerole: "NON-PARTICIPANT",
               usertype: "GROUP",
               partstat: "ACCEPTED",
             },
@@ -576,7 +576,7 @@ add_task(async function createInvitationOverlay_test() {
               "participant. attendee3@example.net has confirmed attendance " +
               "tentatively.",
             icon: {
-              role: "REQ-PARTICIPANT",
+              attendeerole: "REQ-PARTICIPANT",
               usertype: "RESOURCE",
               partstat: "TENTATIVE",
             },
@@ -587,7 +587,7 @@ add_task(async function createInvitationOverlay_test() {
               "attendee4@example.net (room) is an optional participant. " +
               "attendee4@example.net has declined attendance.",
             icon: {
-              role: "OPT-PARTICIPANT",
+              attendeerole: "OPT-PARTICIPANT",
               usertype: "ROOM",
               partstat: "DECLINED",
             },
@@ -599,7 +599,7 @@ add_task(async function createInvitationOverlay_test() {
               "attendee5@example.net has delegated attendance to " +
               "attendee4@example.net.",
             icon: {
-              role: "OPT-PARTICIPANT",
+              attendeerole: "OPT-PARTICIPANT",
               usertype: "UNKNOWN",
               partstat: "DELEGATED",
             },
@@ -610,7 +610,7 @@ add_task(async function createInvitationOverlay_test() {
               "attendee6@example.net is a required participant. " +
               "attendee6@example.net still needs to reply.",
             icon: {
-              role: "REQ-PARTICIPANT",
+              attendeerole: "REQ-PARTICIPANT",
               usertype: "INDIVIDUAL",
               partstat: "NEEDS-ACTION",
             },
@@ -621,7 +621,7 @@ add_task(async function createInvitationOverlay_test() {
               "attendee7@example.net is a required participant. " +
               "attendee7@example.net still needs to reply.",
             icon: {
-              role: "REQ-PARTICIPANT",
+              attendeerole: "REQ-PARTICIPANT",
               usertype: "INDIVIDUAL",
               partstat: "NEEDS-ACTION",
             },
@@ -635,7 +635,7 @@ add_task(async function createInvitationOverlay_test() {
         organizer: {
           params: {
             partstat: "ACCEPTED",
-            role: "CHAIR",
+            attendeerole: "CHAIR",
             cutype: "INDIVIDUAL",
             cn: '"The Organizer"',
           },
@@ -650,7 +650,7 @@ add_task(async function createInvitationOverlay_test() {
             "The Organizer <organizer@example.net> chairs the event. " +
             "The Organizer has confirmed attendance.",
           icon: {
-            role: "CHAIR",
+            attendeerole: "CHAIR",
             usertype: "INDIVIDUAL",
             partstat: "ACCEPTED",
           },