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..991aa7c139176d9f69dce19304a9bb57a3dbf2a8 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -69,12 +69,11 @@ 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);
       this.passwordField = passwordInput;
+      this.setFocusable(false);
 
       // The show/hide button.
       if (this.showPasswords_) {
@@ -93,6 +92,11 @@ cr.define('options.passwordManager', function() {
         this.passwordShowButton = button;
       }
 
+      // A row should be focused when any element in it is focused, not just
+      // the close button.
+      this.closeButtonElement_.removeEventListener(this.handleFocus, 'focus');

[Dan Beam, 2015/01/23 00:00:37]

i'm confused.

a) the order is 'eventName', eventHandlerFunction[1]

where is the corresponding this.closeButtonElement_.addEventListener call or
this.closeButtonElement_ even defined?

is this supposed to say

  this.removeEventListener('focus', this.handleFocus);

?

[1]
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

[hcarmona, 2015/01/23 21:27:35]

Done.

+      this.addEventListener('focusin', this.handleFocus.bind(this));

[Dan Beam, 2015/01/23 00:00:37]

why do we need to use focusin here?  because it bubbles?

[hcarmona, 2015/01/23 21:27:34]

Yes, we need to focus event to bubble up from the elements in |this|.

+
       this.contentElement.appendChild(passwordInputDiv);
     },
 
@@ -105,20 +109,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;
+        // Move the focus away from anything else that may have been focused.

[Dan Beam, 2015/01/23 00:00:37]

this comment is confusing.  needed?

[hcarmona, 2015/01/23 21:27:35]

Done.

+        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 {bool} focusable

[Dan Beam, 2015/01/23 00:00:37]

boolean

[hcarmona, 2015/01/23 21:27:34]

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 +287,7 @@ cr.define('options.passwordManager', function() {
       Preferences.getInstance().addEventListener(
           'profile.password_manager_allow_show_passwords',
           this.onPreferenceChanged_.bind(this));
+      this.addEventListener('focusin', this.onFocusIn_);
     },
 
     /**
@@ -316,6 +329,19 @@ cr.define('options.passwordManager', function() {
     get length() {
       return this.dataModel.length;
     },
+
+    /**
+     * Called when focus enters this list. Will make the first row focusable if
+     * nothing is selected.
+     * Without this: the list will be focused and no row will be focused until
+     * up/down is pressed making it appear that the row items are not focusable.

[Dan Beam, 2015/01/23 00:00:37]

write this sentence using the word "focus" less

[hcarmona, 2015/01/23 21:27:35]

Reworded to make more clear.

+     * @param {Event} e The focusin event.
+     * @private
+     */
+    onFocusIn_: function(e) {
+      if (e.target == this && !this.selectedItem && this.items)

[Dan Beam, 2015/01/23 00:00:37]

if we're only looking for the case where e.target == this, why not just use
focus instead?

[hcarmona, 2015/01/23 21:27:34]

Done.

+        this.items[0].setFocusable(true);
+    },
   };
 
   /**