Settings: night-light-slider, active/inactive markers and improved focus styling

Also fixing an issue with the position of a knob when tracking.

Bug: 881290
Change-Id: Ib3520d4c89d7a9f5ac4575b47976e4ceb14131f3
Reviewed-on: https://chromium-review.googlesource.com/1228980
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595270}

chrome/browser/resources/settings/device_page/BUILD.gn

@@ -123,7 +123,6 @@ js_library("layout_behavior") {
 js_library("night_light_slider") {
   deps = [
     "../prefs:prefs_behavior",
-    "//third_party/polymer/v1_0/components-chromium/iron-a11y-keys-behavior:iron-a11y-keys-behavior-extracted",
     "//third_party/polymer/v1_0/components-chromium/iron-resizable-behavior:iron-resizable-behavior-extracted",
     "//third_party/polymer/v1_0/components-chromium/paper-behaviors:paper-inky-focus-behavior-extracted",
   ]

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-inky-focus-behavior.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
@@ -105,7 +104,8 @@
         width: 100%;
       }
 
-      .markers {
+      .active-marker,
+      .inactive-marker {
         background-color: rgba(255, 255, 255, 0.54);
         border-radius: 50%;
         display: block;
@@ -117,6 +117,10 @@
         z-index: 2;
       }
 
+      .inactive-marker {
+        background-color: rgba(26, 115, 232, 0.54);
+      }
+
       #legendContainer {
         height: 10px;
         position: relative;
@@ -159,13 +163,11 @@
         <div id="markersContainer">
         </div>
         <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_"
-            on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
-            on-blur="onBlur_">
+            on-up="endDrag_" on-track="continueDrag_">
           <div class="knob-inner" tabindex="-1"></div>
         </div>
         <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
-            on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
-            on-blur="onBlur_">
+            on-up="endDrag_" on-track="continueDrag_">
           <div class="knob-inner" tabindex="-1"></div>
         </div>
       </div>