Fix types in display_options.js

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');
 
 /**
+ * Enumeration of display layout. These values must match the C++ values in
+ * ash::DisplayController.
+ * @enum {number}
+ */
+options.DisplayLayoutType = {
+  TOP: 0,
+  RIGHT: 1,
+  BOTTOM: 2,
+  LEFT: 3
+};
+
+/**
+ * Enumeration of multi display mode. These values must match the C++ values in
+ * ash::DisplayManager.
+ * @enum {number}
+ */
+options.MultiDisplayMode = {
+  EXTENDED: 0,
+  MIRRORING: 1,
+  UNIFIED: 2,
+};
+
+/**
  * @typedef {{
  *   left: number,
  *   top: number,
  *   width: number,
  *   height: number
  * }}
  */
 options.DisplayBounds;
 
 /**
  * @typedef {{
+ *   x: number,
+ *   y: number
+ * }}
+ */
+options.DisplayPosition;
+
+/**
+ * @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,
+ *   bounds: !options.DisplayBounds,
  *   colorProfileId: number,
  *   div: ?Element,
  *   id: string,
  *   isInternal: boolean,
  *   isPrimary: boolean,
  *   resolutions: !Array<!options.DisplayMode>,
  *   name: string,
  *   rotation: number,
- *   originalPosition: ?{x: number, y: number}
+ *   originalPosition: ?options.DisplayPosition
  * }}
  */
 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 = {
-  TOP: 0,
-  RIGHT: 1,
-  BOTTOM: 2,
-  LEFT: 3
-};
-
-/**
- * Enumeration of multi display mode.  The value has to be same as the
- * values in ash/display/display_manager..
- * @enum {number}
- */
-options.MultiDisplayMode = {
-  EXTENDED: 0,
-  MIRRORING: 1,
-  UNIFIED: 2,
-};
-
 cr.define('options', function() {
   var Page = cr.ui.pageManager.Page;
   var PageManager = cr.ui.pageManager.PageManager;
 
   // The scale ratio of the display rectangle to its original size.
   /** @const */ var VISUAL_SCALE = 1 / 10;
 
   // The number of pixels to share the edges between displays.
   /** @const */ var MIN_OFFSET_OVERLAP = 5;
 
   /**
-   * Calculates the bounds of |element| relative to the page.
-   * @param {HTMLElement} element The element to be known.
-   * @return {Object} The object for the bounds, with x, y, width, and height.
-   */
-  function getBoundsInPage(element) {
-    var bounds = {
-      x: element.offsetLeft,
-      y: element.offsetTop,
-      width: element.offsetWidth,
-      height: element.offsetHeight
-    };
-    var parent = element.offsetParent;
-    while (parent && parent != document.body) {
-      bounds.x += parent.offsetLeft;
-      bounds.y += parent.offsetTop;
-      parent = parent.offsetParent;
-    }
-    return bounds;
-  }

[stevenjb, 2016/01/21 03:56:17]

Unused

-
-  /**
    * Gets the position of |point| to |rect|, left, right, top, or bottom.
-   * @param {Object} rect The base rectangle with x, y, width, and height.
-   * @param {Object} point The point to check the position.
-   * @return {options.SecondaryDisplayLayout} The position of the calculated
-   *     point.
+   * @param {!options.DisplayBounds} rect The base rectangle.
+   * @param {!options.DisplayPosition} point The point to check the position.
+   * @return {options.DisplayLayoutType} The position of the calculated point.
    */
   function getPositionToRectangle(rect, point) {
     // Separates the area into four (LEFT/RIGHT/TOP/BOTTOM) by the diagonals of
     // the rect, and decides which area the display should reside.
     var diagonalSlope = rect.height / rect.width;
-    var topDownIntercept = rect.y - rect.x * diagonalSlope;
-    var bottomUpIntercept = rect.y + rect.height + rect.x * diagonalSlope;
+    var topDownIntercept = rect.top - rect.left * diagonalSlope;
+    var bottomUpIntercept = rect.top + rect.height + rect.left * diagonalSlope;
 
     if (point.y > topDownIntercept + point.x * diagonalSlope) {
       if (point.y > bottomUpIntercept - point.x * diagonalSlope)
-        return options.SecondaryDisplayLayout.BOTTOM;
+        return options.DisplayLayoutType.BOTTOM;
       else
-        return options.SecondaryDisplayLayout.LEFT;
+        return options.DisplayLayoutType.LEFT;
     } else {
       if (point.y > bottomUpIntercept - point.x * diagonalSlope)
-        return options.SecondaryDisplayLayout.RIGHT;
+        return options.DisplayLayoutType.RIGHT;
       else
-        return options.SecondaryDisplayLayout.TOP;
+        return options.DisplayLayoutType.TOP;
     }
   }
 
   /**
    * Encapsulated handling of the 'Display' page.
    * @constructor
    * @extends {cr.ui.pageManager.Page}
    */
   function DisplayOptions() {
     Page.call(this, 'display',
               loadTimeData.getString('displayOptionsPageTabTitle'),
               'display-options-page');
   }
 
   cr.addSingletonGetter(DisplayOptions);
 
   DisplayOptions.prototype = {
     __proto__: Page.prototype,
 
     /**
      * Whether the current output status is mirroring displays or not.
+     * @type {boolean}
      * @private
      */
     mirroring_: false,
 
     /**
      * Whether the unified desktop is enable or not.
+     * @type {boolean}
      * @private
      */
     unifiedDesktopEnabled_: false,
 
     /**
      * Whether the unified desktop option should be present.
+     * @type {boolean}
      * @private
      */
     showUnifiedDesktopOption_: false,
 
     /**
      * The current secondary display layout.
+     * @type {options.DisplayLayoutType}
      * @private
      */
-    layout_: options.SecondaryDisplayLayout.RIGHT,
+    layout_: options.DisplayLayoutType.RIGHT,
 
     /**
      * The array of current output displays.  It also contains the display
      * rectangles currently rendered on screen.
      * @type {!Array<!options.DisplayInfo>}
      * @private
      */
     displays_: [],
 
     /**
-     * The index for the currently focused display in the options UI.  null if
-     * no one has focus.
+     * The index of the currently focused display, or -1 for none.
+     * @type {number}
      * @private
      */
-    focusedIndex_: null,
+    focusedIndex_: -1,
 
     /**
      * The primary display edit info.
      * @type {?options.DisplayInfo}
      * @private
      */
     primaryDisplay_: null,
 
     /**
      * The secondary display edit info.
      * @type {?options.DisplayInfo}
      * @private
      */
     secondaryDisplay_: null,
 
     /**
+     * Drag info.
+     * @type {?{display: !options.DisplayInfo,
+     *          originalLocation: !options.DisplayPosition,
+     *          eventLocation: !options.DisplayPosition}}
+     * @private
+     */
+    dragging_: null,
+
+    /**
      * The container div element which contains all of the display rectangles.
+     * @type {?Element}
      * @private
      */
     displaysView_: null,
 
     /**
      * The scale factor of the actual display size to the drawn display
      * rectangle size.
+     * @type {number}
      * @private
      */
     visualScale_: VISUAL_SCALE,
 
     /**
      * The location where the last touch event happened.  This is used to
      * prevent unnecessary dragging events happen.  Set to null unless it's
      * during touch events.
+     * @type {?options.DisplayPosition}
      * @private
      */
     lastTouchLocation_: null,
 
     /**
      * Whether the display settings can be shown.
+     * @type {boolean}
      * @private
      */
     enabled_: true,
 
     /** @override */
     initializePage: function() {
       Page.prototype.initializePage.call(this);
 
       $('display-options-select-mirroring').onchange = (function() {
         this.mirroring_ =
@@ skipping 10 matching lines @@
       $('display-options-set-primary').onclick = (function() {
         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_;
+          (this.focusedIndex_ == -1) ? 0 : this.focusedIndex_;
         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.
@@ skipping 21 matching lines @@
           'selected-display-option-title');
       var maxSize = 0;
       for (var i = 0; i < optionTitles.length; i++)
         maxSize = Math.max(maxSize, optionTitles[i].clientWidth);
       for (var i = 0; i < optionTitles.length; i++)
         optionTitles[i].style.width = maxSize + 'px';
       chrome.send('getDisplayInfo');
     },
 
     /** @override */
-    canShowPage: function() {
-      return this.enabled_;
-    },
+    canShowPage: function() { return this.enabled_; },
 
     /**
      * Enables or disables the page. When disabled, the page will not be able to
      * open, and will close if currently opened.
      * @param {boolean} enabled Whether the page should be enabled.
      * @param {boolean} showUnifiedDesktop Whether the unified desktop option
      *     should be present.
      */
     setEnabled: function(enabled, showUnifiedDesktop) {
       if (this.enabled_ == enabled &&
@@ skipping 79 matching lines @@
 
     /**
      * Collects the current data and sends it to Chrome.
      * @private
      */
     applyResult_: function() {
       // Offset is calculated from top or left edge.
       var primary = this.primaryDisplay_;
       var secondary = this.secondaryDisplay_;
       var offset;
-      if (this.layout_ == options.SecondaryDisplayLayout.LEFT ||
-          this.layout_ == options.SecondaryDisplayLayout.RIGHT) {
+      if (this.layout_ == options.DisplayLayoutType.LEFT ||
+          this.layout_ == options.DisplayLayoutType.RIGHT) {
         offset = secondary.div.offsetTop - primary.div.offsetTop;
       } else {
         offset = secondary.div.offsetLeft - primary.div.offsetLeft;
       }
       offset = Math.floor(offset / this.visualScale_);
       chrome.send('setDisplayLayout', [secondary.id, this.layout_, offset]);
     },
 
     /**
      * Snaps the region [point, width] to [basePoint, baseWidth] if
@@ skipping 18 matching lines @@
         return basePoint;
       else if (endDiff < SNAP_DISTANCE_PX)
         return basePoint + baseWidth - width;
 
       return point;
     },
 
     /**
      * Processes the actual dragging of display rectangle.
      * @param {Event} e The event which triggers this drag.
-     * @param {Object} eventLocation The location where the event happens.
+     * @param {options.DisplayPosition} eventLocation The location where the
+     *     event happens.
      * @private
      */
     processDragging_: function(e, eventLocation) {
       if (!this.dragging_)
         return true;
 
       var index = -1;
       for (var i = 0; i < this.displays_.length; i++) {
         if (this.displays_[i] == this.dragging_.display) {
           index = i;
@@ skipping 17 matching lines @@
 
       var baseDiv = this.dragging_.display.isPrimary ?
           this.secondaryDisplay_.div : this.primaryDisplay_.div;
       var draggingDiv = this.dragging_.display.div;
 
       newPosition.x = this.snapToEdge_(newPosition.x, draggingDiv.offsetWidth,
                                        baseDiv.offsetLeft, baseDiv.offsetWidth);
       newPosition.y = this.snapToEdge_(newPosition.y, draggingDiv.offsetHeight,
                                        baseDiv.offsetTop, baseDiv.offsetHeight);
 
-      var newCenter = {
+      var newCenter =  /** {!options.DisplayPosition} */({
         x: newPosition.x + draggingDiv.offsetWidth / 2,
         y: newPosition.y + draggingDiv.offsetHeight / 2
-      };
+      });
 
-      var baseBounds = {
-        x: baseDiv.offsetLeft,
-        y: baseDiv.offsetTop,
+      var baseBounds = /** {!options.DisplayBounds} */({
+        left: baseDiv.offsetLeft,
+        top: baseDiv.offsetTop,
         width: baseDiv.offsetWidth,
         height: baseDiv.offsetHeight
-      };
+      });
       switch (getPositionToRectangle(baseBounds, newCenter)) {
-        case options.SecondaryDisplayLayout.RIGHT:
+        case options.DisplayLayoutType.RIGHT:
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.LEFT :
-              options.SecondaryDisplayLayout.RIGHT;
+              options.DisplayLayoutType.LEFT :
+              options.DisplayLayoutType.RIGHT;
           break;
-        case options.SecondaryDisplayLayout.LEFT:
+        case options.DisplayLayoutType.LEFT:
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.RIGHT :
-              options.SecondaryDisplayLayout.LEFT;
+              options.DisplayLayoutType.RIGHT :
+              options.DisplayLayoutType.LEFT;
           break;
-        case options.SecondaryDisplayLayout.TOP:
+        case options.DisplayLayoutType.TOP:
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.BOTTOM :
-              options.SecondaryDisplayLayout.TOP;
+              options.DisplayLayoutType.BOTTOM :
+              options.DisplayLayoutType.TOP;
           break;
-        case options.SecondaryDisplayLayout.BOTTOM:
+        case options.DisplayLayoutType.BOTTOM:
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.TOP :
-              options.SecondaryDisplayLayout.BOTTOM;
+              options.DisplayLayoutType.TOP :
+              options.DisplayLayoutType.BOTTOM;
           break;
       }
 
-      if (this.layout_ == options.SecondaryDisplayLayout.LEFT ||
-          this.layout_ == options.SecondaryDisplayLayout.RIGHT) {
+      if (this.layout_ == options.DisplayLayoutType.LEFT ||
+          this.layout_ == options.DisplayLayoutType.RIGHT) {
         if (newPosition.y > baseDiv.offsetTop + baseDiv.offsetHeight)
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.TOP :
-              options.SecondaryDisplayLayout.BOTTOM;
-        else if (newPosition.y + draggingDiv.offsetHeight <
-                 baseDiv.offsetTop)
+              options.DisplayLayoutType.TOP :
+              options.DisplayLayoutType.BOTTOM;
+        else if (newPosition.y + draggingDiv.offsetHeight < baseDiv.offsetTop)
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.BOTTOM :
-              options.SecondaryDisplayLayout.TOP;
+              options.DisplayLayoutType.BOTTOM :
+              options.DisplayLayoutType.TOP;
       } else {
         if (newPosition.x > baseDiv.offsetLeft + baseDiv.offsetWidth)
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.LEFT :
-              options.SecondaryDisplayLayout.RIGHT;
-        else if (newPosition.x + draggingDiv.offsetWidth <
-                   baseDiv.offsetLeft)
+              options.DisplayLayoutType.LEFT :
+              options.DisplayLayoutType.RIGHT;
+        else if (newPosition.x + draggingDiv.offsetWidth < baseDiv.offsetLeft)
           this.layout_ = this.dragging_.display.isPrimary ?
-              options.SecondaryDisplayLayout.RIGHT :
-              options.SecondaryDisplayLayout.LEFT;
+              options.DisplayLayoutType.RIGHT :
+              options.DisplayLayoutType.LEFT;
       }
 
       var layoutToBase;
       if (!this.dragging_.display.isPrimary) {
         layoutToBase = this.layout_;
       } else {
         switch (this.layout_) {
-          case options.SecondaryDisplayLayout.RIGHT:
-            layoutToBase = options.SecondaryDisplayLayout.LEFT;
+          case options.DisplayLayoutType.RIGHT:
+            layoutToBase = options.DisplayLayoutType.LEFT;
             break;
-          case options.SecondaryDisplayLayout.LEFT:
-            layoutToBase = options.SecondaryDisplayLayout.RIGHT;
+          case options.DisplayLayoutType.LEFT:
+            layoutToBase = options.DisplayLayoutType.RIGHT;
             break;
-          case options.SecondaryDisplayLayout.TOP:
-            layoutToBase = options.SecondaryDisplayLayout.BOTTOM;
+          case options.DisplayLayoutType.TOP:
+            layoutToBase = options.DisplayLayoutType.BOTTOM;
             break;
-          case options.SecondaryDisplayLayout.BOTTOM:
-            layoutToBase = options.SecondaryDisplayLayout.TOP;
+          case options.DisplayLayoutType.BOTTOM:
+            layoutToBase = options.DisplayLayoutType.TOP;
             break;
         }
       }
 
       switch (layoutToBase) {
-        case options.SecondaryDisplayLayout.RIGHT:
+        case options.DisplayLayoutType.RIGHT:
           draggingDiv.style.left =
               baseDiv.offsetLeft + baseDiv.offsetWidth + 'px';
           draggingDiv.style.top = newPosition.y + 'px';
           break;
-        case options.SecondaryDisplayLayout.LEFT:
+        case options.DisplayLayoutType.LEFT:
           draggingDiv.style.left =
               baseDiv.offsetLeft - draggingDiv.offsetWidth + 'px';
           draggingDiv.style.top = newPosition.y + 'px';
           break;
-        case options.SecondaryDisplayLayout.TOP:
+        case options.DisplayLayoutType.TOP:
           draggingDiv.style.top =
               baseDiv.offsetTop - draggingDiv.offsetHeight + 'px';
           draggingDiv.style.left = newPosition.x + 'px';
           break;
-        case options.SecondaryDisplayLayout.BOTTOM:
+        case options.DisplayLayoutType.BOTTOM:
           draggingDiv.style.top =
               baseDiv.offsetTop + baseDiv.offsetHeight + 'px';
           draggingDiv.style.left = newPosition.x + 'px';
           break;
       }
 
       return false;
     },
 
     /**
-     * start dragging of a display rectangle.
-     * @param {HTMLElement} target The event target.
-     * @param {Object} eventLocation The object to hold the location where
-     *     this event happens.
+     * Start dragging of a display rectangle.
+     * @param {!HTMLElement} target The event target.
+     * @param {!options.DisplayPosition} eventLocation The event location.
      * @private
      */
     startDragging_: function(target, eventLocation) {
       var oldFocusedIndex = this.focusedIndex_;
       var willUpdateDisplayDescription = false;
-      this.focusedIndex_ = null;
+      this.focusedIndex_ = -1;
       for (var i = 0; i < this.displays_.length; i++) {
         var display = this.displays_[i];
         if (display.div == target ||
             (target.offsetParent && target.offsetParent == display.div)) {
           this.focusedIndex_ = i;
           if (oldFocusedIndex !== null && oldFocusedIndex != i)
             willUpdateDisplayDescription = true;
           break;
         }
       }
@@ skipping 24 matching lines @@
     /**
      * finish the current dragging of displays.
      * @param {Event} e The event which triggers this.
      * @private
      */
     endDragging_: function(e) {
       this.lastTouchLocation_ = null;
       if (this.dragging_) {
         // Make sure the dragging location is connected.
         var baseDiv = this.dragging_.display.isPrimary ?
-            this.secondaryDisplay_.div : this.primaryDisplay_.div;
+            this.secondaryDisplay_.div :
+            this.primaryDisplay_.div;
         var draggingDiv = this.dragging_.display.div;
-        if (this.layout_ == options.SecondaryDisplayLayout.LEFT ||
-            this.layout_ == options.SecondaryDisplayLayout.RIGHT) {
-          var top = Math.max(draggingDiv.offsetTop,
-                             baseDiv.offsetTop - draggingDiv.offsetHeight +
-                             MIN_OFFSET_OVERLAP);
-          top = Math.min(top,
-                         baseDiv.offsetTop + baseDiv.offsetHeight -
-                         MIN_OFFSET_OVERLAP);
+        if (this.layout_ == options.DisplayLayoutType.LEFT ||
+            this.layout_ == options.DisplayLayoutType.RIGHT) {
+          var top = Math.max(
+              draggingDiv.offsetTop, baseDiv.offsetTop -
+                  draggingDiv.offsetHeight + MIN_OFFSET_OVERLAP);
+          top = Math.min(
+              top,
+              baseDiv.offsetTop + baseDiv.offsetHeight - MIN_OFFSET_OVERLAP);
           draggingDiv.style.top = top + 'px';
         } else {
-          var left = Math.max(draggingDiv.offsetLeft,
-                              baseDiv.offsetLeft - draggingDiv.offsetWidth +
-                              MIN_OFFSET_OVERLAP);
-          left = Math.min(left,
-                          baseDiv.offsetLeft + baseDiv.offsetWidth -
-                          MIN_OFFSET_OVERLAP);
+          var left = Math.max(
+              draggingDiv.offsetLeft, baseDiv.offsetLeft -
+                  draggingDiv.offsetWidth + MIN_OFFSET_OVERLAP);
+          left = Math.min(
+              left,
+              baseDiv.offsetLeft + baseDiv.offsetWidth - MIN_OFFSET_OVERLAP);
           draggingDiv.style.left = left + 'px';
         }
         var originalPosition = this.dragging_.display.originalPosition;
         if (originalPosition.x != draggingDiv.offsetLeft ||
             originalPosition.y != draggingDiv.offsetTop)
           this.applyResult_();
         this.dragging_ = null;
       }
       return false;
     },
@@ skipping 36 matching lines @@
       $('display-options-orientation-selection').disabled = true;
       $('selected-display-name').textContent = '';
       var resolution = $('display-options-resolution-selection');
       resolution.appendChild(document.createElement('option'));
       resolution.disabled = true;
     },
 
     /**
      * Updates the description of selected display section for the selected
      * display.
-     * @param {Object} display The selected display object.
+     * @param {options.DisplayInfo} display The selected display object.
      * @private
      */
     updateSelectedDisplaySectionForDisplay_: function(display) {
       var arrow = $('display-configuration-arrow');
       arrow.hidden = false;
       // Adding 1 px to the position to fit the border line and the border in
       // arrow precisely.
       arrow.style.top = $('display-configurations').offsetTop -
           arrow.offsetHeight / 2 + 'px';
       arrow.style.left = display.div.offsetLeft +
@@ skipping 72 matching lines @@
     updateSelectedDisplayDescription_: function() {
       var resolution = $('display-options-resolution-selection');
       resolution.textContent = '';
       var orientation = $('display-options-orientation-selection');
       var orientationOptions = orientation.getElementsByTagName('option');
       for (var i = 0; i < orientationOptions.length; i++)
         orientationOptions[i].selected = false;
 
       if (this.mirroring_) {
         this.updateSelectedDisplaySectionMirroring_();
-      } else if (this.focusedIndex_ == null ||
+      } else if (this.focusedIndex_ == -1 ||
           this.displays_[this.focusedIndex_] == null) {
         this.updateSelectedDisplaySectionNoSelected_();
       } else {
         this.updateSelectedDisplaySectionForDisplay_(
             this.displays_[this.focusedIndex_]);
       }
     },
 
     /**
      * Clears the drawing area for display rectangles.
@@ skipping 156 matching lines @@
       };
 
       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:
+          case options.DisplayLayoutType.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:
+          case options.DisplayLayoutType.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:
+          case options.DisplayLayoutType.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:
+          case options.DisplayLayoutType.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
         };
       }
     },
 
     /**
      * 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 {options.DisplayLayoutType} layout The layout strategy.
      * @param {number} offset The offset of the secondary display.
      * @private
      */
     onDisplayChanged_: function(mode, displays, layout, offset) {
       if (!this.visible)
         return;
 
       var hasExternal = false;
       for (var i = 0; i < displays.length; i++) {
         if (!displays[i].isInternal) {
           hasExternal = true;
           break;
         }
       }
 
       this.layout_ = layout;
 
       var mirroring = mode == options.MultiDisplayMode.MIRRORING;
       var unifiedDesktopEnabled = mode == options.MultiDisplayMode.UNIFIED;
 
       // Focus to the first display next to the primary one when |displays| list
       // is updated.
       if (mirroring) {
-        this.focusedIndex_ = null;
+        this.focusedIndex_ = -1;
       } else if (this.mirroring_ != mirroring ||
                  this.unifiedDesktopEnabled_ != unifiedDesktopEnabled ||
                  this.displays_.length != displays.length) {
         this.focusedIndex_ = 0;
       }
 
       this.mirroring_ = mirroring;
       this.unifiedDesktopEnabled_ = unifiedDesktopEnabled;
       this.displays_ = displays;
 
@@ skipping 28 matching lines @@
       mode, displays, layout, offset) {
     DisplayOptions.getInstance().onDisplayChanged_(
         mode, displays, layout, offset);
   };
 
   // Export
   return {
     DisplayOptions: DisplayOptions
   };
 });