Bug 1680044 - remove <deck> XUL element from calendar-tab-panels.inc.xhtml. r=aleca,darktrojan

calendar/base/content/calendar-chrome-startup.js

@@ -42,10 +42,6 @@ async function loadCalendarComponent() {
 
   await uninstallLightningAddon();
 
-  document
-    .getElementById("calendarDisplayDeck")
-    .addEventListener("select", calObserveDisplayDeckChange, true);
-
   // load locale specific default values for preferences
   setLocaleDefaultPreferences();
 
@@ -71,8 +67,8 @@ async function loadCalendarComponent() {
   calendarDeactivator.registerWindow(window);
 
   // Set up item and day selection listeners
-  getViewDeck().addEventListener("dayselect", observeViewDaySelect);
-  getViewDeck().addEventListener("itemselect", calendarController.onSelectionChanged, true);
+  getViewBox().addEventListener("dayselect", observeViewDaySelect);
+  getViewBox().addEventListener("itemselect", calendarController.onSelectionChanged, true);
 
   // Start alarm service
   Cc["@mozilla.org/calendar/alarm-service;1"].getService(Ci.calIAlarmService).startup();
@@ -175,43 +171,6 @@ async function uninstallLightningAddon() {
   }
 }
 
-/**
- * This function has the sole responsibility to switch back to
- * mail mode (by calling calSwitchToMode("mail")) if we are getting
- * notifications from other panels (besides the calendar views)
- * but find out that we're not in mail mode. This situation can
- * for example happen if we're in calendar mode but the 'new mail'
- * slider gets clicked and wants to display the appropriate mail.
- * All necessary logic for switching between the different modes
- * should live inside of the corresponding functions like:
- * - calSwitchToCalendarMode()
- * - calSwitchToTaskMode()
- * - calSwitchToMode()
- */
-function calObserveDisplayDeckChange(event) {
-  let deck = event.target;
-
-  // Bug 309505: The 'select' event also fires when we change the selected
-  // panel of calendar-view-box.  Workaround with this check.
-  if (deck.id != "calendarDisplayDeck") {
-    return;
-  }
-
-  let id = deck.selectedPanel && deck.selectedPanel.id;
-
-  // Switch back to mail mode in case we find that this
-  // notification has been fired but we're still in calendar or task mode.
-  // Specifically, switch back if we're *not* in mail mode but the notification
-  // did *not* come from either the "calendar-view-box" or the "calendar-task-box".
-  if (
-    (gCurrentMode == "calendar" || gCurrentMode == "task") &&
-    id != "calendar-view-box" &&
-    id != "calendar-task-box"
-  ) {
-    calSwitchToMode("mail");
-  }
-}
-
 /**
  * TODO: The systemcolors pref observer really only needs to be set up once, so
  * ideally this code should go into a component. This should be taken care of when

calendar/base/content/calendar-modes.js

@@ -82,8 +82,8 @@ function calSwitchToCalendarMode() {
     changeMode("calendar");
 
     // display the calendar panel on the display deck
-    let deck = document.getElementById("calendarDisplayDeck");
-    deck.selectedPanel = document.getElementById("calendar-view-box");
+    document.getElementById("calendar-view-box").collapsed = false;
+    document.getElementById("calendar-task-box").collapsed = true;
 
     // show the last displayed type of calendar view
     switchToView(gLastShownCalendarView.get());
@@ -108,8 +108,8 @@ function calSwitchToTaskMode() {
     changeMode("task");
 
     // display the task panel on the display deck
-    let deck = document.getElementById("calendarDisplayDeck");
-    deck.selectedPanel = document.getElementById("calendar-task-box");
+    document.getElementById("calendar-view-box").collapsed = true;
+    document.getElementById("calendar-task-box").collapsed = false;
 
     document.getElementById("calMinimonth").setAttribute("freebusy", "true");
 

calendar/base/content/calendar-task-view.js

@@ -409,35 +409,12 @@ function sendMailToOrganizer() {
   }
 }
 
-/**
- * Handler function to observe changing of the calendar display deck. Updates
- * the task tree if the task view was selected.
- *
- * TODO Consolidate this function and anything connected, its still from times
- * before we had view tabs.
- */
-function taskViewObserveDisplayDeckChange(event) {
-  let deck = event.target;
-
-  // Bug 309505: The 'select' event also fires when we change the selected
-  // panel of calendar-view-box.  Workaround with this check.
-  if (deck.id != "calendarDisplayDeck") {
-    return;
-  }
-
-  // In case we find that the task view has been made visible, we refresh the view.
-  if (deck.selectedPanel && deck.selectedPanel.id == "calendar-task-box") {
-    taskViewUpdate();
-  }
-}
-
 // Install event listeners for the display deck change and connect task tree to filter field
 function taskViewOnLoad() {
-  let deck = document.getElementById("calendarDisplayDeck");
+  let calendarDisplayBox = document.getElementById("calendarDisplayBox");
   let tree = document.getElementById("calendar-task-tree");
 
-  if (deck && tree) {
-    deck.addEventListener("select", taskViewObserveDisplayDeckChange, true);
+  if (calendarDisplayBox && tree) {
     tree.textFilterField = "task-text-filter-field";
 
     // setup the platform-dependent placeholder for the text filter field
@@ -451,6 +428,7 @@ function taskViewOnLoad() {
       textFilter.setAttribute("placeholder", base.replace("#1", keyLabel));
       textFilter.value = "";
     }
+    taskViewUpdate();
   }
 
   // Setup customizeDone handler for the task action toolbox.

calendar/base/content/calendar-unifinder.js

@@ -211,9 +211,9 @@ function prepareCalendarUnifinder() {
   unifinderTree.view = unifinderTreeView;
 
   // Listen for changes in the selected day, so we can update if need be
-  let viewDeck = getViewDeck();
-  viewDeck.addEventListener("dayselect", unifinderDaySelect);
-  viewDeck.addEventListener("itemselect", unifinderItemSelect, true);
+  let viewBox = getViewBox();
+  viewBox.addEventListener("dayselect", unifinderDaySelect);
+  viewBox.addEventListener("itemselect", unifinderItemSelect, true);
 
   // Set up sortDirection and sortActive, in case it persisted
   let sorted = unifinderTree.getAttribute("sort-active");
@@ -253,10 +253,10 @@ function finishCalendarUnifinder() {
   Services.prefs.removeObserver("calendar.date.format", unifinderObserver);
   Services.obs.removeObserver(unifinderObserver, "defaultTimezoneChanged");
 
-  let viewDeck = getViewDeck();
-  if (viewDeck) {
-    viewDeck.removeEventListener("dayselect", unifinderDaySelect);
-    viewDeck.removeEventListener("itemselect", unifinderItemSelect, true);
+  let viewBox = getViewBox();
+  if (viewBox) {
+    viewBox.removeEventListener("dayselect", unifinderDaySelect);
+    viewBox.removeEventListener("itemselect", unifinderItemSelect, true);
   }
 
   // Persist the sort

calendar/base/content/calendar-views-utils.js

@@ -207,12 +207,12 @@ var calendarViewController = {
  * @param viewType     The type of view to select.
  */
 function switchToView(viewType) {
-  let viewDeck = getViewDeck();
+  let viewBox = getViewBox();
   let selectedDay;
   let currentSelection = [];
 
   // Set up the view commands
-  let views = viewDeck.children;
+  let views = viewBox.children;
   for (let i = 0; i < views.length; i++) {
     let view = views[i];
     let commandId = "calendar_" + view.id + "_command";
@@ -261,8 +261,8 @@ function switchToView(viewType) {
   ids.forEach(x => setupViewNode(x, "tooltiptext"));
 
   try {
-    selectedDay = viewDeck.selectedPanel.selectedDay;
-    currentSelection = viewDeck.selectedPanel.getSelectedItems();
+    selectedDay = getSelectedDay();
+    currentSelection = currentView().getSelectedItems();
   } catch (ex) {
     // This dies if no view has even been chosen this session, but that's
     // ok because we'll just use cal.dtz.now() below.
@@ -274,11 +274,18 @@ function switchToView(viewType) {
 
   // Anyone wanting to plug in a view needs to follow this naming scheme
   let view = document.getElementById(viewType + "-view");
-  viewDeck.selectedPanel = view;
+  for (let i = 0; i < viewBox.children.length; i++) {
+    if (view.id == viewBox.children[i].id) {
+      viewBox.children[i].hidden = false;
+      viewBox.setAttribute("selectedIndex", i);
+    } else {
+      viewBox.children[i].hidden = true;
+    }
+  }
 
   // Select the corresponding tab
   let viewTabs = document.getElementById("view-tabs");
-  viewTabs.selectedIndex = getViewDeck().selectedIndex;
+  viewTabs.selectedIndex = viewBox.getAttribute("selectedIndex");
 
   let compositeCal = cal.view.getCompositeCalendar(window);
   if (view.displayCalendar != compositeCal) {
@@ -294,12 +301,12 @@ function switchToView(viewType) {
 }
 
 /**
- * Returns the calendar view deck XUL element.
+ * Returns the calendar view box element.
  *
- * @return      The view-deck element.
+ * @return      The view-box element.
  */
-function getViewDeck() {
-  return document.getElementById("view-deck");
+function getViewBox() {
+  return document.getElementById("view-box");
 }
 
 /**
@@ -308,7 +315,12 @@ function getViewDeck() {
  * @return      The selected calendar view
  */
 function currentView() {
-  return getViewDeck().selectedPanel;
+  for (let element of getViewBox().children) {
+    if (!element.hidden) {
+      return element;
+    }
+  }
+  return null;
 }
 
 /**
@@ -454,8 +466,7 @@ function toggleOrientation() {
   let newValue = cmd.getAttribute("checked") == "true" ? "false" : "true";
   cmd.setAttribute("checked", newValue);
 
-  let deck = getViewDeck();
-  for (let view of deck.children) {
+  for (let view of getViewBox().children) {
     view.rotated = newValue == "true";
   }
 
@@ -473,8 +484,7 @@ function toggleWorkdaysOnly() {
   let newValue = cmd.getAttribute("checked") == "true" ? "false" : "true";
   cmd.setAttribute("checked", newValue);
 
-  let deck = getViewDeck();
-  for (let view of deck.children) {
+  for (let view of getViewBox().children) {
     view.workdaysOnly = newValue == "true";
   }
 
@@ -490,8 +500,7 @@ function toggleTasksInView() {
   let newValue = cmd.getAttribute("checked") == "true" ? "false" : "true";
   cmd.setAttribute("checked", newValue);
 
-  let deck = getViewDeck();
-  for (let view of deck.children) {
+  for (let view of getViewBox().children) {
     view.tasksInView = newValue == "true";
   }
 
@@ -507,8 +516,7 @@ function toggleShowCompletedInView() {
   let newValue = cmd.getAttribute("checked") == "true" ? "false" : "true";
   cmd.setAttribute("checked", newValue);
 
-  let deck = getViewDeck();
-  for (let view of deck.children) {
+  for (let view of getViewBox().children) {
     view.showCompleted = newValue == "true";
   }
 
@@ -537,14 +545,17 @@ var gLastShownCalendarView = {
    */
   get() {
     if (!this._lastView) {
-      if (Services.xulStore.hasValue(document.location.href, "view-deck", "selectedIndex")) {
-        let deck = getViewDeck();
+      if (Services.xulStore.hasValue(document.location.href, "view-box", "selectedIndex")) {
+        let viewBox = getViewBox();
         let selectedIndex = Services.xulStore.getValue(
           document.location.href,
-          "view-deck",
+          "view-box",
           "selectedIndex"
         );
-        let viewNode = deck.children[selectedIndex];
+        for (let i = 0; i < viewBox.children.length; i++) {
+          viewBox.children[i].hidden = selectedIndex != i;
+        }
+        let viewNode = viewBox.children[selectedIndex];
         this._lastView = viewNode.id.replace(/-view/, "");
       } else {
         // No deck item was selected beforehand, default to week view.
@@ -662,7 +673,7 @@ var calendarNavigationBar = {
         cal.l10n.getAnyString("branding", "brand", "brandFullName");
     }
     let viewTabs = document.getElementById("view-tabs");
-    viewTabs.selectedIndex = getViewDeck().selectedIndex;
+    viewTabs.selectedIndex = getViewBox().getAttribute("selectedIndex");
   },
 };
 

calendar/base/content/today-pane.js

@@ -126,7 +126,7 @@ var TodayPane = {
       }
       if (todoIsVisible) {
         // Add listener to update the date filters.
-        getViewDeck().addEventListener("dayselect", event => {
+        getViewBox().addEventListener("dayselect", event => {
           this.updateCalendarToDoUnifinder();
         });
         this.updateCalendarToDoUnifinder();

calendar/base/themes/common/calendar-views.css

@@ -992,21 +992,21 @@ richlistitem[is="agenda-richlistitem"][status="CANCELLED"] .agenda-event-start {
 }
 
 /* Navigation controls for the views */
-#view-deck {
+#view-box {
     border: solid ThreeDShadow;
 }
 
-:root[lwt-tree] #view-deck {
+:root[lwt-tree] #view-box {
     background-color: var(--sidebar-background-color);
     border-color: var(--sidebar-border-color);
     scrollbar-color: rgba(128,128,128,.5) rgba(230,230,235,.5);
 }
 
-:root[lwt-tree-brighttext] #view-deck {
+:root[lwt-tree-brighttext] #view-box {
     scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
 }
 
-:root[systemcolors] #view-deck {
+:root[systemcolors] #view-box {
   background-color: Field;
 }
 

calendar/base/themes/linux/calendar-views.css

@@ -12,7 +12,7 @@
     --calview-border-bottom-color: ThreeDShadow;
 }
 
-#view-deck {
+#view-box {
     background-color: Field;
     border-width: 0 0 1px 1px;
 }

calendar/base/themes/osx/calendar-views.css

@@ -55,7 +55,7 @@ richlistitem[is="agenda-richlistitem"][status="CANCELLED"] .agenda-container-box
     --calview-border-bottom-color: #d2d2d2;
 }
 
-#view-deck {
+#view-box {
     background-color: white;
     border-width: 0 0 0 1px;
 }

calendar/base/themes/windows/calendar-views.css

@@ -13,7 +13,7 @@
     --calview-border-bottom-color: ThreeDShadow;
 }
 
-#view-deck {
+#view-box {
     background-color: Field;
     border-width: 0;
     border-inline-start: 1px;

calendar/lightning/content/calendar-tab-panels.inc.xhtml

@@ -202,9 +202,12 @@
               persist="state"
               class="calendar-sidebar-splitter"/>
 
-    <deck id="calendarDisplayDeck" flex="1">
+    <hbox id="calendarDisplayBox" flex="1">
       <!-- Events View ("Unifinder") -->
-      <vbox id="calendar-view-box" context="calendar-view-context-menu">
+      <vbox id="calendar-view-box"
+            flex="1"
+            context="calendar-view-context-menu"
+            collapsed="true">
         <vbox id="calendar-deactivated-notification-location-events">
           <!-- Calendar deactivated notificationbox for events will be added here lazily. -->
         </vbox>
@@ -407,8 +410,8 @@
             <hbox class="navigation-bottombox"/>
           </vbox>
         </hbox>
-        <deck flex="1"
-              id="view-deck"
+        <vbox flex="1"
+              id="view-box"
               persist="selectedIndex">
           <!-- Note: the "id" attributes of the calendar panes **must** follow the
                notation 'type + "-" + "view"', where "type" should refer to the
@@ -425,11 +428,11 @@
           <calendar-month-view id="month-view" flex="1"
                                context="calendar-view-context-menu"
                                item-context="calendar-item-context-menu"/>
-        </deck>
+        </vbox>
       </vbox>
       <!-- Tasks View -->
       <vbox id="calendar-task-box" flex="1"
-            onselect="taskDetailsView.onSelect(event);">
+            collapsed="true">
         <vbox id="calendar-deactivated-notification-location-tasks">
           <!-- Calendar deactivated notificationbox for tasks will be added here lazily. -->
         </vbox>
@@ -463,7 +466,8 @@
                 flex="1"
                 visible-columns="completed priority title entryDate dueDate"
                 persist="visible-columns ordinals widths sort-active sort-direction height"
-                context="taskitem-context-menu"/>
+                context="taskitem-context-menu"
+                onselect="taskDetailsView.onSelect(event);"/>
           <splitter id="calendar-task-view-splitter" collapse="none" persist="state" class="calendar-splitter"/>
           <vbox id="calendar-task-details-container"
                 class="main-header-area"
@@ -627,6 +631,6 @@
           </vbox>
         </vbox>
       </vbox>
-    </deck>
+    </hbox>
   </hbox>
 </vbox>

calendar/test/modules/CalendarUtils.jsm

@@ -84,8 +84,8 @@ var CALENDAR_PANEL = `
     id("tabpanelcontainer")/id("calendarTabPanel")/id("calendarContent")
 `;
 var VIEWDECK = `
-    ${CALENDAR_PANEL}/id("calendarDisplayDeck")/id("calendar-view-box")/
-    id("view-deck")
+    ${CALENDAR_PANEL}/id("calendarDisplayBox")/id("calendar-view-box")/
+    id("view-box")
 `;
 var DAY_VIEW = `${VIEWDECK}/id("day-view")`;
 var WEEK_VIEW = `${VIEWDECK}/id("week-view")`;
@@ -99,7 +99,7 @@ var LABELDAYBOX = `
 `;
 var MULTIWEEK_VIEW = `${VIEWDECK}/id("multiweek-view")`;
 var MONTH_VIEW = `${VIEWDECK}/id("month-view")`;
-var TASK_VIEW = `${CALENDAR_PANEL}/id("calendarDisplayDeck")/id("calendar-task-box")/`;
+var TASK_VIEW = `${CALENDAR_PANEL}/id("calendarDisplayBox")/id("calendar-task-box")/`;
 
 var MINIMONTH = `
     ${CALENDAR_PANEL}/id("ltnSidebar")/id("minimonth-pane")/{"align":"center"}/
@@ -173,9 +173,7 @@ function helpersForController(controller) {
  */
 function ensureViewLoaded(controller) {
   let { sleep } = helpersForController(controller);
-  controller.waitFor(
-    () => controller.window.getViewDeck().selectedPanel.mPendingRefreshJobs.size == 0
-  );
+  controller.waitFor(() => controller.window.currentView().mPendingRefreshJobs.size == 0);
   // After the queue is empty the view needs a moment to settle.
   sleep(200);
 }