Oobe: update css for screens in new layout

Address comments from UI review:
1. Update user creation screen subtitle to fit the new layout
2. Update animation for gesture navigation screen
3. Reduce size of illustration used in assistant screen to 80% of
   original size
4. Hide assistant animation when screen is in portrait mode and screen
   size is not enough
5. Only set orientation parameter for in-session assistant flow when
   new layout flag is enabled
6. Sync css formula for multidevice-setup screen with the latest
   oobe-adaptive-dialog css rules

Bug: 1151292
Change-Id: Ibd7325a5ef80642a1fb58e7c586f990f3d6f6dcd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2718088
Reviewed-by: Roman Aleksandrov <raleksandrov@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Yunke Zhou <yunkez@google.com>
Cr-Commit-Position: refs/heads/master@{#859131}

chrome/app/chromeos_strings.grdp

@@ -859,7 +859,7 @@
     Set up this <ph name="DEVICE_TYPE">$1<ex>Chromebook</ex></ph> for a child
   </message>
   <message name="IDS_OOBE_USER_CREATION_CHILD_SIGNIN_SUBTITLE" desc="Subtitle of the screen which allows users to choose signin method for child.">
-    To set up parental controls, a child must have a Google Account managed by a parent. <ph name="DEVICE_TYPE_PLURAL">$1<ex>Chromebooks</ex></ph> allow parents to set up screen limits, approve or block websites, and do more with the Family Link app. If the child needs to do schoolwork on sites like Google Classroom, a school account can be added later.
+    To use parental controls like app approval and screen time limits, a child must have a Google Account managed by a parent. A school account can be added later for use with sites and apps like Google Classroom.
   </message>
   <message name="IDS_OOBE_USER_CREATION_CHILD_SIGNIN_LEARN_MORE" desc="Learn more link text in child account creation screen.">
     Learn more

chrome/app/chromeos_strings_grdp/IDS_OOBE_USER_CREATION_CHILD_SIGNIN_SUBTITLE.png.sha1

@@ -1 +1 @@
-0b55f6ae17cad345a391ee81b3f4cd38e6a6c36f
+15c9c21a85b9621563d5c937ee2af99987975cab

chrome/browser/resources/chromeos/assistant_optin/assistant_optin_flow.js

@@ -81,10 +81,14 @@ Polymer({
           '--oobe-oobe-dialog-height-base', oobeDialogHeight + 'px');
       document.documentElement.style.setProperty(
           '--oobe-oobe-dialog-width-base', oobeDialogWidth + 'px');
-      if (parseInt(oobeDialogWidth) > parseInt(oobeDialogHeight)) {
-        document.documentElement.setAttribute('orientation', 'horizontal');
-      } else {
-        document.documentElement.setAttribute('orientation', 'vertical');
+
+      if (loadTimeData.valueExists('newLayoutEnabled') &&
+          loadTimeData.getBoolean('newLayoutEnabled')) {
+        if (parseInt(oobeDialogWidth) > parseInt(oobeDialogHeight)) {
+          document.documentElement.setAttribute('orientation', 'horizontal');
+        } else {
+          document.documentElement.setAttribute('orientation', 'vertical');
+        }
       }
     }
 

chrome/browser/resources/chromeos/assistant_optin/assistant_related_info.html

@@ -14,13 +14,17 @@
       padding-bottom: 16px;
     }
 
+    #relatedInfoImg {
+      height: 288px;
+    }
+
     :host-context(html:not([new-layout])) #relatedInfoImg {
-      max-height: 240px;
+      height: 240px;
     }
 
     @media screen and (max-height: 736px) {
       :host-context(html:not([new-layout])) #relatedInfoImg {
-        max-height: 200px;
+        height: 200px;
       }
     }
     /**

chrome/browser/resources/chromeos/assistant_optin/assistant_shared_styles.css

@@ -71,3 +71,16 @@ h1,
   height: 350px;
   transform: translateY(-15%);
 }
+
+@media screen and (max-height: 1040px) {
+  :host-context([orientation=vertical][screen=oobe]) .animation-container {
+    display: none;
+  }
+}
+
+@media screen and (max-height: 825px) {
+  :host-context([orientation=vertical][screen=gaia-signin])
+      .animation-container {
+    display: none;
+  }
+}

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.css

@@ -6,18 +6,14 @@
   height: 170px;
 }
 
-:host-context(html:not([new-layout])) #ready-img {
-  max-height: 320px;
+#ready-img {
+  height: 288px;
 }
 
 @media screen and (max-height: 736px) {
   #voice-match-animation {
     height: 150px;
   }
-
-  :host-context(html:not([new-layout])) #ready-img {
-    max-height: 280px;
-  }
 }
 
 #loading-animation {

chrome/browser/resources/chromeos/login/components/oobe_adaptive_dialog/oobe_adaptive_dialog.html

@@ -58,6 +58,10 @@ <h1 slot="title">Title</h1>
 <dom-module id="oobe-adaptive-dialog">
   <template>
     <style include="oobe-dialog-host cr-shared-style">
+      /*
+       * Please check whether `multidevice_setup/ui_page.html` needs to be
+       * updated when below css rules are changed.
+       */
       :host {
         height: var(--oobe-adaptive-dialog-height);
         width: var(--oobe-adaptive-dialog-width);

chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_shared_vars_css.html

@@ -4,6 +4,10 @@
 
 <custom-style>
   <style is="custom-style">
+    /*
+     * Please check whether `multidevice_setup/ui_page.html` needs to be
+     * updated when below css vars are changed.
+     */
     html {
       --oobe-adaptive-dialog-text-line-height: 18px;
       --oobe-adaptive-dialog-buttons-horizontal-padding: clamp(20px,

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

@@ -13,16 +13,10 @@
 <dom-module id="gesture-navigation-element">
   <template>
     <style include="oobe-dialog-host">
-      .gesture-animation {
-        height: 300px;
-        width: 300px;
-      }
-
       .gesture-animation-container {
-        height: 300px;
-        margin-top: -22px;
+        height: min(400px, 100%);
         overflow: hidden;
-        width: 300px;
+        width: min(400px, 100%);
       }
 
       .gesture-list-item {

chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc

@@ -94,6 +94,8 @@ AssistantOptInUI::AssistantOptInUI(content::WebUI* web_ui)
                           IDR_ASSISTANT_VOICE_MATCH_ANIMATION);
   source->AddResourcePath("voice_match_already_setup_animation.json",
                           IDR_ASSISTANT_VOICE_MATCH_ALREADY_SETUP_ANIMATION);
+  source->AddBoolean("newLayoutEnabled",
+                     chromeos::features::IsNewOobeLayoutEnabled());
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::WorkerSrc, "worker-src blob: 'self';");
   source->DisableTrustedTypesCSP();

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

@@ -47,9 +47,8 @@ void UserCreationScreenHandler::DeclareLocalizedValues(
                IDS_OOBE_USER_CREATION_CHILD_BUTTON_DESCRIPTION);
   builder->AddF("childSignInTitle", IDS_OOBE_USER_CREATION_CHILD_SIGNIN_TITLE,
                 ui::GetChromeOSDeviceName());
-  builder->AddF("childSignInSubtitle",
-                IDS_OOBE_USER_CREATION_CHILD_SIGNIN_SUBTITLE,
-                ui::GetChromeOSDeviceNameInPlural());
+  builder->Add("childSignInSubtitle",
+               IDS_OOBE_USER_CREATION_CHILD_SIGNIN_SUBTITLE);
   builder->Add("createAccountForChildLabel",
                IDS_OOBE_USER_CREATION_CHILD_ACCOUNT_CREATION_BUTTON_LABEL);
   builder->Add("signInForChildLabel",

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

@@ -88,8 +88,8 @@
       :host-context([new-layout][screen=oobe]) #header-container,
       :host-context([new-layout][screen=gaia-signin]) #header-container {
         padding-top: calc(var(--multidevice-setup-dialog-content-padding)
-          + 2 * min(40px, max(24px, calc(var(--multidevice-setup-dialog-height)
-          * 0.025))) + 32px);
+          + 2 * clamp(20px, calc(var(--multidevice-setup-dialog-height)
+          * 0.035), 40px) + 34px);
       }
 
       :host-context([new-layout]) #additional-content-container {