Add icons to subsections in People section in Settings

Add icons to "Sync" and "Parental controls" subsections.

Screenshot: http://screen/7wmcgUf7mLvUesB

Bug: 1148246
Change-Id: I2ad53d4f1926daeb9ffd8000af410346a61f80bc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2544509
Commit-Queue: Anastasiia N <anastasiian@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837533}

chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html

@@ -41,6 +41,10 @@
 <dom-module id="os-settings-people-page">
   <template>
     <style include="settings-shared iron-flex">
+      :host {
+        --icon-width: 40px;
+      }
+
       .sync-row {
         align-items: center;
         flex: auto;
@@ -59,10 +63,14 @@
       }
 
       cr-link-row {
-        --cr-link-row-icon-width: 40px;
+        --cr-link-row-icon-width: var(--icon-width);
         border-top: var(--cr-separator-line);
       }
 
+      settings-parental-controls-page {
+        --cr-link-row-icon-width: var(--icon-width);
+      }
+
       .icon-container {
         display: flex;
         flex-shrink: 0;
@@ -107,6 +115,8 @@
         </div>
 
         <cr-link-row id="sync-setup"
+            start-icon="[[getSyncSetupIcon_(
+                            isAccountManagementFlowsV2Enabled_)]]"
             label="[[getSyncRowLabel_()]]"
             sub-label="[[getSyncAndGoogleServicesSubtext_(syncStatus)]]"
             on-click="onSyncTap_"

chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.js

@@ -546,6 +546,10 @@ Polymer({
     return cr.icon.getImage(iconUrl);
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
   getProfileName_() {
     if (this.isAccountManagerEnabled_ &&
         this.isAccountManagementFlowsV2Enabled_) {
@@ -554,6 +558,14 @@ Polymer({
     return this.profileName_;
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getSyncSetupIcon_() {
+    return this.isAccountManagementFlowsV2Enabled_ ? 'cr:sync' : '';
+  },
+
   /**
    * @param {!settings.SyncStatus} syncStatus
    * @return {boolean} Whether to show the "Sign in to Chrome" button.

chrome/browser/resources/settings/chromeos/parental_controls_page/parental_controls_page.html

@@ -17,6 +17,10 @@
       cr-link-row {
         --cr-section-padding: 0;
       }
+      /* The same width as in cr-link-row */
+      .start-icon {
+        width: var(--cr-link-row-icon-width, var(--cr-icon-size));
+      }
     </style>
     <div id="parental-controls-item" class="settings-box two-line">
       <template is="dom-if" if="[[isChild_]]">
@@ -28,7 +32,11 @@
         </cr-link-row>
       </template>
       <template is="dom-if" if="[[!isChild_]]">
-        <div class="start settings-box-text">
+        <template is="dom-if" if="[[isAccountManagementFlowsV2Enabled_]]">
+          <iron-icon class="start-icon" icon="cr20:kite"></iron-icon>
+        </template>
+        <div class$="[[getLabelClassList_(
+                        isAccountManagementFlowsV2Enabled_)]]">
           <div id="label" aria-hidden="true">
             $i18n{parentalControlsPageTitle}
           </div>

chrome/browser/resources/settings/chromeos/parental_controls_page/parental_controls_page.js

@@ -30,6 +30,18 @@ Polymer({
         return navigator.onLine;
       }
     },
+
+    /**
+     * True if redesign of account management flows is enabled.
+     * @private
+     */
+    isAccountManagementFlowsV2Enabled_: {
+      type: Boolean,
+      value() {
+        return loadTimeData.getBoolean('isAccountManagementFlowsV2Enabled');
+      },
+      readOnly: true,
+    },
   },
 
   /** @override */
@@ -81,6 +93,16 @@ Polymer({
     }
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getLabelClassList_() {
+    return this.isAccountManagementFlowsV2Enabled_ ?
+        'middle settings-box-text' :
+        'start settings-box-text';
+  },
+
   /** @private */
   handleSetupButtonClick_(event) {
     event.stopPropagation();