Bug 1582573 - Re-indent XUL strings in calendar custom elements. r=darktrojan
authorPaul Morris <paul@thunderbird.net>
Thu, 19 Sep 2019 17:03:15 -0400
changeset 36913 cf7a0bacde4897a5328f7fe298d65a26be6c3a64
parent 36912 9b5eb7011b2d501b04af75e6e1fe3ae4817dd47f
child 36914 ed438e24de20ee4539ee789d5839dc0a591ecc98
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersdarktrojan
bugs1582573
Bug 1582573 - Re-indent XUL strings in calendar custom elements. r=darktrojan These were left in a sub-optimal state after the shift to two-space indent and the Prettier auto-formatting.
calendar/base/content/agenda-listbox.js
calendar/base/content/calendar-editable-item.js
calendar/base/content/calendar-event-column.js
calendar/base/content/calendar-menus.js
calendar/base/content/calendar-month-base-view.js
calendar/base/content/calendar-month-view.js
calendar/base/content/calendar-multiday-base-view.js
calendar/base/content/calendar-multiday-view.js
calendar/base/content/calendar-task-tree.js
calendar/base/content/dialogs/calendar-event-dialog-attendees-custom-elements.js
calendar/base/content/dialogs/calendar-invitations-dialog.js
calendar/base/content/widgets/calendar-alarm-widget.js
calendar/base/content/widgets/calendar-minimonth.js
calendar/base/content/widgets/calendar-subscriptions-list.js
calendar/resources/content/datetimepickers/datetimepickers.js
--- a/calendar/base/content/agenda-listbox.js
+++ b/calendar/base/content/agenda-listbox.js
@@ -114,26 +114,26 @@
 
       // Prevent double clicks from opening a dialog to create a new event.
       this.addEventListener("dblclick", event => {
         event.stopPropagation();
       });
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <hbox class="agenda-allday-container-box" flex="1">
-                    <vbox pack="center" flex="1">
-                        <label class="agenda-event-start" crop="end" hidden="true"></label>
-                        <hbox flex="1" align="start">
-                            <image class="agenda-multiDayEvent-image"></image>
-                            <calendar-month-day-box-item flex="1" flat="true"></calendar-month-day-box-item>
-                        </hbox>
-                    </vbox>
-                </hbox>
-            `)
+          <hbox class="agenda-allday-container-box" flex="1">
+            <vbox pack="center" flex="1">
+              <label class="agenda-event-start" crop="end" hidden="true"></label>
+              <hbox flex="1" align="start">
+                <image class="agenda-multiDayEvent-image"></image>
+                <calendar-month-day-box-item flex="1" flat="true"></calendar-month-day-box-item>
+              </hbox>
+            </vbox>
+          </hbox>
+        `)
       );
       this.mAllDayItem = null;
       this.mOccurrence = null;
       this.initializeAttributeInheritance();
     }
 
     setOccurrence(aOccurrence, aPeriod) {
       this.mOccurrence = aOccurrence;
@@ -242,32 +242,32 @@
       });
       // Prevent double clicks from opening a dialog to create a new event.
       this.addEventListener("dblclick", event => {
         event.stopPropagation();
       });
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <hbox class="agenda-container-box" flex="1">
-                    <hbox>
-                        <vbox>
-                            <image class="agenda-calendar-image"></image>
-                            <spacer flex="1"></spacer>
-                        </vbox>
-                    </hbox>
-                    <vbox flex="1" class="agenda-description">
-                        <hbox align="start">
-                            <image class="agenda-multiDayEvent-image"></image>
-                            <label class="agenda-event-start" crop="end" flex="1"></label>
-                        </hbox>
-                        <label class="agenda-event-title" crop="end"></label>
-                    </vbox>
-                </hbox>
-            `)
+          <hbox class="agenda-container-box" flex="1">
+            <hbox>
+              <vbox>
+                <image class="agenda-calendar-image"></image>
+                <spacer flex="1"></spacer>
+              </vbox>
+            </hbox>
+            <vbox flex="1" class="agenda-description">
+              <hbox align="start">
+                <image class="agenda-multiDayEvent-image"></image>
+                <label class="agenda-event-start" crop="end" flex="1"></label>
+              </hbox>
+              <label class="agenda-event-title" crop="end"></label>
+            </vbox>
+          </hbox>
+        `)
       );
       this.mOccurrence = null;
       this.initializeAttributeInheritance();
     }
     setOccurrence(aItem, aPeriod) {
       this.mOccurrence = aItem;
       this.setAttribute("status", aItem.status);
       let dateFormatter = Cc["@mozilla.org/calendar/datetime-formatter;1"].getService(
--- a/calendar/base/content/calendar-editable-item.js
+++ b/calendar/base/content/calendar-editable-item.js
@@ -125,65 +125,65 @@
     }
 
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <vbox flex="1">
-                    <hbox>
-                        <box class="calendar-color-box"
-                             flex="1">
-                            <box class="calendar-event-selection"
-                                 orient="horizontal"
-                                 flex="1">
-                                <stack class="calendar-event-box-container"
-                                       flex="1">
-                                    <hbox class="calendar-event-details">
-                                        <vbox align="left"
-                                              flex="1">
-                                            <label class="event-name-label"
-                                                   crop="end"
-                                                   style="margin: 0;">
-                                            </label>
-                                            <textbox class="calendar-event-details-core title-desc"
-                                                     hidden="true"
-                                                     style="background: transparent !important;"
-                                                     wrap="true">
-                                            </textbox>
-                                            <label crop="end"
-                                                   class="calendar-event-details-core location-desc">
-                                            </label>
-                                            <spacer flex="1">
-                                            </spacer>
-                                        </vbox>
-                                        <stack>
-                                            <hbox class="calendar-category-box category-color-box calendar-event-selection"
-                                                  flex="1" pack="end">
-                                                <image class="calendar-category-box-gradient">
-                                                </image>
-                                            </hbox>
-                                            <hbox align="center">
-                                                <hbox class="alarm-icons-box"
-                                                      align="center">
-                                                </hbox>
-                                                    <image class="item-classification-box"
-                                                           pack="end">
-                                                </image>
-                                            </hbox>
-                                        </stack>
-                                    </hbox>
-                                </stack>
-                            </box>
-                        </box>
+          <vbox flex="1">
+            <hbox>
+              <box class="calendar-color-box"
+                   flex="1">
+                <box class="calendar-event-selection"
+                     orient="horizontal"
+                     flex="1">
+                  <stack class="calendar-event-box-container"
+                         flex="1">
+                    <hbox class="calendar-event-details">
+                      <vbox align="left"
+                            flex="1">
+                        <label class="event-name-label"
+                               crop="end"
+                               style="margin: 0;">
+                        </label>
+                        <textbox class="calendar-event-details-core title-desc"
+                                 hidden="true"
+                                 style="background: transparent !important;"
+                                 wrap="true">
+                        </textbox>
+                        <label crop="end"
+                               class="calendar-event-details-core location-desc">
+                        </label>
+                        <spacer flex="1">
+                        </spacer>
+                      </vbox>
+                      <stack>
+                        <hbox class="calendar-category-box category-color-box calendar-event-selection"
+                              flex="1" pack="end">
+                            <image class="calendar-category-box-gradient">
+                            </image>
+                        </hbox>
+                        <hbox align="center">
+                          <hbox class="alarm-icons-box"
+                                align="center">
+                          </hbox>
+                          <image class="item-classification-box"
+                                 pack="end">
+                          </image>
+                        </hbox>
+                      </stack>
                     </hbox>
-                </vbox>
-          `)
+                  </stack>
+                </box>
+              </box>
+            </hbox>
+          </vbox>
+        `)
       );
 
       // We have two event listeners for dragstart. This event listener is for the bubbling phase
       // where we are setting up the document.monthDragEvent which will be used in the event listener
       // in the capturing phase.
       this.addEventListener(
         "dragstart",
         event => {
--- a/calendar/base/content/calendar-event-column.js
+++ b/calendar/base/content/calendar-event-column.js
@@ -24,31 +24,34 @@
       };
     }
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <stack flex="1" class="multiday-column-box-stack">
-                    <box flex="1" class="multiday-column-bg-box"/>
-                    <box class="multiday-column-top-box" flex="1" equalsize="always" mousethrough="always"/>
-                    <box class="timeIndicator" mousethrough="always" hidden="true"/>
-                    <box flex="1" class="fgdragcontainer">
-                        <box class="fgdragspacer">
-                            <spacer flex="1"/>
-                            <label class="fgdragbox-label fgdragbox-startlabel"/>
-                        </box>
-                        <box class="fgdragbox"/>
-                        <label class="fgdragbox-label fgdragbox-endlabel"/>
-                    </box>
-                </stack>
-                <calendar-event-box hidden="true"/>
-            `)
+          <stack class="multiday-column-box-stack" flex="1">
+            <box class="multiday-column-bg-box" flex="1"/>
+            <box class="multiday-column-top-box"
+                 flex="1"
+                 equalsize="always"
+                 mousethrough="always"/>
+            <box class="timeIndicator" mousethrough="always" hidden="true"/>
+            <box class="fgdragcontainer" flex="1">
+              <box class="fgdragspacer">
+                <spacer flex="1"/>
+                <label class="fgdragbox-label fgdragbox-startlabel"/>
+              </box>
+              <box class="fgdragbox"/>
+              <label class="fgdragbox-label fgdragbox-endlabel"/>
+            </box>
+          </stack>
+          <calendar-event-box hidden="true"/>
+        `)
       );
 
       this.addEventListener("dblclick", event => {
         if (event.button != 0) {
           return;
         }
 
         if (this.calendarView.controller) {
--- a/calendar/base/content/calendar-menus.js
+++ b/calendar/base/content/calendar-menus.js
@@ -70,47 +70,47 @@
         return;
       }
       // this.hasConnected is set to true in super.connectedCallback
       super.connectedCallback();
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <menuitem class="percent-0-menuitem"
-                          type="checkbox"
-                          label="&progress.level.0;"
-                          accesskey="&progress.level.0.accesskey;"
-                          observes="calendar_percentComplete-0_command"
-                          command="calendar_percentComplete-0_command"/>
-                <menuitem class="percent-25-menuitem"
-                          type="checkbox"
-                          label="&progress.level.25;"
-                          accesskey="&progress.level.25.accesskey;"
-                          observes="calendar_percentComplete-25_command"
-                          command="calendar_percentComplete-25_command"/>
-                <menuitem class="percent-50-menuitem"
-                          type="checkbox"
-                          label="&progress.level.50;"
-                          accesskey="&progress.level.50.accesskey;"
-                          observes="calendar_percentComplete-50_command"
-                          command="calendar_percentComplete-50_command"/>
-                <menuitem class="percent-75-menuitem"
-                          type="checkbox"
-                          label="&progress.level.75;"
-                          accesskey="&progress.level.75.accesskey;"
-                          observes="calendar_percentComplete-75_command"
-                          command="calendar_percentComplete-75_command"/>
-                <menuitem class="percent-100-menuitem"
-                          type="checkbox"
-                          label="&progress.level.100;"
-                          accesskey="&progress.level.100.accesskey;"
-                          observes="calendar_percentComplete-100_command"
-                          command="calendar_percentComplete-100_command"/>
-                `,
+          <menuitem class="percent-0-menuitem"
+                    type="checkbox"
+                    label="&progress.level.0;"
+                    accesskey="&progress.level.0.accesskey;"
+                    observes="calendar_percentComplete-0_command"
+                    command="calendar_percentComplete-0_command"/>
+          <menuitem class="percent-25-menuitem"
+                    type="checkbox"
+                    label="&progress.level.25;"
+                    accesskey="&progress.level.25.accesskey;"
+                    observes="calendar_percentComplete-25_command"
+                    command="calendar_percentComplete-25_command"/>
+          <menuitem class="percent-50-menuitem"
+                    type="checkbox"
+                    label="&progress.level.50;"
+                    accesskey="&progress.level.50.accesskey;"
+                    observes="calendar_percentComplete-50_command"
+                    command="calendar_percentComplete-50_command"/>
+          <menuitem class="percent-75-menuitem"
+                    type="checkbox"
+                    label="&progress.level.75;"
+                    accesskey="&progress.level.75.accesskey;"
+                    observes="calendar_percentComplete-75_command"
+                    command="calendar_percentComplete-75_command"/>
+          <menuitem class="percent-100-menuitem"
+                    type="checkbox"
+                    label="&progress.level.100;"
+                    accesskey="&progress.level.100.accesskey;"
+                    observes="calendar_percentComplete-100_command"
+                    command="calendar_percentComplete-100_command"/>
+          `,
           ["chrome://calendar/locale/calendar.dtd"]
         )
       );
 
       this.addEventListener(
         "popupshowing",
         updateMenuItemsState.bind(null, this, "percentComplete"),
         true
@@ -134,41 +134,41 @@
         return;
       }
       // this.hasConnected is set to true in super.connectedCallback
       super.connectedCallback();
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <menuitem class="priority-0-menuitem"
-                          type="checkbox"
-                          label="&priority.level.none;"
-                          accesskey="&priority.level.none.accesskey;"
-                          command="calendar_priority-0_command"
-                          observes="calendar_priority-0_command"/>
-                <menuitem class="priority-9-menuitem"
-                          type="checkbox"
-                          label="&priority.level.low;"
-                          accesskey="&priority.level.low.accesskey;"
-                          command="calendar_priority-9_command"
-                          observes="calendar_priority-9_command"/>
-                <menuitem class="priority-5-menuitem"
-                          type="checkbox"
-                          label="&priority.level.normal;"
-                          accesskey="&priority.level.normal.accesskey;"
-                          command="calendar_priority-5_command"
-                          observes="calendar_priority-5_command"/>
-                <menuitem class="priority-1-menuitem"
-                          type="checkbox"
-                          label="&priority.level.high;"
-                          accesskey="&priority.level.high.accesskey;"
-                          command="calendar_priority-1_command"
-                          observes="calendar_priority-1_command"/>
-                `,
+          <menuitem class="priority-0-menuitem"
+                    type="checkbox"
+                    label="&priority.level.none;"
+                    accesskey="&priority.level.none.accesskey;"
+                    command="calendar_priority-0_command"
+                    observes="calendar_priority-0_command"/>
+          <menuitem class="priority-9-menuitem"
+                    type="checkbox"
+                    label="&priority.level.low;"
+                    accesskey="&priority.level.low.accesskey;"
+                    command="calendar_priority-9_command"
+                    observes="calendar_priority-9_command"/>
+          <menuitem class="priority-5-menuitem"
+                    type="checkbox"
+                    label="&priority.level.normal;"
+                    accesskey="&priority.level.normal.accesskey;"
+                    command="calendar_priority-5_command"
+                    observes="calendar_priority-5_command"/>
+          <menuitem class="priority-1-menuitem"
+                    type="checkbox"
+                    label="&priority.level.high;"
+                    accesskey="&priority.level.high.accesskey;"
+                    command="calendar_priority-1_command"
+                    observes="calendar_priority-1_command"/>
+          `,
           ["chrome://calendar/locale/calendar.dtd"]
         )
       );
 
       this.addEventListener(
         "popupshowing",
         updateMenuItemsState.bind(null, this, "priority"),
         true
@@ -192,49 +192,49 @@
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       this.hasConnected = true;
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <vbox class="panel-subview-body">
-                    <toolbarbutton class="percent-0-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&progress.level.0;"
-                                   accesskey="&progress.level.0.accesskey;"
-                                   observes="calendar_percentComplete-0_command"
-                                   command="calendar_percentComplete-0_command"/>
-                    <toolbarbutton class="percent-25-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&progress.level.25;"
-                                   accesskey="&progress.level.25.accesskey;"
-                                   observes="calendar_percentComplete-25_command"
-                                   command="calendar_percentComplete-25_command"/>
-                    <toolbarbutton class="percent-50-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&progress.level.50;"
-                                   accesskey="&progress.level.50.accesskey;"
-                                   observes="calendar_percentComplete-50_command"
-                                   command="calendar_percentComplete-50_command"/>
-                    <toolbarbutton class="percent-75-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&progress.level.75;"
-                                   accesskey="&progress.level.75.accesskey;"
-                                   observes="calendar_percentComplete-75_command"
-                                   command="calendar_percentComplete-75_command"/>
-                    <toolbarbutton class="percent-100-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&progress.level.100;"
-                                   accesskey="&progress.level.100.accesskey;"
-                                   observes="calendar_percentComplete-100_command"
-                                   command="calendar_percentComplete-100_command"/>
-                </vbox>
-                `,
+          <vbox class="panel-subview-body">
+            <toolbarbutton class="percent-0-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&progress.level.0;"
+                           accesskey="&progress.level.0.accesskey;"
+                           observes="calendar_percentComplete-0_command"
+                           command="calendar_percentComplete-0_command"/>
+            <toolbarbutton class="percent-25-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&progress.level.25;"
+                           accesskey="&progress.level.25.accesskey;"
+                           observes="calendar_percentComplete-25_command"
+                           command="calendar_percentComplete-25_command"/>
+            <toolbarbutton class="percent-50-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&progress.level.50;"
+                           accesskey="&progress.level.50.accesskey;"
+                           observes="calendar_percentComplete-50_command"
+                           command="calendar_percentComplete-50_command"/>
+            <toolbarbutton class="percent-75-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&progress.level.75;"
+                           accesskey="&progress.level.75.accesskey;"
+                           observes="calendar_percentComplete-75_command"
+                           command="calendar_percentComplete-75_command"/>
+            <toolbarbutton class="percent-100-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&progress.level.100;"
+                           accesskey="&progress.level.100.accesskey;"
+                           observes="calendar_percentComplete-100_command"
+                           command="calendar_percentComplete-100_command"/>
+          </vbox>
+          `,
           ["chrome://calendar/locale/calendar.dtd"]
         )
       );
 
       const body = this.querySelector(".panel-subview-body");
 
       this.addEventListener(
         "ViewShowing",
@@ -260,43 +260,43 @@
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       this.hasConnected = true;
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <vbox class="panel-subview-body">
-                    <toolbarbutton class="priority-0-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&priority.level.none;"
-                                   accesskey="&priority.level.none.accesskey;"
-                                   command="calendar_priority-0_command"
-                                   observes="calendar_priority-0_command"/>
-                    <toolbarbutton class="priority-9-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&priority.level.low;"
-                                   accesskey="&priority.level.low.accesskey;"
-                                   command="calendar_priority-9_command"
-                                   observes="calendar_priority-9_command"/>
-                    <toolbarbutton class="priority-5-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&priority.level.normal;"
-                                   accesskey="&priority.level.normal.accesskey;"
-                                   command="calendar_priority-5_command"
-                                   observes="calendar_priority-5_command"/>
-                    <toolbarbutton class="priority-1-menuitem subviewbutton subviewbutton-iconic"
-                                   type="checkbox"
-                                   label="&priority.level.high;"
-                                   accesskey="&priority.level.high.accesskey;"
-                                   command="calendar_priority-1_command"
-                                   observes="calendar_priority-1_command"/>
-                </vbox>
-                `,
+          <vbox class="panel-subview-body">
+            <toolbarbutton class="priority-0-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&priority.level.none;"
+                           accesskey="&priority.level.none.accesskey;"
+                           command="calendar_priority-0_command"
+                           observes="calendar_priority-0_command"/>
+            <toolbarbutton class="priority-9-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&priority.level.low;"
+                           accesskey="&priority.level.low.accesskey;"
+                           command="calendar_priority-9_command"
+                           observes="calendar_priority-9_command"/>
+            <toolbarbutton class="priority-5-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&priority.level.normal;"
+                           accesskey="&priority.level.normal.accesskey;"
+                           command="calendar_priority-5_command"
+                           observes="calendar_priority-5_command"/>
+            <toolbarbutton class="priority-1-menuitem subviewbutton subviewbutton-iconic"
+                           type="checkbox"
+                           label="&priority.level.high;"
+                           accesskey="&priority.level.high.accesskey;"
+                           command="calendar_priority-1_command"
+                           observes="calendar_priority-1_command"/>
+          </vbox>
+          `,
           ["chrome://calendar/locale/calendar.dtd"]
         )
       );
 
       const body = this.querySelector(".panel-subview-body");
 
       this.addEventListener("ViewShowing", updateMenuItemsState.bind(null, body, "priority"), true);
     }
--- a/calendar/base/content/calendar-month-base-view.js
+++ b/calendar/base/content/calendar-month-base-view.js
@@ -21,56 +21,57 @@ 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>`;
+        <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>
+        `;
 
       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>
-                </vbox>
-            `)
+          <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>
+          </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) {
           // In the month view, the only thing that can be scrolled
           // is the month the user is in. calendar-base-view takes care of
--- a/calendar/base/content/calendar-month-view.js
+++ b/calendar/base/content/calendar-month-view.js
@@ -278,67 +278,67 @@
       };
     }
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <vbox flex="1">
-                    <hbox>
-                        <box class="calendar-color-box"
-                             flex="1">
-                            <box class="calendar-event-selection"
-                                 orient="horizontal"
-                                 flex="1">
-                                <stack class="calendar-event-box-container"
-                                       flex="1">
-                                    <hbox class="calendar-event-details">
-                                        <vbox pack="center">
-                                            <image class="calendar-item-image"></image>
-                                        </vbox>
-                                        <label class="calendar-month-day-box-item-label"></label>
-                                        <vbox class="event-name-label-container"
-                                              align="left" flex="1">
-                                            <label class="event-name-label"
-                                                   crop="end"
-                                                   flex="1"
-                                                   style="margin: 0;">
-                                            </label>
-                                            <textbox class="plain calendar-event-name-textbox title-desc"
-                                                     crop="end"
-                                                     hidden="true"
-                                                     wrap="true">
-                                            </textbox>
-                                            <spacer flex="1"></spacer>
-                                        </vbox>
-                                        <stack class="category-box-stack">
-                                            <hbox class="calendar-category-box category-color-box calendar-event-selection"
-                                                  flex="1"
-                                                  pack="end">
-                                                <image class="calendar-category-box-gradient"></image>
-                                            </hbox>
-                                            <hbox align="center">
-                                                <hbox class="alarm-icons-box"
-                                                      pack="end"
-                                                      align="top">
-                                                </hbox>
-                                                <image class="item-classification-box"
-                                                       pack="end">
-                                                </image>
-                                            </hbox>
-                                        </stack>
-                                    </hbox>
-                                </stack>
-                            </box>
-                        </box>
+          <vbox flex="1">
+            <hbox>
+              <box class="calendar-color-box"
+                   flex="1">
+                <box class="calendar-event-selection"
+                     orient="horizontal"
+                     flex="1">
+                  <stack class="calendar-event-box-container"
+                         flex="1">
+                    <hbox class="calendar-event-details">
+                      <vbox pack="center">
+                          <image class="calendar-item-image"></image>
+                      </vbox>
+                      <label class="calendar-month-day-box-item-label"></label>
+                      <vbox class="event-name-label-container"
+                            align="left" flex="1">
+                        <label class="event-name-label"
+                               crop="end"
+                               flex="1"
+                               style="margin: 0;">
+                        </label>
+                        <textbox class="plain calendar-event-name-textbox title-desc"
+                                 crop="end"
+                                 hidden="true"
+                                 wrap="true">
+                        </textbox>
+                        <spacer flex="1"></spacer>
+                      </vbox>
+                      <stack class="category-box-stack">
+                        <hbox class="calendar-category-box category-color-box calendar-event-selection"
+                              flex="1"
+                              pack="end">
+                          <image class="calendar-category-box-gradient"></image>
+                        </hbox>
+                        <hbox align="center">
+                          <hbox class="alarm-icons-box"
+                                pack="end"
+                                align="top">
+                          </hbox>
+                          <image class="item-classification-box"
+                                 pack="end">
+                          </image>
+                        </hbox>
+                      </stack>
                     </hbox>
-                </vbox>
-            `)
+                  </stack>
+                </box>
+              </box>
+            </hbox>
+          </vbox>
+        `)
       );
 
       // We have two event listeners for dragstart. This event listener is for the bubbling phase
       // where we are setting up the document.monthDragEvent which will be used in the event listener
       // in the capturing phase which is set up in the calendar-editable-item.
       this.addEventListener(
         "dragstart",
         event => {
--- a/calendar/base/content/calendar-multiday-base-view.js
+++ b/calendar/base/content/calendar-multiday-base-view.js
@@ -229,43 +229,43 @@
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       // this.hasConnected is set to true via super.connectedCallback (below).
 
       // The orient of the calendar-time-bar should be the opposite of the parent.
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <box class="mainbox multiday-view-main-box"
-                     flex="1">
-                  <box class="labelbox multiday-view-label-box">
-                    <box class="labeltimespacer multiday-view-label-time-spacer"/>
-                    <box class="labeldaybox multiday-view-label-day-box"
-                         flex="1"
-                         equalsize="always"/>
-                    <box class="labelscrollbarspacer multiday-labelscrollbarspacer"/>
-                  </box>
-                  <box class="headerbox multiday-view-header-box">
-                    <box class="headertimespacer multiday-view-header-time-spacer"/>
-                    <box class="headerdaybox multiday-view-header-day-box"
-                         flex="1"
-                         equalsize="always"/>
-                    <box class="headerscrollbarspacer multiday-headerscrollbarspacer"/>
-                  </box>
-                  <scrollbox class="scrollbox"
-                             flex="1"
-                             onoverflow="adjustScrollBarSpacers();"
-                             onunderflow="adjustScrollBarSpacers();">
-                    <calendar-time-bar class="timebar"/>
-                    <box class="daybox multiday-view-day-box"
-                         flex="1"
-                         equalsize="always"/>
-                  </scrollbox>
-                </box>
-            `)
+          <box class="mainbox multiday-view-main-box"
+               flex="1">
+            <box class="labelbox multiday-view-label-box">
+              <box class="labeltimespacer multiday-view-label-time-spacer"/>
+              <box class="labeldaybox multiday-view-label-day-box"
+                   flex="1"
+                   equalsize="always"/>
+              <box class="labelscrollbarspacer multiday-labelscrollbarspacer"/>
+            </box>
+            <box class="headerbox multiday-view-header-box">
+              <box class="headertimespacer multiday-view-header-time-spacer"/>
+              <box class="headerdaybox multiday-view-header-day-box"
+                   flex="1"
+                   equalsize="always"/>
+              <box class="headerscrollbarspacer multiday-headerscrollbarspacer"/>
+            </box>
+            <scrollbox class="scrollbox"
+                       flex="1"
+                       onoverflow="adjustScrollBarSpacers();"
+                       onunderflow="adjustScrollBarSpacers();">
+              <calendar-time-bar class="timebar"/>
+              <box class="daybox multiday-view-day-box"
+                   flex="1"
+                   equalsize="always"/>
+            </scrollbox>
+          </box>
+        `)
       );
 
       this.initializeAttributeInheritance();
 
       // super.connectedCallback has to be called after the time bar is added to the DOM.
       super.connectedCallback();
 
       this.addEventListener("click", event => {
--- a/calendar/base/content/calendar-multiday-view.js
+++ b/calendar/base/content/calendar-multiday-view.js
@@ -267,74 +267,74 @@
 
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <box class="calendar-event-box"
-                     flex="1">
-                    <box class="calendar-color-box"
-                         flex="1">
-                        <box class="calendar-event-selection"
-                             orient="horizontal"
-                             flex="1">
-                            <stack class="calendar-event-box-container"
-                                   flex="1">
-                                <hbox class="calendar-event-details"
-                                      align="start">
-                                    <image class="calendar-item-image">
-                                    </image>
-                                    <vbox flex="1">
-                                        <label class="calendar-event-details-core event-name-label"
-                                               crop="end">
-                                        </label>
-                                        <textbox class="plain calendar-event-details-core calendar-event-name-textbox title-desc"
-                                                 hidden="true"
-                                                 wrap="true">
-                                        </textbox>
-                                        <label class="calendar-event-details-core location-desc"
-                                               crop="end">
-                                        </label>
-                                    </vbox>
-                                    <hbox class="alarm-icons-box"
-                                          align="top">
-                                    </hbox>
-                                    <image class="item-classification-box">
-                                    </image>
-                                </hbox>
-                                <stack mousethrough="always"
-                                       class="calendar-category-box-stack">
-                                    <hbox class="calendar-category-box category-color-box calendar-event-selection"
-                                          flex="1"
-                                          pack="end">
-                                        <image class="calendar-category-box-gradient">
-                                        </image>
-                                    </hbox>
-                                </stack>
-                                <box class="calendar-event-gripbar-container">
-                                    <calendar-event-gripbar class="calendar-event-box-grippy-top"
-                                                            mousethrough="never"
-                                                            whichside="start">
-                                    </calendar-event-gripbar>
-                                    <spacer mousethrough="always"
-                                            flex="1">
-                                    </spacer>
-                                    <calendar-event-gripbar class="calendar-event-box-grippy-bottom"
-                                                            mousethrough="never"
-                                                            whichside="end">
-                                    </calendar-event-gripbar>
-                                </box>
-                            </stack>
-                        </box>
-                    </box>
-                </box>
-            `)
+          <box class="calendar-event-box"
+               flex="1">
+            <box class="calendar-color-box"
+                 flex="1">
+              <box class="calendar-event-selection"
+                   orient="horizontal"
+                   flex="1">
+                <stack class="calendar-event-box-container"
+                       flex="1">
+                  <hbox class="calendar-event-details"
+                        align="start">
+                    <image class="calendar-item-image">
+                    </image>
+                    <vbox flex="1">
+                      <label class="calendar-event-details-core event-name-label"
+                             crop="end">
+                      </label>
+                      <textbox class="plain calendar-event-details-core calendar-event-name-textbox title-desc"
+                               hidden="true"
+                               wrap="true">
+                      </textbox>
+                      <label class="calendar-event-details-core location-desc"
+                             crop="end">
+                      </label>
+                    </vbox>
+                    <hbox class="alarm-icons-box"
+                          align="top">
+                    </hbox>
+                    <image class="item-classification-box">
+                    </image>
+                  </hbox>
+                  <stack mousethrough="always"
+                         class="calendar-category-box-stack">
+                    <hbox class="calendar-category-box category-color-box calendar-event-selection"
+                          flex="1"
+                          pack="end">
+                      <image class="calendar-category-box-gradient">
+                      </image>
+                    </hbox>
+                  </stack>
+                  <box class="calendar-event-gripbar-container">
+                    <calendar-event-gripbar class="calendar-event-box-grippy-top"
+                                            mousethrough="never"
+                                            whichside="start">
+                    </calendar-event-gripbar>
+                    <spacer mousethrough="always"
+                            flex="1">
+                    </spacer>
+                    <calendar-event-gripbar class="calendar-event-box-grippy-bottom"
+                                            mousethrough="never"
+                                            whichside="end">
+                    </calendar-event-gripbar>
+                  </box>
+                </stack>
+              </box>
+            </box>
+          </box>
+        `)
       );
 
       this.setAttribute("mousethrough", "never");
       this.setAttribute("tooltip", "itemTooltip");
 
       this.orient = this.getAttribute("orient");
       this.addEventNameTextboxListener();
       this.initializeAttributeInheritance();
--- a/calendar/base/content/calendar-task-tree.js
+++ b/calendar/base/content/calendar-task-tree.js
@@ -107,101 +107,101 @@
       super.connectedCallback();
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       this.hasConnected = true;
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <treecols>
-                  <treecol is="treecol-image" id="calendar-task-tree-col-completed"
-                           class="calendar-task-tree-col-completed"
-                           minwidth="19"
-                           fixed="true"
-                           cycler="true"
-                           sortKey="completedDate"
-                           itemproperty="completed"
-                           label="&calendar.unifinder.tree.done.label;"
-                           tooltiptext="&calendar.unifinder.tree.done.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="2"/>
-                  <treecol is="treecol-image" id="calendar-task-tree-col-priority"
-                           class="calendar-task-tree-col-priority"
-                           minwidth="17"
-                           fixed="true"
-                           itemproperty="priority"
-                           label="&calendar.unifinder.tree.priority.label;"
-                           tooltiptext="&calendar.unifinder.tree.priority.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="4"/>
-                  <treecol class="calendar-task-tree-col-title"
-                           itemproperty="title"
-                           flex="1"
-                           label="&calendar.unifinder.tree.title.label;"
-                           tooltiptext="&calendar.unifinder.tree.title.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="6"/>
-                  <treecol class="calendar-task-tree-col-entrydate"
-                           itemproperty="entryDate"
-                           flex="1"
-                           label="&calendar.unifinder.tree.startdate.label;"
-                           tooltiptext="&calendar.unifinder.tree.startdate.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="8"/>
-                  <treecol class="calendar-task-tree-col-duedate"
-                           itemproperty="dueDate"
-                           flex="1"
-                           label="&calendar.unifinder.tree.duedate.label;"
-                           tooltiptext="&calendar.unifinder.tree.duedate.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="10"/>
-                  <treecol class="calendar-task-tree-col-duration"
-                           itemproperty="duration"
-                           sortKey="dueDate"
-                           flex="1"
-                           label="&calendar.unifinder.tree.duration.label;"
-                           tooltiptext="&calendar.unifinder.tree.duration.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="12"/>
-                  <treecol class="calendar-task-tree-col-completeddate"
-                           itemproperty="completedDate"
-                           flex="1"
-                           label="&calendar.unifinder.tree.completeddate.label;"
-                           tooltiptext="&calendar.unifinder.tree.completeddate.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="14"/>
-                  <treecol class="calendar-task-tree-col-percentcomplete"
-                           itemproperty="percentComplete"
-                           flex="1"
-                           minwidth="40"
-                           label="&calendar.unifinder.tree.percentcomplete.label;"
-                           tooltiptext="&calendar.unifinder.tree.percentcomplete.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="16"/>
-                  <treecol class="calendar-task-tree-col-categories"
-                           itemproperty="categories"
-                           flex="1"
-                           label="&calendar.unifinder.tree.categories.label;"
-                           tooltiptext="&calendar.unifinder.tree.categories.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="18"/>
-                  <treecol class="calendar-task-tree-col-location"
-                           itemproperty="location"
-                           flex="1"
-                           label="&calendar.unifinder.tree.location.label;"
-                           tooltiptext="&calendar.unifinder.tree.location.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="20"/>
-                  <treecol class="calendar-task-tree-col-status"
-                           itemproperty="status"
-                           flex="1"
-                           label="&calendar.unifinder.tree.status.label;"
-                           tooltiptext="&calendar.unifinder.tree.status.tooltip2;"/>
-                  <splitter class="tree-splitter" ordinal="22"/>
-                  <treecol class="calendar-task-tree-col-calendar"
-                           itemproperty="calendar"
-                           flex="1"
-                           label="&calendar.unifinder.tree.calendarname.label;"
-                           tooltiptext="&calendar.unifinder.tree.calendarname.tooltip2;"/>
-                </treecols>
-                <treechildren class="calendar-task-treechildren"
-                              tooltip="taskTreeTooltip"
-                              ondblclick="mTreeView.onDoubleClick(event)"/>
-                `,
+          <treecols>
+            <treecol is="treecol-image" id="calendar-task-tree-col-completed"
+                     class="calendar-task-tree-col-completed"
+                     minwidth="19"
+                     fixed="true"
+                     cycler="true"
+                     sortKey="completedDate"
+                     itemproperty="completed"
+                     label="&calendar.unifinder.tree.done.label;"
+                     tooltiptext="&calendar.unifinder.tree.done.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="2"/>
+            <treecol is="treecol-image" id="calendar-task-tree-col-priority"
+                     class="calendar-task-tree-col-priority"
+                     minwidth="17"
+                     fixed="true"
+                     itemproperty="priority"
+                     label="&calendar.unifinder.tree.priority.label;"
+                     tooltiptext="&calendar.unifinder.tree.priority.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="4"/>
+            <treecol class="calendar-task-tree-col-title"
+                     itemproperty="title"
+                     flex="1"
+                     label="&calendar.unifinder.tree.title.label;"
+                     tooltiptext="&calendar.unifinder.tree.title.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="6"/>
+            <treecol class="calendar-task-tree-col-entrydate"
+                     itemproperty="entryDate"
+                     flex="1"
+                     label="&calendar.unifinder.tree.startdate.label;"
+                     tooltiptext="&calendar.unifinder.tree.startdate.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="8"/>
+            <treecol class="calendar-task-tree-col-duedate"
+                     itemproperty="dueDate"
+                     flex="1"
+                     label="&calendar.unifinder.tree.duedate.label;"
+                     tooltiptext="&calendar.unifinder.tree.duedate.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="10"/>
+            <treecol class="calendar-task-tree-col-duration"
+                     itemproperty="duration"
+                     sortKey="dueDate"
+                     flex="1"
+                     label="&calendar.unifinder.tree.duration.label;"
+                     tooltiptext="&calendar.unifinder.tree.duration.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="12"/>
+            <treecol class="calendar-task-tree-col-completeddate"
+                     itemproperty="completedDate"
+                     flex="1"
+                     label="&calendar.unifinder.tree.completeddate.label;"
+                     tooltiptext="&calendar.unifinder.tree.completeddate.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="14"/>
+            <treecol class="calendar-task-tree-col-percentcomplete"
+                     itemproperty="percentComplete"
+                     flex="1"
+                     minwidth="40"
+                     label="&calendar.unifinder.tree.percentcomplete.label;"
+                     tooltiptext="&calendar.unifinder.tree.percentcomplete.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="16"/>
+            <treecol class="calendar-task-tree-col-categories"
+                     itemproperty="categories"
+                     flex="1"
+                     label="&calendar.unifinder.tree.categories.label;"
+                     tooltiptext="&calendar.unifinder.tree.categories.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="18"/>
+            <treecol class="calendar-task-tree-col-location"
+                     itemproperty="location"
+                     flex="1"
+                     label="&calendar.unifinder.tree.location.label;"
+                     tooltiptext="&calendar.unifinder.tree.location.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="20"/>
+            <treecol class="calendar-task-tree-col-status"
+                     itemproperty="status"
+                     flex="1"
+                     label="&calendar.unifinder.tree.status.label;"
+                     tooltiptext="&calendar.unifinder.tree.status.tooltip2;"/>
+            <splitter class="tree-splitter" ordinal="22"/>
+            <treecol class="calendar-task-tree-col-calendar"
+                     itemproperty="calendar"
+                     flex="1"
+                     label="&calendar.unifinder.tree.calendarname.label;"
+                     tooltiptext="&calendar.unifinder.tree.calendarname.tooltip2;"/>
+          </treecols>
+          <treechildren class="calendar-task-treechildren"
+                        tooltip="taskTreeTooltip"
+                        ondblclick="mTreeView.onDoubleClick(event)"/>
+          `,
           ["chrome://calendar/locale/global.dtd", "chrome://calendar/locale/calendar.dtd"]
         )
       );
 
       this.classList.add("calendar-task-tree");
       // TODO: enableColumnDrag="false" does not seem to prevent dragging columns, remove?
       this.setAttribute("enableColumnDrag", "false");
       this.setAttribute("keepcurrentinview", "true");
--- a/calendar/base/content/dialogs/calendar-event-dialog-attendees-custom-elements.js
+++ b/calendar/base/content/dialogs/calendar-event-dialog-attendees-custom-elements.js
@@ -2231,25 +2231,25 @@
 
     connectedCallback() {
       if (!this.hasChildNodes() || !this.delayConnectedCallback()) {
         // The width of the second inner box is set dynamically to ensure that
         // the outer scrollbox is at least as wide as the free/busy grid.
         // Otherwise it won't scroll properly.
         this.appendChild(
           MozXULElement.parseXULToFragment(`
-                <scrollbox width="0" orient="horizontal" flex="1">
-                    <box class="selection-bar">
-                        <box class="selection-bar-left"></box>
-                        <spacer class="selection-bar-spacer" flex="1"></spacer>
-                        <box class="selection-bar-right"></box>
-                    </box>
-                    <box class="selection-padding"/>
-                </scrollbox>
-            `)
+            <scrollbox width="0" orient="horizontal" flex="1">
+              <box class="selection-bar">
+                <box class="selection-bar-left"></box>
+                <spacer class="selection-bar-spacer" flex="1"></spacer>
+                <box class="selection-bar-right"></box>
+              </box>
+              <box class="selection-padding"/>
+            </scrollbox>
+          `)
         );
       }
 
       this.initTimeRange();
 
       // The basedate is the date/time from which the display of the timebar starts. The range is
       // the number of days we should be able to show. the start- and enddate is the time the
       // event is scheduled for.
--- a/calendar/base/content/dialogs/calendar-invitations-dialog.js
+++ b/calendar/base/content/dialogs/calendar-invitations-dialog.js
@@ -35,43 +35,43 @@ var { cal } = ChromeUtils.import("resour
         return;
       }
 
       this.setAttribute("is", "calendar-invitations-richlistitem");
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <hbox align="start" flex="1">
+          <hbox align="start" flex="1">
             <image class="calendar-invitations-richlistitem-icon"/>
             <vbox flex="1">
-                <label class="calendar-invitations-richlistitem-title" crop="end"/>
-                <label class="calendar-invitations-richlistitem-date" crop="end"/>
-                <label class="calendar-invitations-richlistitem-recurrence" crop="end"/>
-                <label class="calendar-invitations-richlistitem-location" crop="end"/>
-                <label class="calendar-invitations-richlistitem-organizer" crop="end"/>
-                <label class="calendar-invitations-richlistitem-attendee" crop="end"/>
-                <label class="calendar-invitations-richlistitem-spacer" value="" hidden="true"/>
+              <label class="calendar-invitations-richlistitem-title" crop="end"/>
+              <label class="calendar-invitations-richlistitem-date" crop="end"/>
+              <label class="calendar-invitations-richlistitem-recurrence" crop="end"/>
+              <label class="calendar-invitations-richlistitem-location" crop="end"/>
+              <label class="calendar-invitations-richlistitem-organizer" crop="end"/>
+              <label class="calendar-invitations-richlistitem-attendee" crop="end"/>
+              <label class="calendar-invitations-richlistitem-spacer" value="" hidden="true"/>
             </vbox>
             <vbox>
-                <button group="${this.getAttribute("itemId")}"
-                        type="radio"
-                        class="calendar-invitations-richlistitem-accept-button
-                        calendar-invitations-richlistitem-button"
-                        label="&calendar.invitations.list.accept.button.label;"
-                        oncommand="accept();"/>
-                <button group="${this.getAttribute("itemId")}"
-                        type="radio"
-                        class="calendar-invitations-richlistitem-decline-button
-                        calendar-invitations-richlistitem-button"
-                        label="&calendar.invitations.list.decline.button.label;"
-                        oncommand="decline();"/>
+              <button group="${this.getAttribute("itemId")}"
+                      type="radio"
+                      class="calendar-invitations-richlistitem-accept-button
+                      calendar-invitations-richlistitem-button"
+                      label="&calendar.invitations.list.accept.button.label;"
+                      oncommand="accept();"/>
+              <button group="${this.getAttribute("itemId")}"
+                      type="radio"
+                      class="calendar-invitations-richlistitem-decline-button
+                      calendar-invitations-richlistitem-button"
+                      label="&calendar.invitations.list.decline.button.label;"
+                      oncommand="decline();"/>
             </vbox>
-        </hbox>
-        `,
+          </hbox>
+          `,
           ["chrome://calendar/locale/calendar-invitations-dialog.dtd"]
         )
       );
     }
 
     set calendarItem(val) {
       this.setCalendarItem(val);
       return val;
--- a/calendar/base/content/widgets/calendar-alarm-widget.js
+++ b/calendar/base/content/widgets/calendar-alarm-widget.js
@@ -18,50 +18,50 @@
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       this.hasConnected = true;
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <vbox pack="start">
-                  <image class="alarm-calendar-image"/>
-                </vbox>
-                <vbox flex="1">
-                  <label class="alarm-title-label" crop="end"/>
-                  <vbox class="additional-information-box">
-                    <label class="alarm-date-label"/>
-                    <hbox>
-                      <label class="alarm-location-label"/>
-                      <description class="alarm-location-description"
-                                   crop="end"
-                                   flex="1"/>
-                    </hbox>
-                    <hbox pack="start">
-                      <label class="text-link alarm-details-label"
-                             value="&calendar.alarm.details.label;"
-                             onclick="showDetails(event)"
-                             onkeypress="showDetails(event)"/>
-                    </hbox>
-                  </vbox>
-                </vbox>
-                <spacer flex="1"/>
-                <label class="alarm-relative-date-label"/>
-                <vbox class="alarm-action-buttons" pack="center">
-                  <button class="alarm-snooze-button"
-                          type="menu"
-                          label="&calendar.alarm.snoozefor.label;">
-                    <menupopup is="calendar-snooze-popup" ignorekeys="true"/>
-                  </button>
-                  <button class="alarm-dismiss-button"
-                          label="&calendar.alarm.dismiss.label;"
-                          oncommand="dismissAlarm()"/>
-                </vbox>
-                `,
+          <vbox pack="start">
+            <image class="alarm-calendar-image"/>
+          </vbox>
+          <vbox flex="1">
+            <label class="alarm-title-label" crop="end"/>
+            <vbox class="additional-information-box">
+              <label class="alarm-date-label"/>
+              <hbox>
+                <label class="alarm-location-label"/>
+                <description class="alarm-location-description"
+                             crop="end"
+                             flex="1"/>
+              </hbox>
+              <hbox pack="start">
+                <label class="text-link alarm-details-label"
+                       value="&calendar.alarm.details.label;"
+                       onclick="showDetails(event)"
+                       onkeypress="showDetails(event)"/>
+              </hbox>
+            </vbox>
+          </vbox>
+          <spacer flex="1"/>
+          <label class="alarm-relative-date-label"/>
+          <vbox class="alarm-action-buttons" pack="center">
+            <button class="alarm-snooze-button"
+                    type="menu"
+                    label="&calendar.alarm.snoozefor.label;">
+              <menupopup is="calendar-snooze-popup" ignorekeys="true"/>
+            </button>
+            <button class="alarm-dismiss-button"
+                    label="&calendar.alarm.dismiss.label;"
+                    oncommand="dismissAlarm()"/>
+          </vbox>
+          `,
           ["chrome://calendar/locale/global.dtd", "chrome://calendar/locale/calendar.dtd"]
         )
       );
       this.mItem = null;
       this.mAlarm = null;
     }
 
     set item(val) {
@@ -224,61 +224,61 @@
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasConnected) {
         return;
       }
       this.hasConnected = true;
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                <menuitem label="&calendar.alarm.snooze.5minutes.label;"
-                          value="5"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.10minutes.label;"
-                          value="10"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.15minutes.label;"
-                          value="15"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.30minutes.label;"
-                          value="30"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.45minutes.label;"
-                          value="45"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.1hour.label;"
-                          value="60"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.2hours.label;"
-                          value="120"
-                          oncommand="snoozeItem(event)"/>
-                <menuitem label="&calendar.alarm.snooze.1day.label;"
-                          value="1440"
-                          oncommand="snoozeItem(event)"/>
-                <menuseparator/>
-                <hbox class="snooze-options-box">
-                  <html:input type="number" class="size3 snooze-value-textbox"
-                              oninput="updateUIText()"
-                              onselect="updateUIText()"/>
-                  <menulist class="snooze-unit-menulist" allowevents="true">
-                    <menupopup class="snooze-unit-menupopup menulist-menupopup"
-                               position="after_start"
-                               ignorekeys="true">
-                      <menuitem closemenu="single" class="unit-menuitem" value="1"></menuitem>
-                      <menuitem closemenu="single" class="unit-menuitem" value="60"></menuitem>
-                      <menuitem closemenu="single" class="unit-menuitem" value="1440"></menuitem>
-                    </menupopup>
-                  </menulist>
-                  <toolbarbutton class="snooze-popup-button snooze-popup-ok-button"
-                                 oncommand="snoozeOk()"/>
-                  <toolbarbutton class="snooze-popup-button snooze-popup-cancel-button"
-                                 aria-label="&calendar.alarm.snooze.cancel;"
-                                 oncommand="snoozeCancel()"/>
-                </hbox>
-                `,
+          <menuitem label="&calendar.alarm.snooze.5minutes.label;"
+                    value="5"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.10minutes.label;"
+                    value="10"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.15minutes.label;"
+                    value="15"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.30minutes.label;"
+                    value="30"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.45minutes.label;"
+                    value="45"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.1hour.label;"
+                    value="60"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.2hours.label;"
+                    value="120"
+                    oncommand="snoozeItem(event)"/>
+          <menuitem label="&calendar.alarm.snooze.1day.label;"
+                    value="1440"
+                    oncommand="snoozeItem(event)"/>
+          <menuseparator/>
+          <hbox class="snooze-options-box">
+            <html:input type="number" class="size3 snooze-value-textbox"
+                        oninput="updateUIText()"
+                        onselect="updateUIText()"/>
+            <menulist class="snooze-unit-menulist" allowevents="true">
+              <menupopup class="snooze-unit-menupopup menulist-menupopup"
+                         position="after_start"
+                         ignorekeys="true">
+                <menuitem closemenu="single" class="unit-menuitem" value="1"></menuitem>
+                <menuitem closemenu="single" class="unit-menuitem" value="60"></menuitem>
+                <menuitem closemenu="single" class="unit-menuitem" value="1440"></menuitem>
+              </menupopup>
+            </menulist>
+            <toolbarbutton class="snooze-popup-button snooze-popup-ok-button"
+                           oncommand="snoozeOk()"/>
+            <toolbarbutton class="snooze-popup-button snooze-popup-cancel-button"
+                           aria-label="&calendar.alarm.snooze.cancel;"
+                           oncommand="snoozeCancel()"/>
+          </hbox>
+          `,
           ["chrome://calendar/locale/global.dtd", "chrome://calendar/locale/calendar.dtd"]
         )
       );
       const defaultSnoozeLength = Services.prefs.getIntPref(
         "calendar.alarms.defaultsnoozelength",
         0
       );
       const snoozeLength = defaultSnoozeLength <= 0 ? 5 : defaultSnoozeLength;
--- a/calendar/base/content/widgets/calendar-minimonth.js
+++ b/calendar/base/content/widgets/calendar-minimonth.js
@@ -45,95 +45,95 @@
     }
 
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
       const minimonthHeader = `
-                <hbox class="minimonth-header minimonth-month-box">
-                  <toolbarbutton class="months-back-button minimonth-nav-btns"
-                                 dir="-1"
-                                 oncommand="this.kMinimonth.advanceMonth(parseInt(this.getAttribute('dir'), 10))"
-                                 tooltiptext="&onemonthbackward.tooltip;"></toolbarbutton>
-                  <deck class="monthheader minimonth-month-name"
-                        tabindex="-1">
-                    <text value="&month.1.name;"></text>
-                    <text value="&month.2.name;"></text>
-                    <text value="&month.3.name;"></text>
-                    <text value="&month.4.name;"></text>
-                    <text value="&month.5.name;"></text>
-                    <text value="&month.6.name;"></text>
-                    <text value="&month.7.name;"></text>
-                    <text value="&month.8.name;"></text>
-                    <text value="&month.9.name;"></text>
-                    <text value="&month.10.name;"></text>
-                    <text value="&month.11.name;"></text>
-                    <text value="&month.12.name;"></text>
-                  </deck>
-                  <toolbarbutton class="months-forward-button minimonth-nav-btns"
-                                 dir="1"
-                                 oncommand="this.kMinimonth.advanceMonth(parseInt(this.getAttribute('dir'), 10))"
-                                 tooltiptext="&onemonthforward.tooltip;"></toolbarbutton>
-                  <toolbarbutton class="years-back-button minimonth-nav-btns"
-                                 dir="-1"
-                                 oncommand="this.kMinimonth.advanceYear(parseInt(this.getAttribute('dir'), 10))"
-                                 tooltiptext="&oneyearbackward.tooltip;"></toolbarbutton>
-                  <text class="yearcell minimonth-year-name"
-                        tabindex="-1"></text>
-                  <toolbarbutton class="years-forward-button minimonth-nav-btns"
-                                 dir="1"
-                                 oncommand="this.kMinimonth.advanceYear(parseInt(this.getAttribute('dir'), 10))"
-                                 tooltiptext="&oneyearforward.tooltip;"></toolbarbutton>
-                  <spacer flex="1"></spacer>
-                  <toolbarbutton class="today-button minimonth-nav-btns"
-                                 dir="0"
-                                 oncommand="this.kMinimonth.value = new Date();"
-                                 tooltiptext="&showToday.tooltip;"></toolbarbutton>
-                </hbox>
-            `;
+        <hbox class="minimonth-header minimonth-month-box">
+          <toolbarbutton class="months-back-button minimonth-nav-btns"
+                         dir="-1"
+                         oncommand="this.kMinimonth.advanceMonth(parseInt(this.getAttribute('dir'), 10))"
+                         tooltiptext="&onemonthbackward.tooltip;"></toolbarbutton>
+          <deck class="monthheader minimonth-month-name"
+                tabindex="-1">
+            <text value="&month.1.name;"></text>
+            <text value="&month.2.name;"></text>
+            <text value="&month.3.name;"></text>
+            <text value="&month.4.name;"></text>
+            <text value="&month.5.name;"></text>
+            <text value="&month.6.name;"></text>
+            <text value="&month.7.name;"></text>
+            <text value="&month.8.name;"></text>
+            <text value="&month.9.name;"></text>
+            <text value="&month.10.name;"></text>
+            <text value="&month.11.name;"></text>
+            <text value="&month.12.name;"></text>
+          </deck>
+          <toolbarbutton class="months-forward-button minimonth-nav-btns"
+                         dir="1"
+                         oncommand="this.kMinimonth.advanceMonth(parseInt(this.getAttribute('dir'), 10))"
+                         tooltiptext="&onemonthforward.tooltip;"></toolbarbutton>
+          <toolbarbutton class="years-back-button minimonth-nav-btns"
+                         dir="-1"
+                         oncommand="this.kMinimonth.advanceYear(parseInt(this.getAttribute('dir'), 10))"
+                         tooltiptext="&oneyearbackward.tooltip;"></toolbarbutton>
+          <text class="yearcell minimonth-year-name"
+                tabindex="-1"></text>
+          <toolbarbutton class="years-forward-button minimonth-nav-btns"
+                         dir="1"
+                         oncommand="this.kMinimonth.advanceYear(parseInt(this.getAttribute('dir'), 10))"
+                         tooltiptext="&oneyearforward.tooltip;"></toolbarbutton>
+          <spacer flex="1"></spacer>
+          <toolbarbutton class="today-button minimonth-nav-btns"
+                         dir="0"
+                         oncommand="this.kMinimonth.value = new Date();"
+                         tooltiptext="&showToday.tooltip;"></toolbarbutton>
+        </hbox>
+      `;
 
       const minimonthWeekRow = `
-                <html:tr class="minimonth-row-body">
-                  <html:th class="minimonth-week" scope="row"></html:th>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                  <html:td class="minimonth-day" tabindex="-1"></html:td>
-                </html:tr>
-            `;
+        <html:tr class="minimonth-row-body">
+          <html:th class="minimonth-week" scope="row"></html:th>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+          <html:td class="minimonth-day" tabindex="-1"></html:td>
+        </html:tr>
+      `;
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-                ${minimonthHeader}
-                <html:div class="minimonth-readonly-header minimonth-month-box"></html:div>
-                <html:table class="minimonth-calendar minimonth-cal-box">
-                  <html:tr class="minimonth-row-head">
-                    <html:th class="minimonth-row-header-week" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                    <html:th class="minimonth-row-header" scope="col"></html:th>
-                  </html:tr>
-                  ${minimonthWeekRow}
-                  ${minimonthWeekRow}
-                  ${minimonthWeekRow}
-                  ${minimonthWeekRow}
-                  ${minimonthWeekRow}
-                  ${minimonthWeekRow}
-                </html:table>
-            `,
+          ${minimonthHeader}
+          <html:div class="minimonth-readonly-header minimonth-month-box"></html:div>
+          <html:table class="minimonth-calendar minimonth-cal-box">
+            <html:tr class="minimonth-row-head">
+              <html:th class="minimonth-row-header-week" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+              <html:th class="minimonth-row-header" scope="col"></html:th>
+            </html:tr>
+            ${minimonthWeekRow}
+            ${minimonthWeekRow}
+            ${minimonthWeekRow}
+            ${minimonthWeekRow}
+            ${minimonthWeekRow}
+            ${minimonthWeekRow}
+          </html:table>
+          `,
           ["chrome://calendar/locale/global.dtd", "chrome://global/locale/global.dtd"]
         )
       );
       this.initializeAttributeInheritance();
       this.setAttribute("orient", "vertical");
 
       // Set up header buttons.
       const kMinimonth = this.closest("calendar-minimonth");
--- a/calendar/base/content/widgets/calendar-subscriptions-list.js
+++ b/calendar/base/content/widgets/calendar-subscriptions-list.js
@@ -20,21 +20,21 @@
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
       this.setAttribute("is", "calendar-subscriptions-richlistitem");
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-                <hbox flex="1" align="center">
-                    <checkbox class="calendar-subscriptions-richlistitem-checkbox"></checkbox>
-                    <label class="subscription-name" flex="1" crop="end"></label>
-                </hbox>
-            `)
+          <hbox flex="1" align="center">
+            <checkbox class="calendar-subscriptions-richlistitem-checkbox"></checkbox>
+            <label class="subscription-name" flex="1" crop="end"></label>
+          </hbox>
+        `)
       );
 
       this.mCalendar = null;
       this.mSubscribed = false;
     }
 
     set calendar(val) {
       this.setCalendar(val);
--- a/calendar/resources/content/datetimepickers/datetimepickers.js
+++ b/calendar/resources/content/datetimepickers/datetimepickers.js
@@ -223,171 +223,171 @@
    *
    * @extends MozXULElement
    */
   class MozTimepickerGrids extends MozXULElement {
     constructor() {
       super();
 
       this.content = MozXULElement.parseXULToFragment(`
-                <vbox class="time-picker-grids">
-                  <vbox class="time-picker-hour-grid" format12hours="false">
-                    <hbox flex="1" class="timepicker-topRow-hour-class">
-                      <timepicker-hour class="time-picker-hour-box-class" value="0" label="0"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="1" label="1"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="2" label="2"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="3" label="3"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="4" label="4"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="5" label="5"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="6" label="6"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="7" label="7"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="8" label="8"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="9" label="9"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="10" label="10"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="11" label="11"></timepicker-hour>
-                      <hbox class="timepicker-amLabelBox-class amLabelBox" hidden="true">
-                        <label></label>
-                      </hbox>
-                    </hbox>
-                    <hbox flex="1" class="timepicker-bottomRow-hour-class">
-                      <timepicker-hour class="time-picker-hour-box-class" value="12" label="12"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="13" label="13"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="14" label="14"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="15" label="15"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="16" label="16"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="17" label="17"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="18" label="18"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="19" label="19"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="20" label="20"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="21" label="21"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="22" label="22"></timepicker-hour>
-                      <timepicker-hour class="time-picker-hour-box-class" value="23" label="23"></timepicker-hour>
-                      <hbox class="pmLabelBox timepicker-pmLabelBox-class" hidden="true">
-                        <label></label>
-                      </hbox>
-                    </hbox>
-                  </vbox>
-                  <vbox class="time-picker-five-minute-grid-box">
-                    <vbox class="time-picker-five-minute-grid">
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-five-minute-class" value="0" label=":00" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="5" label=":05" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="10" label=":10" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="15" label=":15" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="20" label=":20" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="25" label=":25" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-five-minute-class" value="30" label=":30" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="35" label=":35" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="40" label=":40" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="45" label=":45" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="50" label=":50" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-five-minute-class" value="55" label=":55" flex="1"></timepicker-minute>
-                      </hbox>
-                    </vbox>
-                    <hbox class="time-picker-minutes-bottom">
-                      <spacer flex="1"></spacer>
-                      <label class="time-picker-more-control-label" value="»" onclick="clickMore()"></label>
-                    </hbox>
-                  </vbox>
-                  <vbox class="time-picker-one-minute-grid-box" flex="1" hidden="true">
-                    <vbox class="time-picker-one-minute-grid" flex="1">
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="0" label=":00" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="1" label=":01" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="2" label=":02" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="3" label=":03" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="4" label=":04" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="5" label=":05" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="6" label=":06" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="7" label=":07" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="8" label=":08" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="9" label=":09" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="10" label=":10" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="11" label=":11" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="12" label=":12" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="13" label=":13" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="14" label=":14" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="15" label=":15" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="16" label=":16" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="17" label=":17" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="18" label=":18" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="19" label=":19" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="20" label=":20" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="21" label=":21" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="22" label=":22" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="23" label=":23" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="24" label=":24" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="25" label=":25" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="26" label=":26" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="27" label=":27" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="28" label=":28" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="29" label=":29" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="30" label=":30" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="31" label=":31" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="32" label=":32" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="33" label=":33" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="34" label=":34" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="35" label=":35" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="36" label=":36" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="37" label=":37" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="38" label=":38" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="39" label=":39" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="40" label=":40" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="41" label=":41" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="42" label=":42" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="43" label=":43" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="44" label=":44" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="45" label=":45" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="46" label=":46" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="47" label=":47" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="48" label=":48" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="49" label=":49" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="50" label=":50" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="51" label=":51" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="52" label=":52" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="53" label=":53" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="54" label=":54" flex="1"></timepicker-minute>
-                      </hbox>
-                      <hbox flex="1">
-                        <timepicker-minute class="time-picker-one-minute-class" value="55" label=":55" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="56" label=":56" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="57" label=":57" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="58" label=":58" flex="1"></timepicker-minute>
-                        <timepicker-minute class="time-picker-one-minute-class" value="59" label=":59" flex="1"></timepicker-minute>
-                      </hbox>
-                    </vbox>
-                    <hbox class="time-picker-minutes-bottom">
-                      <spacer flex="1"></spacer>
-                      <label class="time-picker-more-control-label" value="«" onclick="clickLess()"></label>
-                    </hbox>
-                  </vbox>
-                </vbox>
-                `);
+        <vbox class="time-picker-grids">
+          <vbox class="time-picker-hour-grid" format12hours="false">
+            <hbox flex="1" class="timepicker-topRow-hour-class">
+              <timepicker-hour class="time-picker-hour-box-class" value="0" label="0"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="1" label="1"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="2" label="2"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="3" label="3"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="4" label="4"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="5" label="5"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="6" label="6"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="7" label="7"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="8" label="8"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="9" label="9"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="10" label="10"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="11" label="11"></timepicker-hour>
+              <hbox class="timepicker-amLabelBox-class amLabelBox" hidden="true">
+                <label></label>
+              </hbox>
+            </hbox>
+            <hbox flex="1" class="timepicker-bottomRow-hour-class">
+              <timepicker-hour class="time-picker-hour-box-class" value="12" label="12"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="13" label="13"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="14" label="14"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="15" label="15"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="16" label="16"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="17" label="17"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="18" label="18"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="19" label="19"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="20" label="20"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="21" label="21"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="22" label="22"></timepicker-hour>
+              <timepicker-hour class="time-picker-hour-box-class" value="23" label="23"></timepicker-hour>
+              <hbox class="pmLabelBox timepicker-pmLabelBox-class" hidden="true">
+                <label></label>
+              </hbox>
+            </hbox>
+          </vbox>
+          <vbox class="time-picker-five-minute-grid-box">
+            <vbox class="time-picker-five-minute-grid">
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-five-minute-class" value="0" label=":00" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="5" label=":05" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="10" label=":10" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="15" label=":15" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="20" label=":20" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="25" label=":25" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-five-minute-class" value="30" label=":30" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="35" label=":35" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="40" label=":40" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="45" label=":45" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="50" label=":50" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-five-minute-class" value="55" label=":55" flex="1"></timepicker-minute>
+              </hbox>
+            </vbox>
+            <hbox class="time-picker-minutes-bottom">
+              <spacer flex="1"></spacer>
+              <label class="time-picker-more-control-label" value="»" onclick="clickMore()"></label>
+            </hbox>
+          </vbox>
+          <vbox class="time-picker-one-minute-grid-box" flex="1" hidden="true">
+            <vbox class="time-picker-one-minute-grid" flex="1">
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="0" label=":00" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="1" label=":01" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="2" label=":02" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="3" label=":03" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="4" label=":04" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="5" label=":05" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="6" label=":06" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="7" label=":07" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="8" label=":08" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="9" label=":09" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="10" label=":10" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="11" label=":11" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="12" label=":12" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="13" label=":13" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="14" label=":14" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="15" label=":15" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="16" label=":16" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="17" label=":17" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="18" label=":18" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="19" label=":19" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="20" label=":20" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="21" label=":21" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="22" label=":22" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="23" label=":23" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="24" label=":24" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="25" label=":25" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="26" label=":26" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="27" label=":27" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="28" label=":28" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="29" label=":29" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="30" label=":30" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="31" label=":31" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="32" label=":32" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="33" label=":33" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="34" label=":34" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="35" label=":35" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="36" label=":36" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="37" label=":37" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="38" label=":38" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="39" label=":39" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="40" label=":40" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="41" label=":41" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="42" label=":42" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="43" label=":43" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="44" label=":44" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="45" label=":45" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="46" label=":46" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="47" label=":47" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="48" label=":48" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="49" label=":49" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="50" label=":50" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="51" label=":51" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="52" label=":52" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="53" label=":53" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="54" label=":54" flex="1"></timepicker-minute>
+              </hbox>
+              <hbox flex="1">
+                <timepicker-minute class="time-picker-one-minute-class" value="55" label=":55" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="56" label=":56" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="57" label=":57" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="58" label=":58" flex="1"></timepicker-minute>
+                <timepicker-minute class="time-picker-one-minute-class" value="59" label=":59" flex="1"></timepicker-minute>
+              </hbox>
+            </vbox>
+            <hbox class="time-picker-minutes-bottom">
+              <spacer flex="1"></spacer>
+              <label class="time-picker-more-control-label" value="«" onclick="clickLess()"></label>
+            </hbox>
+          </vbox>
+        </vbox>
+      `);
     }
 
     connectedCallback() {
       if (!this.hasChildNodes()) {
         this.appendChild(document.importNode(this.content, true));
       }
 
       // set by onPopupShowing
@@ -790,22 +790,22 @@
     }
 
     static get fragment() {
       // Accessibility information of these nodes will be
       // presented on XULComboboxAccessible generated from <menulist>;
       // hide these nodes from the accessibility tree.
       let frag = document.importNode(
         MozXULElement.parseXULToFragment(`
-                <menulist is="menulist-editable" class="datepicker-menulist" editable="true" sizetopopup="false">
-                    <menupopup ignorekeys="true" popupanchor="bottomright" popupalign="topright">
-                        <calendar-minimonth tabindex="0"/>
-                    </menupopup>
-                </menulist>
-            `),
+          <menulist is="menulist-editable" class="datepicker-menulist" editable="true" sizetopopup="false">
+            <menupopup ignorekeys="true" popupanchor="bottomright" popupalign="topright">
+              <calendar-minimonth tabindex="0"/>
+            </menupopup>
+          </menulist>
+        `),
         true
       );
 
       Object.defineProperty(this, "fragment", { value: frag });
       return frag;
     }
 
     static get inheritedAttributes() {
@@ -955,22 +955,22 @@
     }
 
     static get fragment() {
       // Accessibility information of these nodes will be
       // presented on XULComboboxAccessible generated from <menulist>;
       // hide these nodes from the accessibility tree.
       let frag = document.importNode(
         MozXULElement.parseXULToFragment(`
-                <menulist is="menulist-editable" class="timepicker-menulist" editable="true" sizetopopup="false">
-                    <menupopup popupanchor="bottomright" popupalign="topright">
-                        <timepicker-grids/>
-                    </menupopup>
-                </menulist>
-            `),
+          <menulist is="menulist-editable" class="timepicker-menulist" editable="true" sizetopopup="false">
+            <menupopup popupanchor="bottomright" popupalign="topright">
+              <timepicker-grids/>
+            </menupopup>
+          </menulist>
+        `),
         true
       );
 
       Object.defineProperty(this, "fragment", { value: frag });
       return frag;
     }
 
     static get inheritedAttributes() {