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

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

Index: chrome/browser/resources/options/chromeos/display_options.js
diff --git a/chrome/browser/resources/options/chromeos/display_options.js b/chrome/browser/resources/options/chromeos/display_options.js
index e0285c26fd45887e75bd23ca0ebe7914fb277a9e..2dfd7f5d6a0dda852f328463ed0e4d741dc11012 100644
--- a/chrome/browser/resources/options/chromeos/display_options.js
+++ b/chrome/browser/resources/options/chromeos/display_options.js
@@ -150,10 +150,10 @@ cr.define('options', function() {
     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);
@@ -161,28 +161,35 @@ cr.define('options', function() {
       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 if (resolution.deviceScaleFactor) {
+          chrome.send('setResolution',
+                      [display.id,
+                       resolution.originalWidth,
+                       resolution.originalHeight]);
+          chrome.send('setDeviceScaleFactor',
+                      [display.id, resolution.deviceScaleFactor]);
         } else {
           chrome.send('setResolution',
                       [display.id, resolution.width, resolution.height]);
         }

[stevenjb, 2014/07/28 21:44:37]

I'm not sure if this is what oshima meant, but it would be nice if we used a
single chrome method here and passed an object/dictionary to it so that the
controller logic can be moved there.

[Jun Mukai, 2014/07/28 21:51:00]

That is same as my understanding.

-      }.bind(this);
-      $('display-options-orientation-selection').onchange = function(ev) {
+      }).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();
@@ -190,7 +197,7 @@ cr.define('options', function() {
         OptionsPage.navigateToPage('displayOverscan');
         chrome.send('coreOptionsUserMetricsAction',
                     ['Options_DisplaySetOverscan']);
-      }.bind(this);
+      }).bind(this);
 
       chrome.send('getDisplayInfo');
     },
@@ -620,6 +627,7 @@ cr.define('options', function() {
         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;
@@ -629,8 +637,14 @@ cr.define('options', function() {
             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);
       }