[CrOS MultiDevice]: Adding icons to MultiDevice Setup WebUI.

I added the Google-G and Error Icon from UX.

Bug: 835931
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I8ce9ed0b98b68ec6ba2b989f807d5bec1d840042
Reviewed-on: https://chromium-review.googlesource.com/1031733
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554545}

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<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">
+  <svg>
+    <defs>
+      <g id="google-g" fill="none" fill-rule="evenodd">
+        <path d="M30.42 16.83a16.66 16.66 0 0 0-.264-2.966H16.5v5.609h7.804c-.336 1.812-1.358 3.348-2.894 4.376v3.638h4.686c2.742-2.524 4.324-6.242 4.324-10.657z" fill="#4285F4"></path>
+        <path d="M16.5 31c3.915 0 7.197-1.298 9.596-3.513l-4.686-3.638c-1.298.87-2.96 1.384-4.91 1.384-3.777 0-6.973-2.55-8.113-5.978H3.542v3.757C5.928 27.75 10.832 31 16.5 31z" fill="#34A853"></path>
+        <path d="M8.387 19.255c-.29-.87-.455-1.8-.455-2.755 0-.956.165-1.885.455-2.755V9.988H3.542A14.494 14.494 0 0 0 2 16.5c0 2.34.56 4.554 1.542 6.512l4.845-3.757z" fill="#FBBC05"></path>
+        <path d="M16.5 7.767c2.129 0 4.04.732 5.543 2.168l4.159-4.158C23.69 3.437 20.408 2 16.5 2 10.832 2 5.928 5.25 3.542 9.988l4.845 3.757c1.14-3.427 4.336-5.978 8.113-5.978z" fill="#EA4335"></path>
+        <path d="M2 2h29v29H2z"></path>
+      </g>
+      <g id="error-icon" fill="none" fill-rule="evenodd" transform="translate(-4 -4)">
+        <path d="M20 4C11.168 4 4 11.168 4 20s7.168 16 16 16 16-7.168 16-16S28.832 4 20 4zm1.6 24h-3.2v-3.2h3.2V28zm0-6.4h-3.2V12h3.2v9.6z" fill="#D93025" fill-rule="nonzero"></path>
+        <path d="M.8.8h38.4v38.4H.8z"></path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

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

@@ -21,6 +21,9 @@
       <structure name="IDR_MULTIDEVICE_SETUP_I18N_SETUP_HTML"
                  file="i18n_setup.html"
                  type="chrome_html" />
+      <structure name="IDR_MULTIDEVICE_SETUP_ICONS_HTML"
+                 file="icons.html"
+                 type="chrome_html" />
       <structure name="IDR_MULTIDEVICE_SETUP_MULTIDEVICE_SETUP_DIALOG_HTML"
                  file="multidevice_setup_dialog.html"
                  flattenhtml="true"

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="ui_page_container_behavior.html">
 <link rel="import" href="ui_page.html">
+<link rel="import" href="ui_page_container_behavior.html">
 
 <dom-module id="setup-failed-page">
   <template>
-    <ui-page header-text="[[headerText]]">
+    <ui-page header-text="[[headerText]]" icon-name="error-icon">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
       <div slot="additional-content">
         This is empty... (PlAcEhOlDeR tExT!!)

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

@@ -6,7 +6,7 @@
 
 <dom-module id="setup-succeeded-page">
   <template>
-    <ui-page header-text="[[headerText]]">
+    <ui-page header-text="[[headerText]]" icon-name="google-g">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
       <div slot="additional-content">
         This is empty... (PlAcEhOlDeR tExT!!)

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

@@ -6,7 +6,7 @@
 
 <dom-module id="start-setup-page">
   <template>
-    <ui-page header-text="[[headerText]]">
+    <ui-page header-text="[[headerText]]" icon-name="google-g">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
       <div slot="additional-content">
         This is a dropdown or a spinner... (PlAcEhOlDeR tExT!!)

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="icons.html">
+
 <dom-module id="ui-page">
   <template>
-    <div>[[headerText]]</div>
+    <style>
+      iron-icon {
+        height: 32px;
+        width: 32px;
+      }
+    </style>
+    <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
+    <div>[[title]]</div>
     <slot name="message"></slot>
     <slot name="additional-content"></slot>
+    <slot name="page-specific-image"></slot>
   </template>
   <script src="ui_page.js"></script>
 </dom-module>

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

@@ -15,5 +15,20 @@ Polymer({
      * @type {string}
      */
     headerText: String,
+
+    /**
+     * Name of icon within icon set.
+     *
+     * @type {string}
+     */
+    iconName: String,
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeIconIdentifier_: function() {
+    return 'multidevice-setup-icons:' + this.iconName;
   },
 });