[MD settings] show icon when slider controlled by something

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

Index: ui/webui/resources/cr_elements/cr_slider/cr_slider.html
diff --git a/ui/webui/resources/cr_elements/cr_slider/cr_slider.html b/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
index 890950bff35192b0b2f2dbaf7f8aa15024199950..cca2724927ee2237ac9dd406b43cdcbbde9ab6c7 100644
--- a/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
+++ b/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
@@ -5,6 +5,20 @@
 <dom-module id="cr-slider">
   <template>
     <style>
+      :host {
+        display: inline-flex;
+      }
+
+      cr-policy-pref-indicator,
+      paper-slider {
+        -webkit-margin-start: var(--checkbox-spacing);

[dschuyler, 2017/03/07 23:01:11]

Imo, checkbox-spacing needs to be renamed. I'm planning to do that separate from
this CL.

[stevenjb, 2017/03/07 23:11:48]

I'm fine either way, but sgtm.

+        align-self: center;
+      }
+
+      #labels[disabled] {
+        color: var(--paper-grey-400);
+      }
+
       div.outer {
         align-items: stretch;
         display: flex;
@@ -41,12 +55,16 @@
         width: 100%;
       }
     </style>
+    <template is="dom-if" if="[[pref.controlledBy]]" restamp>
+      <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
+    </template>
     <div class="outer">
-      <paper-slider id="slider" disabled="[[disabled]]" snaps
+      <paper-slider id="slider"
+          disabled$="[[shouldDisableSlider_(pref.*)]]" snaps
           on-immediate-value-changed="onSliderChanged_" max="[[max]]"
           min="[[min]]">
       </paper-slider>
-      <div id="labels">
+      <div id="labels" disabled$="[[shouldDisableSlider_(pref.*)]]">

[dschuyler, 2017/03/07 23:01:11]

I'm a bit reluctant to call shouldDisableSlider_ in two places (line 67 and line
63), but the other options I considered seemed worse. If there's a clearly
better way to handle this please let me know.

[stevenjb, 2017/03/07 23:11:48]

You can use a computed property, e.g. 'disableSlider_: { type: Boolean,
computed: shouldDisableSlider_(pref.*) }
Maybe rename the method computeDisableSlider_.

[dschuyler, 2017/03/08 21:50:11]

Done.

         <div id="label-begin">[[labelMin]]</div>
         <div id="label-end">[[labelMax]]</div>
       </div>