[MD settings] show icon when slider controlled by something

chrome/browser/resources/settings/device_page/display.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * 'settings-display' is the settings subpage for display settings.
  */
 
 cr.define('settings.display', function() {
   var systemDisplayApi = /** @type {!SystemDisplay} */ (chrome.system.display);
 
   return {
     systemDisplayApi: systemDisplayApi,
   };
 });
 
 Polymer({
   is: 'settings-display',
 
   behaviors: [
     I18nBehavior,
   ],
 
   properties: {
+    pref: {

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

Given that there are many things being set here, can we call this
selectedModePref_ ? Also, we should type it properly. Is there any reason for it
not to be private?

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

Done.

+      type: Object,
+      value: function() {
+        return {
+          key: 'fakeDisplaySliderPref',
+          type: chrome.settingsPrivate.PrefType.NUMBER,
+          value: 0,
+        };
+      },
+    },
+
     /**
      * Array of displays.
      * @type {!Array<!chrome.system.display.DisplayUnitInfo>}
      */
     displays: Array,
 
     /**
      * Array of display layouts.
      * @type {!Array<!chrome.system.display.DisplayLayout>}
      */
@@ skipping 12 matching lines @@
     selectedDisplay: {type: Object, observer: 'selectedDisplayChanged_'},
 
     /** Id passed to the overscan dialog. */
     overscanDisplayId: {
       type: String,
       notify: true,
     },
 
     /** @private {!Array<number>} Mode index values for slider. */
     modeValues_: Array,
-
-    /** @private Selected mode index value for slider. */
-    selectedModeIndex_: Number,
   },
 
   /** @private {number} Selected mode index received from chrome. */
   currentSelectedModeIndex_: -1,
 
   /**
    * Listener for chrome.system.display.onDisplayChanged events.
    * @type {function(void)|undefined}
    * @private
    */
@@ skipping 73 matching lines @@
   getSelectedModeIndex_: function(selectedDisplay) {
     for (var i = 0; i < selectedDisplay.modes.length; ++i) {
       if (selectedDisplay.modes[i].isSelected)
         return i;
     }
     return 0;
   },
 
   /** @private */
   selectedDisplayChanged_: function() {
-    // Set |modeValues_| before |selectedModeIndex_| so that the slider updates
+    // Set |modeValues_| before |pref.value| so that the slider updates
     // correctly.
     var numModes = this.selectedDisplay.modes.length;
     if (numModes == 0) {
       this.modeValues_ = [];
-      this.selectedModeIndex_ = 0;
+      this.set('pref.value', 0);
       this.currentSelectedModeIndex_ = 0;
       return;
     }
     this.modeValues_ = Array.from(Array(numModes).keys());
-    this.selectedModeIndex_ = this.getSelectedModeIndex_(this.selectedDisplay);
-    this.currentSelectedModeIndex_ = this.selectedModeIndex_;
+    this.set('pref.value', this.getSelectedModeIndex_(this.selectedDisplay));
+    this.currentSelectedModeIndex_ = this.pref.value;
   },
 
   /**
    * Returns true if the given display has touch support and is not an internal
    * display. If the feature is not enabled via the switch, this will return
    * false.
    * @param {!chrome.system.display.DisplayUnitInfo} display Display being
    *     checked for touch support.
    * @return {boolean}
    * @private
@@ skipping 21 matching lines @@
    */
   showDisplaySelectMenu_: function(displays, selectedDisplay) {
     return displays.length > 1 && !selectedDisplay.isPrimary;
   },
 
   /**
    * Returns the select menu index indicating whether the display currently is
    * primary or extended.
    * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay
    * @param {string} primaryDisplayId
-   * @return {number} Retruns 0 if the display is primary else returns 1.
+   * @return {number} Returns 0 if the display is primary else returns 1.
    * @private
    */
   getDisplaySelectMenuIndex_: function(selectedDisplay, primaryDisplayId) {
     if (selectedDisplay && selectedDisplay.id == primaryDisplayId)
       return 0;
     return 1;
   },
 
   /**
    * Returns the i18n string for the text to be used for mirroring settings.
@@ skipping 44 matching lines @@
   },
 
   /**
    * @return {string}
    * @private
    */
   getResolutionText_: function() {
     if (this.selectedDisplay.modes.length == 0 ||
         this.currentSelectedModeIndex_ == -1) {
       // If currentSelectedModeIndex_ == -1, selectedDisplay and
-      // selectedModeIndex_ are not in sync.
+      // |pref.value| are not in sync.
       return this.i18n(
           'displayResolutionText', this.selectedDisplay.bounds.width.toString(),
           this.selectedDisplay.bounds.height.toString());
     }
-    var mode = this.selectedDisplay.modes[this.selectedModeIndex_];
+    var mode = this.selectedDisplay.modes[this.pref.value];
     var best =
         this.selectedDisplay.isInternal ? mode.uiScale == 1.0 : mode.isNative;
     var widthStr = mode.width.toString();
     var heightStr = mode.height.toString();
     if (best)
       return this.i18n('displayResolutionTextBest', widthStr, heightStr);
     else if (mode.isNative)
       return this.i18n('displayResolutionTextNative', widthStr, heightStr);
     return this.i18n('displayResolutionText', widthStr, heightStr);
   },
 
   /**
    * @param {!{detail: string}} e |e.detail| is the id of the selected display.
    * @private
    */
   onSelectDisplay_: function(e) {
     var id = e.detail;
     for (var i = 0; i < this.displays.length; ++i) {
       var display = this.displays[i];
       if (id != display.id)
         continue;
       if (this.selectedDisplay != display) {
         // Set currentSelectedModeIndex_ to -1 so that getResolutionText_ does
-        // not flicker. selectedDisplayChanged will update selectedModeIndex_
+        // not flicker. selectedDisplayChanged will update |pref.value|
         // and currentSelectedModeIndex_ correctly.
         this.currentSelectedModeIndex_ = -1;
         this.selectedDisplay = display;
       }
     }
   },
 
   /**
    * Handles event when a display tab is selected.
    * @param {!{detail: !{item: !{displayId: string}}}} e
@@ skipping 36 matching lines @@
   },
 
   /**
    * Triggered when the 'change' event for the selected mode slider is
    * triggered. This only occurs when the value is comitted (i.e. not while
    * the slider is being dragged).
    * @private
    */
   onSelectedModeChange_: function() {
     if (this.currentSelectedModeIndex_ == -1 ||
-        this.currentSelectedModeIndex_ == this.selectedModeIndex_) {
+        this.currentSelectedModeIndex_ == this.pref.value) {
       // Don't change the selected display mode until we have received an update
       // from Chrome and the mode differs from the current mode.
       return;
     }
     /** @type {!chrome.system.display.DisplayProperties} */ var properties = {
-      displayMode: this.selectedDisplay.modes[this.selectedModeIndex_]
+      displayMode: this.selectedDisplay.modes[this.pref.value]
     };
     settings.display.systemDisplayApi.setDisplayProperties(
         this.selectedDisplay.id, properties,
         this.setPropertiesCallback_.bind(this));
   },
 
   /**
    * @param {!Event} event
    * @private
    */
@@ skipping 67 matching lines @@
   },
 
   /** @private */
   setPropertiesCallback_: function() {
     if (chrome.runtime.lastError) {
       console.error(
           'setDisplayProperties Error: ' + chrome.runtime.lastError.message);
     }
   },
 });