Bug 1558599 - Make Lightning work with the new appmenu. r=mkmelin
authorPaul Morris <paul@paulwmorris.com>
Fri, 21 Jun 2019 21:57:44 -0400
changeset 36004 80baeab83f559a623bed894efe753991cb8574af
parent 36003 4cd00a290f7a4172c4409c1cadc1ab3a1d260bdb
child 36005 f0df11ad8ffaac7c7bad10c71f061971b9946894
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1558599
Bug 1558599 - Make Lightning work with the new appmenu. r=mkmelin
calendar/base/content/calendar-chrome-startup.js
calendar/base/content/calendar-ui-utils.js
calendar/lightning/content/lightning-menus.xul
mail/components/customizableui/content/panelUI.inc.xul
--- a/calendar/base/content/calendar-chrome-startup.js
+++ b/calendar/base/content/calendar-chrome-startup.js
@@ -36,16 +36,19 @@ async function commonInitCalendar() {
     scheduleMidnightUpdate(refreshUIBits);
 
     // Set up the command controller from calendar-common-sets.js
     injectCalendarCommandController();
 
     // Set up appmenus.
     setUpCalendarAppMenus();
 
+    // Set up calendar menu items in the appmenu.
+    setUpCalendarAppMenuItems();
+
     // Set up item and day selection listeners
     getViewDeck().addEventListener("dayselect", observeViewDaySelect);
     getViewDeck().addEventListener("itemselect", calendarController.onSelectionChanged, true);
 
     // Start alarm service
     Cc["@mozilla.org/calendar/alarm-service;1"].getService(Ci.calIAlarmService).startup();
     document.getElementById("calsidebar_splitter").addEventListener("command", onCalendarViewResize);
     window.addEventListener("resize", onCalendarViewResize, true);
@@ -186,16 +189,38 @@ function setUpCalendarAppMenus(remove) {
 /**
  * Tear down calendar appmenus by removing event listeners from the appmenu button.
  */
 function tearDownCalendarAppMenus() {
     setUpCalendarAppMenus(true);
 }
 
 /**
+ * Event listener used to refresh the "Events and Tasks" menu/view in the appmenu.
+ */
+function refreshEventsAndTasksMenu(event) {
+    changeMenuForTask(event);
+    setupDeleteMenuitem("appmenu_ltnDeleteSelectedCalendar");
+}
+
+/**
+ * Set up calendar menu items that are in the appmenu. (Needed because there is no "onpopupshowing"
+ * event for appmenu menus/views.)
+ */
+function setUpCalendarAppMenuItems() {
+    // Refresh the "Events and Tasks" menu when it is shown.
+    document.getElementById("appmenu_Event_Task_View")
+        .addEventListener("ViewShowing", refreshEventsAndTasksMenu);
+
+    // Refresh the "View" / "Calendar" / "Calendar Pane" menu when it is shown.
+    document.getElementById("appmenu_ltnCalendarPaneView")
+        .addEventListener("ViewShowing", InitViewCalendarPaneMenu);
+}
+
+/**
  * Migrate calendar UI. This function is called at each startup and can be used
  * to change UI items that require js code intervention
  */
 function migrateCalendarUI() {
     const UI_VERSION = 3;
     let currentUIVersion = Services.prefs.getIntPref("calendar.ui.version", 0);
     if (currentUIVersion >= UI_VERSION) {
         return;
--- a/calendar/base/content/calendar-ui-utils.js
+++ b/calendar/base/content/calendar-ui-utils.js
@@ -1,16 +1,17 @@
 /* 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/. */
 
 /* exported getElementValue, setBooleanAttribute, showElement, hideElement,
  *          uncollapseElement, collapseElement, disableElementWithLock,
  *          enableElementWithLock, uncheckChildNodes, removeChildren,
  *          appendCalendarItems, setAttributeToChildren, checkRadioControl,
+ *          checkRadioControlAppmenu,
  *          processEnableCheckbox, updateListboxDeleteButton,
  *          updateUnitLabelPlural, updateMenuLabelsPlural, menuListSelectItem,
  *          getOptimalMinimumWidth, getOptimalMinimumHeight,
  *          getOtherOrientation, updateSelectedLabel, setupAttendanceMenu
  */
 
 /* import-globals-from ../../../../toolkit/content/globalOverlay.js */
 
@@ -368,44 +369,61 @@ function setAttributeToChildren(aParent,
             }
         }
     }
 }
 
 /**
  * Checks a radio control or a radio-menuitem.
  *
- * @param aParent  The parent node of the 'radio controls', either radios
- *                  or menuitems of the type 'radio'.
- * @param avalue   The value of the radio control bound to be checked.
- * @return         True or false depending on if the a 'radio control' with the
- *                  given value could be checked.
+ * @param {Element} parent  The parent node of the 'radio controls', either:
+ *                           - `radio` elements
+ *                           - `menuitem` elements of type 'radio'
+ *                           - `toolbarbutton` elements of type 'radio' (e.g. in appmenu)
+ * @param {string} value    The value of the radio control bound to be checked.
+ * @return {boolean}        Whether the 'radio control' could be checked.
  */
-function checkRadioControl(aParent, aValue) {
-    for (let i = 0; i < aParent.childNodes.length; i++) {
-        let element = aParent.childNodes[i];
+function checkRadioControl(parent, value) {
+    for (const element of parent.childNodes) {
         if (element.hasAttribute("value")) {
             let compValue = element.getAttribute("value");
-            if (compValue == aValue) {
-                if (element.localName == "menuitem") {
+            if (compValue == value) {
+                if (element.localName == "menuitem" || element.localName == "toolbarbutton") {
                     if (element.getAttribute("type") == "radio") {
                         element.setAttribute("checked", "true");
                         return true;
                     }
                 } else if (element.localName == "radio") {
                     element.radioGroup.selectedItem = element;
                     return true;
                 }
             }
         }
     }
     return false;
 }
 
 /**
+ * Checks a `toolbarbutton` of type "radio" in the appmenu. (For some reason we
+ * need to clear all the checked values before checking the new one.)
+ *
+ * @param {Element} parent  The parent node that contains the radio elements.
+ * @param {string} value    The value of the radio element to be checked.
+ * @return {boolean}        Whether the radio element could be checked.
+ */
+function checkRadioControlAppmenu(parent, value) {
+    for (const node of parent.childNodes) {
+        if (node.localName == "toolbarbutton" && node.getAttribute("type") == "radio") {
+            node.removeAttribute("checked");
+        }
+    }
+    return checkRadioControl(parent, value);
+}
+
+/**
  * Enables or disables the given element depending on the checkbox state.
  *
  * @param checkboxId    The ID of the XUL checkbox element.
  * @param elementId     The element to change the disabled state on.
  */
 function processEnableCheckbox(checkboxId, elementId) {
     let checked = document.getElementById(checkboxId).checked;
     setElementValue(elementId, !checked && "true", "disabled");
--- a/calendar/lightning/content/lightning-menus.xul
+++ b/calendar/lightning/content/lightning-menus.xul
@@ -480,344 +480,473 @@
       </menupopup>
     </menu>
   </menupopup>
 
   <menupopup id="toolbar-context-menu"
              onpopupshowing="onToolbarsPopupShowingForTabType(event);"/>
 
 <!-- AppMenu integration -->
-  <menupopup id="appmenu_newMenupopup">
-    <menuitem id="appmenu_ltnNewEvent"
-              label="&lightning.menupopup.new.event.label;"
-              insertbefore="appmenu_newFolder"
-              command="calendar_new_event_command"
-              observes="calendar_new_event_command"/>
-    <menuitem id="appmenu_ltnNewTask"
-              label="&lightning.menupopup.new.task.label;"
-              insertbefore="appmenu_newFolder"
-              command="calendar_new_todo_command"
-              observes="calendar_new_todo_command"/>
-    <menuseparator id="appmenu_afterltnNewTask"
+
+  <!-- Calendar menu items added to appmenu menus -->
+
+  <!-- Main Appmenu View -->
+  <vbox id="appMenu-mainViewItems">
+    <toolbarbutton id="appmenu_Event_Task"
+                   class="subviewbutton subviewbutton-nav"
+                   label="&lightning.menu.eventtask.label;"
+                   insertafter="appmenu_messageMenu"
+                   closemenu="none"
+                   oncommand="PanelUI.showSubView('appmenu_Event_Task_View', this)"/>
+  </vbox>
+
+  <!-- New -->
+  <vbox id="appMenu-newViewItems">
+    <toolbarbutton id="appmenu_ltnNewEvent"
+                   class="subviewbutton subviewbutton-iconic"
+                   label="&lightning.menupopup.new.event.label;"
+                   insertbefore="appmenu_newFolder"
+                   command="calendar_new_event_command"
+                   observes="calendar_new_event_command"/>
+    <toolbarbutton id="appmenu_ltnNewTask"
+                   class="subviewbutton subviewbutton-iconic"
+                   label="&lightning.menupopup.new.task.label;"
                    insertbefore="appmenu_newFolder"
-                   observes="appmenu_newFolder"/>
-    <menuitem id="appmenu_ltnNewCalendar" label="&lightning.menupopup.new.calendar.label;"
-               command="calendar_new_calendar_command"
-               observes="calendar_new_calendar_command"
-               insertafter="appmenu_newAccountMenuItem"/>
-  </menupopup>
-  <menupopup id="appmenu_FilePopup">
-    <menu id="appmenu_Open"
-          mode="calendar"
-          label="&lightning.menupopup.open.label;"
-          accesskey="&lightning.menupopup.open.accesskey;"
-          insertbefore="appmenu_openMessageFileMenuitem">
-      <menupopup id="appmenu_OpenPopup">
-        <menuitem id="appmenu_OpenMessageFileMenuitem"
-                  label="&lightning.menupopup.open.message.label;"
-                  accesskey="&lightning.menupopup.open.message.accesskey;"
-                  oncommand="MsgOpenFromFile();"/>
-        <menuitem id="appmenu_OpenCalendarFileMenuitem"
-                  label="&lightning.menupopup.open.calendar.label;"
-                  accesskey="&lightning.menupopup.open.calendar.accesskey;"
-                  oncommand="openLocalCalendar();"/>
-      </menupopup>
-    </menu>
-  </menupopup>
-  <menuitem id="appmenu_openMessageFileMenuitem" hidden="true"/>
-  <menupopup id="appmenu_View_Popup">
-    <menuseparator id="appmenu_ltnViewMenuSeparator"/>
-    <menu id="appmenu_ltnTodayPaneMenu"
-          label="&calendar.context.button.label;">
-      <menupopup id="appmenu_ltnTodayPaneMenuPopup">
-        <menuitem id="appmenu_ltnShowTodayPane-2"
-                  label="&todaypane.showTodayPane.label;"
-                  type="checkbox"
-                  command="calendar_toggle_todaypane_command"/>
-        <menuseparator id="appmenu_ltnSeparatorBeforeDisplayMiniday"/>
-        <menuitem id="appmenu_ltnTodayPaneDisplayMiniday"
-                  name="minidisplay"
-                  value="miniday"
-                  type="radio"
-                  oncommand="TodayPane.displayMiniSection('miniday')"
-                  observes="ltnTodayPaneDisplayMiniday"
-                  label="&todaypane.showMiniday.label;"/>
-        <menuitem id="appmenu_ltnTodayPaneDisplayMinimonth"
-                  name="minidisplay"
-                  value="minimonth"
-                  type="radio"
-                  oncommand="TodayPane.displayMiniSection('minimonth')"
-                  observes="ltnTodayPaneDisplayMinimonth"
-                  label="&todaypane.showMinimonth.label;"/>
-        <menuitem id="appmenu_ltnTodayPaneDisplayNone"
-                  name="minidisplay"
-                  value="none"
-                  type="radio"
-                  oncommand="TodayPane.displayMiniSection('none')"
-                  observes="ltnTodayPaneDisplayNone"
-                  label="&todaypane.showNone.label;"/>
-      </menupopup>
-    </menu>
-    <menu id="appmenu_ltnCalendarMenu"
-          observes="calendar_in_foreground"
-          insertbefore="viewSortMenuSeparator"
-          label="&lightning.menu.view.calendar.label;">
-      <menupopup id="appmenu_ltnCalendarMenuPopup">
-        <menuitem id="appmenu_ltnChangeViewDay"
-                  label="&lightning.toolbar.day.label;"
-                  type="radio"
-                  name="calendarMenuViews"
-                  command="calendar_day-view_command"/>
-        <menuitem id="appmenu_ltnChangeViewWeek"
-                  label="&lightning.toolbar.week.label;"
-                  type="radio"
-                  name="calendarMenuViews"
-                  command="calendar_week-view_command"/>
-        <menuitem id="appmenu_ltnChangeViewMultiweek"
-                  label="&lightning.toolbar.multiweek.label;"
-                  type="radio"
-                  name="calendarMenuViews"
-                  command="calendar_multiweek-view_command"/>
-        <menuitem id="appmenu_ltnChangeViewMonth"
-                  label="&lightning.toolbar.month.label;"
-                  type="radio"
-                  name="calendarMenuViews"
-                  command="calendar_month-view_command"/>
-        <menuseparator id="appmenu_ltnBeforeCalendarViewSection"/>
-        <menu id="appmenu_ltnCalendarPaneMenu"
-              label="&lightning.toolbar.calendarmenu.label;">
-          <menupopup id="appmenu_ltnCalendarPanePopup"
-                     onpopupshowing="InitViewCalendarPaneMenu()">
-            <menuitem id="appmenu_ltnViewCalendarPane"
-                      type="checkbox"
-                      label="&lightning.toolbar.calendarpane.label;"
-                      command="calendar_toggle_calendarsidebar_command"/>
-            <menuseparator id="appmenu_ltnCalendarPaneMenuSeparator"/>
-            <menuitem id="appmenu_ltnTasksViewMinimonth"
-                      type="checkbox"
-                      label="&calendar.tasks.view.minimonth.label;"
-                      command="calendar_toggle_minimonthpane_command"/>
-            <menuitem id="appmenu_ltnTasksViewCalendarlist"
-                      type="checkbox"
-                      label="&calendar.tasks.view.calendarlist.label;"
-                      command="calendar_toggle_calendarlist_command"/>
-          </menupopup>
-        </menu>
-        <menuseparator id="appmenu_ltnBeforeCurrentViewMenu"/>
-        <menu id="appmenu_ltnCalendarCurrentViewMenu"
-              observes="calendar_mode_calendar"
-              label="&showCurrentView.label;">
-          <menupopup id="appmenu_ltnCalendarCurrentViewMenuPopup">
-            <menuitem type="checkbox"
-                      id="appmenu_ltnWorkdaysOnlyMenuitem"
-                      label="&calendar.onlyworkday.checkbox.label;"
-                      observes="calendar_toggle_workdays_only_command"/>
-            <menuitem type="checkbox"
-                      id="appmenu_ltnTasksInViewMenuitem"
-                      label="&calendar.displaytodos.checkbox.label;"
-                      observes="calendar_toggle_tasks_in_view_command"/>
-            <menuitem type="checkbox"
-                      id="appmenu_ltnShowCompletedInViewMenuItem"
-                      label="&calendar.completedtasks.checkbox.label;"
-                      observes="calendar_toggle_show_completed_in_view_command"/>
-            <menuitem type="checkbox"
-                      id="appmenu_ltnViewRotated"
-                      label="&calendar.orientation.label;"
-                      command="calendar_toggle_orientation_command"
-                      observes="calendar_toggle_orientation_command"/>
-          </menupopup>
-        </menu>
-      </menupopup>
-    </menu>
-    <menu id="appmenu_ltnTasksMenu"
-          observes="calendar_mode_task"
-          insertbefore="viewSortMenuSeparator"
-          label="&lightning.menu.view.tasks.label;">
-      <menupopup id="appmenu_ltnTasksMenuPopup">
-        <observes element="filterBroadcaster"
-                  attribute="value"
-                  onbroadcast="checkRadioControl(this.parentNode, document.getElementById(this.getAttribute('element')).getAttribute('value'));"/>
-        <menuitem id="appmenu_ltnTasksViewFilterTasks"
-                  type="checkbox"
-                  label="&calendar.tasks.view.filtertasks.label;"
-                  command="calendar_toggle_filter_command"/>
-        <menuseparator id="appmenu_ltnTasksViewSeparator"/>
-        <menuitem id="appmenu_ltnTasksViewFilterCurrent"
-                  name="filtergroup"
-                  value="throughcurrent"
-                  type="radio"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.current.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterToday"
-                  name="filtergroup"
-                  value="throughtoday"
-                  type="radio"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.today.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterNext7days"
-                  name="filtergroup"
-                  value="throughsevendays"
-                  type="radio"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.next7days.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterNotstartedtasks"
-                  name="filtergroup"
-                  value="notstarted"
-                  type="radio"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.notstarted.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterOverdue"
-                  name="filtergroup"
-                  value="overdue"
-                  type="radio"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.overdue.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterCompleted"
-                  name="filtergroup"
-                  type="radio"
-                  value="completed"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.completed.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterOpen"
-                  name="filtergroup"
-                  type="radio"
-                  value="open"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.open.label;"/>
-        <menuitem id="appmenu_ltnTasksViewFilterAll"
-                  name="filtergroup"
-                  value="all"
-                  type="radio"
-                  command="calendar_task_filter_command"
-                  label="&calendar.task.filter.all.label;"/>
-      </menupopup>
-    </menu>
-  </menupopup>
+                   command="calendar_new_todo_command"
+                   observes="calendar_new_todo_command"/>
+    <toolbarseparator id="appmenu_afterltnNewTask"
+                      insertbefore="appmenu_newFolder"
+                      observes="appmenu_newFolder"/>
+    <toolbarbutton id="appmenu_ltnNewCalendar"
+                   class="subviewbutton subviewbutton-iconic"
+                   label="&lightning.menupopup.new.calendar.label;"
+                   command="calendar_new_calendar_command"
+                   observes="calendar_new_calendar_command"
+                   insertafter="appmenu_newAccountMenuItem"/>
+  </vbox>
+
+  <!-- File -->
+  <vbox id="appMenu-fileViewItems">
+    <toolbarbutton id="appmenu_Open"
+                   class="subviewbutton subviewbutton-nav"
+                   mode="calendar"
+                   label="&lightning.menupopup.open.label;"
+                   closemenu="none"
+                   accesskey="&lightning.menupopup.open.accesskey;"
+                   insertbefore="appmenu_openMessageFileMenuitem"
+                   oncommand="PanelUI.showSubView('appMenu-fileOpenView', this)"/>
+  </vbox>
+  <toolbarbutton id="appmenu_openMessageFileMenuitem"
+                 hidden="true"/>
 
-  <menupopup id="appmenu_GoPopup">
-    <menuitem id="appmenu_ltnGoToToday"
-              insertafter="appmenu_goNextSeparator"
-              label="&goTodayCmd.label;"
-              observes="calendar_go_to_today_command"/>
-  </menupopup>
+  <!-- View -->
+  <vbox id="appMenu-viewViewItems">
+    <toolbarseparator id="appmenu_ltnViewMenuSeparator"/>
+    <toolbarbutton id="appmenu_ltnTodayPaneMenu"
+                   class="subviewbutton subviewbutton-nav"
+                   label="&calendar.context.button.label;"
+                   closemenu="none"
+                   oncommand="PanelUI.showSubView('appmenu_ltnTodayPaneView', this)"/>
+    <toolbarbutton id="appmenu_ltnCalendarMenu"
+                   class="subviewbutton subviewbutton-nav"
+                   observes="calendar_in_foreground"
+                   insertbefore="viewSortMenuSeparator"
+                   label="&lightning.menu.view.calendar.label;"
+                   closemenu="none"
+                   oncommand="PanelUI.showSubView('appmenu_ltnCalendarMenuView', this)"/>
+    <toolbarbutton id="appmenu_ltnTasksMenu"
+                   class="subviewbutton subviewbutton-nav"
+                   observes="calendar_mode_task"
+                   insertbefore="viewSortMenuSeparator"
+                   label="&lightning.menu.view.tasks.label;"
+                   closemenu="none"
+                   oncommand="PanelUI.showSubView('appmenu_ltnTasksView', this)"/>
+  </vbox>
 
-  <menupopup id="appmenu_GoNextPopup">
-    <menuseparator id="appmenu_ltnGoNextSeparator"/>
+  <!-- Go -->
+  <vbox id="appMenu-goViewItems">
+    <toolbarbutton id="appmenu_ltnGoToToday"
+                   class="subviewbutton subviewbutton-iconic"
+                   insertafter="appmenu_goNextSeparator"
+                   label="&goTodayCmd.label;"
+                   observes="calendar_go_to_today_command"/>
+  </vbox>
+
+  <!-- Go / Next -->
+  <vbox id="appMenu-goNextViewItems">
+    <toolbarseparator id="appmenu_ltnGoNextSeparator"/>
+    <!-- Label is set up automatically using the view id. When writing a
+         view extension, overlay this toolbarbutton and add a label-<myviewtype>
+         attribute with the correct label -->
+    <toolbarbutton id="appmenu_calendar-go-menu-next"
+                   class="subviewbutton subviewbutton-iconic"
+                   label=""
+                   label-day="&lightning.toolbar.day.label;"
+                   label-week="&lightning.toolbar.week.label;"
+                   label-multiweek="&lightning.toolbar.week.label;"
+                   label-month="&lightning.toolbar.month.label;"
+                   observes="calendar_view_next_command"/>
+  </vbox>
+
+  <!-- Go / Previous -->
+  <vbox id="appMenu-goPreviousViewItems">
+    <toolbarseparator id="appmenu_ltnGoPreviousSeparator"/>
     <!-- Label is set up automatically using the view id. When writing a
          view extension, overlay this menuitem and add a label-<myviewtype>
          attribute with the correct label -->
-    <menuitem id="appmenu_calendar-go-menu-next"
-              label=""
-              label-day="&lightning.toolbar.day.label;"
-              label-week="&lightning.toolbar.week.label;"
-              label-multiweek="&lightning.toolbar.week.label;"
-              label-month="&lightning.toolbar.month.label;"
-              observes="calendar_view_next_command"/>
-  </menupopup>
-  <menupopup id="appmenu_GoPreviousPopup">
-    <menuseparator id="appmenu_ltnGoPreviousSeparator"/>
-    <!-- Label is set up automatically using the view id. When writing a
-         view extension, overlay this menuitem and add a label-<myviewtype>
-         attribute with the correct label -->
-    <menuitem id="appmenu_calendar-go-menu-previous"
-              label=""
-              label-day="&lightning.toolbar.day.label;"
-              label-week="&lightning.toolbar.week.label;"
-              label-multiweek="&lightning.toolbar.week.label;"
-              label-month="&lightning.toolbar.month.label;"
-              observes="calendar_view_prev_command"/>
-  </menupopup>
+    <toolbarbutton id="appmenu_calendar-go-menu-previous"
+                   class="subviewbutton subviewbutton-iconic"
+                   label=""
+                   label-day="&lightning.toolbar.day.label;"
+                   label-week="&lightning.toolbar.week.label;"
+                   label-multiweek="&lightning.toolbar.week.label;"
+                   label-month="&lightning.toolbar.month.label;"
+                   observes="calendar_view_prev_command"/>
+  </vbox>
 
-  <vbox id="appmenuSecondaryPane">
-    <menu id="appmenu_Event_Task"
-          label="&lightning.menu.eventtask.label;"
-          insertafter="appmenu_messageMenu">
-      <menupopup id="appmenu_Event_Task_Popup" onpopupshowing="changeMenuForTask(event); setupDeleteMenuitem('appmenu_ltnDeleteSelectedCalendar')">
-        <menuitem id="appmenu_ltnMenuSwitchToCalendar"
-                  type="checkbox"
-                  label="&lightning.toolbar.calendar.label;"
-                  command="switch2calendar"
-                  autocheck="false">
+  <!-- Calendar submenus added to the appmenu -->
+  <panelmultiview id="appMenu-multiView">
+
+    <!-- Events and Tasks -->
+    <panelview id="appmenu_Event_Task_View"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_ltnMenuSwitchToCalendar"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&lightning.toolbar.calendar.label;"
+                       command="switch2calendar"
+                       autocheck="false">
           <observes element="modeBroadcaster"
                     attribute="mode"
                     onbroadcast="this.parentNode.setAttribute('checked', '' + document.getElementById('modeBroadcaster').getAttribute('mode') == 'calendar')"/>
-        </menuitem>
-        <menuitem id="appmenu_ltnMenuSwitchToTask"
-                  type="checkbox"
-                  label="&lightning.toolbar.task.label;"
-                  command="switch2task"
-                  autocheck="false">
+        </toolbarbutton>
+        <toolbarbutton id="appmenu_ltnMenuSwitchToTask"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&lightning.toolbar.task.label;"
+                       command="switch2task"
+                       autocheck="false">
           <observes element="modeBroadcaster"
                     attribute="mode"
                     onbroadcast="this.parentNode.setAttribute('checked', '' + document.getElementById('modeBroadcaster').getAttribute('mode') == 'task')"/>
-        </menuitem>
-        <menuseparator id="appmenu_ltnBeforeCalendarSection"/>
-        <menuitem id="appmenu_ltnExportCalendar"
-                  label="&calendar.export.label;"
-                  command="calendar_export_command"
-                  observes="calendar_export_command"/>
-        <menuitem id="appmenu_ltnImportCalendar"
-                  label="&calendar.import.label;"
-                  command="calendar_import_command"
-                  observes="calendar_import_command"/>
-        <menuitem id="appmenu_ltnPublishCalendar"
-                  label="&calendar.publish.label;"
-                  command="calendar_publish_calendar_command"
-                  observes="calendar_publish_calendar_command"/>
-        <menuitem id="appmenu_ltnDeleteSelectedCalendar"
-                  labeldelete="&calendar.deletecalendar.label;"
-                  labelremove="&calendar.removecalendar.label;"
-                  labelunsubscribe="&calendar.unsubscribecalendar.label;"
-                  accesskeydelete="&calendar.deletecalendar.accesskey;"
-                  accesskeyremove="&calendar.removecalendar.accesskey;"
-                  accesskeyunsubscribe="&calendar.unsubscribecalendar.accesskey;"
-                  command="calendar_delete_calendar_command"
-                  observes="calendar_delete_calendar_command"/>
-        <menuseparator id="ltnBeforeTaskActions"/>
-        <menuitem id="appmenu_ltnTaskActionsMarkCompletedMenuitem"
-                  type="checkbox"
-                  label="&calendar.context.markcompleted.label;"
-                  command="calendar_toggle_completed_command"
-                  observes="calendar_toggle_completed_command"/>
-        <menu id="appmenu_ltnTaskActionsPriorityMenuitem"
-              label="&calendar.context.priority.label;"
-              command="calendar_general-priority_command"
-              observes="calendar_general-priority_command">
-          <menupopup is="calendar-task-priority-menupopup"/>
-        </menu>
-        <menu id="appmenu_ltnTaskActionsProgressMenuitem"
-              label="&calendar.context.progress.label;"
-              command="calendar_general-progress_command"
-              observes="calendar_general-progress_command">
-          <menupopup is="calendar-task-progress-menupopup"/>
-        </menu>
-        <menu id="appmenu_ltnTaskActionsPostponeMenuitem"
-              label="&calendar.context.postpone.label;"
-              observes="calendar_general-postpone_command">
-          <menupopup id="appmenu_ltnTaskActionsPostponeMenuPopup">
-            <menuitem id="ltnTaskActionsPostponeMenu-1hour"
-                      label="&calendar.context.postpone.1hour.label;"
-                      observes="calendar_postpone-1hour_command"/>
-            <menuitem id="appmenu_ltnTaskActionsPostponeMenu-1day"
-                      label="&calendar.context.postpone.1day.label;"
-                      observes="calendar_postpone-1day_command"/>
-            <menuitem id="appmenu_ltnTaskActionsPostponeMenu-1week"
-                      label="&calendar.context.postpone.1week.label;"
-                      observes="calendar_postpone-1week_command"/>
-          </menupopup>
-        </menu>
-        <menuseparator id="appmenu_ltnBeforeUnifinderSection" />
-        <menuitem id="appmenu_ltnShowUnifinder"
-                  type="checkbox"
-                  checked="true"
-                  label="&showUnifinderCmd.label;"
-                  observes="calendar_show_unifinder_command"
-                  command="calendar_show_unifinder_command"/>
-        <menuseparator id="appmenu_ltnBeforeCalendarProperties" />
-        <menuitem id="appmenu_ltnCalendarProperties"
-                  insertafter="menu_properties"
-                  label="&calendar.properties.label;"
-                  command="calendar_edit_calendar_command"
-                  observes="calendar_edit_calendar_command"/>
-      </menupopup>
-    </menu>
-  </vbox>
+        </toolbarbutton>
+        <toolbarseparator id="appmenu_ltnBeforeCalendarSection"/>
+        <toolbarbutton id="appmenu_ltnExportCalendar"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&calendar.export.label;"
+                       command="calendar_export_command"
+                       observes="calendar_export_command"/>
+        <toolbarbutton id="appmenu_ltnImportCalendar"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&calendar.import.label;"
+                       command="calendar_import_command"
+                       observes="calendar_import_command"/>
+        <toolbarbutton id="appmenu_ltnPublishCalendar"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&calendar.publish.label;"
+                       command="calendar_publish_calendar_command"
+                       observes="calendar_publish_calendar_command"/>
+        <toolbarbutton id="appmenu_ltnDeleteSelectedCalendar"
+                       class="subviewbutton subviewbutton-iconic"
+                       labeldelete="&calendar.deletecalendar.label;"
+                       labelremove="&calendar.removecalendar.label;"
+                       labelunsubscribe="&calendar.unsubscribecalendar.label;"
+                       accesskeydelete="&calendar.deletecalendar.accesskey;"
+                       accesskeyremove="&calendar.removecalendar.accesskey;"
+                       accesskeyunsubscribe="&calendar.unsubscribecalendar.accesskey;"
+                       command="calendar_delete_calendar_command"
+                       observes="calendar_delete_calendar_command"/>
+        <toolbarseparator id="ltnBeforeTaskActions"/>
+        <toolbarbutton id="appmenu_ltnTaskActionsMarkCompletedMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.context.markcompleted.label;"
+                       command="calendar_toggle_completed_command"
+                       observes="calendar_toggle_completed_command"/>
+        <toolbarbutton id="appmenu_ltnTaskActionsPriorityMenuitem"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&calendar.context.priority.label;"
+                       command="calendar_general-priority_command"
+                       observes="calendar_general-priority_command"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appmenu_ltnTaskPriorityView', this)"/>
+        <toolbarbutton id="appmenu_ltnTaskActionsProgressMenuitem"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&calendar.context.progress.label;"
+                       command="calendar_general-progress_command"
+                       observes="calendar_general-progress_command"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appmenu_ltnTaskProgressView', this)"/>
+        <toolbarbutton id="appmenu_ltnTaskActionsPostponeMenuitem"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&calendar.context.postpone.label;"
+                       observes="calendar_general-postpone_command"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appmenu_ltnTaskActionsPostponeView', this)"/>
+        <toolbarseparator id="appmenu_ltnBeforeUnifinderSection" />
+        <toolbarbutton id="appmenu_ltnShowUnifinder"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       checked="true"
+                       label="&showUnifinderCmd.label;"
+                       observes="calendar_show_unifinder_command"
+                       command="calendar_show_unifinder_command"/>
+        <toolbarseparator id="appmenu_ltnBeforeCalendarProperties" />
+        <toolbarbutton id="appmenu_ltnCalendarProperties"
+                       class="subviewbutton subviewbutton-iconic"
+                       insertafter="menu_properties"
+                       label="&calendar.properties.label;"
+                       command="calendar_edit_calendar_command"
+                       observes="calendar_edit_calendar_command"/>
+      </vbox>
+    </panelview>
+
+    <!-- TODO: adapt these two custom elements for the new appmenu -->
+
+    <!-- Events and Tasks / Priority -->
+    <!-- <menupopup id="appmenu_ltnTaskPriorityView" is="calendar-task-priority-menupopup"/> -->
+
+    <!-- Events and Tasks / Progress -->
+    <!-- <menupopup id="appmenu_ltnTaskProgressView" is="calendar-task-progress-menupopup"/> -->
+
+    <!-- Events and Tasks / Postpone Task -->
+    <panelview id="appmenu_ltnTaskActionsPostponeView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="ltnTaskActionsPostponeMenu-1hour"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&calendar.context.postpone.1hour.label;"
+                       observes="calendar_postpone-1hour_command"/>
+        <toolbarbutton id="appmenu_ltnTaskActionsPostponeMenu-1day"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&calendar.context.postpone.1day.label;"
+                       observes="calendar_postpone-1day_command"/>
+        <toolbarbutton id="appmenu_ltnTaskActionsPostponeMenu-1week"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&calendar.context.postpone.1week.label;"
+                       observes="calendar_postpone-1week_command"/>
+      </vbox>
+    </panelview>
+
+    <!-- File / Open -->
+    <panelview id="appMenu-fileOpenView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_OpenMessageFileMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&lightning.menupopup.open.message.label;"
+                       accesskey="&lightning.menupopup.open.message.accesskey;"
+                       oncommand="MsgOpenFromFile();"/>
+        <toolbarbutton id="appmenu_OpenCalendarFileMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&lightning.menupopup.open.calendar.label;"
+                       accesskey="&lightning.menupopup.open.calendar.accesskey;"
+                       oncommand="openLocalCalendar();"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Today Pane -->
+    <panelview id="appmenu_ltnTodayPaneView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_ltnShowTodayPane-2"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&todaypane.showTodayPane.label;"
+                       type="checkbox"
+                       command="calendar_toggle_todaypane_command"/>
+        <toolbarseparator id="appmenu_ltnSeparatorBeforeDisplayMiniday"/>
+        <toolbarbutton id="appmenu_ltnTodayPaneDisplayMiniday"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="minidisplay"
+                       value="miniday"
+                       type="radio"
+                       oncommand="TodayPane.displayMiniSection('miniday')"
+                       observes="ltnTodayPaneDisplayMiniday"
+                       label="&todaypane.showMiniday.label;"/>
+        <toolbarbutton id="appmenu_ltnTodayPaneDisplayMinimonth"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="minidisplay"
+                       value="minimonth"
+                       type="radio"
+                       oncommand="TodayPane.displayMiniSection('minimonth')"
+                       observes="ltnTodayPaneDisplayMinimonth"
+                       label="&todaypane.showMinimonth.label;"/>
+        <toolbarbutton id="appmenu_ltnTodayPaneDisplayNone"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="minidisplay"
+                       value="none"
+                       type="radio"
+                       oncommand="TodayPane.displayMiniSection('none')"
+                       observes="ltnTodayPaneDisplayNone"
+                       label="&todaypane.showNone.label;"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Calendar -->
+    <panelview id="appmenu_ltnCalendarMenuView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_ltnChangeViewDay"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&lightning.toolbar.day.label;"
+                       type="radio"
+                       name="calendarMenuViews"
+                       command="calendar_day-view_command"/>
+        <toolbarbutton id="appmenu_ltnChangeViewWeek"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&lightning.toolbar.week.label;"
+                       type="radio"
+                       name="calendarMenuViews"
+                       command="calendar_week-view_command"/>
+        <toolbarbutton id="appmenu_ltnChangeViewMultiweek"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&lightning.toolbar.multiweek.label;"
+                       type="radio"
+                       name="calendarMenuViews"
+                       command="calendar_multiweek-view_command"/>
+        <toolbarbutton id="appmenu_ltnChangeViewMonth"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&lightning.toolbar.month.label;"
+                       type="radio"
+                       name="calendarMenuViews"
+                       command="calendar_month-view_command"/>
+        <toolbarseparator id="appmenu_ltnBeforeCalendarViewSection"/>
+        <toolbarbutton id="appmenu_ltnCalendarPaneMenu"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&lightning.toolbar.calendarmenu.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appmenu_ltnCalendarPaneView', this)"/>
+        <toolbarseparator id="appmenu_ltnBeforeCurrentViewMenu"/>
+        <toolbarbutton id="appmenu_ltnCalendarCurrentViewMenu"
+                       class="subviewbutton subviewbutton-nav"
+                       observes="calendar_mode_calendar"
+                       label="&showCurrentView.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appmenu_ltnCalendarCurrentViewView', this)"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Calendar / Calendar Pane -->
+    <panelview id="appmenu_ltnCalendarPaneView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_ltnViewCalendarPane"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&lightning.toolbar.calendarpane.label;"
+                       command="calendar_toggle_calendarsidebar_command"/>
+        <toolbarseparator id="appmenu_ltnCalendarPaneMenuSeparator"/>
+        <toolbarbutton id="appmenu_ltnTasksViewMinimonth"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.tasks.view.minimonth.label;"
+                       command="calendar_toggle_minimonthpane_command"/>
+        <toolbarbutton id="appmenu_ltnTasksViewCalendarlist"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.tasks.view.calendarlist.label;"
+                       command="calendar_toggle_calendarlist_command"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Calendar / Current View -->
+    <panelview id="appmenu_ltnCalendarCurrentViewView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appmenu_ltnWorkdaysOnlyMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.onlyworkday.checkbox.label;"
+                       observes="calendar_toggle_workdays_only_command"/>
+        <toolbarbutton id="appmenu_ltnTasksInViewMenuitem"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.displaytodos.checkbox.label;"
+                       observes="calendar_toggle_tasks_in_view_command"/>
+        <toolbarbutton id="appmenu_ltnShowCompletedInViewMenuItem"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.completedtasks.checkbox.label;"
+                       observes="calendar_toggle_show_completed_in_view_command"/>
+        <toolbarbutton id="appmenu_ltnViewRotated"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.orientation.label;"
+                       command="calendar_toggle_orientation_command"
+                       observes="calendar_toggle_orientation_command"/>
+      </vbox>
+    </panelview>
+
+    <!-- View / Tasks -->
+    <panelview id="appmenu_ltnTasksView"
+               class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <observes element="filterBroadcaster"
+                  attribute="value"
+                  onbroadcast="checkRadioControlAppmenu(this.parentNode, document.getElementById(this.getAttribute('element')).getAttribute('value'));"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterTasks"
+                       class="subviewbutton subviewbutton-iconic"
+                       type="checkbox"
+                       label="&calendar.tasks.view.filtertasks.label;"
+                       command="calendar_toggle_filter_command"/>
+        <toolbarseparator id="appmenu_ltnTasksViewSeparator"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterCurrent"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       value="throughcurrent"
+                       type="radio"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.current.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterToday"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       value="throughtoday"
+                       type="radio"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.today.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterNext7days"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       value="throughsevendays"
+                       type="radio"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.next7days.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterNotstartedtasks"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       value="notstarted"
+                       type="radio"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.notstarted.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterOverdue"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       value="overdue"
+                       type="radio"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.overdue.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterCompleted"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       type="radio"
+                       value="completed"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.completed.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterOpen"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       type="radio"
+                       value="open"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.open.label;"/>
+        <toolbarbutton id="appmenu_ltnTasksViewFilterAll"
+                       class="subviewbutton subviewbutton-iconic"
+                       name="filtergroup"
+                       value="all"
+                       type="radio"
+                       command="calendar_task_filter_command"
+                       label="&calendar.task.filter.all.label;"/>
+      </vbox>
+    </panelview>
+
+  </panelmultiview>
 </overlay>
--- a/mail/components/customizableui/content/panelUI.inc.xul
+++ b/mail/components/customizableui/content/panelUI.inc.xul
@@ -132,17 +132,18 @@
        noautofocus="true">
   <panelmultiview id="appMenu-multiView"
                   mainViewId="appMenu-mainView"
                   viewCacheId="appMenu-viewCache">
 
     <!-- Main Appmenu View -->
     <panelview id="appMenu-mainView" class="PanelUI-subView"
                descriptionheightworkaround="true">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-mainViewItems"
+            class="panel-subview-body">
         <vbox id="appMenu-addon-banners"/>
         <toolbarbutton id="appmenu_new"
                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
                        label="&newMenu.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('appMenu-newView', this)"/>
         <toolbarbutton id="appmenu_msgAttachmentMenu"
                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
@@ -266,17 +267,18 @@
                        command="cmd_quit"/>
       </vbox>
     </panelview>
 
     <!-- New -->
     <panelview id="appMenu-newView"
                title="&newMenu.label;"
                class="PanelUI-subView">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-newViewItems"
+            class="panel-subview-body">
         <toolbarbutton id="appmenu_newNewMsgCmd"
                        class="subviewbutton subviewbutton-iconic"
                        label="&newNewMsgCmd.label;"
                        key="key_newMessage2"
                        command="cmd_newMessage"/>
         <toolbarbutton id="appmenu_newFolder"
                        class="subviewbutton subviewbutton-iconic"
                        label="&newFolderCmd.label;"
@@ -620,17 +622,18 @@
                        command="cmd_toggleMessagePane"/>
       </vbox>
     </panelview>
 
     <!-- File -->
     <panelview id="appMenu-fileView"
                title="&fileMenu.label;"
                class="PanelUI-subView">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-fileViewItems"
+            class="panel-subview-body">
         <toolbarbutton id="appmenu_openMessageFileMenuitem"
                        class="subviewbutton subviewbutton-iconic"
                        label="&openMessageFileCmd.label;"
                        oncommand="MsgOpenFromFile();"/>
         <toolbarbutton id="appmenu_close"
                        class="subviewbutton subviewbutton-iconic"
                        label="&closeCmd.label;"
                        key="key_close"
@@ -730,17 +733,18 @@
                        command="cmd_downloadSelected"/>
       </vbox>
     </panelview>
 
     <!-- View -->
     <panelview id="appMenu-viewView"
                title="&viewMenu.label;"
                class="PanelUI-subView">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-viewViewItems"
+            class="panel-subview-body">
         <toolbarbutton id="appmenu_FolderViews"
                        class="subviewbutton subviewbutton-nav"
                        label="&folderView.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('appMenu-foldersView', this)"/>
         <toolbarbutton id="appmenu_viewSortMenu"
                        class="subviewbutton subviewbutton-nav"
                        label="&sortMenu.label;"
@@ -1263,17 +1267,18 @@
                oncommand="PanelUI.setTextEncodingDetector(event)">
       <vbox class="panel-subview-body"/>
     </panelview>
 
     <!-- Go -->
     <panelview id="appMenu-goView"
                title="&goMenu.label;"
                class="PanelUI-subView">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-goViewItems"
+            class="panel-subview-body">
         <toolbarbutton id="appmenu_goNextMenu"
                        class="subviewbutton subviewbutton-nav"
                        label="&nextMenu.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('appMenu-goNextView', this)"/>
         <toolbarbutton id="appmenu_goPreviousMenu"
                        class="subviewbutton subviewbutton-nav"
                        label="&prevMenu.label;"
@@ -1315,17 +1320,18 @@
                        command="cmd_goStartPage"/>
       </vbox>
     </panelview>
 
     <!-- Go / Next -->
     <panelview id="appMenu-goNextView"
                title="&nextMenu.label;"
                class="PanelUI-subView">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-goNextViewItems"
+            class="panel-subview-body">
         <toolbarbutton id="appmenu_nextMsg"
                        class="subviewbutton subviewbutton-iconic"
                        label="&nextMsgCmd.label;"
                        key="key_nextMsg"
                        command="cmd_nextMsg"/>
         <toolbarbutton id="appmenu_nextUnreadMsg"
                        class="subviewbutton subviewbutton-iconic"
                        label="&nextUnreadMsgCmd.label;"
@@ -1343,17 +1349,18 @@
                        command="cmd_nextUnreadThread"/>
       </vbox>
     </panelview>
 
     <!-- Go / Previous -->
     <panelview id="appMenu-goPreviousView"
                title="&prevMenu.label;"
                class="PanelUI-subView">
-      <vbox class="panel-subview-body">
+      <vbox id="appMenu-goPreviousViewItems"
+            class="panel-subview-body">
         <toolbarbutton id="appmenu_prevMsg"
                        class="subviewbutton subviewbutton-iconic"
                        label="&prevMsgCmd.label;"
                        key="key_previousMsg"
                        command="cmd_previousMsg"/>
         <toolbarbutton id="appmenu_prevUnreadMsg"
                        class="subviewbutton subviewbutton-iconic"
                        label="&prevUnreadMsgCmd.label;"