Oobe child specific signin: update assets

Bug: 1101318
Change-Id: I4750459cbdf3a069c76ca8726ed75c647ac5d387
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2352894
Commit-Queue: Yunke Zhou <yunkez@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798180}

chrome/browser/chromeos/login/ui/login_display_host_mojo.cc

@@ -118,11 +118,13 @@ void LoginDisplayHostMojo::SetUserCount(int user_count) {
 
   // Hide Gaia dialog in case empty list of users switched to a non-empty one.
   // And if the dialog shows login screen.
+  const OobeScreenId start_screen = features::IsChildSpecificSigninEnabled()
+                                        ? UserCreationView::kScreenId
+                                        : GaiaView::kScreenId;
   if (was_zero_users && user_count_ != 0 && dialog_ && dialog_->IsVisible() &&
       (!wizard_controller_->is_initialized() ||
        (wizard_controller_->current_screen() &&
-        wizard_controller_->current_screen()->screen_id() ==
-            GaiaView::kScreenId))) {
+        wizard_controller_->current_screen()->screen_id() == start_screen))) {
     HideOobeDialog();
   }
 }

chrome/browser/chromeos/login/wizard_controller.cc

@@ -844,7 +844,7 @@ void WizardController::OnUserCreationScreenExit(
       AdvanceToScreen(GaiaView::kScreenId);
       break;
     case UserCreationScreen::Result::ENTERPRISE_ENROLL:
-      ShowEnrollmentScreen();
+      AdvanceToScreen(EnrollmentScreenView::kScreenId);
       break;
     case UserCreationScreen::Result::CANCEL:
       LoginDisplayHost::default_host()->HideOobeDialog();
@@ -1348,7 +1348,10 @@ void WizardController::OnDeviceModificationCanceled() {
   current_screen_->Hide();
   current_screen_ = nullptr;
   if (previous_screen_) {
-    if (previous_screen_ == GetScreen(GaiaView::kScreenId)) {
+    const OobeScreenId start_screen = features::IsChildSpecificSigninEnabled()
+                                          ? UserCreationView::kScreenId
+                                          : GaiaView::kScreenId;
+    if (previous_screen_ == GetScreen(start_screen)) {
       ShowLoginScreen();
     } else {
       SetCurrentScreen(previous_screen_);

chrome/browser/resources/chromeos/login/components/oobe_dialog.css

@@ -82,7 +82,7 @@
   padding-inline-start: var(--oobe-dialog-content-padding);
 
   /* TODO(https://crbug.com/1017173) Make it adaptive. */
-  padding-top: 20px;
+  padding-top: var(--oobe-dialog-content-padding-top);
 }
 
 #footerContainer[noFooterPadding] {

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

@@ -8,20 +8,22 @@ found in the LICENSE file. -->
 
 <dom-module id="family-link-notice">
   <template>
-    <style include="oobe-dialog-host"></style>
+    <style include="oobe-dialog-host">
+      oobe-dialog {
+        --oobe-dialog-content-padding-top: 0;
+      }
+    </style>
     <oobe-dialog id="familyLinkDialog" role="dialog" has-buttons>
-      <!-- TODO(crbug.com/1101318): replace with correct icon -->
       <hd-iron-icon slot="oobe-icon"
-          icon1x="oobe-32:enterprise" icon2x="oobe-64:enterprise">
+          icon1x="oobe-32:family" icon2x="oobe-64:family">
       </hd-iron-icon>
       <h1 slot="title">[[getDialogTitle_(locale, email_, domain_)]]</h1>
       <div slot="subtitle">
         [[getDialogSubtitle_(locale, isNewGaiaAccount_, email_, domain_)]]
       </div>
       <div slot="footer" class="flex layout vertical center center-justified">
-        <!-- TODO(crbug.com/1101318): replace with correct image -->
-        <img srcset="images/illustration_complete_1x.png 1x,
-            images/illustration_complete_2x.png 2x" class="oobe-illustration"
+        <img srcset="images/1x/parental_control.svg 1x,
+            images/2x/parental_control.svg 2x" class="oobe-illustration"
             alt$="[[i18nDynamic(locale, 'familyLinkDialogTitle')]]">
       </div>
       <div slot="bottom-buttons" class="layout horizontal end-justified">

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

@@ -1360,7 +1360,8 @@ Polymer({
     if (this.screenMode_ == AuthMode.AD_AUTH)
       chrome.send('cancelAdAuthentication');
 
-    if (this.isClosable_())
+    // Only close oobe dialog when it is the first screen in add user flow.
+    if (this.isClosable_() && !this.childSpecificSigninFeatureEnabled_)
       Oobe.showUserPods();
     else
       Oobe.resetSigninUI(true);

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

@@ -11,10 +11,12 @@ found in the LICENSE file. -->
     <style include="oobe-dialog-host">
       cr-card-radio-button {
         border-radius: 16px;
+        height: 210px;
         --cr-button-edge-spacing: 0;
         --cr-card-radio-button-height: 100%;
         --cr-card-radio-button-padding: 0;
         --cr-card-radio-button-margin: 0;
+        --cr-radio-button-ink-size: 0;
         --cr-radio-group-item-padding: 8px;
       }
 
@@ -43,8 +45,8 @@ found in the LICENSE file. -->
         padding-top: 16px;
       }
 
-      .footer-container {
-        padding-bottom: 20px;
+      oobe-dialog {
+        --oobe-dialog-content-padding-top: 0;
       }
 
       .next-button {
@@ -57,14 +59,13 @@ found in the LICENSE file. -->
       <hd-iron-icon icon1x="oobe-32:googleg" icon2x="oobe-64:googleg"
         slot="oobe-icon">
       </hd-iron-icon>
-      <div slot="footer" class="footer-container flex layout vertical
-          center-justified">
+      <div slot="footer" class="flex layout vertical center-justified">
         <cr-radio-group id="userType" class="layout horizontal"
             selected="{{selectedUserType}}">
           <cr-card-radio-button id="selfButton" class="flex" name="self">
             <div class="card-container layout vertical center">
-              <hd-iron-icon class="card-icon" icon1x="oobe-48:self"
-                  icon2x="oobe-96:self">
+              <hd-iron-icon class="card-icon" icon1x="oobe-48:avatar"
+                  icon2x="oobe-96:avatar">
               </hd-iron-icon>
               <div class="card-label">
                 [[i18nDynamic(locale, 'createForSelfLabel')]]
@@ -76,8 +77,8 @@ found in the LICENSE file. -->
           </cr-card-radio-button>
           <cr-card-radio-button id="childButton" class="flex" name="child">
             <div class="card-container layout vertical center">
-              <hd-iron-icon class="card-icon" icon1x="oobe-32:avatar"
-                icon2x="oobe-64:avatar">
+              <hd-iron-icon class="card-icon" icon1x="oobe-48:child-user"
+                icon2x="oobe-96:child-user">
               </hd-iron-icon>
               <div class="card-label">
                 [[i18nDynamic(locale, 'createForChildLabel')]]
@@ -102,7 +103,7 @@ found in the LICENSE file. -->
     <oobe-dialog id="childSignInDialog" role="dialog" has-buttons
         title-key="childSignInTitle" subtitle-key="childSignInSubtitle"
         for-step="child">
-      <hd-iron-icon icon1x="oobe-32:googleg" icon2x="oobe-64:googleg"
+      <hd-iron-icon icon1x="oobe-32:family" icon2x="oobe-64:family"
         slot="oobe-icon">
       </hd-iron-icon>
       <div slot="footer" class="footer-container flex layout vertical
@@ -123,8 +124,8 @@ found in the LICENSE file. -->
           <cr-card-radio-button id="childSignInButton" name="signin"
               class="flex">
             <div class="card-container layout vertical center">
-              <hd-iron-icon class="card-icon" icon1x="oobe-48:child-account"
-                  icon2x="oobe-96:child-account">
+              <hd-iron-icon class="card-icon" icon1x="oobe-48:supervised-user"
+                  icon2x="oobe-96:supervised-user">
               </hd-iron-icon>
               <div class="card-label">
                 [[i18nDynamic(locale, 'signInForChildLabel')]]

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

@@ -101,6 +101,12 @@ Polymer({
     this.isBackButtonVisible_ = isVisible;
   },
 
+  cancel() {
+    if (this.isBackButtonVisible_) {
+      this.onBackClicked_();
+    }
+  },
+
   onBackClicked_() {
     if (this.uiStep === UIState.CHILD) {
       chrome.send('updateOobeUIState', [OOBE_UI_STATE.USER_CREATION]);

ui/login/oobe.css

@@ -49,6 +49,7 @@ html {
   --oobe-dialog-footer-height: 96px;
   --oobe-dialog-footer-padding: 32px;
   --oobe-dialog-content-padding: 64px;
+  --oobe-dialog-content-padding-top: 20px;
 
   /* This size fits 675px screen with docked magnifier and shelf. Basically this
    * is calc(675px * (1 - 1 / 3) - 10px - var(--shelf-area-height-base)) where

ui/webui/resources/cr_elements/cr_radio_button/cr_card_radio_button.html

@@ -27,6 +27,7 @@
       }
 
       #button {
+        height: var(--cr-card-radio-button-height, auto);
         padding: var(--cr-card-radio-button-padding, 24px);
         position: relative;
         width: 100%;