MD Settings: cr-slider: Make display consistent and clean up.

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() {
@@ skipping 35 matching lines @@
 
     /** @type {!chrome.system.display.DisplayUnitInfo|undefined} */
     selectedDisplay: {type: Object, observer: 'selectedDisplayChanged_'},
 
     /** Id passed to the overscan dialog. */
     overscanDisplayId: {
       type: String,
       notify: true,
     },
 
-    /** Maximum mode index value for slider. */
-    maxModeIndex_: {type: Number, value: 0},
+    /** @private {!Array<number>} Mode index values for slider. */
+    modeValues_: Array,
 
-    /** Selected mode index value for slider. */
-    selectedModeIndex_: {type: Number},
+    /** @private Selected mode index value for slider. */
+    selectedModeIndex_: Number,
+  },
 
-    /** Immediate selected mode index value for slider. */
-    immediateSelectedModeIndex_: {type: Number, value: 0}
-  },
+  /** @private {number} Selected mode index received from chrome. */
+  currentSelectedModeIndex_: -1,
 
   /**
    * Listener for chrome.system.display.onDisplayChanged events.
    * @type {function(void)|undefined}
    * @private
    */
   displayChangedListener_: undefined,
 
   /** @override */
   attached: function() {
     this.displayChangedListener_ = this.getDisplayInfo_.bind(this);
     settings.display.systemDisplayApi.onDisplayChanged.addListener(
         this.displayChangedListener_);
     this.getDisplayInfo_();
   },
 
   /** @override */
   detached: function() {
     if (this.displayChangedListener_) {
       settings.display.systemDisplayApi.onDisplayChanged.removeListener(
           this.displayChangedListener_);
     }
+    this.currentSelectedModeIndex_ = -1;
   },
 
   /**
    * Shows or hides the overscan dialog.
    * @param {boolean} showOverscan
    * @private
    */
   showOverscanDialog_: function(showOverscan) {
     if (showOverscan) {
       this.$.displayOverscan.open();
@@ skipping 46 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 maxModeIndex first so that the slider updates correctly.
-    if (this.selectedDisplay.modes.length == 0) {
-      this.maxModeIndex_ = 0;
+    // Set |modeValues_| before |selectedModeIndex_| so that the slider updates
+    // correctly.
+    let numModes = this.selectedDisplay.modes.length;
+    if (numModes == 0) {
+      this.modeValues_ = [];
       this.selectedModeIndex_ = 0;
+      this.currentSelectedModeIndex_ = 0;
       return;
     }
-    this.maxModeIndex_ = this.selectedDisplay.modes.length - 1;
+    this.modeValues_ = Array.from(Array(numModes).keys());
     this.selectedModeIndex_ = this.getSelectedModeIndex_(this.selectedDisplay);
-    this.immediateSelectedModeIndex_ = this.selectedModeIndex_;
+    this.currentSelectedModeIndex_ = this.selectedModeIndex_;
   },
 
   /**
    * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays
    * @return {boolean}
    * @private
    */
   showDisplayTabMenu_: function(displays) {
     return displays.length > 1;
   },
@@ skipping 69 matching lines @@
    */
   enableSetResolution_: function(selectedDisplay) {
     return selectedDisplay.modes.length > 1;
   },
 
   /**
    * @return {string}
    * @private
    */
   getResolutionText_: function() {
-    if (this.selectedDisplay.modes.length == 0) {
-      var widthStr = this.selectedDisplay.bounds.width.toString();
-      var heightStr = this.selectedDisplay.bounds.height.toString();
+    if (this.selectedDisplay.modes.length == 0 ||
+        this.currentSelectedModeIndex_ == -1) {
+      // If currentSelectedModeIndex_ == -1, selectedDisplay and
+      // selectedModeIndex_ are not in sync.
+      let widthStr = this.selectedDisplay.bounds.width.toString();
+      let heightStr = this.selectedDisplay.bounds.height.toString();
       return this.i18n('displayResolutionText', widthStr, heightStr);
     }
-    // immediateSelectedModeIndex_ is bound to paper-slider.immediate-value
-    // which may not be valid, or may not have updated yet when this is called.
-    if (isNaN(this.immediateSelectedModeIndex_) ||
-        this.immediateSelectedModeIndex_ >= this.selectedDisplay.modes.length) {
-      this.immediateSelectedModeIndex_ =
-          this.getSelectedModeIndex_(this.selectedDisplay);
-    }
-    var mode = this.selectedDisplay.modes[this.immediateSelectedModeIndex_];
-    var best =
+    let mode = this.selectedDisplay.modes[this.selectedModeIndex_];
+    let best =
         this.selectedDisplay.isInternal ? mode.uiScale == 1.0 : mode.isNative;
-    var widthStr = mode.width.toString();
-    var heightStr = mode.height.toString();
+    let widthStr = mode.width.toString();
+    let 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 (let display of this.displays) {
       if (id != display.id)
         continue;
+      this.currentSelectedModeIndex_ = -1;
       this.selectedDisplay = display;
     }
   },
 
   /**
    * Handles event when a display tab is selected.
    * @param {!{detail: !{item: !{displayId: string}}}} e
    * @private
    */
   onSelectDisplayTab_: function(e) {
@@ skipping 16 matching lines @@
 
     /** @type {!chrome.system.display.DisplayProperties} */ var properties = {
       isPrimary: true
     };
     settings.display.systemDisplayApi.setDisplayProperties(
         this.selectedDisplay.id, properties,
         this.setPropertiesCallback_.bind(this));
   },
 
   /**
-   * @param {!{target: !PaperSliderElement}} e
+   * 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
    */
-  onChangeMode_: function(e) {
-    var curIndex = this.selectedModeIndex_;
-    var newIndex = parseInt(e.target.value, 10);
-    if (newIndex == curIndex)
+  onSelectedModeChange_: function() {
+    if (this.currentSelectedModeIndex_ == -1 ||
+        this.currentSelectedModeIndex_ == this.selectedModeIndex_) {
+      // Don't change the selected display mode until we have received an update
+      // from Chrome and the mode differs from the current mode.
       return;
-    assert(newIndex >= 0);
-    assert(newIndex < this.selectedDisplay.modes.length);
+    }
     /** @type {!chrome.system.display.DisplayProperties} */ var properties = {
-      displayMode: this.selectedDisplay.modes[newIndex]
+      displayMode: this.selectedDisplay.modes[this.selectedModeIndex_]
     };
     settings.display.systemDisplayApi.setDisplayProperties(
         this.selectedDisplay.id, properties,
         this.setPropertiesCallback_.bind(this));
   },
 
   /**
    * @param {!Event} event
    * @private
    */
@@ skipping 49 matching lines @@
       displayIds += display.id;
       if (display.isPrimary && !primaryDisplay)
         primaryDisplay = display;
       if (this.selectedDisplay && display.id == this.selectedDisplay.id)
         selectedDisplay = display;
     }
     this.displayIds = displayIds;
     this.primaryDisplayId = (primaryDisplay && primaryDisplay.id) || '';
     this.selectedDisplay = selectedDisplay || primaryDisplay ||
         (this.displays && this.displays[0]);
+    // Save the selected mode index received from Chrome so that we do not
+    // send an unnecessary setDisplayProperties call (which would log an error).
+    this.currentSelectedModeIndex_ =
+        this.getSelectedModeIndex_(this.selectedDisplay);
+
     this.$.displayLayout.updateDisplays(this.displays, this.layouts);
   },
 
   /** @private */
   setPropertiesCallback_: function() {
     if (chrome.runtime.lastError) {
       console.error(
           'setDisplayProperties Error: ' + chrome.runtime.lastError.message);
     }
   },
 });