chromeos: Update OOBE consent dialog for SplitSettingsSync

Add a row for "Settings sync" per go/cros-sync-mock. Implement this by
forking the existing HTML because I anticipate other tweaks to the
structure, layout, etc.

Screenshot: https://screenshot.googleplex.com/jBQkUEZoT1O

Note that there are now 3 versions of this dialog:
* Current
* SplitSettingsSync v1
* SplitSyncConsent (aka SplitSettingsSync v2)

Bug: 1067212
Change-Id: I64861026cf66d59800511dc559669743410707a1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2134198
Commit-Queue: James Cook <jamescook@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756109}

chrome/app/chromeos_strings.grdp

@@ -804,6 +804,12 @@
   <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_TITLE" desc="The title of the dialog that welcomes the user on the first log in, and explains Chrome Sync and privacy options.">
     You're signed in!
   </message>
+  <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_OS_SYNC_NAME" desc="Title of the 'Settings sync' section of the sync confirmation dialog that is displayed on the first user log in.">
+    Settings sync
+  </message>
+  <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_OS_SYNC_DESCRIPTION" desc="Description of 'Settings sync' section of the sync confirmation dialog that is displayed on the first user log in.">
+    Your apps, settings, and other customizations will sync across all Chrome OS devices signed in with your Google Account.
+  </message>
   <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_CHROME_SYNC_NAME" desc="Title of the 'Chrome sync' section of the sync confirmation dialog that is displayed on the first user log in.">
     Chrome sync
   </message>
@@ -819,6 +825,9 @@
   <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_REVIEW_SYNC_OPTIONS_LATER" desc="The label to the checkbox explaining that when checked, it will trigger user settings screen opened after session start.">
     Review sync options following setup
   </message>
+  <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_REVIEW_BROWSER_SYNC_OPTIONS" desc="Label for the checkbox that will open browser sync settings after session start.">
+    Review browser sync options following setup
+  </message>
   <message name="IDS_LOGIN_SYNC_CONSENT_SCREEN_ACCEPT_AND_CONTINUE" desc="The label on the button that closes dialog while accepting the selected settings.">
     Accept and continue
   </message>

chrome/app/chromeos_strings_grdp/IDS_LOGIN_SYNC_CONSENT_SCREEN_OS_SYNC_DESCRIPTION.png.sha1

+8160e8738ba1ea4204a64d674c06d454ed367d6a
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_LOGIN_SYNC_CONSENT_SCREEN_OS_SYNC_NAME.png.sha1

+8160e8738ba1ea4204a64d674c06d454ed367d6a
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_LOGIN_SYNC_CONSENT_SCREEN_REVIEW_BROWSER_SYNC_OPTIONS.png.sha1

+8160e8738ba1ea4204a64d674c06d454ed367d6a
\ No newline at end of file

chrome/browser/resources/chromeos/login/sync_consent.css

@@ -6,26 +6,28 @@
   color: #333;
 }
 
-.overview-list-item {
-  background-color: var(--google-grey-100);
-  margin-bottom: 16px;
-  padding: 16px;
-}
-
 .overview-list-item:last-of-type {
   margin-bottom: 0;
 }
 
-.overview-list-item-icon {
-  padding-inline-end: 16px;
-}
-
 .overview-list-item-title {
   font-weight: 500; /* roboto-medium */
   margin-bottom: 4px;
 }
 
-cr-checkbox {
+/* Styles for the traditional dialog. */
+
+#syncConsentOverviewDialog .overview-list-item {
+  background-color: var(--google-grey-100);
+  margin-bottom: 16px;
+  padding: 16px;
+}
+
+#syncConsentOverviewDialog .overview-list-item-icon {
+  padding-inline-end: 16px;
+}
+
+#syncConsentOverviewDialog cr-checkbox {
   align-self: start; /* Prevent label from spanning the whole width. */
   margin-top: 28px; /* 40 to label base line => 40 - 16/2 - 13/3 = 28 */
   padding-inline-start: 8px;
@@ -34,6 +36,24 @@ cr-checkbox {
 
 /* Styles used with SplitSettingsSync. */
 
+#splitSettingsSyncConsentDialog .overview-list-item {
+  margin-bottom: 16px;
+  padding: 16px;
+}
+
+#splitSettingsSyncConsentDialog .overview-list-item-icon {
+  margin-top: 2px;
+  padding-inline-end: 16px;
+}
+
+#splitSettingsSyncConsentDialog cr-checkbox {
+  align-self: start; /* Prevent label from spanning the whole width. */
+  margin-top: 16px;
+  --cr-checkbox-label-padding-start: 12px;
+}
+
+/* Styles used with SplitSyncConsent. */
+
 #osSyncConsentFooter {
   border-bottom: solid 1px var(--google-grey-300);
   border-top: solid 1px var(--google-grey-300);

chrome/browser/resources/chromeos/login/sync_consent.html

@@ -14,6 +14,9 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="sync_consent.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
+
+    <!-- Traditional dialog. This can be deleted when SplitSettingsSync is the
+         default. -->
     <oobe-dialog id="syncConsentOverviewDialog" role="dialog" has-buttons
         aria-label$="[[i18nDynamic(locale, 'syncConsentScreenTitle')]]"
         hidden>
@@ -69,6 +72,83 @@
       </div>
     </oobe-dialog>
 
+    <!-- Dialog used with the SplitSettingsSync feature. -->
+    <oobe-dialog id="splitSettingsSyncConsentDialog" role="dialog" has-buttons
+        aria-label$="[[i18nDynamic(locale, 'syncConsentScreenTitle')]]"
+        hidden>
+      <hd-iron-icon slot="oobe-icon"
+          icon1x="sync-consent-32:googleg" icon2x="sync-consent-64:googleg">
+      </hd-iron-icon>
+      <h1 slot="title" consent-description>
+        [[i18nDynamic(locale, 'syncConsentScreenTitle')]]
+      </h1>
+      <div slot="footer" class="layout vertical">
+
+        <!-- "Sync settings" -->
+        <div class="overview-list-item flex layout horizontal">
+          <!-- TODO(jamescook): Customized icons. -->
+          <hd-iron-icon class="overview-list-item-icon"
+              icon1x="sync-consent-32:googleg" icon2x="sync-consent-64:googleg">
+          </hd-iron-icon>
+          <div class="flex layout vertical center-justified">
+            <div role="heading" aria-level="2" class="overview-list-item-title"
+              consent-description>
+                [[i18nDynamic(locale, 'syncConsentScreenOsSyncName')]]
+            </div>
+            <div class="overview-list-item-description" consent-description>
+              [[i18nDynamic(locale, 'syncConsentScreenOsSyncDescription')]]
+            </div>
+          </div>
+        </div>
+
+        <!-- "Chrome sync" -->
+        <div class="overview-list-item flex layout horizontal">
+          <hd-iron-icon class="overview-list-item-icon"
+              src1x="chrome://oobe/logo_24px-1x.svg"
+              src2x="chrome://oobe/logo_24px-2x.svg">
+          </hd-iron-icon>
+          <div class="flex layout vertical center-justified">
+            <div role="heading" aria-level="2" class="overview-list-item-title"
+              consent-description>
+                [[i18nDynamic(locale, 'syncConsentScreenChromeSyncName')]]
+            </div>
+            <div class="overview-list-item-description" consent-description>
+              [[i18nDynamic(locale, 'syncConsentScreenChromeSyncDescription')]]
+            </div>
+            <cr-checkbox id="reviewBrowserSyncOptionsBox" consent-description>
+              [[i18nDynamic(locale, 'syncConsentReviewBrowserSyncOptions')]]
+            </cr-checkbox>
+          </div>
+        </div>
+
+        <!-- Personalize Google services -->
+        <div class="overview-list-item flex layout horizontal">
+          <hd-iron-icon class="overview-list-item-icon"
+              icon1x="sync-consent-32:googleg" icon2x="sync-consent-64:googleg">
+          </hd-iron-icon>
+          <div class="flex layout vertical center-justified">
+            <div role ="heading" aria-level="2" class="overview-list-item-title"
+              consent-description>
+                [[i18nDynamic(locale,
+                  'syncConsentScreenPersonalizeGoogleServicesName')]]
+            </div>
+            <div class="overview-list-item-description" consent-description>
+              [[i18nDynamic(locale,
+                'syncConsentScreenPersonalizeGoogleServicesDescription')]]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="bottom-buttons" class="layout horizontal end-justified">
+        <oobe-text-button on-tap="onSettingsSaveAndContinue_"
+            class="focus-on-show" inverse>
+          <div slot="text" consent-description consent-confirmation>
+            [[i18nDynamic(locale, 'syncConsentAcceptAndContinue')]]
+          </div>
+        </oobe-text-button>
+      </div>
+    </oobe-dialog>
+
     <!-- Dialog used with the SplitSyncConsent feature. -->
     <oobe-dialog id="osSyncConsentDialog" role="dialog" has-buttons
         aria-label$="[[i18nDynamic(locale, 'osSyncConsentTitle')]]"

chrome/browser/resources/chromeos/login/sync_consent.js

@@ -12,6 +12,17 @@ Polymer({
 
   behaviors: [OobeI18nBehavior, OobeDialogHostBehavior],
 
+  properties: {
+    /** @private */
+    splitSettingsSyncEnabled_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('splitSettingsSyncEnabled');
+      },
+      readOnly: true,
+    },
+  },
+
   /** @override */
   ready() {
     this.updateLocalizedContent();
@@ -68,6 +79,9 @@ Polymer({
     if (loadTimeData.getBoolean('splitSyncConsent')) {
       // SplitSyncConsent version.
       this.showScreen_('osSyncConsentDialog');
+    } else if (loadTimeData.getBoolean('splitSettingsSyncEnabled')) {
+      // SplitSettingsSync version.
+      this.showScreen_('splitSettingsSyncConsentDialog');
     } else {
       // Regular version.
       this.showScreen_('syncConsentOverviewDialog');
@@ -80,7 +94,12 @@ Polymer({
    * @private
    */
   onSettingsSaveAndContinue_(e) {
-    if (this.$.reviewSettingsBox.checked) {
+    assert(e.path);
+    assert(!loadTimeData.getBoolean('splitSyncConsent'));
+    let checked = this.splitSettingsSyncEnabled_ ?
+        this.$.reviewBrowserSyncOptionsBox.checked :
+        this.$.reviewSettingsBox.checked;
+    if (checked) {
       chrome.send('login.SyncConsentScreen.continueAndReview', [
         this.getConsentDescription_(), this.getConsentConfirmation_(e.path)
       ]);

chrome/browser/ui/webui/chromeos/login/sync_consent_screen_handler.cc

@@ -110,6 +110,16 @@ void SyncConsentScreenHandler::DeclareLocalizedValues(
                          IDS_LOGIN_SYNC_CONSENT_SCREEN_ACCEPT_AND_CONTINUE,
                          builder);
 
+  // SplitSettingsSync strings.
+  RememberLocalizedValue("syncConsentScreenOsSyncName",
+                         IDS_LOGIN_SYNC_CONSENT_SCREEN_OS_SYNC_NAME, builder);
+  RememberLocalizedValue("syncConsentScreenOsSyncDescription",
+                         IDS_LOGIN_SYNC_CONSENT_SCREEN_OS_SYNC_DESCRIPTION,
+                         builder);
+  RememberLocalizedValue(
+      "syncConsentReviewBrowserSyncOptions",
+      IDS_LOGIN_SYNC_CONSENT_SCREEN_REVIEW_BROWSER_SYNC_OPTIONS, builder);
+
   // SplitSyncConsent strings. The version of the dialog to show is chosen
   // after the WebUI is loaded, so always supply both sets of strings.
   RememberLocalizedValue("osSyncConsentTitle", IDS_LOGIN_OS_SYNC_CONSENT_TITLE,
@@ -152,6 +162,8 @@ void SyncConsentScreenHandler::RegisterMessages() {
 
 void SyncConsentScreenHandler::GetAdditionalParameters(
     base::DictionaryValue* parameters) {
+  parameters->SetBoolean("splitSettingsSyncEnabled",
+                         chromeos::features::IsSplitSettingsSyncEnabled());
   parameters->SetBoolean("splitSyncConsent",
                          chromeos::features::IsSplitSyncConsentEnabled());
   BaseScreenHandler::GetAdditionalParameters(parameters);