[LocalProfileCreation]: Add customize avatar button.

This CL adds the edit avatar button in the local profile creation flow.

Bug: 1162443
Change-Id: Ie6b9c1907dde8fbd5609ab28b77cace32ff69b18
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2607305
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@{#840607}

chrome/app/profiles_strings.grdp

@@ -761,6 +761,9 @@
     <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_TITLE" desc="Title for the local profile customiztion screen on the picker.">
       Customize your profile
     </message>
+    <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_CUSTOMIZE_AVATAR_BUTTON_LABEL" desc="Accessibility label for edit avatar button when the pencil icon is focused that is not rendered.">
+      Customize avatar
+    </message>
     <message name="IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_THEME_TEXT" desc="Text of a section to pick a color for the profile.">
       Pick a theme color
     </message>

chrome/app/profiles_strings_grdp/IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_CUSTOMIZE_AVATAR_BUTTON_LABEL.png.sha1

+5930b73268d829b224f48ce857fbd94bb678a87a
\ No newline at end of file

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

@@ -10,6 +10,48 @@
     text-align: center;
   }
 
+  #avatarContainer {
+    --edit-avatar-border: 3px;
+    --edit-avatar-size : 36px;
+  }
+
+  #customizeAvatarEllipse {
+    background-color: var(--md-background-color);
+    border-radius: 50%;
+    bottom: 0;
+    height: var(--edit-avatar-size);
+    margin: auto;
+    position: absolute;
+    right: 0;
+    width : var(--edit-avatar-size);
+    z-index: 2;
+  }
+
+  #customizeAvatarIcon {
+    --cr-icon-button-icon-size: 18px;
+    --cr-icon-button-size: calc(var(--edit-avatar-size) -
+      2 * var(--edit-avatar-border));
+    background-color: var(--md-background-color);
+    border-radius: 50%;
+    bottom: var(--edit-avatar-border);
+    box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px rgba(60, 64, 67, 0.15);
+    box-sizing: border-box;
+    margin: auto;
+    position: absolute;
+    right: var(--edit-avatar-border);
+    z-index: 3;
+  }
+
+  :host-context([dir='rtl']) #customizeAvatarEllipse {
+    left: 0;
+    right: initial;
+  }
+
+  :host-context([dir='rtl']) #customizeAvatarIcon {
+    left: var(--edit-avatar-border);
+    right: initial;
+  }
+
   #wrapperContainer {
     display: flex;
     height: calc(max(100vh, var(--view-min-size)) -
@@ -106,6 +148,10 @@
       --cr-input-placeholder-color: rgba(var(--google-grey-200-rgb), .5);
     }
 
+    #customizeAvatarIcon {
+      border: 1px solid var(--google-grey-refresh-500);
+    }
+
     #colorPickerContainer {
       border-color: var(--google-grey-refresh-700);
     }
@@ -121,7 +167,14 @@
         on-click="onClickBack_" aria-label="$i18n{backButtonLabel}">
   </cr-icon-button>
   <h2 id="title">$i18n{localProfileCreationTitle}</h2>
-  <img class="avatar" alt="" src$="[[profileThemeInfo.themeGenericAvatar]]">
+  <div id="avatarContainer">
+    <img class="avatar" alt="" src$="[[profileThemeInfo.themeGenericAvatar]]">
+    <div id="customizeAvatarEllipse"></div>
+    <cr-icon-button id="customizeAvatarIcon"
+        iron-icon="profiles:create" on-click="onCustomizeAvatarClick_"
+        aria-label="$i18n{localProfileCreationCustomizeAvatarLabel}">
+    </cr-icon-button>
+  </div>
 </div>
 
 <div id="wrapperContainer">

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

@@ -183,6 +183,11 @@ Polymer({
     navigateToPreviousRoute();
   },
 
+  /** @private */
+  onCustomizeAvatarClick_() {
+    // TODO(msalama): Open select avatar dialog.
+  },
+
   /** @private */
   onProfileThemeInfoChange_() {
     if (this.disableSelectedThemeUpdates_) {

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

@@ -61,7 +61,9 @@
       disabled="[[loadSigninInProgess_]]">
   </cr-icon-button>
   <div id="signinPromoBanner" class="banner"></div>
-  <img class="avatar" alt="" src="[[profileThemeInfo.themeGenericAvatar]]">
+  <div id="avatarContainer">
+    <img class="avatar" alt="" src="[[profileThemeInfo.themeGenericAvatar]]">
+  </div>
 </div>
 <div class="title-container">
   <h2>$i18n{profileTypeChoiceTitle}</h2>

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

@@ -31,15 +31,20 @@
       z-index: 1;
     }
 
-    .avatar {
-      border: 2px solid var(--md-background-color);
-      border-radius: 50%;
-      bottom: calc(var(--avatar-size)/-2);
-      height: var(--avatar-size);
+    #avatarContainer {
+      bottom: calc(var(--avatar-size) / -2);
+      height: calc(var(--avatar-size) + 4px);
       left: 0;
       margin: auto;
       position: absolute;
       right: 0;
+      width: calc(var(--avatar-size) + 4px);
+    }
+
+    .avatar {
+      border: 2px solid var(--md-background-color);
+      border-radius: 50%;
+      height: var(--avatar-size);
       width: var(--avatar-size);
       z-index: 1;
     }

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

@@ -43,13 +43,13 @@
       width: 130px;
     }
 
-  .footer {
-    bottom: 0;
-    display: flex;
-    font-size: var(--text-font-size);
-    margin-bottom: var(--footer-margin);
-    position: absolute;
-    width: 100%;
-  }
+    .footer {
+      bottom: 0;
+      display: flex;
+      font-size: var(--text-font-size);
+      margin-bottom: var(--footer-margin);
+      position: absolute;
+      width: 100%;
+    }
   </style>
 </template>

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

@@ -106,6 +106,8 @@ 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},
+      {"localProfileCreationCustomizeAvatarLabel",
+       IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_CUSTOMIZE_AVATAR_BUTTON_LABEL},
       {"localProfileCreationThemeText",
        IDS_PROFILE_PICKER_PROFILE_CREATION_FLOW_LOCAL_PROFILE_CREATION_THEME_TEXT},
       {"createProfileNamePlaceholder",