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

chrome/browser/resources/options/inline_editable_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', function() {
   const DeletableItem = options.DeletableItem;
   const DeletableItemList = options.DeletableItemList;
 
   /**
    * Creates a new list item with support for inline editing.
@@ skipping 65 matching lines @@
       this.addEventListener('keydown', this.handleKeyDown_);
       this.addEventListener('leadChange', this.handleLeadChange_);
     },
 
     /** @inheritDoc */
     selectionChanged: function() {
       this.updateEditState();
     },
 
     /**
-     * Called when the input element receives focus. Selects this item in the
-     * list selection model.
-     * @private
-     */
-    handleFocus_: function() {
-      var list = this.parentNode;
-      var index = list.getIndexOfListItem(this);
-      list.selectionModel.selectedIndex = index;
-      list.selectionModel.anchorIndex = index;
-    },

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

This was moved to deletable_item_list.js.

-
-    /**
      * Called when this element gains or loses 'lead' status. Updates editing
      * mode accordingly.
      * @private
      */
     handleLeadChange_: function() {
       this.updateEditState();
     },
 
     /**
      * Updates the edit state based on the current selected and lead states.
      */
     updateEditState: function() {
       if (this.editable)
         this.editing = this.selected && this.lead;
     },
 
     /**
      * Whether the user is currently editing the list item.
      * @type {boolean}
      */
     get editing() {
       return this.hasAttribute('editing');
     },
     set editing(editing) {
       if (this.editing == editing)
         return;
 
-      if (editing)
+     if (editing) {
         this.setAttribute('editing', '');
-      else
-        this.removeAttribute('editing');

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

This if/else got merged with the if/else below.

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

This block was intentionally kept separate from below to make sure the
connection with set/remove editing attribute was not lost.

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

Ok, restored, though I find the second block harder to read with this one
separated out from it.

-
-      if (editing) {
         this.editCancelled_ = false;
 
         cr.dispatchSimpleEvent(this, 'edit', true);
 
         var focusElement = this.editClickTarget_ || this.initialFocusElement;
         this.editClickTarget_ = null;
 
         // When this is called in response to the selectedChange event,
         // the list grabs focus immediately afterwards. Thus we must delay
         // our focus grab.
         var self = this;
         if (focusElement) {
           window.setTimeout(function() {
             // Make sure we are still in edit mode by the time we execute.
-            if (self.editing && self.focusPlaceholder) {

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

List items don't have a 'focusPlaceholder' property.  I'm not sure what the
original intent of this code was...

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

But InlineEditableLists do...

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

InlineEditableItemLists have this property.  InlineEditableItems do not.  |self|
is a list item, not a list.  Am I missing something there?

+            if (self.editing) {
               focusElement.focus();
               focusElement.select();
             }
           }, 50);
         }
       } else {
+        this.removeAttribute('editing');
         if (!this.editCancelled_ && this.hasBeenEdited &&
             this.currentInputIsValid) {
           if (this.isPlaceholder)
             this.parentNode.focusPlaceholder = true;
 
           this.updateStaticValues_();
           cr.dispatchSimpleEvent(this, 'commitedit', true);
         } else {
           this.resetEditableValues_();
           cr.dispatchSimpleEvent(this, 'canceledit', true);
@@ skipping 255 matching lines @@
       return true;
     },
   };
 
   // Export
   return {
     InlineEditableItem: InlineEditableItem,
     InlineEditableItemList: InlineEditableItemList,
   };
 });