[MD Settings] Add Edit/Create Address Dialog to MD Settings.

Change includes lots of tests.
Screenshots of dialog in bug.

BUG=607347
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2109233002
Cr-Commit-Position: refs/heads/master@{#405303}

chrome/app/settings_strings.grdp

@@ -213,7 +213,7 @@
 
   <!-- Passwords and Autofill Page -->
   <message name="IDS_SETTINGS_OVERFLOW_MENU" desc="Alt text for the overflow button on a list item. Triggers a context menu when clicked.">
-   Menu
+    Menu
   </message>
   <message name="IDS_SETTINGS_PASSWORDS_AND_AUTOFILL_PAGE_TITLE" desc="Name of the settings page which allows managing passwords and autofill settings.">
     Passwords and forms
@@ -227,6 +227,21 @@
   <message name="IDS_SETTINGS_AUTOFILL_ADDRESSES_HEADING" desc="Title for the list of addresses that chrome has saved for use in filling in forms.">
     Addresses
   </message>
+  <message name="IDS_SETTINGS_AUTOFILL_ADDRESSES_ADD_TITLE" desc="This is the title for the 'Add address' dialog. This dialog allows a user to create a new address.">
+    Add address
+  </message>
+  <message name="IDS_SETTINGS_AUTOFILL_ADDRESSES_EDIT_TITLE" desc="This is the title for the 'Edit address' dialog. This dialog allows a user to edit an address that is already saved.">
+    Edit address
+  </message>
+  <message name="IDS_SETTINGS_AUTOFILL_ADDRESSES_COUNTRY" desc="This is the label for the dropdown that lets a user select the country their address is in. Will be shown when editing or adding an address to use in autofill.">
+    Country / Region
+  </message>
+  <message name="IDS_SETTINGS_AUTOFILL_ADDRESSES_PHONE" desc="This is the label for the field that lets a user modify the phone number that will be used when auto-filling forms on the web.">
+    Phone
+  </message>
+  <message name="IDS_SETTINGS_AUTOFILL_ADDRESSES_EMAIL" desc="This is the label for the field that lets a user modify the email address that will be used when auto-filling forms on the web.">
+    Email
+  </message>
   <message name="IDS_SETTINGS_AUTOFILL_ADD_ADDRESS_BUTTON" desc="Label for a button that allows a user to enter a new address that can be used to fill in forms.">
     Add address
   </message>
@@ -243,16 +258,16 @@
     Enable Autofill to fill out forms in a single click
   </message>
   <message name="IDS_SETTINGS_ADDRESS_EDIT" desc="Label for a context menu item that shows a dialog with edit options for the selected address." meaning="Edit selected address.">
-   Edit
+    Edit
   </message>
   <message name="IDS_SETTINGS_ADDRESS_REMOVE" desc="Label for a context menu item that removes the selected address." meaning="Remove selected address.">
-   Remove
+    Remove
   </message>
   <message name="IDS_SETTINGS_CREDIT_CARD_EDIT" desc="Label for a context menu item that shows a dialog with edit options for the selected credit card." meaning="Edit selected credit card.">
-   Edit
+    Edit
   </message>
   <message name="IDS_SETTINGS_CREDIT_CARD_REMOVE" desc="Label for a context menu item that removes the selected credit card." meaning="Remove selected credit card.">
-   Remove
+    Remove
   </message>
   <message name="IDS_SETTINGS_CREDIT_CARD_CLEAR" desc="Label for a context menu item clears the locally cached credit card that is also saved on Google Payments. Clicking this will NOT remove the credit card from Google Payments.">
    Clear copy
@@ -294,10 +309,10 @@
     Delete this item
   </message>
   <message name="IDS_SETTINGS_PASSWORD_EDIT" desc="Label for a context menu item that shows a dialog with edit options for the selected password." meaning="Edit selected password.">
-   Edit
+    Edit
   </message>
   <message name="IDS_SETTINGS_PASSWORD_REMOVE" desc="Label for a context menu item that removes the selected password." meaning="Remove selected password.">
-   Remove
+    Remove
   </message>
   <message name="IDS_SETTINGS_PASSWORDS_EDIT_TITLE" desc="Title for the 'Edit saved password' dialog. This dialog lets a user see a saved password and copy the username.">
     Edit saved password

chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.html

+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-textarea.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-address-edit-dialog">
+  <style include="settings-shared">
+    .address-row {
+      display: flex;
+    }
+
+    .address-column {
+      -webkit-margin-end: 16px;
+      margin-bottom: 8px;
+      width: calc((var(--paper-input-max-width) - 16px) / 2);
+    }
+
+    .long {
+      width: var(--paper-input-max-width);
+    }
+
+    #saveButton {
+      -webkit-margin-start: 8px;
+    }
+  </style>
+  <template>
+    <cr-dialog id="dialog">
+      <div class="title">[[title_]]</div>
+      <div class="body">
+        <template is="dom-repeat" items="[[addressWrapper_]]">
+          <div class="address-row">
+            <template is="dom-repeat" items="[[item]]">
+              <template is="dom-if" if="[[item.isTextArea]]">
+                <paper-textarea label="[[item.component.fieldName]]"
+                    value="{{item.value}}" on-value-changed="updateCanSave_"
+                    class$="address-column [[long_(item)]]" always-float-label>
+                </paper-textarea>
+              </template>
+              <template is="dom-if" if="[[!item.isTextArea]]">
+                <paper-input type="text" label="[[item.component.fieldName]]"
+                    always-float-label value="{{item.value}}"
+                    on-value-changed="updateCanSave_"
+                    class$="address-column [[long_(item)]]"></paper-input>
+              </template>
+            </template>
+          </div>
+        </template>
+        <div class="address-row">
+          <paper-dropdown-menu class="country-dropdown address-column long"
+              on-value-changed="updateCanSave_" label="$i18n{addressCountry}"
+              always-float-label>
+            <paper-listbox id="countryList" class="dropdown-content"
+                selected="{{countryCode_}}" attr-for-selected="code">
+              <template is="dom-repeat" items="[[countries_]]">
+                <paper-item code="[[getCode_(item)]]"
+                    disabled="[[isDivision_(item)]]">
+                  [[getName_(item)]]
+                </paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+        <div class="address-row">
+          <paper-input id="phoneInput" type="text" label="$i18n{addressPhone}"
+              always-float-label class="address-column"
+              on-value-changed="updateCanSave_" value="{{phoneNumber_}}">
+          </paper-input>
+          <paper-input id="emailInput" type="text" label="$i18n{addressEmail}"
+              on-value-changed="updateCanSave_" always-float-label
+              class="address-column long" value="{{email_}}">
+          </paper-input>
+        </div>
+      </div>
+      <div class="button-container">
+        <paper-button id="cancelButton" dialog-dismiss>
+          $i18n{cancel}
+        </paper-button>
+        <paper-button id="saveButton" class="action-button"
+            disabled="[[!canSave_]]" on-tap="onSaveButtonTap_">
+          $i18n{save}
+        </paper-button>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="/passwords_and_forms_page/address_edit_dialog.js"></script>
+</dom-module>

chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="/passwords_and_forms_page/address_edit_dialog.html">
 <link rel="import" href="/passwords_and_forms_page/credit_card_edit_dialog.html">
 <link rel="import" href="/passwords_and_forms_page/passwords_shared_css.html">
 <link rel="import" href="/settings_shared_css.html">
@@ -67,6 +68,8 @@
       <div id="menuRemoveAddress" class="list-item menu-item"
           on-tap="onMenuRemoveAddressTap_">$i18n{removeAddress}</div>
     </cr-shared-menu>
+    <settings-address-edit-dialog id="addressEditDialog">
+    </settings-address-edit-dialog>
     <div class="heading">$i18n{creditCards}</div>
     <div class="item-list">
       <div class="list-item column-header">

chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js

@@ -75,8 +75,8 @@
      * @private
      */
     onAddAddressTap_: function(e) {
-      // TODO(hcarmona): implement adding an address.
       e.preventDefault();
+      this.$.addressEditDialog.open({});
     },
 
     /**
@@ -88,9 +88,9 @@
       /** @type {chrome.autofillPrivate.AddressEntry} */
       var address = menu.itemData;
 
-      // TODO(hcarmona): implement editing a local address.
-
-      if (!address.metadata.isLocal)
+      if (address.metadata.isLocal)
+        this.$.addressEditDialog.open(address);
+      else
         window.open(this.i18n('manageAddressesUrl'));
 
       menu.closeMenu();

chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp

@@ -22,10 +22,20 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp:cr_shared_menu',
         '<(EXTERNS_GYP):autofill_private',
+        'address_edit_dialog',
         'credit_card_edit_dialog',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'address_edit_dialog',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(EXTERNS_GYP):autofill_private',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'credit_card_edit_dialog',
       'dependencies': [

chrome/browser/resources/settings/settings_resources.grd

@@ -548,6 +548,12 @@
       <structure name="IDR_SETTINGS_AUTOFILL_SECTION_JS"
                  file="passwords_and_forms_page/autofill_section.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_ADDRESS_EDIT_DIALOG_HTML"
+                 file="passwords_and_forms_page/address_edit_dialog.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_ADDRESS_EDIT_DIALOG_JS"
+                 file="passwords_and_forms_page/address_edit_dialog.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_PASSWORDS_SECTION_HTML"
                  file="passwords_and_forms_page/passwords_section.html"
                  type="chrome_html" />

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -704,6 +704,11 @@ void AddPasswordsAndFormsStrings(content::WebUIDataSource* html_source) {
       {"googlePayments", IDS_SETTINGS_GOOGLE_PAYMENTS},
       {"googlePaymentsCached", IDS_SETTINGS_GOOGLE_PAYMENTS_CACHED},
       {"addresses", IDS_SETTINGS_AUTOFILL_ADDRESSES_HEADING},
+      {"addAddressTitle", IDS_SETTINGS_AUTOFILL_ADDRESSES_ADD_TITLE},
+      {"editAddressTitle", IDS_SETTINGS_AUTOFILL_ADDRESSES_EDIT_TITLE},
+      {"addressCountry", IDS_SETTINGS_AUTOFILL_ADDRESSES_COUNTRY},
+      {"addressPhone", IDS_SETTINGS_AUTOFILL_ADDRESSES_PHONE},
+      {"addressEmail", IDS_SETTINGS_AUTOFILL_ADDRESSES_EMAIL},
       {"addAddress", IDS_SETTINGS_AUTOFILL_ADD_ADDRESS_BUTTON},
       {"editAddress", IDS_SETTINGS_ADDRESS_EDIT},
       {"removeAddress", IDS_SETTINGS_ADDRESS_REMOVE},

chrome/test/data/webui/settings/passwords_and_autofill_fake_data.js

@@ -43,6 +43,14 @@ FakeDataMaker.exceptionEntry = function(url) {
   };
 };
 
+/**
+ * Creates a new fake address entry for testing.
+ * @return {!chrome.autofillPrivate.AddressEntry}
+ */
+FakeDataMaker.emptyAddressEntry = function() {
+  return {};
+}
+
 /**
  * Creates a fake address entry for testing.
  * @return {!chrome.autofillPrivate.AddressEntry}
@@ -50,11 +58,11 @@ FakeDataMaker.exceptionEntry = function(url) {
 FakeDataMaker.addressEntry = function() {
   var ret = {};
   ret.guid = FakeDataMaker.makeGuid_();
-  ret.fullNames = ['John', 'Doe'];
+  ret.fullNames = ['John Doe'];
   ret.companyName = 'Google';
   ret.addressLines = FakeDataMaker.patternMaker_('xxxx Main St', 10);
-  ret.addressLevel1 = "CA";
-  ret.addressLevel2 = "Venice";
+  ret.addressLevel1 = 'CA';
+  ret.addressLevel2 = 'Venice';
   ret.postalCode = FakeDataMaker.patternMaker_('xxxxx', 10);
   ret.countryCode = 'US';
   ret.phoneNumbers = [FakeDataMaker.patternMaker_('(xxx) xxx-xxxx', 10)];