MD Settings: Languages model for language pages

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

Index: chrome/browser/resources/settings/languages_page/languages_page.html
diff --git a/chrome/browser/resources/settings/languages_page/languages_page.html b/chrome/browser/resources/settings/languages_page/languages_page.html
index fcb0ebbbaef56549c87a6ce13afe2fd476457bfa..0825bf67ee1d9e188ed1b521c5015a9f5b291ea3 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -2,63 +2,81 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.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-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_subheader.html">
+<link rel="import" href="languages.html">
+<link rel="import" href="manage_languages_page.html">
 
 <dom-module id="cr-settings-languages-page">
   <link rel="import" type="css"
       href="chrome://md-settings/settings_page/settings_page.css">
   <link rel="import" type="css" href="languages_page.css">
   <template>
-    <h2 i18n-content="languagesListTitle"></h2>
-    <div class="item-list">
-      <template is="dom-repeat" items="{{dummyLanguages_}}">
-        <paper-item>
-          <div class="flex">[[item.displayName]]</div>
-          <iron-icon icon="done"
-              hidden$="[[
-                  !isUILanguage_(item.code, dummyAppLocale_)]]">
-          </iron-icon>
-          <paper-icon-button icon="settings"></paper-icon-button>
-        </paper-item>
-      </template>
-    </div>
-    <div class="manage">
-      <paper-button i18n-content="manageLanguages"></paper-button>
-    </div>
+    <cr-settings-languages id="languages" languages="{{languages}}">
+    </cr-settings-languages>
+    <cr-settings-animated-pages id="pages" current-route="{{currentRoute}}"
+        section="languages">
+      <neon-animatable id="">

[Dan Beam, 2015/09/23 23:28:17]

id=""?

[michaelpg, 2015/09/24 02:15:20]

Copied from other examples. I suspect it's because of
<neon-animated-pages attr-for-selected="id">
requiring the id attribute to actually exist.

Removing the attribute results in the Languages section being blank.

https://code.google.com/p/chromium/codesearch#search/&q=file%3Aresources/sett...

[Dan Beam, 2015/09/25 01:50:50]

sux

+        <h2 i18n-content="languagesListTitle"></h2>
+        <div class="item-list">
+          <template is="dom-repeat" items="{{languages.enabledLanguages}}">
+            <paper-item on-tap="onLanguageTap_">
+              <div class="flex">[[item.language.displayName]]</div>
+              <iron-icon icon="done"
+                  hidden$="[[!isUILanguage_(item.language.code, prefs.intl.app_locale.value)]]">
+              </iron-icon>
+              <paper-icon-button icon="settings"></paper-icon-button>
+            </paper-item>
+          </template>
+        </div>
+        <div class="manage">
+          <paper-button i18n-content="manageLanguages"
+              on-tap="onManageLanguagesTap_"></paper-button>
+        </div>
 <if expr="chromeos">
-    <h2 i18n-content="inputMethodsListTitle"></h2>
-    <div class="item-list">
-      <template is="dom-repeat" items="{{dummyInputMethods_}}">
-        <paper-item>
-          <div class="flex">[[item.name]]</div>
-          <iron-icon icon="done"
-              hidden$="[[
-                  !isCurrentInputMethod_(item.id, dummyCurrentInputMethod_)]]">
-          </iron-icon>
-          <paper-icon-button icon="settings"></paper-icon-button>
-        </paper-item>
-      </template>
-    </div>
-    <div class="manage">
-      <paper-button i18n-content="manageInputMethods"></paper-button>
-    </div>
+        <h2 i18n-content="inputMethodsListTitle"></h2>
+        <div class="item-list">
+          <template is="dom-repeat" items="{{languages.inputMethods}}">
+            <paper-item>
+              <div class="flex">[[item.name]]</div>
+              <iron-icon icon="done"
+                  hidden$="[[
+                      !isCurrentInputMethod_(item.id, languages.currentInputMethod)]]">
+              </iron-icon>
+              <paper-icon-button icon="settings"></paper-icon-button>
+            </paper-item>
+          </template>
+        </div>
+        <div class="manage">
+          <paper-button i18n-content="manageInputMethods"></paper-button>
+        </div>
 </if>
-    <h2 i18n-content="spellCheckListTitle"></h2>
-    <div class="layout vertical">
-      <template is="dom-repeat"
-          items="{{getSpellcheckLanguages_(dummyLanguages_)}}">
-        <paper-checkbox checked="{{isSpellcheckEnabled_(item.code,
-            dummySpellcheckDictionaries_)}}"
-            >[[item.displayName]]</paper-checkbox>
-      </template>
-    </div>
-    <div class="manage">
-      <paper-button>Custom spelling</paper-button>
-    </div>
+        <h2 i18n-content="spellCheckListTitle"></h2>
+        <div class="layout vertical">
+          <template is="dom-repeat" items="{{languages.enabledLanguages}}">
+            <paper-checkbox hidden="[[!item.language.supportsSpellcheck]]"
+                checked="[[item.state.spellCheckEnabled]]"
+                on-change="onSpellCheckChange_"
+                >[[item.language.displayName]]</paper-checkbox>
+          </template>
+        </div>
+        <div class="manage">
+          <paper-button i18n-content="manageSpellCheck"></paper-button>
+        </div>
+      </neon-animatable>
+      <neon-animatable id="manage-languages">
+        <settings-subheader i18n-values="page-title:manageLanguagesPageTitle">
+        </settings-subheader>
+        <cr-settings-manage-languages-page id="manageLanguagesPage"
+            prefs="{{prefs}}"></cr-settings-manage-languages-page>

[stevenjb, 2015/09/23 22:27:54]

With your prefs refactor, we won't need the prefs="{{prefs}}" either, correct?

[michaelpg, 2015/09/24 02:15:20]

Correct. For now I'm going to keep following the convention anyway -- if this
page is buggy I'd rather it be easier to track down which CL caused it. In later
changes (once the prefs change has been in more than an hour) I'll see whether
it makes sense to keep prefs here or migrate it into one or more sub-pages.

+      </neon-animatable>
+    </cr-settings-animated-pages>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>