[MD Settings][Night Light] CL8: Add the ripple focus effect to the slider knobs

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 OFFSET_MINUTES_6PM = 18 * 60;
 /** @const */ var TOTAL_MINUTES_PER_DAY = 24 * 60;
 
 Polymer({
   is: 'night-light-slider',
 
   behaviors: [
-    I18nBehavior,
     PrefsBehavior,
     Polymer.IronA11yKeysBehavior,
+    Polymer.PaperInkyFocusBehavior,
   ],
 
   properties: {
     /**
-     * The object currently being dragged. Either the start or end knobs.
-     * @type {?Object}
-     * @private
-     */
-    dragObject_: {
-      type: Object,
-      value: null,
-    },
-
-    /**
      * The start knob time as a string to be shown on the start label bubble.
      * @private
      */
-    startTime_: {
-      type: String,
-    },
+    startTime_: String,
 
     /**
      * The end knob time as a string to be shown on the end label bubble.
      * @private
      */
-    endTime_: {
-      type: String,
-    },
+    endTime_: String,
   },
 
   observers: [
     'customTimesChanged_(prefs.ash.night_light.custom_start_time.*, ' +
         'prefs.ash.night_light.custom_end_time.*)',
   ],
 
   keyBindings: {
     'left': 'onLeftKey_',
     'right': 'onRightKey_',
   },
 
+  /**
+   * The object currently being dragged. Either the start or end knobs.
+   * @type {?Object}
+   * @private
+   */
+  dragObject_: null,
+
+  /** @override */
   ready: function() {
     // Build the legend markers.
     var markersContainer = this.$.markersContainer;
     var width = markersContainer.offsetWidth;
     for (var i = 0; i <= HOURS_PER_DAY; ++i) {
       var marker = document.createElement('div');
       marker.className = 'markers';
       markersContainer.appendChild(marker);
       marker.style.left = (i * 100 / HOURS_PER_DAY) + '%';
     }
+
     this.async(function() {
       // Read the initial prefs values and refresh the slider.
       this.customTimesChanged_();
     });
   },
 
   /**
    * 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.
@@ skipping 20 matching lines @@
     if (activeElement == this.$.startKnob || activeElement == this.$.endKnob)
       activeElement.blur();
   },
 
   /**
    * Start dragging the target knob.
    * @private
    */
   startDrag_: function(event) {
     event.preventDefault();
-    this.dragObject_ = event.target;
+
+    // Only handle start or end knobs. Use the "knob-inner" divs just to display
+    // the knobs.
+    if (event.target == this.$.startKnob ||
+        event.target == this.$.startKnob.firstElementChild) {
+      this.dragObject_ = this.$.startKnob;
+    } else if (event.target == this.$.endKnob ||
+               event.target == this.$.endKnob.firstElementChild) {
+      this.dragObject_ = this.$.endKnob;
+    } else {
+      return;
+    }
+
     this.setExpanded_(true);
 
     // Focus is only given to the knobs by means of keyboard tab navigations.
     // When we start dragging, we don't want to see any focus halos around any
     // knob.
     this.blurAnyFocusedKnob_();
 
     // However, our night-light-slider element must get the focus.
     this.focus();
   },
@@ skipping 317 matching lines @@
    * @private
    */
   onRightKey_: function(e) {
     e.preventDefault();
     var knobPref = this.getFocusedKnobPrefPathIfAny_();
     if (!knobPref)
       return;
 
     this.incrementPref_(knobPref, 1);
   },
-});
+
+  /**
+   * Whether either of the two knobs is focused.
+   *
+   * @return {boolean} true if either of the two knobs is focused.

[dpapad, 2017/06/20 21:11:56]

Can we make this comment less verbose?

/**
 * @return {boolean} Whether either of the two knobs is focused.
 * @private
 */

[afakhry, 2017/06/20 21:38:07]

Done.

+   * @private
+   */
+  isEitherKnobFocused_: function() {
+    var activeElement = this.shadowRoot.activeElement;
+    return activeElement == this.$.startKnob || activeElement == this.$.endKnob;
+  },
+
+  /**
+   * Overrides _createRipple() from PaperInkyFocusBehavior to create the ripple
+   * only on a knob if it's focused, or on a dummy hidden element so that it
+   * doesn't show.
+   * @private
+   */
+  _createRipple: function() {
+    if (this.isEitherKnobFocused_()) {
+      this._rippleContainer = this.shadowRoot.activeElement;
+    } else {
+      // We can't just skip the ripple creation and return early with null here.
+      // The code inherited from PaperInkyFocusBehavior expects that this
+      // function returns a ripple element. So to avoid crashes, we'll setup the
+      // ripple to be created under a hidden element.
+      this._rippleContainer = this.$.dummyRippleContainer;
+    }
+
+    return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
+  },
+
+  /**
+   * Handles focus events on the start and end knobs.
+   * @private
+   */
+  onFocus_: function() {
+    this.ensureRipple();
+
+    if (this.hasRipple()) {
+      this._ripple.style.display = '';
+      this._ripple.holdDown = true;
+    }
+  },
+
+  /**
+   * Handles blur events on the start and end knobs.
+   * @private
+   */
+  onBlur_: function() {
+    if (this.hasRipple()) {
+      this._ripple.remove();
+      this._ripple = null;
+    }
+  },
+
+  /** @private */
+  _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.
+  }
+});
+
+})();