Polish UX of chrome://settings/display

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.define('options', function() {
   var OptionsPage = options.OptionsPage;
 
   // The scale ratio of the display rectangle to its original size.
   /** @const */ var VISUAL_SCALE = 1 / 10;
 
@@ skipping 406 matching lines @@
      */
     primaryDisplay_: null,
 
     /**
      * The secondary display.
      * @private
      */
     secondaryDisplay_: null,
 
     /**
-     * The flag to check if the current options status should be sent to the
-     * system or not (unchanged).
-     * @private
-     */
-    dirty_: false,
-
-    /**
      * The container div element which contains all of the display rectangles.
      * @private
      */
     displaysView_: null,
 
     /**
      * The scale factor of the actual display size to the drawn display
      * rectangle size.
      * @private
      */
@@ skipping 13 matching lines @@
     initializePage: function() {
       OptionsPage.prototype.initializePage.call(this);
 
       $('display-options-toggle-mirroring').onclick = (function() {
         this.mirroring_ = !this.mirroring_;
         chrome.send('setMirroring', [this.mirroring_]);
       }).bind(this);
 
       var container = $('display-options-displays-view-host');
       container.onmousemove = this.onMouseMove_.bind(this);
-      container.onmouseup = this.endDragging_.bind(this);
+      window.addEventListener('mouseup', this.endDragging_.bind(this), true);
       container.ontouchmove = this.onTouchMove_.bind(this);
       container.ontouchend = this.endDragging_.bind(this);
 
       $('display-options-set-primary').onclick = (function() {
         chrome.send('setPrimary', [this.displays_[this.focusedIndex_].id]);
       }).bind(this);
 
       $('selected-display-start-calibrating-overscan').onclick = (function() {
         this.overscanCalibrator_ = new DisplayOverscanCalibrator(
             this.displays_[this.focusedIndex_]);
@@ skipping 99 matching lines @@
       var secondary = this.secondaryDisplay_;
       var offset;
       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 / this.visualScale_]);
-      this.dirty_ = false;
     },
 
     /**
      * Snaps the region [point, width] to [basePoint, baseWidth] if
      * the [point, width] is close enough to the base's edge.
      * @param {number} point The starting point of the region.
      * @param {number} width The width of the region.
      * @param {number} basePoint The starting point of the base region.
      * @param {number} baseWidth The width of the base region.
      * @return {number} The moved point.  Returns point itself if it doesn't
@@ skipping 142 matching lines @@
             baseDiv.offsetTop - draggingDiv.offsetHeight + 'px';
         draggingDiv.style.left = newPosition.x + 'px';
         break;
       case SecondaryDisplayLayout.BOTTOM:
         draggingDiv.style.top =
             baseDiv.offsetTop + baseDiv.offsetHeight + 'px';
         draggingDiv.style.left = newPosition.x + 'px';
         break;
       }
 
-      this.dirty_ = true;
       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.
      * @private
      */
@@ skipping 56 matching lines @@
           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);
           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;
-        if (this.dirty_)
-          this.applyResult_();
       }
       this.updateSelectedDisplayDescription_();
       return false;
     },
 
     /**
      * Updates the description of the selected display section.
      * @private
      */
     updateSelectedDisplayDescription_: function() {
       if (this.focusedIndex_ == null ||
           this.displays_[this.focusedIndex_] == null) {
         $('selected-display-data-container').hidden = true;
         $('display-configuration-arrow').hidden = true;
-        $('display-options-set-primary').disabled = true;
+        $('display-options-set-primary').hidden = true;
         return;
       }
 
       $('selected-display-data-container').hidden = false;
       var display = this.displays_[this.focusedIndex_];
       var nameElement = $('selected-display-name');
       while (nameElement.childNodes.length > 0)
         nameElement.removeChild(nameElement.firstChild);
       nameElement.appendChild(document.createTextNode(display.name));
 
       var resolutionData = display.width + 'x' + display.height;
       var resolutionElement = $('selected-display-resolution');
       while (resolutionElement.childNodes.length > 0)
         resolutionElement.removeChild(resolutionElement.firstChild);
       resolutionElement.appendChild(document.createTextNode(resolutionData));
 
       if (this.overscanCalibrator_) {
         $('start-calibrating-overscan-control').hidden = true;
         $('end-calibrating-overscan-control').hidden = false;
       } else {
         $('start-calibrating-overscan-control').hidden = false;
         $('end-calibrating-overscan-control').hidden = true;
       }
 
       var arrow = $('display-configuration-arrow');
       arrow.hidden = false;
-      arrow.style.top =
-          $('display-configurations').offsetTop - arrow.offsetHeight / 2 + 'px';
+      // 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 + 1 + 'px';
       arrow.style.left = display.div.offsetLeft + display.div.offsetWidth / 2 -
           arrow.offsetWidth / 2 + 'px';
 
-      $('display-options-set-primary').disabled =
+      $('display-options-set-primary').hidden =
           this.displays_[this.focusedIndex_].isPrimary;
     },
 
     /**
      * Clears the drawing area for display rectangles.
      * @private
      */
     resetDisplaysView_: function() {
       var displaysViewHost = $('display-options-displays-view-host');
       displaysViewHost.removeChild(displaysViewHost.firstChild);
       this.displaysView_ = document.createElement('div');
       this.displaysView_.id = 'display-options-displays-view';
       displaysViewHost.appendChild(this.displaysView_);
     },
 
     /**
      * Resize the specified display rectangle to keep the change of
      * the border width.
      * @param {Object} display The display object.
      * @param {number} index The index of the display.
      * @private
      */
     resizeDisplayRectangle_: function(display, index) {
       var borderWidth = (index == this.focusedIndex_) ?
           FOCUSED_BORDER_WIDTH_PX : NORMAL_BORDER_WIDTH_PX;
       display.div.style.width =
           display.width * this.visualScale_ - borderWidth * 2 + 'px';
-      display.div.style.height =
-          display.height * this.visualScale_ - borderWidth * 2 + 'px';
+      var newHeight = display.height * this.visualScale_ - borderWidth * 2;
+      display.div.style.height = newHeight + 'px';
+      display.nameContainer.style.marginTop =
+            (newHeight - display.nameContainer.offsetHeight) / 2 + 'px';
       if (display.isPrimary) {
         var launcher = display.div.firstChild;
         if (launcher && launcher.id == 'display-launcher') {
           launcher.style.width = display.div.style.width;
         }
       }
     },
 
     /**
      * Lays out the display rectangles for mirroring.
      * @private
      */
     layoutMirroringDisplays_: function() {
-      // Offset pixels for secondary display rectangles.
-      /** @const */ var MIRRORING_OFFSET_PIXELS = 2;
+      // Offset pixels for secondary display rectangles. The offset includes the
+      // border width.
+      /** @const */ var MIRRORING_OFFSET_PIXELS = 3;
       // Always show two displays because there must be two displays when
       // the display_options is enabled.  Don't rely on displays_.length because
       // there is only one display from chrome's perspective in mirror mode.
       /** @const */ var MIN_NUM_DISPLAYS = 2;
       /** @const */ var MIRRORING_VERTICAL_MARGIN = 20;
 
       // The width/height should be same as the first display:
       var width = this.displays_[0].width * this.visualScale_;
       var height = this.displays_[0].height * this.visualScale_;
 
@@ skipping 80 matching lines @@
         if (display.isPrimary) {
           // Put a grey rectangle to the primary display to denote launcher
           // below.
           var launcher = document.createElement('div');
           launcher.id = 'display-launcher';
           div.appendChild(launcher);
           this.primaryDisplay_ = display;
         } else {
           this.secondaryDisplay_ = display;
         }
+        var displayNameContainer = document.createElement('div');
+        displayNameContainer.textContent = display.name;
+        div.appendChild(displayNameContainer);
+        display.nameContainer = displayNameContainer;
         this.resizeDisplayRectangle_(display, i);
         div.style.left = display.x * this.visualScale_ + offset.x + 'px';
         div.style.top = display.y * this.visualScale_ + offset.y + 'px';
-        var displayNameContainer = document.createElement('div');
-        displayNameContainer.textContent = display.name;
-        div.appendChild(displayNameContainer);
 
         div.onmousedown = this.onMouseDown_.bind(this);
         div.ontouchstart = this.onTouchStart_.bind(this);
 
         this.displaysView_.appendChild(div);
 
         // Set the margin top to place the display name at the middle of the
         // rectangle.  Note that this has to be done after it's added into the
         // |displaysView_|.  Otherwise its offsetHeight is yet 0.
         displayNameContainer.style.marginTop =
             (div.offsetHeight - displayNameContainer.offsetHeight) / 2 + 'px';
+        display.originalPosition = {x: div.offsetLeft, y: div.offsetTop};
       }
     },
 
     /**
      * Called when the display arrangement has changed.
      * @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.
      * @private
@@ skipping 36 matching lines @@
       mirroring, displays, layout, offset) {
     DisplayOptions.getInstance().onDisplayChanged_(
         mirroring, displays, layout, offset);
   };
 
   // Export
   return {
     DisplayOptions: DisplayOptions
   };
 });