[MD settings] Language settings layout closer to mocks

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

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <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-collapse/iron-collapse.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/cr_elements/cr_expand_button/cr_expand_button.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="language_detail_page.html">
 <link rel="import" href="languages.html">
 <link rel="import" href="manage_languages_page.html">
 
 <if expr="not is_macosx">
 <link rel="import" href="edit_dictionary_page.html">
 </if>
 
 <dom-module id="settings-languages-page">
   <link rel="import" type="css"
       href="chrome://md-settings/settings_shared.css">
-  <link rel="import" type="css" href="languages_page.css">
   <template>
-    <div class="settings-card">
-      <settings-languages languages="{{languages}}"></settings-languages>
-      <settings-animated-pages id="pages" current-route="{{currentRoute}}"
-          section="languages">
-        <neon-animatable id="main">
-          <div class="settings-box block first">
-            <h2 i18n-content="languagesListTitle"></h2>
-            <div>
-              <array-selector id="languageSelector" selected="{{detailLanguage}}"
-                  items="{{languages.enabledLanguages}}"></array-selector>
-              <template is="dom-repeat" items="{{languages.enabledLanguages}}">
-                <paper-item on-tap="onLanguageTap_">
-                  <div class="flex" title="[[item.language.nativeDisplayName]]"
-                      >[[item.language.displayName]]</div>
+    <settings-languages languages="{{languages}}"></settings-languages>
+    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
+        section="languages">
+      <neon-animatable id="main">
+        <div class="settings-box first two-line">
+          <div class="start">
+            <div i18n-content="languagesListTitle"></div>
+            <div class="secondary">[[languagesSecondary_]]</div>
+          </div>
+          <cr-expand-button expanded="{{languagesOpened_}}">
+          </cr-expand-button>
+        </div>
+        <iron-collapse id="collapse" opened="[[languagesOpened_]]">
+          <div class="list-frame vertical-list">
+            <array-selector id="languageSelector"
+                selected="{{detailLanguage}}"
+                items="{{languages.enabledLanguages}}"></array-selector>
+            <template is="dom-repeat" items="{{languages.enabledLanguages}}">
+              <div class="list-item" on-tap="onLanguageTap_">
+                <div class="start">
+                  <div title="[[item.language.nativeDisplayName]]">
+                      [[item.language.displayName]]
 <if expr="chromeos or is_win">
-                  <iron-icon icon="done"
-                      hidden$="[[!isProspectiveUILanguage_(item.language.code, prefs.intl.app_locale.value)]]">
-                  </iron-icon>
+                    <iron-icon icon="done"
+                        hidden$="[[!isProspectiveUILanguage_(item.language.code, prefs.intl.app_locale.value)]]">
+                    </iron-icon>
 </if>
-                  <paper-icon-button icon="settings"
-                      on-tap="onShowLanguageDetailTap_"></paper-icon-button>
-                </paper-item>
-              </template>
+                  </div>
+                </div>
+                <paper-icon-button icon="settings"
+                    on-tap="onShowLanguageDetailTap_"></paper-icon-button>
+              </div>
+            </template>
+            <div class="list-item list-button" i18n-content="manageLanguages"
+                on-tap="onManageLanguagesTap_">
             </div>
-            <div class="manage">
-              <paper-button i18n-content="manageLanguages"
-                  on-tap="onManageLanguagesTap_"></paper-button>
-            </div>
+          </div>
+        </iron-collapse>
 <if expr="chromeos">
-            <h2 i18n-content="inputMethodsListTitle"></h2>
-            <div>
-              <template is="dom-repeat" items="{{languages.inputMethods}}">
-                <paper-item>
-                  <div class="flex">[[item.name]]</div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div i18n-content="inputMethodsListTitle"></div>
+            <div class="secondary">[[inputMethodsSecondary_]]</div>
+          </div>
+          <cr-expand-button expanded="{{inputMethodsOpened_}}">
+          </cr-expand-button>
+        </div>
+        <iron-collapse id="collapse" opened="[[inputMethodsOpened_]]">
+          <div class="list-frame vertical-list">
+            <template is="dom-repeat" items="{{languages.inputMethods}}">
+              <div class="list-item">
+                <div class="start">
+                  <div>[[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>
+                <paper-icon-button icon="settings"></paper-icon-button>
+              </div>
+            </template>
+            <div class="list-item list-button"
+                i18n-content="manageInputMethods">
             </div>
-            <div class="manage">
-              <paper-button i18n-content="manageInputMethods"></paper-button>
-            </div>
+          </div>
+        </iron-collapse>
 </if>
 <if expr="not is_macosx">
-            <h2 i18n-content="spellCheckListTitle"></h2>
-            <div class="layout vertical">
+        <div class="settings-box two-line">
+          <div class="start">
+            <div i18n-content="spellCheckListTitle"></div>
+            <div class="secondary">[[spellCheckSecondary_]]</div>
+          </div>
+          <cr-expand-button expanded="{{spellCheckOpened_}}">
+          </cr-expand-button>
+        </div>
+        <iron-collapse id="collapse" opened="[[spellCheckOpened_]]">
+          <div class="list-frame vertical-list">
+            <div class="list-item">
               <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"
-                  on-tap="onEditDictionaryTap_"></paper-button>
+            <div class="list-item list-button" i18n-content="manageSpellCheck"
+                on-tap="onEditDictionaryTap_">
             </div>
+          </div>
+        </iron-collapse>
 </if>
-          </div>
-        </neon-animatable>
-        <neon-animatable id="manage-languages">
-          <settings-subheader i18n-values="page-title:manageLanguagesPageTitle">
-          </settings-subheader>
-          <settings-manage-languages-page
-              prefs="{{prefs}}"></settings-manage-languages-page>
-        </neon-animatable>
-        <neon-animatable id="language-detail">
-          <settings-subheader id="language-detail-subheader"
-              page-title="[[detailLanguage.language.displayName]]">
-          </settings-subheader>
-          <settings-language-detail-page id="languageDetailPage"
-              prefs="{{prefs}}" detail="[[detailLanguage]]">
-          </settings-language-detail-page>
-        </neon-animatable>
+      </neon-animatable>
+      <neon-animatable id="manage-languages">
+        <settings-subheader i18n-values="page-title:manageLanguagesPageTitle">
+        </settings-subheader>
+        <settings-manage-languages-page
+            prefs="{{prefs}}"></settings-manage-languages-page>
+      </neon-animatable>
+      <neon-animatable id="language-detail">
+        <settings-subheader id="language-detail-subheader"
+            page-title="[[detailLanguage.language.displayName]]">
+        </settings-subheader>
+        <settings-language-detail-page id="languageDetailPage"
+            prefs="{{prefs}}" detail="[[detailLanguage]]">
+        </settings-language-detail-page>
+      </neon-animatable>
 <if expr="not is_macosx">
-        <neon-animatable id="edit-dictionary">
-          <settings-subheader id="edit-dictionary-subheader"
-              i18n-values="page-title:editDictionaryPageTitle">
-          </settings-subheader>
-          <settings-edit-dictionary-page></settings-edit-dictionary-page>
-        </neon-animatable>
+      <neon-animatable id="edit-dictionary">
+        <settings-subheader id="edit-dictionary-subheader"
+            i18n-values="page-title:editDictionaryPageTitle">
+        </settings-subheader>
+        <settings-edit-dictionary-page></settings-edit-dictionary-page>
+      </neon-animatable>
 </if>
-      </settings-animated-pages>
-    </div>
+    </settings-animated-pages>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>