Add the decorative icons to the sync confirmation dialog.

BUG=533004

TEST=
1. Enable enable-password-separated-signin-flow in chrome://flags
2. In a non-signed in profile, open the User Menu and click "Sign in"
3. The tab-modal sign in flow should open, enter valid credentials
4. The Sync Confirmation dialog should open
5. When the profile's picture is finished loading, the icons around the
   picture and the checkmark in the blue bubble should animate into
   view.

Review URL: https://codereview.chromium.org/1681203002

Cr-Commit-Position: refs/heads/master@{#378460}

11 files changed, 292 insertions, 23 deletions

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index 5379443..de94df9 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -329,7 +329,7 @@
         <include name="IDR_SITE_ENGAGEMENT_ENGAGEMENT_TABLE_JS" file="resources\engagement\engagement_table.js" type="BINDATA" />
       </if>
       <include name="IDR_SYNC_CONFIRMATION_CSS" file="resources\sync_confirmation\sync_confirmation.css" type="BINDATA" />
-      <include name="IDR_SYNC_CONFIRMATION_HTML" file="resources\sync_confirmation\sync_confirmation.html" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_SYNC_CONFIRMATION_HTML" file="resources\sync_confirmation\sync_confirmation.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
       <include name="IDR_SYNC_CONFIRMATION_JS" file="resources\sync_confirmation\sync_confirmation.js" type="BINDATA" />
       <include name="IDR_UBER_HTML" file="resources\uber\uber.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_UBER_JS" file="resources\uber\uber.js" type="BINDATA" />
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.css b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
index c57ae25..ab041f3 100644
--- a/chrome/browser/resources/sync_confirmation/sync_confirmation.css
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
@@ -28,7 +28,6 @@ a {
 
 .top-title-bar {
   -webkit-padding-start: 24px;
-  -webkit-padding-start: 24px;
   align-items: center;
   border-bottom: 1px solid lightgray;
   color: #333;
@@ -49,7 +48,7 @@ a {
   padding-bottom: 32px;
 }
 
-.picture-container {
+#picture-container {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -57,29 +56,17 @@ a {
 }
 
 .picture {
+  -webkit-margin-start: 84px;
   height: 96px;
   position: relative;
   width: 96px;
 }
 
 #profile-picture,
-.checkmark-bubble {
+.checkmark-circle {
   position: absolute;
 }
 
-.checkmark-bubble {
-  background-color: white;
-  background-image: url(//resources/images/check_circle.svg);
-  background-size: 100%;
-  border: 1px solid white;
-  border-radius: 50%;
-  display: inline-block;
-  height: 30px;
-  left: 64px;
-  top: 66px;
-  width: 30px;
-}
-
 .action-container {
   align-items: baseline;
   display: flex;
@@ -100,3 +87,237 @@ paper-button {
 #undoButton {
   color: #5A5A5A;
 }
+
+#illustration {
+  height: 96px;
+  margin: 0 auto;
+  position: relative;
+  width: 264px;
+}
+
+#checkmark-circle {
+  background: rgb(66, 133, 244);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  bottom: 0;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  transform: scale(0);
+  width: 24px;
+}
+
+.loaded #checkmark-circle {
+  animation: scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+@keyframes scale-circle {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
+}
+
+#checkmark-check {
+  left: 5px;
+  position: absolute;
+  top: 7px;
+}
+
+.loaded #checkmark-path {
+  animation: draw-path 300ms cubic-bezier(0, 0, 0.2, 1) 100ms forwards;
+}
+
+@keyframes draw-path {
+  from { stroke-dashoffset: 16; }
+  to { stroke-dashoffset: 0; }
+}
+
+#icons {
+  height: 96px;
+  position: absolute;
+  width: 264px;
+}
+
+#icons > div {
+  animation-delay: 200ms;
+  animation-duration: 1.4s;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7);
+  background-size: cover;
+  opacity: 0;
+  position: absolute;
+}
+
+#icon-bookmarks {
+  background: url(../../../../ui/webui/resources/images/icon_bookmarks.svg);
+  height: 36px;
+  left: 58px;
+  top: 0;
+  width: 36px;
+}
+
+#icon-extensions {
+  background: url(../../../../ui/webui/resources/images/icon_extensions.svg);
+  height: 24px;
+  left: 30px;
+  top: 30px;
+  width: 24px;
+}
+
+
+#icon-passwords {
+  background: url(../../../../ui/webui/resources/images/icon_passwords.svg);
+  height: 30px;
+  left: 38px;
+  top: 66px;
+  width: 40px;
+}
+
+#icon-history {
+  background: url(../../../../ui/webui/resources/images/icon_history.svg);
+  height: 36px;
+  left: 190px;
+  top: 6px;
+  width: 36px;
+}
+
+#icon-tabs {
+  background: url(../../../../ui/webui/resources/images/icon_tabs.svg);
+  height: 24px;
+  left: 222px;
+  top: 44px;
+  width: 24px;
+}
+
+#icon-themes {
+  background: url(../../../../ui/webui/resources/images/icon_themes.svg);
+  height: 30px;
+  left: 184px;
+  top: 62px;
+  width: 32px;
+}
+
+#icon-circle-open {
+  border: 2px solid #000;
+  border-radius: 50%;
+  height: 8px;
+  left: 6px;
+  top: 56px;
+  width: 8px;
+}
+
+.icon-circle {
+  background: #000;
+  border-radius: 50%;
+  height: 4px;
+  width: 4px;
+}
+
+#icon-circle-1 {
+  left: 64px;
+  top: 50px;
+}
+
+#icon-circle-2 {
+  left: 178px;
+  top: 18px;
+}
+
+#icon-circle-3 {
+  left: 194px;
+  top: 50px;
+}
+
+#icon-circle-4 {
+  left: 258px;
+  top: 36px;
+}
+
+.loaded .fade-top-left {
+  animation-name: fade-in-icon-top-left;
+}
+
+.loaded .fade-top-right {
+  animation-name: fade-in-icon-top-right;
+}
+
+.loaded .fade-middle-left {
+  animation-name: fade-in-icon-middle-left;
+}
+
+.loaded .fade-middle-right {
+  animation-name: fade-in-icon-middle-right;
+}
+
+.loaded .fade-bottom-left {
+  animation-name: fade-in-icon-bottom-left;
+}
+
+.loaded .fade-bottom-right {
+  animation-name: fade-in-icon-bottom-right;
+}
+
+@keyframes fade-in-icon-top-left {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(-4px, -4px);
+  }
+}
+
+@keyframes fade-in-icon-top-right {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(4px, -4px);
+  }
+}
+
+@keyframes fade-in-icon-middle-left {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(-4px, 0);
+  }
+}
+
+@keyframes fade-in-icon-middle-right {
+  from {
+    opacity: 0;
+     transform: translate(0, 0);
+    }
+  to {
+    opacity: 0.1;
+    transform: translate(4px, 0);
+  }
+}
+
+@keyframes fade-in-icon-bottom-left {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(-4px, 4px);
+  }
+}
+
+@keyframes fade-in-icon-bottom-right {
+  from {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translate(4px, 4px);
+  }
+}
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.html b/chrome/browser/resources/sync_confirmation/sync_confirmation.html
index b6673da..cd94fee 100644
--- a/chrome/browser/resources/sync_confirmation/sync_confirmation.html
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.html
@@ -11,10 +11,31 @@
     <div class="container">
       <div class="top-title-bar" i18n-content="syncConfirmationTitle"></div>
       <div class="details">
-        <div class="picture-container">
-          <div class="picture">
-            <img id="profile-picture"></img>
-            <div class="checkmark-bubble"></div>
+        <div id="picture-container">
+          <div id="illustration">
+            <div id="icons">
+              <div id="icon-bookmarks" class="fade-top-left"></div>
+              <div id="icon-extensions" class="fade-top-left"></div>
+              <div id="icon-passwords" class="fade-bottom-left"></div>
+              <div id="icon-history" class="fade-top-right"></div>
+              <div id="icon-tabs" class="fade-middle-right"></div>
+              <div id="icon-themes" class="fade-bottom-right"></div>
+              <div id="icon-circle-open" class="fade-middle-left"></div>
+              <div id="icon-circle-1" class="icon-circle fade-middle-left"></div>
+              <div id="icon-circle-2" class="icon-circle fade-top-right"></div>
+              <div id="icon-circle-3" class="icon-circle fade-middle-right"></div>
+              <div id="icon-circle-4" class="icon-circle fade-top-right"></div>
+            </div>
+            <div class="picture">
+              <img id="profile-picture"></img>
+              <div id="checkmark-circle">
+                <svg id="checkmark-check" width="13" height="10" viewBox="0 0 13 10">
+                  <path id="checkmark-path" d="M1 5l3.5 3.5L12 1" stroke="#FFF"
+                        stroke-width="2" stroke-dasharray="16"
+                        stroke-dashoffset="16" fill="none"></path>
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
         <div class="sync-message"
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.js b/chrome/browser/resources/sync_confirmation/sync_confirmation.js
index aeb8b40..dca1b58 100644
--- a/chrome/browser/resources/sync_confirmation/sync_confirmation.js
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.js
@@ -21,6 +21,7 @@ cr.define('sync.confirmation', function() {
     $('confirmButton').addEventListener('click', onConfirm);
     $('undoButton').addEventListener('click', onUndo);
     $('settingsLink').addEventListener('click', onGoToSettings);
+    $('profile-picture').addEventListener('load', onPictureLoaded);
     chrome.send('initialized');
   }
 
@@ -28,6 +29,10 @@ cr.define('sync.confirmation', function() {
     $('profile-picture').src = url;
   }
 
+  function onPictureLoaded(e) {
+    $('picture-container').classList.add('loaded');
+  }
+
   return {
     initialize: initialize,
     setUserImageURL: setUserImageURL
diff --git a/ui/webui/resources/images/icon_bookmarks.svg b/ui/webui/resources/images/icon_bookmarks.svg
new file mode 100644
index 0000000..cc93d8c
--- /dev/null
+++ b/ui/webui/resources/images/icon_bookmarks.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
+  <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
diff --git a/ui/webui/resources/images/icon_extensions.svg b/ui/webui/resources/images/icon_extensions.svg
new file mode 100644
index 0000000..e678d58
--- /dev/null
+++ b/ui/webui/resources/images/icon_extensions.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/>
+</svg>
diff --git a/ui/webui/resources/images/icon_history.svg b/ui/webui/resources/images/icon_history.svg
new file mode 100644
index 0000000..8c0d776
--- /dev/null
+++ b/ui/webui/resources/images/icon_history.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+</svg>
diff --git a/ui/webui/resources/images/icon_passwords.svg b/ui/webui/resources/images/icon_passwords.svg
new file mode 100644
index 0000000..246a9db
--- /dev/null
+++ b/ui/webui/resources/images/icon_passwords.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
+  <path d="M3 5.005v19.99C3 26.103 3.895 27 5 27h30c1.108 0 2-.898 2-2.005V5.005C37 3.897 36.105 3 35 3H5c-1.108 0-2 .898-2 2.005zm-3 0C0 2.242 2.234 0 5 0h30c2.763 0 5 2.242 5 5.005v19.99C40 27.758 37.766 30 35 30H5c-2.763 0-5-2.242-5-5.005V5.005zM29 8h3v13h-3V8zm-6 6.14l-.632-1.834-.147.046-3.195.98V10H16.98v3.33l-3.2-.978-.148-.046L13 14.14l.146.045 3.21.984-1.987 2.58-.09.115L15.93 19l.09-.118L18 16.316l1.978 2.566.09.118 1.655-1.133-.09-.117-1.988-2.58 3.21-.985.145-.045zM7.222 12.352l-3.2.98V10H3v6.316l1.977 2.566.09.118 1.654-1.133-.09-.117-1.985-2.58 3.21-.985L8 14.14l-.63-1.834-.148.046z" fill-rule="evenodd"/>
+</svg>
diff --git a/ui/webui/resources/images/icon_tabs.svg b/ui/webui/resources/images/icon_tabs.svg
new file mode 100644
index 0000000..9fbe81c
--- /dev/null
+++ b/ui/webui/resources/images/icon_tabs.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h24v24H0V0z"/>
+    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 4h5v16H6V4zm5 7h7v9h-7v-9z" fill="#000"/>
+  </g>
+</svg>
diff --git a/ui/webui/resources/images/icon_themes.svg b/ui/webui/resources/images/icon_themes.svg
new file mode 100644
index 0000000..6e225fdf
--- /dev/null
+++ b/ui/webui/resources/images/icon_themes.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" viewBox="0 0 32 30">
+  <path d="M20.04 16.74L12.776 24l-2.42-2.42c-.668-.668 0-2.42 0-2.42l1.21-3.632c.302-.91.364-2.057 0-2.422-3.63-3.63-8.472-6.05-9.684-7.26-1.337-1.338-1.337-3.507 0-4.842 1.34-1.34 3.506-1.34 4.842 0 1.21 1.21 3.63 6.05 7.263 9.682.363.363 1.512.303 2.42 0l3.63-1.21s1.754-.668 2.422 0l2.42 2.42-4.84 4.843zM3.657 2.44c-.586.585-.586 1.535 0 2.12.585.586 1.535.586 2.122 0 .582-.585.582-1.535 0-2.12-.59-.587-1.54-.587-2.125 0zM24.32 24.9h-3.4v3.4l-1.7 1.7-5.1-5.1L26.02 13l5.1 5.1-6.8 6.8z" fill-rule="evenodd"/>
+</svg>
diff --git a/ui/webui/resources/webui_resources.grd b/ui/webui/resources/webui_resources.grd
index 2c6726b..04888fb 100644
--- a/ui/webui/resources/webui_resources.grd
+++ b/ui/webui/resources/webui_resources.grd
@@ -193,8 +193,6 @@ without changes to the corresponding grd file. -->
                file="images/throbber_small.svg" type="BINDATA" />
       <include name="IDR_WEBUI_IMAGES_TRASH"
                file="images/trash.png" type="BINDATA" />
-      <include name="IDR_WEBUI_IMAGES_CHECK_CIRCLE"
-               file="images/check_circle.svg" type="BINDATA" />
 
       <part file="cr_elements_images.grdp" />
     </includes>