Focus the first input when adding a new Autofill cc or address

in chrome://settings

It was mentioned that this was desirable behavior for desktop during the UX review for the linked bug.

BUG=407209

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

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

chrome/browser/resources/options/autofill_edit_address_overlay.js

@@ -324,6 +324,15 @@ cr.define('options', function() {
       }
     },
 
+    /**
+     * Called to prepare the overlay when a new address is being added.
+     * @private
+     */
+    prepForNewAddress_: function() {
+      // Focus the first element.
+      this.pageDiv.querySelector('input').focus();
+    },
+
     /**
      * Loads the address data from |address|, sets the input fields based on
      * this data, and stores the GUID and language code of the address.
@@ -407,6 +416,10 @@ cr.define('options', function() {
     },
   };
 
+  AutofillEditAddressOverlay.prepForNewAddress = function() {
+    AutofillEditAddressOverlay.getInstance().prepForNewAddress_();
+  };
+
   AutofillEditAddressOverlay.loadAddress = function(address) {
     AutofillEditAddressOverlay.getInstance().loadAddress_(address);
   };

chrome/browser/resources/options/autofill_edit_creditcard_overlay.js

@@ -178,6 +178,15 @@ cr.define('options', function() {
       }
     },
 
+    /**
+     * Called to prepare the overlay when a new card is being added.
+     * @private
+     */
+    prepForNewCard_: function() {
+      // Focus the first element.
+      this.pageDiv.querySelector('input').focus();
+    },
+
     /**
      * Loads the credit card data from |creditCard|, sets the input fields based
      * on this data and stores the GUID of the credit card.
@@ -190,6 +199,10 @@ cr.define('options', function() {
     },
   };
 
+  AutofillEditCreditCardOverlay.prepForNewCard = function() {
+    AutofillEditCreditCardOverlay.getInstance().prepForNewCard_();
+  };
+
   AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
     AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
   };

chrome/browser/resources/options/autofill_options.js

@@ -104,6 +104,7 @@ cr.define('options', function() {
       var title = loadTimeData.getString('addAddressTitle');
       AutofillEditAddressOverlay.setTitle(title);
       PageManager.showPageByName('autofillEditAddress');
+      AutofillEditAddressOverlay.prepForNewAddress();
     },
 
     /**
@@ -115,6 +116,7 @@ cr.define('options', function() {
       var title = loadTimeData.getString('addCreditCardTitle');
       AutofillEditCreditCardOverlay.setTitle(title);
       PageManager.showPageByName('autofillEditCreditCard');
+      AutofillEditCreditCardOverlay.prepForNewCard();
     },
 
     /**
@@ -181,8 +183,8 @@ cr.define('options', function() {
 
     /**
      * Shows the 'Edit credit card' overlay, using the data in |credit_card| to
-     * fill the input fields. |address| is a list with one item, an associative
-     * array that contains the credit card data.
+     * fill the input fields. |creditCard| is a list with one item, an
+     * associative array that contains the credit card data.
      * @private
      */
     showEditCreditCardOverlay_: function(creditCard) {