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

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 6135b9301fad03a392b9d2a2fc36a0ce2afdff74..63aef54043702c3f38c3523624aa4d09b5d6e1c6 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -25,7 +25,16 @@
 
 <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">
@@ -43,6 +52,13 @@
         </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)]]"
@@ -63,8 +79,28 @@
                   </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_">