[ProfilePicker]: Profile name input and create shortcut checkbox.

Screenshot:
https://drive.google.com/file/d/1z78dkOIi7FbwSXuOzOhC-mpcnuw4JsFl/view?usp=sharing

Bug: 1115056
Fixed: 1121137
Change-Id: I46bb7b3bbd41a7ced628681e84026442a5d414fd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2366938
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#800994}

chrome/app/profiles_strings.grdp

@@ -736,10 +736,8 @@
     <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_INPUT_NAME" desc="Name of the input to configure the profile name in the profile customization window.">
       Example: Work, Personal, Kids, or a name
     </message>
-    <if expr="is_win">
-      <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_SHORTCUT_TEXT" desc="Text of a box creating a desktop shortcut for the profile.">
-        Create a desktop shortcut
-      </message>
-    </if>
+    <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_SHORTCUT_TEXT" desc="Text of a box creating a desktop shortcut for the profile.">
+      Create a desktop shortcut
+    </message>
   </if>
 </grit-part>

chrome/browser/resources/signin/profile_picker/BUILD.gn

@@ -82,6 +82,13 @@ js_library("manage_profiles_browser_proxy") {
   externs_list = [ "$externs_path/chrome_send.js" ]
 }
 
+js_library("policy_helper") {
+  deps = [
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+}
+
 group("web_components") {
   public_deps = [
     ":web_components_local",

chrome/browser/resources/signin/profile_picker/profile_creation_flow/BUILD.gn

@@ -31,7 +31,10 @@ js_library("local_profile_customization") {
     "..:manage_profiles_browser_proxy",
     "..:navigation_behavior",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_checkbox:cr_checkbox.m",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 

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

 <style include="profile-creation-shared">
+  :host {
+    --vertical-gap: 24px;
+  }
+
   #title {
     color: var(--theme-text-color);
     font-weight: normal;
     padding-top: 84px;
     text-align: center;
   }
+
+  #nameInput {
+    --cr-input-placeholder-color: rgba(var(--google-grey-900-rgb), .5);
+    --cr-input-border-bottom: 1px solid var(--cr-secondary-text-color);
+    height: 32px;
+    margin: calc(var(--avatar-size)/2 + var(--vertical-gap)) auto 0 auto;
+    width: 300px;
+  }
+
+  #colorPicker {
+    height: 220px;
+    margin: var(--vertical-gap) auto var(--vertical-gap) auto;
+    width: 370px;
+  }
+
+  cr-checkbox {
+    --cr-checkbox-label-color:  var(--cr-secondary-text-color);
+    --cr-checkbox-label-padding-start: 8px;
+    height: 20px;
+    margin: auto;
+    width: fit-content;
+  }
+
+  cr-checkbox[hidden] {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #nameInput {
+      --cr-input-placeholder-color: rgba(var(--google-grey-200-rgb), .5);
+    }
+  }
 </style>
 
 <div id="headerContainer"
@@ -15,6 +51,21 @@
   <cr-icon-button id="backButton" class="icon-arrow-back"
         on-click="onClickBack_" aria-label="$i18n{backButtonLabel}">
   </cr-icon-button>
-  <h2 id="title">$i18n{localProfileCreationTitle}<h2>
+  <h2 id="title">$i18n{localProfileCreationTitle}</h2>
   <img class="avatar" src$="[[profileThemeInfo.themeGenericAvatar]]">
 </div>
+
+<cr-input id="nameInput" value="{{profileName_}}" pattern=".*\\S.*"
+    placeholder="$i18n{createProfileNamePlaceholder}"
+    auto-validate spellcheck="false">
+</cr-input>
+
+<!-- TODO(crbug.com/1115301): Add color picker. -->
+<div id="colorPicker"
+    style$="background-color:[[profileThemeInfo.themeFrameColor]]">
+</div>
+
+<cr-checkbox checked="{{createShortcut_}}"
+    hidden="[[!isProfileShortcutsEnabled_]]">
+    $i18n{createDesktopShortcutLabel}
+</cr-checkbox>

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

@@ -3,9 +3,13 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
+import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './shared_css.js';
 import '../icons.js';
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {AutogeneratedThemeColorInfo} from '../manage_profiles_browser_proxy.js';
@@ -21,10 +25,44 @@ Polymer({
     profileThemeInfo: {
       type: Object,
     },
+
+    /**
+     * The current profile name.
+     * @private {string}
+     */
+    profileName_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * if true, a desktop shortcut will be created for the new profile.
+     * @private {boolean}
+     */
+    createShortcut_: {
+      type: Boolean,
+      value: true,
+    },
+
+    /**
+     * True if the profile shortcuts feature is enabled.
+     * @private
+     */
+    isProfileShortcutsEnabled_: {
+      type: Boolean,
+      value: () => loadTimeData.getBoolean('profileShortcutsEnabled'),
+    },
   },
 
   /** @private */
   onClickBack_() {
     navigateToPreviousRoute();
+    this.reset_();
+  },
+
+  /** @private */
+  reset_() {
+    this.profileName_ = '';
+    this.createShortcut_ = true;
   },
 });

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

 <template>
   <style include="cr-icons profile-picker-shared">
+    :host {
+      --avatar-size: 100px;
+    }
+
     #headerContainer {
       background-color: var(--theme-frame-color);
-      height: 266px;
+      height: 244px;
       position: relative;
       width: 100%;
     }
@@ -24,7 +28,6 @@
     }
 
     .avatar {
-      --avatar-size: 100px;
       border: 2px solid var(--md-background-color);
       border-radius: 50%;
       bottom: calc(var(--avatar-size)/-2);

chrome/browser/ui/webui/signin/profile_picker_ui.cc

@@ -8,6 +8,7 @@
 #include "base/strings/stringprintf.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/profiles/profile_shortcut_manager.h"
 #include "chrome/browser/signin/signin_util.h"
 #include "chrome/browser/ui/ui_features.h"
 #include "chrome/browser/ui/webui/signin/profile_picker_handler.h"
@@ -73,6 +74,10 @@ void AddStrings(content::WebUIDataSource* html_source) {
        IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_NOT_NOW_BUTTON_LABEL},
       {"localProfileCreationTitle",
        IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_TITLE},
+      {"createProfileNamePlaceholder",
+       IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_INPUT_NAME},
+      {"createDesktopShortcutLabel",
+       IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_SHORTCUT_TEXT},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
   html_source->AddBoolean("askOnStartup",
@@ -91,6 +96,8 @@ void AddStrings(content::WebUIDataSource* html_source) {
   html_source->AddBoolean("isGuestModeEnabled", IsGuestModeEnabled());
   html_source->AddBoolean("isProfileCreationAllowed",
                           IsProfileCreationAllowed());
+  html_source->AddBoolean("profileShortcutsEnabled",
+                          ProfileShortcutManager::IsFeatureEnabled());
   // TODO(crbug.com/1063856): Check if |BrowserSignin| device policy exists.
 }