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

CSS values provided by Glen Murphy <glen@chromium.org>.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/6241006

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

chrome/browser/resources/options/deletable_item_list.js

@@ -59,7 +59,8 @@ cr.define('options', function() {
       this.appendChild(this.contentElement_);
 
       this.closeButtonElement_ = this.ownerDocument.createElement('button');
-      this.closeButtonElement_.className = 'close-button';
+      this.closeButtonElement_.classList.add('raw-button');
+      this.closeButtonElement_.classList.add('close-button');
       this.closeButtonElement_.addEventListener('mousedown',
                                                 this.handleMouseDownUpOnClose_);
       this.closeButtonElement_.addEventListener('mouseup',

chrome/browser/resources/options/options.html

@@ -183,7 +183,7 @@
        <div id="subpage-sheet-container-1"
            class="subpage-sheet-container hidden">
          <div id="subpage-sheet-1" class="subpage-sheet">
-           <button class="close-subpage"></button>
+           <button class="raw-button close-subpage"></button>
            <if expr="pp_ifdef('chromeos')">
              <include src="about_page.html">
              <include src="chromeos_language_chewing_options.html">
@@ -207,7 +207,7 @@
        <div id="subpage-sheet-container-2"
            class="subpage-sheet-container hidden">
          <div id="subpage-sheet-2" class="subpage-sheet">
-           <button class="close-subpage"></button>
+           <button class="raw-button close-subpage"></button>
            <include src="cookies_view.html">
            <include src="content_settings_exceptions_area.html">
          </div>

chrome/browser/resources/options/options_page.css

@@ -42,13 +42,23 @@ body {
   -webkit-box-pack: center;
 }
 
-.close-subpage {
+.raw-button,
+.raw-button:hover,
+.raw-button:active {
+  -webkit-box-shadow: none;
   background-color: transparent;
-  background-image: url('chrome://theme/IDR_CLOSE_BAR');
+  background-repeat: no-repeat;
   border: none;
+  min-width: 0;
+  padding: 1px 6px;
+}
+
+.close-subpage {
+  background-image: url('chrome://theme/IDR_CLOSE_BAR');
+  height: 16px;
+  min-width: 0;
   position: relative;
   top: 12px;
-  height: 16px;
   width: 16px;
 }
 
@@ -323,10 +333,6 @@ label.radio {
   -webkit-appearance: slider-horizontal;
 }
 
-select {
-  margin: 0;
-}
-
 .link-button {
   background-color: transparent;
   border: none;
@@ -512,11 +518,103 @@ html[enable-cloud-print-proxy=true] #cloudPrintProxyManageButton {
  display: none;
 }
 
+/* UI Controls */
+
+button:focus,
+input:focus,
+input[type='submit']: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-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  border: 1px solid #aaa;
+  color: #444;
+  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-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  border-color: #999;
+  color: #222;
+}
+
+button:active,
+input[type='submit']:active {
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #333;
+}
+
+button[disabled],
+input[type='submit'][disabled],
+button[disabled]:hover,
+input[type='submit'][disabled]:hover {
+  -webkit-box-shadow: none;
+  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  border-color: #aaa;
+  color: #888;
+}
+
+/* SELECT */
+select {
+  -webkit-appearance: button;
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  background-image: url("select.png"), -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  background-position: center right;
+  background-repeat: no-repeat;
+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  margin: 0;
+  overflow: hidden;
+  padding: 2px 20px 2px 3px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html[dir='rtl'] select {
+  background-position: center left;
+}
+
+select:hover {
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url("select.png"), -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  color: #333;
+}
+
+select:active {
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url("select.png"), -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #444;
+}
+
+/* CHECKBOX, RADIO */
 input[type=checkbox],
-input[type=radio],
-button {
+input[type=radio] {
   margin-left: 0;
   margin-right: 0;
+  position: relative;
+  top: 1px;
 }
 
 /* Checkbox and radio buttons have different sizes on different platforms. The
@@ -529,11 +627,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;
+}