Bug 1337319 - Order month and year spinners based on locale datetime format r=mconley

MozReview-Commit-ID: AmAVjybJZ6A

--HG--
extra : rebase_source : 009b64009817ae468c0d47b473d4cbdcf72246c0

toolkit/content/widgets/datepicker.js

@@ -62,6 +62,8 @@ function DatePicker(context) {
         isYearSet: false,
         isMonthSet: false,
         isDateSet: false,
+        datetimeOrders: new Intl.DateTimeFormat(locale)
+                          .formatToParts(new Date(0)).map(part => part.type),
         getDayString: new Intl.NumberFormat(locale).format,
         getWeekHeaderString: weekday => weekdayStrings[weekday],
         getMonthString: month => monthStrings[month],
@@ -110,6 +112,7 @@ function DatePicker(context) {
           setYear: this.state.setYear,
           setMonth: this.state.setMonth,
           getMonthString: this.state.getMonthString,
+          datetimeOrders: this.state.datetimeOrders,
           locale: this.state.locale
         }, {
           monthYear: this.context.monthYear,
@@ -287,6 +290,7 @@ function DatePicker(context) {
    *          {Function} setYear
    *          {Function} setMonth
    *          {Function} getMonthString
+   *          {Array<String>} datetimeOrders
    *        }
    * @param {DOMElement} context
    */
@@ -294,12 +298,18 @@ function DatePicker(context) {
     const spinnerSize = 5;
     const yearFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric" }).format;
     const dateFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric", month: "long" }).format;
+    const spinnerOrder =
+      options.datetimeOrders.indexOf("month") < options.datetimeOrders.indexOf("year") ?
+      "order-month-year" : "order-year-month";
+
+    context.monthYearView.classList.add(spinnerOrder);
 
     this.context = context;
     this.state = { dateFormat };
     this.props = {};
     this.components = {
       month: new Spinner({
+        id: "spinner-month",
         setValue: month => {
           this.state.isMonthSet = true;
           options.setMonth(month);
@@ -308,6 +318,7 @@ function DatePicker(context) {
         viewportSize: spinnerSize
       }, context.monthYearView),
       year: new Spinner({
+        id: "spinner-year",
         setValue: year => {
           this.state.isYearSet = true;
           options.setYear(year);

toolkit/content/widgets/spinner.js

@@ -42,7 +42,7 @@ function Spinner(props, context) {
      *         }
      */
     _init(props) {
-      const { setValue, getDisplayString, hideButtons, rootFontSize = 10 } = props;
+      const { id, setValue, getDisplayString, hideButtons, rootFontSize = 10 } = props;
 
       const spinnerTemplate = document.getElementById("spinner-template");
       const spinnerElement = document.importNode(spinnerTemplate.content, true);
@@ -72,6 +72,9 @@ function Spinner(props, context) {
 
       this.elements.spinner.style.height = (ITEM_HEIGHT * viewportSize) + "rem";
 
+      if (id) {
+        this.elements.container.id = id;
+      }
       if (hideButtons) {
         this.elements.container.classList.add("hide-buttons");
       }

toolkit/themes/shared/datetimeinputpickers.css

@@ -171,6 +171,16 @@ button.month-year.active::after {
   transition: none;
 }
 
+.order-month-year > #spinner-month,
+.order-year-month > #spinner-year {
+  order: 1;
+}
+
+.order-month-year > #spinner-year,
+.order-year-month > #spinner-month {
+  order: 2;
+}
+
 .calendar-container {
   cursor: default;
   display: flex;