Update display_options.js to better match chrome.system.display

chrome/browser/resources/options/chromeos/display_options.js

 // Copyright (c) 2012 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.
 
 cr.exportPath('options');
 
 /**
  * @typedef {{
- *   availableColorProfiles: Array<{profileId: number, name: string}>,
- *   colorProfile: number,
+ *   left: number,
+ *   top: number,
+ *   width: number,
+ *   height: number
+ * }}
+ */
+options.DisplayBounds;
+
+/**
+ * @typedef {{
+ *   width: number,
  *   height: number,
+ *   originalWidth: number,
+ *   originalHeight: number,
+ *   deviceScaleFactor: number,
+ *   scale: number,
+ *   refreshRate: number,
+ *   isBest: boolean,
+ *   selected: boolean
+ * }}
+ */
+options.DisplayMode;
+
+/**
+ * @typedef {{
+ *   profileId: number,
+ *   name: string
+ * }}
+ */
+options.ColorProfile;
+
+/**
+ * @typedef {{
+ *   availableColorProfiles: !Array<!options.ColorProfile>,
+ *   bounds: options.DisplayBounds,
+ *   colorProfileId: number,
+ *   div: ?Element,
  *   id: string,
  *   isInternal: boolean,
  *   isPrimary: boolean,
- *   resolutions: Array<{width: number, height: number, originalWidth: number,
- *       originalHeight: number, deviceScaleFactor: number, scale: number,
- *       refreshRate: number, isBest: boolean, selected: boolean}>,
+ *   resolutions: !Array<!options.DisplayMode>,
  *   name: string,
- *   orientation: number,
- *   width: number,
- *   x: number,
- *   y: number
+ *   rotation: number,
+ *   originalPosition: ?{x: number, y: number}
  * }}
  */
 options.DisplayInfo;
 
 /**
  * Enumeration of secondary display layout.  The value has to be same as the
  * values in ash/display/display_controller.cc.
  * @enum {number}
  */
 options.SecondaryDisplayLayout = {
@@ skipping 108 matching lines @@
 
     /**
      * The current secondary display layout.
      * @private
      */
     layout_: options.SecondaryDisplayLayout.RIGHT,
 
     /**
      * The array of current output displays.  It also contains the display
      * rectangles currently rendered on screen.
-     * @type {Array<options.DisplayInfo>}
+     * @type {!Array<!options.DisplayInfo>}
      * @private
      */
     displays_: [],
 
     /**
      * The index for the currently focused display in the options UI.  null if
      * no one has focus.
      * @private
      */
     focusedIndex_: null,
 
     /**
-     * The primary display.
+     * The primary display edit info.
+     * @type {?options.DisplayInfo}
      * @private
      */
     primaryDisplay_: null,
 
     /**
-     * The secondary display.
+     * The secondary display edit info.
+     * @type {?options.DisplayInfo}
      * @private
      */
     secondaryDisplay_: null,
 
     /**
      * The container div element which contains all of the display rectangles.
      * @private
      */
     displaysView_: null,
 
@@ skipping 38 matching lines @@
         chrome.send('setPrimary', [this.displays_[this.focusedIndex_].id]);
       }).bind(this);
       $('display-options-resolution-selection').onchange = (function(ev) {
         var display = this.displays_[this.focusedIndex_];
         var resolution = display.resolutions[ev.target.value];
         chrome.send('setDisplayMode', [display.id, resolution]);
       }).bind(this);
       $('display-options-orientation-selection').onchange = (function(ev) {
         var displayIndex =
           (this.focusedIndex_ === null) ? 0 : this.focusedIndex_;
-        chrome.send('setOrientation', [this.displays_[displayIndex].id,
-                                       ev.target.value]);
+        var rotation = parseInt(ev.target.value, 10);
+        chrome.send('setRotation', [this.displays_[displayIndex].id, rotation]);
       }).bind(this);
       $('display-options-color-profile-selection').onchange = (function(ev) {
         chrome.send('setColorProfile', [this.displays_[this.focusedIndex_].id,
                                         ev.target.value]);
       }).bind(this);
       $('selected-display-start-calibrating-overscan').onclick = (function() {
         // Passes the target display ID. Do not specify it through URL hash,
         // we do not care back/forward.
         var displayOverscan = options.DisplayOverscan.getInstance();
         displayOverscan.setDisplayId(this.displays_[this.focusedIndex_].id);
@@ skipping 399 matching lines @@
      */
     updateSelectedDisplaySectionMirroring_: function() {
       $('display-configuration-arrow').hidden = true;
       $('display-options-set-primary').disabled = true;
       $('display-options-select-mirroring').disabled = false;
       $('selected-display-start-calibrating-overscan').disabled = true;
       var display = this.displays_[0];
       var orientation = $('display-options-orientation-selection');
       orientation.disabled = false;
       var orientationOptions = orientation.getElementsByTagName('option');
-      orientationOptions[display.orientation].selected = true;
+      var orientationIndex = Math.floor(display.rotation / 90);
+      orientationOptions[orientationIndex].selected = true;
       $('selected-display-name').textContent =
           loadTimeData.getString('mirroringDisplay');
       var resolution = $('display-options-resolution-selection');
       var option = document.createElement('option');
       option.value = 'default';
-      option.textContent = display.width + 'x' + display.height;
+      option.textContent = display.bounds.width + 'x' + display.bounds.height;
       resolution.appendChild(option);
       resolution.disabled = true;
     },
 
     /**
      * Updates the description of selected display section when no display is
      * selected.
      * @private
      */
     updateSelectedDisplaySectionNoSelected_: function() {
@@ skipping 27 matching lines @@
       $('display-options-set-primary').disabled = display.isPrimary;
       $('display-options-select-mirroring').disabled =
           (this.displays_.length <= 1 && !this.unifiedDesktopEnabled_);
       $('selected-display-start-calibrating-overscan').disabled =
           display.isInternal;
 
       var orientation = $('display-options-orientation-selection');
       orientation.disabled = this.unifiedDesktopEnabled_;
 
       var orientationOptions = orientation.getElementsByTagName('option');
-      orientationOptions[display.orientation].selected = true;
+      var orientationIndex = Math.floor(display.rotation / 90);
+      orientationOptions[orientationIndex].selected = true;
 
       $('selected-display-name').textContent = display.name;
 
       var resolution = $('display-options-resolution-selection');
       if (display.resolutions.length <= 1) {
         var option = document.createElement('option');
         option.value = 'default';
-        option.textContent = display.width + 'x' + display.height;
+        option.textContent = display.bounds.width + 'x' + display.bounds.height;
         option.selected = true;
         resolution.appendChild(option);
         resolution.disabled = true;
       } else {
         var previousOption;
         for (var i = 0; i < display.resolutions.length; i++) {
           var option = document.createElement('option');
           option.value = i;
           option.textContent = display.resolutions[i].width + 'x' +
               display.resolutions[i].height;
@@ skipping 20 matching lines @@
         $('selected-display-color-profile-row').hidden = true;
       } else {
         $('selected-display-color-profile-row').hidden = false;
         var profiles = $('display-options-color-profile-selection');
         profiles.innerHTML = '';
         for (var i = 0; i < display.availableColorProfiles.length; i++) {
           var option = document.createElement('option');
           var colorProfile = display.availableColorProfiles[i];
           option.value = colorProfile.profileId;
           option.textContent = colorProfile.name;
-          option.selected = (
-              display.colorProfile == colorProfile.profileId);
+          option.selected = (display.colorProfileId == colorProfile.profileId);
           profiles.appendChild(option);
         }
       }
     },
 
     /**
      * Updates the description of the selected display section.
      * @private
      */
     updateSelectedDisplayDescription_: function() {
@@ skipping 35 matching lines @@
       // Offset pixels for secondary display rectangles. The offset includes the
       // border width.
       /** @const */ var MIRRORING_OFFSET_PIXELS = 3;
       // Always show two displays because there must be two displays when
       // the display_options is enabled.  Don't rely on displays_.length because
       // there is only one display from chrome's perspective in mirror mode.
       /** @const */ var MIN_NUM_DISPLAYS = 2;
       /** @const */ var MIRRORING_VERTICAL_MARGIN = 20;
 
       // The width/height should be same as the first display:
-      var width = Math.ceil(this.displays_[0].width * this.visualScale_);
-      var height = Math.ceil(this.displays_[0].height * this.visualScale_);
+      var width = Math.ceil(this.displays_[0].bounds.width * this.visualScale_);
+      var height =
+          Math.ceil(this.displays_[0].bounds.height * this.visualScale_);
 
       var numDisplays = Math.max(MIN_NUM_DISPLAYS, this.displays_.length);
 
       var totalWidth = width + numDisplays * MIRRORING_OFFSET_PIXELS;
       var totalHeight = height + numDisplays * MIRRORING_OFFSET_PIXELS;
 
       this.displaysView_.style.height = totalHeight + 'px';
 
       // The displays should be centered.
       var offsetX =
           $('display-options-displays-view').offsetWidth / 2 - totalWidth / 2;
 
       for (var i = 0; i < numDisplays; i++) {
         var div = document.createElement('div');
         div.className = 'displays-display';
         div.style.top = i * MIRRORING_OFFSET_PIXELS + 'px';
         div.style.left = i * MIRRORING_OFFSET_PIXELS + offsetX + 'px';
         div.style.width = width + 'px';
         div.style.height = height + 'px';
         div.style.zIndex = i;
         // set 'display-mirrored' class for the background display rectangles.
         if (i != numDisplays - 1)
           div.classList.add('display-mirrored');
         this.displaysView_.appendChild(div);
       }
     },
 
     /**
      * Creates a div element representing the specified display.
-     * @param {Object} display The display object.
+     * @param {!options.DisplayInfo} display The display object.
      * @param {boolean} focused True if it's focused.
      * @private
      */
     createDisplayRectangle_: function(display, focused) {
       var div = document.createElement('div');
       display.div = div;
       div.className = 'displays-display';
       if (focused)
         div.classList.add('displays-focused');
 
       // div needs to be added to the DOM tree first, otherwise offsetHeight for
       // nameContainer below cannot be computed.
       this.displaysView_.appendChild(div);
 
       var nameContainer = document.createElement('div');
       nameContainer.textContent = display.name;
       div.appendChild(nameContainer);
-      div.style.width = Math.floor(display.width * this.visualScale_) + 'px';
-      var newHeight = Math.floor(display.height * this.visualScale_);
+      div.style.width =
+          Math.floor(display.bounds.width * this.visualScale_) + 'px';
+      var newHeight = Math.floor(display.bounds.height * this.visualScale_);
       div.style.height = newHeight + 'px';
       nameContainer.style.marginTop =
           (newHeight - nameContainer.offsetHeight) / 2 + 'px';
 
       div.onmousedown = this.onMouseDown_.bind(this);
       div.ontouchstart = this.onTouchStart_.bind(this);
       return div;
     },
 
     /**
      * Layouts the display rectangles according to the current layout_.
      * @private
      */
     layoutDisplays_: function() {
       var maxWidth = 0;
       var maxHeight = 0;
       var boundingBox = {left: 0, right: 0, top: 0, bottom: 0};
       this.primaryDisplay_ = null;
       this.secondaryDisplay_ = null;
       var focusedDisplay = null;
       for (var i = 0; i < this.displays_.length; i++) {
         var display = this.displays_[i];
         if (display.isPrimary)
           this.primaryDisplay_ = display;
         else
           this.secondaryDisplay_ = display;
         if (i == this.focusedIndex_)
           focusedDisplay = display;
 
-        boundingBox.left = Math.min(boundingBox.left, display.x);
-        boundingBox.right = Math.max(
-            boundingBox.right, display.x + display.width);
-        boundingBox.top = Math.min(boundingBox.top, display.y);
-        boundingBox.bottom = Math.max(
-            boundingBox.bottom, display.y + display.height);
-        maxWidth = Math.max(maxWidth, display.width);
-        maxHeight = Math.max(maxHeight, display.height);
+        var bounds = display.bounds;
+        boundingBox.left = Math.min(boundingBox.left, bounds.left);
+        boundingBox.right =
+            Math.max(boundingBox.right, bounds.left + bounds.width);
+        boundingBox.top = Math.min(boundingBox.top, bounds.top);
+        boundingBox.bottom =
+            Math.max(boundingBox.bottom, bounds.top + bounds.height);
+        maxWidth = Math.max(maxWidth, bounds.width);
+        maxHeight = Math.max(maxHeight, bounds.height);
       }
       if (!this.primaryDisplay_)
         return;
 
       // Make the margin around the bounding box.
       var areaWidth = boundingBox.right - boundingBox.left + maxWidth;
       var areaHeight = boundingBox.bottom - boundingBox.top + maxHeight;
 
       // Calculates the scale by the width since horizontal size is more strict.
       // TODO(mukai): Adds the check of vertical size in case.
       this.visualScale_ = Math.min(
           VISUAL_SCALE, this.displaysView_.offsetWidth / areaWidth);
 
       // Prepare enough area for thisplays_view by adding the maximum height.
       this.displaysView_.style.height =
           Math.ceil(areaHeight * this.visualScale_) + 'px';
 
       // Centering the bounding box of the display rectangles.
       var offset = {
-        x: Math.floor(this.displaysView_.offsetWidth / 2 -
+        x: Math.floor(
+            this.displaysView_.offsetWidth / 2 -
             (boundingBox.right + boundingBox.left) * this.visualScale_ / 2),
-        y: Math.floor(this.displaysView_.offsetHeight / 2 -
+        y: Math.floor(
+            this.displaysView_.offsetHeight / 2 -
             (boundingBox.bottom + boundingBox.top) * this.visualScale_ / 2)
       };
 
       // Layouting the display rectangles. First layout the primaryDisplay and
       // then layout the secondary which is attaching to the primary.
       var primaryDiv = this.createDisplayRectangle_(
           this.primaryDisplay_, this.primaryDisplay_ == focusedDisplay);
       primaryDiv.style.left =
-          Math.floor(this.primaryDisplay_.x * this.visualScale_) +
-              offset.x + 'px';
+          Math.floor(this.primaryDisplay_.bounds.left * this.visualScale_) +
+          offset.x + 'px';
       primaryDiv.style.top =
-          Math.floor(this.primaryDisplay_.y * this.visualScale_) +
-              offset.y + 'px';
+          Math.floor(this.primaryDisplay_.bounds.top * this.visualScale_) +
+          offset.y + 'px';
       this.primaryDisplay_.originalPosition = {
-        x: primaryDiv.offsetLeft, y: primaryDiv.offsetTop};
+        x: primaryDiv.offsetLeft,
+        y: primaryDiv.offsetTop
+      };
 
       if (this.secondaryDisplay_) {
         var secondaryDiv = this.createDisplayRectangle_(
             this.secondaryDisplay_, this.secondaryDisplay_ == focusedDisplay);
         // Don't trust the secondary display's x or y, because it may cause a
         // 1px gap due to rounding, which will create a fake update on end
         // dragging. See crbug.com/386401
+        var bounds = this.secondaryDisplay_.bounds;
         switch (this.layout_) {
-        case options.SecondaryDisplayLayout.TOP:
-          secondaryDiv.style.left =
-              Math.floor(this.secondaryDisplay_.x * this.visualScale_) +
-              offset.x + 'px';
-          secondaryDiv.style.top =
-              primaryDiv.offsetTop - secondaryDiv.offsetHeight + 'px';
-          break;
-        case options.SecondaryDisplayLayout.RIGHT:
-          secondaryDiv.style.left =
-              primaryDiv.offsetLeft + primaryDiv.offsetWidth + 'px';
-          secondaryDiv.style.top =
-              Math.floor(this.secondaryDisplay_.y * this.visualScale_) +
-              offset.y + 'px';
-          break;
-        case options.SecondaryDisplayLayout.BOTTOM:
-          secondaryDiv.style.left =
-              Math.floor(this.secondaryDisplay_.x * this.visualScale_) +
-              offset.x + 'px';
-          secondaryDiv.style.top =
-              primaryDiv.offsetTop + primaryDiv.offsetHeight + 'px';
-          break;
-        case options.SecondaryDisplayLayout.LEFT:
-          secondaryDiv.style.left =
-              primaryDiv.offsetLeft - secondaryDiv.offsetWidth + 'px';
-          secondaryDiv.style.top =
-              Math.floor(this.secondaryDisplay_.y * this.visualScale_) +
-              offset.y + 'px';
-          break;
+          case options.SecondaryDisplayLayout.TOP:
+            secondaryDiv.style.left =
+                Math.floor(bounds.left * this.visualScale_) + offset.x + 'px';
+            secondaryDiv.style.top =
+                primaryDiv.offsetTop - secondaryDiv.offsetHeight + 'px';
+            break;
+          case options.SecondaryDisplayLayout.RIGHT:
+            secondaryDiv.style.left =
+                primaryDiv.offsetLeft + primaryDiv.offsetWidth + 'px';
+            secondaryDiv.style.top =
+                Math.floor(bounds.top * this.visualScale_) + offset.y + 'px';
+            break;
+          case options.SecondaryDisplayLayout.BOTTOM:
+            secondaryDiv.style.left =
+                Math.floor(bounds.left * this.visualScale_) + offset.x + 'px';
+            secondaryDiv.style.top =
+                primaryDiv.offsetTop + primaryDiv.offsetHeight + 'px';
+            break;
+          case options.SecondaryDisplayLayout.LEFT:
+            secondaryDiv.style.left =
+                primaryDiv.offsetLeft - secondaryDiv.offsetWidth + 'px';
+            secondaryDiv.style.top =
+                Math.floor(bounds.top * this.visualScale_) + offset.y + 'px';
+            break;
         }
         this.secondaryDisplay_.originalPosition = {
-          x: secondaryDiv.offsetLeft, y: secondaryDiv.offsetTop};
+          x: secondaryDiv.offsetLeft,
+          y: secondaryDiv.offsetTop
+        };
       }
     },
 
     /**
      * Called when the display arrangement has changed.
      * @param {options.MultiDisplayMode} mode multi display mode.
      * @param {Array<options.DisplayInfo>} displays The list of the display
      *     information.
      * @param {options.SecondaryDisplayLayout} layout The layout strategy.
      * @param {number} offset The offset of the secondary display.
@@ skipping 61 matching lines @@
       mode, displays, layout, offset) {
     DisplayOptions.getInstance().onDisplayChanged_(
         mode, displays, layout, offset);
   };
 
   // Export
   return {
     DisplayOptions: DisplayOptions
   };
 });