[MD settings] show icon when slider controlled by something

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

 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 
 <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;
         flex-direction: column;
         margin: 8px 0;
         min-width: 200px;
       }
 
       #labels {
         display: flex;
@@ skipping 16 matching lines @@
 
       paper-slider {
         /* Make the slider bar always grey. */
         --paper-slider-active-color: var(--paper-grey-400);
         /* Make the knob always blue. */
         --paper-slider-knob-start-color: var(--google-blue-700);
         --paper-slider-knob-start-border-color: var(--google-blue-700);
         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>
     </div>
   </template>
   <script src="chrome://resources/cr_elements/cr_slider/cr_slider.js"></script>
 </dom-module>