[MD Settings][Sync Settings] Updates sync status messages

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/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/icon.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-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
@@ skipping 37 matching lines @@
       }
 
       #managed-by-domain-name {
         font-weight: bold;
       }
 
       iron-icon[icon='settings:sync'] {
        --iron-icon-fill-color: var(--google-green-700);
       }
 
-      iron-icon[icon='settings:sync-problem'] {
+      #sync-status[actionable] iron-icon[icon='settings:sync-problem'] {
        --iron-icon-fill-color: var(--settings-error-color);
       }
 
-      .settings-box .sync-error {
+      .settings-box[actionable] .sync-error {
         color: var(--settings-error-color);
       }
 
       .icon-container {
         display: flex;
         flex-shrink: 0;
         justify-content: center;
         width: 40px;
       }
 
@@ skipping 67 matching lines @@
             <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_"
-              id="customize-sync" actionable$="[[!syncStatus.managed]]">
+              id="sync-status" actionable$="[[isSyncStatusActionable_(
+              syncStatus)]]">
             <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]]">
+              <div class$="secondary [[getSyncStatusTextClass_(syncStatus)]]">
                 [[syncStatus.statusText]]
               </div>
             </div>
-            <button class="subpage-arrow" is="paper-icon-button-light"></button>
+            <button class="subpage-arrow" is="paper-icon-button-light"

[tommycli, 2016/10/28 21:21:09]

Can we do this in pure CSS ? i.e.

#sync-status:not[actionable] .subpage-arrow {
  display: none;
}

?

[Moe, 2016/11/01 19:44:01]

Done.

+                hidden="[[!isSyncStatusActionable_(syncStatus)]]">
+            </button>
           </div>
         </template>
 
         <div class="settings-box two-line" id="activity-controls"
             on-tap="onActivityControlsTap_" actionable
             hidden="[[!syncStatus.signedIn]]">
           <div class="icon-container">
             <div id="googleg-logo"></div>
           </div>
           <div class="middle">
@@ skipping 87 matching lines @@
                 $i18n{manageSupervisedUsersDescription}
               </div>
             </div>
             <button class="icon-external" is="paper-icon-button-light"></button>
           </div>
         </template>
       </neon-animatable>
       <template is="dom-if" route-path="/syncSetup"
           no-search$="[[!isAdvancedSyncSettingsVisible_(syncStatus)]]">
         <settings-subpage
-            associated-control="[[$$('#customize-sync')]]"
+            associated-control="[[$$('#sync-status')]]"
             page-title="$i18n{syncPageTitle}"
             no-search$="[[!isAdvancedSyncSettingsVisible_(syncStatus)]]">
           <settings-sync-page></settings-sync-page>
         </settings-subpage>
       </template>
 <if expr="chromeos">
       <template is="dom-if" if="[[quickUnlockEnabled_]]">
         <template is="dom-if" route-path="/lockScreen" no-search>
           <settings-subpage page-title="$i18n{lockScreenTitle}">
             <settings-lock-screen
@@ skipping 58 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>