[CrOS MultiDevice] Add assets to MultiDevice setup flow.

This CL adds:
(1) Four .png files (two icons in both 1x and 2x sizes).
(2) Three .svg files.

Bug: 870111, 824568
Change-Id: I39f2a24f128a63ee081629eaa755b9fbea1ef4db
Reviewed-on: https://chromium-review.googlesource.com/1184332Reviewed-by: Lei Zhang <thestig@chromium.org>
Reviewed-by: Ryan Hansberry <hansberry@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584950}

chrome/browser/resources/chromeos/multidevice_setup/icons.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 
-<iron-iconset-svg name="multidevice-setup-icons" size="32">
+<iron-iconset-svg name="multidevice-setup-icons-32" size="32">
   <svg>
     <defs>
       <g id="google-g" fill="none" fill-rule="evenodd">
@@ -19,3 +19,18 @@
     </defs>
   </svg>
 </iron-iconset-svg>
+<iron-iconset-svg name="multidevice-setup-icons-20" size="20">
+  <svg>
+    <defs>
+      <g id="messages" fill="none" fill-rule="evenodd">
+        <path d="M16.3107503,3 L3.66666667,3 C2.75,3 2,3.75 2,4.66666667 L2,18.3161621 L5.33333333,15 L16.3107503,15 C17.227417,15 17.977417,14.2328288 17.977417,13.3161621 L17.977417,4.66666667 C17.977417,3.75 17.227417,3 16.3107503,3 Z M16,13 L4,13 L4,5 L16,5 L16,13 Z M6,8 L8,8 L8,10 L6,10 L6,8 Z M9,8 L11,8 L11,10 L9,10 L9,8 Z M12,8 L14,8 L14,10 L12,10 L12,8 Z" fill="#9AA0A6"></path>
+      </g>
+      <g id="downloads" fill="none" fill-rule="evenodd">
+        <path d="M2,13 L4,13 L4,16 L16,16 L16,13 L18,13 L18,16 C18,17.1 17.1,18 16,18 L4,18 C2.9,18 2,17.1 2,16 L2,13 Z M13.59,7.59 L11,10.17 L11,2 L9,2 L9,10.17 L6.41,7.59 L5,9 L10,14 L15,9 L13.59,7.59 Z" fill="#9AA0A6"></path>
+      </g>
+      <g id="features" fill="none" fill-rule="evenodd">
+        <path d="M5,5 L18,5 L18,3.5 L5.16080729,3.5 C4.24414063,3.5 3.49414062,4.23125 3.49414062,5.125 L3.49414062,14 L1,14 L1,17 L11,17 L11,14 L5,14 L5,5 Z M18.1666667,6.49829102 L13.3713582,6.49829102 C12.9130249,6.49829102 12.5,6.86391602 12.5,7.31079102 L12.5,16.171875 C12.5,16.61875 12.9130249,17 13.3713582,17 L18.1666667,17 C18.625,17 19,16.61875 19,16.171875 L19,7.31079102 C19,6.86391602 18.625,6.49829102 18.1666667,6.49829102 Z M17.5,14 L14,14 L14,8.5 L17.5,8.5 L17.5,14 Z" fill="#9AA0A6"></path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup_resources.grd

@@ -11,6 +11,12 @@
     <output filename="multidevice_setup_resources.pak" type="data_package" />
   </outputs>
   <release seq="1">
+    <includes>
+      <include name="IDR_MULTIDEVICE_SETUP_START_SETUP_ICON_1X_PNG" file="start_setup_icon_1x.png" type="BINDATA" />
+      <include name="IDR_MULTIDEVICE_SETUP_START_SETUP_ICON_2X_PNG" file="start_setup_icon_2x.png" type="BINDATA" />
+      <include name="IDR_MULTIDEVICE_SETUP_SETUP_SUCCEEDED_ICON_1X_PNG" file="setup_succeeded_icon_1x.png" type="BINDATA" />
+      <include name="IDR_MULTIDEVICE_SETUP_SETUP_SUCCEEDED_ICON_2X_PNG" file="setup_succeeded_icon_2x.png" type="BINDATA" />
+    </includes>
     <structures>
       <structure name="IDR_MULTIDEVICE_SETUP_BUTTON_BAR_HTML"
                  file="button_bar.html"

chrome/browser/resources/chromeos/multidevice_setup/setup_succeeded_page.html

@@ -8,13 +8,15 @@
 <dom-module id="setup-succeeded-page">
   <template>
     <style include="iron-flex">
-      #animation-container {
+      #page-icon-container {
         @apply(--layout-horizontal);
         @apply(--layout-center-justified);
       }
 
-      #animation-placeholder {
-        background-color: lightblue;
+      #page-icon {
+        background-image: -webkit-image-set(
+                              url(setup_succeeded_icon_1x.png) 1x,
+                              url(setup_succeeded_icon_2x.png) 2x);
         height: 156px;
         margin-top: 20px;
         width: 416px;
@@ -22,8 +24,8 @@
     </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
-      <div id="animation-container" slot="additional-content">
-        <div id="animation-placeholder">Animation Placeholder</div>
+      <div id="page-icon-container" slot="additional-content">
+        <div id="page-icon"></div>
       </div>
     </ui-page>
   </template>

chrome/browser/resources/chromeos/multidevice_setup/start_setup_page.html

@@ -2,6 +2,8 @@
 
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="icons.html">
 <link rel="import" href="multidevice_setup_shared_css.html">
 <link rel="import" href="ui_page.html">
 <link rel="import" href="ui_page_container_behavior.html">
@@ -26,16 +28,17 @@
         width: 240px;
       }
 
-      #animation-container {
+      #page-icon-container {
         @apply(--layout-horizontal);
         @apply(--layout-center-justified);
       }
 
-      #animation-placeholder {
-        background-color: lightblue;
-        height: 100px;
+      #page-icon {
+        background-image: -webkit-image-set(url(start_setup_icon_1x.png) 1x,
+                                            url(start_setup_icon_2x.png) 2x);
+        height: 116px;
         margin-top: 20px;
-        width: 300px;
+        width: 320px;
       }
 
       #feature-details-container {
@@ -57,10 +60,11 @@
       .feature-detail iron-icon {
         --iron-icon-height: 20px;
         --iron-icon-width: 20px;
+        position: fixed;
       }
 
       .feature-detail span {
-        padding-left: 8px;
+        padding-left: 28px;
       }
     </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
@@ -83,8 +87,8 @@
                 </template>
               </select>
             </div>
-            <div id="animation-container">
-              <div id="animation-placeholder">Animation Placeholder</div>
+            <div id="page-icon-container">
+              <div id="page-icon"></div>
             </div>
           </div>
           <div id="feature-details-container" class="flex">
@@ -92,18 +96,16 @@
               $i18n{startSetupPageFeatureListHeader}
             </div>
             <div class="feature-detail">
-              <!-- TODO(jordynass): Use correct icon. -->
-              <iron-icon icon="multidevice-setup-icons:google-g"></iron-icon>
+              <iron-icon icon="multidevice-setup-icons-20:messages"></iron-icon>
               <span>$i18n{startSetupPageFeatureListAwm}</span>
             </div>
             <div class="feature-detail">
-              <!-- TODO(jordynass): Use correct icon. -->
-              <iron-icon icon="multidevice-setup-icons:google-g"></iron-icon>
+              <iron-icon icon="multidevice-setup-icons-20:downloads">
+              </iron-icon>
               <span>$i18n{startSetupPageFeatureListInstallApps}</span>
             </div>
             <div class="feature-detail">
-              <!-- TODO(jordynass): Use correct icon. -->
-              <iron-icon icon="multidevice-setup-icons:google-g"></iron-icon>
+              <iron-icon icon="multidevice-setup-icons-20:features"></iron-icon>
               <span>$i18n{startSetupPageFeatureListAddFeatures}</span>
             </div>
           </div>

chrome/browser/resources/chromeos/multidevice_setup/ui_page.js

@@ -29,6 +29,6 @@ Polymer({
    * @private
    */
   computeIconIdentifier_: function() {
-    return 'multidevice-setup-icons:' + this.iconName;
+    return 'multidevice-setup-icons-32:' + this.iconName;
   },
 });

tools/gritsettings/resource_ids

@@ -84,7 +84,8 @@
     "structures": [12000],
   },
   "chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup_resources.grd": {
-    "structures": [12040],
+    "includes": [12040],
+    "structures": [12045],
   },
   "chrome/browser/resources/component_extension_resources.grd": {
     "includes": [12100],