Polish "Displays" Options UI for ChromeOS.

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

Index: chrome/browser/resources/options2/chromeos/display_options.css
diff --git a/chrome/browser/resources/options2/chromeos/display_options.css b/chrome/browser/resources/options2/chromeos/display_options.css
index f6255eb46ff05158f355543c4e7e86f875564124..b0674d828a5414df3c8403a0e5b04346eac6c8a1 100644
--- a/chrome/browser/resources/options2/chromeos/display_options.css
+++ b/chrome/browser/resources/options2/chromeos/display_options.css
@@ -2,33 +2,97 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+#display-options {
+  background-color: #f0f0f0;
+}
+
+#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;
 }
 
 #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.

[James Hawkins, 2012/08/06 16:44:43]

/* First
 * last.
 */

[Jun Mukai, 2012/08/07 00:31:31]

Done.

+   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);

[James Hawkins, 2012/08/06 16:44:43]

Won't we need to rotate by -45deg in RTL then?

[Jun Mukai, 2012/08/07 00:31:31]

I checked with arabic language and working fine.  border-left is left in RTL
too.

   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: #f0f0f0;
+  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);

[James Hawkins, 2012/08/06 16:44:43]

Be consistent and use hex (hex is used in the rest of the file.

[Jun Mukai, 2012/08/07 00:31:31]

Rather changed to use rgb() in the rest of the file.  Our coding style prefers
rgb() and the linter puts warning for it (grey scale seems one exceptional of
rgb() usage).

+  color: rgb(0, 138, 255);
+}
+
+.display-options-single-button-container {
+  margin: 5px 0 5px 0;
+}
+
+.display-options-button {
+  width: 120px;
 }