From 4ece5f584544e3459c8e845d39a961331e8ec7a6 Mon Sep 17 00:00:00 2001 From: Geoff Lankow Date: Mon, 16 May 2022 20:18:15 +1200 Subject: [PATCH] Bug 1769506 - Reinstate the vCard editor in Account Manager. r=aleca Differential Revision: https://phabricator.services.mozilla.com/D146416 --HG-- extra : rebase_source : b4abea542a4dc3eeb02a44ffda3bbca74e0aa1a0 --- .../addrbook/content/vcard-edit/edit.js | 10 ++- mail/themes/shared/mail/aboutAddressBook.css | 1 + mail/themes/shared/mail/accountManager.css | 5 ++ mail/themes/shared/mail/vcard-edit.css | 8 +-- .../base/prefs/content/AccountManager.xhtml | 21 +++--- .../base/prefs/content/am-identity-edit.js | 69 +++++++++++++------ mailnews/jar.mn | 2 +- 7 files changed, 78 insertions(+), 38 deletions(-) diff --git a/mail/components/addrbook/content/vcard-edit/edit.js b/mail/components/addrbook/content/vcard-edit/edit.js index 209091acd7..a280abcfd0 100644 --- a/mail/components/addrbook/content/vcard-edit/edit.js +++ b/mail/components/addrbook/content/vcard-edit/edit.js @@ -42,10 +42,14 @@ class VCardEdit extends HTMLElement { set vCardString(value) { if (value) { - this.vCardProperties = VCardProperties.fromVCard(value); - } else { - this.vCardProperties = new VCardProperties(); + try { + this.vCardProperties = VCardProperties.fromVCard(value); + return; + } catch (ex) { + Cu.reportError(ex); + } } + this.vCardProperties = new VCardProperties(); } get vCardProperties() { diff --git a/mail/themes/shared/mail/aboutAddressBook.css b/mail/themes/shared/mail/aboutAddressBook.css index b0a406a260..d4d1e1f493 100644 --- a/mail/themes/shared/mail/aboutAddressBook.css +++ b/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 columns. */ max-width: 54em; } diff --git a/mail/themes/shared/mail/accountManager.css b/mail/themes/shared/mail/accountManager.css index 5c65b6a3c1..0160d3e0ac 100644 --- a/mail/themes/shared/mail/accountManager.css +++ b/mail/themes/shared/mail/accountManager.css @@ -271,3 +271,8 @@ body { position: absolute; inset: 0; } + +#editVCardDialog { + /* Two columns. */ + width: 54em; +} diff --git a/mail/themes/shared/mail/vcard-edit.css b/mail/themes/shared/mail/vcard-edit.css index d622bab82c..d591ecd25e 100644 --- a/mail/themes/shared/mail/vcard-edit.css +++ b/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]) { diff --git a/mailnews/base/prefs/content/AccountManager.xhtml b/mailnews/base/prefs/content/AccountManager.xhtml index a4dfbd9101..0b51981d26 100644 --- a/mailnews/base/prefs/content/AccountManager.xhtml +++ b/mailnews/base/prefs/content/AccountManager.xhtml @@ -150,15 +150,18 @@ - - - - - +
+#include ../../../../mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml + + + + + +
diff --git a/mailnews/base/prefs/content/am-identity-edit.js b/mailnews/base/prefs/content/am-identity-edit.js index 3232a6edb3..fbe7aca137 100644 --- a/mailnews/base/prefs/content/am-identity-edit.js +++ b/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,34 +464,61 @@ 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 - // ); - // 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")); + vCardEdit.vCardString = decodeURIComponent(escapedVCard.value); - top.gSubDialog._topDialog?._overlay.setAttribute("topmost", "true"); - dialog.close(); - }); - - dialog.querySelector(".cancel").addEventListener("click", () => { - top.gSubDialog._topDialog?._overlay.setAttribute("topmost", "true"); - dialog.close(); - }); + 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(); + + 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(); + + form.removeEventListener("submit", editVCardSubmit); + form.removeEventListener("reset", editVCardReset); +} + function getAccountForFolderPickerState() { return gAccount; } diff --git a/mailnews/jar.mn b/mailnews/jar.mn index 94fdb113ac..54bd8e0f72 100644 --- a/mailnews/jar.mn +++ b/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)