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

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

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 (function() {
 
 /**
  * @fileoverview
  * night-light-slider is used to set the custom automatic schedule of the
  * Night Light feature, so that users can set their desired start and end
@@ skipping 57 matching lines @@
       marker.style.left = (i * 100 / HOURS_PER_DAY) + '%';
     }
 
     this.async(function() {
       // Read the initial prefs values and refresh the slider.
       this.customTimesChanged_();
     });
   },
 
   /**
+   * @return {boolean} True if window is in a right-to-left locale.
+   * @private
+   */
+  isRTL_: function() {
+    return window.getComputedStyle(document.firstElementChild).direction ===
+        'rtl';

[stevenjb, 2017/06/22 21:17:22]

This is an element so the following should work:

window.getComputedStyle(this).direction == 'rtl'

Also, we can/should probably just set this once in attached:

/** @override */
attached: function() {
  this.isRTL_ = window.getComputedStyle(this).direction == 'rtl';
}

(Declare isRL_ as a bool below dragObject_)

[afakhry, 2017/06/22 21:51:26]

I tried all of this the first thing but it doesn't work for the legends
unfortunately.

getLegendStyle_() is called before attached(). Also calling

window.getComputedStyle(this).direction

in getLegendStyle_() doesn't work either! Apparently 'this' is not fully
initialized yet? It only worked when I used:

window.getComputedStyle(document.firstElementChild).direction

[stevenjb, 2017/06/22 22:12:05]

You need to pass isRTL_ to the functions in the HTML to add it as a dependency.
e.g. [[getLegendStyle_(0, isRTL_)]] That will defer the calling of
getLegendStyle_ until isRTL_ is defined. (You'll also need to make isRTL_ a
property). That should also fix the issue with passing |this| to
getComputedStyle.

[afakhry, 2017/06/22 22:38:21]

This works. Thank you very much for suggesting! It's confusing though!

Done. Please take one final look.

+  },
+
+  /**
+   * 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).
+   * @return {string} the CSS style of the legend div.
+   * @private
+   */
+  getLegendStyle_: function(percent) {
+    percent = this.isRTL_() ? 100 - percent : percent;
+    return 'left: ' + percent + '%';
+  },
+
+  /**
    * Expands or un-expands the knob being dragged along with its corresponding
    * label bubble.
    * @param {boolean} expand True to expand, and false to un-expand.
    * @private
    */
   setExpanded_: function(expand) {
     var knob = this.$.startKnob;
     var label = this.$.startLabel;
     if (this.dragObject_ == this.$.endKnob) {
       knob = this.$.endKnob;
@@ skipping 75 matching lines @@
   doKnobTracking_: function(event) {
     var deltaRatio = Math.abs(event.detail.ddx) / this.$.sliderBar.offsetWidth;
     var deltaMinutes = Math.floor(deltaRatio * TOTAL_MINUTES_PER_DAY);
     if (deltaMinutes <= 0)
       return;
 
     var knobPref = this.dragObject_ == this.$.startKnob ?
         '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 {
       // Decrement the knob's pref by the amount of deltaMinutes.
       this.decrementPref_(knobPref, deltaMinutes);
     }
   },
 
   /**
    * Ends the dragging.
@@ skipping 80 matching lines @@
 
     if (ratio == 0) {
       // If the ratio is 0, then there are two possibilities:
       // - The knob time is 6:00 PM on the left side of the slider.
       // - The knob time is 6:00 PM on the right side of the slider.
       // We need to check the current knob offset ratio to determine which case
       // it is.
       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';
   },
 
   /**
    * Refreshes elements of the slider other than the knobs (the label bubbles,
    * and the progress bar).
    * @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.
     var endProgressLeft = startKnob.offsetLeft >= endKnob.offsetLeft ?
         '0px' :
         startKnob.style.left;
     endProgress.style.left = endProgressLeft;
     endProgress.style.width =
         (parseFloat(endKnob.style.left) - parseFloat(endProgressLeft)) + 'px';
 
@@ skipping 131 matching lines @@
   /**
    * Handles the 'left' key event.
    * @private
    */
   onLeftKey_: function(e) {
     e.preventDefault();
     var knobPref = this.getFocusedKnobPrefPathIfAny_();
     if (!knobPref)
       return;
 
-    this.decrementPref_(knobPref, 1);
+    if (this.isRTL_())
+      this.incrementPref_(knobPref, 1);
+    else
+      this.decrementPref_(knobPref, 1);
   },
 
   /**
    * Handles the 'right' key event.
    * @private
    */
   onRightKey_: function(e) {
     e.preventDefault();
     var knobPref = this.getFocusedKnobPrefPathIfAny_();
     if (!knobPref)
       return;
 
-    this.incrementPref_(knobPref, 1);
+    if (this.isRTL_())
+      this.decrementPref_(knobPref, 1);
+    else
+      this.incrementPref_(knobPref, 1);
   },
 
   /**
    * @return {boolean} Whether either of the two knobs is focused.
    * @private
    */
   isEitherKnobFocused_: function() {
     var activeElement = this.shadowRoot.activeElement;
     return activeElement == this.$.startKnob || activeElement == this.$.endKnob;
   },
@@ skipping 46 matching lines @@
   _focusedChanged: function(receivedFocusFromKeyboard) {
     // Overrides the _focusedChanged() from the PaperInkyFocusBehavior so that
     // it does nothing. This function is called only once for the entire
     // night-light-slider element even when focus is moved between the two
     // knobs. This doesn't allow us to decide on which knob the ripple will be
     // created. Hence we handle focus and blur explicitly above.
   }
 });
 
 })();