MD Settings: fix presentation of sync page

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

Index: chrome/browser/resources/settings/people_page/sync_page.html
diff --git a/chrome/browser/resources/settings/people_page/sync_page.html b/chrome/browser/resources/settings/people_page/sync_page.html
index 6cd9f8aa519a28c4d051155cc7af70a069860677..50a90ae76ed8de9e526d2f80d586bc95721d6f24 100644
--- a/chrome/browser/resources/settings/people_page/sync_page.html
+++ b/chrome/browser/resources/settings/people_page/sync_page.html
@@ -64,99 +64,100 @@
       </div>
 
       <div class="list-frame">
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.appsRegistered]]">
           <div class="flex">$i18n{appCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.appsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.appsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.autofillRegistered]]">
           <div class="flex">$i18n{autofillCheckboxLabel}</div>
           <!-- Autofill has a special on-change handler to deal with
                Payments integriation. -->
           <paper-toggle-button checked="{{syncPrefs.autofillSynced}}"
               on-change="onAutofillDataTypeChanged_"
-              hidden="[[!syncPrefs.autofillRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.bookmarksRegistered]]">
           <div class="flex">$i18n{bookmarksCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.bookmarksSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.bookmarksRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.extensionsRegistered]]">
           <div class="flex">$i18n{extensionsCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.extensionsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.extensionsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.typedUrlsRegistered]]">
           <div class="flex">$i18n{historyCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.typedUrlsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.typedUrlsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.passwordsRegistered]]">
           <div class="flex">$i18n{passwordsCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.passwordsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.passwordsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.preferencesRegistered]]">
           <div class="flex">$i18n{settingsCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.preferencesSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.preferencesRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.preferencesEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.themesRegistered]]">
           <div class="flex">$i18n{themesAndWallpapersCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.themesSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.themesRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.tabsRegistered]]">
           <div class="flex">$i18n{openTabsCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.tabsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.tabsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]">
           </paper-toggle-button>
         </div>
 
-        <div class="layout horizontal list-item">
+        <div class="layout horizontal list-item"
+            hidden="[[!syncPrefs.autofillRegistered]]">
           <!-- The Payments integration checkbox is a special case in many ways.
                It's visible only if autofill is registered. It's disabled and
                unchecked if autofill is unchecked.-->
@@ -169,7 +170,6 @@
           <paper-toggle-button
               checked="{{syncPrefs.paymentsIntegrationEnabled}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.autofillRegistered]]"
               disabled="[[shouldPaymentsCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]">
           </paper-toggle-button>