Backed out changeset 268b0132591a (bug 1509837). a=backout
authorJorg K <jorgk@jorgk.com>
Thu, 18 Apr 2019 00:19:51 +0200
changeset 26377 72eadf95a12007ee4a2c5d02951ffd7851612628
parent 26376 e920876482870bfc239ab3bc3ecd1514d9958382
child 26378 b5090b737682c766f6e8b743aca29a791bfbce95
push id15809
push usermozilla@jorgk.com
push dateWed, 17 Apr 2019 22:20:36 +0000
treeherdercomm-central@72eadf95a120 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout
bugs1509837
backs out268b0132591a59bddc5bcb98ea842639e0420fdb
Backed out changeset 268b0132591a (bug 1509837). a=backout
calendar/base/content/dialogs/calendar-event-dialog-attendees-custom-elements.js
calendar/base/content/dialogs/calendar-event-dialog-attendees.xul
calendar/base/content/dialogs/calendar-event-dialog-freebusy.xml
calendar/base/content/dialogs/calendar-event-dialog.css
calendar/base/themes/common/dialogs/calendar-event-dialog.css
--- a/calendar/base/content/dialogs/calendar-event-dialog-attendees-custom-elements.js
+++ b/calendar/base/content/dialogs/calendar-event-dialog-attendees-custom-elements.js
@@ -26,21 +26,21 @@ class MozCalendarEventFreebusyTimebar ex
         this.mScrollOffset = 0;
         this.mStartHour = 0;
         this.mEndHour = 24;
         this.mForce24Hours = false;
         this.mZoomFactor = 100;
     }
 
     /**
-     * Sets zoom factor to a new value, clears freebusy-day's children, and updates zoom factor and
+     * Sets mZoomFactor to a new value, clears freebusy-day's children, and updates zoomFactor and
      * force24Hours properties of freebusy-day element.
      *
-     * @param {Number} val       New zoom factor
-     * @returns {Number}         New zoom factor
+     * @param {Number} val       new mZoomFactor value
+     * @returns {Number}         new mZoomFactor value
      */
     set zoomFactor(val) {
         this.mZoomFactor = val;
 
         let template = this.getElementsByTagName("freebusy-day")[0];
         let parent = template.parentNode;
         while (parent.childNodes.length > 1) {
             parent.lastChild.remove();
@@ -48,31 +48,29 @@ class MozCalendarEventFreebusyTimebar ex
 
         template.force24Hours = this.mForce24Hours;
         template.zoomFactor = this.mZoomFactor;
 
         return val;
     }
 
     /**
-     * Gets zoom factor of freebusy timebar.
-     *
-     * @returns {Number}       Zoom factor value
+     * @returns {Number}       mZoomFactor value
      */
     get zoomFactor() {
         return this.mZoomFactor;
     }
 
     /**
-     * Changes time to 24 hour format, updates startHour and endHour properties, clears
+     * Sets mForce24Hours to a new value, updates startHour and endHour properties, clears
      * freebusy-day's children, and updates zoomFactor and force24Hours properties of freebusy-day
      * element.
      *
-     * @param {Boolean} val       New force24Hours value
-     * @returns {Boolean}         New force24Hours value
+     * @param {Boolean} val       new mForce24Hours value
+     * @returns {Boolean}         new mForce24Hours value
      */
     set force24Hours(val) {
         this.mForce24Hours = val;
         this.initTimeRange();
 
         let template = this.getElementsByTagName("freebusy-day")[0];
 
         let parent = template.parentNode;
@@ -82,128 +80,116 @@ class MozCalendarEventFreebusyTimebar ex
 
         template.force24Hours = this.mForce24Hours;
         template.zoomFactor = this.mZoomFactor;
 
         return val;
     }
 
     /**
-     * Gets force24hours value which represents whether the time is in 12 hour or 24 hour format.
-     *
-     * @returns {Boolean}       force24Hours value
+     * @returns {Boolean}       mForce24Hours value
      */
     get force24Hours() {
         return this.mForce24Hours;
     }
 
     /**
-     * Gets the difference between the x coordinate of the first two freebusy-day elements.
-     *
-     * @returns {Number}       X coordinate difference value
+     * @returns {Number}       The difference between the first two day-elements
      */
     get contentWidth() {
         let template = this.getElementsByTagName("freebusy-day")[0];
         return template.nextSibling.getBoundingClientRect().x - template.getBoundingClientRect().x;
     }
 
     /**
-     * Gets parent node's width.
-     *
      * @returns {Number}       Parent node's width
      */
     get containerWidth() {
         return this.parentNode.getBoundingClientRect().width;
     }
 
     /**
-     * Sets startDate to a new value and make it immutable.
+     * Sets mStartDate to a new value and make it immutable.
      *
-     * @param {calIDateTime} val       New startDate value
-     * @returns {calIDateTime}         New startDate value
+     * @param {calDateTime} val       new mStartDate value
+     * @returns {calDateTime}         new mStartDate value
      */
     set startDate(val) {
         this.mStartDate = val.clone();
         this.mStartDate.makeImmutable();
         return val;
     }
 
     /**
-     * Gets start date of freebusy-timebar.
-     *
-     * @returns {calIDateTime}       startDate value
+     * @returns {calDateTime}       mStartDate value
      */
     get startDate() {
         return this.mStartDate;
     }
 
     /**
-     * Sets end date of timebar to a new value and make it immutable.
+     * Sets mEndDate to a new value and make it immutable.
      *
-     * @param {calIDateTime} val       New end date value
-     * @returns {calIDateTime}         New end date value
+     * @param {calDateTime} val       new mEndDate value
+     * @returns {calDateTime}         new mEndDate value
      */
     set endDate(val) {
         this.mEndDate = val.clone();
         this.mEndDate.makeImmutable();
         return val;
     }
 
     /**
-     * Gets end date of freebusy-timebar.
-     *
-     * @returns {calIDateTime}       endDate value
+     * @returns {calDateTime}       mEndDate value
      */
     get endDate() {
         return this.mEndDate;
     }
 
     /**
-     * Adds days `dayOffset` to freebusy day date.
+     * Sets mDayOffset to a new value and adjust scroll-container children according to it.
      *
-     * @param {Number} val       New day offset value
-     * @returns {Number}         New day offset value
+     * @param {Number} val       new mDayOffset value
+     * @returns {Number}         new mDayOffset value
      */
     set dayOffset(val) {
         this.mDayOffset = val;
-        let container = this.getElementsByTagName("calendar-event-scroll-container")[0];
+        let container = this.getElementsByTagName("scroll-container")[0];
         let date = this.mStartDate.clone();
         date.day += val;
-        let numChilds = container.content.childNodes.length;
+        let numChilds = container.childNodes.length;
         for (let i = 0; i < numChilds; i++) {
-            let child = container.content.childNodes[i];
+            let child = container.childNodes[i];
             child.date = date;
             date.day++;
         }
         return val;
     }
 
     /**
-     * Gets the scale of the total shift needed to step one block further.
-     *
-     * @returns {Number}        The total shift needed to step one block further
+     * @returns {Number}       The scale of the total shift needed to step one block further
      */
     get step() {
         // How much pixels spans a single day
         let oneday = this.contentWidth;
 
         // The difference in pixels between the content and the container.
         let shift = (oneday * this.mRange) - (this.containerWidth);
 
         // What we want to know is the scale of the total shift needed to step one block further.
         // Since the content is divided into 'numHours' equal parts, we can simply state:
         let numHours = this.mEndHour - this.mStartHour;
         return (this.contentWidth) / (numHours * shift);
     }
 
     /**
-     * Scrolls to a new date.
+     * Sets mScrollOffset value.
      *
-     * @param {Number} val       New scroll offset value
-     * @returns {Number}         New scroll offset value
+     * @param {Number} val       new mScrollOffset value
+     * @returns {Number}         new mScrollOffset value
      */
     set scroll(val) {
         this.mScrollOffset = val;
 
         // How much pixels spans a single day
         let oneday = this.contentWidth;
 
         // The difference in pixels between the content and the container.
@@ -217,33 +203,31 @@ class MozCalendarEventFreebusyTimebar ex
         // always yields a positive integer value.
         this.dayOffset = (offset - (offset % oneday)) / oneday;
 
         // Set the pixel offset for the content which will always need to be in the range
         // [0 <= offset <= oneday].
         offset %= oneday;
 
         // Set the offset at the content node.
-        let container = this.getElementsByTagName("calendar-event-scroll-container")[0];
+        let container = this.getElementsByTagName("scroll-container")[0];
         container.x = offset;
         return val;
     }
 
     /**
-     * Gets scroll offset of freebusy-timebar.
-     *
-     * @returns {Number}       Scroll offset value.
+     * @returns {Number}       mScrollOffset value.
      */
     get scroll() {
         return this.mScrollOffset;
     }
 
     /**
-     * Refreshes calendar-event-scroll-container's children. calendar-event-scroll-container
-     * contains date and time labels with regular interval gap.
+     * Refreshes scroll-container's children. scroll-container contains date and time labels with
+     * regular interval gap.
      */
     refresh() {
         let date = this.mStartDate.clone();
         let template = this.getElementsByTagName("freebusy-day")[0];
         let parent = template.parentNode;
         for (let child of parent.childNodes) {
             child.startDate = this.mStartDate;
             child.endDate = this.mEndDate;
@@ -263,17 +247,17 @@ class MozCalendarEventFreebusyTimebar ex
         let event = document.createEvent("Events");
         event.initEvent("timebar", true, false);
         event.details = this.contentWidth;
         event.height = template.dayHeight;
         this.dispatchEvent(event);
     }
 
     /**
-     * Updates end hour and start hour of freebusy-timebar.
+     * Updates mEndHour and mStartHour values.
      */
     initTimeRange() {
         if (this.force24Hours) {
             this.mStartHour = 0;
             this.mEndHour = 24;
         } else {
             this.mStartHour = Services.prefs.getIntPref("calendar.view.daystarthour", 8);
             this.mEndHour = Services.prefs.getIntPref("calendar.view.dayendhour", 19);
@@ -1367,17 +1351,17 @@ customElements.define("calendar-event-at
 /**
  * MozCalendarEventFreebusyRow is a widget that represents a row in freebusy-grid element.
  *
  * @extends {MozXULElement}
  */
 class MozCalendarEventFreebusyRow extends MozXULElement {
     connectedCallback() {
         if (!this.hasChildNodes()) {
-            this.containerNodeElem = document.createElement("calendar-event-scroll-container");
+            this.containerNodeElem = document.createElement("scroll-container");
             this.containerNodeElem.setAttribute("flex", "1");
             this.hoursNodeElem = document.createElement("box");
             this.hoursNodeElem.setAttribute("equalsize", "always");
             this.containerNodeElem.appendChild(this.hoursNodeElem);
             this.appendChild(this.containerNodeElem);
         }
 
         this.state = null;
@@ -1397,30 +1381,30 @@ class MozCalendarEventFreebusyRow extend
 
     /**
      * Gets node representing hours.
      *
      * @returns {Element}       Box element inside scroll-container
      */
     get hoursNode() {
         if (!this.hoursNodeElem) {
-            this.hoursNodeElem = this.querySelector("calendar-event-scroll-container > box");
+            this.hoursNodeElem = this.querySelector("scroll-container > box");
         }
 
         return this.hoursNodeElem;
     }
 
     /**
      * Gets the scroll container with the freebusy rows.
      *
      * @returns {Element}       Scroll container element
      */
     get containerNode() {
         if (!this.containerNodeElem) {
-            this.containerNodeElem = this.querySelector("calendar-event-scroll-container");
+            this.containerNodeElem = this.querySelector("scroll-container");
         }
 
         return this.containerNodeElem;
     }
 
     /**
      * Getter for zoom factor of freebusy row.
      *
@@ -1570,17 +1554,17 @@ class MozCalendarEventFreebusyRow extend
 
     /**
      * Scrolls the element to a particular x value.
      *
      * @param {Number} val      New x value
      * @returns {Number}        New x value
      */
     set scroll(val) {
-        let timebarContainer = document.querySelector("#timebar calendar-event-scroll-container");
+        let timebarContainer = document.querySelector("#timebar scroll-container");
         let offset = timebarContainer.x;
         // Set the offset at the content node.
         this.containerNode.x = offset;
         return val;
     }
 
     /**
      * Setup some properties of the element.
@@ -1822,117 +1806,8 @@ class MozCalendarEventFreebusyRow extend
             this.endHour = 24;
         } else {
             this.startHour = Services.prefs.getIntPref("calendar.view.daystarthour", 8);
             this.endHour = Services.prefs.getIntPref("calendar.view.dayendhour", 19);
         }
     }
 }
 customElements.define("calendar-event-freebusy-row", MozCalendarEventFreebusyRow);
-
-/**
- * MozCalendarEventScrollContainer widgets is a container that allows elements to horizonatally and
- * vertically scrollable in attendees-list dialog.
- *
- * @extends {MozXULElement}
- */
-class MozCalendarEventScrollContainer extends MozXULElement {
-    static get observedAttributes() {
-        return ["flex", "orient"];
-    }
-
-    connectedCallback() {
-        if (this.delayConnectedCallback() || this.firstChild.classList.contains("container")) {
-            return;
-        }
-
-        const childrenFragment = this._getChildrenFragment();
-
-        this.container = document.createElement("box");
-        this.container.classList.add("container");
-
-        this.content = document.createElement("box");
-        this.content.classList.add("content");
-
-        this.content.appendChild(childrenFragment);
-        this.container.appendChild(this.content);
-        this.appendChild(this.container);
-
-        this._updateAttributes();
-    }
-
-    attributeChangedCallback() {
-        this._updateAttributes();
-    }
-
-    _updateAttributes() {
-        if (!this.isConnected || !this.container || !this.content) {
-            return;
-        }
-
-        if (this.hasAttribute("flex")) {
-            this.content.setAttribute("flex", this.getAttribute("flex"));
-            this.container.setAttribute("flex", this.getAttribute("flex"));
-        }
-
-        if (this.hasAttribute("orient")) {
-            this.content.setAttribute("orient", this.getAttribute("orient"));
-        }
-    }
-
-    /**
-     * Returns document fragment containing the children that were wrapped inside
-     * calendar-event-scroll-container tag before the execution of connectedCallback.
-     */
-    _getChildrenFragment() {
-        const frag = document.createDocumentFragment();
-
-        while (this.hasChildNodes()) {
-            frag.appendChild(this.firstChild);
-        }
-
-        return frag;
-    }
-
-    /**
-     * Gets inline start margin of calendar-event-scroll-container.
-     *
-     * @returns {Number}        margin-inline-start value for the content box
-     */
-    get x() {
-        let margin = getComputedStyle(this.content, null).marginInlineStart;
-        return -parseInt(margin.replace(/px/, ""), 10);
-    }
-
-    /**
-     * Sets inline start margin of calendar-event-scroll-container.
-     *
-     * @param {Number} val      margin-inline-start value for the content box
-     * @returns {Number}        margin-inline-start value for the content box
-     */
-    set x(val) {
-        this.content.setAttribute("style", `margin-inline-start: ${(-val)}px;`);
-        return val;
-    }
-
-    /**
-     * Gets top margin of scroll-container.
-     *
-     * @returns {Number}        margin-top value for the content box
-     */
-    get y() {
-        let margin = getComputedStyle(this.content, null).marginTop;
-        return -parseInt(margin.replace(/px/, ""), 10);
-    }
-
-    /**
-     * Sets top margin of scroll-container.
-     *
-     * @param {Number} val      margin-top value for the content box
-     * @returns {Number}        margin-top value for the content box
-     */
-    set y(val) {
-        this.content.setAttribute("style", `margin-top: ${(-val)}px;`);
-        return val;
-    }
-}
-
-customElements.define("calendar-event-scroll-container", MozCalendarEventScrollContainer);
--- a/calendar/base/content/dialogs/calendar-event-dialog-attendees.xul
+++ b/calendar/base/content/dialogs/calendar-event-dialog-attendees.xul
@@ -110,19 +110,19 @@
                                            class="listbox-noborder"
                                            seltype="multiple"
                                            rows="1"
                                            disabled="true"
                                            range="16">
             <richlistitem class="freebusy-listitem"
                           allowevents="true">
               <hbox flex="1">
-                <calendar-event-scroll-container flex="1">
+                <scroll-container flex="1">
                   <freebusy-day/>
-                </calendar-event-scroll-container>
+                </scroll-container>
               </hbox>
             </richlistitem>
           </calendar-event-freebusy-timebar>
           <freebusy-grid flex="1"
                          id="freebusy-grid"
                          range="16"
                          class="listbox-noborder"
                          seltype="multiple"
--- a/calendar/base/content/dialogs/calendar-event-dialog-freebusy.xml
+++ b/calendar/base/content/dialogs/calendar-event-dialog-freebusy.xml
@@ -10,16 +10,70 @@
   <!ENTITY % dtd1 SYSTEM "chrome://calendar/locale/global.dtd" > %dtd1;
   <!ENTITY % dtd2 SYSTEM "chrome://calendar/locale/calendar.dtd" > %dtd2;
   <!ENTITY % dtd3 SYSTEM "chrome://calendar/locale/calendar-event-dialog.dtd" > %dtd3;
 ]>
 
 <bindings xmlns="http://www.mozilla.org/xbl"
           xmlns:xbl="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="scroll-container">
+    <content>
+      <xul:box class="container"
+               xbl:inherits="flex"
+               anonid="container"
+               style="overflow: hidden; clip: rect(0px 0px 0px 0px);">
+        <xul:box class="content"
+                 xbl:inherits="flex,orient"
+                 anonid="content">
+          <children/>
+        </xul:box>
+      </xul:box>
+    </content>
+
+    <implementation>
+      <property name="x">
+        <getter><![CDATA[
+            let content =
+                document.getAnonymousElementByAttribute(
+                    this, "anonid", "content");
+            let margin = getComputedStyle(content, null).marginInlineStart;
+            return -parseInt(margin.replace(/px/, ""), 10);
+        ]]></getter>
+        <setter><![CDATA[
+            let content =
+                document.getAnonymousElementByAttribute(
+                    this, "anonid", "content");
+            content.setAttribute("style",
+                                 "margin-inline-start: " + (-val) + "px;");
+            return val;
+        ]]></setter>
+      </property>
+
+      <property name="y">
+        <getter><![CDATA[
+            let content =
+                document.getAnonymousElementByAttribute(
+                    this, "anonid", "content");
+            let margin = getComputedStyle(content, null).marginTop;
+            return -parseInt(margin.replace(/px/, ""), 10);
+        ]]></getter>
+        <setter><![CDATA[
+            let content =
+                document.getAnonymousElementByAttribute(
+                    this, "anonid", "content");
+            content.setAttribute("style",
+                                 "margin-top: " + (-val) + "px;");
+            return val;
+        ]]></setter>
+      </property>
+    </implementation>
+  </binding>
+
   <binding id="freebusy-day">
     <content>
       <xul:box orient="vertical">
         <xul:text class="freebusy-timebar-title"
                   style="font-weight:bold;"
                   anonid="day"/>
         <xul:box equalsize="always" anonid="hours"/>
       </xul:box>
--- a/calendar/base/content/dialogs/calendar-event-dialog.css
+++ b/calendar/base/content/dialogs/calendar-event-dialog.css
@@ -14,17 +14,18 @@
 
 selection-bar {
     -moz-binding: url(chrome://calendar/content/calendar-event-dialog-attendees.xml#selection-bar);
     -moz-user-focus: normal;
 }
 
 /****************************************************************************************/
 
-calendar-event-scroll-container {
+scroll-container {
+    -moz-binding: url(chrome://calendar/content/calendar-event-dialog-freebusy.xml#scroll-container);
     -moz-user-focus: normal;
 }
 
 freebusy-day {
     -moz-binding: url(chrome://calendar/content/calendar-event-dialog-freebusy.xml#freebusy-day);
     -moz-user-focus: normal;
 }
 
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -405,21 +405,16 @@ freebusy-day {
 freebusy-day:first-child {
     border-inline-start: 1px solid transparent;
 }
 
 freebusy-day:last-child {
     border-inline-end: 1px solid transparent;
 }
 
-calendar-event-scroll-container > box {
-    overflow: hidden;
-    clip: rect(0px 0px 0px 0px);
-}
-
 /* negative margins to clear freebusy-day's border and margin */
 freebusy-day > box {
     margin-inline-start: -1px;
     margin-inline-end: -3px;
 }
 
 .freebusy-content {
     overflow: hidden;