MD Settings: Display: Fix update order

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 42 matching lines @@
     /**
      * String listing the ids in displays. Used to observe changes to the
      * display configuration (i.e. when a display is added or removed).
      */
     displayIds: {type: String, observer: 'onDisplayIdsChanged_'},
 
     /** Primary display id */
     primaryDisplayId: String,
 
     /** @type {!chrome.system.display.DisplayUnitInfo|undefined} */
-    selectedDisplay: {type: Object, observer: 'selectedDisplayChanged_'},
+    selectedDisplay: Object,
 
     /** Id passed to the overscan dialog. */
     overscanDisplayId: {
       type: String,
       notify: true,
     },
 
     /** @private {!Array<number>} Mode index values for slider. */
     modeValues_: Array,
   },
@@ skipping 80 matching lines @@
    * @private
    */
   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 |selectedModePref_.value| so that the slider
-    // updates correctly.
-    var numModes = this.selectedDisplay.modes.length;
+  /**
+   * We need to call this explicitly rather than relying on change events
+   * so that we can control the update order.
+   * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay
+   * @private
+   */
+  setSelectedDisplay_: function(selectedDisplay) {
+    // Set |currentSelectedModeIndex_| and |modeValues_| first since these
+    // are not used directly in data binding.
+    var numModes = selectedDisplay.modes.length;
     if (numModes == 0) {
       this.modeValues_ = [];
-      this.set('selectedModePref_.value', 0);
       this.currentSelectedModeIndex_ = 0;
-      return;
+    } else {
+      this.modeValues_ = Array.from(Array(numModes).keys());
+      this.currentSelectedModeIndex_ = this.getSelectedModeIndex_(
+        selectedDisplay);
     }
-    this.modeValues_ = Array.from(Array(numModes).keys());
-    this.set('selectedModePref_.value', this.getSelectedModeIndex_(
-        this.selectedDisplay));
-    this.currentSelectedModeIndex_ =
-        /** @type {number} */ (this.selectedModePref_.value);
+    // Set |selectedDisplay| first since only the resolution slider depends
+    // on |selectedModePref_|.
+    this.selectedDisplay = selectedDisplay;
+    this.set('selectedModePref_.value', this.currentSelectedModeIndex_);
   },
 
   /**
    * 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 93 matching lines @@
     if (this.selectedDisplay.modes.length == 0 ||
         this.currentSelectedModeIndex_ == -1) {
       // If currentSelectedModeIndex_ == -1, selectedDisplay and
       // |selectedModePref_.value| are not in sync.
       return this.i18n(
           'displayResolutionText', this.selectedDisplay.bounds.width.toString(),
           this.selectedDisplay.bounds.height.toString());
     }
     var mode = this.selectedDisplay.modes[
         /** @type {number} */(this.selectedModePref_.value)];
+    assert(mode);
     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
-        // |selectedModePref_.value| and currentSelectedModeIndex_ correctly.
-        this.currentSelectedModeIndex_ = -1;
-        this.selectedDisplay = display;
+      if (id == display.id) {
+        if (this.selectedDisplay != display)
+          this.setSelectedDisplay_(display);
+        return;
       }
     }
   },
 
   /**
    * Handles event when a display tab is selected.
    * @param {!{detail: !{item: !{displayId: string}}}} e
    * @private
    */
   onSelectDisplayTab_: function(e) {
@@ skipping 110 matching lines @@
       if (displayIds)
         displayIds += ',';
       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 ||
+    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.setSelectedDisplay_(selectedDisplay);
 
     this.$.displayLayout.updateDisplays(this.displays, this.layouts);
   },
 
   /** @private */
   setPropertiesCallback_: function() {
     if (chrome.runtime.lastError) {
       console.error(
           'setDisplayProperties Error: ' + chrome.runtime.lastError.message);
     }
   },
 });