[Night Light] CL5: Schedule Settings

Adds the Night Light automatic schedule settings.

Demo: https://bugs.chromium.org/p/chromium/issues/detail?id=705816#c15

BUG=705816
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2915753003
Cr-Commit-Position: refs/heads/master@{#478767}

chrome/app/settings_strings.grdp

@@ -2989,6 +2989,12 @@
     <message name="IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_SCHEDULE_SUNSET_TO_SUNRISE" desc="In Device Settings > Displays, the label of the option to set the automatic schedule of the Night Light feature to turn on at sunset and off at sunrise.">
       Sunset to Sunrise
     </message>
+    <message name="IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_START_TIME" desc="In Device Settings > Displays, the label of the start time bubble.">
+      Start time
+    </message>
+    <message name="IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_STOP_TIME" desc="In Device Settings > Displays, the label of the end time bubble.">
+      End time
+    </message>
     <message name="IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_TEXT" desc="In Device Settings > Displays, text describing the Night Light feature.">
       Makes it easier to look at your screen or read in dim light
     </message>

chrome/browser/extensions/api/settings_private/prefs_util.cc

@@ -304,6 +304,12 @@ const PrefsUtil::TypedPrefMap& PrefsUtil::GetWhitelistedKeys() {
       settings_private::PrefType::PREF_TYPE_BOOLEAN;
   (*s_whitelist)[ash::prefs::kNightLightTemperature] =
       settings_private::PrefType::PREF_TYPE_NUMBER;
+  (*s_whitelist)[ash::prefs::kNightLightScheduleType] =
+      settings_private::PrefType::PREF_TYPE_NUMBER;
+  (*s_whitelist)[ash::prefs::kNightLightCustomStartTime] =
+      settings_private::PrefType::PREF_TYPE_NUMBER;
+  (*s_whitelist)[ash::prefs::kNightLightCustomEndTime] =
+      settings_private::PrefType::PREF_TYPE_NUMBER;
 
   // Input method settings.
   (*s_whitelist)[::prefs::kLanguagePreloadEngines] =

chrome/browser/resources/settings/device_page/compiled_resources2.gyp

@@ -104,6 +104,15 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'night_light_slider',
+      'dependencies': [
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior/compiled_resources2.gyp:iron-a11y-keys-behavior-extracted',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '../prefs/compiled_resources2.gyp:prefs_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'power',
       'dependencies': [

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

@@ -11,6 +11,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="display_layout.html">
 <link rel="import" href="display_overscan_dialog.html">
+<link rel="import" href="night_light_slider.html">
+<link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../controls/settings_slider.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -55,6 +57,10 @@
      #controlsDiv > .settings-box:first-of-type {
        border-top: none;
      }
+
+     #nightLightSlider {
+       margin-top: 20px;
+     }
     </style>
     <div class="settings-box first layout vertical self-stretch">
       <h2 class="layout self-start">
@@ -228,6 +234,29 @@
               pref="{{prefs.ash.night_light.color_temperature}}">
           </settings-slider>
         </div>
+        <!-- Schedule settings -->
+        <div class="settings-box embedded">
+          <div id="nightLightScheduleLabel" class="start textarea">
+            $i18n{displayNightLightScheduleLabel}
+          </div>
+          <settings-dropdown-menu
+              id="nightLightScheduleTypeDropDown"
+              aria-labelledby="nightLightScheduleLabel"
+              pref="{{prefs.ash.night_light.schedule_type}}"
+              menu-options="[[scheduleTypesList_]]">
+          </settings-dropdown-menu>
+        </div>
+        <!-- Custom schedule slider -->
+        <div class="settings-box embedded continuation">
+          <iron-collapse id="nightLightCustomScheduleCollapse"
+              class="start textarea layout vertical"
+              opened="[[shouldOpenCustomScheduleCollapse_]]">
+            <div class="settings-box embedded continuation">
+              <night-light-slider id="nightLightSlider" prefs="{{prefs}}">
+              </night-light-slider>
+            </div>
+          </iron-collapse>
+        </div>
       </div>
     </template>
 

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

@@ -7,6 +7,17 @@
  * 'settings-display' is the settings subpage for display settings.
  */
 
+/**
+ * The types of Night Light automatic schedule. The values of the enum values
+ * are synced with the pref "prefs.ash.night_light.schedule_type".
+ * @enum {number}
+ */
+var NightLightScheduleType = {
+  NEVER: 0,
+  SUNSET_TO_SUNRISE: 1,
+  CUSTOM: 2,
+};
+
 cr.define('settings.display', function() {
   var systemDisplayApi = /** @type {!SystemDisplay} */ (chrome.system.display);
 
@@ -93,8 +104,33 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /** @private */
+    scheduleTypesList_: {
+      type: Array,
+      value: function() {
+        return [{
+          name: loadTimeData.getString('displayNightLightScheduleNever'),
+          value: NightLightScheduleType.NEVER }, {
+          name: loadTimeData.getString(
+              'displayNightLightScheduleSunsetToSunRise'),
+          value: NightLightScheduleType.SUNSET_TO_SUNRISE }, {
+          name: loadTimeData.getString('displayNightLightScheduleCustom'),
+          value: NightLightScheduleType.CUSTOM }];
+      },
+    },
+
+    /** @private */
+    shouldOpenCustomScheduleCollapse_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
+  observers: [
+    'onScheduleTypeChanged_(prefs.ash.night_light.schedule_type.*)',
+  ],
+
   /** @private {number} Selected mode index received from chrome. */
   currentSelectedModeIndex_: -1,
 
@@ -532,4 +568,11 @@ Polymer({
           'setDisplayProperties Error: ' + chrome.runtime.lastError.message);
     }
   },
+
+  /** @private */
+  onScheduleTypeChanged_: function() {
+    this.shouldOpenCustomScheduleCollapse_ =
+        this.getPref('ash.night_light.schedule_type').value ==
+            NightLightScheduleType.CUSTOM;
+  },
 });

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

+<html><head>
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../prefs/prefs_behavior.html">
+</head><body><dom-module id="night-light-slider">
+  <template>
+    <style>
+      :host {
+        cursor: default;
+        text-align: center;
+        user-select: none;
+      }
+
+      #sliderContainer {
+        display: inline-block;
+        position: relative;
+        user-select: none;
+        width: 570px;
+      }
+
+      #sliderBar {
+        background-color: #ccc;
+        background-size: 100%;
+        display: inline-block;
+        height: 2px;
+        position: relative;
+        width: inherit;
+      }
+
+      .knob {
+        background: rgb(51, 103, 214);
+        border-radius: 6px;
+        height: 12px;
+        left: 0;
+        margin-left: -6px;
+        margin-top: -5px;
+        position: absolute;
+        width: 12px;
+        z-index: 3;
+      }
+
+      .knob:focus {
+        box-shadow: 0 0 5pt 5pt rgb(204, 217, 245);
+        outline: none;
+      }
+
+      .expanded-knob {
+        transform: scale(1.5);
+        z-index: 3;
+      }
+
+      #progressContainer {
+        height: 100%;
+        overflow: hidden;
+        position: absolute;
+        width: 100%;
+      }
+
+      .progress {
+        background: rgb(51, 103, 214);
+        height: 100%;
+        position: absolute;
+        z-index: 1;
+      }
+
+      #labelContainer {
+        height: 2em;
+      }
+
+      .label {
+        background: rgb(51, 103, 214);
+        border-radius: 14px;
+        color: white;
+        font-family: Roboto-Bold;
+        font-size: 12px;
+        left: 0;
+        line-height: 1.5em;
+        margin-left: -2.5em;
+        position: absolute;
+        text-align: center;
+        vertical-align: middle;
+        width: 5em;
+      }
+
+      .end-label-overlap {
+        margin-top: -2em;
+      }
+
+      #markersContainer {
+        display: flex;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+
+      .markers {
+        background-color: black;
+        border-radius: 50%;
+        display: block;
+        height: 100%;
+        margin-left: -1px;
+        padding: 0;
+        position: absolute;
+        width: 2PX;
+        z-index: 2;
+      }
+
+      #legendContainer {
+        height: 10px;
+        position: relative;
+        width: inherit;
+      }
+
+      #legendContainer > div {
+        color: rgb(100, 100, 100);
+        font-family: Roboto-Regular;
+        font-size: 12px;
+        margin-left: -2em;
+        position: absolute;
+        text-align: center;
+        top: 5px;
+        width: 4em;
+      }
+    </style>
+
+    <div id="sliderContainer">
+      <div id="labelContainer">
+        <div id="startLabel" class="label"
+            aria-label="$i18n{displayNightLightStartTime}">
+          [[startTime_]]
+        </div>
+        <div id="endLabel" class="label"
+            aria-label="$i18n{displayNightLightStopTime}">
+          [[endTime_]]
+        </div>
+      </div>
+      <div id="sliderBar">
+        <div id="progressContainer">
+          <div id="endProgress" class="progress"></div>
+          <div id="startProgress" class="progress"></div>
+        </div>
+        <div id="markersContainer">
+        </div>
+        <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_"
+            on-up="endDrag_" on-track="continueDrag_"></div>
+        <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
+            on-up="endDrag_" on-track="continueDrag_"></div>
+      </div>
+      <div id="legendContainer">
+        <!-- TODO(afakhry): Check if these values need to be localized. -->
+        <div style="left: 0%;">6 PM</div>
+        <div style="left: 25%;">12 AM</div>
+        <div style="left: 50%;">6 AM</div>
+        <div style="left: 75%;">12 PM</div>
+        <div style="left: 100%;">6 PM</div>
+      </div>
+    </div>
+
+  </template>
+</dom-module>
+<script src="night_light_slider.js"></script></body></html>
\ No newline at end of file

chrome/browser/resources/settings/settings_resources.grd

@@ -561,6 +561,13 @@
         <structure name="IDR_SETTINGS_DEVICE_LAYOUT_BEHAVIOR_JS"
                    file="device_page/layout_behavior.js"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_DEVICE_NIGHT_LIGHT_SLIDER_HTML"
+                   file="device_page/night_light_slider.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_DEVICE_NIGHT_LIGHT_SLIDER_JS"
+                   file="device_page/night_light_slider.js"
+                   type="chrome_html" />
+
       </if>
       <structure name="IDR_SETTINGS_DIRECTION_DELEGATE_HTML"
                  file="direction_delegate.html"

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -662,6 +662,9 @@ void AddDeviceStrings(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_SCHEDULE_NEVER},
       {"displayNightLightScheduleSunsetToSunRise",
        IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_SCHEDULE_SUNSET_TO_SUNRISE},
+      {"displayNightLightStartTime",
+       IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_START_TIME},
+      {"displayNightLightStopTime", IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_STOP_TIME},
       {"displayNightLightText", IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_TEXT},
       {"displayNightLightTemperatureLabel",
        IDS_SETTINGS_DISPLAY_NIGHT_LIGHT_TEMPERATURE_LABEL},

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

@@ -83,6 +83,15 @@ cr.define('device_page_tests', function() {
 
   function getFakePrefs() {
     return {
+      ash: {
+        night_light: {
+          schedule_type: {
+            key: 'ash.night_light.schedule_type',
+            type: chrome.settingsPrivate.PrefType.NUMBER,
+            value: 0,
+          },
+        },
+      },
       settings: {
         touchpad: {
           enable_tap_to_click: {