WebUI: cr-slider, fixing enabled/disabled knob and bar styles

Bug: 875729
Change-Id: I3a80290e059cd9b21f660572700427d92ef9f84b
Reviewed-on: https://chromium-review.googlesource.com/1181929Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585260}

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

@@ -143,14 +143,12 @@
 
       .slider-knob-inner {
         background-color: var(--google-blue-600);
-        border: 2px solid var(--google-blue-600);
+        border: 0;
         border-radius: 50%;
-        box-sizing: border-box;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+        box-sizing: content-box;
         height: 10px;
         margin: 11px;
-        transition-duration: 180ms;
-        transition-property: transform, background-color, border;
-        transition-timing-function: ease;
         width: 10px;
       }
 
@@ -193,6 +191,8 @@
       .slider-knob-inner[disabled] {
         background-color: var(--google-grey-600);
         border: 2px solid white;
+        box-shadow: unset;
+        margin: 9px;
       }
     </style>
     <div id="sliderContainer" class$="[[getClassNames_(disabled, dragging)]]">

ui/webui/resources/cr_elements/cr_slider/cr_slider.js

@@ -4,7 +4,7 @@
 
 /**
  * @fileoverview 'cr-slider' is a wrapper around paper-slider to alter the
- * styling. The bahavior of the slider remains the same.
+ * styling. The behavior of the slider remains the same.
  */
 Polymer({
   is: 'cr-slider',
@@ -111,14 +111,22 @@ Polymer({
    */
   onDisabledChanged_: function() {
     const knob = this.$.slider.$$('.slider-knob-inner');
+    knob.style.boxSizing = 'content-box';
+    knob.style.height = '10px';
+    knob.style.transform = 'unset';
+    knob.style.transition = 'unset';
+    knob.style.width = '10px';
+    this.$.slider.$$('.bar-container').style.left = '0';
     if (this.disabled) {
-      knob.style.transform = 'scale(1.2)';
+      knob.style.backgroundColor = 'var(--google-grey-600)';
       knob.style.border = '2px solid white';
+      knob.style.boxShadow = 'unset';
+      knob.style.margin = '9px';
     } else {
+      knob.style.backgroundColor = 'var(--google-blue-600)';
+      knob.style.border = '0';
+      knob.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.4)';
       knob.style.margin = '11px';
-      knob.style.height = '10px';
-      knob.style.width = '10px';
-      knob.style.transform = 'unset';
     }
   },