Use one instance of language settings detail menu for all languages

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

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview 'settings-languages-page' is the settings page
  * for language and input method settings.
  */
 (function() {
 'use strict';
@@ skipping 33 matching lines @@
      * The language to display the details for.
      * @type {!LanguageState|undefined}
      * @private
      */
     detailLanguage_: Object,
 
     /** @private */
     showAddLanguagesDialog_: Boolean,
   },
 
+  ready: function() {
+    this.menu_ = /** @type {CrSharedMenuElement} */(this.$$('cr-shared-menu'));
+  },
+
   /**
    * Handler for clicking a language on the main page, which selects the
    * language as the prospective UI language on Chrome OS and Windows.
    * @param {!Event} e The tap event.
    */
   onLanguageTap_: function(e) {
     // Only change the UI language on platforms that allow it.
     if ((!cr.isChromeOS && !cr.isWindows) || loadTimeData.getBoolean('isGuest'))
       return;
 
     // Set the prospective UI language. This won't take effect until a restart.
     var tapEvent = /** @type {!{model: !{item: !LanguageState}}} */(e);
     if (tapEvent.model.item.language.supportsUI)
       this.languageHelper.setUILanguage(tapEvent.model.item.language.code);
   },
 
   /**
-   * Stops tap events on the language options menu, its trigger, or its items
-   * from bubbling up to the language itself. Tap events on the language are
-   * handled in onLanguageTap_.
-   * @param {!Event} e The tap event.
-   */
-  stopPropagationHandler_: function(e) {
-    e.stopPropagation();
-  },
-
-  /**
    * Handler for enabling or disabling spell check.
    * @param {!{target: Element, model: !{item: !LanguageState}}} e
    */
   onSpellCheckChange_: function(e) {
     this.languageHelper.toggleSpellCheck(e.model.item.language.code,
                                          e.target.checked);
   },
 
   /** @private */
   onBackTap_: function() {
     this.$.pages.back();
   },
 
   /**
    * Stamps and opens the Add Languages dialog, registering a listener to
    * disable the dialog's dom-if again on close.
    * @private
    */
   onAddLanguagesTap_: function() {
     this.showAddLanguagesDialog_ = true;
     this.async(function() {
       var dialog = this.$$('settings-add-languages-dialog');
       dialog.addEventListener('close', function() {
         this.showAddLanguagesDialog_ = false;
       }.bind(this));
     });
   },
 
   /**
-   * @param {number} index Index of the language in the list of languages.
-   * @param {!Object} change Polymer change object for languages.enabled.*.
-   * @return {boolean} True if the given language is the first one in the list
-   *     of languages.
+   * @return {boolean} True if |language| is first in the list of enabled
+   *     languages. Used to hide the "Move up" option.
    * @private
    */
-  isFirstLanguage_: function(index, change) {
-    return index == 0;
+  isFirstLanguage_: function(language) {

[stevenjb, 2016/08/25 16:36:57]

@param for language

[michaelpg, 2016/08/26 22:16:21]

Done.

+    return language == this.languages.enabled[0];
   },
 
   /**
-   * @param {number} index Index of the language in the list of languages.
-   * @param {!Object} change Polymer change object for languages.enabled.*.
-   * @return {boolean} True if the given language is the last one in the list of
-   *     languages.
+   * @return {boolean} True if |language| is last in the list of enabled
+   *     languages. Used to hide the "Move down" option.
    * @private
    */
-  isLastLanguage_: function(index, change) {
-    return index == this.languages.enabled.length - 1;
+  isLastLanguage_: function(language) {

[stevenjb, 2016/08/25 16:36:57]

ditto

[michaelpg, 2016/08/26 22:16:20]

Done.

+    return language == this.languages.enabled.slice(-1)[0];

[stevenjb, 2016/08/25 16:36:57]

eww, but I guess that's JS for you. (I did a sear and, it seems like this is
what people do, efficiency be damned).

[michaelpg, 2016/08/26 22:16:20]

pretty sure creating a 1-length array containing a pointer isn't the bottleneck
of opening the menu :-)

   },
 
   /**
    * @param {!Object} change Polymer change object for languages.enabled.*.
    * @return {boolean} True if there are less than 2 languages.
    */
   isHelpTextHidden_: function(change) {
     return this.languages.enabled.length <= 1;
   },
 
   /**
    * Moves the language up in the list.
-   * @param {!{model: !{item: !LanguageState}}} e
    * @private
    */
   onMoveUpTap_: function(e) {

[stevenjb, 2016/08/25 16:36:57]

elim (e) if unused

[michaelpg, 2016/08/26 22:16:20]

Done.

-    this.languageHelper.moveLanguage(e.model.item.language.code, -1);
+    this.menu_.closeMenu();
+    this.languageHelper.moveLanguage(this.detailLanguage_.language.code, -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);
+    this.menu_.closeMenu();
+    this.languageHelper.moveLanguage(this.detailLanguage_.language.code, 1);
   },
 
   /**
    * Disables the language.
-   * @param {!{model: !{item: !LanguageState}}} e
    * @private
    */
   onRemoveLanguageTap_: function(e) {
-    this.languageHelper.disableLanguage(e.model.item.language.code);
+    this.menu_.closeMenu();
+    this.languageHelper.disableLanguage(this.detailLanguage_.language.code);
   },
 
   /**
    * Opens the Language Detail page for the language.
-   * @param {!{model: !{item: !LanguageState}}} e
    * @private
    */
-  onShowLanguageDetailTap_: function(e) {
-    this.detailLanguage_ = e.model.item;
+  onShowLanguageDetailTap_: function() {
+    this.menu_.closeMenu();
     settings.navigateTo(settings.Route.LANGUAGES_DETAIL);
   },
 
   /**
    * Opens the Manage Input Methods page.
    * @private
    */
   onManageInputMethodsTap_: function() {
     assert(cr.isChromeOS);
     settings.navigateTo(settings.Route.INPUT_METHODS);
@@ skipping 158 matching lines @@
 
   /**
    * HACK(michaelpg): This is necessary to show the list when navigating to
    * the sub-page. Remove this function when PolymerElements/neon-animation#60
    * is fixed.
    * @param {string} tagName Name of the element containing the <iron-list>.
    */
   forceRenderList_: function(tagName) {
     this.$$(tagName).$$('iron-list').fire('iron-resize');
   },
+
+  toggleMenu_: function(e) {

[stevenjb, 2016/08/25 16:36:57]

@param for e

[michaelpg, 2016/08/26 22:16:20]

Done.

+    e.stopPropagation();  // Prevent the tap event from closing the menu.
+
+    this.detailLanguage_ = e.model.item;
+    this.menu_.toggleMenu(e.target, e.model.item);
+  },
 });
 })();