[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..d1322118b7a0123a2aac7d9d69d2eab977fbaefb 100644
--- a/chrome/browser/resources/settings/device_page/night_light_slider.js
+++ b/chrome/browser/resources/settings/device_page/night_light_slider.js
@@ -37,6 +37,11 @@ Polymer({
      * @private
      */
     endTime_: String,
+
+    /**
+     * Whether the window is in RTL locales.

[stevenjb, 2017/06/22 22:48:41]

@private

[afakhry, 2017/06/22 23:08:41]

Done.

+     */
+    isRTL_: Boolean,
   },
 
   observers: [
@@ -56,6 +61,11 @@ Polymer({
    */
   dragObject_: null,
 
+  /** @override */
+  attached: function() {
+    this.isRTL_ = window.getComputedStyle(this).direction == 'rtl';
+  },
+
   /** @override */
   ready: function() {
     // Build the legend markers.
@@ -74,6 +84,18 @@ Polymer({
     });
   },
 
+  /**
+   * Gets the style of legend div determining its absolute left position.
+   * @param {number} percent The value of the div's left as a percent (0 - 100).
+   * @param {boolean} isRTL whether window is in RTL locale.
+   * @return {string} The CSS style of the legend div.
+   * @private
+   */
+  getLegendStyle_: function(percent, isRTL) {
+    percent = isRTL ? 100 - percent : percent;
+    return 'left: ' + percent + '%';
+  },
+
   /**
    * Expands or un-expands the knob being dragged along with its corresponding
    * label bubble.
@@ -170,7 +192,8 @@ Polymer({
         'ash.night_light.custom_start_time' :
         'ash.night_light.custom_end_time';
 
-    if (event.detail.ddx > 0) {
+    var ddx = this.isRTL_ ? event.detail.ddx * -1 : event.detail.ddx;
+    if (ddx > 0) {
       // Increment the knob's pref by the amount of deltaMinutes.
       this.incrementPref_(knobPref, deltaMinutes);
     } else {
@@ -271,7 +294,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';
   },
 
@@ -281,17 +304,18 @@ Polymer({
    * @private
    */
   refresh_: function() {
-    var endKnob = this.$.endKnob;
-    var startKnob = this.$.startKnob;
-    var startProgress = this.$.startProgress;
-    var endProgress = this.$.endProgress;
-    var startLabel = this.$.startLabel;
-    var endLabel = this.$.endLabel;
-
     // The label bubbles have the same left coordinates as their corresponding
     // knobs.
-    startLabel.style.left = startKnob.style.left;
-    endLabel.style.left = endKnob.style.left;
+    this.$.startLabel.style.left = this.$.startKnob.style.left;
+    this.$.endLabel.style.left = this.$.endKnob.style.left;
+
+    // In RTL locales, the relative positions of the knobs are flipped for the
+    // purpose of calculating the styles of the progress bars below.
+    var rtl = this.isRTL_;
+    var endKnob = rtl ? this.$.startKnob : this.$.endKnob;
+    var startKnob = rtl ? this.$.endKnob : this.$.startKnob;
+    var startProgress = rtl ? this.$.endProgress : this.$.startProgress;
+    var endProgress = rtl ? this.$.startProgress : this.$.endProgress;
 
     // 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.
@@ -443,7 +467,10 @@ Polymer({
     if (!knobPref)
       return;
 
-    this.decrementPref_(knobPref, 1);
+    if (this.isRTL_)
+      this.incrementPref_(knobPref, 1);
+    else
+      this.decrementPref_(knobPref, 1);
   },
 
   /**
@@ -456,7 +483,10 @@ Polymer({
     if (!knobPref)
       return;
 
-    this.incrementPref_(knobPref, 1);
+    if (this.isRTL_)
+      this.decrementPref_(knobPref, 1);
+    else
+      this.incrementPref_(knobPref, 1);
   },
 
   /**