[Night Light] CL9: Add localization for time's AM and PM

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

Index: chrome/browser/resources/settings/device_page/night_light_slider.html
diff --git a/chrome/browser/resources/settings/device_page/night_light_slider.html b/chrome/browser/resources/settings/device_page/night_light_slider.html
index 317a1c35b700719999cdbdacb2c88146a35976f8..2f48ad4e5b08012f01506d0f12f97a3cd1018d19 100644
--- a/chrome/browser/resources/settings/device_page/night_light_slider.html
+++ b/chrome/browser/resources/settings/device_page/night_light_slider.html
@@ -117,11 +117,11 @@
         color: rgb(100, 100, 100);
         font-family: Roboto-Regular;
         font-size: 12px;
-        margin-left: -2em;
+        margin-left: -2.5em;
         position: absolute;
         text-align: center;
         top: 5px;
-        width: 4em;
+        width: 5em;
       }
     </style>
 
@@ -149,12 +149,16 @@
             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>
+        <!-- 6:00 PM == 18 * 60 = 1080 minutes from 00:00. -->

[stevenjb, 2017/06/20 18:16:06]

nit: We could avoid these comments with a well named helper function, but this
is fine too.

[afakhry, 2017/06/20 18:31:23]

Sounds good. I added a documented helper function.

+        <div style="left: 0%;">[[offsetMinutesToTimeString_(1080)]]</div>
+        <!-- 12:00 AM == 0 minutes from 00:00. -->
+        <div style="left: 25%;">[[offsetMinutesToTimeString_(0)]]</div>
+        <!-- 6:00 AM == 6 * 60 = 360 minutes from 00:00. -->
+        <div style="left: 50%;">[[offsetMinutesToTimeString_(360)]]</div>
+        <!-- 12:00 PM == 12 * 60 = 720 minutes from 00:00. -->
+        <div style="left: 75%;">[[offsetMinutesToTimeString_(720)]]</div>
+        <!-- 6:00 PM == 18 * 60 = 1080 minutes from 00:00. -->
+        <div style="left: 100%;">[[offsetMinutesToTimeString_(1080)]]</div>
       </div>
     </div>