DOMUI: Polish common HTML controls to match the rest of the DOMUI pages.

chrome/browser/resources/options/options_page.css

Index: chrome/browser/resources/options/options_page.css
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index e2efea1c7bd23e5d957b8a46793157c128cc1c23..573f9d76aae1d4a8b11e14adb0663fb8a40b3f86 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -43,21 +43,30 @@ body {
 }
 
 .close-subpage {
+  -webkit-box-shadow: none;
   background-color: transparent;
   background-image: url('chrome://theme/IDR_CLOSE_BAR');
+  background-repeat: no-repeat;
   border: none;
+  height: 16px;
+  min-width: 0;
   position: relative;
   top: 12px;
-  height: 16px;
   width: 16px;
 }
 
 .close-subpage:hover {
+  -webkit-box-shadow: none;
+  background-color: transparent;
   background-image: url('chrome://theme/IDR_CLOSE_BAR_H');
+  background-repeat: no-repeat;
 }
 
 .close-subpage:active {
+  -webkit-box-shadow: none;
+  background-color: transparent;
   background-image: url('chrome://theme/IDR_CLOSE_BAR_P');
+  background-repeat: no-repeat;
 }
 
 html[dir='ltr'] .close-subpage {
@@ -526,11 +535,93 @@ html[enable-cloud-print-proxy=true] #cloudPrintProxyManageButton {
  display: none;
 }
 
+/* UI Controls */
+
+input:focus,
+select:focus {
+  outline-color: rgba(0, 128, 256, 0.5);
+}
+
+/* TEXT */
+input[type='text'] {
+  -webkit-border-radius: 2px;
+  border: 1px solid #aaa;
+  font-size: inherit;
+  padding: 3px;
+}
+
+/* BUTTON */
+button,
+input[type='submit'] {
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(0.4, #f4f4f4), color-stop(1, #e5e5e5));

[arv (Not doing code reviews), 2011/01/18 18:49:25]

-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5)

[arv (Not doing code reviews), 2011/01/18 18:52:51]

I have a tool for this. 

http://www.corp.google.com/~arv/no_crawl/webkit-gradient-parse/test.html

It does not handle all gradients but it has helped me a lot already.

[James Hawkins, 2011/01/19 02:02:23]

Awesome, that's really helpful.

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  margin-bottom: 0px;
+  min-width: 4em;
+  padding: 3px 12px 3px 12px;
+}
+
+button:hover,
+input[type='submit']:hover {
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: #ebebeb -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.4, #f8f8f8), color-stop(1, #e9e9e9));

[arv (Not doing code reviews), 2011/01/18 18:49:25]

-webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9)

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  border-color: #999;
+  color: #333;
+}
+
+button:active,
+input[type='submit']:active {
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: #ebebeb -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4f4f4), color-stop(0.4, #efefef), color-stop(1, #dcdcdc));

[arv (Not doing code reviews), 2011/01/18 18:49:25]

-webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc)

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  color: #444;
+}
+
+/* SELECT */
+select {
+  -webkit-appearance: button;
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5MDMwMzEzMUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5MDMwMzE0MUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDkwMzAzMTExRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDkwMzAzMTIxRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pY8xsAAAAbUlEQVR42mL8//8/AzmAEYijgJgHj5ovQMOXYYgmAgEzM/M3IPM/OgaJg+RBrkLHIEJhwYIFC9nY2H4iawLxQeIgeVwaMTQT0oSsEa6Zj4/vCyFN6BrBmt++fdtESBMIM2KJDlYg/k0oOgACDABJirkKokz/DAAAAABJRU5ErkJggg=="), -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(0.4, #f4f4f4), color-stop(1, #e5e5e5));

[arv (Not doing code reviews), 2011/01/18 18:49:25]

-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5)

[arv (Not doing code reviews), 2011/01/18 18:49:25]

I would prefer if we could check in these images

[James Hawkins, 2011/01/19 02:02:23]

Done.

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  background-position: center right;

[arv (Not doing code reviews), 2011/01/18 18:49:25]

This needs RTL support

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  background-repeat: no-repeat;
+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  margin-bottom: 0px;
+  overflow: hidden;
+  padding: 2px 20px 2px 3px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+

[arv (Not doing code reviews), 2011/01/18 18:49:25]

You need to provide button:focus and button:disabled as well.

[James Hawkins, 2011/01/19 02:02:23]

Done.

+select:hover {
+  -webkit-border-radius: 2px;

[arv (Not doing code reviews), 2011/01/18 18:49:25]

You do not need to repeat this. The "select" rule is already providing this.

Just remove all the duplicates from the :hover rules

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5MDMwMzEzMUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5MDMwMzE0MUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDkwMzAzMTExRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDkwMzAzMTIxRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pY8xsAAAAbUlEQVR42mL8//8/AzmAEYijgJgHj5ovQMOXYYgmAgEzM/M3IPM/OgaJg+RBrkLHIEJhwYIFC9nY2H4iawLxQeIgeVwaMTQT0oSsEa6Zj4/vCyFN6BrBmt++fdtESBMIM2KJDlYg/k0oOgACDABJirkKokz/DAAAAABJRU5ErkJggg=="), -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.4, #f8f8f8), color-stop(1, #e9e9e9));

[arv (Not doing code reviews), 2011/01/18 18:49:25]

-webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9)

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  background-position: center right;

[arv (Not doing code reviews), 2011/01/18 18:49:25]

RTL

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  background-repeat: no-repeat;
+  color: #333;
+}
+
+select:active {
+  -webkit-border-radius:2px;
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5MDMwMzEzMUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5MDMwMzE0MUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDkwMzAzMTExRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDkwMzAzMTIxRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pY8xsAAAAbUlEQVR42mL8//8/AzmAEYijgJgHj5ovQMOXYYgmAgEzM/M3IPM/OgaJg+RBrkLHIEJhwYIFC9nY2H4iawLxQeIgeVwaMTQT0oSsEa6Zj4/vCyFN6BrBmt++fdtESBMIM2KJDlYg/k0oOgACDABJirkKokz/DAAAAABJRU5ErkJggg=="), -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4f4f4), color-stop(0.4, #efefef), color-stop(1, #dcdcdc));
+  background-position: center right;
+  background-repeat: no-repeat;
+  color: #444;
+}
+
+/* CHECKBOX, RADIO */
 input[type=checkbox],
-input[type=radio],
-button {
+input[type=radio] {
   margin-left: 0;
   margin-right: 0;
+  position:relative;

[arv (Not doing code reviews), 2011/01/18 18:49:25]

ws after :

[James Hawkins, 2011/01/19 02:02:23]

Done.

+  top:1px;

[arv (Not doing code reviews), 2011/01/18 18:49:25]

I think the right way to do this is to change the margin-top below but I'm not
sure if Glen wanted non labeled checkboxes/radio buttons to moved down as well.

[James Hawkins, 2011/01/19 02:02:23]

For now I'd like to leave this as is, then revisit the TODO w/ appropriate
changes for all platforms. I tried mucking with margin-top, but it didn't work.

 }
 
 /* Checkbox and radio buttons have different sizes on different platforms. The
@@ -543,11 +634,11 @@ label > input[type=radio] {
   margin-top: 1px;
 }
 
-.suboption {
-  -webkit-margin-start: 16px;
-}
-
 html[os=mac] label > input[type=checkbox],
 html[os=mac] label > input[type=radio] {
   margin-top: 2px;
 }
+
+.suboption {
+  -webkit-margin-start: 16px;
+}