Bug 1762126 - Time zone field for the contact edit. r=aleca

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

--HG--
extra : rebase_source : deac74d9198865230ec9e009e0674bfffae8072e

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

@@ -3,7 +3,7 @@
  * file, you can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* globals VCardEmailComponent, VCardNComponent, VCardTelComponent,
-           VCardURLComponent */
+           VCardTZComponent, VCardURLComponent */
 
 ChromeUtils.defineModuleGetter(
   this,
@@ -26,6 +26,7 @@ class VCardEdit extends HTMLElement {
       this.registerEmailFieldsetHandling();
       this.registerURLFieldsetHandling();
       this.registerTelFieldsetHandling();
+      this.registerTZFieldsetHandling();
       this.updateView();
     }
   }
@@ -85,6 +86,10 @@ class VCardEdit extends HTMLElement {
       });
     }
     this.replaceChildren(...vCardPropertyEls);
+
+    this.shadowRoot.getElementById("vcard-add-tz").hidden = this.querySelector(
+      "vcard-tz"
+    );
   }
 
   /**
@@ -120,6 +125,11 @@ class VCardEdit extends HTMLElement {
         tel.vCardPropertyEntry = entry;
         tel.slot = "v-tel";
         return tel;
+      case "tz":
+        let tz = new VCardTZComponent();
+        tz.vCardPropertyEntry = entry;
+        tz.slot = "v-tz";
+        return tz;
       default:
         return undefined;
     }
@@ -142,6 +152,8 @@ class VCardEdit extends HTMLElement {
         return VCardURLComponent.newVCardPropertyEntry();
       case "tel":
         return VCardTelComponent.newVCardPropertyEntry();
+      case "tz":
+        return VCardTZComponent.newVCardPropertyEntry();
       default:
         return undefined;
     }
@@ -233,6 +245,20 @@ class VCardEdit extends HTMLElement {
       el.querySelector("input").focus();
     });
   }
+
+  registerTZFieldsetHandling() {
+    // Add TZ button.
+    let addTZ = this.shadowRoot.getElementById("vcard-add-tz");
+    addTZ.addEventListener("click", e => {
+      let newVCardProperty = VCardEdit.createVCardProperty("tz");
+      let el = VCardEdit.createVCardElement(newVCardProperty);
+      // Add the new entry to our vCardProperties object.
+      this.vCardProperties.addEntry(el.vCardPropertyEntry);
+      this.append(el);
+      addTZ.hidden = true;
+      el.querySelector("select").focus();
+    });
+  }
 }
 
 customElements.define("vcard-edit", VCardEdit);

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

@@ -0,0 +1,75 @@
+/* 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/. */
+
+/* globals VCardPropertyEntryView, vCardIdGen */
+
+ChromeUtils.defineModuleGetter(
+  this,
+  "cal",
+  "resource:///modules/calendar/calUtils.jsm"
+);
+ChromeUtils.defineModuleGetter(
+  this,
+  "VCardPropertyEntry",
+  "resource:///modules/VCardUtils.jsm"
+);
+
+/**
+ * @implements {VCardPropertyEntryView}
+ * @see RFC6350 URL
+ */
+class VCardTZComponent extends HTMLElement {
+  /** @type {VCardPropertyEntry} */
+  vCardPropertyEntry;
+
+  /** @type {HTMLSelectElement} */
+  selectEl;
+
+  static newVCardPropertyEntry() {
+    return new VCardPropertyEntry("tz", {}, "text", "");
+  }
+
+  constructor() {
+    super();
+    let template = document.getElementById("template-vcard-edit-tz");
+    let clonedTemplate = template.content.cloneNode(true);
+    this.appendChild(clonedTemplate);
+  }
+
+  connectedCallback() {
+    if (this.isConnected) {
+      this.selectEl = this.querySelector("select");
+      for (let tzid of cal.timezoneService.timezoneIds) {
+        let option = this.selectEl.appendChild(
+          document.createElement("option")
+        );
+        option.value = tzid;
+        option.textContent = cal.timezoneService.getTimezone(tzid).displayName;
+      }
+
+      this.fromVCardPropertyEntryToUI();
+    }
+  }
+
+  disconnectedCallback() {
+    if (!this.isConnected) {
+      this.selectEl = null;
+      this.vCardPropertyEntry = null;
+    }
+  }
+
+  fromVCardPropertyEntryToUI() {
+    this.selectEl.value = this.vCardPropertyEntry.value;
+  }
+
+  fromUIToVCardPropertyEntry() {
+    this.vCardPropertyEntry.value = this.selectEl.value;
+  }
+
+  valueIsEmpty() {
+    return this.vCardPropertyEntry.value === "";
+  }
+}
+
+customElements.define("vcard-tz", VCardTZComponent);

mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml

@@ -9,6 +9,7 @@
 <script src="chrome://messenger/content/addressbook/edit/n.js"></script>
 <script src="chrome://messenger/content/addressbook/edit/email.js"></script>
 <script src="chrome://messenger/content/addressbook/edit/tel.js"></script>
+<script src="chrome://messenger/content/addressbook/edit/tz.js"></script>
 <script src="chrome://messenger/content/addressbook/edit/url.js"></script>
 <script src="chrome://messenger/content/addressbook/edit/edit.js"></script>
 
@@ -85,6 +86,18 @@
       <span data-l10n-id="vcard-tel-add"/>
     </button>
   </fieldset>
+  <!-- Time Zone -->
+  <fieldset id="addr-book-edit-tz" class="addr-book-edit-fieldset">
+    <legend data-l10n-id="vcard-tz-header"/>
+    <slot name="v-tz"/>
+    <button id="vcard-add-tz" class="addr-book-edit-fieldset-button"
+            type="button">
+      <img class="addr-book-edit-fieldset-button-icon"
+           src="chrome://global/skin/icons/add.svg"
+           alt=""/>
+      <span data-l10n-id="vcard-tz-add"/>
+    </button>
+  </fieldset>
 </template>
 
 <!-- Individual fields -->
@@ -168,3 +181,10 @@
   <label class="screen-readers-only" for="text"/>
   <input type="text"/>
 </template>
+
+<!-- Time Zone -->
+<template id="template-vcard-edit-tz">
+  <select>
+    <option value=""></option>
+  </select>
+</template>

mail/components/addrbook/jar.mn

@@ -22,4 +22,5 @@ messenger.jar:
     content/messenger/addressbook/edit/email.js                 (content/vcard-edit/email.js)
     content/messenger/addressbook/edit/n.js                     (content/vcard-edit/n.js)
     content/messenger/addressbook/edit/tel.js                   (content/vcard-edit/tel.js)
+    content/messenger/addressbook/edit/tz.js                    (content/vcard-edit/tz.js)
     content/messenger/addressbook/edit/url.js                   (content/vcard-edit/url.js)

mail/locales/en-US/messenger/addressbook/vcard.ftl

@@ -69,3 +69,9 @@ vcard-tel-header = Phone Numbers
 vcard-tel-add = Add phone number
 
 vcard-tel-label = Phone number
+
+# TZ vCard field
+
+vcard-tz-header = Time Zone
+
+vcard-tz-add = Add time zone

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

@@ -38,7 +38,7 @@ th[hidden] {
   grid-row: 1 / 2;
 }
 
-.addr-book-edit-fieldset-button {
+.addr-book-edit-fieldset-button:not([hidden]) {
   background-color: transparent;
   -moz-context-properties: fill;
   color: var(--in-content-primary-button-background);

mail/themes/shared/mail/vcard.css

@@ -13,7 +13,8 @@ vcard-edit input[type="text"],
 vcard-edit input[type="email"],
 vcard-edit input[type="url"],
 vcard-edit input[type="tel"],
-vcard-edit .vcard-type-selection {
+vcard-edit .vcard-type-selection,
+vcard-tz select:not([size], [multiple]) {
   line-height: 1;
   padding-inline: 9px;
   margin: 0;
@@ -29,6 +30,10 @@ vcard-edit select {
   width: 86px;
 }
 
+vcard-tz select {
+  width: unset;
+}
+
 /* N field styles */
 vcard-n {
   display: flex;