[Profile Picker]: Focus profile name in local profile creation + bug fix

This CL does the following:
- Focus the profile name on navigation to the profile creation flow.
- Validate the profile name input once the focus from the input field is
lost ex: click away, tab, shift + tab.

Other fixes:
- Ensure the back button is clickable and is on top of the illustartion.
- The profile theme info should be two-way binding between the profile
picker app and the local profile creation. Any changes in the color
should be reflected in the sign in promo.
- There is no need to call native to get the profile theme color on
every click on the 'Add' button in the profile picker main view. This CL
changes the behaviour to only get the color on the first click.
- Wrap the username in the remove warning message if it is too long.

Bug: 1115056
Change-Id: Iea0247ea9c73965f76bd0bdccddfcc127cb11fdc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2494811
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821746}

chrome/browser/resources/signin/profile_picker/profile_card_menu.html

@@ -35,6 +35,10 @@
     white-space: nowrap;
   }
 
+  #userName {
+    overflow-wrap: break-word;
+  }
+
   .key-text {
     font-weight: 500;
   }
@@ -109,9 +113,9 @@
     </div>
     <div class="warning-message">
       [[removeWarningText_]]
-      <span hidden$="[[!profileState.isSyncing]]" class="key-text">
+      <div id="userName" hidden$="[[!profileState.isSyncing]]" class="key-text">
         [[profileState.userName]]
-      </span>
+      </div>
     </div>
     <table class="statistics">
       <template is="dom-repeat" items="[[profileStatistics_]]">

chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.html

@@ -128,7 +128,8 @@
   <div id="wrapper">
     <cr-input id="nameInput" value="{{profileName_}}" pattern="[[pattern_]]"
         placeholder="$i18n{createProfileNamePlaceholder}"
-        auto-validate spellcheck="false">
+        on-blur="onProfileNameInputBlur_"
+        auto-validate spellcheck="false" required>
     </cr-input>
 
     <div id="colorPickerContainer">

chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.js

@@ -17,7 +17,7 @@ import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behav
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {AutogeneratedThemeColorInfo, ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl, UserThemeChoice} from '../manage_profiles_browser_proxy.js';
-import {navigateToPreviousRoute} from '../navigation_behavior.js';
+import {navigateTo, navigateToPreviousRoute, ProfileCreationSteps, Routes} from '../navigation_behavior.js';
 import {isProfileCreationAllowed} from '../policy_helper.js';
 
 Polymer({
@@ -35,6 +35,7 @@ Polymer({
     profileThemeInfo: {
       type: Object,
       observer: 'onProfileThemeInfoChange_',
+      notify: true,
     },
 
     /**
@@ -99,6 +100,10 @@ Polymer({
     },
   },
 
+  listeners: {
+    'view-enter-start': 'onViewEnterStart_',
+  },
+
   /** @private {?ManageProfilesBrowserProxy} */
   manageProfilesBrowserProxy_: null,
 
@@ -115,6 +120,12 @@ Polymer({
         'create-profile-finished', () => this.handleCreateProfileFinished_());
   },
 
+  /** @private */
+  onViewEnterStart_() {
+    this.$.nameInput.focusInput();
+    this.$.wrapper.scrollTop = 0;
+  },
+
   /**
    * @return {boolean}
    * @private
@@ -127,6 +138,14 @@ Polymer({
     return true;
   },
 
+  /**
+   * Handler for profile name blur.
+   * @private
+   */
+  onProfileNameInputBlur_() {
+    this.$.nameInput.validate();
+  },
+
   /**
    * Determining whether 'Save' button is disabled.
    * @return {boolean}
@@ -162,14 +181,6 @@ Polymer({
   /** @private */
   onClickBack_() {
     navigateToPreviousRoute();
-    this.reset_();
-  },
-
-  /** @private */
-  reset_() {
-    this.profileName_ = '';
-    this.createShortcut_ = true;
-    this.$.wrapper.scrollTop = 0;
   },
 
   /** @private */
@@ -220,7 +231,9 @@ Polymer({
 
   /** @private */
   handleCreateProfileFinished_() {
-    this.onClickBack_();
+    // On profile creation, the picker window is closed.
+    // 'navigateTo' is meaningful if the picker is shown in a tab.
+    navigateTo(Routes.MAIN);
     this.createInProgress_ = false;
   }
 });

chrome/browser/resources/signin/profile_picker/profile_creation_flow/shared_css.html

@@ -18,6 +18,7 @@
       position: absolute;
       top: 0;
       width: 100%;
+      z-index: 0;
     }
 
     #backButton {
@@ -26,6 +27,8 @@
       --cr-icon-button-margin-start: 4px;
       --cr-icon-button-size: 36px;
       margin-top: 4px;
+      position: relative;
+      z-index: 1;
     }
 
     .avatar {
@@ -38,6 +41,7 @@
       position: absolute;
       right: 0;
       width: var(--avatar-size);
+      z-index: 1;
     }
   </style>
 </template>

chrome/browser/resources/signin/profile_picker/profile_picker_app.html

@@ -25,7 +25,7 @@
   <cr-lazy-render id="localProfileCustomization">
     <template>
       <local-profile-customization slot="view"
-          profile-theme-info="[[newProfileThemeInfo]]">
+          profile-theme-info="{{newProfileThemeInfo}}">
       </local-profile-customizatione>
     </template>
   </cr-lazy-render>

chrome/browser/resources/signin/profile_picker/profile_picker_app.js

@@ -103,6 +103,9 @@ Polymer({
    * @private
    */
   async initializeNewProfileThemeInfo_() {
+    if (this.newProfileThemeInfo) {
+      return Promise.resolve();
+    }
     this.newProfileThemeInfo = await this.manageProfilesBrowserProxy_
                                    .getNewProfileSuggestedThemeInfo();
   },