Add Wifi Sync V2 description to multidevice setup

Adds a feature line item with icon in multidevice start setup
page indicating that better together can sync wifi network
configurations with a connected android phone

Screenshot
https://screenshot.googleplex.com/98RHfUE9EgjKYy6

Bug: 1117619
Change-Id: I051a8085ea65368aba8fdf5089eb33ada0291262
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2380326
Commit-Queue: Claude van der Merwe <cvandermerwe@google.com>
Reviewed-by: Ryan Hansberry <hansberry@chromium.org>
Reviewed-by: Jon Mann <jonmann@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803877}

chrome/app/chromeos_strings.grdp

@@ -213,6 +213,9 @@
   <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MIRROR_PHONE_NOTIFICATIONS" desc="Tell the user that Better Together can automatically mirror notifications from their phone to their Chromebook.">
     Mirror notifications from your phone
   </message>
+  <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_WIFI_SYNC" desc="Description of a feature that syncs Wi-Fi network configurations between Chrome OS devices and a connected Android phone" translateable="false">
+    Sync Wi-Fi networks with your phone
+  </message>
   <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_INSTALL_APPS_DESCRIPTION" desc="Tell the user that Better Together can automatically install apps on their Chromebook">
     Automatically install apps
   </message>

chrome/browser/ui/webui/chromeos/multidevice_setup/multidevice_setup_localized_strings_provider.cc

@@ -52,6 +52,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
      IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_OFFLINE_DEVICE_OPTION},
     {"startSetupPageFeatureMirrorPhoneNotifications",
      IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MIRROR_PHONE_NOTIFICATIONS},
+    {"startSetupPageFeatureWifiSync",
+     IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_WIFI_SYNC},
     {"startSetupPageFeatureListInstallApps",
      IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_INSTALL_APPS_DESCRIPTION},
     {"startSetupPageFeatureListAddFeatures",
@@ -130,6 +132,10 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) {
       "phoneHubEnabled",
       base::FeatureList::IsEnabled(chromeos::features::kPhoneHub));
 
+  html_source->AddBoolean(
+      "wifiSyncEnabled",
+      base::FeatureList::IsEnabled(chromeos::features::kWifiSyncAndroid));
+
   for (const auto& entry : GetLocalizedStringsWithPlaceholders())
     html_source->AddString(entry.name, entry.localized_string);
 }

ui/webui/resources/cr_components/chromeos/multidevice_setup/icons.html

@@ -28,6 +28,10 @@
       <g id="notifications" fill="none" fill-rule="evenodd">
         <path d="M11,3.10001812 C13.2822403,3.56328845 15,5.58104209 15,8 C15,10.7614237 15,13 15,13 L17,13 L17,15 L3,15 L3,13 L5,13 C5,13 5,9.9021552 5,8 C5,5.58104209 6.71775968,3.56328845 9,3.10001812 L9,2.5 C9,1.94771525 9.44771525,1.5 10,1.5 C10.5522847,1.5 11,1.94771525 11,2.5 L11,3.10001812 Z M7,8 L7,13 L13,13 L13,8 C13,6.34314575 11.6568542,5 10,5 C8.34314575,5 7,6.34314575 7,8 Z M10,18 C8.8954305,18 8,17.1045695 8,16 L12,16 C12,17.1045695 11.1045695,18 10,18 Z" fill="#9AA0A6"></path>
       </g>
+      <g id="wifi" fill="none" fill-rule="evenodd">
+        <path d="M10.01 17.99L20 5.46C19.613 5.164 15.765 2 10 2 4.227 2 .387 5.165 0 5.46l9.99 12.53.01.01.01-.01z" fill="#9AA0A6" fill-opacity=".3"></path>
+        <path d="M2.942 9.143l7.05 8.85L10 18l.008-.008 7.05-8.85C16.7 8.867 14.008 6.668 10 6.668s-6.7 2.2-7.058 2.476z" fill="#9AA0A6"></path>
+      </g>
       <g id="downloads" fill="none" fill-rule="evenodd">
         <path d="M2,13 L4,13 L4,16 L16,16 L16,13 L18,13 L18,16 C18,17.1 17.1,18 16,18 L4,18 C2.9,18 2,17.1 2,16 L2,13 Z M13.59,7.59 L11,10.17 L11,2 L9,2 L9,10.17 L6.41,7.59 L5,9 L10,14 L15,9 L13.59,7.59 Z" fill="#9AA0A6"></path>
       </g>

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.html

@@ -162,6 +162,15 @@
                 </span>
               </div>
             </template>
+            <template is="dom-if" if="[[wifiSyncEnabled_]]">
+              <div class="feature-detail">
+                <iron-icon icon="multidevice-setup-icons-20:wifi">
+                </iron-icon>
+                <span>
+                  [[i18nDynamic(locale, 'startSetupPageFeatureWifiSync')]]
+                </span>
+              </div>
+            </template>
             <div class="feature-detail">
               <iron-icon icon="multidevice-setup-icons-20:downloads">
               </iron-icon>

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.js

@@ -60,6 +60,15 @@ Polymer({
             loadTimeData.getBoolean('phoneHubEnabled');
       },
     },
+
+    /** @private */
+    wifiSyncEnabled_: {
+      type: Boolean,
+      value() {
+        return loadTimeData.valueExists('wifiSyncEnabled') &&
+            loadTimeData.getBoolean('wifiSyncEnabled');
+      },
+    },
   },
 
   behaviors: [