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

<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/html/polymer.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="/languages_page/languages.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-add-languages-dialog">
  <template>
    <style include="settings-shared">
      dialog {
        display: flex;
        flex-direction: column;
      }

      .body {
        display: flex;
        flex-direction: column;
        max-height: 250px;
        overflow: auto;
      }

      .ripple-padding {
        /* Create a little extra space for checkbox ink ripple to flow into. */
        padding-left: 20px;
      }
    </style>
    <dialog is="cr-dialog" id="dialog">
      <div class="title">$i18n{addLanguagesDialogTitle}</div>
      <div class="body">
        <!-- TODO(michaelpg): Dynamic language search/filtering. -->
        <iron-list class="ripple-padding" scroll-target="[[$$('.body')]]"
            items="[[getAvailableLanguages_(
                languages.supported, languages.enabled.*)]]">
          <template>
            <paper-checkbox class="list-item" checked="[[willAdd_(item.code)]]"
                title$="[[item.nativeDisplayName]]"
                on-change="onLanguageCheckboxChange_">
              [[item.displayName]]
            </paper-checkbox>
          </template>
        </iron-list>
      </div>
      <div class="button-container">
        <div class="action-buttons">
          <paper-button class="cancel-button" on-tap="onCancelButtonTap_">
            $i18n{cancel}
          </paper-button>
          <paper-button class="action-button" on-tap="onActionButtonTap_"
              disabled="[[disableActionButton_]]">
            $i18n{add}
          </paper-button>
        </div>
      </div>
    </dialog>
  </template>
  <script src="add_languages_dialog.js"></script>
</dom-module>