Fix bug 470824 - messagereader-style buttons in Tasks view are different heights on Windows. r=philipp

--HG--
extra : rebase_source : a221c3cd22b4efa5f886eaa175336043a5693597

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

@@ -60,6 +60,9 @@ var taskDetailsView = {
         var item = document.getElementById("calendar-task-tree").currentTask;
         if (displayElement("calendar-task-details-container", item != null) &&
             displayElement("calendar-task-view-splitter", item != null)) {
+
+            this._initializeToolbar();
+
             displayElement("calendar-task-details-title-row", true);
             document.getElementById("calendar-task-details-title").value =
                 (item.title ? item.title.replace(/\n/g, ' ') : "");
@@ -172,7 +175,45 @@ var taskDetailsView = {
                 }
             }
         }
-    }
+    },
+
+    /**
+     * Initialize the task actions toolbar by setting default mode, icon size,
+     * etc. if necessary and hooking up events for the customization dialog.
+     */
+    _initializeToolbar: function tDV_initializeToolbar() {
+        var toolbox = document.getElementById("task-actions-toolbox");
+        toolbox.customizeDone = function(aEvent) {
+            MailToolboxCustomizeDone(aEvent, "CustomizeTaskActionsToolbar");
+        };
+
+        var toolbarset = document.getElementById('customToolbars');
+        toolbox.toolbarset = toolbarset;
+
+        // Check whether we did an upgrade to a customizable header pane.
+        // If yes, set the header pane toolbar mode to icons besides text
+        var toolbar = document.getElementById("task-actions-toolbar");
+        if (toolbox && toolbar) {
+            if (!toolbox.getAttribute("mode")) {
+
+                /* set toolbox attributes to default values */
+                var mode = toolbox.getAttribute("defaultmode");
+                var align = toolbox.getAttribute("defaultlabelalign");
+                var iconsize = toolbox.getAttribute("defaulticonsize");
+                toolbox.setAttribute("mode", mode);
+                toolbox.setAttribute("labelalign", align);
+                toolbox.setAttribute("iconsize", iconsize);
+                toolbox.ownerDocument.persist(toolbox.id, "mode");
+                toolbox.ownerDocument.persist(toolbox.id, "iconsize");
+                toolbox.ownerDocument.persist(toolbox.id, "labelalign");
+
+                /* set toolbar attributes to default values */
+                iconsize = toolbar.getAttribute("defaulticonsize");
+                toolbar.setAttribute("iconsize", iconsize);
+                toolbar.ownerDocument.persist(toolbar.id, "iconsize");
+            }
+        }
+    },
 };
 
 

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

@@ -46,6 +46,7 @@
 <!DOCTYPE overlay [
   <!ENTITY % dtd1 SYSTEM "chrome://calendar/locale/calendar.dtd" > %dtd1;
   <!ENTITY % dtd2 SYSTEM "chrome://calendar/locale/calendar-event-dialog.dtd" > %dtd2;
+  <!ENTITY % dtd3 SYSTEM "chrome://calendar/locale/menuOverlay.dtd" > %dtd3;
 ]>
 
 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
@@ -77,7 +78,7 @@
                             persist="visible-columns ordinals widths sort-active sort-direction height"
                             context="taskitem-context-menu"/>
         <splitter id="calendar-task-view-splitter" collapse="none" persist="state"/>
-        <vbox id="calendar-task-details-container" class="main-header-area" flex="1">
+        <vbox id="calendar-task-details-container" class="main-header-area" flex="1" context="task-actions-toolbar-context-menu">
           <hbox id="calendar-task-details">
             <grid id="calendar-task-details-grid" flex="1">
               <columns id="calendar-task-details-columns">
@@ -149,39 +150,60 @@
               </rows>
             </grid>
             <hbox id="other-actions-box" align="top">
-              <button id="task-actions-category"
-                      type="menu"
-                      label="&calendar.unifinder.tree.categories.label;"
-                      tooltiptext="&calendar.task.category.button.tooltip;"
-                      command="calendar_task_category_command"
-                      observes="calendar_task_category_command"
-                      class="msgHeaderView-button">
-                <menupopup id="task-actions-category-menupopup"
-                           onpopupshowing="addCategoryNames(event)"/>
-              </button>
-              <button id="task-actions-markcompleted"
-                      type="menu-button"
-                      label="&calendar.context.markcompleted.label;"
-                      tooltiptext="&calendar.task.complete.button.tooltip;"
-                      command="calendar_toggle_completed_command"
-                      observes="calendar_toggle_completed_command"
-                      class="msgHeaderView-button">
-                <menupopup id="task-actions-markcompleted-menupopup" type="task-progress"/>
-              </button>
-              <button id="task-actions-priority"
-                      type="menu"
-                      label="&calendar.context.priority.label;"
-                      tooltiptext="&calendar.task.priority.button.tooltip;"
-                      command="calendar_general-priority_command"
-                      observes="calendar_general-priority_command"
-                      class="msgHeaderView-button">
-                <menupopup id="task-actions-priority-menupopup" type="task-priority"/>
-              </button>
-              <button id="calendar-delete-task-button"
-                      class="msgHeaderView-button"
-                      aria-label="&calendar.context.deletetask.label;"
-                      tooltiptext="&calendar.context.deletetask.label;"
-                      observes="calendar_delete_todo_command"/>
+              <menupopup id="task-actions-toolbar-context-menu">
+                <menuitem id="CustomizeTaskActionsToolbar"
+                          oncommand="CustomizeMailToolbar('task-actions-toolbox', 'CustomizeTaskActionsToolbar')"
+                          label="&calendar.menu.customize.label;"
+                          accesskey="&calendar.menu.customize.accesskey;"/>
+              </menupopup>
+
+              <toolbox id="task-actions-toolbox"
+                       defaulticonsize="small"
+                       minwidth="50px"
+                       defaultlabelalign="end"
+                       defaultmode="full">
+                <toolbarpalette id="task-actions-toolbar-palette">
+                  <toolbarbutton id="task-actions-category"
+                                 type="menu"
+                                 label="&calendar.unifinder.tree.categories.label;"
+                                 tooltiptext="&calendar.task.category.button.tooltip;"
+                                 command="calendar_task_category_command"
+                                 observes="calendar_task_category_command"
+                                 class="toolbarbutton-1 msgHeaderView-button">
+                    <menupopup id="task-actions-category-menupopup"
+                               onpopupshowing="addCategoryNames(event)"/>
+                  </toolbarbutton>
+                  <toolbarbutton id="task-actions-markcompleted"
+                                 type="menu-button"
+                                 label="&calendar.context.markcompleted.label;"
+                                 tooltiptext="&calendar.task.complete.button.tooltip;"
+                                 command="calendar_toggle_completed_command"
+                                 observes="calendar_toggle_completed_command"
+                                 class="toolbarbutton-1 msgHeaderView-button">
+                    <menupopup id="task-actions-markcompleted-menupopup" type="task-progress"/>
+                  </toolbarbutton>
+                  <toolbarbutton id="task-actions-priority"
+                                 type="menu"
+                                 label="&calendar.context.priority.label;"
+                                 tooltiptext="&calendar.task.priority.button.tooltip;"
+                                 command="calendar_general-priority_command"
+                                 observes="calendar_general-priority_command"
+                                 class="toolbarbutton-1 msgHeaderView-button">
+                    <menupopup id="task-actions-priority-menupopup" type="task-priority"/>
+                  </toolbarbutton>
+                  <toolbarbutton id="calendar-delete-task-button"
+                                 class="toolbarbutton-1 msgHeaderView-button"
+                                 label="&calendar.taskview.delete.label;"
+                                 tooltiptext="&calendar.context.deletetask.label;"
+                                 observes="calendar_delete_todo_command"/>
+                </toolbarpalette>
+
+                <toolbar id="task-actions-toolbar" align="start"
+                         customizable="true" mode="full"
+                         defaulticonsize="small" defaultmode="full"
+                         context="task-actions-toolbar-context-menu"
+                         defaultset="task-actions-category,task-actions-markcompleted,task-actions-priority,calendar-delete-task-button"/>
+              </toolbox>
             </hbox>
           </hbox>
           <textbox id="calendar-task-details-description" multiline="true" flex="1"/>

calendar/base/jar.mn

@@ -2,6 +2,7 @@
 calendar.jar:
 % content calendar %content/calendar/
 % style chrome://calendar/content/calendar-event-dialog.xul chrome://global/skin/toolbar.css
+% style chrome://global/content/customizeToolbar.xul chrome://calendar/skin/calendar-task-view.css
     content/calendar/agenda-listbox.js                     (content/agenda-listbox.js)
     content/calendar/agenda-listbox.xml                    (content/agenda-listbox.xml)
     content/calendar/calendar-bindings.css                 (content/calendar-bindings.css)

calendar/base/themes/pinstripe/calendar-task-view.css

@@ -136,8 +136,67 @@
     margin-bottom: 3px;
 }
 
+/* ::::: task actions toolbar ::::: */
+
+#task-actions-toolbox {
+    -moz-padding-end: 6px;
+    padding-top: 3px;
+}
+
+#task-actions-toolbar {
+    -moz-appearance: none;
+    -moz-box-pack: end;
+    min-width: 50px !important;
+    min-height: 14px !important;
+}
+
+#task-actions-toolbar toolbarpaletteitem toolbarseparator,
+#task-actions-toolbar toolbarseparator {
+    height: 26px;
+}
+
+#task-actions-toolbar toolbarspacer {
+    height: 20px;
+}
+
+window[toolboxId="task-actions-toolbox"] #wrapper-spring {
+    display: none;
+}
+
+window[toolboxId="task-actions-toolbox"] #smallicons,
+window[toolboxId="task-actions-toolbox"] button[icon="add"] {
+    display: none;
+}
+
+window[toolboxId="task-actions-toolbox"] #modelist menuitem:first-child {
+    display: none;
+}
+
+#task-actions-toolbox[doCustomization] {
+    background: grey;
+}
+
+#task-actions-toolbox[doCustomization] #task-actions-toolbar {
+    min-width: 100px;
+    min-height: 10px;
+}
+
+#task-actions-category {
+    list-style-image: url(chrome://calendar/skin/toolbar-small.png);
+    -moz-image-region: rect(72px, 544px, 88px, 528px);
+}
+
+#task-actions-markcompleted {
+    list-style-image: url(chrome://calendar/skin/toolbar-small.png);
+    -moz-image-region: rect(72px, 568px, 88px, 552px);
+}
+
+#task-actions-priority {
+    list-style-image: url(chrome://calendar/skin/toolbar-small.png);
+    -moz-image-region: rect(72px, 592px, 88px, 576px);
+}
+
 #calendar-delete-task-button {
-    -moz-box-orient: vertical;
     list-style-image: url(chrome://messenger/skin/icons/folder-trash.png);
 }
 

calendar/base/themes/winstripe/calendar-task-view.css

@@ -145,8 +145,68 @@
     margin-bottom: 3px;
 }
 
+/* ::::: task actions toolbar ::::: */
+
+#task-actions-toolbox {
+    -moz-appearance: none;
+    -moz-padding-end: 6px;
+    padding-top: 3px;
+}
+
+#task-actions-toolbar {
+    -moz-appearance: none;
+    -moz-box-pack: end;
+    min-height: 0;
+    padding: 0;
+}
+
+#task-actions-toolbar toolbarpaletteitem toolbarseparator,
+#task-actions-toolbar toolbarseparator {
+    height: 26px;
+}
+
+#task-actions-toolbar toolbarspacer {
+    height: 20px;
+}
+
+window[toolboxId="task-actions-toolbox"] #wrapper-spring {
+    display: none;
+}
+
+window[toolboxId="task-actions-toolbox"] #smallicons,
+window[toolboxId="task-actions-toolbox"] button[icon="add"] {
+    display: none;
+}
+
+window[toolboxId="task-actions-toolbox"] #modelist menuitem:first-child {
+    display: none;
+}
+
+#task-actions-toolbox[doCustomization] {
+    background: grey;
+}
+
+#task-actions-toolbox[doCustomization] #task-actions-toolbar {
+    min-width: 100px;
+    min-height: 10px;
+}
+
+#task-actions-category {
+    list-style-image: url(chrome://calendar/skin/toolbar-small.png);
+    -moz-image-region: rect(0px, 368px, 16px, 352px);
+}
+
+#task-actions-markcompleted {
+    list-style-image: url(chrome://calendar/skin/toolbar-small.png);
+    -moz-image-region: rect(0px, 384px, 16px, 368px);
+}
+
+#task-actions-priority {
+    list-style-image: url(chrome://calendar/skin/toolbar-small.png);
+    -moz-image-region: rect(0px, 400px, 16px, 384px);
+}
+
 #calendar-delete-task-button {
-    -moz-box-orient: vertical;
     list-style-image: url(chrome://calendar/skin/toolbar-small.png);
     -moz-image-region: rect(0px, 48px, 16px, 32px);
 }

calendar/locales/en-US/chrome/calendar/calendar.dtd

@@ -233,6 +233,12 @@
 <!ENTITY priority.level.high                "High">
 <!ENTITY priority.level.high.accesskey      "H">
 
+<!-- Task View -->
+<!-- Note that the above *.context.* strings are currently used for the other
+     task action buttons -->
+<!ENTITY calendar.taskview.delete.label     "Delete">
+<!ENTITY calendar.taskview.delete.accesskey "l">
+
 <!-- Server Context Menu -->
 <!ENTITY calendar.context.newserver.label              "New Calendar…">
 <!ENTITY calendar.context.newserver.accesskey          "N">