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

chrome/browser/resources/settings/languages_page/languages_page.js

Index: chrome/browser/resources/settings/languages_page/languages_page.js
diff --git a/chrome/browser/resources/settings/languages_page/languages_page.js b/chrome/browser/resources/settings/languages_page/languages_page.js
index cd6cfb8c79e5fa28300b7e676df75702be017100..e73aad0ff84e031a0314f266fc28a0de88b32119 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.js
+++ b/chrome/browser/resources/settings/languages_page/languages_page.js
@@ -71,10 +71,6 @@ Polymer({
     if (!cr.isChromeOS && !cr.isWindows)
       return;
 
-    // Taps on the paper-icon-button are handled in onShowLanguageDetailTap_.
-    if (e.target.tagName == 'PAPER-ICON-BUTTON')
-      return;
-
     // Set the prospective UI language. This won't take effect until a restart.
     if (e.model.item.language.supportsUI)
       this.languageHelper_.setUILanguage(e.model.item.language.code);
@@ -104,6 +100,57 @@ Polymer({
   },
 
   /**
+   * @param {number} index Index of the language in the list of languages.
+   * @param {!Object} change Polymer change object (provided in the HTML so this
+   *     gets called whenever languages.enabled.* changes).

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

doesn't |index| change when the list changes?

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

Not really. It may be a Polymer bug. It seems like functions bound to |index|
get called only once when an item is added (or at the initial construction of
the repeater). the documentation also hints that index gets updated when the
array is sorted or filtered. It doesn't say anything about the index getting
updated when the array changes:
https://www.polymer-project.org/1.0/docs/devguide/templates

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

TIL, thanks.

+   * @return {boolean} True if the given language is the first one in the list
+   *     of languages.
+   * @private
+   */
+  isFirstLanguage_: function(index, change) {
+    return index == 0;
+  },
+
+  /**
+   * Moves the language up in the list.
+   * @param {!{model: !{item: !LanguageState}}} e
+   * @private
+   */
+  onMoveUpTap_: function(e) {

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

nit: put this above onMoveDownTap_

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

Done.

+    this.languageHelper_.moveLanguage(e.model.item.language.code, -1);
+  },
+
+  /**
+   * @param {number} index Index of the language in the list of languages.
+   * @param {!Object} change Polymer change object (provided in the HTML so this
+   *     gets called whenever languages.enabled.* changes).
+   * @return {boolean} True if the given language is the last one in the list of
+   *     languages.
+   * @private
+   */
+  isLastLanguage_: function(index, change) {
+    return index == this.languages.enabled.length - 1;
+  },
+
+  /**
+   * @param {!Object} change Polymer change object (provided in the HTML so this

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

meh, feel free to omit this param altogether, if not though, no need for this
parenthetical.

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

Done.

+   *     gets called whenever languages.enabled.* changes).
+   * @return {boolean} True if there are less than 2 languages.
+   */
+  isHelpTextHidden_: function(change) {
+    return this.languages.enabled.length <= 1;
+  },
+
+  /**
+   * Moves the language down in the list.
+   * @param {!{model: !{item: !LanguageState}}} e
+   * @private
+   */
+  onMoveDownTap_: function(e) {
+    this.languageHelper_.moveLanguage(e.model.item.language.code, 1);
+  },
+
+  /**
    * Opens the Language Detail page for the language.
    * @param {!{model: !{item: !LanguageState}}} e
    * @private