[AF Sync] Re-order autofill related toggles in sync setup page.

Put the Password, Autofill and Payments toggle next to each other, at
the end of the list.

Also updated the "Autofill" string to
"Addresses, phone numbers, and more"

Bug: 905347
Change-Id: I17ea4a753d5af4426316158669adfd924b3d188f
Reviewed-on: https://chromium-review.googlesource.com/c/1336054Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Sebastien Seguin-Gagnon <sebsg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611429}

chrome/app/settings_strings.grdp

@@ -3646,7 +3646,7 @@
     Settings
   </message>
   <message name="IDS_SETTINGS_AUTOFILL_CHECKBOX_LABEL" desc="Label for the checkbox which enables or disables syncing autofill settings between multiple browser instances.">
-    Autofill
+    Addresses, phone numbers, and more
   </message>
   <message name="IDS_SETTINGS_HISTORY_CHECKBOX_LABEL" desc="Label for the checkbox which enables or disables syncing history between multiple browser instances.">
     History

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

@@ -234,21 +234,6 @@
             </cr-toggle>
           </div>
 
-          <div class="layout horizontal list-item"
-              hidden="[[!syncPrefs.autofillRegistered]]">
-            <div id="autofillCheckboxLabel" class="flex">
-              $i18n{autofillCheckboxLabel}
-            </div>
-            <!-- Autofill has a special on-change handler to deal with
-                 Payments integration. -->
-            <cr-toggle checked="{{syncPrefs.autofillSynced}}"
-                on-change="onAutofillDataTypeChanged_"
-                disabled="[[shouldSyncCheckboxBeDisabled_(
-                    syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]"
-                aria-labelledby="autofillCheckboxLabel">
-            </cr-toggle>
-          </div>
-
           <div class="layout horizontal list-item"
               hidden="[[!syncPrefs.bookmarksRegistered]]">
             <div id="bookmarksCheckboxLabel" class="flex">
@@ -291,19 +276,6 @@
             </cr-toggle>
           </div>
 
-          <div class="layout horizontal list-item"
-              hidden="[[!syncPrefs.passwordsRegistered]]">
-            <div id="passwordsCheckboxLabel" class="flex">
-              $i18n{passwordsCheckboxLabel}
-            </div>
-            <cr-toggle checked="{{syncPrefs.passwordsSynced}}"
-                on-change="onSingleSyncDataTypeChanged_"
-                disabled="[[shouldSyncCheckboxBeDisabled_(
-                    syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]"
-                aria-labelledby="passwordsCheckboxLabel">
-            </cr-toggle>
-          </div>
-
           <div class="layout horizontal list-item"
               hidden="[[!syncPrefs.preferencesRegistered]]">
             <div id="settingsCheckboxLabel" class="flex">
@@ -344,6 +316,34 @@
             </cr-toggle>
           </div>
 
+          <div class="layout horizontal list-item"
+              hidden="[[!syncPrefs.passwordsRegistered]]">
+            <div id="passwordsCheckboxLabel" class="flex">
+              $i18n{passwordsCheckboxLabel}
+            </div>
+            <cr-toggle checked="{{syncPrefs.passwordsSynced}}"
+                on-change="onSingleSyncDataTypeChanged_"
+                disabled="[[shouldSyncCheckboxBeDisabled_(
+                    syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]"
+                aria-labelledby="passwordsCheckboxLabel">
+            </cr-toggle>
+          </div>
+
+          <div class="layout horizontal list-item"
+              hidden="[[!syncPrefs.autofillRegistered]]">
+            <div id="autofillCheckboxLabel" class="flex">
+              $i18n{autofillCheckboxLabel}
+            </div>
+            <!-- Autofill has a special on-change handler to deal with
+                 Payments integration. -->
+            <cr-toggle checked="{{syncPrefs.autofillSynced}}"
+                on-change="onAutofillDataTypeChanged_"
+                disabled="[[shouldSyncCheckboxBeDisabled_(
+                    syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]"
+                aria-labelledby="autofillCheckboxLabel">
+            </cr-toggle>
+          </div>
+
           <div class="layout horizontal list-item"
               hidden="[[!syncPrefs.autofillRegistered]]">
             <!-- The Payments integration checkbox is a special case in many

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

@@ -428,7 +428,7 @@ cr.define('settings_people_page_sync_page', function() {
         browserProxy.resetResolver('setSyncDatatypes');
 
         // Test an arbitrarily-selected control (extensions synced control).
-        datatypeControls[3].click();
+        datatypeControls[2].click();
         return browserProxy.whenCalled('setSyncDatatypes')
             .then(function(prefs) {
               const expected = getSyncAllPrefs();