Improve Tab-key navigation for editing Autofill addresses and credit cards.

chrome/browser/resources/options/autofill_options_list.js

 // Copyright (c) 2011 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.autofillOptions', function() {
   const DeletableItem = options.DeletableItem;
   const DeletableItemList = options.DeletableItemList;
   const InlineEditableItem = options.InlineEditableItem;
   const InlineEditableItemList = options.InlineEditableItemList;
 
@@ skipping 273 matching lines @@
   /**
    * Create a new value list.
    * @constructor
    * @extends {options.InlineEditableItemList}
    */
   var AutofillValuesList = cr.ui.define('list');
 
   AutofillValuesList.prototype = {
     __proto__: InlineEditableItemList.prototype,
 
-    decorate: function() {
-      InlineEditableItemList.prototype.decorate.call(this);
-
-      var self = this;
-      function handleBlur(e) {
-        // When the blur event happens we do not know who is getting focus so we
-        // delay this a bit until we know if the new focus node is outside the
-        // list.
-        var doc = e.target.ownerDocument;
-        window.setTimeout(function() {
-          var activeElement = doc.activeElement;
-          if (!self.contains(activeElement))
-            self.selectionModel.unselectAll();
-        }, 50);
-      }
-
-      this.addEventListener('blur', handleBlur, true);
-    },

[Ilya Sherman, 2011/09/15 04:10:39]

This functionality is now in |handleListFocusChange_| (the slight delay is
already taken care of by list.js).

-
     /** @inheritDoc */
     createItem: function(entry) {
       if (entry != null)
         return new ValuesListItem(this, entry);
       else
         return new ValuesAddRowListItem(this);
     },
 
     /** @inheritDoc */
     deleteItemAtIndex: function(index) {
       this.dataModel.splice(index, 1);
     },
 
     /** @inheritDoc */
     shouldFocusPlaceholder: function() {
       return false;
     },
 
     /**
+     * Called when the list hierarchy as a whole loses or gains focus.
+     * If the list was focused in response to a mouse click, call into the
+     * superclass's implementation.  If the list was focused in response to a
+     * keyboard navigation, focus the first item.
+     * If the list loses focus, unselect all the elements.
+     * @param {Event} e The change event.
+     * @private
+     */
+    handleListFocusChange_: function(e) {
+      // We check to see whether there is a selected item as a proxy for
+      // distinguishing between mouse- and keyboard-originated focus events.
+      var selectedItem = this.selectedItem;
+      if (selectedItem)

[James Hawkins, 2011/09/15 19:28:02]

Is there nothing in |e| that gives us better data for mouse vs keyboard?

[Ilya Sherman, 2011/09/15 20:39:01]

Not that I could find.  If you know of something, please let me know!

+        InlineEditableItemList.prototype.handleListFocusChange_.call(this, e);
+
+      if (!e.newValue) {
+        // When the list loses focus, unselect all the elements.
+        this.selectionModel.unselectAll();

[James Hawkins, 2011/09/15 19:28:02]

Hmm. Why unselect?  Blur doesn't unselect on other lists.

[Ilya Sherman, 2011/09/15 20:39:01]

I personally think blur should unselect *all* lists... but this is just
maintaining parity with what we had before (see the red section above).

+      } else {
+        // When the list gains focus, select the first item if nothing else is
+        // selected.
+        var firstItem = this.getListItemByIndex(0);
+        if (!selectedItem && firstItem && e.newValue)
+          firstItem.handleFocus_();
+      }
+    },
+
+    /**
      * Called when a new list item should be validated; subclasses are
      * responsible for implementing if validation is required.
      * @param {number} index The index of the item that was inserted or changed.
      * @param {number} remove The number items to remove.
      * @param {string} value The value of the item to insert.
      */
     validateAndSave: function(index, remove, value) {
       this.dataModel.splice(index, remove, value);
     },
   };
@@ skipping 55 matching lines @@
     CreditCardListItem: CreditCardListItem,
     ValuesListItem: ValuesListItem,
     ValuesAddRowListItem: ValuesAddRowListItem,
     AutofillAddressList: AutofillAddressList,
     AutofillCreditCardList: AutofillCreditCardList,
     AutofillValuesList: AutofillValuesList,
     AutofillPhoneValuesList: AutofillPhoneValuesList,
     AutofillFaxValuesList: AutofillFaxValuesList,
   };
 });