Bug 1553617 - de-xbl doubleimage and todaypane toolbarbutton. r=mkmelin,jorgk
authorAlessandro Castellani <alessandro@thunderbird.net>
Thu, 23 May 2019 15:55:59 -0700
changeset 35674 6b0fd637981a4690419588abb44ae08274758cd8
parent 35673 a29d36088febe6865ae68ef0c4c834b162dc3f6d
child 35675 2b1b73b8c5d7239ec32be81e337ec3b46e813473
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin, jorgk
bugs1553617
Bug 1553617 - de-xbl doubleimage and todaypane toolbarbutton. r=mkmelin,jorgk
calendar/base/content/widgets/calendar-widget-bindings.css
calendar/base/content/widgets/calendar-widgets.xml
calendar/lightning/content/messenger-overlay-sidebar.js
calendar/lightning/content/messenger-overlay-sidebar.xul
--- a/calendar/base/content/widgets/calendar-widget-bindings.css
+++ b/calendar/base/content/widgets/calendar-widget-bindings.css
@@ -8,24 +8,16 @@ modevbox {
   -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#modebox);
   -moz-user-focus: normal;
 }
 
 modevbox {
   -moz-box-orient: vertical;
 }
 
-toolbarbutton[doubleimage="true"] {
-  -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#doubleimage-toolbarbutton);
-}
-
-toolbarbutton[todaypane="true"] {
-  -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#todaypane-toolbarbutton);
-}
-
 minimonth {
   -moz-binding: url("chrome://calendar/content/widgets/minimonth.xml#minimonth");
 }
 
 minimonth-header {
   -moz-binding: url("chrome://calendar/content/widgets/minimonth.xml#minimonth-header");
 }
 
--- a/calendar/base/content/widgets/calendar-widgets.xml
+++ b/calendar/base/content/widgets/calendar-widgets.xml
@@ -11,52 +11,16 @@
   <!ENTITY % dtd2 SYSTEM "chrome://calendar/locale/calendar-event-dialog.dtd"> %dtd2;
 ]>
 
 <bindings id="calendar-widgets"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
 
-  <binding id="doubleimage-toolbarbutton" extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
-    <content>
-      <children includes="observes|template|menupopup|tooltip"/>
-      <xul:image class="toolbarbutton-icon-begin" xbl:inherits="validate,src-begin=image,toolbarmode,buttonstyle"/>
-      <xul:label class="toolbarbutton-text" crop="right" flex="1"
-                 xbl:inherits="value=label,accesskey,crop,toolbarmode,buttonstyle"/>
-      <xul:image class="toolbarbutton-icon-end" xbl:inherits="validate,src-end=image,toolbarmode,buttonstyle"/>
-    </content>
-  </binding>
-
-  <binding id="todaypane-toolbarbutton" extends="chrome://calendar/content/widgets/calendar-widgets.xml#doubleimage-toolbarbutton">
-    <content>
-      <children includes="observes|template|menupopup|tooltip"/>
-      <xul:stack pack="center" align="end">
-        <xul:image class="toolbarbutton-icon-begin" xbl:inherits="validate,src-begin=image,toolbarmode,buttonstyle"/>
-        <xul:label anonid="day-label" class="toolbarbutton-day-text"/>
-      </xul:stack>
-      <xul:label class="toolbarbutton-text" crop="right" flex="1"
-                 xbl:inherits="value=label,accesskey,crop,toolbarmode,buttonstyle"/>
-      <xul:image class="toolbarbutton-icon-end" xbl:inherits="validate,src-end=image,toolbarmode,buttonstyle"/>
-    </content>
-
-    <implementation>
-      <constructor><![CDATA[
-          this.setUpTodayDate();
-      ]]></constructor>
-
-      <method name="setUpTodayDate">
-        <body><![CDATA[
-            let dayNumber = cal.l10n.getDateFmtString(`day.${cal.dtz.now().day}.number`);
-            document.getAnonymousElementByAttribute(this, "anonid", "day-label").value = dayNumber;
-        ]]></body>
-      </method>
-    </implementation>
-  </binding>
-
   <!-- this binding directly extends to a xul:box element and enriches this with some functionality: It is designed
       to be displayed only 1) in given application modes (e.g "task" mode, "calendar" mode) and 2) only in relation
       to the "checked" attribute of command or a checkbox control.
     - The attribute "mode" denotes a coma-separated list of all modes that the binding should not be collapsed in,
       e.g. mode="calendar,task"
     - The attribute "broadcaster" points to the id of a broadcaster that is supposed to be notified (by the application)
       as soon as the mode changes. When this happens the modebox" will be notified and will check if it should
       collapse itself or not.
--- a/calendar/lightning/content/messenger-overlay-sidebar.js
+++ b/calendar/lightning/content/messenger-overlay-sidebar.js
@@ -412,16 +412,18 @@ async function ltnOnLoad(event) {
     toolbox.customizeDone = function(aEvent) {
         MailToolboxCustomizeDone(aEvent, "CustomizeCalendarToolbar");
     };
     toolbox = document.getElementById("task-toolbox");
     toolbox.customizeDone = function(aEvent) {
         MailToolboxCustomizeDone(aEvent, "CustomizeTaskToolbar");
     };
 
+    updateTodayPaneButton();
+
     Services.obs.notifyObservers(window, "lightning-startup-done");
 }
 
 /* Called at midnight to tell us to redraw date-specific widgets.  Do NOT call
  * this for normal refresh, since it also calls scheduleMidnightRefresh.
  */
 function refreshUIBits() {
     try {
@@ -446,26 +448,69 @@ function refreshUIBits() {
         if (!TodayPane.showsToday()) {
             TodayPane.setDay(cal.dtz.now());
         }
 
         // update the unifinder
         refreshEventTree();
 
         // update today's date on todaypane button
-        document.getElementById("calendar-status-todaypane-button").setUpTodayDate();
+        updateTodayPaneButtonDate();
     } catch (exc) {
         cal.ASSERT(false, exc);
     }
 
     // schedule our next update...
     scheduleMidnightUpdate(refreshUIBits);
 }
 
 /**
+ * Updates button structure to enable a duble image to both sides of the label.
+ */
+function updateTodayPaneButton() {
+    let todaypane = document.getElementById("calendar-status-todaypane-button");
+
+    let iconStack = document.createXULElement("stack");
+    iconStack.setAttribute("pack", "center");
+    iconStack.setAttribute("align", "end");
+
+    let iconBegin = document.createXULElement("image");
+    iconBegin.classList.add("toolbarbutton-icon-begin");
+
+    let iconLabel = document.createXULElement("label");
+    iconLabel.classList.add("toolbarbutton-day-text");
+
+    let dayNumber = cal.l10n.getDateFmtString(`day.${cal.dtz.now().day}.number`);
+    iconLabel.textContent = dayNumber;
+
+    iconStack.appendChild(iconBegin);
+    iconStack.appendChild(iconLabel);
+
+    let iconEnd = document.createXULElement("image");
+    iconEnd.classList.add("toolbarbutton-icon-end");
+
+    let oldImage = todaypane.querySelector(".toolbarbutton-icon");
+    todaypane.replaceChild(iconStack, oldImage);
+    todaypane.appendChild(iconEnd);
+
+    let calSidebar = document.getElementById("ltnSidebar");
+    todaypane.setAttribute("checked", !calSidebar.getAttribute("collapsed"));
+}
+
+/**
+ * Updates the date number in the calendar icon of the todaypane button
+ */
+function updateTodayPaneButtonDate() {
+    let todaypane = document.getElementById("calendar-status-todaypane-button");
+
+    let dayNumber = cal.l10n.getDateFmtString(`day.${cal.dtz.now().day}.number`);
+    todaypane.querySelector(".toolbarbutton-day-text").textContent = dayNumber;
+}
+
+/**
  * Switch the calendar view, and optionally switch to calendar mode.
  *
  * @param aType     The type of view to select.
  * @param aShow     If true, the mode will be switched to calendar if not
  *                    already there.
  */
 function switchCalendarView(aType, aShow) {
     gLastShownCalendarView = aType;
--- a/calendar/lightning/content/messenger-overlay-sidebar.xul
+++ b/calendar/lightning/content/messenger-overlay-sidebar.xul
@@ -348,17 +348,16 @@
              value="&event.freebusy.legend.busy;"
              hidden="true"/>
     </hbox>
     <!-- end event/task in tab statusbarpanels -->
     <hbox id="calendar-show-todaypane-panel"
           class="statusbarpanel"
           pack="center">
       <toolbarbutton id="calendar-status-todaypane-button"
-                     todaypane="true"
                      type="checkbox"
                      label="&todaypane.statusButton.label;"
                      tooltiptext="&calendar.todaypane.button.tooltip;"
                      observes="calendar_toggle_todaypane_command"
                      command="calendar_toggle_todaypane_command"/>
     </hbox>
     <hbox id="calendar-invitations-panel"
           class="statusbarpanel"