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

chrome/app/generated_resources.grd

@@ -4505,28 +4505,22 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_PASSWORDS_PAGE_VIEW_CAPTION_DELETE_ALL_PASSWORDS" desc="Passwords page view's remove all confirmation message box window title">
         Remove all passwords
       </message>
+      <message name="IDS_PASSWORDS_PAGE_VIEW_SHOW_BUTTON" desc="Text for passwords page view's button to show a stored password">
+        Show
+      </message>
+      <message name="IDS_PASSWORDS_PAGE_VIEW_HIDE_BUTTON" desc="Text for passwords page view's button to hide a stored password">
+        Hide
+      </message>
 
       <if expr="not pp_ifdef('use_titlecase')">
         <message name="IDS_PASSWORDS_PAGE_VIEW_REMOVE_ALL_BUTTON" desc="In sentence case: Passwords page view's 'Remove all' button text">
           Remove all
         </message>
-        <message name="IDS_PASSWORDS_PAGE_VIEW_SHOW_BUTTON" desc="In sentence case: Text for passwords page view's button to show a stored password">
-          Show password
-        </message>
-        <message name="IDS_PASSWORDS_PAGE_VIEW_HIDE_BUTTON" desc="In sentence case: Text for passwords page view's button to hide a stored password">
-          Hide password
-        </message>
       </if>
       <if expr="pp_ifdef('use_titlecase')">
         <message name="IDS_PASSWORDS_PAGE_VIEW_REMOVE_ALL_BUTTON" desc="In Title Case: Passwords page view's 'Remove all' button text">
           Remove All
         </message>
-        <message name="IDS_PASSWORDS_PAGE_VIEW_SHOW_BUTTON" desc="In Title Case: Text for passwords page view's button to show a stored password">
-          Show Password
-        </message>
-        <message name="IDS_PASSWORDS_PAGE_VIEW_HIDE_BUTTON" desc="In Title Case: Text for passwords page view's button to hide a stored password">
-          Hide Password
-        </message>
       </if>
 
       <!-- Confirm MessageBox Dialog -->

chrome/browser/dom_ui/options/password_manager_handler.cc

@@ -36,6 +36,10 @@ void PasswordManagerHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(IDS_PASSWORDS_SHOW_PASSWORDS_TAB_TITLE));
   localized_strings->SetString("passwordExceptionsTitle",
       l10n_util::GetStringUTF16(IDS_PASSWORDS_EXCEPTIONS_TAB_TITLE));
+  localized_strings->SetString("passwordShowButton",
+      l10n_util::GetStringUTF16(IDS_PASSWORDS_PAGE_VIEW_SHOW_BUTTON));
+  localized_strings->SetString("passwordHideButton",
+      l10n_util::GetStringUTF16(IDS_PASSWORDS_PAGE_VIEW_HIDE_BUTTON));
   localized_strings->SetString("passwordsSiteColumn",
       l10n_util::GetStringUTF16(IDS_PASSWORDS_PAGE_VIEW_SITE_COLUMN));
   localized_strings->SetString("passwordsUsernameColumn",

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">

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;

chrome/browser/resources/options/password_manager.css

-#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;
-}

chrome/browser/resources/options/password_manager_list.css

 /*
-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;
+}

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');
+      }
     },
 
     /**

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;
 }