OOBE: Add animation and change text on marketing opt in screen.

Bug: 976949
Change-Id: Ie67e521cef4db401ae31a546862bb06912801abd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2088638Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: James Cook <jamescook@chromium.org>
Reviewed-by: Toni Baržić <tbarzic@chromium.org>
Commit-Queue: Matthew Mourgos <mmourgos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748393}

chrome/app/chromeos_strings.grdp

@@ -870,11 +870,14 @@
     Continue setup
   </message>
   <message name="IDS_LOGIN_MARKETING_OPT_IN_SCREEN_TITLE" desc="The title of the last dialog in the set of screens that are always displayed to the user on the first login to the Chrome OS device.">
-    You are all set!
+    All set!
   </message>
   <message name="IDS_LOGIN_MARKETING_OPT_IN_SCREEN_SUBTITLE" desc="The sub-title of the dialog that allows user to opt-in into several Google marketing options.">
     Get <ph name="DEVICE_TYPE">$2<ex>Chromebook</ex></ph> tips, offers and updates, and share feedback. Unsubscribe anytime.
   </message>
+  <message name="IDS_LOGIN_MARKETING_OPT_IN_SCREEN_SUBTITLE_WITH_DEVICE_NAME" desc="The sub-title of the marketing opt in screen which will also include the name of the user's device.">
+    You are ready to start using your <ph name="DEVICE_TYPE">$1<ex>Chromebook</ex></ph>.
+  </message>
   <message name="IDS_LOGIN_MARKETING_OPT_IN_SCREEN_GET_PLAY_UPDATES" desc="A label next to the checkbox that controls user subscription to marketing updates from Google about Google Play Store.">
     Get the latest updates and recommendations on Play Store apps
   </message>

chrome/app/chromeos_strings_grdp/IDS_LOGIN_MARKETING_OPT_IN_SCREEN_SUBTITLE_WITH_DEVICE_NAME.png.sha1

+6a686d4f29ea4402b2341813b76a7d4d88303717
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_LOGIN_MARKETING_OPT_IN_SCREEN_TITLE.png.sha1

-01f58ad546916861400b41e195b133e86fce526e
\ No newline at end of file
+6a686d4f29ea4402b2341813b76a7d4d88303717
\ No newline at end of file

chrome/browser/browser_resources.grd

@@ -38,6 +38,9 @@
         <structure name="IDR_CUSTOM_ELEMENTS_LOGIN_JS" file="resources\chromeos\login\custom_elements_login.js" compress="gzip" flattenhtml="true" type="chrome_html" />
         <structure name="IDR_ASSISTANT_OPTIN_HTML" file="resources\chromeos\assistant_optin\assistant_optin.html" compress="gzip" flattenhtml="true" allowexternalscript="true" type="chrome_html" />
         <structure name="IDR_ASSISTANT_OPTIN_JS" file="resources\chromeos\assistant_optin\assistant_optin.js" compress="gzip" flattenhtml="true" allowexternalscript="true" type="chrome_html" />
+
+        <!-- Marketing Opt In animation. -->
+        <structure name="IDR_MARKETING_OPT_IN_ALL_SET_ANIMATION" file="resources\chromeos\login\images\all_set.json" compress="gzip" type="chrome_html" />
       </if>
     </structures>
     <includes>

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

@@ -7,6 +7,22 @@
   --oobe-a11y-dialog-list-item-border: 1px solid var(--google-grey-200);
 }
 
+.marketing-animation-container {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.marketing-animation {
+  height: 113%;
+  margin-top: -3%;
+  position: absolute;
+  width: 100%;
+}
+
 .marketing-option {
   border-top: var(--marketing-opt-in-dialog-list-item-border);
   color: var(--google-grey-900);
@@ -31,7 +47,6 @@
 
 #finalAccessibilityLinkContainer {
   display: flex;
-  height: 100%;
   justify-content: center;
 }
 

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

@@ -4,6 +4,7 @@
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_lottie/cr_lottie.html">
 
 <iron-iconset-svg name="marketing-opt-in-32" size="32">
     <svg>
@@ -41,6 +42,10 @@
           hidden="[[!marketingOptInEnabled_]]">
         [[i18nRecursive(locale, 'marketingOptInScreenSubtitle', 'productName')]]
       </div>
+      <div slot="subtitle" id="marketing-opt-in-subtitle"
+          hidden="[[marketingOptInEnabled_]]">
+        [[i18nDynamic(locale, 'marketingOptInScreenSubtitleWithDeviceName')]]
+      </div>
       <div slot="footer" class="layout vertical flex">
         <div class="marketing-option layout horizontal center"
             hidden="[[!marketingOptInEnabled_]]"
@@ -67,6 +72,10 @@
               aria-labelledby="chromebookUpdatesOption">
           </cr-toggle>
         </div>
+        <div class="marketing-animation-container">
+          <cr-lottie class="marketing-animation" animation-url="all_set.json">
+          </cr-lottie>
+        </div>
         <div hidden="[[!isA11ySettingsButtonVisible_]]"
             id="finalAccessibilityLinkContainer">
           <a class="oobe-local-link"

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

@@ -53,6 +53,9 @@ Polymer({
   /** @override */
   ready() {
     this.initializeLoginScreen('MarketingOptInScreen', {resetAllowed: true});
+    this.$['marketingOptInOverviewDialog']
+        .querySelector('.marketing-animation')
+        .setPlay(true);
   },
 
   /**
@@ -60,6 +63,9 @@ Polymer({
    * @private
    */
   onAllSet_() {
+    this.$['marketingOptInOverviewDialog']
+        .querySelector('.marketing-animation')
+        .setPlay(false);
     chrome.send('login.MarketingOptInScreen.allSet', [
       this.$.playUpdatesOption.checked, this.$.chromebookUpdatesOption.checked
     ]);
@@ -99,6 +105,9 @@ Polymer({
    */
   onToggleAccessibilityPage_() {
     this.isAccessibilitySettingsShown_ = !this.isAccessibilitySettingsShown_;
+    this.$['marketingOptInOverviewDialog']
+        .querySelector('.marketing-animation')
+        .setPlay(!this.isAccessibilitySettingsShown_);
   },
 
   /**

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

@@ -12,6 +12,7 @@
 #include "chromeos/constants/chromeos_switches.h"
 #include "components/login/localized_values_builder.h"
 #include "components/prefs/pref_service.h"
+#include "ui/chromeos/devicetype_utils.h"
 
 namespace chromeos {
 
@@ -30,6 +31,9 @@ void MarketingOptInScreenHandler::DeclareLocalizedValues(
                IDS_LOGIN_MARKETING_OPT_IN_SCREEN_TITLE);
   builder->Add("marketingOptInScreenSubtitle",
                IDS_LOGIN_MARKETING_OPT_IN_SCREEN_SUBTITLE);
+  builder->AddF("marketingOptInScreenSubtitleWithDeviceName",
+                IDS_LOGIN_MARKETING_OPT_IN_SCREEN_SUBTITLE_WITH_DEVICE_NAME,
+                ui::GetChromeOSDeviceName());
   builder->Add("marketingOptInGetPlayUpdates",
                IDS_LOGIN_MARKETING_OPT_IN_SCREEN_GET_PLAY_UPDATES);
   builder->Add("marketingOptInGetChromebookUpdates",

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

@@ -199,6 +199,12 @@ void AddGestureNavigationResources(content::WebUIDataSource* source) {
   source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
 }
 
+void AddMarketingOptInResources(content::WebUIDataSource* source) {
+  source->AddResourcePath("all_set.json",
+                          IDR_MARKETING_OPT_IN_ALL_SET_ANIMATION);
+  source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
+}
+
 void AddFingerprintResources(content::WebUIDataSource* source) {
   int animation_id;
   bool is_lottie_animation = false;
@@ -294,6 +300,7 @@ content::WebUIDataSource* CreateOobeUIDataSource(
   AddArcScreensResources(source);
   AddAssistantScreensResources(source);
   AddGestureNavigationResources(source);
+  AddMarketingOptInResources(source);
 
   source->AddResourcePath(kKeyboardUtilsJSPath, IDR_KEYBOARD_UTILS_JS);
   source->OverrideContentSecurityPolicyObjectSrc(

ui/chromeos/resources/ui_chromeos_resources.grd

@@ -122,7 +122,6 @@
       <structure type="chrome_scaled_image" name="IDR_LAUNCHER_CHIP_ICON_GSHEET" file="launcher_chip_icons/filetype_gsheet.png" />
       <structure type="chrome_scaled_image" name="IDR_LAUNCHER_CHIP_ICON_GSLIDES" file="launcher_chip_icons/filetype_gslides.png" />
       <structure type="chrome_scaled_image" name="IDR_LAUNCHER_CHIP_ICON_IMAGE" file="launcher_chip_icons/filetype_image.png" />
-
     </structures>
   </release>
 </grit>