Introduce user customization of external HighDPI mode for 4K monitor.

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 130 matching lines @@
      * prevent unnecessary dragging events happen.  Set to null unless it's
      * during touch events.
      * @private
      */
     lastTouchLocation_: null,
 
     /** @override */
     initializePage: function() {
       OptionsPage.prototype.initializePage.call(this);
 
-      $('display-options-toggle-mirroring').onclick = function() {
+      $('display-options-toggle-mirroring').onclick = (function() {
         this.mirroring_ = !this.mirroring_;
         chrome.send('setMirroring', [this.mirroring_]);
-      }.bind(this);
+      }).bind(this);
 
       var container = $('display-options-displays-view-host');
       container.onmousemove = this.onMouseMove_.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() {
+      $('display-options-set-primary').onclick = (function() {
         chrome.send('setPrimary', [this.displays_[this.focusedIndex_].id]);
-      }.bind(this);
-      $('display-options-resolution-selection').onchange = function(ev) {
+      }).bind(this);
+      $('display-options-resolution-selection').onchange = (function(ev) {
         var display = this.displays_[this.focusedIndex_];
         var resolution = display.resolutions[ev.target.value];
-        if (resolution.scale) {
-          chrome.send('setUIScale', [display.id, resolution.scale]);
-        } else {
-          chrome.send('setResolution',
-                      [display.id, resolution.width, resolution.height]);
-        }
-      }.bind(this);
-      $('display-options-orientation-selection').onchange = function(ev) {
+        chrome.send('setDisplayMode', [display.id, resolution]);
+      }).bind(this);
+      $('display-options-orientation-selection').onchange = (function(ev) {
         chrome.send('setOrientation', [this.displays_[this.focusedIndex_].id,
                                        ev.target.value]);
-      }.bind(this);
-      $('display-options-color-profile-selection').onchange = function(ev) {
+      }).bind(this);
+      $('display-options-color-profile-selection').onchange = (function(ev) {
         chrome.send('setColorProfile', [this.displays_[this.focusedIndex_].id,
                                         ev.target.value]);
-      }.bind(this);
-      $('selected-display-start-calibrating-overscan').onclick = function() {
+      }).bind(this);
+      $('selected-display-start-calibrating-overscan').onclick = (function() {
         // Passes the target display ID. Do not specify it through URL hash,
         // we do not care back/forward.
         var displayOverscan = options.DisplayOverscan.getInstance();
         displayOverscan.setDisplayId(this.displays_[this.focusedIndex_].id);
         OptionsPage.navigateToPage('displayOverscan');
         chrome.send('coreOptionsUserMetricsAction',
                     ['Options_DisplaySetOverscan']);
-      }.bind(this);
+      }).bind(this);
 
       chrome.send('getDisplayInfo');
     },
 
     /** @override */
     didShowPage: function() {
       var optionTitles = document.getElementsByClassName(
           'selected-display-option-title');
       var maxSize = 0;
       for (var i = 0; i < optionTitles.length; i++)
@@ skipping 409 matching lines @@
 
       var resolution = $('display-options-resolution-selection');
       if (display.resolutions.length <= 1) {
         var option = document.createElement('option');
         option.value = 'default';
         option.textContent = display.width + 'x' + display.height;
         option.selected = true;
         resolution.appendChild(option);
         resolution.disabled = true;
       } else {
+        var previousOption;
         for (var i = 0; i < display.resolutions.length; i++) {
           var option = document.createElement('option');
           option.value = i;
           option.textContent = display.resolutions[i].width + 'x' +
               display.resolutions[i].height;
           if (display.resolutions[i].isBest) {
             option.textContent += ' ' +
                 loadTimeData.getString('annotateBest');
           }
+          if (display.resolutions[i].deviceScaleFactor && previousOption &&
+              previousOption.textContent == option.textContent) {
+            option.textContent +=
+                ' (' + display.resolutions[i].deviceScaleFactor + 'x)';
+          }
           option.selected = display.resolutions[i].selected;
           resolution.appendChild(option);
+          previousOption = option;
         }
         resolution.disabled = (display.resolutions.length <= 1);
       }
 
       if (display.availableColorProfiles.length <= 1) {
         $('selected-display-color-profile-row').hidden = true;
       } else {
         $('selected-display-color-profile-row').hidden = false;
         var profiles = $('display-options-color-profile-selection');
         profiles.innerHTML = '';
@@ skipping 233 matching lines @@
       mirroring, displays, layout, offset) {
     DisplayOptions.getInstance().onDisplayChanged_(
         mirroring, displays, layout, offset);
   };
 
   // Export
   return {
     DisplayOptions: DisplayOptions
   };
 });