MD Settings: make custom UIs look "actionable"

chrome/browser/resources/settings/people_page/people_page.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/people_page/sync_page.html">
 <link rel="import" href="/people_page/profile_info_browser_proxy.html">
@@ skipping 27 matching lines @@
         object-fit: cover;
         vertical-align: middle;
         width: 40px;
       }
 
       #profile-icon:hover,
       #activity-controls:hover {
         cursor: pointer;
       }
 
-<if expr="not chromeos">
-      #profile-name:hover {
-        cursor: pointer;
-      }
-</if>
-
       #managed-by-domain-name {
         font-weight: bold;
       }
 
-      iron-icon[icon="settings:sync-problem"] {
+      iron-icon[icon='settings:sync-problem'] {
        --iron-icon-fill-color: var(--settings-error-color);
       }
 
       .settings-box .sync-error {
         color: var(--settings-error-color);
       }
 
       .icon-container {
         display: flex;
         justify-content: center;
         width: 40px;
       }
 
       #googleg-logo {
         background-image: url(../../../../../ui/webui/resources/images/200-logo_googleg.png);
         background-size: cover;
         height: var(--iron-icon-height);
         width: var(--iron-icon-width);
       }
     </style>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="people">
       <neon-animatable id="main">
         <div class="settings-box first two-line">
           <img id="profile-icon" src="[[profileIconUrl_]]"
-              on-tap="onPictureTap_">
+              on-tap="onPictureTap_" actionable>
           <div class="middle">
-<if expr="chromeos">
-            <span id="profile-name" on-tap="onProfileNameTap_">
+<if expr="not chromeos">
+            <span id="profile-name" on-tap="onProfileNameTap_" actionable>
               [[profileName_]]
             </span>
 </if>
-<if expr="not chromeos">
+<if expr="chromeos">
             <span id="profile-name">
               [[profileName_]]
             </span>
 </if>
           </div>
 <if expr="not chromeos">
           <template is="dom-if" if="[[!syncStatus.signedIn]]">
             <span class="secondary-action">
               <paper-button class="primary-button" on-tap="onSigninTap_"
                   disabled="[[syncStatus.setupInProgress]]">
@@ skipping 23 matching lines @@
             </div>
             <div class="middle"
                 inner-h-t-m-l="[[getDomainHtml_(syncStatus.domain)]]">
             </div>
           </div>
         </template>
 </if>
 
         <template is="dom-if"
             if="[[isAdvancedSyncSettingsVisible_(syncStatus)]]">
-          <div class="settings-box two-line" on-tap="onSyncTap_">
+          <div class="settings-box two-line" on-tap="onSyncTap_" actionable>
             <div class="icon-container">
               <iron-icon id="sync-icon" icon$="[[getSyncIcon_(syncStatus)]]">
               </iron-icon>
             </div>
             <div class="middle">
               <div>$i18n{sync}</div>
               <div class="secondary" hidden="[[syncStatus.hasError]]">
                 [[syncStatus.statusText]]
               </div>
               <div class="secondary sync-error"
                   hidden="[[!syncStatus.hasError]]">
                 [[syncStatus.statusText]]
               </div>
             </div>
           </div>
         </template>
 
         <div class="settings-box two-line" id="activity-controls"
-            on-tap="onActivityControlsTap_">
+            on-tap="onActivityControlsTap_" actionable>
           <div class="icon-container">
             <div id="googleg-logo"></div>
           </div>
           <div class="middle">
             <div>$i18n{personalizeGoogleServicesTitle}</div>
             <div class="secondary">$i18n{personalizeGoogleServicesText}</div>
           </div>
         </div>
 
 <if expr="chromeos">
@@ skipping 119 matching lines @@
 
 <if expr="chromeos">
     <template is="dom-if" if="[[easyUnlockEnabled_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>