css hack n' slash, continued: New styles for buttons and selects.

I am moving all widget styles into button.css. I will later rename it widget.css. This way, the rules that are common can be shared. The next step will be to update/merge checkbox.css into button.css. BUG=103688,115404 TEST=visual Review URL: http://codereview.chromium.org/9579001 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@124845 0039d316-1c4b-4281-b951-d872f2087c98

css hack n' slash, continued: New styles for buttons and selects.
I am moving all widget styles into button.css. I will later rename it widget.css. This way, the rules that are common can be shared. The next step will be to update/merge checkbox.css into button.css. BUG=103688,115404 TEST=visual Review URL: http://codereview.chromium.org/9579001 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@124845 0039d316-1c4b-4281-b951-d872f2087c98
bfc3c399 · estade@chromium.org · bcd40056 · bfc3c399 · bfc3c399 · bfc3c399
Commit bfc3c399 authored Mar 03, 2012 by estade@chromium.org
17 changed files
--- a/chrome/browser/resources/chromeos/login/login.html
+++ b/chrome/browser/resources/chromeos/login/login.html
@@ -5,7 +5,6 @@
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/dialogs.css"></link>
 <link rel="stylesheet" href="chrome://resources/css/list.css">
-<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="bubble.css">
 <link rel="stylesheet" href="header_bar.css">

--- a/chrome/browser/resources/chromeos/login/oobe.html
+++ b/chrome/browser/resources/chromeos/login/oobe.html
@@ -5,7 +5,6 @@
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/dialogs.css"></link>
 <link rel="stylesheet" href="chrome://resources/css/list.css">
-<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="bubble.css">

--- a/chrome/browser/resources/chromeos/proxy_settings.html
+++ b/chrome/browser/resources/chromeos/proxy_settings.html
@@ -3,9 +3,8 @@
 <head>
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/checkbox.css">
-<link rel="stylesheet" href="chrome://resources/css/list.css">
-<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
+<link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="../options/options_page.css">
 <link rel="stylesheet" href="../options/chromeos/internet_options_page.css">
 <link rel="stylesheet" href="../options/chromeos/proxy.css">

--- a/chrome/browser/resources/feedback.html
+++ b/chrome/browser/resources/feedback.html
@@ -6,7 +6,6 @@
 <!-- We want to keep our style in sync with the options page. -->
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/checkbox.css">
-<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="feedback.css">

--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -11,7 +11,6 @@
 <link rel="stylesheet" href="chrome://resources/css/checkbox.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
-<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="chrome://resources/css/tree.css">

--- a/chrome/browser/resources/options2/browser_options.css
+++ b/chrome/browser/resources/options2/browser_options.css
@@ -2,10 +2,6 @@
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */
-#manage-default-search-engines {
-  -webkit-margin-start: 4px;
-}
 #default-browser-state {
  margin-top: 6px;
 }
@@ -250,11 +246,6 @@ html[dir=rtl] #pointer-sensitivity-more {
  min-width: 100px;
 }
-#fontSettingsCustomizeFontsButton,
-#privacyClearDataButton {
-  margin-left: 10px;
-}
 #timezone-value {
  display: inline-block;
  vertical-align: baseline;

--- a/chrome/browser/resources/options2/options.html
+++ b/chrome/browser/resources/options2/options.html
@@ -6,7 +6,6 @@
 <link rel="icon" href="chrome://theme/IDR_SETTINGS_FAVICON">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/overlay.css">
-<link rel="stylesheet" href="chrome://resources/css/select.css">
 <link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="chrome://resources/css/tree.css">

--- a/chrome/browser/resources/options2/options_page.css
+++ b/chrome/browser/resources/options2/options_page.css
@@ -52,10 +52,6 @@ div.disabled {
  margin-top: 0.45em;
 }
-button:first-child {
-  -webkit-margin-start: 0;
-}
 /* TEXT */
 input[type='password'],
 input[type='text'],

--- a/chrome/browser/resources/print_preview/print_preview.css
+++ b/chrome/browser/resources/print_preview/print_preview.css
@@ -32,7 +32,7 @@ header {
 }
 #print-header {
-  -webkit-padding-end: 16px;
+  -webkit-padding-end: 14px;
  padding-bottom: 10px;
  padding-top: 10px;
 }
@@ -125,11 +125,11 @@ button.loading {
  cursor: progress;
 }
-button.default {
+#print-preview button.default {
  font-weight: bold;
 }
-button.default:not(:focus):not(:disabled) {
+#print-preview button.default:not(:focus):not(:disabled) {
  border-color: #808080;
 }
@@ -246,7 +246,7 @@ label {
 #copies {
  position: relative;
-  width: 1.5em;
+  width: 2.75em;
 }
 #copies.invalid {
@@ -261,7 +261,7 @@ label {
  font-weight: 600;
  min-width: 0;
  position: relative;
-  width: 25px;
+  width: 2em;
 }
 #increment:focus,
@@ -360,6 +360,7 @@ html[dir='rtl'] #decrement {
 #messages {
  color: #404040;
+  font-size: 1.1em;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
@@ -381,9 +382,7 @@ html[dir='rtl'] #decrement {
 }
 .message-with-dots span span {
-  -webkit-animation-duration: 1800ms;
+  -webkit-animation: dancing-dots-jump 1800ms infinite;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: dancing-dots-jump;
  padding: 1px;
  position: relative;
 }
@@ -411,7 +410,8 @@ html:not([toolkit=views]) .button-strip {
  -webkit-box-direction: reverse;
 }
-.button-strip button {
+#print-preview .button-strip button {
+  -webkit-margin-start: 4px;
  display: block;
 }

--- a/chrome/browser/resources/print_preview/print_preview.html
+++ b/chrome/browser/resources/print_preview/print_preview.html
@@ -10,7 +10,6 @@
 <link rel="stylesheet" href="../shared/css/button.css">
 <link rel="stylesheet" href="../shared/css/checkbox.css">
 <link rel="stylesheet" href="../shared/css/chrome_shared.css">
-<link rel="stylesheet" href="../shared/css/select.css">
 <link rel="stylesheet" href="../shared/css/throbber.css">
 <script src="chrome://resources/js/cr.js"></script>

--- a/chrome/browser/resources/print_preview/print_preview_dummy.html
+++ b/chrome/browser/resources/print_preview/print_preview_dummy.html
@@ -10,7 +10,6 @@
 <link rel="stylesheet" href="../shared/css/button.css">
 <link rel="stylesheet" href="../shared/css/checkbox.css">
 <link rel="stylesheet" href="../shared/css/chrome_shared.css">
-<link rel="stylesheet" href="../shared/css/select.css">
 <link rel="stylesheet" href="../shared/css/throbber.css">
 <script src="chrome://resources/js/cr.js"></script>

--- a/chrome/browser/resources/shared/css/button.css
+++ b/chrome/browser/resources/shared/css/button.css
@@ -3,76 +3,152 @@
 * found in the LICENSE file.
 */
+/* Default state **************************************************************/
 button:not(.custom-appearance):not(.link-button),
 input[type='button']:not(.custom-appearance):not(.link-button),
-input[type='submit']:not(.custom-appearance):not(.link-button) {
+input[type='submit']:not(.custom-appearance):not(.link-button),
-  -webkit-border-radius: 3px;
+select {
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
-  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  border-radius: 2px;
-  border: 1px solid #aaa;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+      inset 0 1px 2px rgba(255, 255, 255, 0.75);
  color: #444;
-  /* Input elements have -webkit-small-control which can override the body font.
+  font: inherit;
-   * Resolve this by using 'inherit'. */
+  height: 2em;
-  font-family: inherit;
+  margin: 0 1px 0 0;
-  font-size: inherit;
-  margin-bottom: 0;
-  margin-top: 0;
  min-width: 4em;
-  padding: 3px 12px;
+  text-shadow: 0 1px 0 rgb(240, 240, 240);
+}
+button:not(.custom-appearance):not(.link-button),
+input[type='button']:not(.custom-appearance):not(.link-button),
+input[type='submit']:not(.custom-appearance):not(.link-button) {
+  -webkit-padding-end: 10px;
+  -webkit-padding-start: 10px;
+  background-image:
+      -webkit-gradient(linear, left top, left bottom,
+                       color-stop(0, rgb(237, 237, 237)),
+                       color-stop(0.38, rgb(237, 237, 237)),
+                       color-stop(1, rgb(222, 222, 222)));
 }
-button:not(.custom-appearance):not(.link-button):hover,
+select {
-input[type='button']:not(.custom-appearance):not(.link-button):hover,
+  -webkit-appearance: none;
-input[type='submit']:not(.custom-appearance):not(.link-button):hover {
+  -webkit-padding-end: 20px;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  -webkit-padding-start: 6px;
-  background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  background-image: url('../images/select.png'),
-  border-color: #999;
+      -webkit-gradient(linear, left top, left bottom,
-  color: #222;
+                       color-stop(0, rgb(237, 237, 237)),
+                       color-stop(0.38, rgb(237, 237, 237)),
+                       color-stop(1, rgb(222, 222, 222)));
+  background-position: right center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-button:not(.custom-appearance):not(.link-button):active,
+html[dir='rtl'] select {
-input[type='button']:not(.custom-appearance):not(.link-button):active,
+  background-position: center left;
-input[type='submit']:not(.custom-appearance):not(.link-button):active {
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-  background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
-  color: #333;
 }
-button[disabled]:not(.custom-appearance):not(.link-button),
+/* Hover **********************************************************************/
-input[type='button'][disabled]:not(.custom-appearance):not(.link-button),
-input[type='submit'][disabled]:not(.custom-appearance):not(.link-button),
+button:not(.custom-appearance):not(.link-button):enabled:hover,
-button[disabled]:not(.custom-appearance):not(.link-button):hover,
+input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover,
-input[type='button'][disabled]:not(.custom-appearance):not(.link-button):hover,
+input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover {
-input[type='submit'][disabled]:not(.custom-appearance):not(.link-button):hover {
+  background-image: -webkit-gradient(linear, left top, left bottom,
-  -webkit-box-shadow: none;
+                                     color-stop(0, rgb(240, 240, 240)),
-  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+                                     color-stop(0.38, rgb(240, 240, 240)),
-  border-color: #aaa;
+                                     color-stop(1, rgb(224, 224, 224)));
-  color: #888;
+}
+select:enabled:hover {
+  background-image: url('../images/select.png'),
+      -webkit-gradient(linear, left top, left bottom,
+                       color-stop(0, rgb(237, 237, 237)),
+                       color-stop(0.38, rgb(237, 237, 237)),
+                       color-stop(1, rgb(222, 222, 222)));
 }
-/* TODO(estade): remove this. It's duplicated in chrome_shared2.css */
+button:not(.custom-appearance):not(.link-button):enabled:hover,
+input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover,
+input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover,
+select:enabled:hover {
+  border-color: rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
+      inset 0 1px 2px rgba(255, 255, 255, 0.95);
+  color: black;
+}
+/* Active *********************************************************************/
+button:not(.custom-appearance):not(.link-button):enabled:active,
+input[type='button']:not(.custom-appearance):not(.link-button):enabled:active,
+input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active {
+  background-image: -webkit-gradient(linear, left top, left bottom,
+                                     color-stop(0, rgb(231, 231, 231)),
+                                     color-stop(0.38, rgb(231, 231, 231)),
+                                     color-stop(1, rgb(215, 215, 215)));
+}
+select:enabled:active {
+  background-image: url('../images/select.png'),
+      -webkit-gradient(linear, left top, left bottom,
+                       color-stop(0, rgb(231, 231, 231)),
+                       color-stop(0.38, rgb(231, 231, 231)),
+                       color-stop(1, rgb(215, 215, 215)));
+}
+button:not(.custom-appearance):not(.link-button):enabled:active,
+input[type='button']:not(.custom-appearance):not(.link-button):enabled:active,
+input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active,
+select:enabled:active {
+  box-shadow: none;
+  text-shadow: none;
+}
+/* Disabled *******************************************************************/
+button:not(.custom-appearance):not(.link-button):disabled,
+input[type='button']:not(.custom-appearance):not(.link-button):disabled,
+input[type='submit']:not(.custom-appearance):not(.link-button):disabled,
+select:disabled {
+  border-color: rgba(0, 0, 0, 0.2);
+  color: #999;
+}
+select:disabled {
+  background-image: url('../images/disabled_select.png'),
+      -webkit-gradient(linear, left top, left bottom,
+                       color-stop(0, rgb(237, 237, 237)),
+                       color-stop(0.38, rgb(237, 237, 237)),
+                       color-stop(1, rgb(222, 222, 222)));
+}
+/* Focus **********************************************************************/
 button:not(.custom-appearance):not(.link-button):focus,
-input[type='submit']:not(.custom-appearance):not(.link-button):focus,
+input[type='submit']:not(.custom-appearance):focus,
-input[type='text']:not(.custom-appearance):not(.link-button):focus,
+input[type='text']:not(.custom-appearance):focus,
-select:not(.custom-appearance):not(.link-button):focus {
+select:focus {
-  -webkit-box-shadow: inset 0 1px 2px white,
-      0 1px 2px rgba(0, 0, 0, .2),
-      0 0 1px #c0c0c0,
-      0 0 1px #c0c0c0,
-      0 0 1px #c0c0c0;
  -webkit-transition: border-color 200ms;
  /* We use border color because it follows the border radius (unlike outline).
   * This is particularly noticeable on mac. */
-  border-color: rgb(64, 128, 250);
+  border-color: rgb(77, 144, 254);
  outline: none;
 }
 /* Search boxes use an outline because it follows the contours of the box. */
-input[type='search']:not(.custom-appearance):not(.link-button):focus {
+input[type='search']:not(.custom-appearance):focus {
-  outline-color: rgb(64, 128, 250);
+  outline-color: rgb(77, 144, 254);
 }
+/* Link buttons ***************************************************************/
 .link-button {
  -webkit-box-shadow: none;
  background: transparent none;

--- a/chrome/browser/resources/shared/css/checkbox.css
+++ b/chrome/browser/resources/shared/css/checkbox.css
@@ -112,7 +112,6 @@ input[type='radio']:active:checked::before {
  display: block;
 }
-/* TODO(estade): remove this. It's duplicated in chrome_shared2.css */
 input[type='checkbox']:not(.custom-appearance):focus,
 input[type='radio']:not(.custom-appearance):focus {
  -webkit-box-shadow: inset 0 1px 2px white,

--- a/chrome/browser/resources/shared/css/chrome_shared.css
+++ b/chrome/browser/resources/shared/css/chrome_shared.css
@@ -135,8 +135,10 @@ input[type='url'],
 input:not([type]) {
  -webkit-border-radius: 2px;
  border: 1px solid #aaa;
-  font-size: inherit;
+  box-sizing: border-box;
-  padding: 3px;
+  font: inherit;
+  height: 2em;
+  padding: 4px;
 }
 input[type='text']:disabled {

--- a/chrome/browser/resources/shared/css/chrome_shared2.css
+++ b/chrome/browser/resources/shared/css/chrome_shared2.css
@@ -86,7 +86,7 @@ input:not([type]) {
  border: 1px solid #bfbfbf;
  border-radius: 2px;
  font: inherit;
-  font-size: inherit;
+  height: 2em;
  margin: 0;
  padding: 3px;
 }

--- a/chrome/browser/resources/shared/css/select.css
+++ b/chrome/browser/resources/shared/css/select.css
-/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-select {
-  -webkit-appearance: button;
-  -webkit-border-radius: 3px;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  -webkit-padding-end: 20px;
-  -webkit-padding-start: 8px;
-  -webkit-user-select: none;
-  background-image: url("../images/select.png"),
-                    -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
-  background-position: center right;
-  background-repeat: no-repeat;
-  border: 1px solid #aaa;
-  color: #555;
-  font: inherit;
-  margin: 0;
-  overflow: hidden;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-html[dir='rtl'] select {
-  background-position: center left;
-}
-select:disabled {
-  color: graytext;
-  background-image: url("../images/disabled_select.png"),
-                    -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
-}
-select:enabled:hover {
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  background-image: url("../images/select.png"),
-                    -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
-  color: #333;
-}
-select:enabled:active {
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-  background-image: url("../images/select.png"),
-                    -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
-  color: #444;
-}
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -30,8 +30,6 @@ without changes to the corresponding grd file. -->
               file="shared/css/chrome_shared2.css" type="BINDATA" />
      <include name="IDR_SHARED_CSS_OVERLAY"
               file="shared/css/overlay.css" type="BINDATA" />
-      <include name="IDR_SHARED_CSS_SELECT"
-               file="shared/css/select.css" type="BINDATA" />
      <include name="IDR_SHARED_CSS_SPINNER"
               file="shared/css/spinner.css" type="BINDATA" />
      <include name="IDR_SHARED_CSS_TABLE"