Bug 1553617 - de-xbl doubleimage and todaypane toolbarbutton. r=mkmelin,jorgk
--- 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"