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

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

Index: chrome/browser/resources/settings/people_page/people_page.html
diff --git a/chrome/browser/resources/settings/people_page/people_page.html b/chrome/browser/resources/settings/people_page/people_page.html
index 0e2990632b1e762aafbf2a4cd4adc207b97518ea..8c691bba91f048858a5b8e6b926d8d7934976831 100644
--- a/chrome/browser/resources/settings/people_page/people_page.html
+++ b/chrome/browser/resources/settings/people_page/people_page.html
@@ -55,11 +55,11 @@
        --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);
       }
 
@@ -147,22 +147,21 @@
         <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>
 
@@ -270,7 +269,7 @@
       <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>