MD Settings: fix presentation of sync page

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

 <link rel="import" href="chrome://resources/html/i18n_behavior.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/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="/people_page/sync_browser_proxy.html">
 <link rel="import" href="/route.html">
@@ skipping 46 matching lines @@
         hidden$="[[!isStatus_(pages.CONFIGURE, pageStatus_)]]">
       <div class="settings-box first">
         <div class="start">$i18n{syncEverythingCheckboxLabel}</div>
         <paper-toggle-button id="syncAllDataTypesControl"
             checked="{{syncPrefs.syncAllDataTypes}}"
             on-change="onSyncAllDataTypesChanged_">
         </paper-toggle-button>
       </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.-->
           <div class="flex">
             $i18n{enablePaymentsIntegrationCheckboxLabel}
             <a href="$i18nRaw{autofillHelpURL}" target="_blank">
               $i18n{learnMore}
             </a>
           </div>
           <paper-toggle-button
               checked="{{syncPrefs.paymentsIntegrationEnabled}}"
               on-change="onSingleSyncDataTypeChanged_"
-              hidden="[[!syncPrefs.autofillRegistered]]"
               disabled="[[shouldPaymentsCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]">
           </paper-toggle-button>
         </div>
       </div>
 
       <div class="settings-box two-line" actionable
           on-tap="onManageSyncedDataTap_">
         <div class="start">
           $i18n{manageSyncedDataTitle}
@@ skipping 85 matching lines @@
           </div>
           <div id="passphraseRecoverHint" class="list-item">
             <span>$i18nRaw{passphraseRecover}</span>
           </div>
         </div>
       </template>
     </div>
   </template>
   <script src="sync_page.js"></script>
 </dom-module>