Polish "Displays" Options UI for ChromeOS.

This follows the mock image of crbug.com/130385 comment 26.  This CL contains following changes.
- background color / line color
- an arrow from below section
- display names
- display name / resolution view
- "Apply" buttons
- centering the display rectangles in the area

BUG=130385


Review URL: https://chromiumcodereview.appspot.com/10843066

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@150727 0039d316-1c4b-4281-b951-d872f2087c98

chrome/app/generated_resources.grd

@@ -13986,13 +13986,19 @@ Press any key to continue exploring.
         Enable virtual keyboard
       </message>
       <message name="IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_TAB_TITLE" desc="Title for the display settings tab.">
-	Manage displays
+        Manage displays
       </message>
       <message name="IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_START_MIRRORING" desc="Button label to start display mirroring.">
-	Start mirroring
+        Start mirroring
       </message>
       <message name="IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_STOP_MIRRORING" desc="Button label to stop display mirroring.">
-	Stop mirroring
+        Stop mirroring
+      </message>
+      <message name="IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_APPLY_RESULT" desc="Button label to apply the current settings.">
+        Apply
+      </message>
+      <message name="IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_RESOLUTION" desc="Label to describe the resolution of the currently selected display.">
+        Resolution:
       </message>
       <message name="IDS_OPTIONS_SETTINGS_KEYBOARD_LAYOUT_TEXT" desc="In the settings tab, the text of the keyboard layout label.">
         Keyboard layout:

chrome/browser/resources/options2/chromeos/display_options.css

@@ -2,33 +2,102 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+#display-options {
+  background-color: rgb(240, 240, 240);
+}
+
+#display-options-content-area {
+  padding: 0;
+}
+
 #display-options-displays-view-host {
-  padding: 20px;
+  padding: 20px 0 20px 0;
 }
 
 #display-options-displays-view {
-  height: 300px;
   position: relative;
+  width: 100%;
+}
+
+#display-options-displays-view-mirroring {
+  margin: 20px 0 20px 0;
 }
 
 #display-configurations {
-  border-top: 1px solid blue;
-  padding-top: 20px;
-  text-align: right;
+  background-color: white;
+  border-top: 1px solid lightgrey;
+  height: 65px;
+  padding: 15px;
 }
 
-.displays-display {
+/* The arrow at the border #display-configurations to point the focused display.
+ * This is achieved by a square rotated by 45-deg, and it has border at the
+ * upper-half, which were left/top before the rotation. */
+#display-configuration-arrow {
+  -webkit-transform: rotate(45deg);
   background-color: white;
-  border: dashed 1px;
+  border-left: 1px solid lightgrey;
+  border-top: 1px solid lightgrey;
+  height: 20px;
+  position: absolute;
+  width: 20px;
+  z-index: 1;
+}
+
+#display-options-buttons-container {
+  float: right;
+  z-index: 2;
+}
+
+html[dir=rtl] #display-options-buttons-container {
+  float: left;
+}
+
+
+#selected-display-data-container {
+  float: left;
+  line-height: 200%;
+  z-index: 2;
+}
+
+html[dir=rtl] #selected-display-data-container {
+  float: right;
+}
+
+#selected-display-name {
+  font-weight: bold;
+}
+
+#display-launcher {
+  background-color: lightgrey;
+  bottom: 0;
+  height: 10px;
+  position: absolute;
+}
+
+.displays-display {
+  background: rgb(240, 240, 240);
+  border: solid 1px;
+  font-weight: bold;
   position: absolute;
   text-align: center;
   vertical-align: middle;
+  z-index: 2;
 }
 
-.displays-primary {
-  border: solid 1px blue;
+.display-mirrored {
+  border: dashed 1px;
 }
 
 .displays-focused {
-  border: solid 2px;
+  border: solid 2px rgb(0, 138, 255);
+  color: rgb(0, 138, 255);
+}
+
+.display-options-single-button-container {
+  margin: 5px 0 5px 0;
+}
+
+.display-options-button {
+  width: 120px;
 }

chrome/browser/resources/options2/chromeos/display_options.html

 <div id="display-options" class="page" hidden>
   <div class="close-button"></div>
   <h1 i18n-content="displayOptionsPage"></h1>
-  <div class="content-area">
+  <div class="content-area" id="display-options-content-area">
     <div id="display-options-displays-view-host">
     </div>
     <div id="display-configurations">
-      <button id="display-options-toggle-mirroring"
-          i18n-content="startMirroring">
-      </button>
+      <div id="selected-display-data-container">
+        <div id="selected-display-name"></div>
+        <div>
+          <span i18n-content="resolution"></span>
+          <span id="selected-display-resolution"></span>
+        </div>
+      </div>
+      <div id="display-options-buttons-container">
+        <div class="display-options-single-button-container">
+          <button id="display-options-toggle-mirroring"
+              class="display-options-button" i18n-content="startMirroring">
+          </button>
+        </div>
+        <div class="display-options-single-button-container">
+          <button id="display-options-apply"
+              class="display-options-button" i18n-content="applyResult">
+          </button>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="action-area">
-    <div class="button-strip">
-      <button id="display-options-confirm" i18n-content="ok"></button>
+    <!-- The arrow of display-configuration is achieved by a div
+         rotated by 45deg. -->
+    <div id="display-configuration-arrow">
     </div>
   </div>
 </div>

chrome/browser/ui/webui/options2/chromeos/display_options_handler.cc

@@ -12,6 +12,7 @@
 #include "base/bind.h"
 #include "base/json/json_value_converter.h"
 #include "base/logging.h"
+#include "base/stringprintf.h"
 #include "base/values.h"
 #include "chrome/browser/prefs/pref_service.h"
 #include "chrome/browser/profiles/profile.h"
@@ -47,6 +48,10 @@ void DisplayOptionsHandler::GetLocalizedValues(
       IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_START_MIRRORING));
   localized_strings->SetString("stopMirroring", l10n_util::GetStringUTF16(
       IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_STOP_MIRRORING));
+  localized_strings->SetString("applyResult", l10n_util::GetStringUTF16(
+      IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_APPLY_RESULT));
+  localized_strings->SetString("resolution", l10n_util::GetStringUTF16(
+      IDS_OPTIONS_SETTINGS_DISPLAY_OPTIONS_RESOLUTION));
 }
 
 void DisplayOptionsHandler::InitializePage() {
@@ -114,6 +119,11 @@ void DisplayOptionsHandler::SendDisplayInfo() {
     js_display->SetDouble("y", bounds.y());
     js_display->SetDouble("width", bounds.width());
     js_display->SetDouble("height", bounds.height());
+    // Do not have good data for displays such like vendor/model names.
+    // So here just uses 'Display 1' or 'Display 2' for their names.
+    // TODO(mukai,oshima): support vendor/model names and use it.
+    js_display->SetString("name", base::StringPrintf(
+        "Display %d", static_cast<int>(i) + 1));
     displays.Set(i, js_display);
   }