Bug 255668 - Time picker only displays hours in 24 hours time format. r=mmecca, ui-r=richard.marti
authorDecathlon <bv1578@gmail.com>
Thu, 31 Oct 2013 12:42:12 +0100
changeset 16851 fd245059ac57bb80704cd30940fb061d43c38e9a
parent 16850 25b79fb93d646ece57854e21bfd48c54868126b6
child 16852 1c6c0b697be421fbca17d59ad23a923fec9e65af
push id1074
push userbugzilla@standard8.plus.com
push dateMon, 03 Feb 2014 22:47:23 +0000
treeherdercomm-beta@6b791b5369ed [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmmecca, richard.marti
bugs255668
Bug 255668 - Time picker only displays hours in 24 hours time format. r=mmecca, ui-r=richard.marti
calendar/resources/content/datetimepickers/datetimepickers.xml
calendar/resources/skin/classic/datetimepickers/datetimepickers.css
--- a/calendar/resources/content/datetimepickers/datetimepickers.xml
+++ b/calendar/resources/content/datetimepickers/datetimepickers.xml
@@ -554,17 +554,17 @@
                       id="timepicker-text"
                       class="timepicker-text-class"
                       onchange="this.kTimePicker.parseTextBoxTime(true, event);"
                       onkeypress="if (event.keyCode == 13) this.kTimePicker.parseTextBoxTime(true);"
                       xbl:inherits="disabled">
           <xul:menupopup popupalign="topright" popupanchor="bottomright"
                          onpopupshowing="onPopup(this)"
                          onpopuphiding="onHide(this)">
-            <xul:timepicker-grids />
+            <xul:timepicker-grids anonid="timepickerGrids"/>
           </xul:menupopup>
         </xul:menulist>
       </xul:hbox>
     </content>
 
     <!-- ::::::::::::::::: INTERFACE ::::::::::::::::::::::::: -->
     <implementation>
       <constructor>
@@ -573,19 +573,33 @@
           this.kTextBox = hbox.childNodes[0];
           this.kTextBox.kTimePicker = this; // enable call back to method in Moz1.7
 
           var val = this.getAttribute("value");
           if (val)
             this.value = (new Date(val));
           else
             this.value = (new Date());
+
+          // Change the grids in the timepicker-grids for 12-hours time format.
+          if (this.ampmIndex) {
+            // Find the locale strings for the AM/PM prefix/suffix.
+            let amTime = new Date(2000,0,1,6,12,34);
+            let pmTime = new Date(2000,0,1,18,12,34);
+            amTime = amTime.toLocaleFormat(this.kTimeFormatString);
+            pmTime = pmTime.toLocaleFormat(this.kTimeFormatString);
+            let amLabel = this.parseTimeRegExp.exec(amTime)[this.ampmIndex] || "AM";
+            let pmLabel = this.parseTimeRegExp.exec(pmTime)[this.ampmIndex] || "PM";
+
+            document.getAnonymousElementByAttribute(this, "anonid", "timepickerGrids")
+                    .changeTo12HoursFormat(amLabel, pmLabel);
+          }
         ]]>
       </constructor>
-      
+
       <method name="update">
         <parameter name="aValue"/>
         <parameter name="aRefresh"/>
         <body>
           <![CDATA[
             let timeChanged = false;
             if (aValue != null) {
               if (this.mValue) {
@@ -775,33 +789,34 @@
     </resources>
     
     <!-- ::::::::::::::::: CONTENT ::::::::::::::::::::::::: -->
     <content>
       <!-- Box to hold time picker internals -->
       <vbox anonid="time-picker-grids"
             xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <!-- Hour Grid -->
-        <grid anonid="time-picker-hour-grid">
+        <grid anonid="time-picker-hour-grid" format12hours="false">
           <columns>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
             <column class="time-picker-hour-column-class" flex="1"/>
+            <column/>
           </columns>
           <rows>
-            <row flex="1">
+            <row flex="1" class="timepicker-topRow-hour-class">
               <timepicker-hour class="time-picker-hour-box-class" value="0"
                                anonid="time-picker-hour-box-0"    label="0"/>
               <timepicker-hour class="time-picker-hour-box-class" value="1"
                                anonid="time-picker-hour-box-1"    label="1"/>
               <timepicker-hour class="time-picker-hour-box-class" value="2"
                                anonid="time-picker-hour-box-2"    label="2"/>
               <timepicker-hour class="time-picker-hour-box-class" value="3"
                                anonid="time-picker-hour-box-3"    label="3"/>
@@ -816,18 +831,21 @@
               <timepicker-hour class="time-picker-hour-box-class" value="8"
                                anonid="time-picker-hour-box-8"    label="8"/>
               <timepicker-hour class="time-picker-hour-box-class" value="9" 
                                anonid="time-picker-hour-box-9"    label="9"/>
               <timepicker-hour class="time-picker-hour-box-class" value="10"
                                anonid="time-picker-hour-box-10"   label="10"/>
               <timepicker-hour class="time-picker-hour-box-class" value="11"
                                anonid="time-picker-hour-box-11"   label="11"/>
+              <hbox anonid="amLabelBox"  class="timepicker-amLabelBox-class" hidden="true">
+                <label/>
+              </hbox>
             </row>
-            <row flex="1">
+            <row flex="1" class="timepicker-bottomRow-hour-class">
               <timepicker-hour class="time-picker-hour-box-class" value="12"
                                anonid="time-picker-hour-box-12"   label="12"/>
               <timepicker-hour class="time-picker-hour-box-class" value="13"
                                anonid="time-picker-hour-box-13"   label="13"/>
               <timepicker-hour class="time-picker-hour-box-class" value="14"
                                anonid="time-picker-hour-box-14"   label="14"/>
               <timepicker-hour class="time-picker-hour-box-class" value="15"
                                anonid="time-picker-hour-box-15"   label="15"/>
@@ -842,16 +860,19 @@
               <timepicker-hour class="time-picker-hour-box-class" value="20"
                                anonid="time-picker-hour-box-20"   label="20"/>
               <timepicker-hour class="time-picker-hour-box-class" value="21"
                                anonid="time-picker-hour-box-21"   label="21"/>
               <timepicker-hour class="time-picker-hour-box-class" value="22"
                                anonid="time-picker-hour-box-22"   label="22"/>
               <timepicker-hour class="time-picker-hour-box-class" value="23"
                                anonid="time-picker-hour-box-23"   label="23"/>
+              <hbox anonid="pmLabelBox"  class="timepicker-pmLabelBox-class" hidden="true">
+                <label/>
+              </hbox>
             </row>
           </rows>
         </grid> <!-- Hour Grid -->
         <!-- Five  Minute Grid -->
         <vbox anonid="time-picker-five-minute-grid-box" flex="1">
           <grid anonid="time-picker-five-minute-grid" flex="1">
             <columns>
               <column class="time-picker-five-minute-column-class" flex="1"/>
@@ -1356,16 +1377,39 @@
             var minutesByFive = Math.round( minutes / 5 ) * 5;
 
             if (minutesByFive > 59)
               minutesByFive = 55;
             return minutesByFive;
           ]]>
         </body>
       </method>
+
+      <method name="changeTo12HoursFormat">
+        <parameter name="aAmLabel"/>
+        <parameter name="aPmLabel"/>
+        <body>
+          <![CDATA[
+            let amLabelBox = document.getAnonymousElementByAttribute(this, "anonid", "amLabelBox");
+            amLabelBox.removeAttribute("hidden");
+            amLabelBox.firstChild.setAttribute("value", aAmLabel);
+            let pmLabelBox = document.getAnonymousElementByAttribute(this, "anonid", "pmLabelBox");
+            pmLabelBox.removeAttribute("hidden");
+            pmLabelBox.firstChild.setAttribute("value", aPmLabel);
+            document.getAnonymousElementByAttribute(this, "anonid", "time-picker-hour-box-0")
+                    .setAttribute("label", "12");
+            for (let i = 13; i < 24; i++) {
+              document.getAnonymousElementByAttribute(this, "anonid", "time-picker-hour-box-" + i)
+                      .setAttribute("label", i-12);
+            }
+            document.getAnonymousElementByAttribute(this, "anonid", "time-picker-hour-grid")
+                    .setAttribute("format12hours", "true");
+          ]]>
+        </body>
+      </method>
     </implementation>
 
     <!-- ::::::::::::::::: HANDLERS ::::::::::::::::::::::::: -->
 
     <handlers>
       <handler event="bindingattached" action="this.initialize();"/>
     </handlers>
 
--- a/calendar/resources/skin/classic/datetimepickers/datetimepickers.css
+++ b/calendar/resources/skin/classic/datetimepickers/datetimepickers.css
@@ -67,36 +67,53 @@
  *   popup (from timepicker/timepicker.css)
  *-------------------------------------------------------------------*/
 
 /* Box that occupies whole window */
 
 vbox[anonid="time-picker-grids"] {
   background-color : #ffffff;
   font-size        : 8pt;
-  margin-bottom    : 1px;
-  -moz-margin-end     : 1px;
+  margin           : 1px 1px 2px 1px;
 }
 
 /* Grid for hours */
 
 grid[anonid="time-picker-hour-grid"] {
   background-color : -moz-Dialog;
   color            : -moz-DialogText;
-  border-top       : 1px solid -moz-DialogText; 
-  border-left      : 1px solid -moz-DialogText; 
-  margin-top       : 1px;
+  border-top       : 1px solid ThreeDShadow;
+  border-right     : 1px solid ThreeDShadow;
+  border-bottom    : 1px solid ThreeDShadow;
+  margin           : 1px;
+}
+
+/* Boxes with AM/PM labels */
+
+.timepicker-amLabelBox-class,
+.timepicker-pmLabelBox-class {
+  border-left      : 1px solid ThreeDShadow;
+  border-left-style: double;
+  border-left-width: 3px;
+  background-color : Window;
 }
 
 /* Box in each cell of the grid for hours */
 
 .time-picker-hour-box-class {
+  min-width      : 24px;
   -moz-box-align : center;
-  border-right   : 1px solid ThreeDShadow; 
-  border-bottom  : 1px solid ThreeDShadow; 
+  border-left    : 1px solid ThreeDShadow; 
+}
+
+.timepicker-topRow-hour-class {
+  border-bottom  : 1px solid ThreeDShadow;
+}
+grid[anonid="time-picker-hour-grid"][format12hours="true"] .timepicker-topRow-hour-class {
+  border-bottom  : 2px solid ThreeDShadow;
 }
 
 .time-picker-hour-box-class:hover {
   background-color : InactiveCaption;
   color            : InactiveCaptionText;
   cursor           : pointer;
 }