[cros] Button focus polishing on the login screen.

BUG=122771
TEST=Manual


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

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

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

@@ -4,6 +4,7 @@
  */
 
 #login-header-bar {
+  -webkit-padding-after: 7px;
   bottom: 0;
   left: 0;
   position: absolute;
@@ -15,49 +16,49 @@
 #login-header-bar button:hover {
   -webkit-box-shadow: none;
   background: transparent none;
-  border: 0;
   cursor: pointer;
   height: 34px;
   margin: 0;
   min-width: 0;
   opacity: 0.6;
-  padding: 5px 0;
+  padding: 5px 8px;
   vertical-align: middle;
 }
 
 .header-bar-item {
   -webkit-padding-start: 15px;
   background-image: url('chrome://theme/IDR_DIVIDER_VERT');
-  background-position: left center;
+  background-position: -2px center;
   background-repeat: no-repeat;
   display: inline-block;
   height: 34px;
 }
 
-#shutdown-header-bar-item {
-  -webkit-padding-after: 7px;
-  -webkit-padding-start: 9px;
-  cursor: pointer;
-  display: inline-block;
-  height: 34px;
+html[dir=rtl] .header-bar-item {
+  background-position: right center;
 }
 
-#login-header-bar #shutdown-button {
-  -webkit-padding-start: 24px;
-  background-image: url('chrome://theme/IDR_ICON_POWER24');
-  background-position: left center;
-  background-repeat: no-repeat;
+.header-bar-item:first-child {
+  -webkit-padding-start: 9px;
+  background: none;
 }
 
+#login-header-bar #shutdown-button,
 #login-header-bar #add-user-button {
   -webkit-padding-start: 24px;
-  background-image: url('chrome://theme/IDR_ICON_ADD_USER24');
   background-position: left center;
   background-repeat: no-repeat;
 }
 
-html[dir=rtl] .header-bar-item,
 html[dir=rtl] #login-header-bar #shutdown-button,
 html[dir=rtl] #login-header-bar #add-user-button {
   background-position: right center;
 }
+
+#login-header-bar #shutdown-button {
+  background-image: url('chrome://theme/IDR_ICON_POWER24');
+}
+
+#login-header-bar #add-user-button {
+  background-image: url('chrome://theme/IDR_ICON_ADD_USER24');
+}

chrome/browser/resources/chromeos/login/header_bar.html

 <div id="login-header-bar" hidden>
-  <div id="shutdown-header-bar-item">
+  <div id="shutdown-header-bar-item" class="header-bar-item">
     <button id="shutdown-button" class="custom-appearance" i18n-content="shutDown"></button>
   </div>
   <div id="add-user-header-bar-item" class="header-bar-item" hidden>

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

@@ -22,6 +22,17 @@ body {
 
 button {
   font-family: inherit;
+  outline: none;
+}
+
+/* Follow same focus coloring as in widgets.css */
+button.custom-appearance:enabled {
+  -webkit-transition: border-color 200ms;
+  border: 1px solid transparent;
+}
+
+button.custom-appearance:enabled:focus {
+  border-color: rgb(77, 144, 254);
 }
 
 #outer-container {

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

@@ -181,7 +181,6 @@ html[dir=rtl] .pod .capslock-hint {
   -webkit-transition: width 100ms ease-in-out, background 200ms ease-in-out;
   background: url('../../../../../ui/resources/close_bar.png') center center no-repeat;
   background-color: rgba(255, 255, 255, 0.3);
-  border: 0;
   border-radius: 2px;
   box-shadow: none;
   height: 16px;