Bug 1569562 - remove grid usage from lightning-item-iframe.xul. r=pmorris
authorKhushil Mistry <khushil324@gmail.com>
Wed, 18 Sep 2019 08:08:00 +0200
changeset 78997 1dea742ee4ccd672aa400c6148c6b32334bfcc41
parent 78992 dd918656e4d7e4c79ebf44d9cb4e31eec406c1de
child 78998 e275a70046e0b3c5c15f2befcfb5ba540601b608
push id9335
push usermozilla@jorgk.com
push dateThu, 19 Sep 2019 10:56:46 +0000
treeherdertry-comm-central@ec7a23f9bcfd [default view] [failures only]
reviewerspmorris
bugs1569562
Bug 1569562 - remove grid usage from lightning-item-iframe.xul. r=pmorris
calendar/base/themes/common/dialogs/calendar-event-dialog.css
calendar/base/themes/linux/dialogs/calendar-event-dialog.css
calendar/base/themes/osx/dialogs/calendar-event-dialog.css
calendar/base/themes/windows/dialogs/calendar-event-dialog.css
calendar/lightning/content/lightning-item-iframe.js
calendar/lightning/content/lightning-item-iframe.xul
calendar/providers/gdata/content/gdata-lightning-item-iframe.js
calendar/test/mozmill/shared-modules/test-item-editing-helpers.js
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -1,734 +1,809 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 dialog {
-    --eventBorderColor: #8d8e90;
-    --eventWidgetBorderColor: #cacaff;
-    --eventGridStartBorderColor: #bdbec0;
+  --eventBorderColor: #8d8e90;
+  --eventWidgetBorderColor: #cacaff;
+  --eventGridStartBorderColor: #bdbec0;
 }
 
 dialog[systemcolors] {
-    --eventBorderColor: ThreeDShadow;
-    --eventWidgetBorderColor: ThreeDShadow;
-    --eventGridStartBorderColor: ThreeDShadow;
+  --eventBorderColor: ThreeDShadow;
+  --eventWidgetBorderColor: ThreeDShadow;
+  --eventGridStartBorderColor: ThreeDShadow;
 }
 
 #calendar-event-dialog,
 #calendar-task-dialog {
-    min-width: 444px;
-    min-height: 476px;
+  min-width: 444px;
+  min-height: 476px;
 }
 
 #calendar-event-dialog,
 #calendar-task-dialog,
 #calendar-event-dialog-inner,
 #calendar-task-dialog-inner {
-    padding: 0px;
+  padding: 0px;
 }
 
 #calendar-event-dialog .todo-only,
 #calendar-task-dialog .event-only,
 #calendar-event-dialog-inner .todo-only,
 #calendar-task-dialog-inner .event-only {
-    display: none;
+  display: none;
 }
 
 /*--------------------------------------------------------------------
  *   Event dialog toolbar buttons
  *-------------------------------------------------------------------*/
 
 #button-save {
-    list-style-image: url(chrome://calendar-common/skin/icons/save.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/save.svg);
 }
 
 #button-save[mode="send"] {
-    list-style-image: url("chrome://messenger/skin/icons/send.svg");
+  list-style-image: url("chrome://messenger/skin/icons/send.svg");
 }
 
 #saveandcloseButton,
 #button-saveandclose {
-    list-style-image: url(chrome://calendar-common/skin/icons/save-close.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/save-close.svg);
 }
 
 #button-saveandclose[mode="send"] {
-    list-style-image: url("chrome://messenger/skin/icons/send.svg");
+  list-style-image: url("chrome://messenger/skin/icons/send.svg");
 }
 
 #button-attendees {
-    list-style-image: url(chrome://calendar-common/skin/icons/address.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/address.svg);
 }
 
 #button-privacy {
-    list-style-image: url(chrome://calendar-common/skin/icons/security.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/security.svg);
 }
 
 #button-url {
-    list-style-image: url(chrome://calendar-common/skin/icons/attach.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/attach.svg);
 }
 
 #deleteButton,
 #button-delete.cal-event-toolbarbutton {
-    /* !important to override the SM #button-delete states */
-    list-style-image: url(chrome://calendar-common/skin/icons/delete.svg) !important;
-    -moz-image-region: auto !important;
+  /* !important to override the SM #button-delete states */
+  list-style-image: url(chrome://calendar-common/skin/icons/delete.svg) !important;
+  -moz-image-region: auto !important;
 }
 
 #button-priority {
-    list-style-image: url(chrome://calendar-common/skin/icons/priority.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/priority.svg);
 }
 
 #button-status {
-    list-style-image: url(chrome://calendar-common/skin/icons/status.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/status.svg);
 }
 
 #button-freebusy {
-    list-style-image: url(chrome://calendar-common/skin/icons/freebusy.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/freebusy.svg);
 }
 
 #button-timezones {
-    list-style-image: url(chrome://calendar-common/skin/icons/timezones.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/timezones.svg);
 }
 
 #acceptButton {
-    list-style-image: url(chrome://calendar-common/skin/icons/complete.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/complete.svg);
 }
 
 #tentativeButton {
-    list-style-image: url(chrome://calendar-common/skin/icons/tentative.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/tentative.svg);
 }
 
 #declineButton {
-    list-style-image: url(chrome://calendar-common/skin/icons/decline.svg);
+  list-style-image: url(chrome://calendar-common/skin/icons/decline.svg);
 }
 
 /*--------------------------------------------------------------------
  *   Event dialog counter box section
  *-------------------------------------------------------------------*/
 
 #counter-proposal-box {
-    background-color: rgb(186, 238, 255);
-    border-bottom: 1px solid #444444;
+  background-color: rgb(186, 238, 255);
+  border-bottom: 1px solid #444444;
 }
 
 #counter-proposal-property-values > description {
-    margin-bottom: 2px;
+  margin-bottom: 2px;
 }
 
 #counter-proposal-summary {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .counter-buttons {
-    max-height: 25px;
+  max-height: 25px;
 }
 
 #yearly-period-of-label,
 label.label {
-    text-align: right;
+  text-align: right;
 }
 
 #item-calendar,
 #item-categories,
 #item-repeat,
 #item-alarm,
 .datepicker-text-class {
-    min-width: 12em;
+  min-width: 12em;
 }
 
 .cal-event-toolbarbutton .toolbarbutton-icon {
-    width: 18px;
-    height: 18px;
+  width: 18px;
+  height: 18px;
 }
 
 .icon-holder[type="calendarEvent"],
 .tabmail-tab[type="calendarEvent"] {
-    list-style-image: url(chrome://calendar-common/skin/icons/event.svg);
-    -moz-image-region: auto;
+  list-style-image: url(chrome://calendar-common/skin/icons/event.svg);
+  -moz-image-region: auto;
 }
 
 .icon-holder[type="calendarTask"],
 .tabmail-tab[type="calendarTask"] {
-    list-style-image: url(chrome://calendar-common/skin/icons/task.svg);
-    -moz-image-region: auto;
+  list-style-image: url(chrome://calendar-common/skin/icons/task.svg);
+  -moz-image-region: auto;
+}
+
+#event-grid {
+  padding-top: 8px;
+  padding-inline-start: 8px;
+  padding-inline-end: 10px;
+  border-spacing: 0;
+  height: 100%;
+}
+
+#event-grid menulist {
+  margin-bottom: 1px;
+}
+
+#event-grid > tr > th {
+  text-align: left;
+  font-weight: normal;
+}
+
+#event-grid > tr > td,
+.full-width {
+  width: 100%;
+}
+
+#event-grid-tab-box-row,
+#event-grid-tabbox,
+.event-grid-tabpanels {
+  height: 100%;
+}
+
+.event-input-td > input {
+  width: 100%;
+}
+
+.event-input-td {
+  padding-top: 3px !important;
+  padding-bottom: 3px !important;
+}
+
+#event-grid > tr > th,
+#event-grid > tr > td {
+  padding: 0;
+}
+
+#item-categories-textbox {
+  margin: 0px 8px;
+}
+
+#item-calendar,
+#item-categories {
+  width: 100%;
+}
+
+#event-grid-tab-vbox {
+  padding-bottom: 10px;
+  padding-inline-start: 8px;
+  padding-inline-end: 10px;
+}
+
+:root {
+  --separator-padding: 6px;
+}
+
+.above-separator {
+  padding-bottom: var(--separator-padding) !important;
+  border-bottom: 1px solid #A3A3A3;
+}
+
+.below-separator {
+  padding-top: calc(var(--separator-padding) - 2px) !important;
+}
+
+.below-separator-task {
+  padding-top: calc(var(--separator-padding) - 5px) !important;
 }
 
 /*--------------------------------------------------------------------
  *   Event dialog tabbox section
  *-------------------------------------------------------------------*/
 
 #event-grid-tabbox {
-    margin: 5px 0;
+  margin: 5px 0;
 }
 
 #event-grid-tabbox #notify-options {
-    padding: 0px 9px;
+  padding: 0px 9px;
 }
 
 #event-grid-tabpanel-description {
-    display: flex;
+  display: flex;
 }
 
 #event-grid-tabpanel-description > #item-description {
-    width: 100%;
-    box-sizing: border-box;
-    min-height: 7em;
-    margin: 2px 4px;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 7em;
+  margin: 2px 4px;
 }
 
 #event-grid-tabpanel-attendees > vbox > hbox > #item-attendees-box {
-    margin: 2px 4px;
+  margin: 2px 4px;
 }
 
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/
 
 #keepduration-button {
-    list-style-image: url(chrome://calendar-common/skin/chain-unlock.svg);
-    padding-top: 3px;
-    padding-bottom: 3px;
-    margin-inline-start: -3px;
-    margin-bottom: -15px;
-    position: relative;
-    -moz-user-focus: normal;
-    -moz-context-properties: fill;
-    fill: CurrentColor;
+  list-style-image: url(chrome://calendar-common/skin/chain-unlock.svg);
+  padding-top: 3px;
+  padding-bottom: 3px;
+  margin-inline-start: -3px;
+  margin-bottom: -15px;
+  position: relative;
+  -moz-user-focus: normal;
+  -moz-context-properties: fill;
+  fill: CurrentColor;
 }
 
 #keepduration-button[keep="true"] {
-    list-style-image: url(chrome://calendar-common/skin/chain-lock.svg);
-    fill: Highlight;
+  list-style-image: url(chrome://calendar-common/skin/chain-lock.svg);
+  fill: Highlight;
 }
 
 #keepduration-button[disabled="true"] {
-    fill: GrayText;
+  fill: GrayText;
 }
 
 #keepduration-button > label {
-    display: none;
+  display: none;
 }
 
 .keepduration-link-image {
-    margin-inline-start: -1px;
-    -moz-context-properties: fill, stroke-opacity;
-    fill: CurrentColor;
-    stroke-opacity: 0;
+  margin-inline-start: -1px;
+  -moz-context-properties: fill, stroke-opacity;
+  fill: CurrentColor;
+  stroke-opacity: 0;
 }
 
 #link-image-top {
-    list-style-image: url(chrome://calendar-common/skin/link-image-top.svg);
-    margin-top: 0.6em;
-    margin-bottom: -0.6em;
+  list-style-image: url(chrome://calendar-common/skin/link-image-top.svg);
+  margin-top: 0.6em;
+  margin-bottom: -0.6em;
 }
 
 #link-image-top[keep="true"] {
-    stroke-opacity: 1;
+  stroke-opacity: 1;
 }
 
 #link-image-bottom {
-    list-style-image: url(chrome://calendar-common/skin/link-image-bottom.svg);
-    margin-top: -0.6em;
-    margin-bottom: 0.6em;
+  list-style-image: url(chrome://calendar-common/skin/link-image-bottom.svg);
+  margin-top: -0.6em;
+  margin-bottom: 0.6em;
 }
 
 /*--------------------------------------------------------------------
  *   Event dialog statusbar images
  *-------------------------------------------------------------------*/
 
 .cal-statusbar-1 {
-    -moz-box-orient: vertical;
-    min-width: 0;
-    list-style-image: url("chrome://calendar-common/skin/statusbar-priority.svg");
-    -moz-context-properties: fill;
-    fill: currentColor;
+  -moz-box-orient: vertical;
+  min-width: 0;
+  list-style-image: url("chrome://calendar-common/skin/statusbar-priority.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 /*--------------------------------------------------------------------
  *   Event dialog statusbarpanels
  *-------------------------------------------------------------------*/
 
 #status-privacy,
 #status-priority,
 #status-status,
 #status-freebusy {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 /*--------------------------------------------------------------------
  *   priority "low" image
  *-------------------------------------------------------------------*/
 
 #image-priority-low {
-    -moz-image-region: rect(0 16px 16px 0);
+  -moz-image-region: rect(0 16px 16px 0);
 }
 
 /*--------------------------------------------------------------------
  *   priority "normal" image
  *-------------------------------------------------------------------*/
 
 #image-priority-normal {
-    -moz-image-region: rect(0 32px 16px 16px);
+  -moz-image-region: rect(0 32px 16px 16px);
 }
 
 /*--------------------------------------------------------------------
  *   priority "high" image
  *-------------------------------------------------------------------*/
 
 #image-priority-high {
-    -moz-image-region: rect(0 48px 16px 32px);
+  -moz-image-region: rect(0 48px 16px 32px);
 }
 
 /*--------------------------------------------------------------------
  *   Recurrence dialog preview border
  *-------------------------------------------------------------------*/
 #preview-border {
-    border: none;
-    padding: 0px;
+  border: none;
+  padding: 0px;
 }
 
 /*--------------------------------------------------------------------
  *   freebusy
  *-------------------------------------------------------------------*/
 #freebusy-container {
-    overflow: hidden;
-    min-width: 100px;
+  overflow: hidden;
+  min-width: 100px;
 }
 
 #freebusy-grid {
-    min-width: 1px;
-    -moz-user-focus: normal;
-    overflow: hidden;
+  min-width: 1px;
+  -moz-user-focus: normal;
+  overflow: hidden;
 }
 
 #freebusy-grid > .dummy-row, #freebusy-grid .dummy-row-cell {
-    width: 100%;
+  width: 100%;
 }
 
 #calendar-summary-dialog {
-    min-width: 35em;
+  min-width: 35em;
 }
 
 #daypicker-weekday {
-    margin-top: 2px;
+  margin-top: 2px;
 }
 
 .daypicker-monthday {
-    margin-top: 2px;
+  margin-top: 2px;
 }
 
 .headline {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .headline[align=end],
 .headline[align=right]{
-    text-align: right;
+  text-align: right;
 }
 
 .default-spacer {
-    width: 1em;
-    height: 1em;
+  width: 1em;
+  height: 1em;
 }
 
 .default-indent {
-    margin-inline-start: 1.5em;
+  margin-inline-start: 1.5em;
 }
 
 /*--------------------------------------------------------------------
  *   Attendees Dialog
  *-------------------------------------------------------------------*/
 
 #attendees-container {
-    min-width: 150px;
-    min-height: 150px;
+  min-width: 150px;
+  min-height: 150px;
 }
 
 .listbox-noborder {
-    -moz-appearance: none;
-    margin: 0px 0px;
-    border: 1px solid var(--eventBorderColor);
-    background-color: #fff;
+  -moz-appearance: none;
+  margin: 0px 0px;
+  border: 1px solid var(--eventBorderColor);
+  background-color: #fff;
 }
 
 #timebar {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 #timebar > .listbox-noborder {
-    border-bottom-style: none;
+  border-bottom-style: none;
 }
 
 #freebusy-grid > .listbox-noborder {
-    border-top-color: transparent;
+  border-top-color: transparent;
 }
 
 /* remove on Windows the double border with the splitter */
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8),
        (-moz-os-version: windows-win10) {
-    #attendees-list > .listbox-noborder {
-        border-inline-end-style: none;
-    }
-    #timebar > .listbox-noborder,
-    #freebusy-grid > .listbox-noborder {
-        border-inline-start-style: none;
-    }
+  #attendees-list > .listbox-noborder {
+    border-inline-end-style: none;
+  }
+  #timebar > .listbox-noborder,
+  #freebusy-grid > .listbox-noborder {
+    border-inline-start-style: none;
+  }
 }
 
 .selection-bar {
-    background-color: rgba(0, 128, 128, .2);
-    border: 1px solid #008080;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+  background-color: rgba(0, 128, 128, .2);
+  border: 1px solid #008080;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 #freebusy-container {
-    overflow: hidden;
-    clip: rect(0px 0px 0px 0px);
-    min-width: 450px;
+  overflow: hidden;
+  clip: rect(0px 0px 0px 0px);
+  min-width: 450px;
 }
 
 .freebusy-listitem {
-    border-width: 0px;
+  border-width: 0px;
 }
 
 calendar-event-freebusy-day {
-    margin-inline-end: 2px;
-    border-inline-start: 1px solid var(--eventBorderColor);
-    border-inline-end: 1px solid var(--eventBorderColor);
-    border-bottom: 1px solid var(--eventBorderColor);
+  margin-inline-end: 2px;
+  border-inline-start: 1px solid var(--eventBorderColor);
+  border-inline-end: 1px solid var(--eventBorderColor);
+  border-bottom: 1px solid var(--eventBorderColor);
 }
 
 calendar-event-freebusy-day:first-child {
-    border-inline-start: 1px solid transparent;
+  border-inline-start: 1px solid transparent;
 }
 
 calendar-event-freebusy-day:last-child {
-    border-inline-end: 1px solid transparent;
+  border-inline-end: 1px solid transparent;
 }
 
 calendar-event-scroll-container > box {
-    overflow: hidden;
-    clip: rect(0px 0px 0px 0px);
+  overflow: hidden;
+  clip: rect(0px 0px 0px 0px);
 }
 
 /* negative margins to clear freebusy-day's border and margin */
 calendar-event-freebusy-day > box {
-    margin-inline: -1px;
+  margin-inline: -1px;
 }
 
 .freebusy-content {
-    overflow: hidden;
-    clip: rect(0px 0px 0px 0px);
+  overflow: hidden;
+  clip: rect(0px 0px 0px 0px);
 }
 
 /* margin-inline-end 2px is needed to take border-right from the grid elements into account */
 .freebusy-timebar-title {
-    margin-inline-end: 2px;
-    padding-inline-start: 2px;
+  margin-inline-end: 2px;
+  padding-inline-start: 2px;
 }
 
 .freebusy-timebar-hour {
-    margin-top: 2px;
-    margin-bottom: 3px;
-    border-inline-start: 1px solid transparent;
-    padding-inline: 2px;
+  margin-top: 2px;
+  margin-bottom: 3px;
+  border-inline-start: 1px solid transparent;
+  padding-inline: 2px;
 }
 
 .freebusy-timebar-hour.last-in-day {
-    border-inline-end: 1px solid transparent;
+  border-inline-end: 1px solid transparent;
 }
 
 .freebusy-timebar-hour[scheduled="true"] {
-    /* the 'sechuled'-attribute is used in the timebar to indicate
+  /* the 'sechuled'-attribute is used in the timebar to indicate
      which hours are affected of the currently schedued event.
      since we added the selection-bar this is no longer necessary
      but we keep the possibity to decorate those hours if it should
      become beneficial.
      text-decoration: underline;
-   */
+  */
 }
 
 .freebusy-grid {
-    border-inline-start: 1px solid var(--eventGridStartBorderColor);
-    padding-inline: 2px;
-    background-color: #E09EBD;
-    color: #E09EBD;
-    min-height: 16px;
+  border-inline-start: 1px solid var(--eventGridStartBorderColor);
+  padding-inline: 2px;
+  background-color: #E09EBD;
+  color: #E09EBD;
+  min-height: 16px;
 }
 
 .freebusy-grid[state="busy"] {
-    background-color: #153E7E;
-    color: #153E7E;
+  background-color: #153E7E;
+  color: #153E7E;
 }
 
 .freebusy-grid[state="busy_tentative"] {
-    background-color: #1589FF;
-    color: #1589FF;
+  background-color: #1589FF;
+  color: #1589FF;
 }
 
 .freebusy-grid[state="busy_unavailable"] {
-    background-color: #4E387E;
-    color: #4E387E;
+  background-color: #4E387E;
+  color: #4E387E;
 }
 
 .freebusy-grid[state="free"] {
-    background-color: #EBEBE4;
-    color: #EBEBE4;
+  background-color: #EBEBE4;
+  color: #EBEBE4;
 }
 
 .freebusy-grid:first-child {
-    border-inline-start: 1px solid transparent;
+  border-inline-start: 1px solid transparent;
 }
 
 .freebusy-grid.last-in-day {
-    border-inline-end: 1px solid var(--eventBorderColor);
-    margin-inline-end: 2px;
+  border-inline-end: 1px solid var(--eventBorderColor);
+  margin-inline-end: 2px;
 }
 
 #dialog-box {
-    padding-top: 8px;
-    padding-bottom: 10px;
-    padding-inline-start: 8px;
-    padding-inline-end: 10px;
+  padding-top: 8px;
+  padding-bottom: 10px;
+  padding-inline-start: 8px;
+  padding-inline-end: 10px;
 }
 
 /* --spacer-top-height and --spacer-bottom-height are defined at runtime */
 .attendee-spacer-top {
-    height: var(--spacer-top-height);
+  height: var(--spacer-top-height);
 }
 
 .attendee-spacer-bottom {
-    height: var(--spacer-bottom-height);
+  height: var(--spacer-bottom-height);
 }
 
 #addressingWidget {
-    -moz-user-focus: none;
+  -moz-user-focus: none;
 }
 
 #typecol-addressingWidget {
-    min-width: 9em;
-    border-right: 1px solid var(--eventWidgetBorderColor);
+  min-width: 9em;
+  border-right: 1px solid var(--eventWidgetBorderColor);
 }
 
 /* This applies to rows of the calendar-event-attendees-list and the freebusy-grid */
 .addressingWidgetItem,
 .dummy-row {
-    border: none !important;
-    background-color: inherit !important;
-    color: inherit !important;
+  border: none !important;
+  background-color: inherit !important;
+  color: inherit !important;
 
-    /* we set the minimal height to the height of the
+  /* we set the minimal height to the height of the
      largest icon [the usertype-icon in this case] to
      ensure that the rows of the freebusy-grid and
      the attendee-list always have the same height,
-     regardless of the font size. */
-    height: 17px;
+     regardless of the font size.
+  */
+  height: 17px;
 }
 
 .addressingWidgetCell {
-    border-bottom: 1px solid var(--eventWidgetBorderColor);
-    padding: 0px;
+  border-bottom: 1px solid var(--eventWidgetBorderColor);
+  padding: 0px;
 }
 
 .addressingWidgetCell:first-child {
-    border-top: none;
+  border-top: none;
 }
 
 .dummy-row-cell:first-child {
-    border-top: none;
+  border-top: none;
 }
 
 .zoom-in-icon {
-    margin: 3px 3px;
-    list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
-    -moz-image-region: rect(0px 97px 14px 84px);
+  margin: 3px 3px;
+  list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
+  -moz-image-region: rect(0px 97px 14px 84px);
 }
 .zoom-in-icon[disabled="true"] {
-    -moz-image-region: rect(14px 97px 28px 84px);
+  -moz-image-region: rect(14px 97px 28px 84px);
 }
 
 .zoom-out-icon {
-    margin: 3px 3px;
-    list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
-    -moz-image-region: rect(0px 110px 14px 97px);
+  margin: 3px 3px;
+  list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
+  -moz-image-region: rect(0px 110px 14px 97px);
 }
 .zoom-out-icon[disabled="true"] {
-    -moz-image-region: rect(14px 110px 28px 97px);
+  -moz-image-region: rect(14px 110px 28px 97px);
 }
 
 .left-icon {
-    margin: 3px 3px;
-    list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
-    -moz-image-region: rect(0px 124px 14px 110px);
+  margin: 3px 3px;
+  list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
+  -moz-image-region: rect(0px 124px 14px 110px);
 }
 .left-icon[disabled="true"] {
-    -moz-image-region: rect(14px 124px 28px 110px);
+  -moz-image-region: rect(14px 124px 28px 110px);
 }
 
 .right-icon {
-    margin: 3px 3px;
-    list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
-    -moz-image-region: rect(0px 138px 14px 124px);
+  margin: 3px 3px;
+  list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog-attendees.png);
+  -moz-image-region: rect(0px 138px 14px 124px);
 }
 .right-icon[disabled="true"] {
-    -moz-image-region: rect(14px 138px 28px 124px);
+  -moz-image-region: rect(14px 138px 28px 124px);
 }
 
 .left-icon .button-icon {
-    margin-inline-end: 3px;
+  margin-inline-end: 3px;
 }
 
 .right-icon .button-icon {
-    margin-inline-start: 3px;
+  margin-inline-start: 3px;
 }
 
 .legend {
-    display: flex;
-    width: 3em;
-    height: 1em;
-    border-top: 1px solid #A1A1A1;
-    border-right: 1px solid #C3C3C3;
-    border-bottom: 1px solid #DDDDDD;
-    border-left: 1px solid #C3C3C3;
+  display: flex;
+  width: 3em;
+  height: 1em;
+  border-top: 1px solid #A1A1A1;
+  border-right: 1px solid #C3C3C3;
+  border-bottom: 1px solid #DDDDDD;
+  border-left: 1px solid #C3C3C3;
 }
 
 .legend[status="FREE"] {
-    background-color: #EBEBE4;
-    color: #EBEBE4;
+  background-color: #EBEBE4;
+  color: #EBEBE4;
 }
 
 .legend[status="BUSY"] {
-    background-color: #153E7E;
-    color: #153E7E;
+  background-color: #153E7E;
+  color: #153E7E;
 }
 
 .legend[status="BUSY_TENTATIVE"] {
-    background-color: #1589FF;
-    color: #1589FF;
+  background-color: #1589FF;
+  color: #1589FF;
 }
 
 .legend[status="BUSY_UNAVAILABLE"] {
-    background-color: #4E387E;
-    color: #4E387E;
+  background-color: #4E387E;
+  color: #4E387E;
 }
 
 .legend[status="UNKNOWN"] {
-    background-color: #E09EBD;
-    color: #E09EBD;
+  background-color: #E09EBD;
+  color: #E09EBD;
 }
 
 #content-frame {
-    border-left: 1px solid ThreeDDarkShadow;
-    border-right: 1px solid ThreeDLightShadow;
-    min-width: 10px;
-    min-height: 10px;
-    height: 400px;
+  border-left: 1px solid ThreeDDarkShadow;
+  border-right: 1px solid ThreeDLightShadow;
+  min-width: 10px;
+  min-height: 10px;
+  height: 400px;
 }
 
 #attendees-list {
-    -moz-user-focus: normal;
-    overflow: hidden;
+  -moz-user-focus: normal;
+  overflow: hidden;
 }
 
 #attendees-list > richlistitem {
-    max-height: 17px;
-    min-height: 17px;
-    flex: 1;
-    display: flex;
+  max-height: 17px;
+  min-height: 17px;
+  flex: 1;
+  display: flex;
 }
 
 #attendees-list .addressingWidgetCell {
-    width: 27px;
-    text-align: center;
+  width: 27px;
+  text-align: center;
 }
 
 #attendees-list hbox:nth-child(3) {
-    flex: 1;
-    text-align: left;
+  flex: 1;
+  text-align: left;
 }
 
 #attendees-list hbox textbox {
-    width: 100%;
+  width: 100%;
 }
 
 .selection-bar-left {
-    width: 3px;
-    cursor: w-resize;
+  width: 3px;
+  cursor: w-resize;
 }
 
 .selection-bar-right {
-    width: 3px;
-    cursor: e-resize;
+  width: 3px;
+  cursor: e-resize;
 }
 
 .selection-bar-spacer {
-    cursor: grab;
+  cursor: grab;
 }
 
 .checkbox-no-label > .checkbox-label-box {
-    display: none;
+  display: none;
 }
 
 /*--------------------------------------------------------------------
  *   Event summary dialog
  *-------------------------------------------------------------------*/
 
 #summary-toolbox {
-    margin-top: -8px;
-    margin-inline-start: -8px;
-    margin-inline-end: -10px;
-    margin-bottom: 10px;
+  margin-top: -8px;
+  margin-inline-start: -8px;
+  margin-inline-end: -10px;
+  margin-bottom: 10px;
 }
 
 #calendar-summary-dialog,
 #calendar-event-summary-dialog,
 #calendar-task-summary-dialog {
-    min-width: 35em;
+  min-width: 35em;
 }
 
 #calendar-summary-dialog #item-attachment-cell,
 #calendar-event-summary-dialog #item-attachment-cell,
 #calendar-task-summary-dialog #item-attachment-cell {
-    margin-left: 6px;
+  margin-left: 6px;
 }
 
 #calendar-summary-dialog .item-attachment-cell-label,
 #calendar-event-summary-dialog .item-attachment-cell-label,
 #calendar-task-summary-dialog .item-attachment-cell-label {
-    margin-left: 3px;
+  margin-left: 3px;
 }
 
 #calendar-summary-dialog #item-description-wrapper,
 #calendar-event-summary-dialog #item-description-wrapper,
 #calendar-task-summary-dialog #item-description-wrapper {
-    display: flex;
+  display: flex;
 }
 
 #calendar-summary-dialog #item-description,
 #calendar-event-summary-dialog #item-description,
 #calendar-task-summary-dialog #item-description {
-    width: 100%;
-    box-sizing: border-box;
-    min-height: 54px;
-    margin: 2px 4px 0;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 54px;
+  margin: 2px 4px 0;
 }
 
 #calendar-summary-dialog .selectable-label,
 #calendar-event-summary-dialog .selectable-label,
 #calendar-task-summary-dialog .selectable-label {
-    background-color: inherit;
-    color: inherit;
+  background-color: inherit;
+  color: inherit;
 }
 
 #calendar-summary-dialog #item-start-row .headline,
 #calendar-event-summary-dialog #item-start-row .headline,
 #calendar-task-summary-dialog #item-start-row .headline,
 #calendar-summary-dialog #item-end-row .headline,
 #calendar-event-summary-dialog #item-end-row .headline,
 #calendar-task-summary-dialog #item-end-row .headline {
-    font-weight: normal;
+  font-weight: normal;
 }
--- a/calendar/base/themes/linux/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/linux/dialogs/calendar-event-dialog.css
@@ -2,14 +2,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/
 
 #keepduration-button {
-    min-width: 21px;
+  min-width: 21px;
 }
 
 #timezone-endtime {
-    margin-inline-start: 16px;
+  margin-inline-start: 16px;
 }
+
+.event-input-td {
+  padding-right: 13px !important;
+  padding-left: 4px !important;
+}
--- a/calendar/base/themes/osx/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/osx/dialogs/calendar-event-dialog.css
@@ -2,24 +2,29 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/
 
 #keepduration-button {
-    padding: 3px 6px;
+  padding: 3px 6px;
 }
 
 #timezone-endtime {
-    margin-inline-start: 15px;
+  margin-inline-start: 15px;
 }
 
 hbox > #link-image-top {
-    margin-top: 1.2em;
-    margin-bottom: -1.2em;
+  margin-top: 1.2em;
+  margin-bottom: -1.2em;
 }
 
 vbox > #link-image-bottom {
-    margin-top: -1.2em;
-    margin-bottom: 1.2em;
+  margin-top: -1.2em;
+  margin-bottom: 1.2em;
 }
+
+.event-input-td {
+  padding-right: 8px !important;
+  padding-left: 3px !important;
+}
\ No newline at end of file
--- a/calendar/base/themes/windows/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/windows/dialogs/calendar-event-dialog.css
@@ -2,14 +2,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/
 
 #keepduration-button {
-    min-width: 21px;
+  min-width: 21px;
 }
 
 #timezone-endtime {
-    margin-inline-start: 16px;
+  margin-inline-start: 16px;
 }
+
+.event-input-td {
+  padding-right: 8px !important;
+  padding-left: 3px !important;
+}
--- a/calendar/lightning/content/lightning-item-iframe.js
+++ b/calendar/lightning/content/lightning-item-iframe.js
@@ -422,16 +422,19 @@ function onLoad() {
 
   window.recurrenceInfo = null;
   if (parentItem.recurrenceInfo) {
     window.recurrenceInfo = parentItem.recurrenceInfo.clone();
   }
 
   // Set initial values for datepickers in New Tasks dialog
   if (cal.item.isToDo(item)) {
+    document.getElementById("event-grid-startdate-th").classList.add("below-separator-task");
+    document.getElementById("event-grid-startdate-td").classList.add("below-separator-task");
+
     let initialDatesValue = cal.dtz.dateTimeToJsDate(args.initialStartDateValue);
     if (!gNewItemUI) {
       setElementValue("completed-date-picker", initialDatesValue);
       setElementValue("todo-entrydate", initialDatesValue);
       setElementValue("todo-duedate", initialDatesValue);
     }
   }
   loadDialog(window.calendarItem);
@@ -439,18 +442,17 @@ function onLoad() {
   if (args.counterProposal) {
     window.counterProposal = args.counterProposal;
     displayCounterProposal();
   }
 
   gMainWindow.setCursor("auto");
 
   if (!gNewItemUI) {
-    document.getElementById("item-title").focus();
-    document.getElementById("item-title").select();
+    document.getElementById("item-calendar").focus();
   }
 
   // This causes the app to ask if the window should be closed when the
   // application is closed.
   Services.obs.addObserver(eventDialogQuitObserver, "quit-application-requested");
 
   // Normally, Enter closes a <dialog>. We want this to rather on Ctrl+Enter.
   // Stopping event propagation doesn't seem to work, so just overwrite the
@@ -958,18 +960,19 @@ function updateCategoryMenulist() {
   let categoryPopup = document.getElementById("item-categories-popup");
 
   // Make sure the maximum number of categories is applied to the listbox
   let calendar = getCurrentCalendar();
   let maxCount = calendar.getProperty("capabilities.categories.maxCount");
 
   // Hide the categories listbox and label in case categories are not
   // supported
-  setBooleanAttribute("item-categories", "hidden", maxCount === 0);
-  setBooleanAttribute("item-categories-label", "hidden", maxCount === 0);
+  document
+    .getElementById("event-grid-category-color-row")
+    .toggleAttribute("hidden", maxCount === 0);
   setBooleanAttribute("item-calendar-label", "hidden", maxCount === 0);
   setBooleanAttribute("item-calendar-aux-label", "hidden", maxCount !== 0);
 
   let label;
   let categoryList = categoryPopup.querySelectorAll("menuitem.calendar-category[checked]");
   if (categoryList.length > 1) {
     label = cal.l10n.getCalString("multipleCategories");
   } else if (categoryList.length == 1) {
@@ -3778,22 +3781,17 @@ function showOrHideItemURL(aShow, aUrl) 
 /**
  * Updates the related link on the dialog (rfc2445 URL property).
  *
  * @param {boolean} aShow  Show the link (true) or not (false)
  * @param {string} aUrl    The url
  */
 function updateItemURL(aShow, aUrl) {
   // Hide or show the link
-  setElementValue("event-grid-link-row", !aShow && "true", "hidden");
-  // The separator is not there in the summary dialog
-  let separator = document.getElementById("event-grid-link-separator");
-  if (separator) {
-    setElementValue("event-grid-link-separator", !aShow && "true", "hidden");
-  }
+  document.getElementById("event-grid-link-row").toggleAttribute("hidden", !aShow);
 
   // Set the url for the link
   if (aShow && aUrl.length) {
     setTimeout(() => {
       // HACK the url-link doesn't crop when setting the value in onLoad
       setElementValue("url-link", aUrl);
       setElementValue("url-link", aUrl, "href");
     }, 0);
--- a/calendar/lightning/content/lightning-item-iframe.xul
+++ b/calendar/lightning/content/lightning-item-iframe.xul
@@ -127,212 +127,224 @@
               tooltip="&counter.button.original.tooltip2;" />
     </vbox>
   </hbox>
 
   <hbox id="event-dialog-notifications">
     <!-- notificationbox will be added here lazily. -->
   </hbox>
 
-  <grid id="event-grid"
-        flex="1"
-        style="padding-top: 8px; padding-bottom: 10px; padding-inline-start: 8px; padding-inline-end: 10px;">
-    <columns id="event-grid-columns">
-        <column id="event-description-column"/>
-        <column id="event-controls-column" flex="1"/>
-    </columns>
-
-    <rows id="event-grid-rows">
-      <!-- Title -->
-      <row id="event-grid-title-row"
-           align="center">
+  <html:table id="event-grid">
+    <html:tr>
+      <html:th>
+        <label id="item-calendar-label"
+               value="&event.calendar.label;"
+               accesskey="&event.calendar.accesskey;"
+               control="item-calendar"
+               disable-on-readonly="true"/>
+        <label id="item-calendar-aux-label"
+               value="&event.calendar.label;"
+               accesskey="&event.calendar.accesskey;"
+               control="item-calendar"
+               disable-on-readonly="true"/>
+      </html:th>
+      <html:td>
+        <menulist id="item-calendar"
+                  disable-on-readonly="true"
+                  oncommand="updateCalendar();"/>
+      </html:td>
+    </html:tr>
+    <!-- Title -->
+    <html:tr id="event-grid-title-row">
+      <html:th>
         <label value="&event.title.textbox.label;"
                accesskey="&event.title.textbox.accesskey;"
                control="item-title"
                disable-on-readonly="true"/>
-        <textbox id="item-title"
-                 disable-on-readonly="true"
-                 flex="1"
-                 oninput="updateTitle()"/>
-      </row>
+      </html:th>
+      <html:td class="event-input-td">
+        <html:input id="item-title"
+                    disable-on-readonly="true"
+                    oninput="updateTitle()"/>
+      </html:td>
+    </html:tr>
 
-      <!-- Location -->
-      <row id="event-grid-location-row"
-         align="center">
+    <!-- Location -->
+    <html:tr id="event-grid-location-row">
+      <html:th>
         <label value="&event.location.label;"
                accesskey="&event.location.accesskey;"
                control="item-location"
                disable-on-readonly="true"/>
-        <textbox id="item-location"
-                 disable-on-readonly="true"/>
-      </row>
+      </html:th>
+      <html:td class="event-input-td">
+        <html:input id="item-location"
+                    disable-on-readonly="true"/>
+      </html:td>
+    </html:tr>
 
-      <!-- Category & Calendar -->
-      <row id="event-grid-category-color-row"
-           align="center">
+    <!-- Category & Calendar -->
+    <html:tr id="event-grid-category-color-row">
+      <html:th class="above-separator">
         <hbox id="event-grid-category-labels-box">
-          <label value="&event.categories.label;"
+          <label id="item-categories-label"
+                 value="&event.categories.label;"
                  accesskey="&event.categories.accesskey;"
                  control="item-categories"
-                 id="item-categories-label"
-                 disable-on-readonly="true"/>
-          <label value="&event.calendar.label;"
-                 accesskey="&event.calendar.accesskey;"
-                 id="item-calendar-aux-label"
-                 control="item-calendar"
                  disable-on-readonly="true"/>
         </hbox>
-        <hbox id="event-grid-category-box" align="center">
-          <menulist id="item-categories"
-                    type="panel-menulist"
-                    disable-on-readonly="true"
-                    flex="1">
-            <menupopup id="item-categories-popup"
-                       onpopuphiding="return categoryPopupHiding(event);">
-              <textbox id="item-categories-textbox"
-                       placeholder="&event.categories.textbox.label;"
-                       onblur="this.parentNode.removeAttribute(&quot;ignorekeys&quot;);"
-                       onfocus="this.parentNode.setAttribute(&quot;ignorekeys&quot;, &quot;true&quot;);"
-                       onkeypress="categoryTextboxKeypress(event);"/>
-              <menuseparator />
-            </menupopup>
-          </menulist>
-          <label value="&event.calendar.label;"
-                 accesskey="&event.calendar.accesskey;"
-                 control="item-calendar"
-                 id="item-calendar-label"
-                 disable-on-readonly="true"/>
-          <menulist id="item-calendar"
-                    disable-on-readonly="true"
-                    flex="1"
-                    oncommand="updateCalendar();"/>
-        </hbox>
-      </row>
+      </html:th>
+      <html:td id="event-grid-category-color-td" class="above-separator">
+        <menulist id="item-categories"
+                  type="panel-menulist"
+                  disable-on-readonly="true">
+          <menupopup id="item-categories-popup"
+                     onpopuphiding="return categoryPopupHiding(event);">
+            <html:input id="item-categories-textbox"
+                        placeholder="&event.categories.textbox.label;"
+                        onblur="this.parentNode.removeAttribute('ignorekeys');"
+                        onfocus="this.parentNode.setAttribute('ignorekeys', 'true');"
+                        onkeypress="categoryTextboxKeypress(event);"/>
+            <menuseparator />
+          </menupopup>
+        </menulist>
+      </html:td>
+    </html:tr>
 
-      <separator class="groove" id="event-grid-basic-separator"/>
-
-      <!-- All-Day -->
-      <row id="event-grid-allday-row"
-           align="center">
-        <spacer/>
+    <!-- All-Day -->
+    <html:tr id="event-grid-allday-row">
+      <html:th class="below-separator">
+      </html:th>
+      <html:td class="below-separator">
         <checkbox id="event-all-day"
-                  class="event-only"
-                  disable-on-readonly="true"
-                  label="&event.alldayevent.label;"
-                  accesskey="&event.alldayevent.accesskey;"
-                  oncommand="onUpdateAllDay();"/>
-      </row>
+                   class="event-only"
+                   disable-on-readonly="true"
+                   label="&event.alldayevent.label;"
+                   accesskey="&event.alldayevent.accesskey;"
+                   oncommand="onUpdateAllDay();"/>
+      </html:td>
+    </html:tr>
 
-      <!-- StartDate -->
-      <row id="event-grid-startdate-row">
-        <hbox id="event-grid-startdate-label-box"
-              align="center">
+    <!-- StartDate -->
+    <html:tr id="event-grid-startdate-row">
+      <html:th id="event-grid-startdate-th">
+        <hbox id="event-grid-startdate-label-box" align="center">
           <label value="&event.from.label;"
                  accesskey="&event.from.accesskey;"
                  control="event-starttime"
                  class="event-only"
                  disable-on-readonly="true"/>
           <label value="&task.from.label;"
                  accesskey="&task.from.accesskey;"
                  control="todo-has-entrydate"
                  class="todo-only"
                  disable-on-readonly="true"/>
         </hbox>
+      </html:th>
+      <html:td id="event-grid-startdate-td">
         <hbox id="event-grid-startdate-picker-box">
           <datetimepicker id="event-starttime"
                           class="event-only"
                           disable-on-readonly="true"
                           onchange="dateTimeControls2State(true);"/>
           <checkbox id="todo-has-entrydate"
                     class="todo-only checkbox-no-label"
                     disable-on-readonly="true"
                     oncommand="updateEntryDate();"/>
           <datetimepicker id="todo-entrydate"
                           class="todo-only"
                           disable-on-readonly="true"
                           onchange="dateTimeControls2State(true);"/>
           <vbox>
             <hbox>
-              <image id="link-image-top" class="keepduration-link-image" keep="true"/>
+              <image id="link-image-top"
+                     class="keepduration-link-image"
+                     keep="true"/>
             </hbox>
             <spacer flex="1"/>
             <toolbarbutton id="keepduration-button"
                            accesskey="&event.dialog.keepDurationButton.accesskey;"
                            oncommand="toggleKeepDuration();"
                            persist="keep"
                            keep="false"
                            tooltiptext="&event.dialog.keepDurationButton.tooltip;"/>
           </vbox>
           <hbox align="center">
             <label id="timezone-starttime"
                    class="text-link"
                    collapsed="true"
                    crop="end"
                    disable-on-readonly="true"
-                   flex="1"
                    hyperlink="true"
                    onclick="showTimezonePopup(event, gStartTime.getInTimezone(gStartTimezone), editStartTimezone)"/>
           </hbox>
         </hbox>
-      </row>
+      </html:td>
+    </html:tr>
 
-      <!-- EndDate -->
-      <row id="event-grid-enddate-row">
+    <!-- EndDate -->
+    <html:tr id="event-grid-enddate-row">
+      <html:th>
         <hbox id="event-grid-enddate-label-box"
               align="center">
           <label value="&event.to.label;"
                  accesskey="&event.to.accesskey;"
                  control="event-endtime"
                  class="event-only"
                  disable-on-readonly="true"/>
           <label value="&task.to.label;"
                  accesskey="&task.to.accesskey;"
                  control="todo-has-duedate"
                  class="todo-only"
                  disable-on-readonly="true"/>
         </hbox>
-        <vbox>
+      </html:th>
+      <html:td id="event-grid-enddate-td">
+        <vbox id="event-grid-enddate-vbox">
           <hbox id="event-grid-enddate-picker-box">
             <datetimepicker id="event-endtime"
                             class="event-only"
                             disable-on-readonly="true"
                             onchange="dateTimeControls2State(false);"/>
             <checkbox id="todo-has-duedate"
                       class="todo-only checkbox-no-label"
                       disable-on-readonly="true"
                       oncommand="updateDueDate();"/>
             <datetimepicker id="todo-duedate"
                             class="todo-only"
                             disable-on-readonly="true"
                             onchange="dateTimeControls2State(false);"/>
             <vbox pack="end">
-              <image id="link-image-bottom" class="keepduration-link-image"/>
+              <image id="link-image-bottom"
+                     class="keepduration-link-image"/>
             </vbox>
             <hbox align="center">
               <label id="timezone-endtime"
                      class="text-link"
                      collapsed="true"
                      crop="end"
                      disable-on-readonly="true"
                      flex="1"
                      hyperlink="true"
                      onclick="showTimezonePopup(event, gEndTime.getInTimezone(gEndTimezone), editEndTimezone)"/>
             </hbox>
           </hbox>
         </vbox>
-      </row>
+      </html:td>
+    </html:tr>
 
-      <row id="event-grid-todo-status-row"
-           class="todo-only"
-           align="center">
+    <html:tr id="event-grid-todo-status-row" class="todo-only">
+      <html:th>
         <label id="todo-status-label"
                value="&task.status.label;"
                accesskey="&task.status.accesskey;"
                control="todo-status"
                disable-on-readonly="true"/>
+      </html:th>
+      <html:td id="event-grid-todo-status-td">
         <hbox id="event-grid-todo-status-picker-box"
               align="center">
           <menulist id="todo-status"
                     class="todo-only"
                     disable-on-readonly="true"
                     oncommand="updateToDoStatus(this.value);">
             <menupopup id="todo-status-menupopup">
               <menuitem id="todo-status-none-menuitem"
@@ -347,42 +359,46 @@
               <menuitem id="todo-status-completed-menuitem"
                         label="&newevent.status.completed.label;"
                         value="COMPLETED"/>
               <menuitem id="todo-status-canceled-menuitem"
                         label="&newevent.todoStatus.cancelled.label;"
                         value="CANCELLED"/>
             </menupopup>
           </menulist>
-            <datepicker id="completed-date-picker"
-                        class="todo-only"
-                        disable-on-readonly="true"
-                        disabled="true"
-                        value=""/>
-            <html:input id="percent-complete-textbox" type="number" class="size3"
-                        min="0" max="100"
-                        disable-on-readonly="true"
-                        oninput="updateToDoStatus('percent-changed')"
-                        onselect="updateToDoStatus('percent-changed')"/>
-            <label id="percent-complete-label"
-                   class="todo-only"
-                   disable-on-readonly="true"
-                   value="&newtodo.percentcomplete.label;"/>
+          <datepicker id="completed-date-picker"
+                      class="todo-only"
+                      disable-on-readonly="true"
+                      disabled="true"
+                      value=""/>
+          <html:input id="percent-complete-textbox"
+                      type="number"
+                      class="size3 input-inline"
+                      min="0"
+                      max="100"
+                      disable-on-readonly="true"
+                      oninput="updateToDoStatus('percent-changed')"
+                      onselect="updateToDoStatus('percent-changed')"/>
+          <label id="percent-complete-label"
+                 class="todo-only"
+                 disable-on-readonly="true"
+                 value="&newtodo.percentcomplete.label;"/>
         </hbox>
-      </row>
-
-      <separator id="event-grid-recurrence-separator" class="groove"/>
+      </html:td>
+    </html:tr>
 
-      <!-- Recurrence -->
-      <row id="event-grid-recurrence-row"
-           align="center">
+    <!-- Recurrence -->
+    <html:tr id="event-grid-recurrence-row">
+      <html:th class="above-separator">
         <label value="&event.repeat.label;"
                accesskey="&event.repeat.accesskey;"
                control="item-repeat"
                disable-on-readonly="true"/>
+      </html:th>
+      <html:td id="event-grid-recurrence-td" class="above-separator">
         <hbox id="event-grid-recurrence-picker-box"
               align="center"
               flex="1">
           <menulist id="item-repeat"
                     disable-on-readonly="true"
                     oncommand="updateRepeat(null, true)">
             <menupopup id="item-repeat-menupopup">
               <menuitem id="repeat-none-menuitem"
@@ -408,51 +424,55 @@
                         label="&event.repeat.yearly.label;"
                         value="yearly"/>
               <menuseparator id="item-repeat-separator"/>
               <menuitem id="repeat-custom-menuitem"
                         label="&event.repeat.custom.label;"
                         value="custom"/>
             </menupopup>
           </menulist>
-          <deck id="repeat-deck" selectedIndex="-1">
-            <hbox id="repeat-untilDate" align="center">
-                <label value="&event.until.label;"
-                       accesskey="&event.until.accesskey;"
-                       control="repeat-until-datepicker"
-                       disable-on-readonly="true"/>
-                <datepicker id="repeat-until-datepicker" flex="1"
-                            type="forever"
-                            disable-on-readonly="true"
-                            onchange="if (onLoad.hasLoaded) { checkUntilDate(); }"
-                            value=""/>
+          <deck id="repeat-deck"
+                selectedIndex="-1">
+            <hbox id="repeat-untilDate"
+                  align="center">
+              <label value="&event.until.label;"
+                     accesskey="&event.until.accesskey;"
+                     control="repeat-until-datepicker"
+                     disable-on-readonly="true"/>
+              <datepicker id="repeat-until-datepicker"
+                          flex="1"
+                          type="forever"
+                          disable-on-readonly="true"
+                          onchange="if (onLoad.hasLoaded) { checkUntilDate(); }"
+                          value=""/>
             </hbox>
-            <vbox id="repeat-details" flex="1">
-                <label id="repeat-details-label"
-                       class="text-link"
-                       crop="right"
-                       disable-on-readonly="true"
-                       hyperlink="true"
-                       flex="1"
-                       onclick="if (onLoad.hasLoaded) { updateRepeat(); }"/>
+            <vbox id="repeat-details"
+                  flex="1">
+              <label id="repeat-details-label"
+                     class="text-link"
+                     crop="right"
+                     disable-on-readonly="true"
+                     hyperlink="true"
+                     flex="1"
+                     onclick="if (onLoad.hasLoaded) { updateRepeat(); }"/>
             </vbox>
           </deck>
         </hbox>
-      </row>
+      </html:td>
+    </html:tr>
 
-      <separator id="event-grid-alarm-separator"
-                 class="groove"/>
-
-      <!-- Reminder (Alarm) -->
-      <row id="event-grid-alarm-row"
-           align="center">
+    <!-- Reminder (Alarm) -->
+    <html:tr id="event-grid-alarm-row">
+      <html:th class="above-separator below-separator">
         <label value="&event.reminder.label;"
                accesskey="&event.reminder.accesskey;"
                control="item-alarm"
                disable-on-readonly="true"/>
+      </html:th>
+      <html:td class="above-separator below-separator">
         <hbox id="event-grid-alarm-picker-box"
               align="center">
           <menulist id="item-alarm"
                     disable-on-readonly="true"
                     oncommand="updateReminder()">
             <menupopup id="item-alarm-menupopup">
               <menuitem id="reminder-none-menuitem"
                         label="&event.reminder.none.label;"
@@ -544,32 +564,47 @@
                    class="text-link"
                    hidden="true"
                    disable-on-readonly="true"
                    flex="1"
                    hyperlink="true"
                    onclick="updateReminder()"/>
           </hbox>
         </hbox>
-      </row>
+      </html:td>
+    </html:tr>
 
-      <separator id="event-grid-tabbox-separator"
-                 class="groove"/>
+    <html:tr id="event-grid-link-row" hidden="hidden">
+      <html:th class="above-separator below-separator">
+        <label value="&event.url.label;"
+               control="url-link"/>
+      </html:th>
+      <html:td class="above-separator below-separator">
+        <label id="url-link"
+               class="text-link"
+               onclick="launchBrowser(this.getAttribute('href'), event)"
+               oncommand="launchBrowser(this.getAttribute('href'), event)"
+               crop="end"/>
+      </html:td>
+    </html:tr>
+  </html:table>
 
-      <!-- Multi purpose tab box -->
+  <vbox id="event-grid-tab-vbox" flex="1" class="below-separator">
+    <!-- Multi purpose tab box -->
+    <hbox id="event-grid-tab-box-row" flex="1">
       <tabbox id="event-grid-tabbox"
               selectedIndex="0"
               flex="1">
         <tabs id="event-grid-tabs">
           <tab id="event-grid-tab-description"
                label="&event.description.label;"
                accesskey="&event.description.accesskey;"/>
           <tab id="event-grid-tab-attachments"
                label="&event.attachments.label;"
-                accesskey="&event.attachments.accesskey;"/>
+               accesskey="&event.attachments.accesskey;"/>
           <tab id="event-grid-tab-attendees"
                label="&event.attendees.label;"
                accesskey="&event.attendees.accesskey;"
                collapsed="true"/>
         </tabs>
         <tabpanels id="event-grid-tabpanels"
                    flex="1">
           <tabpanel id="event-grid-tabpanel-description">
@@ -631,29 +666,18 @@
                     pack="start"/>
           <checkbox id="disallow-counter-checkbox"
                     label="&event.attendees.disallowcounter.label;"
                     accesskey="&event.attendees.disallowcounter.accesskey;"
                     tooltiptext="&event.attendees.disallowcounter.tooltip;"
                     pack="start"/>
         </hbox>
       </tabbox>
-
-      <separator id="event-grid-link-separator" class="groove" hidden="true"/>
-      <row id="event-grid-link-row" align="center" hidden="true">
-        <label value="&event.url.label;" control="url-link"/>
-        <label id="url-link"
-               class="text-link"
-               onclick="launchBrowser(this.getAttribute('href'), event)"
-               oncommand="launchBrowser(this.getAttribute('href'), event)"
-               crop="end"/>
-      </row>
-    </rows>
-  </grid>
-
+    </hbox>
+  </vbox>
 
   <popupset id="event-dialog-popupset">
     <menupopup id="attendee-popup">
       <menuitem id="attendee-popup-invite-menuitem"
                 label="&event.invite.attendees.label;"
                 accesskey="&event.invite.attendees.accesskey;"
                 command="cmd_attendees"
                 disable-on-readonly="true"/>
--- a/calendar/providers/gdata/content/gdata-lightning-item-iframe.js
+++ b/calendar/providers/gdata/content/gdata-lightning-item-iframe.js
@@ -16,47 +16,49 @@ var { cal } = ChromeUtils.import("resour
     let isGoogleCalendar = calendar.type == "gdata";
     let isTask = cal.item.isToDo(window.calendarItem);
     let isEvent = cal.item.isEvent(window.calendarItem);
     let isGoogleTask = isGoogleCalendar && isTask;
     let isGoogleEvent = isGoogleCalendar && isEvent;
 
     sendMessage({ command: "gdataIsTask", isGoogleTask: isGoogleTask });
 
-    let hideForTaskIds = [
-      "event-grid-location-row",
-
-      "event-grid-startdate-row",
+    let xulHideForTaskIds = [
       "timezone-endtime",
       "link-image-bottom",
 
       "event-grid-tab-attendees",
       "event-grid-tabpanel-attendees",
 
       "todo-status-none-menuitem",
       "todo-status-inprogress-menuitem",
       "todo-status-canceled-menuitem",
 
       "percent-complete-textbox",
       "percent-complete-label",
-
-      "event-grid-recurrence-row",
-      "event-grid-recurrence-separator",
-
-      "event-grid-alarm-row",
-      "event-grid-alarm-separator",
     ];
 
-    for (let id of hideForTaskIds) {
+    for (let id of xulHideForTaskIds) {
       let node = document.getElementById(id);
       if (node) {
         node.hidden = isGoogleTask;
       }
     }
 
+    let hideForTaskIds = [
+      "event-grid-location-row",
+      "event-grid-startdate-row",
+      "event-grid-recurrence-row",
+      "event-grid-alarm-row",
+    ];
+
+    for (let id of hideForTaskIds) {
+      document.getElementById(id).toggleAttribute("hidden", isGoogleTask);
+    }
+
     let duedate = document.getElementById("todo-duedate");
     let duetime =
       duedate._timepicker || // From Lightning 6.9 onwards
       document.getAnonymousElementByAttribute(duedate, "anonid", "time-picker");
     duetime.style.display = isGoogleTask ? "none" : "";
 
     if (gEndTime) {
       if (isGoogleTask) {
@@ -88,24 +90,25 @@ var { cal } = ChromeUtils.import("resour
       reminderList.value = "none";
     }
 
     document.getElementById("gdata-reminder-default-menuitem").style.display = hasDefaultReminders
       ? ""
       : "none";
 
     // Remove categories for Google Tasks
-    let categoriesLabel = document.getElementById("event-grid-category-color-row").firstChild;
-    let calendarLabel = document.getElementById("item-categories").nextSibling;
+    let categoriesLabel = document.getElementById("item-categories-label");
+    let calendarLabel = document.getElementById("item-calendar-label");
     if (!categoriesLabel.origLabel) {
       categoriesLabel.origLabel = categoriesLabel.value;
     }
 
-    setBooleanAttribute("item-categories", "hidden", isGoogleTask);
-    setBooleanAttribute(calendarLabel, "hidden", isGoogleTask);
+    document
+      .getElementById("event-grid-category-color-row")
+      .toggleAttribute("hidden", isGoogleTask);
 
     if (isGoogleTask) {
       categoriesLabel.value = calendarLabel.value;
     } else {
       categoriesLabel.value = categoriesLabel.origLabel;
     }
 
     return rv;
--- a/calendar/test/mozmill/shared-modules/test-item-editing-helpers.js
+++ b/calendar/test/mozmill/shared-modules/test-item-editing-helpers.js
@@ -27,37 +27,38 @@ function setupModule(module) {
     "window-helpers"
   ));
 
   ({ mark_failure } = collector.getModule("folder-display-helpers"));
 }
 // Lookup paths and path-snippets.
 // These 5 have to be used with itemEditLookup().
 var CATEGORY_LIST = `
-    id("event-grid-category-color-row")/id("event-grid-category-box")/id("item-categories")/
-    id("item-categories-popup")
+    id("event-grid")/id("event-grid-category-color-row")/id("event-grid-category-color-td")
+    /id("item-categories")/id("item-categories-popup")
 `;
 var REPEAT_DETAILS = `
-    id("event-grid-recurrence-row")/id("event-grid-recurrence-picker-box")/id("repeat-deck")/
-    id("repeat-details")/[0]
+    id("event-grid")/id("event-grid-recurrence-row")/id("event-grid-recurrence-td")/id("event-grid-recurrence-picker-box")/
+    id("repeat-deck")/id("repeat-details")/[0]
 `;
 var EVENT_TABPANELS = `
-    id("event-grid-tabbox")/id("event-grid-tabpanels")
+    id("event-grid-tab-vbox")/id("event-grid-tab-box-row")/id("event-grid-tabbox")/
+    id("event-grid-tabpanels")
 `;
 var DESCRIPTION_TEXTBOX = `
     ${EVENT_TABPANELS}/id("event-grid-tabpanel-description")/id("item-description")
 `;
 var ATTENDEES_ROW = `
     ${EVENT_TABPANELS}/id("event-grid-tabpanel-attendees")/{"flex":"1"}/
     {"flex":"1"}/id("item-attendees-box")/{"class":"item-attendees-row"}
 `;
 // Only for Tasks.
 var PERCENT_COMPLETE_INPUT = `
-    id("event-grid-todo-status-row")/id("event-grid-todo-status-picker-box")/
-    id("percent-complete-textbox")
+    id("event-grid")/id("event-grid-todo-status-row")/id("event-grid-todo-status-td")/
+    id("event-grid-todo-status-picker-box")/id("percent-complete-textbox")
 `;
 
 // To be appended to the path for a date- or timepicker.
 var DATE_INPUT = `
     anon({"class":"datepicker-menulist"})/anon({"class":"menulist-input"})
 `;
 var TIME_INPUT = `
     anon({"class":"timepicker-menulist"})/anon({"class":"menulist-input"})
@@ -108,60 +109,66 @@ function helpersForEditUI(controller) {
   let isEvent = cal.item.isEvent(controller.window.calendarItem);
 
   let obj = {
     iframeLookup: path => {
       let type = isEvent ? "event" : "task";
       return new elementslib.Lookup(
         controller.window.document,
         selector(`
-                /id("calendar-${type}-dialog-inner")/id("event-grid")/id("event-grid-rows")/
-                ${path}
+                /id("calendar-${type}-dialog-inner")/${path}
             `)
       );
     },
     getDateTimePicker: id => {
       let startId = isEvent ? "event-starttime" : "todo-entrydate";
       let endId = isEvent ? "event-endtime" : "todo-duedate";
       let path;
       switch (id) {
         case "STARTDATE":
           path = `
-                        id("event-grid-startdate-row")/id("event-grid-startdate-picker-box")/
+                        id("event-grid")/id("event-grid-startdate-row")/
+                        id("event-grid-startdate-td")/id("event-grid-startdate-picker-box")/
                         id("${startId}")/anon({"anonid":"datepicker"})/${DATE_INPUT}
                     `;
           break;
         case "ENDDATE":
           path = `
-                        id("event-grid-enddate-row")/[1]/id("event-grid-enddate-picker-box")/
+                        id("event-grid")/id("event-grid-enddate-row")/id("event-grid-enddate-td")/
+                        id("event-grid-enddate-vbox")/id("event-grid-enddate-picker-box")/
                         id("${endId}")/anon({"anonid":"datepicker"})/${DATE_INPUT}
                     `;
           break;
         case "STARTTIME":
           path = `
-                        id("event-grid-startdate-row")/id("event-grid-startdate-picker-box")/
+                        id("event-grid")/id("event-grid-startdate-row")/id("event-grid-startdate-td")/
+                        id("event-grid-startdate-picker-box")/
                         id("${startId}")/anon({"anonid":"timepicker"})/${TIME_INPUT}
                     `;
           break;
         case "ENDTIME":
           path = `
-                        id("event-grid-enddate-row")/[1]/id("event-grid-enddate-picker-box")/
+                        id("event-grid")/id("event-grid-enddate-row")/id("event-grid-enddate-td")/
+                        id("event-grid-enddate-vbox")/id("event-grid-enddate-picker-box")/
                         id("${endId}")/anon({"anonid":"timepicker"})/${TIME_INPUT}
                     `;
           break;
         case "UNTILDATE":
           path = `
-                        id("event-grid-recurrence-row")/id("event-grid-recurrence-picker-box")/
-                        id("repeat-deck")/id("repeat-untilDate")/id("repeat-until-datepicker")/
+                        id("event-grid")/id("event-grid-recurrence-row")/
+                        id("event-grid-recurrence-td")/
+                        id("event-grid-recurrence-picker-box")/id("repeat-deck")/
+                        id("repeat-untilDate")/id("repeat-until-datepicker")/
                         ${DATE_INPUT}
                     `;
           break;
         case "COMPLETEDDATE":
           path = `
-                        id("event-grid-todo-status-row")/
+                        id("event-grid")/id("event-grid-todo-status-row")/
+                        id("event-grid-todo-status-td")/
                         id("event-grid-todo-status-picker-box")/id("completed-date-picker")/
                         ${DATE_INPUT}
                     `;
           break;
       }
       return obj.iframeLookup(path);
     },
   };