[cros] Network dropdown button in WebUI.

chrome/browser/resources/chromeos/login/oobe.css

Index: chrome/browser/resources/chromeos/login/oobe.css
diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css
index 2d3bd7f17995dee7ebe900955435c9ca33755389..66c03475821a5d7d2cb44cfa26ae0ba44fe2c7c0 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -56,6 +56,7 @@ hr.bottomshadow {
   border-bottom: 1px solid rgba(0,0,0,0.5);
   height: 2px;
   opacity: 0.3;
+  z-index: 0;

[Nikita (slow), 2011/07/29 15:52:11]

This one doesn't help in fact.
I didn't figure out why this hr is still visible through dropdown div elements
while other controls like Continue button is not.
It's not like they don't have background set.

[xiyuan, 2011/07/29 21:39:33]

You might want to try z-index:1 for the dropdown div.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

 }
 
 #header {
@@ -502,3 +503,89 @@ body.login-display #header {
 body.login-display #footer {
   visibility: hidden;
 }
+
+.dropdown-title {
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 2px;
+  -webkit-user-select: none;
+  background-image: url("../../shared/images/select.png"),

[xiyuan, 2011/07/29 21:39:33]

nit: let's use single quote to be consistent in this file.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+                    -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  background-position: center right;
+  background-repeat: no-repeat;
+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  height: 24px;
+  margin: 0;
+  overflow: hidden;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  text-overflow: ellipsis;
+  text-align: left;  
+  text-indent: 4px;
+  white-space: nowrap;
+  width: 250px;
+}
+
+.dropdown-title:hover {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url("../../shared/images/select.png"),
+                    -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  color: #333;  
+  background-position: center right;
+  background-repeat: no-repeat;
+}
+
+.dropdown-title:active {
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url("../../shared/images/select.png"),
+                    -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #444;
+}
+
+.dropdown-container {
+  background: #f7f7f7;
+  border: 1px solid #7c91bf;
+  overflow: hidden;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  position: relative;
+  top: 100%;
+  width: 248px;
+}
+
+.dropdown-item-container {
+  display: -webkit-box;
+  height: 24px;
+  padding-left: 5px;
+}
+
+.dropdown-item-container:hover {
+  background: #dce4fa;
+}
+
+.dropdown-image {
+  width: 24px;
+}
+
+.dropdown-item {
+  cursor: default;
+  color: #555;
+  padding-top: 4px;
+  white-space: nowrap;
+}
+
+.dropdown-divider {
+  height: 4px;
+}
+
+.dropdown-divider hr {
+  -webkit-margin-before: 4px;
+  -webkit-margin-after: 4px;
+}
+
+.dropdown-item.disabled-item {
+  color: graytext;
+}