Settings[Unified-Consent]: add personalization toggles to sync subpage

This CL does the following:
- add an <iron-collapse> containing <settings-personalization-options>
in the sync subpage when unified-consent is enabled.
- hide <settings-personalization-options> when unified-consent is enabled,
and instead show description with a link to the sync subpage.

screenshots: https://imgur.com/a/3keIzR3

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

chrome/app/settings_strings.grdp

@@ -2418,6 +2418,9 @@
   <message name="IDS_SETTINGS_TITLE_AND_COUNT" desc="The title of a section in the settings page with a count of the total number of items in the section">
     <ph name="TITLE">$1<ex>Block</ex></ph> - <ph name="COUNT">$2<ex>42</ex></ph>
   </message>
+  <message name="IDS_SETTINGS_PRIVACY_MORE_SETTINGS" desc="The text with a link to point users to more sync and personalization settings">
+    For more settings that relate to privacy, security, and data collection, see <ph name="BEGIN_LINK">&lt;a href=&quot;chrome://settings/syncSetup&quot;&gt;<ex>&lt;a href=&quot;chrome://settings/syncSetup&quot;&gt;</ex></ph>Sync and personalization<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>
+  </message>
 
   <!-- Reset Settings Page -->
   <message name="IDS_SETTINGS_RESET" desc="Title for an item in the 'Reset and clean up' section of Chrome Settings. If the user clicks this option, browser settings will be returned to their default values, after a confirmation by the user." meaning="Chrome Cleanup feature. Try to use the same translation for 'Reset' in 'Reset and cleanup' string.">
@@ -3362,6 +3365,15 @@
   <message name="IDS_SETTINGS_SYNC_SECTION_ACCESSIBILITY_LABEL" desc="Label for the button that toggles showing the sync settings. Only visible by screen reader software.">
     Show sync settings
   </message>
+  <message name="IDS_SETTINGS_PERSONALIZATION_SECTION_LABEL" desc="Title for a section that shows options for various Google services">
+    Other Google services
+  </message>
+  <message name="IDS_SETTINGS_PERSONALIZATION_SECTION_DESC" desc="Brief explanation of the capability of Google services.">
+    Communicate with Google to improve browsing and Chrome
+  </message>
+  <message name="IDS_SETTINGS_PERSONALIZATION_SECTION_ACCESSIBILITY_LABEL" desc="Label for the button that toggles showing the google services settings. Only visible by screen reader software.">
+    Show Google services settings
+  </message>
   <message name="IDS_SETTINGS_SYNC_SYNC_AND_PERSONALIZATION" desc="The label of button that takes the user to manage their sync and personalization settings.">
     Sync and personalization
   </message>

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -127,7 +127,9 @@
         <template is="dom-if" if="[[showPage_(pageVisibility.people)]]" restamp>
           <settings-section page-title="$i18n{peoplePageTitle}"
               section="people">
-            <settings-people-page prefs="{{prefs}}"></settings-people-page>
+            <settings-people-page prefs="{{prefs}}"
+                page-visibility="[[pageVisibility]]">
+            </settings-people-page>
           </settings-section>
         </template>
         <template is="dom-if" if="[[showPage_(pageVisibility.appearance)]]"

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

@@ -172,6 +172,7 @@ js_library("people_page") {
     ":lock_state_behavior",
     ":profile_info_browser_proxy",
     ":sync_browser_proxy",
+    "..:page_visibility",
     "..:route",
     "../settings_page:settings_animated_pages",
     "//ui/webui/resources/cr_elements/chromeos/cr_picture:cr_png_behavior",
@@ -212,6 +213,7 @@ js_library("setup_pin_dialog") {
 js_library("sync_page") {
   deps = [
     ":sync_browser_proxy",
+    "..:page_visibility",
     "..:route",
     "../settings_page:settings_animated_pages",
     "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",

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

@@ -325,7 +325,8 @@
               dice-enabled="[[diceEnabled_]]"
 </if>
               unified-consent-enabled="[[unifiedConsentEnabled_]]"
-              sync-status="[[syncStatus]]">
+              sync-status="[[syncStatus]]" prefs="{{prefs}}"
+              page-visibility="[[pageVisibility.privacy]]">
           </settings-sync-page>
         </settings-subpage>
       </template>

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

@@ -61,6 +61,12 @@ Polymer({
      */
     syncStatus: Object,
 
+    /**
+     * Dictionary defining page visibility.
+     * @type {!GuestModePageVisibility}
+     */
+    pageVisibility: Object,
+
     /**
      * The currently selected profile icon URL. May be a data URL.
      * @private

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

@@ -13,6 +13,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="sync_browser_proxy.html">
+<link rel="import" href="../privacy_page/personalization_options.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
@@ -422,6 +423,25 @@
         </div>
       </div>
     </iron-collapse>
+    <template is="dom-if" if="[[unifiedConsentEnabled]]">
+      <div class="settings-box two-line" id="personalize-section-toggle"
+          actionable on-click="toggleExpandButton_">
+        <div class="start">
+          <div>$i18n{personalizationSectionLabel}</div>
+          <div class="secondary">$i18n{personalizationSectionDesc}</div>
+        </div>
+        <cr-expand-button expanded="{{personalizeSectionOpened_}}"
+            alt="$i18n{syncExpandA11yLabel}">
+        </cr-expand-button>
+      </div>
+      <iron-collapse id="personalize-section"
+          opened="[[personalizeSectionOpened_]]">
+        <settings-personalization-options class="list-frame" prefs="{{prefs}}"
+            page-visibility="[[pageVisibility]]"
+            unified-consent-enabled="[[unifiedConsentEnabled]]">
+        </settings-personalization-options>
+      </iron-collapse>
+    </template>
 
 <if expr="not chromeos">
     <cr-toast id="toast" open="[[syncStatus.setupInProgress]]">

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

@@ -27,6 +27,14 @@ Polymer({
   ],
 
   properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
     /** @private */
     pages_: {
       type: Object,
@@ -45,6 +53,12 @@ Polymer({
       value: settings.PageStatus.CONFIGURE,
     },
 
+    /**
+     * Dictionary defining page visibility.
+     * @type {!PrivacyPageVisibility}
+     */
+    pageVisibility: Object,
+
     /**
      * The current sync preferences, supplied by SyncBrowserProxy.
      * @type {settings.SyncPrefs|undefined}
@@ -105,6 +119,12 @@ Polymer({
           'unifiedConsentEnabled, syncStatus.signedIn)',
     },
 
+    /** @private */
+    personalizeSectionOpened_: {
+      type: Boolean,
+      value: true,
+    },
+
     /** @private */
     syncSectionOpened_: {
       type: Boolean,

chrome/browser/resources/settings/privacy_page/personalization_options.html

@@ -11,7 +11,17 @@
 
 <dom-module id="settings-personalization-options">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared">
+      :host(.list-frame) settings-toggle-button,
+      :host(.list-frame) .settings-box {
+        -webkit-padding-end: 0;
+        -webkit-padding-start: 0;
+      }
+
+      :host(.list-frame) settings-toggle-button:first-of-type {
+        border-top: none;
+      }
+    </style>
     <settings-toggle-button pref="{{prefs.alternate_error_pages.enabled}}"
         label="$i18n{linkDoctorPref}"
         sub-label="$i18n{linkDoctorPrefDesc}">
@@ -39,14 +49,14 @@
         sub-label="$i18n{safeBrowsingEnableProtectionDesc}">
     </settings-toggle-button>
 <if expr="_google_chrome">
-    <template is="dom-if" if="[[!unifiedConsentEnabled_]]">
+    <template is="dom-if" if="[[!unifiedConsentEnabled]]">
       <settings-toggle-button id="spellCheckControl"
           pref="{{prefs.spellcheck.use_spelling_service}}"
           label="$i18n{spellingPref}"
           sub-label="$i18n{spellingDescription}">
       </settings-toggle-button>
     </template>
-    <template is="dom-if" if="[[unifiedConsentEnabled_]]">
+    <template is="dom-if" if="[[unifiedConsentEnabled]]">
       <div class="settings-box two-line" id="spellCheckLinkBox">
         <div class="start">
           $i18n{spellingPref}

chrome/browser/resources/settings/privacy_page/personalization_options.js

@@ -33,6 +33,10 @@ Polymer({
       notify: true,
     },
 
+    /**
+     * Dictionary defining page visibility.
+     * @type {!PrivacyPageVisibility}
+     */
     pageVisibility: Object,
 
     /** @private {chrome.settingsPrivate.PrefObject} */
@@ -54,19 +58,7 @@ Polymer({
       value: NetworkPredictionOptions,
     },
 
-    /**
-     * This flag is used to conditionally show a set of sync UIs to the
-     * profiles that have been migrated to have a unified consent flow.
-     * TODO(scottchen): In the future when all profiles are completely migrated,
-     * this should be removed, and UIs hidden behind it should become default.
-     * @private
-     */
-    unifiedConsentEnabled_: {
-      type: Boolean,
-      value: function() {
-        return loadTimeData.getBoolean('unifiedConsentEnabled');
-      },
-    },
+    unifiedConsentEnabled: Boolean,
 
     // <if expr="_google_chrome and not chromeos">
     // TODO(dbeam): make a virtual.* pref namespace and set/get this normally

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -69,9 +69,12 @@
         <div class="settings-box first">
           <p class="privacy-explanation">$i18nRaw{improveBrowsingExperience}</p>
         </div>
-        <settings-personalization-options prefs="{{prefs}}"
-            page-visibility="[[pageVisibility]]">
-        </settings-personalization-options>
+        <template is="dom-if" if="[[!unifiedConsentEnabled_]]">
+          <settings-personalization-options prefs="{{prefs}}"
+              page-visibility="[[pageVisibility]]"
+              unified-consent-enabled="[[unifiedConsentEnabled_]]">
+          </settings-personalization-options>
+        </template>
         <settings-toggle-button id="doNotTrack"
             pref="{{prefs.enable_do_not_track}}" label="$i18n{doNotTrack}"
             on-settings-boolean-control-change="onDoNotTrackChange_"
@@ -138,6 +141,10 @@
                 aria-describedby="clearBrowsingDataSecondary"></button>
           </paper-icon-button-light>
         </div>
+        <div class="settings-box" on-click="onMoreSettingsBoxClicked_"
+            hidden="[[!unifiedConsentEnabled_]]">
+          <div class="start">$i18nRaw{syncAndPersonalizationLink}</div>
+        </div>
       </neon-animatable>
 <if expr="use_nss_certs">
       <template is="dom-if" route-path="/certificates">

chrome/browser/resources/settings/privacy_page/privacy_page.js

@@ -111,6 +111,20 @@ Polymer({
         return map;
       },
     },
+
+    /**
+     * This flag is used to conditionally show a set of sync UIs to the
+     * profiles that have been migrated to have a unified consent flow.
+     * TODO(scottchen): In the future when all profiles are completely migrated,
+     * this should be removed, and UIs hidden behind it should become default.
+     * @private
+     */
+    unifiedConsentEnabled_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('unifiedConsentEnabled');
+      },
+    },
   },
 
   listeners: {
@@ -207,6 +221,17 @@ Polymer({
     // </if>
   },
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onMoreSettingsBoxClicked_: function(e) {
+    if (e.target.tagName === 'A') {
+      e.preventDefault();
+      settings.navigateTo(settings.routes.SYNC);
+    }
+  },
+
   /**
    * This is a workaround to connect the remove all button to the subpage.
    * @private

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

@@ -1589,6 +1589,10 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"syncDisconnectConfirm", IDS_SETTINGS_SYNC_DISCONNECT_CONFIRM},
     {"sync", IDS_SETTINGS_SYNC},
     {"syncDescription", IDS_SETTINGS_SYNC_DESCRIPTION},
+    {"personalizationSectionLabel", IDS_SETTINGS_PERSONALIZATION_SECTION_LABEL},
+    {"personalizationSectionDesc", IDS_SETTINGS_PERSONALIZATION_SECTION_DESC},
+    {"personalizationExpandA11yLabel",
+     IDS_SETTINGS_PERSONALIZATION_SECTION_ACCESSIBILITY_LABEL},
     {"syncExpandA11yLabel", IDS_SETTINGS_SYNC_SECTION_ACCESSIBILITY_LABEL},
     {"syncAndPersonalization", IDS_SETTINGS_SYNC_SYNC_AND_PERSONALIZATION},
     {"syncPageTitle", IDS_SETTINGS_SYNC_PAGE_TITLE},
@@ -1816,22 +1820,23 @@ void AddPrintingStrings(content::WebUIDataSource* html_source) {
 void AddPrivacyStrings(content::WebUIDataSource* html_source,
                        Profile* profile) {
   LocalizedString localized_strings[] = {
-    {"privacyPageTitle", IDS_SETTINGS_PRIVACY},
-    {"doNotTrack", IDS_SETTINGS_ENABLE_DO_NOT_TRACK},
-    {"doNotTrackDialogTitle", IDS_SETTINGS_ENABLE_DO_NOT_TRACK_DIALOG_TITLE},
-    {"enableContentProtectionAttestation",
-     IDS_SETTINGS_ENABLE_CONTENT_PROTECTION_ATTESTATION},
-    {"wakeOnWifi", IDS_SETTINGS_WAKE_ON_WIFI_DESCRIPTION},
-    {"manageCertificates", IDS_SETTINGS_MANAGE_CERTIFICATES},
-    {"manageCertificatesDescription",
-     IDS_SETTINGS_MANAGE_CERTIFICATES_DESCRIPTION},
-    {"contentSettings", IDS_SETTINGS_CONTENT_SETTINGS},
-    {"siteSettings", IDS_SETTINGS_SITE_SETTINGS},
-    {"siteSettingsDescription", IDS_SETTINGS_SITE_SETTINGS_DESCRIPTION},
-    {"clearData", IDS_SETTINGS_CLEAR_DATA},
-    {"clearBrowsingData", IDS_SETTINGS_CLEAR_BROWSING_DATA},
-    {"clearBrowsingDataDescription", IDS_SETTINGS_CLEAR_DATA_DESCRIPTION},
-    {"titleAndCount", IDS_SETTINGS_TITLE_AND_COUNT},
+      {"privacyPageTitle", IDS_SETTINGS_PRIVACY},
+      {"doNotTrack", IDS_SETTINGS_ENABLE_DO_NOT_TRACK},
+      {"doNotTrackDialogTitle", IDS_SETTINGS_ENABLE_DO_NOT_TRACK_DIALOG_TITLE},
+      {"enableContentProtectionAttestation",
+       IDS_SETTINGS_ENABLE_CONTENT_PROTECTION_ATTESTATION},
+      {"wakeOnWifi", IDS_SETTINGS_WAKE_ON_WIFI_DESCRIPTION},
+      {"manageCertificates", IDS_SETTINGS_MANAGE_CERTIFICATES},
+      {"manageCertificatesDescription",
+       IDS_SETTINGS_MANAGE_CERTIFICATES_DESCRIPTION},
+      {"contentSettings", IDS_SETTINGS_CONTENT_SETTINGS},
+      {"siteSettings", IDS_SETTINGS_SITE_SETTINGS},
+      {"siteSettingsDescription", IDS_SETTINGS_SITE_SETTINGS_DESCRIPTION},
+      {"clearData", IDS_SETTINGS_CLEAR_DATA},
+      {"clearBrowsingData", IDS_SETTINGS_CLEAR_BROWSING_DATA},
+      {"clearBrowsingDataDescription", IDS_SETTINGS_CLEAR_DATA_DESCRIPTION},
+      {"titleAndCount", IDS_SETTINGS_TITLE_AND_COUNT},
+      {"syncAndPersonalizationLink", IDS_SETTINGS_PRIVACY_MORE_SETTINGS},
   };
   AddLocalizedStringsBulk(html_source, localized_strings,
                           arraysize(localized_strings));