MD Settings: Display: Add mirroring and other fixes

chrome/browser/resources/settings/device_page/display_layout.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
  * 'display-layout' presents a visual representation of the layout of one or
  * more displays and allows them to be arranged.
  */
 
@@ skipping 10 matching lines @@
     LayoutBehavior,
   ],
 
   properties: {
     /**
      * Array of displays.
      * @type {!Array<!chrome.system.display.DisplayUnitInfo>}
      */
     displays: Array,
 
-    /**
-     * Whether or not mirroring is enabled.
-     * @type {boolean}
-     */
-    mirroring: false,
-
     /** @type {!chrome.system.display.DisplayUnitInfo|undefined} */
     selectedDisplay: Object,
 
     /**
      * The ratio of the display area div (in px) to DisplayUnitInfo.bounds.
      * @type {number}
      */
     visualScale: 1,
   },
 
   /** @private {!{left: number, top: number}} */
   visualOffset_: {left: 0, top: 0},
 
   /** @override */
-  attached: function() {
-    // TODO(stevenjb): Remove retry once fixed:
-    // https://github.com/Polymer/polymer/issues/3629
-    var self = this;
-    var retry = 100;  // ms
-    function tryCalcVisualScale() {
-      if (!self.calculateVisualScale_())
-        setTimeout(tryCalcVisualScale, retry);
-    }
-    tryCalcVisualScale();
-  },
-
-  /** @override */
   detached: function() { this.initializeDrag(false); },
 
   /**
    * Called explicitly when |this.displays| and their associated |this.layouts|
    * have been fetched from chrome.
    * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays
    * @param {!Array<!chrome.system.display.DisplayLayout>} layouts
    */
   updateDisplays: function(displays, layouts) {
     this.displays = displays;
     this.layouts = layouts;
 
-    this.mirroring = displays.length > 0 && !!displays[0].mirroringSourceId;
-
     this.initializeDisplayLayout(displays, layouts);
 
-    this.calculateVisualScale_();
+    var self = this;
+    var retry = 100;  // ms
+    function tryCalcVisualScale() {
+      if (!self.calculateVisualScale_())
+        setTimeout(tryCalcVisualScale, retry);
+    }
+    tryCalcVisualScale();
 
     this.initializeDrag(
         !this.mirroring, this.$.displayArea, this.onDrag_.bind(this));
   },
 
   /**
    * Calculates the visual offset and scale for the display area
    * (i.e. the ratio of the display area div size to the area required to
    * contain the DisplayUnitInfo bounding boxes).
    * @return {boolean} Whether the calculation was successful.
@@ skipping 52 matching lines @@
     // Update the scale which will trigger calls to getDivStyle_.
     this.visualScale = Math.max(MIN_VISUAL_SCALE, scale);
 
     return true;
   },
 
   /**
    * @param {string} id
    * @param {!chrome.system.display.Bounds} displayBounds
    * @param {number} visualScale
+   * @param {boolean=} opt_mirrored
    * @return {string} The style string for the div.
    * @private
    */
-  getDivStyle_: function(id, displayBounds, visualScale) {
+  getDivStyle_: function(id, displayBounds, visualScale, opt_mirrored) {
     // This matches the size of the box-shadow or border in CSS.
-    /** @const {number} */ var BORDER = 2;
-    var bounds = this.getCalculatedDisplayBounds(id);
+    /** @const {number} */ var BORDER = opt_mirrored ? 1 : 2;
+    /** @const {number} */ var OFFSET = opt_mirrored ? -4 : 0;
+    var bounds = this.getCalculatedDisplayBounds(id, false);
+    if (!bounds)
+      return '';
     var height = Math.round(bounds.height * this.visualScale) - BORDER * 2;
     var width = Math.round(bounds.width * this.visualScale) - BORDER * 2;
-    var left =
+    var left = OFFSET +
         Math.round(this.visualOffset_.left + (bounds.left * this.visualScale));
-    var top =
+    var top = OFFSET +
         Math.round(this.visualOffset_.top + (bounds.top * this.visualScale));
     return `height: ${height}px; width: ${width}px;` +
         ` left: ${left}px; top: ${top}px`;
   },
 
   /**
+   * @param {string} id
+   * @param {!chrome.system.display.Bounds} displayBounds
+   * @param {number} visualScale
+   * @return {string} The style string for the mirror div.
+   * @private
+   */
+  getMirrorDivStyle_: function(id, displayBounds, visualScale) {
+    return this.getDivStyle_(id, displayBounds, visualScale, true);
+  },
+
+  /**
    * @param {!chrome.system.display.DisplayUnitInfo} display
    * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay
    * @return {boolean}
    * @private
    */
   isSelected_: function(display, selectedDisplay) {
     return display.id == selectedDisplay.id;
   },
 
   /**
@@ skipping 36 matching lines @@
     var top =
         this.visualOffset_.top + Math.round(newBounds.top * this.visualScale);
     var div = this.$$('#_' + id);
     div.style.left = '' + left + 'px';
     div.style.top = '' + top + 'px';
   },
 
 });
 
 })();