Bug 1582717 - remove grid usage from calendar-month-base-view.js. r=pmorris
authorKhushil Mistry <khushil324@gmail.com>
Wed, 09 Oct 2019 12:11:00 +0200
changeset 27894 311c42a94e230fd1ba04e3d43e6cce2b12327fe9
parent 27893 8acf218742e206e590fc05519463b7cfa3a3bbe3
child 27895 fcf5332a7551e77e1e0037e22ae74b81ced635f5
push id16539
push usermozilla@jorgk.com
push dateThu, 10 Oct 2019 22:05:05 +0000
treeherdercomm-central@311c42a94e23 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspmorris
bugs1582717
Bug 1582717 - remove grid usage from calendar-month-base-view.js. r=pmorris
calendar/base/content/calendar-month-base-view.js
calendar/base/content/calendar-month-view.js
calendar/base/themes/common/calendar-views.css
calendar/test/browser/views/browser_monthView.js
calendar/test/browser/views/browser_multiweekView.js
calendar/test/modules/CalendarUtils.jsm
--- a/calendar/base/content/calendar-month-base-view.js
+++ b/calendar/base/content/calendar-month-base-view.js
@@ -21,55 +21,55 @@ var { cal } = ChromeUtils.import("resour
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       // this.hasConnected is set to true in super.connectedCallback.
       super.connectedCallback();
 
       const row = `
-        <row class="calendar-month-view-grid-row" flex="1">
-          <calendar-month-day-box/>
-          <calendar-month-day-box/>
-          <calendar-month-day-box/>
-          <calendar-month-day-box/>
-          <calendar-month-day-box/>
-          <calendar-month-day-box/>
-          <calendar-month-day-box/>
-        </row>
+        <html:tr class="calendar-month-view-grid-row">
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+          <html:td>
+            <calendar-month-day-box/>
+          </html:td>
+        </html:tr>
         `;
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
           <vbox class="mainbox"
                 flex="1">
             <hbox class="labeldaybox labeldaybox-container"
                   equalsize="always"/>
-            <grid class="monthgrid"
-                  flex="1">
-              <columns class="monthgridcolumns"
-                       equalsize="always">
-                <column class="calendar-month-view-grid-column" flex="1"/>
-                <column class="calendar-month-view-grid-column" flex="1"/>
-                <column class="calendar-month-view-grid-column" flex="1"/>
-                <column class="calendar-month-view-grid-column" flex="1"/>
-                <column class="calendar-month-view-grid-column" flex="1"/>
-                <column class="calendar-month-view-grid-column" flex="1"/>
-                <column class="calendar-month-view-grid-column" flex="1"/>
-              </columns>
-              <rows class="monthgridrows"
-                    equalsize="always">
-                ${row}
-                ${row}
-                ${row}
-                ${row}
-                ${row}
-                ${row}
-              </rows>
-            </grid>
+            <html:table class="monthgrid">
+              ${row}
+              ${row}
+              ${row}
+              ${row}
+              ${row}
+              ${row}
+            </html:table>
           </vbox>
         `)
       );
 
       this.addEventListener("wheel", event => {
         const pixelThreshold = 150;
         const scrollEnabled = Services.prefs.getBoolPref("calendar.view.mousescroll", true);
         if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey && scrollEnabled) {
@@ -209,20 +209,16 @@ var { cal } = ChromeUtils.import("resour
     get showDaysOutsideMonth() {
       return this.mShowDaysOutsideMonth;
     }
 
     get monthgrid() {
       return this.querySelector(".monthgrid");
     }
 
-    get monthgridrows() {
-      return this.querySelector(".monthgridrows");
-    }
-
     // calICalendarView Methods
 
     setSelectedItems(count, items, suppressEvent) {
       if (this.mSelectedItems.length) {
         for (const item of this.mSelectedItems) {
           const oldboxes = this.findDayBoxesForItem(item);
           for (const oldbox of oldboxes) {
             oldbox.unselectItem(item);
@@ -432,34 +428,32 @@ var { cal } = ChromeUtils.import("resour
       // This gets set to true, telling us to collapse the rest of the rows.
       let finished = false;
       const dateList = this.getDateList({});
 
       // This allows finding the first column of dayboxes where to set the
       // week labels, taking into account whether days-off are displayed or not.
       let weekLabelColumnPos = -1;
 
-      const rows = this.monthgridrows.childNodes;
+      const rows = this.monthgrid.children;
 
       // Iterate through each monthgridrow and set up the day-boxes that
       // are its child nodes.  Remember, childNodes is not a normal array,
       // so don't use the in operator if you don't want extra properties
       // coming out.
       for (let i = 0; i < rows.length; i++) {
         const row = rows[i];
         // If we've already assigned all of the day-boxes that we need, just
         // collapse the rest of the rows, otherwise expand them if needed.
+        row.toggleAttribute("hidden", finished);
         if (finished) {
-          row.setAttribute("collapsed", true);
           continue;
-        } else {
-          row.removeAttribute("collapsed");
         }
         for (let j = 0; j < row.childNodes.length; j++) {
-          const daybox = row.childNodes[j];
+          const daybox = row.childNodes[j].firstChild;
           const date = dateList[dateBoxes.length];
 
           // Remove the attribute "relation" for all the column headers.
           // Consider only the first row index otherwise it will be
           // removed again afterwards the correct setting.
           if (i == 0) {
             this.labeldaybox.childNodes[j].removeAttribute("relation");
           }
@@ -573,40 +567,42 @@ var { cal } = ChromeUtils.import("resour
 
       this.mToggleStatus = toggleStatus;
     }
 
     /**
      * Hide the week numbers.
      */
     hideWeekNumbers() {
-      const rows = this.monthgridrows.childNodes;
+      const rows = this.monthgrid.children;
       for (let i = 0; i < rows.length; i++) {
         const row = rows[i];
         for (let j = 0; j < row.childNodes.length; j++) {
-          const daybox = row.childNodes[j];
+          const daybox = row.childNodes[j].firstChild;
           const weekLabel = daybox.querySelector("[data-label='week']");
           weekLabel.hidden = true;
         }
       }
     }
 
     /**
      * Hide the days off.
      */
     hideDaysOff() {
-      const columns = this.querySelector(".monthgridcolumns").childNodes;
       const headerkids = this.querySelector(".labeldaybox").childNodes;
+      const rows = this.monthgrid.children;
 
-      for (let i = 0; i < columns.length; i++) {
-        const dayForColumn = (i + this.mWeekStartOffset) % 7;
+      const lastColNum = rows[0].children.length - 1;
+      for (let colNum = 0; colNum <= lastColNum; colNum++) {
+        const dayForColumn = (colNum + this.mWeekStartOffset) % 7;
         const dayOff = this.mDaysOffArray.includes(dayForColumn);
-
-        columns[i].collapsed = dayOff && !this.mDisplayDaysOff;
-        headerkids[i].collapsed = dayOff && !this.mDisplayDaysOff;
+        headerkids[colNum].hidden = dayOff && !this.mDisplayDaysOff;
+        for (let row of rows) {
+          row.children[colNum].toggleAttribute("hidden", dayOff && !this.mDisplayDaysOff);
+        }
       }
     }
 
     /**
      * Return the day box element for a given date.
      *
      * @param {calIDateTime} date    A date.
      * @return {?Element}            A `calendar-month-day-box` element.
--- a/calendar/base/content/calendar-month-view.js
+++ b/calendar/base/content/calendar-month-view.js
@@ -96,18 +96,20 @@
       }
 
       return false;
     }
 
     set selected(val) {
       if (val) {
         this.setAttribute("selected", "true");
+        this.parentNode.setAttribute("selected", "true");
       } else {
         this.removeAttribute("selected");
+        this.parentNode.removeAttribute("selected");
       }
       return val;
     }
 
     get showMonthLabel() {
       return this.mShowMonthLabel;
     }
 
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -1,12 +1,14 @@
 /* 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/. */
 
+@namespace html url("http://www.w3.org/1999/xhtml");
+
 :root {
     --viewColor: #000;
     --viewBackground: #fff;
     --viewBorderColor: #d2d2d2;
     --viewHighlightBorderColor: #67acd8;
     --viewTodayBorderColor: #7fb9ee;
     --viewTodayColor: inherit;
     --viewTodayBackground: #e1f0fd;
@@ -638,31 +640,67 @@ calendar-day-label[relation="today1day"]
 }
 
 /* Month View */
 calendar-month-view,
 calendar-multiweek-view {
     padding: 0px 2px 2px;
 }
 
+calendar-month-view .mainbox,
+calendar-multiweek-view .mainbox {
+    display: flex;
+    flex-direction: column;
+}
+
+calendar-month-view tr[hidden],
+calendar-multiweek-view tr[hidden],
+calendar-month-view td[hidden],
+calendar-multiweek-view td[hidden] {
+    display: none;
+}
+
+.monthgrid {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    border-spacing: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.monthgrid tr,
+.monthgrid td {
+    margin: 0;
+    padding: 0;
+}
+
 .calendar-month-view-grid-column {
     min-width: 1px;
     width: 1px;
 }
 
 .calendar-month-view-grid-row {
     min-height: 1px;
     height: 1px;
     border-right: 1px solid var(--viewBorderColor);
+    display: flex;
+    flex: 1;
+}
+
+.calendar-month-view-grid-row td {
+    flex: 1;
+    display: flex;
 }
 
 calendar-month-day-box {
     border:none !important;
     border-left: 1px solid var(--viewBorderColor) !important;
     border-bottom: 1px solid var(--viewBorderColor) !important;
+    flex: 1;
 }
 
 .calendar-month-day-box-items-box {
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 .calendar-month-day-box-current-month {
--- a/calendar/test/browser/views/browser_monthView.js
+++ b/calendar/test/browser/views/browser_monthView.js
@@ -35,18 +35,17 @@ add_task(function testMonthView() {
   let dateFormatter = cal.getDateFormatter();
 
   createCalendar(controller, CALENDARNAME);
   switchToView(controller, "month");
   goToDate(controller, 2009, 1, 1);
 
   // Verify date.
   let day = lookup(`
-        ${MONTH_VIEW}/{"class":"mainbox"}/{"class":"monthgrid"}/
-        {"class":"monthgridrows"}/[0]/{"selected":"true"}
+        ${MONTH_VIEW}/{"class":"mainbox"}/{"class":"monthgrid"}/[0]/{"selected":"true"}/[0]
     `);
   controller.waitFor(() => day.getNode().mDate.icalString == "20090101");
 
   // Create event.
   // Thursday of 2009-01-01 should be the selected box in the first row with default settings.
   let hour = new Date().getHours(); // Remember time at click.
   let eventBox = lookupEventBox("month", CANVAS_BOX, 1, 5);
   invokeEventDialog(controller, eventBox, (event, iframe) => {
--- a/calendar/test/browser/views/browser_multiweekView.js
+++ b/calendar/test/browser/views/browser_multiweekView.js
@@ -35,18 +35,17 @@ add_task(function setupModule(module) {
   let dateFormatter = cal.getDateFormatter();
 
   createCalendar(controller, CALENDARNAME);
   switchToView(controller, "multiweek");
   goToDate(controller, 2009, 1, 1);
 
   // Verify date.
   let day = lookup(`
-        ${MULTIWEEK_VIEW}/{"class":"mainbox"}/{"class":"monthgrid"}/
-        {"class":"monthgridrows"}/[0]/{"selected":"true"}
+        ${MULTIWEEK_VIEW}/{"class":"mainbox"}/{"class":"monthgrid"}/[0]/{"selected":"true"}/[0]
     `);
   controller.waitFor(() => day.getNode().mDate.icalString == "20090101");
 
   // Create event.
   // Thursday of 2009-01-01 should be the selected box in the first row with default settings.
   let hour = new Date().getHours(); // Remember time at click.
   let eventBox = lookupEventBox("multiweek", CANVAS_BOX, 1, 5);
   invokeEventDialog(controller, eventBox, (event, iframe) => {
--- a/calendar/test/modules/CalendarUtils.jsm
+++ b/calendar/test/modules/CalendarUtils.jsm
@@ -371,17 +371,17 @@ function getEventBoxPath(controller, vie
                 /anon({"class":"multiday-column-top-box"})/{"flex":"1"}/{"flex":"1"}/{"flex":"1"}
             `;
     }
 
     return path;
   } else {
     path += `
             /{"class":"mainbox"}/{"class":"monthgrid"}/
-            {"class":"monthgridrows"}/[${row - 1}]/[${column - 1}]
+            [${row - 1}]/[${column - 1}]/[0]
         `;
 
     if (option == CANVAS_BOX) {
       path += `
                 /{"class":"calendar-day-items"}
             `;
     }