Fix tabindex in chrome://settings/passwords

Updated code so that the first row is focusable. This makes it possible to
tab into the first row making it more obvious that it is focused.

Applied Dan's feedback from previous CL (https://codereview.chromium.org/834323005).

BUG=449110

Review URL: https://codereview.chromium.org/869813002

Cr-Commit-Position: refs/heads/master@{#313618}

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,19 +111,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
+     * @private
+     */
+    setFocusable_: function(focusable) {
+      var tabIndex = focusable ? 0 : -1;
+      this.passwordField.tabIndex = this.closeButtonElement.tabIndex = tabIndex;
+    },
+
     /**
      * Reveals the plain text password of this entry.
      */
@@ -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);
+    },
   };
 
   /**