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..0bf13383f7a582df39f03a18a622eadb4c626882 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -69,12 +69,12 @@ 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);
+      passwordInput.addEventListener('focus', this.handleFocus.bind(this));

[Dan Beam, 2015/01/27 22:22:13]

i think this is still confusing, how about:

  var list = this;
  passwordInput.addEventListener('focus', function() {
    list.handleFocus();
  });

so it's easy to tell what's going on here?

[hcarmona, 2015/01/28 01:13:36]

Done.

       this.passwordField = passwordInput;
+      this.setFocusable(false);
 
       // The show/hide button.
       if (this.showPasswords_) {
@@ -89,6 +89,7 @@ cr.define('options.passwordManager', function() {
           // Don't handle list item selection. It causes focus change.
           event.stopPropagation();
         }, false);
+        button.addEventListener('focus', this.handleFocus.bind(this));
         passwordInputDiv.appendChild(button);
         this.passwordShowButton = button;
       }
@@ -105,20 +106,27 @@ 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

[Dan Beam, 2015/01/27 22:22:12]

nit: make @private + add _

[hcarmona, 2015/01/28 01:13:36]

Done.

+     */
+    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 +283,7 @@ cr.define('options.passwordManager', function() {
       Preferences.getInstance().addEventListener(
           'profile.password_manager_allow_show_passwords',
           this.onPreferenceChanged_.bind(this));
+      this.addEventListener('focus', this.onFocus_);

[Dan Beam, 2015/01/27 22:22:13]

nit: this.onFocus_.bind(this)

[hcarmona, 2015/01/28 01:13:36]

Done.

     },
 
     /**
@@ -316,6 +325,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);
+    },
   };
 
   /**