Add the decorative icons to the sync confirmation dialog.

chrome/browser/resources/sync_confirmation/sync_confirmation.html

Index: chrome/browser/resources/sync_confirmation/sync_confirmation.html
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.html b/chrome/browser/resources/sync_confirmation/sync_confirmation.html
index b6673dadfa23f9d9a2fbe5c5439a0a6a4e361ac7..cd94fee1a09ec4ec07ad832f2d18aa4d9b4076de 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">

[Dan Beam, 2016/02/29 20:31:08]

nit: any reason why this svg is inlined rather than a separate .svg?

if you say <img src="whatever_you_named_it.svg">, the contents should be inlined
automatically if grit processing is enabled

[anthonyvd, 2016/03/01 15:21:51]

Yeah, making this a file and adding it as an <img> inlines it as a base64
representation of the svg. Because of that, I can't apply any styles to the
<path> itself, which I do to animate the checkmark.

+                  <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"