Allow offset for secondary display position in chrome://settings/display.

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

Index: chrome/browser/resources/options2/chromeos/display_options.js
diff --git a/chrome/browser/resources/options2/chromeos/display_options.js b/chrome/browser/resources/options2/chromeos/display_options.js
index 7df934f57e0bfe42bb5adc3f2472d010e696067b..c991b7ea60cddc68091f5220eba8bd467b2642ce 100644
--- a/chrome/browser/resources/options2/chromeos/display_options.js
+++ b/chrome/browser/resources/options2/chromeos/display_options.js
@@ -7,6 +7,8 @@ cr.define('options', function() {
 
   // The scale ratio of the display rectangle to its original size.
   /** @const */ var VISUAL_SCALE = 1 / 10;
+  // The number of pixels for sticky dragging.
+  /** @const */ var STICKY_OFFSET = 5;
 
   /**
    * Enumeration of secondary display layout.  The value has to be same as the
@@ -57,6 +59,24 @@ cr.define('options', function() {
     },
 
     /**
+     * Collects the current data and sends it to Chrome.
+     * @private
+     */
+    applyResult_: function() {
+      // Offset is calculated from top or left edge.
+      var primary = this.displays_[0];
+      var secondary = this.displays_[1];
+      var offset = null;
+      if (this.layout_ == SecondaryDisplayLayout.LEFT ||
+          this.layout_ == SecondaryDisplayLayout.RIGHT) {
+        offset = secondary.div.offsetTop - primary.div.offsetTop;
+      } else {
+        offset = secondary.div.offsetLeft - primary.div.offsetLeft;
+      }
+      chrome.send('setDisplayLayout', [this.layout_, offset / VISUAL_SCALE]);
+    },
+
+    /**
      * Mouse move handler for dragging display rectangle.
      * @private
      * @param {Event} e The mouse move event.
@@ -200,8 +220,61 @@ cr.define('options', function() {
      */
     onMouseUp_: function(e) {
       if (this.dragging_) {
+        // Checks the dragging location and moves it back if needed.
+        var primary_div = this.displays_[0].div;
+        var dragging_div = this.dragging_.display.div;
+        if (this.layout_ == SecondaryDisplayLayout.LEFT ||
+            this.layout_ == SecondaryDisplayLayout.RIGHT) {
+          var top_offset = Math.abs(
+              dragging_div.offsetTop - primary_div.offsetTop);
+          var bottom_offset = Math.abs(
+              (dragging_div.offsetTop + dragging_div.offsetHeight) -
+              (primary_div.offsetTop + dragging_div.offsetHeight));
+
+          console.log([top_offset, bottom_offset]);
+          if (top_offset > primary_div.offsetHeight) {
+            // dragging is below of the primary.
+            dragging_div.style.top = primary_div.offsetTop + 'px';
+          } else if (bottom_offset < -primary_div.offsetHeight) {
+            // dragging is over the primary.
+            dragging_div.style.top = primary_div.offsetTop + 'px';
+          } else if (top_offset < STICKY_OFFSET &&
+                     top_offset <= bottom_offset) {
+            // The top edges are very close.
+            dragging_div.style.top = primary_div.offsetTop + 'px';
+          } else if (bottom_offset < STICKY_OFFSET &&
+                     bottom_offset < top_offset) {
+            // The bottom edges are very close.
+            dragging_div.style.top = primary_div.offsetTop +
+                primary_div.offsetHeight - dragging_div.offsetHeight + 'px';
+          }
+        } else {
+          var left_offset = Math.abs(
+              dragging_div.offsetLeft - primary_div.offsetLeft);
+          var right_offset = Math.abs(
+              (dragging_div.offsetLeft + dragging_div.offsetWidth) -
+              (primary_div.offsetLeft + dragging_div.offsetWidth));
+
+          console.log([left_offset, right_offset]);
+          if (left_offset > primary_div.offsetWidth) {
+            // dragging exceeds the right boundary of the primary.
+            dragging_div.style.left = primary_div.offsetLeft + 'px';
+          } else if (right_offset < -primary_div.offsetWidth) {
+            // dragging exceeds the left boundary of the primary.
+            dragging_div.style.left = primary_div.offsetLeft + 'px';
+          } else if (left_offset < STICKY_OFFSET &&
+                     left_offset <= right_offset) {
+            // The left edges are very close.
+            dragging_div.style.left = primary_div.offsetLeft + 'px';
+          } else if (right_offset < STICKY_OFFSET &&
+                     right_offset < left_offset) {
+            // The right edges are very close.
+            dragging_div.style.left = primary_div.offsetLeft +
+                primary_div.offsetWidth - dragging_div.offsetWidth + 'px';
+          }
+        }
         this.dragging_ = null;
-        chrome.send('setDisplayLayout', [this.layout_]);
+        this.applyResult_();
       }
       return false;
     },
@@ -291,22 +364,34 @@ cr.define('options', function() {
         div.style.lineHeight = div.style.height;
         switch (this.layout_) {
         case SecondaryDisplayLayout.RIGHT:
-          display.div.style.top = '0';
+          if (i == 0)
+            display.div.style.top = '0';
+          else
+            display.div.style.top = this.offset_ * VISUAL_SCALE + 'px';
           display.div.style.left = base_point.x + 'px';
           base_point.x += display.width * VISUAL_SCALE;
           break;
         case SecondaryDisplayLayout.LEFT:
-          display.div.style.top = '0';
+          if (i == 0)
+            display.div.style.top = '0';
+          else
+            display.div.style.top = this.offset_ * VISUAL_SCALE + 'px';
           base_point.x -= display.width * VISUAL_SCALE;
           display.div.style.left = base_point.x + 'px';
           break;
         case SecondaryDisplayLayout.TOP:
-          display.div.style.left = '0';
+          if (i == 0)
+            display.div.style.left = '0';
+          else
+            display.div.style.left = this.offset_ * VISUAL_SCALE + 'px';
           base_point.y -= display.height * VISUAL_SCALE;
           display.div.style.top = base_point.y + 'px';
           break;
         case SecondaryDisplayLayout.BOTTOM:
-          display.div.style.left = '0';
+          if (i == 0)
+            display.div.style.left = '0';
+          else
+            display.div.style.left = this.offset_ * VISUAL_SCALE + 'px';
           display.div.style.top = base_point.y + 'px';
           base_point.y += display.height * VISUAL_SCALE;
           break;
@@ -322,10 +407,12 @@ cr.define('options', function() {
      * @param {boolean} mirroring Whether current mode is mirroring or not.
      * @param {Array} displays The list of the display information.
      * @param {SecondaryDisplayLayout} layout The layout strategy.
+     * @param {number} offset The offset of the secondary display.
      */
-    onDisplayChanged_: function(mirroring, displays, layout) {
+    onDisplayChanged_: function(mirroring, displays, layout, offset) {
       this.mirroring_ = mirroring;
       this.layout_ = layout;
+      this.offset_ = offset;
 
       $('display-options-toggle-mirroring').textContent =
           loadTimeData.getString(
@@ -346,8 +433,10 @@ cr.define('options', function() {
     },
   };
 
-  DisplayOptions.setDisplayInfo = function(mirroring, displays, layout) {
-    DisplayOptions.getInstance().onDisplayChanged_(mirroring, displays, layout);
+  DisplayOptions.setDisplayInfo = function(
+      mirroring, displays, layout, offset) {
+    DisplayOptions.getInstance().onDisplayChanged_(
+        mirroring, displays, layout, offset);
   };
 
   // Export