Settings: Add notification in sync page for first-time setup

Bug: 800978, 806912
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I1dc46cb8f28783123555fc4be187724ff41d5b70
Reviewed-on: https://chromium-review.googlesource.com/956414Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543866}

chrome/app/settings_strings.grdp

@@ -3156,6 +3156,14 @@
   <message name="IDS_SETTINGS_SYNC_LOADING" desc="The message shown when waiting for the sync backend to start up.">
     Please wait...
   </message>
+  <if expr="not chromeos">
+    <message name="IDS_SETTINGS_SYNC_WILL_START" desc="The message to tell users that sync will start once they leave the sync setup page.">
+      Sync will start once you leave this page
+    </message>
+    <message name="IDS_SETTINGS_SYNC_SETTINGS_CANCEL_SYNC" desc="The label of button that allows user to cancel sync.">
+      Cancel sync
+    </message>
+  </if>
   <message name="IDS_SETTINGS_SYNC_TIMEOUT" desc="Text explaining what to do if sync times out.">
     Check your internet connection. If the problem continues, try signing out and signing in again.
   </message>

chrome/browser/resources/settings/people_page/people_page.html

@@ -287,7 +287,11 @@
             associated-control="[[$$('#sync-status')]]"
             page-title="$i18n{syncPageTitle}"
             no-search$="[[!isAdvancedSyncSettingsVisible_(syncStatus)]]">
-          <settings-sync-page></settings-sync-page>
+          <settings-sync-page
+<if expr="not chromeos">
+              setup-in-progress="[[syncStatus.setupInProgress]]"
+</if>
+          ></settings-sync-page>
         </settings-subpage>
       </template>
 <if expr="chromeos">
@@ -387,7 +391,6 @@
           on-close="onImportDataDialogClosed_">
       </settings-import-data-dialog>
     </template>
-
 <if expr="not chromeos">
     <cr-toast duration="3000" id="toast">
       $i18n{syncSettingsSavedToast}

chrome/browser/resources/settings/people_page/sync_browser_proxy.js

@@ -180,8 +180,9 @@ cr.define('settings', function() {
     /**
      * Function to invoke when leaving the sync page so that the C++ layer can
      * be notified that the sync UI is no longer open.
+     * @param {boolean} didAbort
      */
-    didNavigateAwayFromSyncPage() {}
+    didNavigateAwayFromSyncPage(didAbort) {}
 
     /**
      * Sets which types of data to sync.
@@ -274,8 +275,8 @@ cr.define('settings', function() {
     }
 
     /** @override */
-    didNavigateAwayFromSyncPage() {
-      chrome.send('SyncSetupDidClosePage');
+    didNavigateAwayFromSyncPage(didAbort) {
+      chrome.send('SyncSetupDidClosePage', [didAbort]);
     }
 
     /** @override */

chrome/browser/resources/settings/people_page/sync_page.html

@@ -14,6 +14,10 @@
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
+<if expr="not chromeos">
+<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
+</if>
+
 <dom-module id="settings-sync-page">
   <template>
     <style include="settings-shared iron-flex">
@@ -60,6 +64,29 @@
       #sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) {
         border-top: var(--settings-separator-line);
       }
+
+<if expr="not chromeos">
+      #toast {
+        color: white;
+        left: 0;
+        z-index: 1;
+      }
+
+      :host-context([dir='rtl']) #toast {
+        left: auto;
+        right: 0;
+      }
+
+      #toast paper-button {
+        -webkit-margin-end: 0;
+        -webkit-margin-start: 32px;
+        color: var(--google-blue-300);
+        font-weight: 500;
+        height: 32px;
+        min-width: 52px;
+        padding: 8px;
+      }
+</if>
     </style>
     <div id="[[pages_.SPINNER]]" class="settings-box first"
         hidden$="[[!isStatus_(pages_.SPINNER, pageStatus_)]]">
@@ -335,6 +362,14 @@
         </div>
       </template>
     </div>
+<if expr="not chromeos">
+    <cr-toast id="toast" open="[[setupInProgress]]">
+      $i18n{syncWillStart}
+      <paper-button on-click="onCancelSyncClick_">
+        $i18n{cancelSync}
+      </paper-button>
+    </cr-toast>
+</if>
   </template>
   <script src="sync_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/people_page/sync_page.js

@@ -53,6 +53,14 @@ Polymer({
       type: Object,
     },
 
+    // <if expr="not chromeos">
+    /** @private */
+    setupInProgress: {
+      type: Boolean,
+      value: false,
+    },
+    // </if>
+
     /**
      * Whether the "create passphrase" inputs should be shown. These inputs
      * give the user the opportunity to use a custom passphrase instead of
@@ -103,6 +111,12 @@ Polymer({
    */
   unloadCallback_: null,
 
+  /**
+   * Whether the user decided to abort sync.
+   * @private {boolean}
+   */
+  didAbort_: false,
+
   /** @override */
   created: function() {
     this.browserProxy_ = settings.SyncBrowserProxyImpl.getInstance();
@@ -123,6 +137,11 @@ Polymer({
   detached: function() {
     if (settings.getCurrentRoute() == settings.routes.SYNC)
       this.onNavigateAwayFromPage_();
+
+    if (this.unloadCallback_) {
+      window.removeEventListener('unload', this.unloadCallback_);
+      this.unloadCallback_ = null;
+    }
   },
 
   /** @protected */
@@ -167,7 +186,8 @@ Polymer({
     // search useful content when the page is not visible to the user.
     this.pageStatus_ = settings.PageStatus.CONFIGURE;
 
-    this.browserProxy_.didNavigateAwayFromSyncPage();
+    this.browserProxy_.didNavigateAwayFromSyncPage(this.didAbort_);
+    this.didAbort_ = false;
 
     window.removeEventListener('unload', this.unloadCallback_);
     this.unloadCallback_ = null;
@@ -397,7 +417,13 @@ Polymer({
       // checkboxes or radio buttons won't change the value.
       event.stopPropagation();
     }
-  }
+  },
+
+  /** @private */
+  onCancelSyncClick_: function() {
+    this.didAbort_ = true;
+    settings.navigateTo(settings.routes.BASIC);
+  },
 });
 
 })();

chrome/browser/resources/settings/settings_resources.grd

@@ -1055,7 +1055,8 @@
                  allowexternalscript="true" />
       <structure name="IDR_SETTINGS_SYNC_PAGE_JS"
                  file="people_page/sync_page.js"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_SETTINGS_SYNC_PAGE_HTML"
                  file="people_page/sync_page.html"
                  type="chrome_html"

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

@@ -1498,7 +1498,9 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"editPerson", IDS_SETTINGS_EDIT_PERSON},
     {"profileNameAndPicture", IDS_SETTINGS_PROFILE_NAME_AND_PICTURE},
     {"showShortcutLabel", IDS_SETTINGS_PROFILE_SHORTCUT_TOGGLE_LABEL},
+    {"syncWillStart", IDS_SETTINGS_SYNC_WILL_START},
     {"syncSettingsSavedToast", IDS_SETTINGS_SYNC_SETTINGS_SAVED_TOAST_LABEL},
+    {"cancelSync", IDS_SETTINGS_SYNC_SETTINGS_CANCEL_SYNC},
 #endif  // defined(OS_CHROMEOS)
 #if BUILDFLAG(ENABLE_DICE_SUPPORT)
     {"peopleSignIn", IDS_SETTINGS_PEOPLE_SIGN_IN},

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

@@ -380,7 +380,11 @@ void PeopleHandler::DisplayTimeout() {
 }
 
 void PeopleHandler::OnDidClosePage(const base::ListValue* args) {
+  // Don't mark setup as complete if "didAbort" is true.
+  if (!args->GetList()[0].GetBool()) {
     MarkFirstSetupComplete();
+  }
+
   CloseSyncSetup();
 }
 

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

@@ -418,5 +418,22 @@ cr.define('settings_people_page_sync_page', function() {
             assertTrue(encryptWithPassphrase.disabled);
           });
     });
+
+    if (!cr.isChromeOS) {
+      test('FirstTimeSetupNotification', function() {
+        assertTrue(!!syncPage.$.toast);
+        assertFalse(syncPage.$.toast.open);
+        syncPage.setupInProgress = true;
+        Polymer.dom.flush();
+        assertTrue(syncPage.$.toast.open);
+
+        MockInteractions.tap(syncPage.$.toast.querySelector('paper-button'));
+
+        return browserProxy.whenCalled('didNavigateAwayFromSyncPage')
+            .then(abort => {
+              assertTrue(abort);
+            });
+      });
+    }
   });
 });

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

@@ -78,8 +78,8 @@ class TestSyncBrowserProxy extends TestBrowserProxy {
   }
 
   /** @override */
-  didNavigateAwayFromSyncPage() {
-    this.methodCalled('didNavigateAwayFromSyncPage');
+  didNavigateAwayFromSyncPage(abort) {
+    this.methodCalled('didNavigateAwayFromSyncPage', abort);
   }
 
   /** @override */