DOMUI: Use a styled button instead of an image for the password list show/hide

button.

BUG=69145
TEST=none

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

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

6 files changed, 73 insertions, 71 deletions

diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index 2eaa434..cd7f21d 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -25,7 +25,6 @@
 <link rel="stylesheet" href="font_settings.css">
 <link rel="stylesheet" href="import_data_overlay.css">
 <link rel="stylesheet" href="language_options.css">
-<link rel="stylesheet" href="password_manager.css">
 <link rel="stylesheet" href="password_manager_list.css">
 <link rel="stylesheet" href="personal_options.css">
 <link rel="stylesheet" href="search_engine_manager.css">
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index bec1c2d..15ef685 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -389,13 +389,13 @@ list [lead][selected][editing] {
 list:focus > [lead]:nth-child(2),
 list:focus > [lead][selected]:nth-child(2),
 list [lead][selected][editing]:nth-child(2) {
-  border-top: 1px transparent;
+  border-top: 1px solid transparent;
 }
 
 list:focus > [lead]:nth-last-child(2),
 list:focus > [lead][selected]:nth-last-child(2),
 list [lead][selected][editing]:nth-last-child(2) {
-  border-bottom: 1px transparent;
+  border-bottom: 1px solid transparent;
 }
 
 list[disabled] > [lead][selected],
@@ -533,6 +533,7 @@ select:focus {
 }
 
 /* TEXT */
+input[type='password],
 input[type='text'] {
   -webkit-border-radius: 2px;
   border: 1px solid #aaa;
diff --git a/chrome/browser/resources/options/password_manager.css b/chrome/browser/resources/options/password_manager.css
deleted file mode 100644
index 48ac0d9..0000000
--- a/chrome/browser/resources/options/password_manager.css
+++ /dev/null
@@ -1,38 +0,0 @@
-#saved-passwords-list .url {
-  box-sizing: border-box;
-  width: 40%;
-}
-
-#saved-passwords-list .name {
-  -webkit-box-flex: 1;
-  width: 20%;
-}
-
-#saved-passwords-list .password {
-  -webkit-box-flex: 1;
-  position: relative;
-}
-
-#saved-passwords-list .password > span {
-  background: url('show_password.png');
-  cursor: pointer;
-  height: 18px;
-  position: absolute;
-  top: 5px;
-  width: 40px;
-}
-
-html[dir='ltr'] #saved-passwords-list .password > span {
-  right: 50px;
-}
-
-html[dir='rtl'] #saved-passwords-list .password > span {
-  left: 50px;
-}
-
-#saved-passwords-list .url,
-#saved-passwords-list .name,
-#password-exceptions-list .url {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
diff --git a/chrome/browser/resources/options/password_manager_list.css b/chrome/browser/resources/options/password_manager_list.css
index 40201e9..62dd756 100644
--- a/chrome/browser/resources/options/password_manager_list.css
+++ b/chrome/browser/resources/options/password_manager_list.css
@@ -1,10 +1,53 @@
 /*
-Copyright (c) 2010 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.
-*/
+ * Copyright (c) 2011 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.
+ */
+
+button.password-button {
+  background: #8aaaed;
+  color: #fff;
+  display: inline;
+  font-size: 90%;
+  font-weight: bold;
+  height: 18px;
+  padding: 0 2px;
+  position: absolute;
+  top: 5px;
+  width: 50px;
+}
+
+html[dir='ltr'] button.password-button {
+  right: 50px;
+}
+
+html[dir='rtl'] button.password-button {
+  left: 50px;
+}
 
 .inactive-password {
   background: transparent;
   border: none;
 }
+
+#saved-passwords-list .url {
+  box-sizing: border-box;
+  width: 40%;
+}
+
+#saved-passwords-list .name {
+  -webkit-box-flex: 1;
+  width: 20%;
+}
+
+#saved-passwords-list .password {
+  -webkit-box-flex: 1;
+  position: relative;
+}
+
+#saved-passwords-list .url,
+#saved-passwords-list .name,
+#password-exceptions-list .url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/chrome/browser/resources/options/password_manager_list.js b/chrome/browser/resources/options/password_manager_list.js
index 505384c..b286e8e 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -32,8 +32,8 @@ cr.define('options.passwordManager', function() {
 
       // The URL of the site.
       var urlLabel = this.ownerDocument.createElement('div');
-      urlLabel.className = 'url';
       urlLabel.classList.add('favicon-cell');
+      urlLabel.classList.add('url');
       urlLabel.textContent = this.url;
       urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url);
       this.contentElement.appendChild(urlLabel);
@@ -50,17 +50,19 @@ cr.define('options.passwordManager', function() {
 
       // The password input field.
       var passwordInput = this.ownerDocument.createElement('input');
+      passwordInput.type = 'password';
       passwordInput.className = 'inactive-password';
       passwordInput.readOnly = true;
-      passwordInput.type = 'password';
       passwordInput.value = this.password;
       passwordInputDiv.appendChild(passwordInput);
 
       // The show/hide button.
-      var buttonSpan = this.ownerDocument.createElement('span');
-      buttonSpan.className = 'hidden';
-      buttonSpan.addEventListener('click', this.onClick_, true);
-      passwordInputDiv.appendChild(buttonSpan);
+      var button = this.ownerDocument.createElement('button');
+      button.classList.add('hidden');
+      button.classList.add('password-button');
+      button.textContent = localStrings.getString('passwordShowButton');
+      button.addEventListener('click', this.onClick_, true);
+      passwordInputDiv.appendChild(button);
 
       this.contentElement.appendChild(passwordInputDiv);
     },
@@ -70,13 +72,13 @@ cr.define('options.passwordManager', function() {
       var passwordInput = this.querySelector('input[type=password]');
       var textInput = this.querySelector('input[type=text]');
       var input = passwordInput || textInput;
-      var buttonSpan = input.nextSibling;
+      var button = input.nextSibling;
       if (this.selected) {
         input.classList.remove('inactive-password');
-        buttonSpan.classList.remove('hidden');
+        button.classList.remove('hidden');
       } else {
         input.classList.add('inactive-password');
-        buttonSpan.classList.add('hidden');
+        button.classList.add('hidden');
       }
     },
 
@@ -86,11 +88,16 @@ cr.define('options.passwordManager', function() {
      * @private
      */
     onClick_: function(event) {
-      // The password is the input element previous to the button span.
-      var buttonSpan = event.currentTarget;
-      var passwordInput = buttonSpan.previousSibling;
-      var type = passwordInput.type;
-      passwordInput.type = type == 'password' ? 'text' : 'password';
+      // The password is the input element previous to the button.
+      var button = event.currentTarget;
+      var passwordInput = button.previousSibling;
+      if (passwordInput.type == 'password') {
+        passwordInput.type = 'text';
+        button.textContent = localStrings.getString('passwordHideButton');
+      } else {
+        passwordInput.type = 'password';
+        button.textContent = localStrings.getString('passwordShowButton');
+      }
     },
 
     /**
diff --git a/chrome/browser/resources/options/search_engine_manager.css b/chrome/browser/resources/options/search_engine_manager.css
index 72ef92e..68e3f9b5 100644
--- a/chrome/browser/resources/options/search_engine_manager.css
+++ b/chrome/browser/resources/options/search_engine_manager.css
@@ -89,21 +89,11 @@
 }
 
 #searchEngineList .url-column button {
-  background-color: #aab6e1;
-  border: none;
-  border-radius: 3px;
-  color: white;
+  background: #8aaaed;
+  color: #fff;
   -webkit-margin-start: 3px;
 }
 
-#searchEngineList .url-column button:hover {
-  background-color: #9aa6d1;
-}
-
-#searchEngineList .url-column button:active {
-  background-color: #8a96c1;
-}
-
 #searchEngineList > :not(:hover):not([editing]) .url-column button {
   display: none;
 }