Bug 1512945 - Migrate calendar-day-label binding to custom element. r=philipp
authorArshad Khan <arshdkhn1@gmail.com>
Mon, 10 Dec 2018 15:58:22 +0530
changeset 33371 8f9029b8f6f3
parent 33370 4ed514006897
child 33372 10e4790e1368
push id2368
push userclokep@gmail.com
push dateMon, 28 Jan 2019 21:12:50 +0000
treeherdercomm-beta@56d23c07d815 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersphilipp
bugs1512945
Bug 1512945 - Migrate calendar-day-label binding to custom element. r=philipp
calendar/base/content/calendar-base-view.js
calendar/base/content/calendar-base-view.xml
calendar/base/content/calendar-view-bindings.css
calendar/base/jar.mn
calendar/lightning/content/messenger-overlay-sidebar.xul
new file mode 100644
--- /dev/null
+++ b/calendar/base/content/calendar-base-view.js
@@ -0,0 +1,123 @@
+/* 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, setBooleanAttribute, getSummarizedStyleValues, cal */
+
+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.createElement("label");
+        this.longWeekdayName.classList.add("calendar-day-label-name");
+
+        this.shortWeekdayName = document.createElement("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.getDateFormatter().dayName(val);
+        this.shortWeekdayName.value = cal.getDateFormatter().shortDayName(val);
+        return this.mWeekday;
+    }
+
+    get weekDay() {
+        return this.mWeekday;
+    }
+
+    set date(val) {
+        this.mDate = val;
+        let dateFormatter = cal.getDateFormatter();
+        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);
+        return val;
+    }
+
+    get date() {
+        return this.mDate;
+    }
+
+    set shortWeekNames(val) {
+        // cache before change, in case we are switching to short
+        this.getLongWeekdayPixels();
+        setBooleanAttribute(this.longWeekdayName, "hidden", val);
+        setBooleanAttribute(this.shortWeekdayName, "hidden", !val);
+        return val;
+    }
+
+    getLongWeekdayPixels() {
+        // Only do this if the long weekdays are visible and we haven't already cached.
+        let longNameWidth = this.longWeekdayName.boxObject.width;
+
+        if (longNameWidth == 0) {
+            // weekdaypixels have not yet been layed 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);
--- a/calendar/base/content/calendar-base-view.xml
+++ b/calendar/base/content/calendar-base-view.xml
@@ -837,88 +837,9 @@
               this.moveView(-1);
           } else if ((event.direction == SimpleGestureEvent.DIRECTION_DOWN && !this.rotated) ||
                      (event.direction == SimpleGestureEvent.DIRECTION_RIGHT && this.rotated)) {
               this.moveView(1);
           }
       ]]></handler>
     </handlers>
   </binding>
-
-  <binding id="calendar-day-label" extends="xul:box">
-    <content flex="1" pack="center">
-      <xul:label anonid="longWeekdayName" class="calendar-day-label-name" xbl:inherits="selected,relation"/>
-      <xul:label anonid="shortWeekdayName" class="calendar-day-label-name" hidden="true" xbl:inherits="selected,relation"/>
-    </content>
-    <implementation>
-      <field name="mWeekday">-1</field>
-      <field name="longWeekdayPixels">0</field>
-      <field name="mDate">null</field>
-      <property name="longName" readonly="true"
-                onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'longWeekdayName');"/>
-      <property name="shortName" readonly="true"
-                onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'shortWeekdayName');"/>
-      <property name="weekDay">
-        <getter><![CDATA[
-            return this.mWeekday;
-        ]]></getter>
-        <setter><![CDATA[
-            this.mWeekday = val % 7;
-            this.longName.value = cal.getDateFormatter().dayName(val);
-            this.shortName.value = cal.getDateFormatter().shortDayName(val);
-            return this.mWeekday;
-        ]]></setter>
-      </property>
-
-      <property name="date">
-        <getter><![CDATA[
-            return this.mDate;
-        ]]></getter>
-        <setter><![CDATA[
-            this.mDate = val;
-            let dateFormatter = cal.getDateFormatter();
-            let label = cal.l10n.getCalString("dayHeaderLabel", [
-                dateFormatter.shortDayName(val.weekday),
-                dateFormatter.formatDateWithoutYear(val)
-            ]);
-            this.shortName.setAttribute("value", label);
-            label = cal.l10n.getCalString("dayHeaderLabel", [
-                dateFormatter.dayName(val.weekday),
-                dateFormatter.formatDateWithoutYear(val)
-            ]);
-            this.longName.setAttribute("value", label);
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="shortWeekNames">
-        <getter><![CDATA[
-        ]]></getter>
-        <setter><![CDATA[
-            // cache before change, in case we are switching to short
-            this.getLongWeekdayPixels();
-            setBooleanAttribute(this.longName, "hidden", val);
-            setBooleanAttribute(this.shortName, "hidden", !val);
-            return val;
-        ]]></setter>
-      </property>
-
-      <method name="getLongWeekdayPixels">
-        <body><![CDATA[
-            // Only do this if the long weekdays are visible and we haven't already cached.
-            let longNameWidth = this.longName.boxObject.width;
-            if (longNameWidth > 0) {
-                this.longWeekdayPixels = longNameWidth +
-                                         getSummarizedStyleValues(this.longName, ["margin-left", "margin-right"]);
-                this.longWeekdayPixels += getSummarizedStyleValues(this, [
-                    "border-left-width", "padding-left", "padding-right"
-                ]);
-                return this.longWeekdayPixels;
-            } else {
-                // in this case the weekdaypixels have not yet been layouted;
-                // by definition 0 is returned
-                return 0;
-            }
-        ]]></body>
-      </method>
-    </implementation>
-  </binding>
 </bindings>
--- a/calendar/base/content/calendar-view-bindings.css
+++ b/calendar/base/content/calendar-view-bindings.css
@@ -20,17 +20,17 @@ calendar-time-bar {
   -moz-binding: url(chrome://calendar/content/calendar-multiday-view.xml#calendar-time-bar);
 }
 
 calendar-multiday-view { 
   -moz-binding: url(chrome://calendar/content/calendar-multiday-view.xml#calendar-multiday-view);
 }
 
 calendar-day-label {
-  -moz-binding: url(chrome://calendar/content/calendar-base-view.xml#calendar-day-label);
+  display: -moz-box;
 }
 
 nav-day-label {
   -moz-binding: url(chrome://calendar/content/calendar-base-view.xml#nav-day-label);
 }
 
 calendar-base-view {
   -moz-binding: url(chrome://calendar/content/calendar-base-view.xml#calendar-base-view);
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -22,16 +22,17 @@ calendar.jar:
     content/calendar/calendar-item-editing.js              (content/calendar-item-editing.js)
     content/calendar/calendar-item-bindings.xml            (content/calendar-item-bindings.xml)
     content/calendar/calendar-management.js                (content/calendar-management.js)
     content/calendar/calendar-menus.xml                    (content/calendar-menus.xml)
     content/calendar/calendar-views.xul                    (content/calendar-views.xul)
     content/calendar/calendar-month-view.xml               (content/calendar-month-view.xml)
     content/calendar/calendar-multiday-view.xml            (content/calendar-multiday-view.xml)
     content/calendar/calendar-base-view.xml                (content/calendar-base-view.xml)
+    content/calendar/calendar-base-view.js                 (content/calendar-base-view.js)
     content/calendar/calendar-statusbar.js                 (content/calendar-statusbar.js)
     content/calendar/calendar-task-editing.js              (content/calendar-task-editing.js)
     content/calendar/calendar-task-tree.xml                (content/calendar-task-tree.xml)
     content/calendar/calendar-task-tree.js                 (content/calendar-task-tree.js)
     content/calendar/calendar-task-view.xul                (content/calendar-task-view.xul)
     content/calendar/calendar-task-view.js                 (content/calendar-task-view.js)
     content/calendar/calendar-ui-utils.js                  (content/calendar-ui-utils.js)
     content/calendar/calendar-unifinder.xul                (content/calendar-unifinder.xul)
--- a/calendar/lightning/content/messenger-overlay-sidebar.xul
+++ b/calendar/lightning/content/messenger-overlay-sidebar.xul
@@ -27,16 +27,17 @@
 <?xul-overlay href="chrome://calendar/content/calendar-common-sets.xul"?>
 <?xul-overlay href="chrome://calendar/content/calendar-views.xul"?>
 
 <?xul-overlay href="chrome://lightning/content/lightning-toolbar.xul"?>
 <?xul-overlay href="chrome://lightning/content/lightning-menus.xul"?>
 
 <overlay id="ltnSidebarOverlay"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script type="application/javascript" src="chrome://calendar/content/calendar-base-view.js"/>
 
   <!-- NEEDED FOR MULTIPLE CALENDAR SUPPORT -->
   <script type="application/javascript" src="chrome://calendar/content/calendar-management.js"/>
 
   <!-- NEEDED FOR CLIPBOARD SUPPORT -->
   <script type="application/javascript" src="chrome://calendar/content/calendar-clipboard.js"/>
 
   <!-- NEEDED FOR IMPORT / EXPORT SUPPORT -->