[Settings Autofill Card Migration] Add syncStatus in the payments_section

Since we only offer local cards migration to signed-in and synced user, we have to get the syncStatus in the payments_section in order to check the migration requirements in the payments_section.js.

We use the similar code from the people_page.js to add the syncStatus property from SyncBrowserProxy in the payments_section.

Please refer to the design doc for more details: https://docs.google.com/document/d/1J7YyBeKZZaBhjAHnMEezvuBa5x1pk_XCh_yZvV_HMmc/edit#heading=h.1wm3blr98d8i

Bug: 852904
Change-Id: I9786fd491780a6daf71d19da94da4b048ad59ed2
Reviewed-on: https://chromium-review.googlesource.com/1168386Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Fabio Tirelo <ftirelo@chromium.org>
Commit-Queue: Sujie Zhu <sujiezhu@google.com>
Cr-Commit-Position: refs/heads/master@{#582229}

chrome/browser/resources/settings/passwords_and_forms_page/BUILD.gn

@@ -50,9 +50,11 @@ js_library("autofill_section") {
 js_library("payments_section") {
   deps = [
     ":credit_card_edit_dialog",
+    "../people_page:sync_browser_proxy",
     "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:load_time_data",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
     "//ui/webui/resources/js/cr/ui:focus_without_ink",
   ]
   externs_list = [ "$externs_path/autofill_private.js" ]

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

@@ -4,11 +4,13 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../prefs/prefs.html">
+<link rel="import" href="../people_page/sync_browser_proxy.html">
 <link rel="import" href="credit_card_edit_dialog.html">
 <link rel="import" href="passwords_shared_css.html">
 

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

@@ -90,6 +90,10 @@ cr.addSingletonGetter(PaymentsManagerImpl);
 Polymer({
   is: 'settings-payments-section',
 
+  behaviors: [
+    WebUIListenerBehavior,
+  ],
+
   properties: {
     /**
      * An array of saved credit cards.
@@ -105,6 +109,14 @@ Polymer({
 
     /** @private */
     showCreditCardDialog_: Boolean,
+
+    /**
+     * The current sync status, supplied by SyncBrowserProxy.
+     * TODO(sujiezhu): Use this to check migration requirements when all
+     * information is ready. (https://crbug.com/852904).
+     * @type {?settings.SyncStatus}
+     */
+    syncStatus: Object,
   },
 
   listeners: {
@@ -130,6 +142,9 @@ Polymer({
    */
   setCreditCardsListener_: null,
 
+  /** @private {?settings.SyncBrowserProxy} */
+  syncBrowserProxy_: null,
+
   /** @override */
   attached: function() {
     // Create listener function.
@@ -150,6 +165,12 @@ Polymer({
     // Listen for changes.
     this.paymentsManager_.addCreditCardListChangedListener(
         setCreditCardsListener);
+
+    this.syncBrowserProxy_ = settings.SyncBrowserProxyImpl.getInstance();
+    this.syncBrowserProxy_.getSyncStatus().then(
+        this.handleSyncStatus_.bind(this));
+    this.addWebUIListener(
+        'sync-status-changed', this.handleSyncStatus_.bind(this));
   },
 
   /** @override */
@@ -302,5 +323,14 @@ Polymer({
   saveCreditCard_: function(event) {
     this.paymentsManager_.saveCreditCard(event.detail);
   },
+
+  /**
+   * Handler for when the sync state is pushed from the browser.
+   * @param {?settings.SyncStatus} syncStatus
+   * @private
+   */
+  handleSyncStatus_: function(syncStatus) {
+    this.syncStatus = syncStatus;
+  },
 });
 })();