Bug 1301312 - Part 1: Localize AM/PM strings for <input type=time>. r?mconley, gandalf draft
authorJessica Jong <jjong@mozilla.com>
Mon, 06 Mar 2017 14:43:12 +0800
changeset 498734 17e2988af79376c91a6ab43db3ff3c105e7576bd
parent 498697 8dd496fd015a2b6e99573070279d9d1593836ea9
child 498735 90695d04b9b22e22bb47198e5a52326350f56e61
push id49288
push userjjong@mozilla.com
push dateWed, 15 Mar 2017 07:30:13 +0000
reviewersmconley, gandalf
bugs1301312
milestone55.0a1
Bug 1301312 - Part 1: Localize AM/PM strings for <input type=time>. r?mconley, gandalf MozReview-Commit-ID: 2QycAbnHmHv
toolkit/content/widgets/datetimebox.xml
--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -439,20 +439,26 @@
       <stylesheet src="chrome://global/content/textbox.css"/>
       <stylesheet src="chrome://global/skin/textbox.css"/>
       <stylesheet src="chrome://global/content/bindings/datetimebox.css"/>
     </resources>
 
     <implementation>
       <constructor>
       <![CDATA[
-        // TODO: Bug 1301312 - localization for input type=time input.
+        const kDefaultAMString = "AM";
+        const kDefaultPMString = "PM";
+
+        let { amString, pmString } =
+          this.getStringsForLocale(this.mLocales);
+
+        this.mAMIndicator = amString || kDefaultAMString;
+        this.mPMIndicator = pmString || kDefaultPMString;
+
         this.mHour12 = true;
-        this.mAMIndicator = "AM";
-        this.mPMIndicator = "PM";
         this.mPlaceHolder = "--";
         this.mSeparatorText = ":";
         this.mMillisecSeparatorText = ".";
         this.mMaxLength = 2;
         this.mMillisecMaxLength = 3;
         this.mDefaultStep = 60 * 1000; // in milliseconds
 
         this.mMinHourInHour12 = 1;
@@ -472,16 +478,22 @@
         this.mHourField.setAttribute("typeBuffer", "");
         this.mMinuteField =
           document.getAnonymousElementByAttribute(this, "anonid", "input-two");
         this.mMinuteField.setAttribute("typeBuffer", "");
         this.mDayPeriodField =
           document.getAnonymousElementByAttribute(this, "anonid", "input-three");
         this.mDayPeriodField.classList.remove("numeric");
 
+        let dayPeriodLength =
+          Math.max(this.mAMIndicator.length, this.mPMIndicator.length);
+
+        this.mDayPeriodField.size = dayPeriodLength;
+        this.mDayPeriodField.maxLength = dayPeriodLength;
+
         this.mHourField.placeholder = this.mPlaceHolder;
         this.mMinuteField.placeholder = this.mPlaceHolder;
         this.mDayPeriodField.placeholder = this.mPlaceHolder;
 
         this.mHourField.setAttribute("min", this.mMinHourInHour12);
         this.mHourField.setAttribute("max", this.mMaxHourInHour12);
         this.mMinuteField.setAttribute("min", this.mMinMinute);
         this.mMinuteField.setAttribute("max", this.mMaxMinute);
@@ -547,16 +559,43 @@
           field.placeholder = aPlaceHolder;
           container.insertBefore(field, this.mSpaceSeparator);
 
           return field;
         ]]>
         </body>
       </method>
 
+      <method name="getStringsForLocale">
+        <parameter name="aLocales"/>
+        <body>
+        <![CDATA[
+          this.log("getStringsForLocale: " + aLocales);
+
+          let intlUtils = window.intlUtils;
+          if (!intlUtils) {
+            return {};
+          }
+
+          let amString, pmString;
+          let keys = [ "dates/gregorian/dayperiods/am",
+                       "dates/gregorian/dayperiods/pm" ];
+
+          let result = intlUtils.getDisplayNames(this.mLocales, {
+            style: "short",
+            keys
+          });
+
+          [ amString, pmString ] = keys.map(key => result.values[key]);
+
+          return { amString, pmString };
+        ]]>
+        </body>
+      </method>
+
       <method name="setFieldsFromInputValue">
         <body>
         <![CDATA[
           let value = this.mInputElement.value;
           if (!value) {
             this.clearInputFields(true);
             return;
           }
@@ -1019,16 +1058,17 @@
       </html:div>
     </content>
 
     <implementation implements="nsIDateTimeInputArea">
       <constructor>
       <![CDATA[
         this.DEBUG = false;
         this.mInputElement = this.parentNode;
+        this.mLocales = window.getAppLocalesAsBCP47();
 
         this.mMin = this.mInputElement.min;
         this.mMax = this.mInputElement.max;
         this.mStep = this.mInputElement.step;
         this.mIsPickerOpen = false;
 
         this.mResetButton =
           document.getAnonymousElementByAttribute(this, "anonid", "reset-button");