[Night Light][MD-settings]: Night Light slider should respect 24-hour setting

Make the Night Light slider respect the 24-hour time format setting and
format times shown in knobs label bubbles and legends accordingly.

screenshot: https://screenshot.googleplex.com/09rZyfHxdzx.png

BUG=749288
TEST=manually, closure compiler.

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ibb99b0b32029f7c047700ad82258583017439a16
Reviewed-on: https://chromium-review.googlesource.com/590177
Commit-Queue: Ahmed Fakhry <afakhry@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#490609}

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

@@ -172,19 +172,19 @@
       </div>
       <div id="legendContainer">
         <div style="[[getLegendStyle_(0, isRTL_)]]">
-          [[getLocaleTimeString_(18, 0)]]
+          [[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
         </div>
         <div style="[[getLegendStyle_(25, isRTL_)]]">
-          [[getLocaleTimeString_(0, 0)]]
+          [[getLocaleTimeString_(0, 0, shouldUse24Hours_)]]
         </div>
         <div style="[[getLegendStyle_(50, isRTL_)]]">
-          [[getLocaleTimeString_(6, 0)]]
+          [[getLocaleTimeString_(6, 0, shouldUse24Hours_)]]
         </div>
         <div style="[[getLegendStyle_(75, isRTL_)]]">
-          [[getLocaleTimeString_(12, 0)]]
+          [[getLocaleTimeString_(12, 0, shouldUse24Hours_)]]
         </div>
         <div style="[[getLegendStyle_(100, isRTL_)]]">
-          [[getLocaleTimeString_(18, 0)]]
+          [[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
         </div>
       </div>
       <div id="dummyRippleContainer" hidden></div>

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

@@ -43,11 +43,19 @@ Polymer({
      * @private
      */
     isRTL_: Boolean,
+
+    /**
+     * Whether to use the 24-hour format for the time shown in the label
+     * bubbles.
+     * @private
+     */
+    shouldUse24Hours_: Boolean,
   },
 
   observers: [
     'customTimesChanged_(prefs.ash.night_light.custom_start_time.*, ' +
         'prefs.ash.night_light.custom_end_time.*)',
+    'hourFormatChanged_(prefs.settings.clock.use_24hour_clock.*)',
   ],
 
   keyBindings: {
@@ -80,11 +88,25 @@ Polymer({
     }
 
     this.async(function() {
-      // Read the initial prefs values and refresh the slider.
-      this.customTimesChanged_();
+      // Refresh the hour format as well as read the initial pref values and
+      // refresh the slider.
+      this.hourFormatChanged_();
     });
   },
 
+  /**
+   * Called when the value of the pref associated with whether to use the
+   * 24-hour clock format is changed. This will also refresh the slider.
+   * @private
+   */
+  hourFormatChanged_: function() {
+    this.shouldUse24Hours_ = /** @type {boolean} */ (
+        this.getPref('settings.clock.use_24hour_clock').value);
+
+    // Refresh the slider.
+    this.customTimesChanged_();
+  },
+
   /**
    * 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).
@@ -229,17 +251,19 @@ Polymer({
    * sensitive time string representation.
    * @param {number} hour The hour of the day (0 - 23).
    * @param {number} minutes The minutes of the hour (0 - 59).
+   * @param {boolean} shouldUse24Hours Whether to use the 24-hour time format.
    * @return {string}
    * @private
    */
-  getLocaleTimeString_: function(hour, minutes) {
+  getLocaleTimeString_: function(hour, minutes, shouldUse24Hours) {
     var d = new Date();
     d.setHours(hour);
     d.setMinutes(minutes);
     d.setSeconds(0);
     d.setMilliseconds(0);
 
-    return d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+    return d.toLocaleTimeString(
+        [], {hour: '2-digit', minute: '2-digit', hour12: !shouldUse24Hours});
   },
 
   /**
@@ -254,7 +278,7 @@ Polymer({
     var hour = Math.floor(offsetMinutes / 60);
     var minute = Math.floor(offsetMinutes % 60);
 
-    return this.getLocaleTimeString_(hour, minute);
+    return this.getLocaleTimeString_(hour, minute, this.shouldUse24Hours_);
   },
 
   /**

chrome/test/data/webui/settings/device_page_tests.js

@@ -238,6 +238,15 @@ cr.define('device_page_tests', function() {
         },
       },
       settings: {
+        // TODO(afakhry): Write tests to validate the Night Light slider
+        // behavior with 24-hour setting.
+        clock: {
+          use_24hour_clock: {
+            key: 'settings.clock.use_24hour_clock',
+            type: chrome.settingsPrivate.PrefType.BOOLEAN,
+            value: false,
+          },
+        },
         touchpad: {
           enable_tap_to_click: {
             key: 'settings.touchpad.enable_tap_to_click',