Redesign display options for ChromeOS.

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 052a38c5bad22238bfbb7782cf6429ef075b41f2..2fe9a11d04e77b662abb0bf64f54bad7efbda2e4 100644
--- a/chrome/browser/resources/options/chromeos/display_options.js
+++ b/chrome/browser/resources/options/chromeos/display_options.js
@@ -169,7 +169,14 @@ cr.define('options', function() {
       $('display-options-set-primary').onclick = (function() {
         chrome.send('setPrimary', [this.displays_[this.focusedIndex_].id]);
       }).bind(this);
-
+      $('display-options-resolution-selection').onchange = (function(ev) {
+        chrome.send('setUIScale', [this.displays_[this.focusedIndex_].id,
+                                   ev.target.value]);
+      }).bind(this);
+      $('display-options-orientation-selection').onchange = (function(ev) {
+        chrome.send('setOrientation', [this.displays_[this.focusedIndex_].id,
+                                       ev.target.value]);
+      }).bind(this);

[xiyuan, 2013/05/10 22:29:05]

nit: wrapping () around function is not necessary. That's what I learned from
dbeam's review. :)

[Jun Mukai, 2013/05/10 23:00:06]

Done.

       $('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.
@@ -465,13 +472,15 @@ cr.define('options', function() {
           continue;
 
         display.div.classList.add('displays-focused');
-        this.dragging_ = {
-          display: display,
-          originalLocation: {
-            x: display.div.offsetLeft, y: display.div.offsetTop
-          },
-          eventLocation: eventLocation
-        };
+        if (this.displays_.length > 1) {
+          this.dragging_ = {
+            display: display,
+            originalLocation: {
+              x: display.div.offsetLeft, y: display.div.offsetTop
+            },
+            eventLocation: eventLocation
+          };
+        }
       }
 
       this.updateSelectedDisplayDescription_();
@@ -523,50 +532,77 @@ cr.define('options', function() {
      * @private
      */
     updateSelectedDisplayDescription_: function() {
+      var resolution = $('display-options-resolution-selection');
+      resolution.innerHTML = '';

[xiyuan, 2013/05/10 22:29:05]

nit: resolution.textContent = '';

Avoid using innerHTML in general.

[Jun Mukai, 2013/05/10 23:00:06]

Done.

+      var orientation = $('display-options-orientation-selection');
+      var orientationOptions = orientation.getElementsByTagName('option');
+      for (var i = 0; i < orientationOptions.length; i++) {
+        orientationOptions.selected = false;
+      }
+
       if (this.mirroring_) {
         $('display-configuration-arrow').hidden = true;
-        $('display-options-set-primary').hidden = true;
-        $('display-options-toggle-mirroring').hidden = false;
-        $('selected-display-data-container').hidden = false;
+        $('display-options-set-primary').disabled = true;
+        $('display-options-toggle-mirroring').disabled = false;
+        $('selected-display-start-calibrating-overscan').disabled = true;
+        orientation.disabled = true;
         var display = this.displays_[0];
-        $('selected-display-name').textContent = '';
-        $('selected-display-resolution').textContent =
-            display.width + 'x' + display.height;
-        return;
-      }
-
-      if (this.focusedIndex_ == null ||
+        $('selected-display-name').textContent =
+            loadTimeData.getString('mirroringDisplay');
+        resolution.appendChild(document.createElement('option'));
+        resolution.disabled = true;
+      } else if (this.focusedIndex_ == null ||
           this.displays_[this.focusedIndex_] == null) {
-        $('selected-display-data-container').hidden = true;
         $('display-configuration-arrow').hidden = true;
-        $('display-options-set-primary').hidden = true;
-        $('display-options-toggle-mirroring').hidden = true;
-        return;
+        $('display-options-set-primary').disabled = true;
+        $('display-options-toggle-mirroring').disabled = true;
+        $('selected-display-start-calibrating-overscan').disabled = true;
+        orientation.disabled = true;
+        $('selected-display-name').textContent = '';
+        resolution.appendChild(document.createElement('option'));
+        resolution.disabled = true;
+      } else {
+        var display = this.displays_[this.focusedIndex_];
+
+        var arrow = $('display-configuration-arrow');
+        arrow.hidden = false;
+        // 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 + 'px';
+        arrow.style.left = display.div.offsetLeft +
+            display.div.offsetWidth / 2 - arrow.offsetWidth / 2 + 'px';
+
+        $('display-options-set-primary').disabled = display.isPrimary;
+        $('display-options-toggle-mirroring').disabled =
+            (this.displays_.length <= 1);
+        $('selected-display-start-calibrating-overscan').disabled =
+            display.isInternal;
+
+        orientation.disabled = false;
+        orientationOptions[display.orientation].selected = true;
+
+        $('selected-display-name').textContent = display.name;
+
+        if (display.ui_scales.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 {
+          for (var i = 0; i < display.ui_scales.length; i++) {
+            var option = document.createElement('option');
+            option.value = display.ui_scales[i].scale;
+            option.textContent =
+                display.ui_scales[i].width + 'x' + display.ui_scales[i].height;
+            option.selected = display.ui_scales[i].selected;
+            resolution.appendChild(option);
+          }
+          resolution.disabled = !display.isInternal;
+        }
       }
-
-      $('selected-display-data-container').hidden = false;
-      var display = this.displays_[this.focusedIndex_];
-      var nameElement = $('selected-display-name');
-      nameElement.textContent = display.name;
-
-      var resolutionElement = $('selected-display-resolution');
-      resolutionElement.textContent = display.width + 'x' + display.height;
-
-      $('start-calibrating-overscan-control').hidden = display.isInternal;
-
-      var arrow = $('display-configuration-arrow');
-      arrow.hidden = false;
-      // 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').hidden =
-          this.displays_[this.focusedIndex_].isPrimary;
-      $('display-options-toggle-mirroring').hidden =
-          (this.displays_.length <= 1 && !this.mirroring_);
     },
 
     /**
@@ -743,10 +779,6 @@ cr.define('options', function() {
           break;
         }
       }
-      if (!hasExternal && !mirroring) {
-        OptionsPage.showDefaultPage();
-        return;
-      }
 
       this.mirroring_ = mirroring;
       this.layout_ = layout;