[CrOS MultiDevice]: Aesthetic changes to settings subpage (icon added)

The main change in this CL is the addition of the Smart Lock icon, and
with it the necessary infrastructure for adding the of the icons. There
are also some alignment and naming cleanups.

Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I13b32e26228bbea02378ef03a74405be1b926c46
Reviewed-on: https://chromium-review.googlesource.com/1136896Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575100}

chrome/browser/resources/settings/icons.html

@@ -36,6 +36,10 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
 
       <!-- Icons from https://icons.googleplex.com. -->
       <g id="play-prism"><path fill="#5A5A5A" d="M20.18 10.88l-3.06-1.74L14.26 12l2.86 2.86 3.06-1.74c.55-.31.82-.71.82-1.12 0-.41-.27-.81-.82-1.12zM4.71 2.45l8.42 8.42 2.55-2.55-10.7-6.06c-.07-.04-.14-.07-.21-.1-.17-.07-.3.05-.15.21.03.02.06.05.09.08zm0 19.1l-.08.08c-.15.15-.02.28.15.21.07-.03.14-.06.21-.1l10.69-6.06-2.55-2.55s-7.2 7.21-8.42 8.42zM12 12L3.38 3.38c-.19-.19-.38-.07-.38.19v16.86c0 .26.19.38.38.19L12 12z"></path></g>
+
+      <!-- Icons for MultiDevice Settings UI -->
+      <g id="smart-lock" fill="#9AA0A6" fill-rule="nonzero"><path d="M18,9 L17,9 L17,7 C17,4.24 14.76,2 12,2 C9.24,2 7,4.24 7,7 L7,9 L6,9 C4.9,9 4,9.9 4,11 L4,21 C4,22.1 4.9,23 6,23 L18,23 C19.1,23 20,22.1 20,21 L20,11 C20,9.9 19.1,9 18,9 Z M9,7 C9,5.34 10.34,4 12,4 C13.66,4 15,5.34 15,7 L15,9 L9,9 L9,7 Z M18,21 L6,21 L6,11 L18,11 L18,21 Z M12,18 C13.1,18 14,17.1 14,16 C14,14.9 13.1,14 12,14 C10.9,14 10,14.9 10,16 C10,17.1 10.9,18 12,18 Z"></path></g>
+
 </if>
 
       <!-- Protected Content SVG -->

chrome/browser/resources/settings/multidevice_page/multidevice_feature_item.html

@@ -3,28 +3,29 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../icons.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-multidevice-feature-item">
   <template>
     <style include="settings-shared">
-      .svg-placeholder {
-        width: var(--cr-icon-size);
+      iron-icon {
+        padding: 2px;
       }
 
-      .middle {
-        -webkit-padding-start: 20px;
+      #item-text-container {
+        -webkit-padding-start: 18px;
       }
     </style>
     <div class="settings-box two-line first"
         on-click="handleItemClick_"
         actionable$="[[hasSubpageClickHandler_(subpageRoute)]]">
-      <!-- TODO (jordynass): Add iron icon -->
-      <div class="svg-placeholder"></div>
-      <div class="middle">
+      <iron-icon icon="[[iconName]]"></iron-icon>
+      <div id="item-text-container" class="middle">
         [[getFeatureName_(featureNameId)]]
         <div class="secondary"
             id="featureSecondary"

chrome/browser/resources/settings/multidevice_page/multidevice_feature_item.js

@@ -18,12 +18,27 @@ Polymer({
   behaviors: [I18nBehavior],
 
   properties: {
-    /** @type {string} */
+    /**
+     * This is the ID of the localized string representing the name of the
+     * feature.
+     * @type {string}
+     */
     featureNameId: String,
 
-    /** @type {string} */
+    /**
+     * This is the ID of the localized string providing a description or useful
+     * status information concertning the feature.
+     * @type {string}
+     */
     featureSummaryId: String,
 
+    /**
+     * The full icon name used provided by the containing iron-iconset-svg
+     * (i.e. [iron-iconset-svg name]:[SVG <g> tag id]
+     * @type {string}
+     */
+    iconName: String,
+
     /**
      * If it is non-null, the item should be actionable and clicking on it
      * should navigate there. If it is undefined, the item is simply not

chrome/browser/resources/settings/multidevice_page/multidevice_subpage.html

@@ -6,6 +6,7 @@
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
+<link rel="import" href="../settings_vars_css.html">
 <link rel="import" href="multidevice_feature_item.html">
 
 <dom-module id="settings-multidevice-subpage">
@@ -14,10 +15,15 @@
       #status-text-container[enabled] {
         color: var(--google-green-500);
       }
+
+      .feature-item-container {
+        -webkit-margin-end: var(--settings-box-row-padding);
+        -webkit-margin-start: var(--settings-box-row-indent);
+      }
     </style>
     <div class="settings-box first">
       <div id="status-text-container" class="start" enabled$="[[hostEnabled]]">
-        [[getEnabledOrDiabledText_(hostEnabled)]]
+        [[getStatusText_(hostEnabled)]]
       </div>
       <cr-toggle id="enable-multidevice" checked="{{hostEnabled}}">
       </cr-toggle>
@@ -25,10 +31,13 @@
     <template is="dom-if"
         if="[[showIndividualFeatures_(pageContentData)]]"
         restamp>
-      <settings-multidevice-feature-item subpage-route="[[routes.LOCK_SCREEN]]"
-          feature-name-id="multideviceSmartLockItemTitle"
-          feature-summary-id="multideviceSmsConnectItemSummary">
-      </settings-multidevice-feature-item>
+      <div class="feature-item-container">
+        <settings-multidevice-feature-item icon-name="settings:smart-lock"
+            subpage-route="[[routes.LOCK_SCREEN]]"
+            feature-name-id="multideviceSmartLockItemTitle"
+            feature-summary-id="multideviceSmsConnectItemSummary">
+        </settings-multidevice-feature-item>
+      </div>
     </template>
   </template>
   <script src="multidevice_subpage.js"></script>

chrome/browser/resources/settings/multidevice_page/multidevice_subpage.js

@@ -51,7 +51,7 @@ Polymer({
    * @return {string}
    * @private
    */
-  getEnabledOrDiabledText_: function() {
+  getStatusText_: function() {
     return this.hostEnabled ? this.i18n('multideviceEnabled') :
                               this.i18n('multideviceDisabled');
   },