MD Settings: Display: Add mirroring and other fixes

chrome/browser/resources/settings/device_page/display_layout.js

Index: chrome/browser/resources/settings/device_page/display_layout.js
diff --git a/chrome/browser/resources/settings/device_page/display_layout.js b/chrome/browser/resources/settings/device_page/display_layout.js
index c37f9cb548a7da77d73d6f00505fe7af17e04b15..ebdc1aeb14b10a979319d71fbed11f4bbd30dea8 100644
--- a/chrome/browser/resources/settings/device_page/display_layout.js
+++ b/chrome/browser/resources/settings/device_page/display_layout.js
@@ -28,12 +28,6 @@ Polymer({
      */
     displays: Array,
 
-    /**
-     * Whether or not mirroring is enabled.
-     * @type {boolean}
-     */
-    mirroring: false,
-
     /** @type {!chrome.system.display.DisplayUnitInfo|undefined} */
     selectedDisplay: Object,
 
@@ -48,19 +42,6 @@ Polymer({
   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); },
 
   /**
@@ -73,11 +54,15 @@ Polymer({
     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() {

[michaelpg, 2016/07/11 13:37:55]

var interval = setInterval(function() {
  if (self.calculateVisualScale_())
    clearInterval(interval);
}, retry);

[stevenjb, 2016/07/11 19:45:35]

The problem with setInterval is that it delays before the first call and I want
the initial call to occur immediately.

+      if (!self.calculateVisualScale_())
+        setTimeout(tryCalcVisualScale, retry);
+    }
+    tryCalcVisualScale();
 
     this.initializeDrag(
         !this.mirroring, this.$.displayArea, this.onDrag_.bind(this));
@@ -156,7 +141,9 @@ Polymer({
   getDivStyle_: function(id, displayBounds, visualScale) {
     // This matches the size of the box-shadow or border in CSS.
     /** @const {number} */ var BORDER = 2;
-    var bounds = this.getCalculatedDisplayBounds(id);
+    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 =
@@ -168,6 +155,30 @@ Polymer({
   },
 
   /**
+   * @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) {
+    // This matches the size of the mirrored border in CSS.
+    /** @const {number} */ var BORDER = 1;
+    /** @const {number} */ var OFFSET = -4;
+    var bounds = this.getCalculatedDisplayBounds(id, false);

[michaelpg, 2016/07/11 13:37:55]

can you factor out the majority of this function and the above function? looks
like the only difference is the values of BORDER and OFFSET

[stevenjb, 2016/07/11 19:45:35]

Done.

+    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 = OFFSET +
+        Math.round(this.visualOffset_.left + (bounds.left * this.visualScale));
+    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 {!chrome.system.display.DisplayUnitInfo} display
    * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay
    * @return {boolean}