MD Settings: Add display layout

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.
- *
- * @group Chrome Settings Elements
  */
 
 cr.define('settings.display', function() {
   var systemDisplayApi = /** @type {!SystemDisplay} */ (chrome.system.display);
 
   return {
     systemDisplayApi: systemDisplayApi,
   };
 });
 
 Polymer({
   is: 'settings-display',
 
   behaviors: [
     I18nBehavior,
   ],
 
   properties: {
     /**
      * Array of displays.
      * @type {!Array<!chrome.system.display.DisplayUnitInfo>}
      */
     displays: Array,
 
     /**
+     * Array of display layouts.
+     * @type {!Array<!chrome.system.display.DisplayLayout>}
+     */
+    layouts: Array,
+
+    /**
      * 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_'},
@@ skipping 54 matching lines @@
   /** @private */
   onDisplayIdsChanged_: function() {
     // Close any overscan dialog (which will cancel any overscan operation)
     // if displayIds changes.
     this.showOverscanDialog_(false);
   },
 
   /** @private */
   getDisplayInfo_: function() {
     settings.display.systemDisplayApi.getInfo(
-        this.updateDisplayInfo_.bind(this));
+        this.displayInfoFetched_.bind(this));
   },
 
   /**
+   * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays
+   * @private
+   */
+  displayInfoFetched_(displays) {
+    if (!displays.length)
+      return;
+    settings.display.systemDisplayApi.getDisplayLayout(
+        this.displayLayoutFetched_.bind(this, displays));
+  },
+
+  /**
+   * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays
+   * @param {!Array<!chrome.system.display.DisplayLayout>} layouts
+   * @private
+   */
+  displayLayoutFetched_(displays, layouts) {
+    this.layouts = layouts;
+    this.displays = displays;
+    this.updateDisplayInfo_();
+  },
+
+  /**
    * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay
    * @return {number}
    * @private
    */
   getSelectedModeIndex_: function(selectedDisplay) {
     for (var i = 0; i < selectedDisplay.modes.length; ++i) {
       if (selectedDisplay.modes[i].isSelected)
         return i;
     }
     return 0;
@@ skipping 77 matching lines @@
     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 {!{model: !{index: number}, target: !PaperButtonElement}} e
+   * @param {!{detail: number}} e
    * @private
    */
-  onSelectDisplayTap_: function(e) {
-    this.selectedDisplay = this.displays[e.model.index];
+  onSelectDisplay_: function(e) {
+    var index = e.detail;
+    assert(index >= 0);
+    if (index >= this.displays.length)
+      return;
+    this.selectedDisplay = this.displays[e.detail];
     // Force active in case selected display was clicked.
     e.target.active = true;
   },
 
   /** @private */
   onMakePrimaryTap_: function() {
     if (!this.selectedDisplay)
       return;
     if (this.selectedDisplay.id == this.primaryDisplayId)
       return;
@@ skipping 57 matching lines @@
     settings.display.systemDisplayApi.setDisplayProperties(
         id, properties, this.setPropertiesCallback_.bind(this));
   },
 
   /** @private */
   onOverscanTap_: function() {
     this.overscanDisplayId = this.selectedDisplay.id;
     this.showOverscanDialog_(true);
   },
 
-  /**
-   * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays
-   * @private
-   */
-  updateDisplayInfo_(displays) {
-    this.displays = displays;
+  /** @private */
+  updateDisplayInfo_() {
     var displayIds = '';
     var primaryDisplay = undefined;
     var selectedDisplay = undefined;
     for (var display of this.displays) {
       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 ||
         (this.displays && this.displays[0]);
+    this.$.displayLayout.updateDisplays(this.displays, this.layouts);
   },
 
   /** @private */
   setPropertiesCallback_: function() {
     if (chrome.runtime.lastError) {
       console.error(
           'setDisplayProperties Error: ' + chrome.runtime.lastError.message);
     }
   },
 });