MD Settings: Implementing modal popup/action menus.

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 167 matching lines @@
    * @private
    */
   onUILanguageChange_: function(e) {
     if (e.target.checked) {
       this.languageHelper.setUILanguage(this.detailLanguage_.language.code);
     } else if (this.detailLanguage_.language.code ==
         this.languageHelper.getProspectiveUILanguage()) {
       // Reset the chosen UI language to the actual UI language.
       this.languageHelper.resetUILanguage();
     }
-    /** @type {!CrSharedMenuElement} */(this.$.menu.get()).closeMenu();
+    /** @type {!SettingsActionMenuElement} */(this.$.menu.get()).close();
   },
 
    /**
    * @param {!chrome.languageSettingsPrivate.Language} language
    * @param {string} targetLanguageCode The default translate target language.
    * @return {boolean} True if the translate checkbox should be disabled.
    * @private
    */
   disableTranslateCheckbox_: function(language, targetLanguageCode) {
     if (!language.supportsTranslate)
       return true;
 
     return this.languageHelper.convertLanguageCodeForTranslate(language.code) ==
         targetLanguageCode;
   },
 
   /**
    * Handler for changes to the translate checkbox.
    * @param {!{target: !PaperCheckboxElement}} e
    * @private
    */
   onTranslateCheckboxChange_: function(e) {
     if (e.target.checked) {
       this.languageHelper.enableTranslateLanguage(
           this.detailLanguage_.language.code);
     } else {
       this.languageHelper.disableTranslateLanguage(
           this.detailLanguage_.language.code);
     }
-    /** @type {!CrSharedMenuElement} */(this.$.menu.get()).closeMenu();
+    /** @type {!SettingsActionMenuElement} */(this.$.menu.get()).close();
   },
 
   /**
    * Returns "complex" if the menu includes checkboxes, which should change the
    * spacing of items and show a separator in the menu.
    * @param {boolean} translateEnabled
    * @return {string}
    */
   getMenuClass_: function(translateEnabled) {
     if (translateEnabled || cr.isChromeOS || cr.isWindows)
       return 'complex';
     return '';
   },
 
   /**
    * Moves the language to the top of the list.
    * @private
    */
   onMoveToTopTap_: function() {
-    /** @type {!CrSharedMenuElement} */(this.$.menu.get()).closeMenu();
+    /** @type {!SettingsActionMenuElement} */(this.$.menu.get()).close();
     this.languageHelper.moveLanguageToFront(this.detailLanguage_.language.code);
   },
 
   /**
    * Moves the language up in the list.
    * @private
    */
   onMoveUpTap_: function() {
-    /** @type {!CrSharedMenuElement} */(this.$.menu.get()).closeMenu();
+    /** @type {!SettingsActionMenuElement} */(this.$.menu.get()).close();
     this.languageHelper.moveLanguage(this.detailLanguage_.language.code, -1);
   },
 
   /**
    * Moves the language down in the list.
    * @private
    */
   onMoveDownTap_: function() {
-    /** @type {!CrSharedMenuElement} */(this.$.menu.get()).closeMenu();
+    /** @type {!SettingsActionMenuElement} */(this.$.menu.get()).close();
     this.languageHelper.moveLanguage(this.detailLanguage_.language.code, 1);
   },
 
   /**
    * Disables the language.
    * @private
    */
   onRemoveLanguageTap_: function() {
-    /** @type {!CrSharedMenuElement} */(this.$.menu.get()).closeMenu();
+    /** @type {!SettingsActionMenuElement} */(this.$.menu.get()).close();
     this.languageHelper.disableLanguage(this.detailLanguage_.language.code);
   },
 
   /**
    * Opens the Manage Input Methods page.
    * @private
    */
   onManageInputMethodsTap_: function() {
     assert(cr.isChromeOS);
     settings.navigateTo(settings.Route.INPUT_METHODS);
@@ skipping 166 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');
   },
 
   /**
-   * Opens or closes the shared menu at the location of the tapped item.
    * @param {!Event} e
    * @private
    */
-  toggleMenu_: function(e) {
-    e.stopPropagation();  // Prevent the tap event from closing the menu.
-
+  onDotsTap_: function(e) {
     this.detailLanguage_ =
         /** @type {!{model: !{item: !LanguageState}}} */(e).model.item;
 
     // Ensure the template has been stamped.
-    var menu = /** @type {?CrSharedMenuElement} */(this.$.menu.getIfExists());
+    var menu = /** @type {?SettingsActionMenuElement} */(
+        this.$.menu.getIfExists());
     if (!menu) {
-      menu = /** @type {!CrSharedMenuElement} */(this.$.menu.get());
+      menu = /** @type {!SettingsActionMenuElement} */(this.$.menu.get());
       this.initializeMenu_(menu);
     }
 
-    menu.toggleMenu(/** @type {!Element} */(e.target));
+    menu.showAt(/** @type {!Element} */ (e.target));
   },
 
   /**
    * Applies Chrome OS session tweaks to the menu.
-   * @param {!CrSharedMenuElement} menu
+   * @param {!SettingsActionMenuElement} menu
    * @private
    */
   initializeMenu_: function(menu) {
     // In a CrOS multi-user session, the primary user controls the UI language.
     // TODO(michaelpg): The language selection should not be hidden, but should
     // show a policy indicator. crbug.com/648498
     if (this.isSecondaryUser_())
       menu.querySelector('#uiLanguageItem').hidden = true;
 
     // The UI language choice doesn't persist for guests.
@@ skipping 11 matching lines @@
   onRestartTap_: function() {
 <if expr="chromeos">
     settings.LifetimeBrowserProxyImpl.getInstance().signOutAndRestart();
 </if>
 <if expr="not chromeos">
     settings.LifetimeBrowserProxyImpl.getInstance().restart();
 </if>
   },
 });
 })();