[XForms] Datepicker control not available for XUL. Bug 334503, patch by surkov, r=doronr+aaronr

extensions/xforms/resources/content/input-xul.xml

@@ -104,7 +104,7 @@
            extends="#xformswidget-input-base">
     <content>
       <children includes="label"/>
-      <xul:textbox class="xf-value" anonid="control" 
+      <xul:textbox class="xf-value" anonid="control"
                    xbl:inherits="accesskey" flex="1"/>
       <children/>
     </content>
@@ -171,7 +171,78 @@
   </binding>
 
 
-  <!-- INPUT: <DATE, APPEARANCE='FULL' -->
+  <!-- INPUT: <DATE> -->
+  <binding id="xformswidget-input-date"
+           extends="#xformswidget-input-base">
+
+    <content>
+      <children includes="label"/>
+      <xul:textbox anonid="control" xbl:inherits="accesskey" flex="1"/>
+      <xul:toolbarbutton anonid="dropmarker"/>
+      <xul:popup anonid="popup" ignorekeys="true">
+        <xul:box mozType:calendar="true" anonid="picker"/>
+      </xul:popup>
+      <children/>
+    </content>
+
+    <implementation>
+      <constructor>
+        var pickerChangeHandler = {
+          inputControl: this,
+          handleEvent: function(aEvent) {
+            this.inputControl.control.value = this.inputControl.picker.value;
+            this.inputControl.popup.hidePopup();
+          }
+        };
+        this.picker.addEventListener("change", pickerChangeHandler, false);
+      </constructor>
+
+      <property name="dropmarker" readonly="true">
+        <getter>
+          if (!this._dropmarker)
+            this._dropmarker = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "dropmarker");
+          return this._dropmarker;
+        </getter>
+      </property>
+      <field name="_dropmarker">null</field>
+
+      <property name="picker" readonly="true">
+        <getter>
+          if (!this._picker)
+            this._picker = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "picker");
+          return this._picker;
+        </getter>
+      </property>
+      <field name="_picker">null</field>
+
+      <property name="popup" readonly="true">
+        <getter>
+          if (!this._popup)
+            this._popup = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "popup");
+          return this._popup;
+        </getter>
+      </property>
+      <field name="_popup">null</field>
+    </implementation>
+
+    <handlers>
+      <handler event="command">
+        if (event.originalTarget == this.dropmarker) {
+          this.popup.showPopup(this.dropmarker, -1, -1, "popup",
+                               "bottomleft", "topleft");
+        }
+      </handler>
+
+      <handler event="popupshowing">
+        this.picker.value = this.control.value;
+      </handler>
+    </handlers>
+  </binding>
+
+  <!-- INPUT: <DATE, APPEARANCE='FULL'> -->
   <binding id="xformswidget-input-date-full"
            extends="chrome://xforms/content/input.xml#xformswidget-input-base">
     <content>

extensions/xforms/resources/content/widgets-xul.xml

@@ -207,19 +207,25 @@
     <content orient="vertical">
       <xul:hbox>
         <!-- month selection section -->
-        <xul:menulist anonid="months-list">
-          <xul:menupopup/>
-        </xul:menulist>
-        <xul:vbox class="control-month-buttons-box">
-          <xul:toolbarbutton anonid="prevmonth-btn" class="toolbarbutton-up"
-            tooltiptext="&xforms.datepicker.prevMonth.title;"/>
-          <xul:toolbarbutton anonid="nextmonth-btn" class="toolbarbutton-dn"
-            tooltiptext="&xforms.datepicker.nextMonth.title;"/>
-        </xul:vbox>
+        <xul:hbox class="list" flex="1">
+          <xul:description anonid="months-label" readonly="true" flex="1"/>
+          <xul:vbox class="control-buttons-box">
+            <xul:toolbarbutton anonid="prevmonth-btn" class="toolbarbutton-up"
+                               tooltiptext="&xforms.datepicker.prevMonth.title;"/>
+            <xul:toolbarbutton anonid="nextmonth-btn" class="toolbarbutton-dn"
+                               tooltiptext="&xforms.datepicker.nextMonth.title;"/>
+          </xul:vbox>
+        </xul:hbox>
         <!-- year selection section -->
-        <xul:menulist editable="true" anonid="years-list">
-          <xul:menupopup/>
-        </xul:menulist>
+        <xul:hbox class="list">
+          <xul:description anonid="years-label"/>
+          <xul:vbox class="control-buttons-box">
+            <xul:toolbarbutton anonid="prevyear-btn" class="toolbarbutton-up"
+                               tooltiptext="&xforms.datepicker.prevYear.title;"/>
+            <xul:toolbarbutton anonid="nextyear-btn" class="toolbarbutton-dn"
+                               tooltiptext="&xforms.datepicker.nextYear.title;"/>
+          </xul:vbox>
+        </xul:hbox>
       </xul:hbox>
 
       <!-- calendar days container-->
@@ -247,55 +253,14 @@
         <body>
           this.refreshInternal(aCurrentDay, aDaysRefreshOnly);
 
-          this.monthsList.value = this.month;
+          this.monthsLabel.value =
+            new Date(this.year, this.month - 1).toLocaleFormat("%B");
 
-          this.yearsList.value = this.year;
-          if (!this.yearsList.selectedItem)
-            this.yearsList.label = this.year;
+          this.yearsLabel.value = this.year;
         </body>
       </method>
 
     <!-- private -->
-      <method name="buildUI">
-        <body>
-        <![CDATA[
-          this.buildUIInternal();
-
-          var items = this.monthsList.menupopup.childNodes;
-          for (var index = 0; index < 12; index++) {
-            this.monthsList.appendItem(
-              new Date(this.year, index).toLocaleFormat("%B"), index + 1);
-          }
-
-          var year = new Date().getFullYear();
-          for (var index = -5; index < 1; index++) {
-            this.yearsList.appendItem(year + index, year + index);
-          }
-        ]]>
-        </body>
-      </method>
-
-      <property name="monthsList" readonly="true">
-        <getter>
-          if (!this._monthsList) {
-            this._monthsList = this.ownerDocument.
-              getAnonymousElementByAttribute(this, "anonid", "months-list");
-          }
-          return this._monthsList;
-        </getter>
-      </property>
-      <field name="_monthsList">null</field>
-
-      <property name="yearsList" readonly="true">
-        <getter>
-          if (!this._yearsList) {
-            this._yearsList = this.ownerDocument.
-              getAnonymousElementByAttribute(this, "anonid", "years-list");
-          }
-          return this._yearsList;
-        </getter>
-      </property>
-      <field name="_yearsList">null</field>
 
       <property name="prevmonthButton" readonly="true">
         <getter>
@@ -318,24 +283,73 @@
         </getter>
       </property>
       <field name="_nextmonthButton">null</field>
+
+      <property name="prevyearButton" readonly="true">
+        <getter>
+          if (!this._prevyearButton) {
+            this._prevyearButton = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "prevyear-btn");
+          }
+          return this._prevyearButton;
+        </getter>
+      </property>
+      <field name="_prevyearButton">null</field>
+
+      <property name="nextyearButton" readonly="true">
+        <getter>
+          if (!this._nextyearButton) {
+            this._nextyearButton = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "nextyear-btn");
+          }
+          return this._nextyearButton;
+        </getter>
+      </property>
+      <field name="_nextyearButton">null</field>
+
+      <property name="monthsLabel" readonly="true">
+        <getter>
+          if (!this._monthsLabel) {
+            this._monthsLabel = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "months-label");
+          }
+          return this._monthsLabel;
+        </getter>
+      </property>
+      <field name="_monthsLabel">null</field>
+
+      <property name="yearsLabel" readonly="true">
+        <getter>
+          if (!this._yearsLabel) {
+            this._yearsLabel = this.ownerDocument.
+              getAnonymousElementByAttribute(this, "anonid", "years-label");
+          }
+          return this._yearsLabel;
+        </getter>
+      </property>
+      <field name="_yearsLabel">null</field>
     </implementation>
 
     <handlers>
       <handler event="command">
         var target = event.originalTarget;
-        if (target == this.prevmonthButton) {
-          this.processAction("prevMonth", null, true);
-        } else if (target == this.nextmonthButton) {
-          this.processAction("nextMonth", null, true);
-        } else if (target.parentNode.parentNode == this.monthsList) {
-          this.month = this.monthsList.value;
-        } else if (target.parentNode.parentNode == this.yearsList) {
-          this.year = this.yearsList.value;
+        switch (target) {
+          case this.prevmonthButton:
+            this.processAction("prevMonth", null, true);
+            break;
+          case this.nextmonthButton:
+            this.processAction("nextMonth", null, true);
+            break;
+          case this.prevyearButton:
+            this.year--;
+            break;
+          case this.nextyearButton:
+            this.year++;
+            break;
         }
       </handler>
 
       <handler event="change">
-        this.year = this.yearsList.value;
+        this.year = this.yearsLabel.value;
       </handler>
     </handlers>
   </binding>

extensions/xforms/resources/content/xforms.css

@@ -224,6 +224,20 @@ html|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"] html|inp
   background-repeat: no-repeat !important;
 }
 
+xul|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"] xul|toolbarbutton[anonid="dropmarker"] {
+  min-width:27px;
+  min-height: 1.3em;
+  list-style-image: url('chrome://xforms/content/calendar.png');
+}
+
+xul|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"] {
+  -moz-binding: url('chrome://xforms/content/input-xul.xml#xformswidget-input-date');
+}
+
+xul|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"] xul|box[mozType|calendar] {
+  -moz-binding: url('chrome://xforms/content/widgets-xul.xml#calendar-full');
+}
+
   /* input type="xsd:date", appearance="full" */
 html|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"][appearance="full"] {
   -moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-date-full');
@@ -232,10 +246,6 @@ html|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"][appearan
 xul|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"][appearance="full"] {
   -moz-binding: url('chrome://xforms/content/input-xul.xml#xformswidget-input-date-full');
 }
-xul|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#date"][appearance="full"]
-    xul|box[mozType|calendar] {
-  -moz-binding: url('chrome://xforms/content/widgets-xul.xml#calendar-full');
-}
 
   /* input type="xsd:gMonth" */
 html|*:root input[mozType|type="http://www.w3.org/2001/XMLSchema#gMonth"] {

extensions/xforms/resources/locale/en-US/xforms.dtd

@@ -65,3 +65,5 @@
 <!ENTITY xforms.datepicker.title "Show Date Picker">
 <!ENTITY xforms.datepicker.prevMonth.title "Previous Month">
 <!ENTITY xforms.datepicker.nextMonth.title "Next Month">
+<!ENTITY xforms.datepicker.prevYear.title "Previous Year">
+<!ENTITY xforms.datepicker.nextYear.title "Next Year">

extensions/xforms/resources/skin/widgets-xul.css

@@ -61,8 +61,18 @@ box[mozType|calendar] toolbarbutton:focus {
 
 /* calendar-full styles */
 
-menulist[anonid="months-list"] {
-  margin-right: 0px;
+.list {
+  -moz-box-pack: center;
+  -moz-box-align: center;
+
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  margin: 2px 4px;
 }
 
 .toolbarbutton-dn {