MD Settings: Allow the user to order the list of languages.

chrome/browser/resources/settings/languages_page/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-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/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.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>
 
 <if expr="chromeos">
 <link rel="import" href="manage_input_methods_page.html">
 </if>
 
 <dom-module id="settings-languages-page">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared">
+      .dropdown-content {
+        background: white;
+        box-shadow: 0 2px 6px grey;
+      }
+
+      paper-item:hover {
+        background-color: var(--settings-hover-color);
+      }
+    </style>
     <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{languagesListTitle}</div>
             <div class="secondary">
               [[getProspectiveUILanguageName_(
                     languages, prefs.intl.app_locale.value)]]
             </div>
           </div>
           <cr-expand-button expanded="{{languagesOpened_}}">
           </cr-expand-button>
         </div>
         <iron-collapse id="languagesCollapse" opened="[[languagesOpened_]]">
           <div class="list-frame vertical-list">
+            <span class="list-item"
+                hidden="[[isHelpTextHidden_(languages.enabled.*)]]">
+              <span>$i18n{orderLanguagesInstructions}</span>
+              <a href="$i18n{languagesLearnMoreURL}" target="_blank">
+                $i18n{learnMore}
+              </a>
+            </span>
             <template is="dom-repeat" items="[[languages.enabled]]">
               <div class$="list-item [[getLanguageItemClass_(
                       item.language.code, prefs.intl.app_locale.value)]]"
                   on-tap="onLanguageTap_">
 <if expr="not chromeos and not is_win">
                 <div class="start" title="[[item.language.nativeDisplayName]]">
                   [[item.language.displayName]]
                 </div>
 </if>
 <if expr="chromeos or is_win">
                 <div title="[[item.language.nativeDisplayName]]">
                   [[item.language.displayName]]
                 </div>
                 <div class="middle">
                   <iron-icon icon="settings:done"
                       hidden$="[[!isProspectiveUILanguage_(
                           item.language.code, prefs.intl.app_locale.value)]]">
                   </iron-icon>
                 </div>
 </if>
-                <paper-icon-button icon="cr:settings"
-                    on-tap="onShowLanguageDetailTap_"></paper-icon-button>
+                <paper-icon-button icon="cr:more-vert" toggles
+                    active="{{item.optionsMenuOpened}}">
+                </paper-icon-button>
+                <iron-dropdown opened="{{item.optionsMenuOpened}}"

[michaelpg, 2016/06/21 00:34:42]

I noticed some issues here, but they exist elsewhere in MD Settings, so I opened
crbug.com/621731. We'll update this if we find solutions for that.

[Moe, 2016/06/21 20:10:19]

Acknowledged. I've seen the gray focus ring in MD User Manager too. I CC'ed
myself to the bug to stay tuned.

+                    horizontal-align="right" vertical-align="top">
+                  <div class="dropdown-content">
+                    <paper-item on-tap="onMoveUpTap_" id="moveUp"

[michaelpg, 2016/06/21 00:34:42]

an id in a dom-repeat doesn't make sense (it'll be duplicated, right?)

[Moe, 2016/06/21 20:10:19]

Yep. this is wrong. Changed it to "moveUp-[[item.language.code]]"

[michaelpg, 2016/06/22 01:06:27]

Looks like we only use these IDs for testing, and even there we only use
"#languageDetail-en-US". Seems unnecessary to dynamically generate all of these
in that case. Can we remove these and just put a "languageDetailItem" class on
the third <paper-item>?

[Moe, 2016/06/27 15:00:05]

Done.

+                        hidden="[[isFirstLanguage_(index,
+                                                  languages.enabled.*)]]">
+                      $i18n{moveUp}
+                    </paper-item>
+                    <paper-item on-tap="onMoveDownTap_" id="moveDown"

[michaelpg, 2016/06/21 00:34:42]

id?

[Moe, 2016/06/21 20:10:19]

Done.

+                        hidden="[[isLastLanguage_(index,
+                                                    languages.enabled.*)]]">

[michaelpg, 2016/06/21 00:34:42]

align as on 90

[Moe, 2016/06/21 20:10:19]

Done.

+                      $i18n{moveDown}
+                    </paper-item>
+                    <paper-item id="languageDetail"

[michaelpg, 2016/06/21 00:34:42]

id?

[Moe, 2016/06/21 20:10:19]

Done.

+                        on-tap="onShowLanguageDetailTap_">
+                      $i18n{languageDetail}
+                    </paper-item>
+                  </div>
+                </iron-dropdown>
               </div>
             </template>
             <div class="list-item list-button" on-tap="onManageLanguagesTap_">
               $i18n{manageLanguages}
             </div>
           </div>
         </iron-collapse>
 <if expr="chromeos">
         <div class="settings-box two-line">
           <div class="start">
@@ skipping 93 matching lines @@
       <template is="dom-if" name="edit-dictionary">
         <settings-subpage page-title="$i18n{editDictionaryPageTitle}">
           <settings-edit-dictionary-page></settings-edit-dictionary-page>
         </settings-subpage>
       </template>
 </if>
     </settings-animated-pages>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>