Bug 1769506 - Reinstate the vCard editor in Account Manager. r=aleca

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

--HG--
extra : rebase_source : b4abea542a4dc3eeb02a44ffda3bbca74e0aa1a0

mail/components/addrbook/content/vcard-edit/edit.js

@@ -42,11 +42,15 @@ class VCardEdit extends HTMLElement {
 
   set vCardString(value) {
     if (value) {
+      try {
         this.vCardProperties = VCardProperties.fromVCard(value);
-    } else {
-      this.vCardProperties = new VCardProperties();
+        return;
+      } catch (ex) {
+        Cu.reportError(ex);
       }
     }
+    this.vCardProperties = new VCardProperties();
+  }
 
   get vCardProperties() {
     return this._vCardProperties;

mail/themes/shared/mail/aboutAddressBook.css

@@ -521,6 +521,7 @@ body:not(.is-editing) #detailsPane :is(.edit, .noValue) {
 #detailsFooter,
 vcard-edit {
   padding-inline: 20px;
+  /* Two <vcard-edit> columns. */
   max-width: 54em;
 }
 

mail/themes/shared/mail/accountManager.css

@@ -271,3 +271,8 @@ body {
   position: absolute;
   inset: 0;
 }
+
+#editVCardDialog {
+  /* Two <vcard-edit> columns. */
+  width: 54em;
+}

mail/themes/shared/mail/vcard-edit.css

@@ -4,7 +4,9 @@
 
 :host {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(26.5em, 1fr));
+  grid-template-rows: masonry;
+  gap: 1em;
   margin-block: 15px;
 }
 
@@ -12,7 +14,6 @@ fieldset {
   margin: 0;
   padding: 0;
   border: none;
-  margin-block-end: 21px;
 }
 
 legend {
@@ -34,8 +35,7 @@ th[hidden] {
 }
 
 #addr-book-edit-n {
-  grid-column: 1 / 3;
-  grid-row: 1 / 2;
+  grid-column: 1 / -1;
 }
 
 .addr-book-edit-fieldset-button:not([hidden]) {

mailnews/base/prefs/content/AccountManager.xhtml

@@ -150,15 +150,18 @@
   </vbox>
 
   <dialog xmlns="http://www.w3.org/1999/xhtml" id="editVCardDialog">
-    <!-- TODO add vCard editing UI -->
+    <form autocomplete="off">
+#include ../../../../mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml
+      <vcard-edit class="edit"/>
       <menu class="dialog-menu-container">
-      <button class="cancel"
+        <button type="reset" class="cancel"
                 data-l10n-id="edit-vcard-dialog-cancel-button"
                 data-l10n-attrs="accesskey"></button>
-      <button class="accept primary"
+        <button type="submit" class="accept primary"
                 data-l10n-id="edit-vcard-dialog-accept-button"
                 data-l10n-attrs="accesskey"></button>
       </menu>
+    </form>
   </dialog>
 </html:body>
 </html>

mailnews/base/prefs/content/am-identity-edit.js

@@ -73,7 +73,7 @@ function initIdentityValues(identity) {
     document.getElementById("identity.attachVCard").checked =
       identity.attachVCard;
     document.getElementById("identity.escapedVCard").value =
-      identity.escapedVCard;
+      identity.escapedVCard || "";
 
     document.getElementById("identity.catchAll").checked = identity.catchAll;
     document.getElementById("identity.catchAllHint").value =
@@ -464,32 +464,59 @@ function setupSignatureItems() {
 function editVCard() {
   // Read vCard hidden value from UI.
   let escapedVCard = document.getElementById("identity.escapedVCard");
-
   let dialog = top.document.getElementById("editVCardDialog");
-  // TODO connect vCard editing UI
-  // dialog.querySelector("vcard-edit").vCardString = decodeURIComponent(
-  //   escapedVCard.value
-  // );
+  let form = dialog.querySelector("form");
+  let vCardEdit = dialog.querySelector("vcard-edit");
 
-  dialog.querySelector(".accept").addEventListener("click", () => {
-    // escapedVCard.value = encodeURIComponent(
-    //   dialog.querySelector("vcard-edit").vCardString
-    // );
+  vCardEdit.vCardString = decodeURIComponent(escapedVCard.value);
+
+  top.addEventListener("keydown", editVCardKeyDown, { capture: true });
+  form.addEventListener("submit", editVCardSubmit);
+  form.addEventListener("reset", editVCardReset);
+
+  top.gSubDialog._topDialog?._overlay.removeAttribute("topmost");
+  dialog.showModal();
+}
+
+function editVCardKeyDown(event) {
+  let dialog = top.document.getElementById("editVCardDialog");
+  if (event.keyCode == KeyboardEvent.DOM_VK_ESCAPE && dialog.open) {
+    // This is a bit of a hack to prevent other dialogs (particularly
+    // SubDialogs) from closing when the vCard dialog is open.
+    event.preventDefault();
+    editVCardReset();
+  }
+}
+
+function editVCardSubmit(event) {
+  let escapedVCard = document.getElementById("identity.escapedVCard");
+  let dialog = top.document.getElementById("editVCardDialog");
+  let form = dialog.querySelector("form");
+  let vCardEdit = dialog.querySelector("vcard-edit");
+
+  vCardEdit.saveVCard();
+  escapedVCard.value = encodeURIComponent(vCardEdit.vCardString);
   // Trigger a change event so for the am-main view the event listener
   // set up in AccountManager.js onLoad() can make sure to save the change.
   escapedVCard.dispatchEvent(new CustomEvent("change"));
 
   top.gSubDialog._topDialog?._overlay.setAttribute("topmost", "true");
   dialog.close();
-  });
 
-  dialog.querySelector(".cancel").addEventListener("click", () => {
+  event.preventDefault();
+  form.removeEventListener("submit", editVCardSubmit);
+  form.removeEventListener("reset", editVCardReset);
+}
+
+function editVCardReset() {
+  let dialog = top.document.getElementById("editVCardDialog");
+  let form = dialog.querySelector("form");
+
   top.gSubDialog._topDialog?._overlay.setAttribute("topmost", "true");
   dialog.close();
-  });
 
-  top.gSubDialog._topDialog?._overlay.removeAttribute("topmost");
-  dialog.showModal();
+  form.removeEventListener("submit", editVCardSubmit);
+  form.removeEventListener("reset", editVCardReset);
 }
 
 function getAccountForFolderPickerState() {

mailnews/jar.mn

@@ -18,7 +18,7 @@ messenger.jar:
     content/messenger/addressbook/abMailListDialog.js                          (addrbook/content/abMailListDialog.js)
     content/messenger/addressbook/abView.js                                    (addrbook/content/abView.js)
     content/messenger/addressbook/map-list.js                                  (addrbook/content/map-list.js)
-    content/messenger/AccountManager.xhtml                                     (base/prefs/content/AccountManager.xhtml)
+*   content/messenger/AccountManager.xhtml                                     (base/prefs/content/AccountManager.xhtml)
     content/messenger/AccountManager.js                                        (base/prefs/content/AccountManager.js)
     content/messenger/am-main.xhtml                                            (base/prefs/content/am-main.xhtml)
     content/messenger/am-main.js                                               (base/prefs/content/am-main.js)