diff --git a/calendar/base/content/calendar-chrome-startup.js b/calendar/base/content/calendar-chrome-startup.js index cf245f92d7..877488387f 100644 --- a/calendar/base/content/calendar-chrome-startup.js +++ b/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 diff --git a/calendar/base/content/calendar-modes.js b/calendar/base/content/calendar-modes.js index 09166bdfdc..d235036ffb 100644 --- a/calendar/base/content/calendar-modes.js +++ b/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"); diff --git a/calendar/base/content/calendar-task-view.js b/calendar/base/content/calendar-task-view.js index d88216eea2..a68e1856af 100644 --- a/calendar/base/content/calendar-task-view.js +++ b/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. diff --git a/calendar/base/content/calendar-unifinder.js b/calendar/base/content/calendar-unifinder.js index 654be87b43..69c582c85f 100644 --- a/calendar/base/content/calendar-unifinder.js +++ b/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 diff --git a/calendar/base/content/calendar-views-utils.js b/calendar/base/content/calendar-views-utils.js index 3fd8ecac79..032f0be397 100644 --- a/calendar/base/content/calendar-views-utils.js +++ b/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"); }, }; diff --git a/calendar/base/content/today-pane.js b/calendar/base/content/today-pane.js index 616404b512..f1e11dcaed 100644 --- a/calendar/base/content/today-pane.js +++ b/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(); diff --git a/calendar/base/themes/common/calendar-views.css b/calendar/base/themes/common/calendar-views.css index ae6c0401ae..8e3ba46e40 100644 --- a/calendar/base/themes/common/calendar-views.css +++ b/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; } diff --git a/calendar/base/themes/linux/calendar-views.css b/calendar/base/themes/linux/calendar-views.css index 719f06f7fb..edd025a074 100644 --- a/calendar/base/themes/linux/calendar-views.css +++ b/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; } diff --git a/calendar/base/themes/osx/calendar-views.css b/calendar/base/themes/osx/calendar-views.css index d4159d4735..45d0b2c2b6 100644 --- a/calendar/base/themes/osx/calendar-views.css +++ b/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; } diff --git a/calendar/base/themes/windows/calendar-views.css b/calendar/base/themes/windows/calendar-views.css index 84af01277e..fe01ea4d04 100644 --- a/calendar/base/themes/windows/calendar-views.css +++ b/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; diff --git a/calendar/lightning/content/calendar-tab-panels.inc.xhtml b/calendar/lightning/content/calendar-tab-panels.inc.xhtml index ff9f038098..4a0c43cba6 100644 --- a/calendar/lightning/content/calendar-tab-panels.inc.xhtml +++ b/calendar/lightning/content/calendar-tab-panels.inc.xhtml @@ -202,9 +202,12 @@ persist="state" class="calendar-sidebar-splitter"/> - + - + @@ -407,8 +410,8 @@ - + collapsed="true"> @@ -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);"/> - + diff --git a/calendar/test/modules/CalendarUtils.jsm b/calendar/test/modules/CalendarUtils.jsm index f2dac8886a..a398e0edc9 100644 --- a/calendar/test/modules/CalendarUtils.jsm +++ b/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); }