Add Edit/Create Address Dialog to MD Settings.

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js b/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..8f7fb6e05cf95c6c1f080c2d8884d7bf5810233b
--- /dev/null
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/address_edit_dialog.js
@@ -0,0 +1,371 @@
+// Copyright 2016 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.
+
+/**
+ * @fileoverview 'password-edit-dialog' is the dialog that allows showing a
+ * saved password.
+ */
+(function() {
+'use strict';
+
+Polymer({
+  is: 'settings-address-edit-dialog',
+
+  properties: {
+    /** @private {!chrome.autofillPrivate.AddressEntry} */
+    address_: Object,
+
+    /** @private */
+    title_: String,
+
+    /** @private {!Array<!chrome.autofillPrivate.CountryEntry>} */
+    countries_: Array,
+
+    /** @private {string|undefined} */
+    countryCode_: {
+      type: String,
+      observer: 'onUpdateCountryCode_',
+    },
+
+    /** @type {!Array<!Array<!settings.address.AddressComponentUI>>} */

[michaelpg, 2016/06/27 21:29:18]

private

[hcarmona, 2016/06/28 00:27:10]

Done.

+    addressWrapper_: Object,
+
+    /** @private */
+    phoneNumber_: {
+      type: String,
+      observer: 'onUpdatePhoneNumber_',
+    },
+
+    /** @private */
+    email_: {
+      type: String,
+      observer: 'onUpdateEmail_',
+    },
+
+    /** @private */
+    canSave_: Boolean,
+  },
+
+  behaviors: [
+    I18nBehavior,

[michaelpg, 2016/06/27 21:29:18]

nit: behaviors before properties
https://www.chromium.org/developers/web-development-style-guide

[hcarmona, 2016/06/28 00:27:10]

Done.

+  ],
+
+  /** @override */
+  ready: function() {
+    this.countryInfo =
+        settings.address.CountryDetailManagerImpl.getInstance();
+
+    this.countryInfo.getCountryList().then(function(countryList) {
+      this.countries_ = countryList;
+    }.bind(this));
+  },
+
+  /**
+   * Opens the dialog to edit |address|
+   * @param {!chrome.autofillPrivate.AddressEntry} address
+   */
+  open: function(address) {
+    this.title_ =
+        this.i18n(address.guid ? 'editAddressTitle' : 'addAddressTitle');
+    this.address_ = address;
+
+    // |phoneNumbers| and |emailAddresses| are a single item array.
+    // See crbug.com/497934 for details.
+    this.phoneNumber_ = address.phoneNumbers ? address.phoneNumbers[0] : '';
+    this.email_ = address.emailAddresses ? address.emailAddresses[0] : '';
+
+    if (this.countryCode_ == address.countryCode)
+      this.updateAddressWrapper_();
+    else
+      this.countryCode_ = address.countryCode;  // Updates the address wrapper.
+
+    // Open is called on the dialog after the address wrapper has been updated.
+  },
+
+  /**
+   * Returns a class to denote how long this entry is.
+   * @param {settings.address.AddressComponentUI} setting
+   * @return {string}
+   */
+  long_: function(setting) {
+    return setting.component.isLongField ? 'long' : '';
+  },
+
+  /**
+   * Updates the wrapper that represents this address in the country's format.
+   * @private
+   */
+  updateAddressWrapper_: function() {
+    var self = this;
+
+    // Default to the last country used if no country code is provided.
+    var countryCode = self.countryCode_ || self.countries_[0].countryCode;
+    self.countryInfo.getAddressFormat(countryCode).then(function(format) {
+      /** @type {!Array<!Array<!settings.address.AddressComponentUI>>} */
+      var wrapper = [];
+      format.components.forEach(function(component) {
+        /** @type {!Array<!settings.address.AddressComponentUI>} */
+        var components = [];
+        wrapper.push(components);
+
+        component.row.forEach(function(component) {
+          components.push(new settings.address.AddressComponentUI(
+              self.address_, component));
+        });
+      });
+      self.addressWrapper_ = wrapper;
+
+      // Flush dom before resize and savability updates.
+      Polymer.dom.flush();
+
+/**
+ * TODO(hcarmona): Fix closure compiler to better understand |SettingsDialog|.
+ * @suppress {missingProperties}
+ */
+(function() {
+      self.$.dialog.notifyResize();
+
+      self.updateCanSave_();
+
+      self.fire('on-update-address-wrapper');  // For easier testing.
+
+      if (!self.$.dialog.opened)
+        self.$.dialog.open();
+})();
+    });
+  },
+
+  updateCanSave_: function() {
+    var inputs = this.$.dialog.querySelectorAll('.address-column');
+
+    for (var i = 0; i < inputs.length; ++i) {
+      if (inputs[i].value) {
+        this.canSave_ = true;
+        this.fire('on-update-can-save');  // For easier testing.
+        return;
+      }
+    }
+
+    this.canSave_ = false;
+    this.fire('on-update-can-save');  // For easier testing.
+  },
+
+  /**
+   * @param {!chrome.autofillPrivate.CountryEntry} country
+   * @return {string}
+   * @private
+   */
+  getCode_: function(country) {
+    return country.countryCode || 'SPACER';
+  },
+
+  /**
+   * @param {!chrome.autofillPrivate.CountryEntry} country
+   * @return {string}
+   * @private
+   */
+  getName_: function(country) {
+    return country.name || '------';
+  },
+
+  /**
+   * @param {!chrome.autofillPrivate.CountryEntry} country
+   * @return {boolean}
+   * @private
+   */
+  isDivision_: function(country) {
+    return !country.countryCode;
+  },
+
+  /**
+   * Handler for tapping the save button.
+   * @private
+   */
+  onSaveButtonTap_: function() {
+    // Set a default country if none is set.
+    if (!this.address_.countryCode)
+      this.address_.countryCode = this.countries_[0].countryCode;
+
+    this.fire('save-address', this.address_);
+    this.$.dialog.close();
+  },
+
+  /**
+   * Syncs the country code back to the address and rebuilds the address wrapper
+   * for the new location.
+   * @param {string|undefined} countryCode
+   * @private
+   */
+  onUpdateCountryCode_: function(countryCode) {
+    this.address_.countryCode = countryCode;
+    this.updateAddressWrapper_();
+  },
+
+  /**
+   * Syncs the phone number back to the address. An address can have only one
+   * phone number. Variants are deprecated.
+   * @param {string} phoneNumber
+   */
+  onUpdatePhoneNumber_: function(phoneNumber) {
+    if (this.address_)
+      this.address_.phoneNumbers = [phoneNumber];
+  },
+
+  /**
+   * Syncs the email back to the address. An address can have only one email.
+   * Variants are deprecated.
+   * @param {string} email
+   */
+  onUpdateEmail_: function(email) {
+    if (this.address_)
+      this.address_.emailAddresses = [email];
+  },
+});
+})();
+
+cr.define('settings.address', function() {
+  /**
+   * Creates a wrapper against a single data member for an address.
+   * @param {!chrome.autofillPrivate.AddressEntry} address
+   * @param {!chrome.autofillPrivate.AddressComponent} component
+   * @constructor
+   */
+  function AddressComponentUI(address, component) {
+    Object.defineProperty(this, 'value', {
+      get: function() {
+        return AddressComponentUI.getValue_(address, component.field);
+      },
+      set: function(newValue) {
+        AddressComponentUI.setValue_(address, component.field, newValue);
+      },
+    });
+    this.component = component;
+    this.isTextArea =
+        component.field == chrome.autofillPrivate.AddressField.ADDRESS_LINES;
+  }
+
+  /**
+   * Gets the |field| value from the address.
+   * @param {!chrome.autofillPrivate.AddressEntry} address
+   * @param {chrome.autofillPrivate.AddressField} field
+   * @return {string|undefined}
+   * @private
+   */
+  AddressComponentUI.getValue_ = function(address, field) {

[michaelpg, 2016/06/27 21:29:18]

optional suggestion: make getValue_ and setValue_ members of the
AddressComponentUI prototype so they can just use |this.address| and
|this.component|, rather than passing address and field as parameters

[hcarmona, 2016/06/28 00:27:10]

Done.

+    switch (field) {
+      case chrome.autofillPrivate.AddressField.FULL_NAME:
+        // |fullNames| is a single item array. See crbug.com/497934 for details.
+        return address.fullNames ? address.fullNames[0] : undefined;
+      case chrome.autofillPrivate.AddressField.COMPANY_NAME:
+        return address.companyName;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LINES:
+        return address.addressLines;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LEVEL_1:
+        return address.addressLevel1;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LEVEL_2:
+        return address.addressLevel2;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LEVEL_3:
+        return address.addressLevel3;
+      case chrome.autofillPrivate.AddressField.POSTAL_CODE:
+        return address.postalCode;
+      case chrome.autofillPrivate.AddressField.SORTING_CODE:
+        return address.sortingCode;
+      case chrome.autofillPrivate.AddressField.COUNTRY_CODE:
+        return address.countryCode;
+      default:
+        assertNotReached();
+    }
+  };
+
+  /**
+   * Gets a setter for the |field| value from the address.

[michaelpg, 2016/06/27 21:29:18]

update comment (Sets...)

[hcarmona, 2016/06/28 00:27:10]

Done.

+   * @param {!chrome.autofillPrivate.AddressEntry} address
+   * @param {chrome.autofillPrivate.AddressField} field
+   * @param {string} value
+   * @private
+   */
+  AddressComponentUI.setValue_ = function(address, field, value) {
+    switch (field) {
+      case chrome.autofillPrivate.AddressField.FULL_NAME:
+          address.fullNames = [value];
+          break;
+      case chrome.autofillPrivate.AddressField.COMPANY_NAME:
+        address.companyName = value;
+        break;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LINES:
+        address.addressLines = value;
+        break;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LEVEL_1:
+        address.addressLevel1 = value;
+        break;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LEVEL_2:
+        address.addressLevel2 = value;
+        break;
+      case chrome.autofillPrivate.AddressField.ADDRESS_LEVEL_3:
+        address.addressLevel3 = value;
+        break;
+      case chrome.autofillPrivate.AddressField.POSTAL_CODE:
+        address.postalCode = value;
+        break;
+      case chrome.autofillPrivate.AddressField.SORTING_CODE:
+        address.sortingCode = value;
+        break;
+      case chrome.autofillPrivate.AddressField.COUNTRY_CODE:
+        address.countryCode = value;
+        break;
+      default:
+        assertNotReached();
+    }
+  };
+
+  /** @interface */
+  function CountryDetailManager() {}
+  CountryDetailManager.prototype = {
+    /**
+     * Gets the list of available countries.
+     * The default country will be first, followed by a separator, followed by
+     * an alphabetized list of countries available.
+     * @return {!Promise<!Array<!chrome.autofillPrivate.CountryEntry>>} callback

[michaelpg, 2016/06/27 21:29:18]

nit: remove "callback" name

[hcarmona, 2016/06/28 00:27:10]

Done.

+     */
+    getCountryList: assertNotReached,
+
+    /**
+     * Gets the address format for a given country code.
+     * @param {string} countryCode
+     * @return {!Promise<!chrome.autofillPrivate.AddressComponents>} callback

[michaelpg, 2016/06/27 21:29:18]

same

[hcarmona, 2016/06/28 00:27:10]

Done.

+     */
+    getAddressFormat: assertNotReached,
+  };
+
+  /**
+   * Default implementation. Override for testing.
+   * @implements {settings.address.CountryDetailManager}
+   * @constructor
+   */
+  function CountryDetailManagerImpl() {}
+  cr.addSingletonGetter(CountryDetailManagerImpl);
+  CountryDetailManagerImpl.prototype = {
+    __proto__: CountryDetailManager,
+
+    /** @override */
+    getCountryList: function() {
+      return new Promise(function(callback) {
+        chrome.autofillPrivate.getCountryList(callback);
+      });
+    },
+
+    /** @override */
+    getAddressFormat: function(countryCode) {
+      return new Promise(function(callback) {
+        chrome.autofillPrivate.getAddressComponents(countryCode, callback);
+      });
+    },
+  };
+
+  return {
+    AddressComponentUI: AddressComponentUI,
+    CountryDetailManager: CountryDetailManager,
+    CountryDetailManagerImpl: CountryDetailManagerImpl,
+  };
+});