Bug 1320880 - Add RTL support to date picker r=mconley
authorScott Wu <scottcwwu@gmail.com>
Fri, 17 Feb 2017 18:16:17 +0800
changeset 346066 ee721adb0e1034d8725e611d189a65f977dd3961
parent 346065 937f897753957bc3f524d61f208c93d0c048b210
child 346067 092428e1b2ba018538f03a3738a16c614bb84dde
push id38388
push usercbook@mozilla.com
push dateMon, 06 Mar 2017 10:15:58 +0000
treeherderautoland@ee721adb0e10 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1320880
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1320880 - Add RTL support to date picker r=mconley MozReview-Commit-ID: LIrOuUCfz17
toolkit/content/datepicker.xhtml
toolkit/content/widgets/datepicker.js
toolkit/content/widgets/datetimepopup.xml
toolkit/themes/shared/datetimeinputpickers.css
--- a/toolkit/content/datepicker.xhtml
+++ b/toolkit/content/datepicker.xhtml
@@ -11,18 +11,18 @@
   <script type="application/javascript" src="chrome://global/content/bindings/spinner.js"></script>
   <script type="application/javascript" src="chrome://global/content/bindings/calendar.js"></script>
   <script type="application/javascript" src="chrome://global/content/bindings/datepicker.js"></script>
 </head>
 <body>
   <div id="date-picker">
     <div class="calendar-container">
       <div class="nav">
-        <button class="left"/>
-        <button class="right"/>
+        <button class="prev"/>
+        <button class="next"/>
       </div>
       <div class="week-header"></div>
       <div class="days-viewport">
         <div class="days-view"></div>
       </div>
     </div>
     <div class="month-year-container">
       <button class="month-year"/>
@@ -46,16 +46,16 @@
                   getInterface(Components.interfaces.nsIDOMWindowUtils);
   domWinUtls.loadSheetUsingURIString('data:text/css,@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); scrollbar { display: none; }', domWinUtls.AGENT_SHEET);
   // Create a DatePicker instance and prepare to be
   // initialized by the "DatePickerInit" event from datetimepopup.xml
   const root = document.getElementById("date-picker");
   new DatePicker({
     monthYear: root.querySelector(".month-year"),
     monthYearView: root.querySelector(".month-year-view"),
-    buttonLeft: root.querySelector(".left"),
-    buttonRight: root.querySelector(".right"),
+    buttonPrev: root.querySelector(".prev"),
+    buttonNext: root.querySelector(".next"),
     weekHeader: root.querySelector(".week-header"),
     daysView: root.querySelector(".days-view")
   });
   </script>
 </body>
 </html>
--- a/toolkit/content/widgets/datepicker.js
+++ b/toolkit/content/widgets/datepicker.js
@@ -45,25 +45,28 @@ function DatePicker(context) {
       const now = new Date();
       const { year = now.getFullYear(),
               month = now.getMonth(),
               day = now.getDate(),
               firstDayOfWeek,
               weekends,
               monthStrings,
               weekdayStrings,
-              locale } = this.props;
+              locale,
+              dir } = this.props;
       const dateKeeper = new DateKeeper({
         year, month, day
       }, {
         firstDayOfWeek,
         weekends,
         calViewSize: CAL_VIEW_SIZE
       });
 
+      document.dir = dir;
+
       this.state = {
         dateKeeper,
         locale,
         isMonthPickerVisible: false,
         isYearSet: false,
         isMonthSet: false,
         isDateSet: false,
         datetimeOrders: new Intl.DateTimeFormat(locale)
@@ -212,29 +215,29 @@ function DatePicker(context) {
           this.handleMessage(event);
           break;
         }
         case "mousedown": {
           // Use preventDefault to keep focus on input boxes
           event.preventDefault();
           event.target.setCapture();
 
-          if (event.target == this.context.buttonLeft) {
+          if (event.target == this.context.buttonPrev) {
             event.target.classList.add("active");
             this.state.dateKeeper.setMonthByOffset(-1);
             this._update();
-          } else if (event.target == this.context.buttonRight) {
+          } else if (event.target == this.context.buttonNext) {
             event.target.classList.add("active");
             this.state.dateKeeper.setMonthByOffset(1);
             this._update();
           }
           break;
         }
         case "mouseup": {
-          if (event.target == this.context.buttonLeft || event.target == this.context.buttonRight) {
+          if (event.target == this.context.buttonPrev || event.target == this.context.buttonNext) {
             event.target.classList.remove("active");
           }
 
         }
       }
     },
 
     /**
--- a/toolkit/content/widgets/datetimepopup.xml
+++ b/toolkit/content/widgets/datetimepopup.xml
@@ -92,16 +92,17 @@
             }
           }
         ]]></body>
       </method>
       <method name="initPicker">
         <parameter name="detail"/>
         <body><![CDATA[
           const locale = Components.classes["@mozilla.org/chrome/chrome-registry;1"].getService(Ci.nsIXULChromeRegistry).getSelectedLocale("global");
+          const dir = this.mozIntl.getLocaleInfo(locale).direction;
 
           switch (this.type) {
             case "time": {
               const { hour, minute } = detail.value;
               const format = detail.format || "12";
 
               this.postMessageToPicker({
                 name: "PickerInit",
@@ -153,17 +154,18 @@
                   year,
                   // Month value from input box starts from 1 instead of 0
                   month: month == undefined ? undefined : month - 1,
                   day,
                   firstDayOfWeek,
                   weekends,
                   monthStrings,
                   weekdayStrings,
-                  locale
+                  locale,
+                  dir,
                 }
               });
               break;
             }
           }
         ]]></body>
       </method>
       <method name="setInputBoxValue">
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -72,41 +72,47 @@ button {
 .nav > button:hover {
   fill: var(--button-font-color-hover);
 }
 
 .nav > button.active {
   fill: var(--button-font-color-active);
 }
 
-.nav > button.left {
+.nav > button.prev,
+.nav > button.next:dir(rtl) {
   background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
 }
 
-.nav > button.right {
+.nav > button.next,
+.nav > button.prev:dir(rtl) {
   background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
 }
 
 .month-year-container {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 3rem;
+  right: 3rem;
   width: 17.1rem;
   height: var(--date-picker-item-height);
   z-index: 10;
 }
 
 button.month-year {
   font-size: 1.3rem;
   border: var(--border);
   border-radius: 0.3rem;
-  padding: 0.2rem 2.6rem 0.2rem 1.2rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
+  padding-inline-start: 1.2rem;
+  padding-inline-end: 2.6rem;
 }
 
 button.month-year:hover {
   background: var(--fill-color);
 }
 
 button.month-year.active {
   border-color: var(--border-active-color);