1 files changed, 128 insertions, 0 deletions
diff --git a/comm/calendar/base/content/calendar-day-label.js b/comm/calendar/base/content/calendar-day-label.js
new file mode 100644
index 0000000000..e0d205bc5d
--- /dev/null
+++ b/comm/calendar/base/content/calendar-day-label.js
@@ -0,0 +1,128 @@
+/* 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/. */
+
+/* global MozXULElement, getSummarizedStyleValues */
+
+// Wrap in a block to prevent leaking to window scope.
+{
+  const { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm");
+
+  class MozCalendarDayLabel extends MozXULElement {
+    static get observedAttributes() {
+      return ["selected", "relation"];
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback()) {
+        return;
+      }
+      this.textContent = "";
+      this.setAttribute("flex", "1");
+      this.setAttribute("pack", "center");
+
+      this.longWeekdayName = document.createXULElement("label");
+      this.longWeekdayName.classList.add("calendar-day-label-name");
+
+      this.shortWeekdayName = document.createXULElement("label");
+      this.shortWeekdayName.classList.add("calendar-day-label-name");
+      this.shortWeekdayName.setAttribute("hidden", "true");
+
+      this.appendChild(this.longWeekdayName);
+      this.appendChild(this.shortWeekdayName);
+
+      this.mWeekday = -1;
+
+      this.longWeekdayPixels = 0;
+
+      this.mDate = null;
+
+      this._updateAttributes();
+    }
+
+    attributeChangedCallback() {
+      this._updateAttributes();
+    }
+
+    _updateAttributes() {
+      if (!this.longWeekdayName || !this.shortWeekdayName) {
+        return;
+      }
+
+      if (this.hasAttribute("selected")) {
+        this.longWeekdayName.setAttribute("selected", this.getAttribute("selected"));
+        this.shortWeekdayName.setAttribute("selected", this.getAttribute("selected"));
+      } else {
+        this.longWeekdayName.removeAttribute("selected");
+        this.shortWeekdayName.removeAttribute("selected");
+      }
+
+      if (this.hasAttribute("relation")) {
+        this.longWeekdayName.setAttribute("relation", this.getAttribute("relation"));
+        this.shortWeekdayName.setAttribute("relation", this.getAttribute("relation"));
+      } else {
+        this.longWeekdayName.removeAttribute("relation");
+        this.shortWeekdayName.removeAttribute("relation");
+      }
+    }
+
+    set weekDay(val) {
+      this.mWeekday = val % 7;
+      this.longWeekdayName.value = cal.dtz.formatter.dayName(val);
+      this.shortWeekdayName.value = cal.dtz.formatter.shortDayName(val);
+    }
+
+    get weekDay() {
+      return this.mWeekday;
+    }
+
+    set date(val) {
+      this.mDate = val;
+      let dateFormatter = cal.dtz.formatter;
+      let label = cal.l10n.getCalString("dayHeaderLabel", [
+        dateFormatter.shortDayName(val.weekday),
+        dateFormatter.formatDateWithoutYear(val),
+      ]);
+      this.shortWeekdayName.setAttribute("value", label);
+      label = cal.l10n.getCalString("dayHeaderLabel", [
+        dateFormatter.dayName(val.weekday),
+        dateFormatter.formatDateWithoutYear(val),
+      ]);
+      this.longWeekdayName.setAttribute("value", label);
+    }
+
+    get date() {
+      return this.mDate;
+    }
+
+    set shortWeekNames(val) {
+      // cache before change, in case we are switching to short
+      this.getLongWeekdayPixels();
+      this.longWeekdayName.hidden = val;
+      this.shortWeekdayName.hidden = !val;
+    }
+
+    getLongWeekdayPixels() {
+      // Only do this if the long weekdays are visible and we haven't already cached.
+      let longNameWidth = this.longWeekdayName.getBoundingClientRect().width;
+
+      if (longNameWidth == 0) {
+        // weekdaypixels have not yet been laid out
+        return 0;
+      }
+
+      this.longWeekdayPixels =
+        longNameWidth +
+        getSummarizedStyleValues(this.longWeekdayName, ["margin-left", "margin-right"]);
+      this.longWeekdayPixels += getSummarizedStyleValues(this, [
+        "border-left-width",
+        "padding-left",
+        "padding-right",
+      ]);
+
+      return this.longWeekdayPixels;
+    }
+  }
+
+  customElements.define("calendar-day-label", MozCalendarDayLabel);
+}