Bug 1568189 - remove grid usage from calendar-task-view.xul. r=pmorris
authorKhushil Mistry <khushil324@gmail.com>
Wed, 14 Aug 2019 06:27:00 +0200
changeset 27323 1258058e269afaa92c16e175091f3b96ebc9be60
parent 27322 f32c71c705f6d0731225794e15718edf32fd0f4c
child 27324 f354e2beb4942767856a4018435e44247407e1d2
push id16282
push usermozilla@jorgk.com
push dateWed, 14 Aug 2019 22:03:20 +0000
treeherdercomm-central@f354e2beb494 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspmorris
bugs1568189
Bug 1568189 - remove grid usage from calendar-task-view.xul. r=pmorris
calendar/base/content/calendar-task-view.js
calendar/base/content/calendar-task-view.xul
calendar/base/themes/common/calendar-task-view.css
calendar/providers/memory/calMemoryCalendar.js
calendar/providers/storage/calStorageCalendar.js
calendar/test/mozmill/views/testTaskView.js
--- a/calendar/base/content/calendar-task-view.js
+++ b/calendar/base/content/calendar-task-view.js
@@ -28,117 +28,121 @@ var taskDetailsView = {
         }
 
         let dateFormatter = Cc["@mozilla.org/calendar/datetime-formatter;1"]
                               .getService(Ci.calIDateTimeFormatter);
 
         let item = document.getElementById("calendar-task-tree").currentTask;
         if (displayElement("calendar-task-details-container", item != null) &&
             displayElement("calendar-task-view-splitter", item != null)) {
-            displayElement("calendar-task-details-title-row", true);
+            document.getElementById("calendar-task-details-title-row").toggleAttribute("hidden", false);
             document.getElementById("calendar-task-details-title").textContent =
                 (item.title ? item.title.replace(/\n/g, " ") : "");
 
             let organizer = item.organizer;
-            if (displayElement("calendar-task-details-organizer-row", organizer != null)) {
+            if (!document.getElementById("calendar-task-details-organizer-row")
+                .toggleAttribute("hidden", !organizer)) {
                 let name = organizer.commonName;
                 if (!name || name.length <= 0) {
                     if (organizer.id && organizer.id.length) {
                         name = organizer.id;
                         let re = new RegExp("^mailto:(.*)", "i");
                         let matches = re.exec(name);
                         if (matches) {
                             name = matches[1];
                         }
                     }
                 }
-                if (displayElement("calendar-task-details-organizer-row", name && name.length)) {
-                    document.getElementById("calendar-task-details-organizer").value = name;
+                if (!document.getElementById("calendar-task-details-organizer-row")
+                    .toggleAttribute("hidden", !name)) {
+                    document.getElementById("calendar-task-details-organizer").textContent = name;
                 }
             }
 
             let priority = 0;
             if (item.calendar.getProperty("capabilities.priority.supported")) {
                 priority = parseInt(item.priority, 10);
             }
-            displayElement("calendar-task-details-priority-label", priority > 0);
+            document.getElementById("calendar-task-details-priority-row").toggleAttribute("hidden", priority == 0);
             displayElement("calendar-task-details-priority-low", priority >= 6 && priority <= 9);
             displayElement("calendar-task-details-priority-normal", priority == 5);
             displayElement("calendar-task-details-priority-high", priority >= 1 && priority <= 4);
 
             let status = item.getProperty("STATUS");
-            if (displayElement("calendar-task-details-status-row", status && status.length > 0)) {
+            if (!document.getElementById("calendar-task-details-status-row")
+                .toggleAttribute("hidden", !status)) {
                 let statusDetails = document.getElementById("calendar-task-details-status");
                 switch (status) {
                     case "NEEDS-ACTION": {
-                        statusDetails.value = cal.l10n.getCalString("taskDetailsStatusNeedsAction");
+                        statusDetails.textContent = cal.l10n.getCalString("taskDetailsStatusNeedsAction");
                         break;
                     }
                     case "IN-PROCESS": {
                         let percent = 0;
                         let property = item.getProperty("PERCENT-COMPLETE");
                         if (property != null) {
                             percent = parseInt(property, 10);
                         }
-                        statusDetails.value = cal.l10n.getCalString(
+                        statusDetails.textContent = cal.l10n.getCalString(
                             "taskDetailsStatusInProgress", [percent]
                         );
                         break;
                     }
                     case "COMPLETED": {
                         if (item.completedDate) {
                             let completedDate = item.completedDate.getInTimezone(
                                                     cal.dtz.defaultTimezone);
-                            statusDetails.value = cal.l10n.getCalString(
+                            statusDetails.textContent = cal.l10n.getCalString(
                                 "taskDetailsStatusCompletedOn",
                                 [dateFormatter.formatDateTime(completedDate)]
                             );
                         }
                         break;
                     }
                     case "CANCELLED": {
-                        statusDetails.value = cal.l10n.getCalString("taskDetailsStatusCancelled");
+                        statusDetails.textContent = cal.l10n.getCalString("taskDetailsStatusCancelled");
                         break;
                     }
                     default: {
-                        displayElement("calendar-task-details-status-row", false);
+                        document.getElementById("calendar-task-details-status-row")
+                            .toggleAttribute("hidden", true);
                         break;
                     }
                 }
             }
             let categories = item.getCategories({});
-            if (displayElement("calendar-task-details-category-row", categories.length > 0)) {
-                document.getElementById("calendar-task-details-category").value = categories.join(", ");
+            if (!document.getElementById("calendar-task-details-category-row")
+                .toggleAttribute("hidden", categories.length == 0)) {
+                document.getElementById("calendar-task-details-category").textContent = categories.join(", ");
             }
             document.getElementById("task-start-date").item = item;
             document.getElementById("task-due-date").item = item;
 
-            let taskStartRowLabel = document.getElementById("task-start-row-label");
             let taskStartDate = item[cal.dtz.startDateProp(item)];
-            taskStartRowLabel.style.visibility = taskStartDate ? "visible" : "collapse";
+            document.getElementById("task-start-row").toggleAttribute("hidden", !taskStartDate);
 
-            let taskDueRowLabel = document.getElementById("task-due-row-label");
             let taskDueDate = item[cal.dtz.endDateProp(item)];
-            taskDueRowLabel.style.visibility = taskDueDate ? "visible" : "collapse";
+            document.getElementById("task-due-row").toggleAttribute("hidden", !taskDueDate);
 
             let parentItem = item;
             if (parentItem.parentItem != parentItem) {
                 // XXXdbo Didn't we want to get rid of these checks?
                 parentItem = parentItem.parentItem;
             }
             let recurrenceInfo = parentItem.recurrenceInfo;
             let recurStart = parentItem.recurrenceStartDate;
-            if (displayElement("calendar-task-details-repeat-row", recurrenceInfo && recurStart)) {
+            if (!document.getElementById("calendar-task-details-repeat-row")
+                .toggleAttribute("hidden", !recurrenceInfo || !recurStart)) {
                 let kDefaultTimezone = cal.dtz.defaultTimezone;
                 let startDate = recurStart.getInTimezone(kDefaultTimezone);
                 let endDate = item.dueDate ? item.dueDate.getInTimezone(kDefaultTimezone) : null;
                 let detailsString = recurrenceRule2String(recurrenceInfo, startDate, endDate, startDate.isDate);
                 if (detailsString) {
                     let rpv = document.getElementById("calendar-task-details-repeat");
-                    rpv.value = detailsString.split("\n").join(" ");
+                    rpv.textContent = detailsString.split("\n").join(" ");
                 }
             }
             let textbox = document.getElementById("calendar-task-details-description");
             let description = item.hasProperty("DESCRIPTION") ? item.getProperty("DESCRIPTION") : null;
             textbox.value = description;
             textbox.readOnly = true;
             let attachmentRows = document.getElementById("calendar-task-details-attachment-rows");
             removeChildren(attachmentRows);
--- a/calendar/base/content/calendar-task-view.xul
+++ b/calendar/base/content/calendar-task-view.xul
@@ -9,17 +9,18 @@
 
 <!DOCTYPE overlay [
   <!ENTITY % dtd1 SYSTEM "chrome://calendar/locale/calendar.dtd" > %dtd1;
   <!ENTITY % dtd2 SYSTEM "chrome://calendar/locale/calendar-event-dialog.dtd" > %dtd2;
   <!ENTITY % dtd3 SYSTEM "chrome://calendar/locale/menuOverlay.dtd" > %dtd3;
 ]>
 
 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-  xmlns:html="http://www.w3.org/1999/xhtml">
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script src="chrome://calendar/content/calFilter.js"/>
   <script src="chrome://calendar/content/calendar-task-tree-utils.js"/>
   <script src="chrome://calendar/content/calendar-task-tree-view.js"/>
   <script src="chrome://calendar/content/calendar-task-tree.js"/>
   <script src="chrome://calendar/content/calendar-task-view.js"/>
   <script src="chrome://calendar/content/calendar-dialog-utils.js"/>
   <script src="chrome://calendar/content/calApplicationUtils.js"/>
   <script src="chrome://calendar/content/calendar-item-bindings.js"/>
@@ -62,162 +63,156 @@
               context="taskitem-context-menu"/>
         <splitter id="calendar-task-view-splitter" collapse="none" persist="state" class="calendar-splitter"/>
         <vbox id="calendar-task-details-container"
               class="main-header-area"
               flex="1"
               persist="height"
               hidden="true">
           <hbox id="calendar-task-details">
-            <grid id="calendar-task-details-grid" flex="1">
-              <columns id="calendar-task-details-columns">
-                <column id="calendar-header-name-column"/>
-                <column id="calendar-header-value-column" flex="1"/>
-              </columns>
-
-              <rows id="calendar-task-details-rows">
-                <row id="calendar-task-details-priority-row"
-                     align="end">
-                  <hbox pack="end">
-                    <label id="calendar-task-details-priority-label"
-                           value="&calendar.task-details.priority.label;"
-                           class="task-details-name"
-                           hidden="true"/>
-                  </hbox>
-                  <hbox flex="1" align="end" >
+            <hbox id="other-actions-box">
+              <vbox id="task-actions-toolbox">
+                <hbox id="task-actions-toolbar" class="toolbar">
+                  <toolbarbutton id="task-actions-category"
+                                 type="menu"
+                                 label="&calendar.unifinder.tree.categories.label;"
+                                 tooltiptext="&calendar.task.category.button.tooltip;"
+                                 command="calendar_task_category_command"
+                                 observes="calendar_task_category_command"
+                                 class="toolbarbutton-1 msgHeaderView-button">
+                    <menupopup id="task-actions-category-popup"
+                               onpopupshowing="taskDetailsView.loadCategories(event);"
+                               onpopuphiding="return taskDetailsView.saveCategories(event);">
+                      <html:input id="task-actions-category-textbox"
+                                  placeholder="&event.categories.textbox.label;"
+                                  onblur="this.parentNode.removeAttribute(&quot;ignorekeys&quot;);"
+                                  onfocus="this.parentNode.setAttribute(&quot;ignorekeys&quot;, &quot;true&quot;);"
+                                  onkeypress="taskDetailsView.categoryTextboxKeypress(event);"/>
+                      <menuseparator/>
+                    </menupopup>
+                  </toolbarbutton>
+                  <toolbarbutton is="toolbarbutton-menu-button" id="task-actions-markcompleted"
+                                 type="menu-button"
+                                 label="&calendar.context.markcompleted.label;"
+                                 tooltiptext="&calendar.task.complete.button.tooltip;"
+                                 command="calendar_toggle_completed_command"
+                                 observes="calendar_toggle_completed_command"
+                                 class="toolbarbutton-1 msgHeaderView-button">
+                    <menupopup is="calendar-task-progress-menupopup" id="task-actions-markcompleted-menupopup"/>
+                  </toolbarbutton>
+                  <toolbarbutton id="task-actions-priority"
+                                 type="menu"
+                                 label="&calendar.context.priority.label;"
+                                 tooltiptext="&calendar.task.priority.button.tooltip;"
+                                 command="calendar_general-priority_command"
+                                 observes="calendar_general-priority_command"
+                                 class="toolbarbutton-1 msgHeaderView-button">
+                    <menupopup is="calendar-task-priority-menupopup" id="task-actions-priority-menupopup"/>
+                  </toolbarbutton>
+                  <toolbarbutton id="calendar-delete-task-button"
+                                 class="toolbarbutton-1 msgHeaderView-button"
+                                 label="&calendar.taskview.delete.label;"
+                                 tooltiptext="&calendar.context.deletetask.label;"
+                                 observes="calendar_delete_todo_command"/>
+                </hbox>
+              </vbox>
+            </hbox>
+            <hbox>
+              <html:table id="calendar-task-details-grid">
+                <html:tr id="calendar-task-details-title-row"
+                         hidden="hidden">
+                  <html:th class="task-details-name">
+                    &calendar.task-details.title.label;
+                  </html:th>
+                  <html:td id="calendar-task-details-title"
+                           class="task-details-value">
+                  </html:td>
+                </html:tr>
+                <html:tr id="calendar-task-details-priority-row"
+                         hidden="hidden">
+                  <html:th id="calendar-task-details-priority-label"
+                           class="task-details-name">
+                    &calendar.task-details.priority.label;
+                  </html:th>
+                  <html:td id="calendar-task-details-priority-td">
                     <label id="calendar-task-details-priority-low"
                            value="&calendar.task-details.priority.low.label;"
                            class="task-details-value"
-                           crop="end"
-                           flex="1"
                            hidden="true"/>
                     <label id="calendar-task-details-priority-normal"
                            value="&calendar.task-details.priority.normal.label;"
                            class="task-details-value"
-                           crop="end"
-                           flex="1"
                            hidden="true"/>
                     <label id="calendar-task-details-priority-high"
                            value="&calendar.task-details.priority.high.label;"
                            class="task-details-value"
-                           crop="end"
-                           flex="1"
                            hidden="true"/>
-                    <hbox id="other-actions-box" align="end" flex="1" pack="end">
-                      <vbox id="task-actions-toolbox">
-                        <hbox id="task-actions-toolbar" class="toolbar">
-                          <toolbarbutton id="task-actions-category"
-                                         type="menu"
-                                         label="&calendar.unifinder.tree.categories.label;"
-                                         tooltiptext="&calendar.task.category.button.tooltip;"
-                                         command="calendar_task_category_command"
-                                         observes="calendar_task_category_command"
-                                         class="toolbarbutton-1 msgHeaderView-button">
-                              <menupopup id="task-actions-category-popup"
-                                         onpopupshowing="taskDetailsView.loadCategories(event);"
-                                         onpopuphiding="return taskDetailsView.saveCategories(event);">
-                                <html:input id="task-actions-category-textbox"
-                                            placeholder="&event.categories.textbox.label;"
-                                            onblur="this.parentNode.removeAttribute(&quot;ignorekeys&quot;);"
-                                            onfocus="this.parentNode.setAttribute(&quot;ignorekeys&quot;, &quot;true&quot;);"
-                                            onkeypress="taskDetailsView.categoryTextboxKeypress(event);"/>
-                                <menuseparator />
-                              </menupopup>
-                          </toolbarbutton>
-                          <toolbarbutton is="toolbarbutton-menu-button" id="task-actions-markcompleted"
-                                         type="menu-button"
-                                         label="&calendar.context.markcompleted.label;"
-                                         tooltiptext="&calendar.task.complete.button.tooltip;"
-                                         command="calendar_toggle_completed_command"
-                                         observes="calendar_toggle_completed_command"
-                                         class="toolbarbutton-1 msgHeaderView-button">
-                            <menupopup is="calendar-task-progress-menupopup" id="task-actions-markcompleted-menupopup"/>
-                          </toolbarbutton>
-                          <toolbarbutton id="task-actions-priority"
-                                         type="menu"
-                                         label="&calendar.context.priority.label;"
-                                         tooltiptext="&calendar.task.priority.button.tooltip;"
-                                         command="calendar_general-priority_command"
-                                         observes="calendar_general-priority_command"
-                                         class="toolbarbutton-1 msgHeaderView-button">
-                            <menupopup is="calendar-task-priority-menupopup" id="task-actions-priority-menupopup"/>
-                          </toolbarbutton>
-                          <toolbarbutton id="calendar-delete-task-button"
-                                         class="toolbarbutton-1 msgHeaderView-button"
-                                         label="&calendar.taskview.delete.label;"
-                                         tooltiptext="&calendar.context.deletetask.label;"
-                                         observes="calendar_delete_todo_command"/>
-                        </hbox>
-                      </vbox>
-                    </hbox>
-                  </hbox>
-                </row>
-                <row id="calendar-task-details-title-row"
-                     align="top"
-                     hidden="true">
-                  <label value="&calendar.task-details.title.label;"
-                         class="task-details-name"/>
-                  <label id="calendar-task-details-title"
-                         class="task-details-value"/>
-                </row>
-                <row id="calendar-task-details-organizer-row"
-                     align="top"
-                     hidden="true">
-                  <label value="&calendar.task-details.organizer.label;"
-                         class="task-details-name"/>
-                  <label id="calendar-task-details-organizer"
-                         class="task-details-value text-link"
-                         crop="end"
-                         onclick="sendMailToOrganizer()"/>
-                </row>
-                <row id="calendar-task-details-status-row"
-                     align="top"
-                     hidden="true">
-                  <label value="&calendar.task-details.status.label;"
-                         class="task-details-name"/>
-                  <label id="calendar-task-details-status"
-                         crop="end"
-                         class="task-details-value"/>
-                </row>
-                <row id="calendar-task-details-category-row"
-                     align="top"
-                     hidden="true">
-                  <label value="&calendar.task-details.category.label;"
-                         class="task-details-name"/>
-                  <label id="calendar-task-details-category"
-                         crop="end"
-                         class="task-details-value"/>
-                </row>
-                <row class="item-date-row">
-                  <label id="task-start-row-label"
-                         class="headline"
-                         value="&calendar.task-details.start.label;"
-                         align="end"
-                         control="task-start-date"/>
-                  <html:input is="calendar-item-date-input" id="task-start-date" mode="start"/>
-                </row>
-                <row class="item-date-row">
-                  <label id="task-due-row-label"
-                         class="headline"
-                         value="&calendar.task-details.due.label;"
-                         align="end"
-                         control="task-due-date"/>
-                  <html:input is="calendar-item-date-input" id="task-due-date" mode="end"/>
-                </row>
-                <row id="calendar-task-details-repeat-row"
-                     align="top"
-                     hidden="true">
-                  <label value="&calendar.task-details.repeat.label;"
-                         class="task-details-name"/>
-                  <label id="calendar-task-details-repeat"
-                         crop="end"
-                         class="task-details-value"/>
-                </row>
-              </rows>
-            </grid>
+                  </html:td>
+                </html:tr>
+                <html:tr id="calendar-task-details-organizer-row"
+                         hidden="hidden">
+                  <html:th class="task-details-name">
+                    &calendar.task-details.organizer.label;
+                  </html:th>
+                  <html:td id="calendar-task-details-organizer"
+                           class="task-details-value text-link"
+                           onclick="sendMailToOrganizer()">
+                  </html:td>
+                </html:tr>
+                <html:tr id="calendar-task-details-status-row"
+                         hidden="hidden">
+                  <html:th class="task-details-name">
+                    &calendar.task-details.status.label;
+                  </html:th>
+                  <html:td id="calendar-task-details-status"
+                           class="task-details-value">
+                  </html:td>
+                </html:tr>
+                <html:tr id="calendar-task-details-category-row"
+                         hidden="hidden">
+                  <html:th class="task-details-name">
+                    &calendar.task-details.category.label;
+                  </html:th>
+                  <html:td id="calendar-task-details-category"
+                           class="task-details-value">
+                  </html:td>
+                </html:tr>
+                <html:tr id="task-start-row"
+                         class="item-date-row"
+                         hidden="hidden">
+                  <html:th class="headline"
+                           control="task-start-date">
+                    &calendar.task-details.start.label;
+                  </html:th>
+                  <html:td>
+                    <html:input is="calendar-item-date-input" id="task-start-date" mode="start"/>
+                  </html:td>
+                </html:tr>
+                <html:tr id="task-due-row"
+                         class="item-date-row"
+                         hidden="hidden">
+                  <html:th class="headline"
+                           control="task-due-date">
+                    &calendar.task-details.due.label;
+                  </html:th>
+                  <html:td>
+                    <html:input is="calendar-item-date-input" id="task-due-date" mode="end"/>
+                  </html:td>
+                </html:tr>
+                <html:tr id="calendar-task-details-repeat-row"
+                         hidden="hidden">
+                  <html:th class="task-details-name">
+                    &calendar.task-details.repeat.label;
+                  </html:th>
+                  <html:td id="calendar-task-details-repeat"
+                           class="task-details-value">
+                  </html:td>
+                </html:tr>
+              </html:table>
+            </hbox>
           </hbox>
           <hbox id="calendar-task-details-description-wrapper" flex="1">
             <html:textarea id="calendar-task-details-description"/>
           </hbox>
           <hbox id="calendar-task-details-attachment-row"
                align="top"
                hidden="true">
             <hbox pack="end">
--- a/calendar/base/themes/common/calendar-task-view.css
+++ b/calendar/base/themes/common/calendar-task-view.css
@@ -1,34 +1,59 @@
 /* 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");
 
-#calendar-header-name-column,
+#calendar-task-details {
+    display: flex;
+    flex-direction: column;
+    min-height: 6ex;
+}
+
 #calendar-task-details-attachment-row > hbox {
     padding-inline-start: 0.1em;
 }
 
 #calendar-task-details-grid {
     padding-top: 1px;
     padding-inline-start: 0;
     padding-inline-end: 0;
     padding-bottom: 0.2em;
+    width: 100%;
+}
+
+#calendar-task-details-title {
+    font-weight: bold;
+}
+
+#calendar-task-details-grid > tr > th {
+    display: flex;
+    justify-content: end;
+    font-weight: normal;
+    white-space: nowrap;
+}
+
+#calendar-task-details-grid > tr > td {
+    padding-inline-start: 6px;
+    text-align: left;
+    width: 100%;
+}
+
+#calendar-task-details-grid > tr > td > label {
+    margin-inline-start: 0;
 }
 
 #other-actions-box {
+    display: flex;
+    justify-content: end;
     padding-bottom: 0.3em;
 }
 
-#calendar-task-details {
-    min-height: 6ex;
-}
-
 #task-addition-box {
     border-bottom: 1px solid ThreeDShadow;
 }
 
 :root[lwt-tree] #task-addition-box {
     background-color: var(--toolbar-bgcolor);
     background-image: none;
     color: var(--toolbar-color);
@@ -59,25 +84,33 @@
 }
 
 .task-details-name {
     text-align: right;
     color: windowtext;
     opacity: 0.5; /* lower contrast */
 }
 
-.item-date-row > .selectable-label {
+.item-date-row > td > input[is="calendar-item-date-input"] {
+    width: 100%;
+    background-color: ButtonFace;
+}
+
+#calendar-task-details-container:-moz-window-inactive input[is="calendar-item-date-input"] {
+    background-color: -moz-mac-chrome-inactive;
+}
+
+.item-date-row > td > input[is="calendar-item-date-input"] > .selectable-label {
     margin-top: 1px !important;
     margin-bottom: 2px !important;
-    margin-inline-start: 6px !important;
     margin-inline-end: 5px !important;
     background-color: inherit;
 }
 
-#calendar-task-details-grid > rows > .item-date-row > .headline {
+#calendar-task-details-grid > .item-date-row > .headline {
     font-weight: normal;
     color: windowtext;
     opacity: 0.5; /* lower contrast */
 }
 
 #calendar-task-details-attachment-row {
     margin-top: 3px;
 }
@@ -88,18 +121,18 @@
 
 .task-details-value {
     text-align: left;
     color: WindowText;
 }
 
 :root[lwt-tree] .task-details-name,
 :root[lwt-tree] .task-details-value,
-:root[lwt-tree] .item-date-row > .selectable-label,
-:root[lwt-tree] #calendar-task-details-grid > rows > .item-date-row > .headline {
+:root[lwt-tree] .item-date-row > td > input[is="calendar-item-date-input"] > .selectable-label,
+:root[lwt-tree] #calendar-task-details-grid > .item-date-row > .headline {
     color: inherit;
 }
 
 #calendar-task-tree {
     min-height: 98px;
 }
 
 #calendar-task-tree-detail {
@@ -114,20 +147,16 @@
 #view-task-edit-field {
     margin: 5px;
 }
 
 .task-edit-field[readonly="true"] {
     color: GrayText;
 }
 
-#calendar-task-details-title {
-    font-weight: bold;
-}
-
 #unifinder-task-edit-field {
     margin: 3px;
 }
 
 #unifinder-todo-tree > .calendar-task-tree {
     margin-bottom: 3px;
 }
 
--- a/calendar/providers/memory/calMemoryCalendar.js
+++ b/calendar/providers/memory/calMemoryCalendar.js
@@ -86,16 +86,18 @@ calMemoryCalendar.prototype = {
     // calICalendar interface
     //
 
     getProperty: function(aName) {
         switch (aName) {
             case "cache.supported":
             case "requiresNetwork":
                 return false;
+            case "capabilities.priority.supported":
+                return true;
             case "removemodes":
                 return ["delete"];
         }
         return this.__proto__.__proto__.getProperty.apply(this, arguments);
     },
 
     // readonly attribute AUTF8String type;
     get type() { return "memory"; },
--- a/calendar/providers/storage/calStorageCalendar.js
+++ b/calendar/providers/storage/calStorageCalendar.js
@@ -135,16 +135,18 @@ calStorageCalendar.prototype = {
     //
 
     getProperty: function(aName) {
         switch (aName) {
             case "cache.supported":
                 return false;
             case "requiresNetwork":
                 return false;
+            case "capabilities.priority.supported":
+                return true;
             case "capabilities.removeModes":
                 return ["delete"];
         }
         return this.__proto__.__proto__.getProperty.apply(this, arguments);
     },
 
     // readonly attribute AUTF8String type;
     get type() { return "storage"; },
--- a/calendar/test/mozmill/views/testTaskView.js
+++ b/calendar/test/mozmill/views/testTaskView.js
@@ -92,30 +92,28 @@ function testTaskView() {
     controller.assert(() => taskTreeNode.mTaskArray.length < 2, "Task added but should not have been");
     controller.assert(() => taskTreeNode.mTaskArray.length > 0, "Task removed but should not have been");
 
     // Verify description and status in details pane.
     controller.assertValue(lookup(`
         ${TASK_VIEW}/{"flex":"1"}/id("calendar-task-details-container")/{"flex":"1"}/
         id("calendar-task-details-description")
     `), DESCRIPTION);
-    controller.assertValue(eid("calendar-task-details-status"), "Needs Action");
+    controller.assertJSProperty(eid("calendar-task-details-status"), "textContent", "Needs Action");
 
     // This is a hack.
     taskTreeNode.getTaskAtRow(0).calendar.setProperty("capabilities.priority.supported", true);
 
     // Set high priority and verify it in detail pane.
     controller.click(eid("task-actions-priority"));
     sleep();
     controller.click(lookup(
         `${TASK_VIEW}/{"flex":"1"}/id("calendar-task-details-container")/
-        id("calendar-task-details")/id("calendar-task-details-grid")/
-        id("calendar-task-details-rows")/
-        id("calendar-task-details-priority-row")/{"flex":"1"}/
-        id("other-actions-box")/id("task-actions-toolbox")/id("task-actions-toolbar")/
+        id("calendar-task-details")/id("other-actions-box")/
+        id("task-actions-toolbox")/id("task-actions-toolbar")/
         id("task-actions-priority")/id("task-actions-priority-menupopup")/
         {"class":"popup-internal-box"}/{"class":"priority-1-menuitem"}`));
     sleep();
     let priorityNode = eid("calendar-task-details-priority-high");
     controller.assertNotDOMProperty(priorityNode, "hidden");
 
     // Verify that tooltip shows status, priority and percent complete.
     let toolTipNode = lookup(toolTip).getNode();