[ProfilePicker]: Add background image for the profile picker main view.

Screenshot: https://drive.google.com/file/d/1pP-ORyHcdbgILeijGR_s5S7-jkr1Sgii/view?usp=sharing

Bug: 1063856
Change-Id: I8dc725b921ace9c3f59edfab6753adec1e6c2ef5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2279885
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785733}

chrome/browser/resources/signin/profile_picker/left_banner_image.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="628" fill="none"><path d="M44.8 159.201l-8.3 43.1c-.5 2.4 1.9 4.4 4.2 3.6l41.5-14.3c2.3-.8 2.9-3.8 1.1-5.4l-33.3-28.8c-1.8-1.6-4.7-.6-5.2 1.8z" fill="#FBBC05"/><path d="M69.4 46.2L52.8 41c-1.7-.5-3.5.4-4 2.1l-5.2 16.6c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.7-.4-3.5-2.1-4z" stroke="#E8EAED" stroke-width="2" stroke-miterlimit="10"/><path d="M45.2 281.3a8.6 8.6 0 10-.001-17.2 8.6 8.6 0 000 17.2z" fill="#E8EAED"/><path d="M122 164.6a8.6 8.6 0 100-17.2 8.6 8.6 0 000 17.2z" fill="#34A853"/><path d="M60.5 536.9L22.7 528c-1.7-.4-3.4.7-3.8 2.4L10 568.1c-.4 1.7.7 3.4 2.4 3.8l37.8 8.9c1.7.4 3.4-.7 3.8-2.4l8.9-37.8c.4-1.6-.7-3.3-2.4-3.7z" fill="#FBBC05"/><path d="M116.101 351.6l-17.7 11.8c-1 .6-1.5 1.7-1.4 2.9l1.4 21.2c.1 1.1.7 2.2 1.8 2.7l19.1 9.5c1 .5 2.2.4 3.2-.2l17.7-11.8c1-.6 1.5-1.7 1.4-2.9l-1.4-21.2c-.1-1.1-.7-2.2-1.8-2.7l-19.1-9.5c-1-.5-2.2-.5-3.2.2z" fill="#F1F3F4"/><path d="M44.5 413.399c3.6 4.8 2.6 11.6-2.2 15.3-4.8 3.7-11.6 2.6-15.3-2.2-3.6-4.8-2.6-11.6 2.2-15.3 4.8-3.7 11.7-2.6 15.3 2.2zm-23.2-12.9c-10.7 8-12.9 23.2-4.9 33.9s23.2 12.9 33.9 4.9 12.9-23.2 4.9-33.9-23.2-12.9-33.9-4.9z" fill="#EA4335"/><path d="M91.7 283.3l-28.9 36.4c-1.1 1.4-.9 3.4.5 4.5l15.1 12c1.4 1.1 3.4.9 4.5-.5l28.9-36.4c1.1-1.4.9-3.4-.5-4.5l-15.1-12c-1.4-1.1-3.4-.9-4.5.5z" fill="#4285F4"/><path d="M144 401.7c7.124 0 12.9-5.775 12.9-12.9 0-7.124-5.776-12.9-12.9-12.9-7.125 0-12.9 5.776-12.9 12.9 0 7.125 5.775 12.9 12.9 12.9z" fill="#FBBC05"/><path d="M131.201 388.101c-.1 1.8.2 3.4.7 5l8.2-5.5c1-.6 1.5-1.7 1.4-2.9l-.5-8.4c-5.4 1.3-9.5 6-9.8 11.8z" fill="#fff"/><path d="M98.2 502.3c6.101-7.3 5.101-18.2-2.2-24.3-2.6-2.2-5.7-3.499-8.8-3.899l-4.4-.6c-4.3-.5-8.2-2.9-10.5-6.5l-2.9-4.3c-.6-.8-1.3-1.6-2.1-2.2-5.2-4.3-12.9-3.7-17.3 1.5S46.3 474.9 51.5 479.3c.8.7 1.7 1.2 2.5 1.6l4.7 2.1c4 1.7 7 5.101 8.3 9.201l1.3 4.199c1 3 2.8 5.8 5.4 8 7.5 6.2 18.4 5.2 24.5-2.1z" stroke="#E8EAED" stroke-width="2" stroke-miterlimit="10"/><path d="M20.7 538.299c-1.2-.3-2.4-.5-3.6-.6l-7.2 30.6c-.4 1.6.6 3.3 2.3 3.6l29.1 6.9c.6-1.5 1.1-3.1 1.5-4.7 3.8-16-6.1-32-22.1-35.8z" fill="#FCC934"/><path d="M191 96.8c6.7-2.3 10.3-9.6 8.1-16.3-2.2-6.7-9.6-10.3-16.3-8.1l-32 10.8c-6.7 2.3-10.3 9.6-8.1 16.3 2.2 6.7 9.6 10.3 16.3 8.1l32-10.8z" fill="#F1F3F4"/></svg>
\ No newline at end of file

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

 <style>
   :host {
     --avatar-icon-size: 74px;
+    --banner-img-height: 628px;
+    --banner-img-width: 250px;
+  }
+
+  .banner {
+    bottom: 0;
+    height: var(--banner-img-height);
+    margin: auto;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: var(--banner-img-width);
+    z-index: -1;
+  }
+
+  #leftBanner {
+    background: url(left_banner_image.svg);
+    left: 0;
+  }
+
+  #rightBanner {
+    background: url(right_banner_image.svg);
+    right: 0;
   }
 
  .profiles-container {
     --grid-gutter: 24px;
-    --max-columns: 4;
     --profile-item-height:178px;
     --profile-item-width: 162px;
     align-items: center;
@@ -15,9 +37,8 @@
     grid-template-columns: repeat(auto-fit, var(--profile-item-width));
     justify-content: center;
     margin: auto;
-    max-width: calc(var(--profile-item-width) * var(--max-columns) +
-        var(--grid-gutter) * var(--max-columns));
-    padding: 20px;
+    margin-inline-end: 140px;
+    margin-inline-start: 140px;
  }
 
  .profile-item {
@@ -48,6 +69,8 @@
   /* TODO(msalama): Dark mode mocks not ready yet.*/
  }
 </style>
+
+<div id="leftBanner" class="banner"></div>
 <div class="profiles-container">
   <template is="dom-repeat"
       hidden="[[!profilesList_]]" items="[[profilesList_]]">
@@ -60,3 +83,4 @@
     </cr-icon-button>
   </div>
 </div>
+<div id="rightBanner" class="banner"></div>

chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd

@@ -12,6 +12,12 @@
   </outputs>
   <release seq="1">
     <includes>
+    <include name="IDR_PROFILE_PICKER_LEFT_BANNER_IMAGE"
+               file="left_banner_image.svg"
+               type="BINDATA" />
+    <include name="IDR_PROFILE_PICKER_RIGHT_BANNER_IMAGE"
+               file="right_banner_image.svg"
+               type="BINDATA" />
     <!-- Generated Polymer 3 elements -->
       <include name="IDR_PROFILE_PICKER_PROFILE_PICKER_MAIN_VIEW_JS"
                file="${root_gen_dir}/chrome/browser/resources/signin/profile_picker/profile_picker_main_view.js"

chrome/browser/resources/signin/profile_picker/right_banner_image.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="628" fill="none"><path d="M108.2 153.1c5.2 4.8 13.3 4.5 18.2-.7 4.9-5.2 4.5-13.3-.7-18.2l-24.7-23c-5.2-4.8-13.3-4.5-18.2.7-4.9 5.2-4.5 13.3.7 18.2l24.7 23z" stroke="#E8EAED" stroke-width="2" stroke-miterlimit="10"/><path d="M178 295.9c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#EA4335"/><path d="M181.301 255.701l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.6c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.6-.4-3.4-2.1-4z" fill="#F1F3F4"/><path d="M227.1 87.7l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.601c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.7-.4-3.5-2.1-4z" fill="#E8EAED"/><path d="M171.2 272.1c-1.7 1.1-3.1 2.5-4.1 4.1l7.1 2.2c1.7.5 3.5-.4 4-2.1l1.9-6c-3-.5-6.1 0-8.9 1.8z" fill="#fff"/><path d="M91.4 309.1l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.4-2.3-.2-3.2.5z" fill="#F1F3F4"/><path d="M201.9 173.2l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.5-2.3-.3-3.2.5zM177.5 577.8a8.6 8.6 0 100-17.2 8.6 8.6 0 000 17.2zM228.299 350.501c0 6-4.9 10.9-10.9 10.9s-10.9-4.9-10.9-10.9 4.9-10.9 10.9-10.9 10.9 4.9 10.9 10.9zm-10.9-24.2c-13.4 0-24.2 10.8-24.2 24.2 0 13.4 10.8 24.2 24.2 24.2 13.4 0 24.2-10.8 24.2-24.2 0-13.3-10.8-24.2-24.2-24.2z" fill="#4285F4"/><path d="M144.7 410l-29.5 32.5c-1.7 1.8-.7 4.8 1.7 5.3l42.9 9.3c2.4.5 4.5-1.8 3.7-4.1l-13.4-41.8c-.8-2.4-3.8-3-5.4-1.2z" fill="#F1F3F4"/><path d="M222.599 476.5l-36.9 28.3c-1.4 1.1-1.7 3.1-.6 4.5l11.8 15.3c1.1 1.4 3.1 1.7 4.5.6l36.9-28.3c1.4-1.1 1.7-3.1.6-4.5l-11.8-15.3c-1-1.4-3.1-1.7-4.5-.6z" stroke="#34A853" stroke-width="2" stroke-miterlimit="10"/><path d="M133 152.4c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#FBBC05"/><path d="M168.201 44.6c-5.1-8-15.8-10.4-23.8-5.3-2.9 1.8-5 4.4-6.4 7.2l-1.9 4c-1.8 3.9-5.2 6.9-9.4 8.1l-5 1.4c-.9.3-1.9.7-2.7 1.3-5.7 3.6-7.4 11.2-3.8 16.9 3.6 5.7 11.2 7.4 16.9 3.8.9-.6 1.7-1.2 2.3-1.9l3.4-3.9c2.8-3.3 7-5.1 11.3-5.1h4.4a17 17 0 009.2-2.7c8.3-5.1 10.6-15.8 5.5-23.8z" fill="#F1F3F4"/><path d="M195.7 456.001c6.7-2.3 10.299-9.6 8.099-16.3-2.3-6.7-9.599-10.3-16.299-8.1l-32 10.8c-6.7 2.3-10.3 9.6-8.1 16.3 2.3 6.7 9.6 10.3 16.3 8.1l32-10.8z" fill="#FBBC05"/><path d="M146.801 454.3l13 2.8c2.4.5 4.5-1.8 3.7-4.1l-3.8-12-4.1 1.4c-5.4 1.7-8.7 6.6-8.8 11.9z" fill="#34A853"/><path d="M123.501 130.801c-.4.5-.9 1-1.2 1.6l2.8 2.6c2.3 2.2 3.7 5.1 3.8 8.3.1 2.7-.7 5.2-2.2 7.3l1.8.9c1.7-2.4 2.5-5.3 2.4-8.3-.1-3.7-1.7-7.1-4.4-9.6l-3-2.8z" fill="#fff"/></svg>
\ No newline at end of file