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

chrome/browser/resources/options/password_manager_list.js

 // 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.
 
 cr.define('options.passwordManager', function() {
   const ArrayDataModel = cr.ui.ArrayDataModel;
   const DeletableItemList = options.DeletableItemList;
   const DeletableItem = options.DeletableItem;
   const List = cr.ui.List;
 
@@ skipping 14 matching lines @@
 
   PasswordListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       DeletableItem.prototype.decorate.call(this);
 
       // 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);
 
       // The stored username.
       var usernameLabel = this.ownerDocument.createElement('div');
       usernameLabel.className = 'name';
       usernameLabel.textContent = this.username;
       this.contentElement.appendChild(usernameLabel);
 
       // The stored password.
       var passwordInputDiv = this.ownerDocument.createElement('div');
       passwordInputDiv.className = 'password';
 
       // 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);
     },
 
     /** @inheritDoc */
     selectionChanged: 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');
       }
     },
 
     /**
      * On-click event handler. Swaps the type of the input field from password
      * to text and back.
      * @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');
+      }
     },
 
     /**
      * Get and set the URL for the entry.
      * @type {string}
      */
     get url() {
       return this.dataItem[0];
     },
     set url(url) {
@@ skipping 124 matching lines @@
     },
   };
 
   return {
     PasswordListItem: PasswordListItem,
     PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
     PasswordExceptionsList: PasswordExceptionsList,
   };
 });