Bug 669262 - Lightning cannot do semi-monthly entries. r=mmecca

calendar/base/content/calendar-daypicker.xml

@@ -19,15 +19,12 @@
       <stylesheet src="chrome://calendar/skin/calendar-daypicker.css"/>
     </resources>
     <content>
-      <xul:stack anonid="stackid" class="daystack" xbl:inherits="bottom,right">
-        <xul:image anonid="imageid" xbl:inherits="mode,height,width"/>
-        <xul:hbox align="center">
-          <xul:label anonid="daytext" 
-                     class="toolbarbutton-text" 
-                     flex="1"
-                     xbl:inherits="value=label"/>
-        </xul:hbox>
-      </xul:stack>
+      <xul:hbox anonid="daypickerId" class="daypickerclass" align="center" flex="1">
+        <xul:label anonid="daytext"
+                   class="toolbarbutton-text"
+                   flex="1"
+                   xbl:inherits="value=label"/>
+      </xul:hbox>
     </content>
     <implementation>
       <method name="onmodified">
@@ -204,10 +201,7 @@
               <daypicker bottom="true" label="29" xbl:inherits="disabled, mode=id"/>
               <daypicker bottom="true" label="30" xbl:inherits="disabled, mode=id"/>
               <daypicker bottom="true" label="31" xbl:inherits="disabled, mode=id"/>
-              <daypicker disabled="true" bottom="true" xbl:inherits="mode=id"/>
-              <daypicker disabled="true" bottom="true" xbl:inherits="mode=id"/>
-              <daypicker disabled="true" bottom="true" xbl:inherits="mode=id"/>
-              <daypicker disabled="true" bottom="true" right="true" xbl:inherits="mode=id"/>
+              <daypicker bottom="true" right="true" label="" xbl:inherits="disabled, mode=id"/>
             </xul:hbox>
           </xul:vbox>
         </content>
@@ -229,7 +223,9 @@
               }
           }
           for (i = 0; i < val.length; i++) {
-              let index = (val[i] < 0 ? val[i] + days.length : val[i] - 1);
+              let lastDayOffset = val[i] == -1 ? 0 : -1;
+              let index = (val[i] < 0 ? val[i] + days.length + lastDayOffset
+                                      : val[i] - 1);
               days[index].setAttribute("checked", "true");
           }
           return val;
@@ -246,7 +242,7 @@
               for (var j = 0; j < numChilds; j++) {
                   var child = row.childNodes[j];
                   if (child.getAttribute("checked") == "true") {
-                      days.push(Number(child.label));
+                      days.push(Number(child.label) ? Number(child.label) : -1);
                   }
               }
           }
@@ -255,18 +251,21 @@
       </property>
 
       <constructor><![CDATA[
-        var mainbox =
+        let mainbox =
             document.getAnonymousElementByAttribute(
                 this, "anonid", "mainbox");
-        var numRows = mainbox.childNodes.length;
-        for (var i = 0; i < numRows; i++) {
-            var row = mainbox.childNodes[i];
-            var numChilds = row.childNodes.length;
-            for (var j = 0; j < numChilds; j++) {
-                var child = row.childNodes[j];
+        let numRows = mainbox.childNodes.length;
+        let child = null;
+        for (let i = 0; i < numRows; i++) {
+            let row = mainbox.childNodes[i];
+            let numChilds = row.childNodes.length;
+            for (let j = 0; j < numChilds; j++) {
+                child = row.childNodes[j];
                 child.calendar = this;
             }
         }
+        let labelLastDay = calGetString("calendar-event-dialog", "eventRecurrenceMonthlyLastDayLabel");
+        child.setAttribute("label", labelLastDay);
       ]]></constructor>
     </implementation>
   </binding>

calendar/base/jar.mn

@@ -128,7 +128,6 @@ calendar.jar:
     skin/calendar/calendar-status.png                      (themes/common/images/calendar-status.png)
     skin/calendar/classification.png                       (themes/common/images/classification.png)
     skin/calendar/common/calendar-task-tree.css            (themes/common/calendar-task-tree.css)
-    skin/calendar/daypicker-background.png                 (themes/common/images/daypicker-background.png)
     skin/calendar/day-box-item-image.png                   (themes/common/images/day-box-item-image.png)
     skin/calendar/event-grippy-bottom.png                  (themes/common/images/event-grippy-bottom.png)
     skin/calendar/event-grippy-left.png                    (themes/common/images/event-grippy-left.png)

calendar/base/modules/calRecurrenceUtils.jsm

@@ -149,8 +149,8 @@ function recurrenceRule2String(recurrenceInfo, startDate, endDate, allDay) {
                         }
                     }
                     let weekdaysString = weekdaysString_every + weekdaysString_position;
-                    weekdaysString = weekdaysString.slice(0,-2).
-                                     replace(/,(?= [^,]*$)/, ' ' + getRString("repeatDetailsAnd"));
+                    weekdaysString = weekdaysString.slice(0,-2)
+                                     .replace(/,(?= [^,]*$)/, ' ' + getRString("repeatDetailsAnd"));
 
                     let monthlyString = weekdaysString_every ? "monthlyEveryOfEvery" : "monthlyRuleNthOfEvery";
                     monthlyString = nounClass("repeatDetailsDay" + day_of_week(firstDay), monthlyString);
@@ -161,29 +161,27 @@ function recurrenceRule2String(recurrenceInfo, startDate, endDate, allDay) {
                     let component = rule.getComponent("BYMONTHDAY", {});
 
                     // First, find out if the 'BYMONTHDAY' component contains
-                    // any elements with a negative value. If so we currently
-                    // don't support anything but the 'last day of the month' rule.
+                    // any elements with a negative value lesser than -1 ("the
+                    // last day"). If so we currently don't support any rule
                     if (component.some(function(element, index, array) {
-                                           return element < 0;
+                                           return element < -1;
                                        })) {
+                        // we don't support any other combination for now...
+                        return getRString("ruleTooComplex");
+                    } else {
                         if (component.length == 1 && component[0] == -1) {
+                            // i.e. one day, the last day of the month
                             let monthlyString = getRString("monthlyLastDayOfNth");
                             ruleString = PluralForm.get(rule.interval, monthlyString)
                                                    .replace("#1", rule.interval);
-                        } else {
-                            // we don't support any other combination for now...
-                            return null;
-                        }
-                    } else {
-                        if (component.length == 31 &&
-                            component.every(function (element, index, array) {
-                                                for (let i = 0; i < array.length; i++) {
-                                                    if ((index + 1) == array[i]) {
-                                                        return true;
-                                                    }
-                                                }
-                                                return false;
-                                            })) {
+                        } else if (component.length == 31 &&
+                                    component.every(function (element, index, array) {
+                                                        for (let i = 0; i < array.length; i++) {
+                                                            if ((index + 1) == array[i])
+                                                                return true;
+                                                        }
+                                                        return false;
+                                                    })) {
                             // i.e. every day every N months
                             ruleString = getRString("monthlyEveryDayOfNth");
                             ruleString = PluralForm.get(rule.interval, ruleString)
@@ -191,15 +189,19 @@ function recurrenceRule2String(recurrenceInfo, startDate, endDate, allDay) {
                         } else {
                             // i.e. one or more monthdays every N months
                             let day_string = "";
+                            let lastDay = false;
                             for (let i = 0; i < component.length; i++) {
-                                day_string += component[i];
-                                if (component.length > 1 &&
-                                    i == (component.length - 2)) {
-                                    day_string += ' ' + getRString("repeatDetailsAnd") + ' ';
-                                } else if (i < component.length-1) {
-                                    day_string += ', ';
+                                if (component[i] == -1) {
+                                    lastDay = true;
+                                    continue;
                                 }
+                                day_string += component[i] + ", ";
                             }
+                            if (lastDay) {
+                                day_string += getRString("monthlyLastDay") + ", ";
+                            }
+                            day_string = day_string.slice(0,-2)
+                                         .replace(/,(?= [^,]*$)/, ' ' + getRString("repeatDetailsAnd"));
                             let monthlyString = getRString("monthlyDayOfNth", [day_string]);
                             ruleString = PluralForm.get(rule.interval, monthlyString)
                                                    .replace("#2", rule.interval);

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

@@ -4,25 +4,34 @@
 
 daypicker {
   -moz-binding: url(chrome://calendar/content/calendar-daypicker.xml#daypicker);
-  list-style-image: url("chrome://calendar/skin/daypicker-background.png");
-  -moz-image-region: rect(0px 31px 30px 0px);
+  background-image: linear-gradient(rgba(0, 0, 0, .0) 5%, rgba(0, 0, 0, .20));
   background-color: -moz-Field;
   text-align: center;
 }
 
 daypicker[mode="monthly-days"] {
-  width: 21px;
+  width: 32px;
+  height: 15px;
+}
+
+daypicker[mode="daypicker-weekday"] {
+  min-width: 36px;
+  height: 32px;
+}
+
+daypicker[mode="monthly-days"][bottom="true"][right="true"] {
+  width: 128px;
   height: 15px;
 }
 
 daypicker:hover {
-  -moz-image-region: rect(0px 62px 30px 31px);
+  background-image: linear-gradient(rgba(255, 255, 255, .0), rgba(0, 0, 0, .10) 90%);
   cursor: pointer;
 }
 
 daypicker:hover:active,
 daypicker[open="true"] {
-  -moz-image-region: rect(0px 93px 30px 62px);
+  background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .01) 15%);
   cursor: pointer;
 }
 
@@ -31,14 +40,14 @@ daypicker[disabled="true"][checked="true"],
 daypicker[disabled="true"]:hover,
 daypicker[disabled="true"]:hover:active,
 daypicker[disabled="true"][open="true"] {
-  -moz-image-region: rect(0px 31px 30px 0px);
+  background-image: linear-gradient(rgba(0, 0, 0, .0) 5%, rgba(0, 0, 0, .20));
   color: GrayText;
   cursor: default;
   background-color: -moz-Dialog;
 }
 
 daypicker[checked="true"] {
-  -moz-image-region: rect(0px 124px 30px 93px);
+  background-image: linear-gradient(rgba(0, 0, 0, .30), rgba(255, 255, 255, .0) 35%);
   background-color: Highlight;
   color: HighlightText;
 }

calendar/base/themes/gnomestripe/calendar-daypicker.css

@@ -9,7 +9,7 @@ daypicker {
   border-left: 1px solid ThreeDShadow;
 }
 
-daypicker [bottom="true"] {
+daypicker[bottom="true"] {
   border-bottom: 1px solid ThreeDShadow;
 }
 

calendar/base/themes/pinstripe/calendar-daypicker.css

@@ -9,7 +9,7 @@ daypicker {
   border-left: 1px solid #808080;
 }
 
-daypicker [bottom="true"] {
+daypicker[bottom="true"] {
   border-bottom: 1px solid #808080;
 }
 

calendar/base/themes/winstripe/calendar-daypicker.css

@@ -9,7 +9,7 @@ daypicker {
   border-left: 1px solid ThreeDShadow;
 }
 
-daypicker [bottom="true"] {
+daypicker[bottom="true"] {
   border-bottom: 1px solid ThreeDShadow;
 }
 

calendar/locales/en-US/chrome/calendar/calendar-event-dialog.properties

@@ -285,6 +285,13 @@ repeatDetailsInfinite=Occurs %1$S\neffective %2$S\nfrom %3$S to %4$S.
 #  effective 1/1/2009"
 repeatDetailsInfiniteAllDay=Occurs %1$S\neffective %2$S.
 
+# LOCALIZATION NOTE (monthlyLastDay):
+# Edit recurrence window -> Recurrence details link on Event/Task dialog window
+# A monthly rule with one or more days of the month (monthlyDayOfNth) and the
+# string "the last day" of the month.
+# e.g.: "Occurs day 15, 20, 25 and the last day of every 3 months"
+monthlyLastDay=the last day
+
 # LOCALIZATION NOTE (ruleTooComplex):
 # This string is shown in the repeat details area if our code can't handle the
 # complexity of the recurrence rule yet.
@@ -378,3 +385,9 @@ repeatDetailsDay7Plural=Saturday
 # For recurring rules that repeat forever, this labels appears in the
 # datepicker, below the minimonth, as an option for the until date.
 eventRecurrenceForeverLabel=Forever
+
+# LOCALIZATION NOTE (eventRecurrenceMonthlyLastDayLabel):
+# Edit dialog recurrence -> Monthly Recurrence pattern -> Monthly daypicker
+# The label on the monthly daypicker's last button that allows to select
+# the last day of the month inside a BYMONTHDAY rule.
+eventRecurrenceMonthlyLastDayLabel=Last day