MD Settings: simplify language model and data binding

chrome/browser/resources/settings/languages_page/manage_languages_page.html

 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.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.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 <link rel="import" href="languages.html">
 
 <dom-module id="settings-manage-languages-page">
   <template>
     <style include="settings-shared">
       .list-frame {
         display: flex;
         flex-direction: column;
         align-items: initial;
       }
 
       iron-list {
         height: 300px;
       }
     </style>
     <settings-languages languages="{{languages}}"></settings-languages>
-    <div class="settings-box first content">
-      <div class="start">
-        <h2>$i18n{enabledLanguages}</h2>
-        <div class="list-frame vertical-list">
-          <template is="dom-repeat" items="{{languages.enabledLanguages}}">
+    <div class="settings-box first block">
+      <h2>$i18n{enabledLanguages}</h2>
+      <div class="list-frame vertical-list">
+        <template is="dom-repeat" items="{{languages.enabled}}">
+          <div class="list-item">
+            <div class="start" title="[[item.language.nativeDisplayName]]">
+              [[item.language.displayName]]
+            </div>
+            <paper-icon-button icon="clear" on-tap="onRemoveLanguageTap_"
+                hidden$="[[!item.removable]]">
+            </paper-icon-button>
+          </div>
+        </template>
+      </div>
+      <h2>$i18n{allLanguages}</h2>
+      <div class="list-frame vertical-list">
+        <iron-list items="{{languages.supported}}">
+          <template>
             <div class="list-item">
-              <div class="start" title="[[item.language.nativeDisplayName]]">
-                [[item.language.displayName]]
-              </div>
-              <paper-icon-button icon="clear" on-tap="onRemoveLanguageTap_"
-                  hidden$="[[!canRemoveLanguage_(
-                      item.language.code, prefs.intl.app_locale.value)]]">
-              </paper-icon-button>
+              <paper-checkbox
+                  checked="[[isCheckboxChecked_(item, languages.enabled.*)]]"
+                  disabled="[[isLanguageRequired_(item, languages.enabled.*)]]"
+                  title$="[[item.nativeDisplayName]]"
+                  on-change="onLanguageCheckboxChange_">
+                [[item.displayName]]
+              </paper-checkbox>
             </div>
           </template>
-        </div>
-        <h2>$i18n{allLanguages}</h2>
-        <div class="list-frame vertical-list">
-          <iron-list items="{{availableLanguages_}}" as="item">
-            <template>
-              <div class="list-item">
-                <paper-checkbox checked="[[item.enabled]]"
-                    title$="[[item.nativeDisplayName]]"
-                    disabled="[[!canRemoveLanguage_(
-                        item.code, prefs.intl.app_locale.value)]]"
-                    on-change="onLanguageCheckboxChange_">
-                  [[item.displayName]]
-                </paper-checkbox>
-              </div>
-            </template>
-          </iron-list>
-        </div>
+        </iron-list>
       </div>
     </div>
   </template>
   <script src="manage_languages_page.js"></script>
 </dom-module>