[MD-Settings][Night Light] CL10: Add RTL languages support to the slider

chrome/browser/resources/settings/device_page/night_light_slider.js

Index: chrome/browser/resources/settings/device_page/night_light_slider.js
diff --git a/chrome/browser/resources/settings/device_page/night_light_slider.js b/chrome/browser/resources/settings/device_page/night_light_slider.js
index 3c84b8692e0128884d263b859ebbd9e9164448b4..f0f3219578aa40857a7077e78d096d86a7f35a9f 100644
--- a/chrome/browser/resources/settings/device_page/night_light_slider.js
+++ b/chrome/browser/resources/settings/device_page/night_light_slider.js
@@ -56,6 +56,25 @@ Polymer({
    */
   dragObject_: null,
 
+  /**
+   * The styles of slider legends determining their absolute left position in
+   * both LTR and RTL locales.
+   * @type {Array}
+   * @private
+   */
+  legendsStyles_: [
+    // The beginning 6:00 PM.
+    {ltr: 'left: 0%;', rtl: 'left: 100%'},
+    // 12:00 AM.
+    {ltr: 'left: 25%;', rtl: 'left: 75%'},
+    // 6:00 AM.
+    {ltr: 'left: 50%;', rtl: 'left: 50%'},
+    // 12:00 PM.
+    {ltr: 'left: 75%;', rtl: 'left: 25%'},
+    // The ending 6:00 PM.
+    {ltr: 'left: 100%;', rtl: 'left: 0%'},
+  ],
+
   /** @override */
   ready: function() {
     // Build the legend markers.
@@ -74,6 +93,26 @@ Polymer({
     });
   },
 
+  /**
+   * @return {boolean} True if window is in a right-to-left locale.
+   * @private
+   */
+  isRTL_: function() {
+    return window.getComputedStyle(document.firstElementChild).direction ===
+        'rtl';
+  },
+
+  /**
+   * Gets the style of legend div determining its absolute left position.
+   * @param {number} index The index of the div in its parent #legendContainer.
+   * @return {string} the CSS style of the legend div.
+   * @private
+   */
+  getLegendStyle_: function(index) {
+    var style = this.legendsStyles_[index];
+    return this.isRTL_() ? style.rtl : style.ltr;

[stevenjb, 2017/06/22 20:23:42]

Any particular reason not to pass 0-100 to this and return 'left: ' + (rtl ? 100
- percent : percent) + '%' instead of using a table?

[afakhry, 2017/06/22 21:01:16]

No reason, other than I didn't want to do the calculation + string concatenation
every time this function is called.

Done.

+  },
+
   /**
    * Expands or un-expands the knob being dragged along with its corresponding
    * label bubble.
@@ -170,7 +209,8 @@ Polymer({
         'ash.night_light.custom_start_time' :
         'ash.night_light.custom_end_time';
 
-    if (event.detail.ddx > 0) {
+    var ddx = this.isRTL_() ? (-1 * event.detail.ddx) : event.detail.ddx;

[stevenjb, 2017/06/22 20:23:43]

nit: this.isRTL_() ? event.detail.ddx * -1 : event.detail.ddx;

[afakhry, 2017/06/22 21:01:16]

Done.

+    if (ddx > 0) {
       // Increment the knob's pref by the amount of deltaMinutes.
       this.incrementPref_(knobPref, deltaMinutes);
     } else {
@@ -271,7 +311,7 @@ Polymer({
       var currentKnobRatio = this.getKnobRatio_(knob);
       ratio = currentKnobRatio > 0.5 ? 1.0 : 0.0;
     }
-
+    ratio = this.isRTL_() ? (1.0 - ratio) : ratio;
     knob.style.left = (ratio * this.$.sliderBar.offsetWidth) + 'px';
   },
 
@@ -293,6 +333,15 @@ Polymer({
     startLabel.style.left = startKnob.style.left;
     endLabel.style.left = endKnob.style.left;
 
+    if (this.isRTL_()) {
+      // In RTL locales, the relative positions of the knobs are flipped for the
+      // purpose of calculating the styles of the progress bars below.
+      startKnob = endKnob;
+      endKnob = this.$.startKnob;
+      startProgress = endProgress;
+      endProgress = this.$.startProgress;
+    }

[stevenjb, 2017/06/22 20:23:42]

nit: I think this would be more clear as:

var rtl = this.isRTL_();
var endKnob = rtl ? this.$.startKnob : this.$.endKnob;
etc

[afakhry, 2017/06/22 21:01:16]

Done.

+
     // The end progress bar starts from either the start knob or the start of
     // the slider (whichever is to its left) and ends at the end knob.
     var endProgressLeft = startKnob.offsetLeft >= endKnob.offsetLeft ?
@@ -443,7 +492,10 @@ Polymer({
     if (!knobPref)
       return;
 
-    this.decrementPref_(knobPref, 1);
+    if (this.isRTL_())
+      this.incrementPref_(knobPref, 1);
+    else
+      this.decrementPref_(knobPref, 1);
   },
 
   /**
@@ -456,7 +508,10 @@ Polymer({
     if (!knobPref)
       return;
 
-    this.incrementPref_(knobPref, 1);
+    if (this.isRTL_())
+      this.decrementPref_(knobPref, 1);
+    else
+      this.incrementPref_(knobPref, 1);
   },
 
   /**