Backed out changeset 51db5bd34c2a (Bug 1811143) for causing test failures. r=backout DONTBUILD

calendar/base/content/calendar-command-controller.js

@@ -948,11 +948,3 @@ async function printCalendar() {
   await PrintUtils.loadPrintBrowser("chrome://calendar/content/printing-template.html");
   PrintUtils.startPrintWindow(PrintUtils.printBrowser.browsingContext, {});
 }
-/**
- * Toggle the visibility of the calendars list.
- *
- * @param {Event} event - The click DOMEvent.
- */
-function toggleVisibilityCalendarsList(event) {
-  document.getElementById("calendar-list-inner-pane").togglePane(event);
-}

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

@@ -182,18 +182,20 @@
                            flex="1"
                            mode="calendar,task"
                            refcontrol="calendar_toggle_calendarlist_command">
-          <html:button id="calendarListHeader"
+          <hbox align="center" class="calendar-list-header">
-                       class="calendar-list-header button-flat"
+            <checkbox id="calendar-list-header"
-                       onclick="toggleVisibilityCalendarsList(event);">
+                      checked="true"
-            <html:span data-l10n-id="calendar-list-header"></html:span>
+                      class="treenode-checkbox"
-            <html:img id="toggleCalendarIcon"
+                      flex="1"
-                      src="chrome://messenger/skin/icons/new/nav-down-sm.svg"
+                      label="&calendar.list.header.label;"/>
-                      alt="" />
+            <toolbarbutton class="toolbarbutton-1 calendar-list-create themeable-brighttext"
-              </html:button>
+                           command="calendar_new_calendar_command"
+                           tooltiptext="&calendar.context.newserver.label;"/>
+          </hbox>
           <calendar-modevbox id="calendar-list-inner-pane"
                              flex="1"
                              mode="calendar,task"
-                             refcontrol="calendarListHeader"
+                             refcontrol="calendar-list-header"
                              oncontextmenu="openCalendarListItemContext(event);">
             <html:ol id="calendar-list" is="orderable-tree-listbox"
                      role="listbox"></html:ol>
@@ -212,7 +214,6 @@
               </li>
             </template>
           </calendar-modevbox>
-          <div id="calendarButtonsBottomSpacer"></div>
           <html:div id="sideButtonsBottom" xmlns="http://www.w3.org/1999/xhtml">
             <button id="importCalendar"
                     class="calendar-sidebar-bottom-button"

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

@@ -6,7 +6,6 @@
 
 :root {
   --calendar-view-nav-btn-padding: 6px;
-  --calendar-list-header-padding: 9px 12px;
   --calendar-list-item-padding: 3px;
   --calendar-list-item-margin: 3px;
   --calendar-list-item-dot-size: 9px;
@@ -15,16 +14,14 @@
 
 :root[uidensity="compact"] {
   --calendar-view-nav-btn-padding: 0px;
-  --calendar-list-header-padding: 6px 9px;
+  --calendar-list-item-padding: 0px;
-  --calendar-list-item-padding: 1px;
+  --calendar-list-item-margin: 0px;
-  --calendar-list-item-margin: 1px;
   --calendar-list-item-dot-size: 6px;
   --calendar-list-item-dot-gap: 3px;
 }
 
 :root[uidensity="touch"] {
   --calendar-view-nav-btn-padding: 6px;
-  --calendar-list-header-padding: 9px 15px;
   --calendar-list-item-padding: 6px;
   --calendar-list-item-margin: 6px;
   --calendar-list-item-dot-size: 9px;
@@ -34,32 +31,8 @@
 /* Calendar Items */
 
 .calendar-list-header {
-  display: flex;
+  background-color: var(--viewCalendarHeaderBackground);
-  justify-content: space-between;
+  padding-block: 2px;
-  align-items: center;
-  -moz-context-properties: stroke;
-  stroke: currentColor;
-  min-height: auto;
-  min-width: auto;
-  margin: 0;
-  background-color: transparent;
-  border-color: transparent;
-  border-radius: 0;
-  padding: var(--calendar-list-header-padding);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.calendar-list-header > * {
-  pointer-events: none;
-}
-
-.calendar-list-header:hover {
-  border-color: transparent !important;
-}
-
-#calendarListHeader[checked="false"] > img {
-  transform: rotate(-90deg);
 }
 
 .calendar-list-create {
@@ -111,9 +84,6 @@ checkbox.treenode-checkbox:not([checked="true"]):-moz-locale-dir(rtl) > .checkbo
   checkbox.treenode-checkbox > .checkbox-check {
     transition: transform 200ms ease;
   }
-  #calendarListHeader > img {
-    transition: transform 150ms ease;
-  }
   #calendar-list > li,
   #calendar-list > li > :is(.calendar-displayed,.calendar-more-button) {
     transition: opacity 250ms ease;
@@ -391,10 +361,6 @@ checkbox.treenode-checkbox > .checkbox-label-center-box > .checkbox-label-box >
   -moz-box-align: center;
 }
 
-#calendarButtonsBottomSpacer {
-  -moz-box-flex: 1;
-}
-
 #sideButtonsBottom {
   display: inline-flex;
   justify-content: space-between;

calendar/locales/en-US/calendar/calendar-widgets.ftl

@@ -10,10 +10,6 @@ calendar-notifications-label = Show notifications for upcoming events
 calendar-add-notification-button =
   .label = Add notification
 
-## Side panel
-
-calendar-list-header = Calendars
-
 # Variables:
 #  $calendarName (String) - Calendar name as given by the user
 calendar-list-item-tooltip =
@@ -29,8 +25,6 @@ calendar-new-event-primary-button = New Event
 
 calendar-new-task-primary-button = New Task
 
-## Calendar navigation
-
 calendar-nav-button-prev-tooltip-day =
   .title = Previous Day
   .accesskey = s