[Sync][Lacros] Update Sync System Settings UI

Updating the OS System sync settings:  os_sync_subpage
adding a sub label to review your synced data. Adding
section to open browser settings and update existing label.

UI changes : go/os-sync-consent-ui
screenshot: https://screenshot.googleplex.com/5u6ueZWkjkhYMAj.png

Bug: 274462886
Change-Id: I47dee1c3bc8b36e62618aae6320fe5144053f4fd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4454271
Commit-Queue: Brahim Chikhaoui <bchikhaoui@google.com>
Reviewed-by: Wes Okuhara <wesokuhara@google.com>
Reviewed-by: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1134447}
diff --git a/chrome/app/shared_settings_strings.grdp b/chrome/app/shared_settings_strings.grdp
index 6a62218a..0145136 100644
--- a/chrome/app/shared_settings_strings.grdp
+++ b/chrome/app/shared_settings_strings.grdp
@@ -357,6 +357,22 @@
   <message name="IDS_SETTINGS_NEW_MANAGE_SYNCED_DATA_TITLE_UNIFIED_CONSENT" desc="Title for the link to manage Chrome Sync data via Google Dashboard when unified consent is enabled.">
     Review your synced data
   </message>
+  <message name="IDS_SETTINGS_NEW_SYNC_ADVANCED_DEVICE_PAGE_TITLE" translateable="false" desc="Name of the settings page which manages device data used by sync when lacros is enabled." >
+   <!-- TODO(crbug.com/1330894): Remove "translateable=false" once definitive string is available. -->
+    Manage device sync
+  </message>
+  <message name="IDS_SETTINGS_NEW_SYNC_ADVANCED_BROWSER_PAGE_TITLE" translateable="false" desc="Name of the settings page which manages browser data used by sync when lacros is enabled." >
+   <!-- TODO(crbug.com/1330894): Remove "translateable=false" once definitive string is available. -->
+    Manage browser sync
+  </message>
+  <message name="IDS_SETTINGS_NEW_MANAGE_SYNCED_DATA_SUBTITLE_UNIFIED_CONSENT" translateable="false" desc="Subtitle for the link to manage Chrome Sync data via Google Dashboard when unified consent is enabled.">
+    <!-- TODO(crbug.com/1330894): Remove "translateable=false" once definitive string is available. -->
+    Across your apps and Chrome browser
+  </message>
+  <message name="IDS_SETTINGS_NEW_MANAGE_BROWSER_SYNCED_DATA_TITLE" translateable="false" desc="Title for the link to manage Chrome Browser Sync data via browser settings.">
+    <!-- TODO(crbug.com/1330894): Remove "translateable=false" once definitive string is available. -->
+    Manage Chrome browser sync
+  </message>
   <message name="IDS_SETTINGS_SYNC_SYNC_AND_NON_PERSONALIZED_SERVICES" desc="The name of the settings page and the label of the button that takes the user to manage their sync and non-personalized services settings.">
     Sync and Google services
   </message>
diff --git a/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html b/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html
index a966f33..fbc9a54 100644
--- a/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html
+++ b/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html
@@ -98,7 +98,7 @@
     </os-settings-subpage>
   </template>
   <template is="dom-if" route-path="/osSync">
-    <os-settings-subpage page-title="$i18n{syncAdvancedPageTitle}"
+    <os-settings-subpage page-title="[[getSyncAdvancedTitle_()]]"
         learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
       <os-sync-controls-subpage>
       </os-sync-controls-subpage>
diff --git a/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.ts b/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.ts
index 9ff14e3..d83134e 100644
--- a/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.ts
+++ b/chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.ts
@@ -157,6 +157,17 @@
         ]),
       },
 
+      /**
+       * Whether to show the new UI for OS Sync Settings
+       * which include sublabel and Apps toggle
+       * shared between Ash and Lacros.
+       */
+      showSyncSettingsRevamp_: {
+        type: Boolean,
+        value: loadTimeData.getBoolean('showSyncSettingsRevamp'),
+        readOnly: true,
+      },
+
     };
   }
 
@@ -172,6 +183,7 @@
   private showParentalControls_: boolean;
   private focusConfig_: Map<string, string>;
   private showPasswordPromptDialog_: boolean;
+  private showSyncSettingsRevamp_: boolean;
   private setModes_: Object|undefined;
   private syncBrowserProxy_: SyncBrowserProxy;
   private clearAccountPasswordTimeoutId_: number|undefined;
@@ -228,6 +240,13 @@
     }
   }
 
+  private getSyncAdvancedTitle_(): string {
+    if (this.showSyncSettingsRevamp_) {
+      return this.i18n('syncAdvancedDevicePageTitle');
+    }
+    return this.i18n('syncAdvancedPageTitle');
+  }
+
   private afterRenderShowDeepLink_(
       settingId: Setting,
       getElementCallback: () => (HTMLElement | null)): void {
diff --git a/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.html b/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.html
index 966bd337c..985dbad 100644
--- a/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.html
+++ b/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.html
@@ -125,12 +125,22 @@
       hidden$="[[!isStatus_(pageStatusEnum_.CONFIGURE, pageStatus_)]]">
     <div id="other-sync-items" class="list-frame">
       <cr-link-row id="sync-advanced-row"
-          label="$i18n{syncAdvancedPageTitle}"
+          label="[[getSyncAdvancedTitle_()]]"
           role-description="$i18n{subpageArrowRoleDescription}"
-          on-click="onSyncAdvancedClick_"></cr-link-row>
+          on-click="onSyncAdvancedClick_">
+      </cr-link-row>
+
+      <cr-link-row id="syncBrowserLink" class="hr"
+          label="$i18n{manageBrowserSyncedDataTitle}"
+          hidden="[[!showSyncSettingsRevamp_]]"
+          on-click="onManageChromeBrowserSyncClick_"
+          external
+          button-aria-description="$i18n{opensInNewTab}">
+      </cr-link-row>
 
       <cr-link-row id="syncDashboardLink" class="hr"
           label="$i18n{manageSyncedDataTitle}"
+          sub-label="[[getManageSyncedDataSubtitle_()]]"
           on-click="onSyncDashboardLinkClick_"
           hidden="[[syncStatus.supervisedUser]]"
           external
diff --git a/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.ts b/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.ts
index b8a1e3d..bf1df4d2 100644
--- a/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.ts
+++ b/chrome/browser/resources/settings/chromeos/os_people_page/os_sync_subpage.ts
@@ -176,6 +176,17 @@
         computed: 'computeExistingPassphraseLabel_(syncPrefs.encryptAllData,' +
             'syncPrefs.explicitPassphraseTime)',
       },
+
+      /**
+       * Whether to show the new UI for OS Sync Settings
+       * which include sublabel and Apps toggle
+       * shared between Ash and Lacros.
+       */
+      showSyncSettingsRevamp_: {
+        type: Boolean,
+        value: loadTimeData.getBoolean('showSyncSettingsRevamp'),
+        readOnly: true,
+      },
     };
   }
 
@@ -194,6 +205,7 @@
   private encryptionExpanded_: boolean;
   forceEncryptionExpanded: boolean;
   private existingPassphrase_: string;
+  private showSyncSettingsRevamp_: boolean;
   private signedIn_: boolean;
   private syncDisabledByAdmin_: boolean;
   private syncSectionDisabled_: boolean;
@@ -414,6 +426,24 @@
     this.pageStatus_ = PageStatus.CONFIGURE;
   }
 
+  private onManageChromeBrowserSyncClick_(): void {
+    chrome.send('OpenBrowserSyncSettings');
+  }
+
+  private getManageSyncedDataSubtitle_(): string {
+    if (this.showSyncSettingsRevamp_) {
+      return this.i18n('manageSyncedDataSubtitle');
+    }
+    return '';
+  }
+
+  private getSyncAdvancedTitle_(): string {
+    if (this.showSyncSettingsRevamp_) {
+      return this.i18n('syncAdvancedDevicePageTitle');
+    }
+    return this.i18n('syncAdvancedPageTitle');
+  }
+
   private onSyncDashboardLinkClick_() {
     window.open(loadTimeData.getString('syncDashboardUrl'));
   }
diff --git a/chrome/browser/ui/webui/settings/shared_settings_localized_strings_provider.cc b/chrome/browser/ui/webui/settings/shared_settings_localized_strings_provider.cc
index e107010e..17b38fe2 100644
--- a/chrome/browser/ui/webui/settings/shared_settings_localized_strings_provider.cc
+++ b/chrome/browser/ui/webui/settings/shared_settings_localized_strings_provider.cc
@@ -11,6 +11,7 @@
 #include "base/system/sys_info.h"
 #include "build/build_config.h"
 #include "build/chromeos_buildflags.h"
+#include "chrome/browser/ash/crosapi/browser_util.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/browser_process_platform_part.h"
 #include "chrome/browser/ui/chrome_pages.h"
@@ -191,6 +192,14 @@
     {"sync", IDS_SETTINGS_SYNC},
     {"manageSyncedDataTitle",
      IDS_SETTINGS_NEW_MANAGE_SYNCED_DATA_TITLE_UNIFIED_CONSENT},
+    {"manageSyncedDataSubtitle",
+     IDS_SETTINGS_NEW_MANAGE_SYNCED_DATA_SUBTITLE_UNIFIED_CONSENT},
+    {"manageBrowserSyncedDataTitle",
+     IDS_SETTINGS_NEW_MANAGE_BROWSER_SYNCED_DATA_TITLE},
+    {"syncAdvancedDevicePageTitle",
+     IDS_SETTINGS_NEW_SYNC_ADVANCED_DEVICE_PAGE_TITLE},
+    {"syncAdvancedBrowserPageTitle",
+     IDS_SETTINGS_NEW_SYNC_ADVANCED_BROWSER_PAGE_TITLE},
     {"enterPassphraseLabel", IDS_SYNC_ENTER_PASSPHRASE_BODY},
     {"enterPassphraseLabelWithDate", IDS_SYNC_ENTER_PASSPHRASE_BODY_WITH_DATE},
     {"existingPassphraseLabelWithDate",
@@ -240,6 +249,10 @@
 #if BUILDFLAG(IS_CHROMEOS_ASH)
   html_source->AddBoolean("shouldShowLacrosSideBySideWarning",
                           ShouldShowLacrosSideBySideWarningInAsh());
+  html_source->AddBoolean(
+      "showSyncSettingsRevamp",
+      base::FeatureList::IsEnabled(syncer::kSyncChromeOSAppsToggleSharing) &&
+          crosapi::browser_util::IsLacrosEnabled());
 #elif BUILDFLAG(IS_CHROMEOS_LACROS)
   html_source->AddBoolean("shouldShowLacrosSideBySideWarning",
                           ShouldShowLacrosSideBySideWarningInLacros());