Bug 1222295 - Convert ringtones menu to use gaia-menu. r=squibblyflab…

…betydoo, a=mahe

apps/ringtones/js/actions_menu.js

@@ -15,11 +15,9 @@ function ActionsMenu(menuElement) {
     return menuElement.querySelector('button[data-action="' + action + '"]');
   }
 
-  this._cancelButton = getButton('cancel');
   this._shareButton = getButton('share');
   this._deleteButton = getButton('delete');
 
-  this._cancelButton.addEventListener('click', this._cancel.bind(this));
   this._shareButton.addEventListener('click', this._share.bind(this));
   this._deleteButton.addEventListener('click', this._delete.bind(this));
 }
@@ -52,31 +50,14 @@ ActionsMenu.prototype = {
     return !this._menuElement.hidden;
   },
 
-  /**
-   * Close the actions menu.
-   */
-  close: function() {
-    this._menuElement.hidden = true;
-  },
-
-  /**
-   * Handle clicking the "cancel" button.
-   *
-   * @param {Event} event The event.
-   */
-  _cancel: function(event) {
-    this.close();
-    this._finish('cancel');
-  },
-
   /**
    * Handle clicking the "share" button.
    *
    * @param {Event} event The event.
    */
   _share: function(event) {
     var self = this;
-    this.close();
+    this._menuElement.hide();
 
     this._tone.getBlob().then(function(blob) {
       var activity = new MozActivity({
@@ -110,7 +91,7 @@ ActionsMenu.prototype = {
    */
   _delete: function(event) {
     var self = this;
-    this.close();
+    this._menuElement.hide();
 
     var messageKey = 'delete-message';
     if (self._inUseAs.length) {

apps/ringtones/manage.html

@@ -4,7 +4,6 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <meta charset="utf-8" />
     <title>Manage Ringtones</title>
-    <link rel="stylesheet" type="text/css" href="shared/style/action_menu.css"/>
     <link rel="stylesheet" type="text/css" href="shared/style/confirm.css"/>
     <link rel="stylesheet" type="text/css" href="shared/style/status.css">
     <link rel="stylesheet" type="text/css" href="shared/style/lists.css"/>
@@ -19,6 +18,7 @@
     <link rel="localization" href="/shared/locales/branding/branding.{locale}.properties">
     <link rel="localization" href="/shared/locales/sounds/sounds.{locale}.properties">
     <link rel="localization" href="locales/ringtones.{locale}.properties">
+    <link rel="localization" href="/shared/elements/gaia_menu/locales/gaia_menu.{locale}.properties">
     <script type="text/javascript" src="shared/js/l10n.js"></script>
 
     <script type="text/javascript" defer src="shared/js/sanitizer.js"></script>
@@ -35,7 +35,7 @@
     <script defer type="text/javascript" src="shared/js/component_utils.js"></script>
     <script defer type="text/javascript" src="shared/elements/gaia_subheader/script.js"></script>
     <script defer src="shared/elements/gaia_checkbox/script.js"></script>
-
+    <script defer src="shared/elements/gaia_menu/script.js"></script>
 
     <script type="text/javascript" defer src="js/manage_templates.js"></script>
     <script type="text/javascript" defer src="js/system_tones.js"></script>
@@ -58,14 +58,10 @@ <h1 data-l10n-id="manage-title-2"></h1>
       <article id="list-parent"></article>
     </section>
 
-    <form id="ringtone-actions" role="dialog" data-type="action" hidden>
+    <gaia-menu id="ringtone-actions" hidden>
       <header></header>
-      <menu>
-        <button type="button" data-action="share"></button>
-        <button type="button" data-action="delete"></button>
-        <button type="button" data-action="cancel"
-                data-l10n-id="actions-cancel"></button>
-      </menu>
-    </form>
+      <button data-action="share"></button>
+      <button data-action="delete"></button>
+    </gaia-menu>
   </body>
 </html>

apps/ringtones/test/marionette/lib/ringtones.js

@@ -41,7 +41,7 @@ function ActionsMenu(client) {
 }
 
 ActionsMenu.Selectors = Object.freeze({
-  menu: 'form#ringtone-actions',
+  menu: 'gaia-menu#ringtone-actions',
   shareButton: 'button[data-action="share"]',
   deleteButton: 'button[data-action="delete"]',
   cancelButton: 'button[data-action="cancel"]',