Fix tabindex in chrome://settings/passwords

chrome/browser/resources/options/password_manager_list.js

Index: chrome/browser/resources/options/password_manager_list.js
diff --git a/chrome/browser/resources/options/password_manager_list.js b/chrome/browser/resources/options/password_manager_list.js
index 9c40e98d79070d88b8568a3dbe10b0e16a558d2e..9578199f171fc0e474b943e6a835dd64c693c1da 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -69,12 +69,15 @@ cr.define('options.passwordManager', function() {
       var passwordInput = this.ownerDocument.createElement('input');
       passwordInput.type = 'password';
       passwordInput.className = 'inactive-password';
-      this.closeButtonElement.tabIndex = -1;
-      passwordInput.tabIndex = -1;
       passwordInput.readOnly = true;
       passwordInput.value = this.showPasswords_ ? this.password : '********';
       passwordInputDiv.appendChild(passwordInput);
+      var deletableItem = this;
+      passwordInput.addEventListener('focus', function() {
+        deletableItem.handleFocus();
+      });
       this.passwordField = passwordInput;
+      this.setFocusable_(false);
 
       // The show/hide button.
       if (this.showPasswords_) {
@@ -89,6 +92,9 @@ cr.define('options.passwordManager', function() {
           // Don't handle list item selection. It causes focus change.
           event.stopPropagation();
         }, false);
+        button.addEventListener('focus', function() {
+          deletableItem.handleFocus();
+        });
         passwordInputDiv.appendChild(button);
         this.passwordShowButton = button;
       }
@@ -105,20 +111,28 @@ cr.define('options.passwordManager', function() {
         return;
 
       if (this.selected) {
-        input.focus();
         input.classList.remove('inactive-password');
-        input.tabIndex = 0;
-        this.closeButtonElement.tabIndex = 0;
+        this.setFocusable_(true);
         button.hidden = false;
+        input.focus();
       } else {
         input.classList.add('inactive-password');
-        input.tabIndex = -1;
-        this.closeButtonElement.tabIndex = -1;
+        this.setFocusable_(false);
         button.hidden = true;
       }
     },
 
     /**
+     * Set the focusability of this row.
+     * @param {boolean} focusable
+     * @private
+     */
+    setFocusable_: function(focusable) {
+      var tabIndex = focusable ? 0 : -1;
+      this.passwordField.tabIndex = this.closeButtonElement.tabIndex = tabIndex;
+    },
+
+    /**
      * Reveals the plain text password of this entry.
      */
     showPassword: function(password) {
@@ -275,6 +289,7 @@ cr.define('options.passwordManager', function() {
       Preferences.getInstance().addEventListener(
           'profile.password_manager_allow_show_passwords',
           this.onPreferenceChanged_.bind(this));
+      this.addEventListener('focus', this.onFocus_.bind(this));
     },
 
     /**
@@ -316,6 +331,17 @@ cr.define('options.passwordManager', function() {
     get length() {
       return this.dataModel.length;
     },
+
+    /**
+     * Will make to first row focusable if none are selected. This makes it
+     * possible to tab into the rows without pressing up/down first.
+     * @param {Event} e The focus event.
+     * @private
+     */
+    onFocus_: function(e) {
+      if (!this.selectedItem && this.items)
+        this.items[0].setFocusable_(true);
+    },
   };
 
   /**