[Night Light] CL11: Enhancements

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
  * times.
  */
 
 /** @const */ var HOURS_PER_DAY = 24;
-/** @const */ var MIN_KNOBS_DISTANCE_MINUTES = 30;
+/** @const */ var MIN_KNOBS_DISTANCE_MINUTES = 60;
 /** @const */ var OFFSET_MINUTES_6PM = 18 * 60;
 /** @const */ var TOTAL_MINUTES_PER_DAY = 24 * 60;
 
 Polymer({
   is: 'night-light-slider',
 
   behaviors: [
     PrefsBehavior,
     Polymer.IronA11yKeysBehavior,
     Polymer.PaperInkyFocusBehavior,
@@ skipping 317 matching lines @@
   /**
    * If the label bubbles overlap, this function fixes them by moving the end
    * label up a little.
    * @private
    */
   fixLabelsOverlapIfAny_: function() {
     var startLabel = this.$.startLabel;
     var endLabel = this.$.endLabel;
     var distance = Math.abs(
         parseFloat(startLabel.style.left) - parseFloat(endLabel.style.left));
-    if (distance <= startLabel.offsetWidth) {
+    // Both knobs have the same width, but the one being dragged is scaled up by
+    // 125%.
+    if (distance <= (1.25 * startLabel.offsetWidth)) {
       // Shift the end label up so that it doesn't overlap with the start label.
       endLabel.classList.add('end-label-overlap');
     } else {
       endLabel.classList.remove('end-label-overlap');
     }
   },
 
   /**
    * Given the |prefPath| that corresponds to one knob time, it gets the value
    * of the pref that corresponds to the other knob.
@@ skipping 18 matching lines @@
    * @param {number} increment
    * @private
    */
   incrementPref_: function(prefPath, increment) {
     var value = this.getPref(prefPath).value + increment;
 
     var otherValue = this.getOtherKnobPrefValue_(prefPath);
     if (otherValue > value &&
         ((otherValue - value) < MIN_KNOBS_DISTANCE_MINUTES)) {
       // We are incrementing the minutes offset moving towards the other knob.
-      // We have a minimum 30 minutes overlap threshold. Move this knob to the
+      // We have a minimum 60 minutes overlap threshold. Move this knob to the
       // other side of the other knob.
       //
       // Was:
-      // ------ (+) --- 29 MIN --- + ------->>
+      // ------ (+) --- 59 MIN --- + ------->>
       //
       // Now:
-      // ------ + --- 30 MIN --- (+) ------->>
+      // ------ + --- 60 MIN --- (+) ------->>
       //
       // (+) ==> Knob being moved.
       value = otherValue + MIN_KNOBS_DISTANCE_MINUTES;
     }
 
     // The knobs are allowed to wrap around.
     this.setPrefValue(prefPath, (value % TOTAL_MINUTES_PER_DAY));
   },
 
   /**
    * Decrements the value of the pref whose path is given by |prefPath| by the
    * amount given in |decrement|.
    * @param {string} prefPath
    * @param {number} decrement
    * @private
    */
   decrementPref_: function(prefPath, decrement) {
     var value =
         /** @type {number} */ (this.getPref(prefPath).value) - decrement;
 
     var otherValue = this.getOtherKnobPrefValue_(prefPath);
     if (value > otherValue &&
         ((value - otherValue) < MIN_KNOBS_DISTANCE_MINUTES)) {
       // We are decrementing the minutes offset moving towards the other knob.
-      // We have a minimum 30 minutes overlap threshold. Move this knob to the
+      // We have a minimum 60 minutes overlap threshold. Move this knob to the
       // other side of the other knob.
       //
       // Was:
-      // <<------ + --- 29 MIN --- (+) -------
+      // <<------ + --- 59 MIN --- (+) -------
       //
       // Now:
-      // <<------ (+) --- 30 MIN --- + ------
+      // <<------ (+) --- 60 MIN --- + ------
       //
       // (+) ==> Knob being moved.
       value = otherValue - MIN_KNOBS_DISTANCE_MINUTES;
     }
 
     // The knobs are allowed to wrap around.
     if (value < 0)
       value += TOTAL_MINUTES_PER_DAY;
 
     this.setPrefValue(prefPath, Math.abs(value) % TOTAL_MINUTES_PER_DAY);
@@ skipping 105 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.
   }
 });
 
 })();