MD Settings: Polish languages pages.

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-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/iron-list/iron-list.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-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">
+      <div  class="start">

[dschuyler, 2016/04/06 21:45:50]

Is that extra space intentional?

[michaelpg, 2016/04/07 14:55:47]

Done.

         <h2 i18n-content="enabledLanguages"></h2>
-        <div class="list-frame vertical-list">
+        <div id="languages-list" class="list-frame vertical-list">

[dschuyler, 2016/04/06 21:45:50]

The style doc (below) suggests using camel
case id names. 

https://docs.google.com/document/d/1G0t519y_cSW4etXVwruR145abZH0N5-9R7JyejzVo...

[michaelpg, 2016/04/07 14:55:47]

Removed.

           <template is="dom-repeat" items="{{languages.enabledLanguages}}">
             <div class="list-item">
-              <div class="language-name start"
-                  title="[[item.language.nativeDisplayName]]">
+              <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>
             </div>
           </template>
         </div>
         <h2 i18n-content="allLanguages"></h2>
         <div class="list-frame vertical-list">
           <iron-list items="{{availableLanguages_}}" as="item">
             <template>
-              <div class="list-item" on-tap="onAddLanguageTap_">
-                <div class="language-name">
-                  <span>[[item.displayName]]</span> -
-                  <span>[[item.nativeDisplayName]]</span>
-                </div>
-                <iron-icon icon="done" hidden$="[[!item.enabled]]">
-                </iron-icon>
+              <div class="list-item">
+                <paper-checkbox checked="[[item.enabled]]"
+                    title$="[[item.nativeDisplayName]]"
+                    disabled="[[!canRemoveLanguage_(item.code, prefs.intl.app_locale.value)]]"

[dschuyler, 2016/04/06 21:45:50]

I think we are now able to wrap these lines,
can this line be wrapped?

[michaelpg, 2016/04/07 14:55:47]

Done. Not sure whether they should get an extra 4 spaces, though.

+                    on-change="onLanguageCheckboxChange_">
+                  [[item.displayName]]
+                </paper-checkbox>
               </div>
             </template>
           </iron-list>
         </div>
       </div>
     </div>
   </template>
   <script src="manage_languages_page.js"></script>
 </dom-module>