Options: Focus the placeholder input element if an item was added through the

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 133 matching lines @@
             // Make sure we are still in edit mode by the time we execute.
             if (self.editing) {
               focusElement.focus();
               focusElement.select();
             }
           }, 50);
         }
       } else {
         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 71 matching lines @@
         textEl.setAttribute('displaymode', 'static');
         container.appendChild(textEl);
       }
 
       var inputEl = this.ownerDocument.createElement('input');
       inputEl.type = 'text';
       inputEl.value = text;
       if (!this.isPlaceholder) {
         inputEl.setAttribute('displaymode', 'edit');
         inputEl.staticVersion = textEl;
+      } else {
+        // At this point |this| is not attached to the parent list yet, so give
+        // a short timeout in order for the attachment to occur.
+        var self = this;
+        window.setTimeout(function() {
+          var list = self.parentNode;
+          if (list && list.focusPlaceholder) {
+            list.focusPlaceholder = false;
+            inputEl.focus();
+          }
+        }, 50);
       }
+
       inputEl.addEventListener('focus', this.handleFocus_.bind(this));
       container.appendChild(inputEl);
       this.editFields_.push(inputEl);
 
       return container;
     },
 
     /**
      * Resets the editable version of any controls created by createEditable*
      * to match the static text.
      * @private
      */
     resetEditableValues_: function() {
       var editFields = this.editFields_;
       for (var i = 0; i < editFields.length; i++) {
         var staticLabel = editFields[i].staticVersion;
         if (!staticLabel && !this.isPlaceholder)
           continue;
+
         if (editFields[i].tagName == 'INPUT') {
           editFields[i].value =
             this.isPlaceholder ? '' : staticLabel.textContent;
         }
         // Add more tag types here as new createEditable* methods are added.
 
         editFields[i].setCustomValidity('');
       }
     },
 
     /**
      * Sets the static version of any controls created by createEditable*
      * to match the current value of the editable version. Called on commit so
      * that there's no flicker of the old value before the model updates.
      * @private
      */
     updateStaticValues_: function() {
       var editFields = this.editFields_;
       for (var i = 0; i < editFields.length; i++) {
         var staticLabel = editFields[i].staticVersion;
         if (!staticLabel)
           continue;
+
         if (editFields[i].tagName == 'INPUT')
           staticLabel.textContent = editFields[i].value;
         // Add more tag types here as new createEditable* methods are added.
       }
     },
 
     /**
      * Called a key is pressed. Handles committing and cancelling edits.
      * @param {Event} e The key down event.
      * @private
@@ skipping 58 matching lines @@
         document.activeElement.blur();
     });
   }
   handleWindowBlurs();
 
   var InlineEditableItemList = cr.ui.define('list');
 
   InlineEditableItemList.prototype = {
     __proto__: DeletableItemList.prototype,
 
+    /**
+     * Focuses the input element of the placeholder if true.
+     * @type {boolean}
+     */
+    focusPlaceholder: false,
+
     /** @inheritDoc */
     decorate: function() {
       DeletableItemList.prototype.decorate.call(this);
       this.setAttribute('inlineeditable', '');
       this.addEventListener('hasElementFocusChange',
                             this.handleListFocusChange_);
     },
 
     /**
      * Called when the list hierarchy as a whole loses or gains focus; starts
@@ skipping 11 matching lines @@
       }
     },
   };
 
   // Export
   return {
     InlineEditableItem: InlineEditableItem,
     InlineEditableItemList: InlineEditableItemList,
   };
 });