Display correct tooltips and different button image for read-only con…

…tacts in the contact pop-up

addon/_locales/en/messages.json

@@ -264,6 +264,11 @@
     "description": "Tooltip shown on the edit contact button"
   },
 
+  "contact.viewContactTooltip": {
+    "message": "View contact in address book",
+    "description": "Tooltip shown on the view contact button for read-only contacts"
+  },
+
   "contact.sendEmailTooltip": {
     "message": "send email",
     "description": "Tooltip shown on the send email button"

addon/background/contactManager.js

@@ -28,18 +28,21 @@ if (!globalThis.browser) {
  *   the contact.
  * @property {string} photoURI
  *   A uri to use for the avator photo for the contact (if any).
+ * @property {boolean} readOnly
+ *   True if the card is read-only.
  */
 
 /**
  * Extended Contact information that is cached.
  */
 class ExtendedContact {
-  constructor({ contactId, email, identityId, name, photoURI }) {
+  constructor({ contactId, email, identityId, name, photoURI, readOnly }) {
     this.color = freshColor(email);
     this.contactId = contactId;
     this.identityId = identityId;
     this.name = name;
     this.photoURI = photoURI;
+    this.readOnly = readOnly;
     /**
      * The time when the contact was last accessed in the cache, used for
      * clearing out the cache.
@@ -75,6 +78,7 @@ class ExtendedContact {
       identityId: this.identityId,
       name: this.name,
       photoURI: this.photoURI,
+      readOnly: this.readOnly,
     };
   }
 }
@@ -183,11 +187,13 @@ export class ContactManager {
     let name = undefined;
     let photoURI = undefined;
     let emailAddressForColor = email;
+    let readOnly = false;
 
     if (matchingCards.length) {
       // We only look at the first contact.
       let card = matchingCards[0].properties;
       contactId = matchingCards[0].id;
+      readOnly = !!matchingCards[0].readOnly;
 
       // PreferDisplayName returns a literal string "0" or "1". We must convert it
       // to a boolean appropriately.
@@ -229,6 +235,7 @@ export class ContactManager {
         identityId,
         name,
         photoURI,
+        readOnly,
       }),
     ];
   }

addon/content/components/contactDetail.jsx

@@ -15,6 +15,7 @@ function _ContactDetail({
   realEmail,
   avatar,
   contactId,
+  contactIsReadOnly,
   dispatch,
 }) {
   function onGeneralClick(event) {
@@ -79,23 +80,36 @@ function _ContactDetail({
 
   // If there is a card for the contact, provide the option to
   // edit the card. Otherwise, provide an add button.
-  const contactEdit = contactId ? (
-    <button
-      className="editContact"
-      title={browser.i18n.getMessage("contact.editContactTooltip")}
-      onClick={editContact}
-    >
-      <SvgIcon hash="edit" />
-    </button>
-  ) : (
-    <button
-      className="addContact"
-      title={browser.i18n.getMessage("contact.addContactTooltip")}
-      onClick={addContact}
-    >
-      <SvgIcon hash="add" />
-    </button>
-  );
+  let contactEdit;
+  if (contactId) {
+    contactEdit = contactIsReadOnly ? (
+      <button
+        className="viewContact"
+        title={browser.i18n.getMessage("contact.viewContactTooltip")}
+        onClick={editContact}
+      >
+        <SvgIcon hash="person" />
+      </button>
+    ) : (
+      <button
+        className="editContact"
+        title={browser.i18n.getMessage("contact.editContactTooltip")}
+        onClick={editContact}
+      >
+        <SvgIcon hash="edit" />
+      </button>
+    );
+  } else {
+    contactEdit = (
+      <button
+        className="addContact"
+        title={browser.i18n.getMessage("contact.addContactTooltip")}
+        onClick={addContact}
+      >
+        <SvgIcon hash="add" />
+      </button>
+    );
+  }
 
   let avatarURI =
     avatar ?? "chrome://messenger/skin/addressbook/icons/contact-generic.svg";
@@ -156,6 +170,7 @@ _ContactDetail.propTypes = {
   realEmail: PropTypes.string.isRequired,
   avatar: PropTypes.string,
   contactId: PropTypes.string,
+  contactIsReadOnly: PropTypes.boolean,
 };
 
 export const ContactDetail = ReactRedux.connect()(_ContactDetail);

addon/content/components/message/messageHeader.jsx

@@ -147,6 +147,7 @@ export function DetailedContactLabel({ contact, className }) {
           realEmail={contact.email}
           avatar={contact.avatar}
           contactId={contact.contactId}
+          contactIsReadOnly={contact.readOnly}
         />
       }
       style={{ display: "inline-block" }}
@@ -184,6 +185,7 @@ export function ContactLabel({ contact, className }) {
           realEmail={contact.email}
           avatar={contact.avatar}
           contactId={contact.contactId}
+          contactIsReadOnly={contact.readOnly}
         />
       }
     >

addon/content/es-modules/thunderbird-compat.js

@@ -400,6 +400,7 @@ if (!browser.contacts) {
               PreferDisplayName: "0",
               PhotoURI: "https://example.com/fake",
             },
+            readOnly: true,
           },
         ];
       } else if (["arch@example.com", "cond@example.com"].includes(email)) {

addon/content/reducer/contacts.js

@@ -45,6 +45,7 @@ async function enrichWithDisplayData({
     avatar: contact.photoURI,
     contactId: contact.contactId,
     colorStyle: { backgroundColor: contact.color },
+    readOnly: contact.readOnly,
   };
   return data;
 }

addon/tests/contactManager.test.jsx

@@ -96,6 +96,7 @@ describe("Test ContactManager", () => {
       identityId: undefined,
       name: undefined,
       photoURI: "https://example.com/fake",
+      readOnly: true,
     });
     expect(isValidColor(extra.color)).toBe(true);
   });

scripts/get-material-icons.sh

@@ -8,7 +8,7 @@ fi
 
 echo '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">'
 echo '    <!-- Material icons are published under Apache License Version 2.0. https://material.io/icons/ -->'
-for icon in "archive" "attachment" "calendar_today" "code" "content_copy" "delete" "edit" "vpn_key" "expand_less" "expand_more" "forward" "file_download" "inbox" "whatshot" "list" "more_vert" "open_in_new" "print" "reply_all" "reply" "star" "visibility" "visibility_off" "warning" "info" "add" "mail" "history" "photo_library" "search" "account" "account_circle" "save"; do
+for icon in "archive" "attachment" "calendar_today" "code" "content_copy" "delete" "edit" "vpn_key" "expand_less" "expand_more" "forward" "file_download" "inbox" "whatshot" "list" "more_vert" "open_in_new" "person" "print" "reply_all" "reply" "star" "visibility" "visibility_off" "warning" "info" "add" "mail" "history" "photo_library" "search" "account" "account_circle" "save"; do
     wget -q "https://fonts.gstatic.com/s/i/materialicons/${icon}/v1/24px.svg?download=true" -O - \
         | $HEAD -n 1 \
         | sed "s/<path d=\"[a-zA-Z0-9 ]*\" fill=\"none\"\/>//g" \