Bug 1637133 - Refactor to remove 'calendar-item-date-input' custom element. r=darktrojan
authorPaul Morris <paul@thunderbird.net>
Wed, 20 May 2020 14:13:41 +0000
changeset 38308 3c657c39ada593b905bc11f53b4a6755018aab02
parent 38307 3c15dd901e5bc00ee73ef56cc411987190a16558
child 38309 120372d6f96bba97e59b455d7872a34900596fbd
push id2607
push userclokep@gmail.com
push dateMon, 01 Jun 2020 20:50:20 +0000
treeherdercomm-beta@9d45cd34927b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdarktrojan
bugs1637133
Bug 1637133 - Refactor to remove 'calendar-item-date-input' custom element. r=darktrojan Simpler to replace this custom element with a utility function that converts a calIDateTime into a string to display, which was the primary functionality of the custom element. Differential Revision: https://phabricator.services.mozilla.com/D74794
calendar/base/content/calendar-item-bindings.js
calendar/base/content/calendar-task-view.js
calendar/base/content/dialogs/calendar-summary-dialog.js
calendar/base/content/dialogs/calendar-summary-dialog.xhtml
calendar/base/jar.mn
calendar/base/modules/utils/calDateTimeUtils.jsm
calendar/base/themes/common/calendar-task-view.css
calendar/lightning/content/calendar-tab-panels.inc.xhtml
mail/base/content/messenger.xhtml
deleted file mode 100644
--- a/calendar/base/content/calendar-item-bindings.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-// Wrap in a block to prevent leaking to window scope.
-{
-  const { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm");
-
-  /**
-   * Date info that is displayed on task details and event details.
-   *
-   * @extends HTMLInputElement
-   */
-  class MozCalendarItemDate extends HTMLInputElement {
-    connectedCallback() {
-      this.mItem = null;
-    }
-
-    /**
-     * Returns the mode of the date, defaulting to "start
-     *
-     * @returns {string} mode of the date(start/end).
-     */
-    get mode() {
-      if (this.hasAttribute("mode")) {
-        return this.getAttribute("mode");
-      }
-      return "start";
-    }
-
-    /**
-     * Sets up the value of the date string which is displayed
-     * on task details and event details. It takes mode of the
-     * date in consideration and generates the date string.
-     *
-     * @param {Object} event/task item object.
-     */
-    set item(val) {
-      this.mItem = val;
-      let date;
-      if (this.mode == "start") {
-        date = this.mItem[cal.dtz.startDateProp(this.mItem)];
-      } else {
-        date = this.mItem[cal.dtz.endDateProp(this.mItem)];
-      }
-      let hideTextbox = date == null;
-      if (hideTextbox) {
-        this.style.visibility = "collapse";
-      } else {
-        const kDefaultTimezone = cal.dtz.defaultTimezone;
-        let localTime = date.getInTimezone(kDefaultTimezone);
-        this.value = cal.dtz.formatter.formatDateTime(localTime);
-        if (!date.timezone.isFloating && date.timezone.tzid != kDefaultTimezone.tzid) {
-          // we additionally display the original datetime with timezone
-          let orgTime = cal.l10n.getCalString("datetimeWithTimezone", [
-            cal.dtz.formatter.formatDateTime(date),
-            date.timezone.tzid,
-          ]);
-          this.value += " (" + orgTime + ")";
-        }
-        this.style.visibility = "visible";
-      }
-    }
-
-    /**
-     * Returns the event/task item object.
-     *
-     * @returns {Object} event/task item object.
-     */
-    get item() {
-      return this.mItem;
-    }
-  }
-
-  customElements.define("calendar-item-date-input", MozCalendarItemDate, { extends: "input" });
-}
--- a/calendar/base/content/calendar-task-view.js
+++ b/calendar/base/content/calendar-task-view.js
@@ -126,23 +126,31 @@ var taskDetailsView = {
         !document
           .getElementById("calendar-task-details-category-row")
           .toggleAttribute("hidden", categories.length == 0)
       ) {
         document.getElementById("calendar-task-details-category").textContent = categories.join(
           ", "
         );
       }
-      document.getElementById("task-start-date").item = item;
-      document.getElementById("task-due-date").item = item;
 
       let taskStartDate = item[cal.dtz.startDateProp(item)];
+      if (taskStartDate) {
+        document.getElementById("task-start-date").textContent = cal.dtz.getStringForDateTime(
+          taskStartDate
+        );
+      }
       document.getElementById("task-start-row").toggleAttribute("hidden", !taskStartDate);
 
       let taskDueDate = item[cal.dtz.endDateProp(item)];
+      if (taskDueDate) {
+        document.getElementById("task-due-date").textContent = cal.dtz.getStringForDateTime(
+          taskDueDate
+        );
+      }
       document.getElementById("task-due-row").toggleAttribute("hidden", !taskDueDate);
 
       let parentItem = item;
       if (parentItem.parentItem != parentItem) {
         // XXXdbo Didn't we want to get rid of these checks?
         parentItem = parentItem.parentItem;
       }
       let recurrenceInfo = parentItem.recurrenceInfo;
--- a/calendar/base/content/dialogs/calendar-summary-dialog.js
+++ b/calendar/base/content/dialogs/calendar-summary-dialog.js
@@ -89,38 +89,51 @@ function onLoad() {
 
       window.responseMode = "USER";
     }
   }
 
   document.getElementById("item-title").value = item.title;
 
   document.getElementById("item-calendar").value = calendar.name;
-  document.getElementById("item-date-row-start-date").item = item;
-  document.getElementById("item-date-row-end-date").item = item;
 
   let isToDoItem = cal.item.isToDo(item);
+
+  // Show start date.
+  let itemStartDate = item[cal.dtz.startDateProp(item)];
+
   let itemStartRowLabel = document.getElementById("item-start-row-label");
-  let itemStartDate = item[cal.dtz.startDateProp(item)];
+  let itemDateRowStartDate = document.getElementById("item-date-row-start-date");
+
   itemStartRowLabel.style.visibility = itemStartDate ? "visible" : "collapse";
-  let itemStartLabelValue = itemStartRowLabel.getAttribute(
-    isToDoItem ? "taskStartLabel" : "eventStartLabel"
-  );
+  itemDateRowStartDate.style.visibility = itemStartDate ? "visible" : "collapse";
+
   if (itemStartDate) {
+    let itemStartLabelValue = itemStartRowLabel.getAttribute(
+      isToDoItem ? "taskStartLabel" : "eventStartLabel"
+    );
     itemStartRowLabel.setAttribute("value", itemStartLabelValue);
+    itemDateRowStartDate.value = cal.dtz.getStringForDateTime(itemStartDate);
   }
 
+  // Show due date / end date.
+  let itemDueDate = item[cal.dtz.endDateProp(item)];
+
   let itemDueRowLabel = document.getElementById("item-due-row-label");
-  let itemDueDate = item[cal.dtz.endDateProp(item)];
+  let itemDateRowEndDate = document.getElementById("item-date-row-end-date");
+
   itemDueRowLabel.style.visibility = itemDueDate ? "visible" : "collapse";
-  let itemDueLabelValue = itemDueRowLabel.getAttribute(
-    isToDoItem ? "taskDueLabel" : "eventEndLabel"
-  );
+  itemDateRowEndDate.style.visibility = itemDueDate ? "visible" : "collapse";
+
   if (itemDueDate) {
+    let itemDueLabelValue = itemDueRowLabel.getAttribute(
+      isToDoItem ? "taskDueLabel" : "eventEndLabel"
+    );
     itemDueRowLabel.setAttribute("value", itemDueLabelValue);
+    itemDateRowEndDate.value = cal.dtz.getStringForDateTime(itemDueDate);
   }
   // show reminder if this item is *not* readonly.
   // this case happens for example if this is an invitation.
   let argCalendar = window.arguments[0].calendarEvent.calendar;
   let supportsReminders =
     argCalendar.getProperty("capabilities.alarms.oninvitations.supported") !== false;
   if (!window.readOnly && supportsReminders) {
     document.getElementById("reminder-row").removeAttribute("hidden");
--- a/calendar/base/content/dialogs/calendar-summary-dialog.xhtml
+++ b/calendar/base/content/dialogs/calendar-summary-dialog.xhtml
@@ -40,17 +40,16 @@
   <!-- Javascript includes -->
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://calendar/content/calendar-summary-dialog.js"/>
   <script src="chrome://calendar/content/calendar-dialog-utils.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
   <script src="chrome://calendar/content/calendar-item-editing.js"/>
   <script src="chrome://calendar/content/calApplicationUtils.js"/>
-  <script src="chrome://calendar/content/calendar-item-bindings.js"/>
 
   <toolbox id="summary-toolbox"
            class="mail-toolbox"
            mode="full"
            defaultmode="full"
            iconsize="small"
            defaulticonsize="small"
            labelalign="end"
@@ -151,38 +150,34 @@
                         class="selectable-label plain input-inline"
                         readonly="readonly"/>
           </html:td>
         </html:tr>
         <html:tr class="item-date-row">
           <html:th>
             <label id="item-start-row-label"
                    taskStartLabel="&read.only.task.start.label;"
-                   eventStartLabel="&read.only.event.start.label;"
-                   control="item-date-row-start-date"/>
+                   eventStartLabel="&read.only.event.start.label;"/>
           </html:th>
           <html:td>
-            <html:input is="calendar-item-date-input" id="item-date-row-start-date"
+            <html:input id="item-date-row-start-date"
                         class="selectable-label plain input-inline"
-                        readonly="readonly"
-                        mode="start"/>
+                        readonly="readonly"/>
           </html:td>
         </html:tr>
         <html:tr class="item-date-row">
           <html:th>
             <label id="item-due-row-label"
                    taskDueLabel="&read.only.task.due.label;"
-                   eventEndLabel="&read.only.event.end.label;"
-                   control="item-date-row-end-date"/>
+                   eventEndLabel="&read.only.event.end.label;"/>
           </html:th>
           <html:td>
-            <html:input is="calendar-item-date-input" id="item-date-row-end-date"
+            <html:input id="item-date-row-end-date"
                         class="selectable-label plain input-inline"
-                        readonly="readonly"
-                        mode="end"/>
+                        readonly="readonly"/>
           </html:td>
         </html:tr>
         <html:tr id="repeat-row" hidden="hidden">
           <html:th>
             &read.only.repeat.label;
           </html:th>
           <html:td>
             <box id="repeat-details" orient="vertical">
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -14,17 +14,16 @@ calendar.jar:
     content/calendar-command-controller.js                      (content/calendar-command-controller.js)
     content/calendar-day-label.js                               (content/calendar-day-label.js)
     content/calendar-daypicker.js                               (content/calendar-daypicker.js)
     content/calendar-dnd-listener.js                            (content/calendar-dnd-listener.js)
     content/calendar-event-column.js                            (content/calendar-event-column.js)
     content/calendar-event-gripbar.js                           (content/calendar-event-gripbar.js)
     content/calendar-extract.js                                 (content/calendar-extract.js)
     content/calendar-invitations-manager.js                     (content/calendar-invitations-manager.js)
-    content/calendar-item-bindings.js                           (content/calendar-item-bindings.js)
     content/calendar-item-editing.js                            (content/calendar-item-editing.js)
     content/calendar-management.js                              (content/calendar-management.js)
     content/calendar-menus.js                                   (content/calendar-menus.js)
     content/calendar-migration.js                               (content/calendar-migration.js)
     content/calendar-modes.js                                   (content/calendar-modes.js)
     content/calendar-month-base-view.js                         (content/calendar-month-base-view.js)
     content/calendar-month-view.js                              (content/calendar-month-view.js)
     content/calendar-multiday-base-view.js                      (content/calendar-multiday-base-view.js)
--- a/calendar/base/modules/utils/calDateTimeUtils.jsm
+++ b/calendar/base/modules/utils/calDateTimeUtils.jsm
@@ -377,15 +377,39 @@ var caldtz = {
         Services.prefs.setStringPref(
           "calendar.timezone.recent",
           JSON.stringify(recentTimezones.map(zone => zone.tzid))
         );
       }
     }
     return recentTimezones;
   },
+
+  /**
+   * Returns a string representation of a given datetime. For example, to show
+   * in the calendar item summary dialog.
+   *
+   * @param {calIDateTime} dateTime - Datetime to convert.
+   * @return {string} A string representation of the datetime.
+   */
+  getStringForDateTime(dateTime) {
+    const kDefaultTimezone = cal.dtz.defaultTimezone;
+    let localTime = dateTime.getInTimezone(kDefaultTimezone);
+    let formatter = cal.dtz.formatter;
+    let formattedLocalTime = formatter.formatDateTime(localTime);
+
+    if (!dateTime.timezone.isFloating && dateTime.timezone.tzid != kDefaultTimezone.tzid) {
+      // Additionally display the original datetime with timezone.
+      let originalTime = cal.l10n.getCalString("datetimeWithTimezone", [
+        formatter.formatDateTime(dateTime),
+        dateTime.timezone.tzid,
+      ]);
+      return `${formattedLocalTime} (${originalTime})`;
+    }
+    return formattedLocalTime;
+  },
 };
 
 ChromeUtils.defineModuleGetter(
   caldtz,
   "formatter",
   "resource:///modules/calendar/utils/calDateTimeFormatter.jsm"
 );
--- a/calendar/base/themes/common/calendar-task-view.css
+++ b/calendar/base/themes/common/calendar-task-view.css
@@ -88,25 +88,16 @@
 }
 
 .task-details-name {
     text-align: right;
     color: windowtext;
     opacity: 0.5; /* lower contrast */
 }
 
-.item-date-row > td > input[is="calendar-item-date-input"] {
-    width: 100%;
-    background-color: transparent;
-    color: inherit;
-    border-style: none;
-    margin: 0;
-    padding: 0;
-}
-
 #calendar-task-details-grid > .item-date-row > .headline {
     font-weight: normal;
     color: windowtext;
     opacity: 0.5; /* lower contrast */
 }
 
 #calendar-task-details-attachment-row {
     margin-top: 3px;
@@ -118,17 +109,16 @@
 
 .task-details-value {
     text-align: left;
     color: WindowText;
 }
 
 :root[lwt-tree] .task-details-name,
 :root[lwt-tree] .task-details-value,
-:root[lwt-tree] .item-date-row > td > input[is="calendar-item-date-input"] > .selectable-label,
 :root[lwt-tree] #calendar-task-details-grid > .item-date-row > .headline {
     color: inherit;
 }
 
 #calendar-task-tree {
     min-height: 98px;
 }
 
--- a/calendar/lightning/content/calendar-tab-panels.inc.xhtml
+++ b/calendar/lightning/content/calendar-tab-panels.inc.xhtml
@@ -567,33 +567,29 @@
                     </html:th>
                     <html:td id="calendar-task-details-category"
                              class="task-details-value">
                     </html:td>
                   </html:tr>
                   <html:tr id="task-start-row"
                            class="item-date-row"
                            hidden="hidden">
-                    <html:th class="headline"
-                             control="task-start-date">
+                    <html:th class="headline">
                       &calendar.task-details.start.label;
                     </html:th>
-                    <html:td>
-                      <html:input is="calendar-item-date-input" id="task-start-date" mode="start"/>
+                    <html:td id="task-start-date">
                     </html:td>
                   </html:tr>
                   <html:tr id="task-due-row"
                            class="item-date-row"
                            hidden="hidden">
-                    <html:th class="headline"
-                             control="task-due-date">
+                    <html:th class="headline">
                       &calendar.task-details.due.label;
                     </html:th>
-                    <html:td>
-                      <html:input is="calendar-item-date-input" id="task-due-date" mode="end"/>
+                    <html:td id="task-due-date">
                     </html:td>
                   </html:tr>
                   <html:tr id="calendar-task-details-repeat-row"
                            hidden="hidden">
                     <html:th class="task-details-name">
                       &calendar.task-details.repeat.label;
                     </html:th>
                     <html:td id="calendar-task-details-repeat"
--- a/mail/base/content/messenger.xhtml
+++ b/mail/base/content/messenger.xhtml
@@ -236,17 +236,16 @@
 <script src="chrome://calendar/content/calendar-task-tree-utils.js"/>
 
 <!-- NEEDED FOR TASK VIEW -->
 <script src="chrome://calendar/content/calendar-task-tree-view.js"/>
 <script src="chrome://calendar/content/calendar-task-tree.js"/>
 <script src="chrome://calendar/content/calendar-task-view.js"/>
 <script src="chrome://calendar/content/calendar-dialog-utils.js"/>
 <script src="chrome://calendar/content/calApplicationUtils.js"/>
-<script src="chrome://calendar/content/calendar-item-bindings.js"/>
 <script src="chrome://calendar/content/calendar-menus.js"/>
 
 <!-- NEEDED FOR CALENDAR VIEWS -->
 <script src="chrome://calendar/content/calendar-event-gripbar.js"/>
 
 <!-- NEEDED FOR MIGRATION CHECK AT INSTALL -->
 <script src="chrome://calendar/content/calendar-migration.js"/>