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

chrome/browser/resources/options2/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.define('options', function() {
   var OptionsPage = options.OptionsPage;
 
   // 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
    * values in ash/monitor/monitor_controller.cc.
    * @enum {number}
    */
   var SecondaryDisplayLayout = {
     TOP: 0,
     RIGHT: 1,
     BOTTOM: 2,
@@ skipping 30 matching lines @@
 
       $('display-options-toggle-mirroring').onclick = (function() {
         this.mirroring_ = !this.mirroring_;
         chrome.send('setMirroring', [this.mirroring_]);
       }).bind(this);
 
       chrome.send('getDisplayInfo');
     },
 
     /**
+     * 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.
      */
     onMouseMove_: function(e) {
       if (!this.dragging_)
         return true;
 
       var index = -1;
       for (var i = 0; i < this.displays_.length; i++) {
@@ skipping 123 matching lines @@
       return false;
     },
 
     /**
      * Mouse up handler for dragging display rectangle.
      * @private
      * @param {Event} e The mouse up event.
      */
     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;
     },
 
     /**
      * Clears the drawing area for display rectangles.
      * @private
      */
     resetDisplaysView_: function() {
       var displays_view_host = $('display-options-displays-view-host');
@@ skipping 69 matching lines @@
         div.className = 'displays-display';
         if (i == 0)
           div.className += ' displays-primary';
         else if (i == this.focused_index_)
           div.className += ' displays-focused';
         div.style.width = display.width * VISUAL_SCALE + 'px';
         div.style.height = display.height * VISUAL_SCALE + 'px';
         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;
         }
 
         this.displays_view_.appendChild(div);
       }
     },
 
     /**
      * Called when the display arrangement has changed.
      * @private
      * @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(
               this.mirroring_ ? 'stopMirroring' : 'startMirroring');
 
       // Focus to the first display next to the primary one when |displays| list
       // is updated.
       if (this.displays_.length != displays.length)
         this.focused_index_ = 1;
 
       this.displays_ = displays;
 
       this.resetDisplaysView_();
       if (this.mirroring_)
         this.layoutMirroringDisplays_();
       else
         this.layoutDisplays_();
     },
   };
 
-  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
   return {
     DisplayOptions: DisplayOptions
   };
 });