[Profile creation] Create a refreshed variant of the WebUI page

This CL creates a new variant for the chrome://sync-confirmation page
that fits to the design of the new profile creation flow. This will
eventually become the default design.

Screenshot: https://screenshot.googleplex.com/9KbMGdLDnF8N3P8

Bug: 1126913
Change-Id: Idecc93d92985fd5c2275fcbeecb2792eea322e7e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2583902Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Monica Basta <msalama@chromium.org>
Commit-Queue: Jan Krcal <jkrcal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841388}

chrome/browser/browser_resources.grd

@@ -209,6 +209,8 @@
         <include name="IDR_SYNC_CONFIRMATION_APP_JS" file="${root_gen_dir}\chrome\browser\resources\signin\sync_confirmation\sync_confirmation_app.js" use_base_dir="false" preprocess="true" type="BINDATA" />
         <include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_illustration.svg" type="BINDATA" />
         <include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_DARK_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_illustration_dark.svg" type="BINDATA" />
+        <include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_REFRESHED_ILLUSTRATION_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_refreshed_illustration.svg" type="BINDATA" />
+        <include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_REFRESHED_ILLUSTRATION_DARK_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_refreshed_illustration_dark.svg" type="BINDATA" />
       </if>
       <if expr="is_win or is_macosx or desktop_linux">
         <include name="IDR_SIGNIN_DICE_WEB_INTERCEPT_HTML" file="resources\signin\dice_web_signin_intercept\dice_web_signin_intercept.html" type="BINDATA" />

chrome/browser/resources/signin/sync_confirmation/images/sync_confirmation_refreshed_illustration.svg

+<svg width="678" height="180" viewBox="0 0 678 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M275.704 64.913c0 3.852-3.185 7.037-7.111 6.963-3.853 0-7.038-3.185-6.964-7.112.074-3.926 3.186-7.037 7.112-6.963 3.926.074 7.037 3.185 6.963 7.112z" stroke="#8AB4F8" stroke-width="2"/><path d="M483.646 86.322c2 0 3.704-1.63 3.704-3.63s-1.63-3.704-3.63-3.704-3.704 1.63-3.704 3.63c-.074 2.074 1.556 3.704 3.63 3.704z" fill="#FBBC04"/><path d="M367.637 59.648c6.519.074 11.926-5.185 11.926-11.778 0-6.593-5.185-11.927-11.778-11.927-6.519-.074-11.927 5.186-11.927 11.779s5.186 11.852 11.779 11.926z" fill="#4285F4"/><path d="M461.491 84.54l9.63-18.594c2.592-4.816.666-10.89-4.149-13.409-4.815-2.592-10.889-.666-13.408 4.149l-9.704 18.593c-2.593 4.816-.667 10.89 4.148 13.409 4.964 2.592 10.89.666 13.483-4.149z" stroke="#34A853" stroke-width="2"/><path d="M311.121 71.321l-.004-.002-18.435-11.402c-1.273-.836-1.674-2.457-.874-3.737l.002-.004 11.402-18.435c.836-1.273 2.457-1.674 3.737-.874l.004.003 18.435 11.4c1.248.822 1.619 2.512.87 3.746l-.002.003-11.398 18.428c-.836 1.273-2.457 1.674-3.737.874z" stroke="#F0A3F8" stroke-width="2"/><path d="M330.298 40.543c.815-.815 2.222-.37 2.445.741l3.185 13.705c.296 1.11-.741 2.074-1.852 1.777l-13.482-4.074c-1.111-.296-1.408-1.704-.593-2.519l10.297-9.63z" fill="#5BB974"/><path d="M324.15 46.395l1.778 1.11c1.704 1.112 2.297 3.334 1.186 5.112l-1.038 1.704" stroke="#FDD663" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M406.231 66.248c.815-.074 1.63-.222 2.371-.518l2.518-.519c2.223-.518 4.593-.074 6.519 1.186l2.445 1.555 1.111.667c.296.148.593.222.889.37 3.852 1.26 7.926-.889 9.186-4.74 1.259-3.853-.889-7.927-4.741-9.186l-.889-.223-1.26-.148-2.963-.148c-2.296-.074-4.444-1.111-6-2.815l-1.778-1.926c-.444-.667-1.037-1.26-1.63-1.778a9.988 9.988 0 0 0-4.593-2.296c-4.963-1.111-10.074 1.63-11.926 6.37-2.222 5.63.889 11.927 6.519 13.705 1.407.444 2.889.593 4.222.444z" stroke="#8AB4F8" stroke-width="2"/><path d="M516.488 156.568l-25.483-12.519a6.08 6.08 0 0 1-2.815-8.148l32.742-66.819a6.08 6.08 0 0 1 8.149-2.815l25.483 12.52a6.08 6.08 0 0 1 2.815 8.148l-32.743 66.818a6.078 6.078 0 0 1-8.148 2.815z" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/><path d="M517.53 153.17l-24.594-12.001c-1.408-.667-2-2.444-1.334-3.852l30.817-62.966c.667-1.408 2.444-2 3.852-1.334l24.594 12.075c1.407.667 2 2.445 1.333 3.852l-30.816 62.892c-.667 1.482-2.371 2.075-3.852 1.334z" fill="#D2E3FC"/><path d="M537.448 73.632l-.62 1.264 9.246 4.532.619-1.264-9.245-4.532zm-1.805-.106a.666.666 0 1 0-1.196-.587.666.666 0 0 0 1.196.587zm14.902 31.694l-1.929-.945-5.51 11.241 1.929.945 5.51-11.241zm5.575-11.467l-1.929-.946-3.195 6.519 1.929.945 3.195-6.518z" fill="#4285F4"/><path d="M516.634 138.052c3.482 1.704 7.704.296 9.408-3.186 1.704-3.481.296-7.704-3.185-9.407-3.482-1.704-7.704-.297-9.408 3.185-1.704 3.482-.297 7.704 3.185 9.408z" fill="#FBBC04"/><path d="M515.746 146.727l-5.408-2.667c-1.481-.741-2.074-2.592-1.333-4 .74-1.482 2.592-2.074 4-1.333l5.408 2.666c1.481.741 2.074 2.593 1.333 4.001-.667 1.407-2.445 2.074-4 1.333z" fill="#4285F4"/><path d="M499.227 128.131c-1.556 4.519.148 9.63 4.148 12.297.667.445 1.556.222 1.852-.518l3.556-7.26c.296-.667.074-1.408-.593-1.704l-7.259-3.556c-.593-.37-1.482 0-1.704.741z" fill="#34A853"/><path d="M248.32 117.005l-101.709 37.262c-1.334.518-2.889-.223-3.334-1.556l-23.853-64.818c-.518-1.334.222-2.89 1.556-3.334l101.709-37.261c1.333-.519 2.889.222 3.334 1.555l23.779 64.819c.592 1.333-.149 2.815-1.482 3.333z" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/><path d="M222.533 52.028l-98.277 36.029 22.514 61.414 98.277-36.028-22.514-61.415z" fill="#D2E3FC"/><path d="M172.98 69.522a.592.592 0 1 0 0-1.185.592.592 0 0 0 0 1.185z" fill="#4285F4"/><path d="M141.575 161.375l57.707-21.186 57.781-21.187" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/><path d="M167.717 126.557c4.371-1.629 6.593-6.444 4.963-10.741-1.629-4.371-6.444-6.593-10.741-4.963-4.37 1.63-6.593 6.445-4.963 10.741 1.63 4.297 6.445 6.519 10.741 4.963z" fill="#FBBC04"/><path d="M174.461 134.339l-6.741 2.519c-1.852.667-3.926-.296-4.593-2.148-.667-1.852.296-3.927 2.148-4.593l6.742-2.519c1.851-.667 3.926.296 4.592 2.148.667 1.852-.222 3.927-2.148 4.593z" fill="#4285F4"/><path d="M144.827 133.367c2.667 5.038 8.445 7.779 14.075 6.519.889-.222 1.407-1.185 1.111-2.074l-3.334-9.038c-.296-.814-1.185-1.185-2-.888l-9.037 3.333c-.815.296-1.26 1.333-.815 2.148z" fill="#34A853"/></svg>
\ No newline at end of file

chrome/browser/resources/signin/sync_confirmation/images/sync_confirmation_refreshed_illustration_dark.svg

+<svg width="678" height="180" viewBox="0 0 678 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M275.704 64.913c0 3.852-3.185 7.037-7.111 6.963-3.853 0-7.038-3.185-6.964-7.112.074-3.926 3.186-7.037 7.112-6.963 3.926.074 7.037 3.185 6.963 7.112z" stroke="#8AB4F8" stroke-width="2"/><path d="M483.646 86.322c2.001 0 3.704-1.63 3.704-3.63s-1.629-3.704-3.63-3.704c-2 0-3.703 1.63-3.703 3.63-.074 2.074 1.555 3.704 3.629 3.704z" fill="#FBBC04"/><path d="M367.637 59.648c6.519.074 11.926-5.185 11.926-11.778 0-6.593-5.185-11.927-11.778-11.927-6.519-.074-11.927 5.186-11.927 11.779s5.186 11.852 11.779 11.926z" fill="#4285F4"/><path d="M461.491 84.54l9.63-18.594c2.593-4.816.667-10.89-4.148-13.409-4.816-2.592-10.89-.666-13.409 4.149l-9.704 18.593c-2.593 4.816-.667 10.89 4.149 13.409 4.963 2.592 10.889.666 13.482-4.149z" stroke="#34A853" stroke-width="2"/><path d="M311.121 71.321l-.004-.002-18.435-11.402c-1.273-.836-1.674-2.457-.874-3.737l.002-.004 11.402-18.435c.836-1.273 2.457-1.674 3.737-.874l.004.003 18.435 11.4c1.247.822 1.619 2.512.869 3.746l-.001.003-11.398 18.428c-.836 1.273-2.457 1.674-3.737.874z" stroke="#F0A3F8" stroke-width="2"/><path d="M330.298 40.543c.815-.815 2.222-.37 2.445.741l3.185 13.705c.296 1.11-.741 2.074-1.852 1.777l-13.482-4.074c-1.111-.296-1.408-1.704-.593-2.519l10.297-9.63z" fill="#5BB974"/><path d="M324.15 46.394l1.778 1.111c1.704 1.112 2.297 3.334 1.186 5.112l-1.038 1.704" stroke="#FDD663" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M406.231 66.249c.815-.075 1.63-.223 2.371-.519l2.518-.519c2.223-.518 4.593-.074 6.519 1.186l2.445 1.555 1.111.667c.296.148.593.222.889.37 3.852 1.26 7.926-.889 9.186-4.74 1.259-3.853-.889-7.927-4.741-9.186l-.889-.223-1.26-.148-2.963-.148c-2.296-.074-4.444-1.11-6-2.815l-1.778-1.926c-.444-.666-1.037-1.26-1.63-1.778a9.989 9.989 0 0 0-4.593-2.296c-4.963-1.111-10.074 1.63-11.926 6.37-2.222 5.63.889 11.927 6.519 13.705 1.407.445 2.889.593 4.222.445z" stroke="#8AB4F8" stroke-width="2"/><path d="M516.488 156.569l-25.483-12.52a6.08 6.08 0 0 1-2.815-8.148l32.743-66.819a6.08 6.08 0 0 1 8.148-2.815l25.483 12.52a6.08 6.08 0 0 1 2.815 8.148l-32.743 66.819a6.08 6.08 0 0 1-8.148 2.815z" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/><path d="M517.53 153.17l-24.594-12.001c-1.408-.667-2-2.444-1.334-3.852l30.817-62.966c.666-1.408 2.444-2 3.852-1.334l24.594 12.075c1.407.667 2 2.445 1.333 3.852l-30.816 62.892c-.667 1.482-2.371 2.075-3.852 1.334z" fill="#D2E3FC"/><path d="M537.448 73.632l-.619 1.264 9.245 4.532.62-1.264-9.246-4.532zm-1.805-.105a.667.667 0 1 0-1.198-.587.667.667 0 0 0 1.198.587zm14.902 31.694l-1.929-.946-5.51 11.241 1.929.946 5.51-11.241zm5.575-11.469l-1.929-.945-3.195 6.518 1.929.946 3.195-6.519z" fill="#4285F4"/><path d="M516.634 138.052c3.482 1.703 7.704.296 9.408-3.186 1.704-3.481.296-7.704-3.185-9.408-3.482-1.704-7.704-.296-9.408 3.186-1.704 3.481-.297 7.704 3.185 9.408z" fill="#FBBC04"/><path d="M515.746 146.727l-5.408-2.667c-1.481-.74-2.074-2.592-1.333-4 .741-1.481 2.593-2.074 4-1.333l5.408 2.667c1.481.74 2.074 2.592 1.333 4-.666 1.407-2.444 2.074-4 1.333z" fill="#4285F4"/><path d="M499.227 128.131c-1.556 4.519.148 9.63 4.148 12.297.667.444 1.556.222 1.852-.519l3.556-7.259c.296-.667.074-1.408-.593-1.704l-7.259-3.556c-.593-.37-1.482 0-1.704.741z" fill="#34A853"/><path d="M248.32 117.005l-101.709 37.261c-1.334.519-2.889-.222-3.334-1.555l-23.853-64.819c-.518-1.333.222-2.889 1.556-3.333l101.709-37.261c1.333-.519 2.889.222 3.334 1.555l23.779 64.819c.592 1.333-.149 2.815-1.482 3.333z" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/><path d="M222.533 52.028l-98.277 36.028 22.514 61.415 98.277-36.029-22.514-61.414z" fill="#D2E3FC"/><path d="M172.98 69.521a.592.592 0 1 0 0-1.184.592.592 0 0 0 0 1.184z" fill="#4285F4"/><path d="M141.575 161.375l57.707-21.186 57.781-21.187" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/><path d="M167.717 126.557c4.371-1.63 6.593-6.445 4.963-10.741-1.629-4.371-6.444-6.593-10.741-4.963-4.37 1.629-6.593 6.444-4.963 10.741 1.63 4.296 6.445 6.519 10.741 4.963z" fill="#FBBC04"/><path d="M174.461 134.339l-6.741 2.519c-1.852.667-3.926-.296-4.593-2.148-.667-1.852.296-3.927 2.148-4.593l6.742-2.519c1.851-.667 3.926.296 4.592 2.148.667 1.852-.222 3.927-2.148 4.593z" fill="#4285F4"/><path d="M144.827 133.367c2.667 5.038 8.445 7.779 14.075 6.519.889-.222 1.407-1.185 1.111-2.074l-3.334-9.038c-.296-.814-1.185-1.185-2-.888l-9.037 3.333c-.815.296-1.26 1.333-.815 2.148z" fill="#34A853"/></svg>
\ No newline at end of file

chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html

@@ -7,8 +7,8 @@
     <style>
       body {
         margin: 0;
+        min-width: 512px;
         padding: 0;
-        width: 512px;
       }
       @media (prefers-color-scheme: dark) {
         body {

chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html

 <style include="signin-dialog-shared">
   :host {
+    --avatar-size: 100px;
+    --banner-height: 244px;
+    --footer-margin: 40px;
+    --text-font-size: 1.16em;
     color: var(--cr-primary-text-color);
     display: block;
   }
 
-  cr-button {
+  @media (prefers-color-scheme: dark) {
+    /* Old design */
+    #illustration {
+      background-image:
+          url(./images/sync_confirmation_illustration_dark.svg);
+    }
+
+    /* New design */
+    #syncPromoBanner {
+      background-image:
+          url(images/sync_confirmation_refreshed_illustration_dark.svg);
+    }
+  }
+
+  .secondary {
+    color: var(--cr-secondary-text-color);
+  }
+
+  /* Old design */
+  .action-container cr-button {
     padding-inline-end: 16px;
     padding-inline-start: 16px;
   }
@@ -32,13 +55,6 @@
     width: 100%;
   }
 
-  @media (prefers-color-scheme: dark) {
-    #illustration {
-      background-image:
-          url(./images/sync_confirmation_illustration_dark.svg);
-    }
-  }
-
   #illustration-container > img {
     border-radius: 50%;
     height: 68px;
@@ -70,10 +86,6 @@
     padding: 0 24px;
   }
 
-  .secondary {
-    color: var(--cr-secondary-text-color);
-  }
-
   @media (prefers-color-scheme: light) {
     #grey-banner {
       background: var(--paper-grey-50);
@@ -83,20 +95,107 @@
     }
   }
 
-  #footer {
+  #old-footer {
     margin-bottom: 0;
     padding-top: 12px;
   }
 
-  #settingsButton {
+  .action-container #settingsButton {
     left: 16px;
     position: absolute;
   }
 
-  :host-context([dir='rtl']) #settingsButton {
+  :host-context([dir='rtl']) .action-container #settingsButton {
     left: auto;
     right: 16px;
   }
+
+  /* New design */
+  #headerContainer {
+    background-color: var(--theme-frame-color);
+    height: var(--banner-height);
+    position: relative;
+    width: 100%;
+  }
+
+  #syncPromoBanner {
+    background-image: url(images/sync_confirmation_refreshed_illustration.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+  }
+
+  #avatar {
+    border: 2px solid var(--md-background-color);
+    border-radius: 50%;
+    bottom: calc(var(--avatar-size)/-2);
+    height: var(--avatar-size);
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    width: var(--avatar-size);
+    z-index: 1;
+  }
+
+  #contentContainer {
+    margin-bottom: calc(48px + var(--footer-margin));
+    margin-top: 104px;
+    text-align: center;
+  }
+
+  #contentContainer h2 {
+    font-size: 1.85em;
+    font-weight: normal;
+  }
+
+  #contentContainer h3 {
+    font-size: var(--text-font-size);
+    font-weight: normal;
+  }
+
+  #confirmationDescription {
+    font-size: 1em;
+    margin-top: 16px;
+  }
+
+  #footer {
+    bottom: 0;
+    display: flex;
+    font-size: var(--text-font-size);
+    margin-bottom: var(--footer-margin);
+    position: absolute;
+    width: 100%;
+  }
+
+  #actionContainer {
+    display: flex;
+    flex-flow: row-reverse;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  #actionContainer cr-button {
+    min-width: 111px;
+  }
+
+  #actionContainer #settingsButton {
+    font-weight: normal;
+    margin-inline-end: auto;
+    margin-inline-start: var(--footer-margin);
+  }
+
+  #actionContainer #confirmButton {
+    margin-inline-end: var(--footer-margin);
+  }
+
+  #actionContainer #notNowButton {
+    font-weight: normal;
+  }
 </style>
 
 <!--
@@ -106,12 +205,13 @@
   which user clicks to indicate consent.
 -->
 
-<div id="illustration-container">
+<template is="dom-if" if="[[!isProfileCreationFlow_]]">
+  <div id="illustration-container">
     <div id="grey-banner"></div>
     <div id="illustration"></div>
     <img src="[[accountImageSrc_]]">
-</div>
-<div id="content-container">
+  </div>
+  <div id="content-container">
     <h1 id="syncConfirmationHeading" class="heading" consent-description>
       $i18n{syncConfirmationTitle}
     </h1>
@@ -121,7 +221,7 @@
         $i18n{syncConfirmationSyncInfoDesc}
       </div>
     </div>
-  <div id="footer" class="message-container secondary">
+    <div id="old-footer" class="message-container secondary">
       $i18n{syncConfirmationSettingsInfo}
     </div>
     <div class="action-container">
@@ -137,4 +237,39 @@
         $i18n{syncConfirmationSettingsLabel}
       </cr-button>
     </div>
-</div>
+  </div>
+</template>
+
+<template is="dom-if" if="[[isProfileCreationFlow_]]">
+  <div id="headerContainer" style$="--theme-frame-color:[[highlightColor_]]">
+    <div id="syncPromoBanner"></div>
+    <img id="avatar" alt="" src="[[accountImageSrc_]]">
+  </div>
+
+  <div id="contentContainer">
+    <h2 consent-description id="syncConfirmationHeading">
+      $i18n{syncConfirmationTitle}
+    </h2>
+    <h3 class="secondary" consent-description>
+      $i18n{syncConfirmationSyncInfoTitle}
+    </h3>
+    <div id="confirmationDescription" class="secondary" consent-description>
+      $i18n{syncConfirmationSyncInfoDesc}
+    </div>
+  </div>
+  <div id="footer">
+    <div id="actionContainer">
+      <cr-button class="action-button" id="confirmButton"
+          on-click="onConfirm_" consent-confirmation autofocus>
+        $i18n{syncConfirmationConfirmLabel}
+      </cr-button>
+      <cr-button id="notNowButton" on-click="onUndo_">
+        $i18n{syncConfirmationUndoLabel}
+      </cr-button>
+      <cr-button id="settingsButton" on-click="onGoToSettings_"
+          consent-confirmation>
+        $i18n{syncConfirmationSettingsLabel}
+      </cr-button>
+    </div>
+  </div>
+</template>

chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.js

@@ -31,6 +31,26 @@ Polymer({
         return loadTimeData.getString('accountPictureUrl');
       },
     },
+
+    /** @private */
+    isProfileCreationFlow_: {
+      type: Boolean,
+      value() {
+        return loadTimeData.getBoolean('isProfileCreationFlow');
+      }
+    },
+
+    /** @private */
+    highlightColor_: {
+      type: String,
+      value() {
+        if (!loadTimeData.valueExists('highlightColor')) {
+          return '';
+        }
+
+        return loadTimeData.getString('highlightColor');
+      }
+    },
   },
 
   /** @private {?SyncConfirmationBrowserProxy} */
@@ -85,7 +105,7 @@ Polymer({
         Array.from(this.shadowRoot.querySelectorAll('[consent-description]'))
             .filter(element => element.clientWidth * element.clientHeight > 0)
             .map(element => element.innerHTML.trim());
-    assert(consentDescription);
+    assert(consentDescription.length);
     return consentDescription;
   },
 

chrome/browser/ui/views/profiles/profile_picker_view.cc

@@ -429,7 +429,7 @@ void ProfilePickerView::SwitchToSyncConfirmation() {
 
   SyncConfirmationUI* sync_confirmation_ui = static_cast<SyncConfirmationUI*>(
       new_profile_contents_->GetWebUI()->GetController());
-  sync_confirmation_ui->InitializeMessageHandlerForCreationFlow();
+  sync_confirmation_ui->InitializeMessageHandlerForCreationFlow(profile_color_);
 }
 
 gfx::Size ProfilePickerView::CalculatePreferredSize() const {

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

@@ -163,18 +163,16 @@ void SyncConfirmationHandler::SetUserImageURL(const std::string& picture_url) {
     return;
   }
 
-  std::string picture_url_to_load;
   GURL picture_gurl(picture_url);
-  if (picture_gurl.is_valid()) {
-    picture_url_to_load =
-        signin::GetAvatarImageURLWithOptions(picture_gurl, kProfileImageSize,
-                                             false /* no_silhouette */)
-            .spec();
-  } else {
-    // Use the placeholder avatar icon until the account picture URL is fetched.
-    picture_url_to_load = profiles::GetPlaceholderAvatarIconUrl();
+  if (!picture_gurl.is_valid()) {
+    // As long as the provided gaia picture is not valid, stick to the default
+    // avatar provided in the load-time data.
+    return;
   }
-  base::Value picture_url_value(picture_url_to_load);
+
+  GURL picture_gurl_with_options = signin::GetAvatarImageURLWithOptions(
+      picture_gurl, kProfileImageSize, false /* no_silhouette */);
+  base::Value picture_url_value(picture_gurl_with_options.spec());
 
   AllowJavascript();
   FireWebUIListener("account-image-changed", picture_url_value);
@@ -229,7 +227,6 @@ void SyncConfirmationHandler::HandleInitializedWithSize(
   }
 
   if (!primary_account_info->IsValid()) {
-    SetUserImageURL(kNoPictureURLFound);
     identity_manager_->AddObserver(this);
   } else {
     SetUserImageURL(primary_account_info->picture_url);

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

@@ -170,13 +170,11 @@ class SyncConfirmationHandlerTest : public BrowserWithTestWindowTest,
     base::Optional<AccountInfo> primary_account =
         identity_manager->FindExtendedAccountInfoForAccountWithRefreshToken(
             identity_manager->GetPrimaryAccountInfo());
+    EXPECT_TRUE(primary_account);
 
-    std::string original_picture_url =
-        primary_account ? primary_account->picture_url : std::string();
+    std::string gaia_picture_url = primary_account->picture_url;
     std::string expected_picture_url =
-        original_picture_url.empty()
-            ? profiles::GetPlaceholderAvatarIconUrl()
-            : signin::GetAvatarImageURLWithOptions(GURL(original_picture_url),
+        signin::GetAvatarImageURLWithOptions(GURL(gaia_picture_url),
                                              kExpectedProfileImageSize,
                                              false /* no_silhouette */)
             .spec();
@@ -233,16 +231,16 @@ TEST_F(SyncConfirmationHandlerTest, TestSetImageIfPrimaryAccountReadyLater) {
   args.Set(0, std::make_unique<base::Value>(kDefaultDialogHeight));
   handler()->HandleInitializedWithSize(&args);
 
-  ASSERT_EQ(1U, web_ui()->call_data().size());
-  ExpectAccountImageChanged(*web_ui()->call_data()[0]);
+  // No callback called when there's no account image available.
+  ASSERT_EQ(0U, web_ui()->call_data().size());
 
   identity_test_env()->SimulateSuccessfulFetchOfAccountInfo(
       account_info_.account_id, account_info_.email, account_info_.gaia, "",
       "full_name", "given_name", "locale",
       "http://picture.example.com/picture.jpg");
 
-  ASSERT_EQ(2U, web_ui()->call_data().size());
-  ExpectAccountImageChanged(*web_ui()->call_data()[1]);
+  ASSERT_EQ(1U, web_ui()->call_data().size());
+  ExpectAccountImageChanged(*web_ui()->call_data()[0]);
 }
 
 TEST_F(SyncConfirmationHandlerTest,
@@ -250,7 +248,7 @@ TEST_F(SyncConfirmationHandlerTest,
   base::ListValue args;
   args.Set(0, std::make_unique<base::Value>(kDefaultDialogHeight));
   handler()->HandleInitializedWithSize(&args);
-  EXPECT_EQ(1U, web_ui()->call_data().size());
+  EXPECT_EQ(0U, web_ui()->call_data().size());
 
   AccountInfo account_info =
       identity_test_env()->MakeAccountAvailable("bar@example.com");
@@ -261,7 +259,7 @@ TEST_F(SyncConfirmationHandlerTest,
 
   // Updating the account info of a secondary account should not update the
   // image of the sync confirmation dialog.
-  EXPECT_EQ(1U, web_ui()->call_data().size());
+  EXPECT_EQ(0U, web_ui()->call_data().size());
 
   identity_test_env()->SimulateSuccessfulFetchOfAccountInfo(
       account_info_.account_id, account_info_.email, account_info_.gaia, "",
@@ -270,8 +268,8 @@ TEST_F(SyncConfirmationHandlerTest,
 
   // Updating the account info of the primary account should update the
   // image of the sync confirmation dialog.
-  ASSERT_EQ(2U, web_ui()->call_data().size());
-  ExpectAccountImageChanged(*web_ui()->call_data()[1]);
+  ASSERT_EQ(1U, web_ui()->call_data().size());
+  ExpectAccountImageChanged(*web_ui()->call_data()[0]);
 }
 
 TEST_F(SyncConfirmationHandlerTest, TestHandleUndo) {

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

@@ -13,6 +13,7 @@
 #include "chrome/browser/signin/identity_manager_factory.h"
 #include "chrome/browser/sync/profile_sync_service_factory.h"
 #include "chrome/browser/ui/browser.h"
+#include "chrome/browser/ui/signin/profile_colors_util.h"
 #include "chrome/browser/ui/webui/signin/sync_confirmation_handler.h"
 #include "chrome/common/url_constants.h"
 #include "chrome/grit/browser_resources.h"
@@ -25,25 +26,32 @@
 #include "services/network/public/mojom/content_security_policy.mojom.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
+#include "ui/gfx/color_utils.h"
 #include "ui/resources/grit/webui_generated_resources.h"
 #include "ui/resources/grit/webui_resources.h"
 
 SyncConfirmationUI::SyncConfirmationUI(content::WebUI* web_ui)
     : SigninWebDialogUI(web_ui), profile_(Profile::FromWebUI(web_ui)) {
-  Initialize();
+  // Initializing the WebUIDataSource in the constructor is needed for polymer
+  // tests.
+  Initialize(/*profile_creation_flow_color=*/base::nullopt);
 }
 
-SyncConfirmationUI::~SyncConfirmationUI() {}
+SyncConfirmationUI::~SyncConfirmationUI() = default;
 
 void SyncConfirmationUI::InitializeMessageHandlerWithBrowser(Browser* browser) {
   InitializeMessageHandler(browser);
 }
 
-void SyncConfirmationUI::InitializeMessageHandlerForCreationFlow() {
+void SyncConfirmationUI::InitializeMessageHandlerForCreationFlow(
+    SkColor profile_color) {
+  // Redo the initialization with `profile_color`.
+  Initialize(profile_color);
   InitializeMessageHandler(/*browser=*/nullptr);
 }
 
-void SyncConfirmationUI::Initialize() {
+void SyncConfirmationUI::Initialize(
+    base::Optional<SkColor> profile_creation_flow_color) {
   const bool is_sync_allowed =
       ProfileSyncServiceFactory::IsSyncAllowed(profile_);
 
@@ -58,7 +66,7 @@ void SyncConfirmationUI::Initialize() {
   source->AddResourcePath("sync_confirmation.js", IDR_SYNC_CONFIRMATION_JS);
 
   if (is_sync_allowed) {
-    InitializeForSyncConfirmation(source);
+    InitializeForSyncConfirmation(source, profile_creation_flow_color);
   } else {
     InitializeForSyncDisabled(source);
   }
@@ -79,24 +87,15 @@ void SyncConfirmationUI::InitializeMessageHandler(Browser* browser) {
 }
 
 void SyncConfirmationUI::InitializeForSyncConfirmation(
-    content::WebUIDataSource* source) {
+    content::WebUIDataSource* source,
+    base::Optional<SkColor> profile_creation_flow_color) {
+  // Resources for testing.
   source->AddResourcePath("test_loader.js", IDR_WEBUI_JS_TEST_LOADER_JS);
   source->AddResourcePath("test_loader.html", IDR_WEBUI_HTML_TEST_LOADER_HTML);
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ScriptSrc,
       "script-src chrome://resources chrome://test 'self';");
 
-  source->SetDefaultResource(IDR_SYNC_CONFIRMATION_HTML);
-  source->AddResourcePath("sync_confirmation_app.js",
-                          IDR_SYNC_CONFIRMATION_APP_JS);
-
-  source->AddResourcePath(
-      "images/sync_confirmation_illustration.svg",
-      IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_SVG);
-  source->AddResourcePath(
-      "images/sync_confirmation_illustration_dark.svg",
-      IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_DARK_SVG);
-
   AddStringResource(source, "syncConfirmationTitle",
                     IDS_SYNC_CONFIRMATION_TITLE);
   AddStringResource(source, "syncConfirmationSyncInfoTitle",
@@ -109,24 +108,48 @@ void SyncConfirmationUI::InitializeForSyncConfirmation(
                     IDS_SYNC_CONFIRMATION_SETTINGS_BUTTON_LABEL);
   AddStringResource(source, "syncConfirmationConfirmLabel",
                     IDS_SYNC_CONFIRMATION_CONFIRM_BUTTON_LABEL);
+
+  const int kAccountPictureSize = 128;
+  std::string avatar_picture_url;
+  if (profile_creation_flow_color.has_value()) {
+    SkColor fill_color = *profile_creation_flow_color;
+    gfx::Image avatar_picture = profiles::GetPlaceholderAvatarIconWithColors(
+        /*fill_color=*/fill_color,
+        /*stroke_color=*/GetAvatarStrokeColor(fill_color), kAccountPictureSize);
+    avatar_picture_url = webui::GetBitmapDataUrl(avatar_picture.AsBitmap());
+  } else {
+    avatar_picture_url = profiles::GetPlaceholderAvatarIconUrl();
+  }
+  source->AddString("accountPictureUrl", avatar_picture_url);
+
+  source->AddResourcePath("sync_confirmation_app.js",
+                          IDR_SYNC_CONFIRMATION_APP_JS);
+  source->SetDefaultResource(IDR_SYNC_CONFIRMATION_HTML);
+
+  source->AddBoolean("isProfileCreationFlow",
+                     profile_creation_flow_color.has_value());
+  if (!profile_creation_flow_color.has_value()) {
     AddStringResource(source, "syncConfirmationUndoLabel", IDS_CANCEL);
 
-  constexpr int kAccountPictureSize = 68;
-  std::string custom_picture_url = profiles::GetPlaceholderAvatarIconUrl();
-  signin::IdentityManager* identity_manager =
-      IdentityManagerFactory::GetForProfile(profile_);
-  base::Optional<AccountInfo> primary_account_info =
-      identity_manager->FindExtendedAccountInfoForAccountWithRefreshToken(
-          identity_manager->GetPrimaryAccountInfo());
-  GURL account_picture_url(
-      primary_account_info ? primary_account_info->picture_url : std::string());
-  if (account_picture_url.is_valid()) {
-    custom_picture_url =
-        signin::GetAvatarImageURLWithOptions(
-            account_picture_url, kAccountPictureSize, false /* no_silhouette */)
-            .spec();
+    source->AddResourcePath(
+        "images/sync_confirmation_illustration.svg",
+        IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_SVG);
+    source->AddResourcePath(
+        "images/sync_confirmation_illustration_dark.svg",
+        IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_DARK_SVG);
+    return;
   }
-  source->AddString("accountPictureUrl", custom_picture_url);
+
+  AddStringResource(source, "syncConfirmationUndoLabel", IDS_NO_THANKS);
+  source->AddString("highlightColor", color_utils::SkColorToRgbaString(
+                                          *profile_creation_flow_color));
+
+  source->AddResourcePath(
+      "images/sync_confirmation_refreshed_illustration.svg",
+      IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_REFRESHED_ILLUSTRATION_SVG);
+  source->AddResourcePath(
+      "images/sync_confirmation_refreshed_illustration_dark.svg",
+      IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_REFRESHED_ILLUSTRATION_DARK_SVG);
 }
 
 void SyncConfirmationUI::InitializeForSyncDisabled(

chrome/browser/ui/webui/signin/sync_confirmation_ui.h

@@ -37,12 +37,14 @@ class SyncConfirmationUI : public SigninWebDialogUI {
 
   // Initializes the message handler for the profile creation flow (when there's
   // no browser available).
-  void InitializeMessageHandlerForCreationFlow();
+  void InitializeMessageHandlerForCreationFlow(SkColor profile_color);
 
  private:
-  void Initialize();
+  void Initialize(base::Optional<SkColor> profile_creation_flow_color);
   void InitializeMessageHandler(Browser* browser);
-  void InitializeForSyncConfirmation(content::WebUIDataSource* source);
+  void InitializeForSyncConfirmation(
+      content::WebUIDataSource* source,
+      base::Optional<SkColor> profile_creation_flow_color);
   void InitializeForSyncDisabled(content::WebUIDataSource* source);
 
   // Adds a string resource with the given GRD |ids| to the WebUI data |source|

chrome/test/data/webui/signin/sync_confirmation_test.js

@@ -23,7 +23,7 @@ suite('SigninSyncConfirmationTest', function() {
   // Tests that no DCHECKS are thrown during initialization of the UI.
   test('LoadPage', function() {
     assertEquals(
-        'Turn on sync?', app.$.syncConfirmationHeading.textContent.trim());
+        'Turn on sync?', app.$$('#syncConfirmationHeading').textContent.trim());
   });
 });
 
@@ -48,6 +48,9 @@ suite('SigninSyncConfirmationConsentRecordingTest', function() {
     PolymerTest.clearBody();
     app = document.createElement('sync-confirmation-app');
     document.body.append(app);
+    // Wait for the app element to get attached to the document (which is when
+    // the account image gets requested).
+    return browserProxy.whenCalled('requestAccountImage');
   });
 
   const STANDARD_CONSENT_DESCRIPTION_TEXT = [