Bug 1444301 - Add accelerator support to MenuItem component; r?jryans draft
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:21 +0900
changeset 778570 6ce5cbaf96242fc5318dea0e0143bea426404abf
parent 778569 96b60ce814a9eaff3640b5ca934d7902bd69808f
child 778571 12f8007c566a8a15355523a431589ba218acb659
push id105521
push userbbirtles@mozilla.com
push dateFri, 06 Apr 2018 14:07:54 +0000
reviewersjryans
bugs1444301
milestone61.0a1
Bug 1444301 - Add accelerator support to MenuItem component; r?jryans MozReview-Commit-ID: IMbZ73ty5cM
devtools/client/framework/components/toolbox-toolbar.js
devtools/client/framework/menu-item.js
devtools/client/framework/menu.js
--- a/devtools/client/framework/components/toolbox-toolbar.js
+++ b/devtools/client/framework/components/toolbox-toolbar.js
@@ -277,17 +277,17 @@ function showMeatballMenu(menuButton, {h
   if (menu.items.length) {
     menu.append(new MenuItem({ type: "separator" }));
   }
 
   // Settings
   menu.append(new MenuItem({
     id: "toolbox-meatball-menu-settings",
     label: L10N.getStr("toolbox.meatballMenu.settings.label"),
-    // TODO: Show "F1" acceltext once MenuItem supports it.
+    accelerator: L10N.getStr("toolbox.help.key"),
     click: () => selectTool("options"),
   }));
 
   const rect = menuButton.getBoundingClientRect();
   const screenX = menuButton.ownerDocument.defaultView.mozInnerScreenX;
   const screenY = menuButton.ownerDocument.defaultView.mozInnerScreenY;
 
   // Display the popup below the button.
--- a/devtools/client/framework/menu-item.js
+++ b/devtools/client/framework/menu-item.js
@@ -18,16 +18,24 @@
  *   - sublabel String
  *   - accelerator Accelerator
  *   - icon NativeImage
  *   - position String - This field allows fine-grained definition of the
  *                       specific location within a given menu.
  *
  * Implemented features:
  *  @param Object options
+ *    String accelerator
+ *      Text that appears beside the menu label to indicate the shortcut key
+ *      (accelerator key) to use to invoke the command.
+ *      Unlike the Electron API, this is a label only and does not actually
+ *      register a handler for the key.
+ *    String accesskey [non-standard]
+ *      A single character used as the shortcut key. This should be one of the
+ *      characters that appears in the label.
  *    Function click
  *      Will be called with click(menuItem, browserWindow) when the menu item
  *       is clicked
  *    String type
  *      Can be normal, separator, submenu, checkbox or radio
  *    String label
  *    Boolean enabled
  *      If false, the menu item will be greyed out and unclickable.
@@ -36,27 +44,29 @@
  *    Menu submenu
  *      Should be specified for submenu type menu items. If submenu is specified,
  *      the type: 'submenu' can be omitted. If the value is not a Menu then it
  *      will be automatically converted to one using Menu.buildFromTemplate.
  *    Boolean visible
  *      If false, the menu item will be entirely hidden.
  */
 function MenuItem({
+    accelerator = null,
     accesskey = null,
     checked = false,
     click = () => {},
     disabled = false,
     hover = () => {},
     id = null,
     label = "",
     submenu = null,
     type = "normal",
     visible = true,
 } = { }) {
+  this.accelerator = accelerator;
   this.accesskey = accesskey;
   this.checked = checked;
   this.click = click;
   this.disabled = disabled;
   this.hover = hover;
   this.id = id;
   this.label = label;
   this.submenu = submenu;
--- a/devtools/client/framework/menu.js
+++ b/devtools/client/framework/menu.js
@@ -112,16 +112,19 @@ Menu.prototype._createMenuItems = functi
       item.submenu._createMenuItems(menupopup);
 
       let menu = doc.createElement("menu");
       menu.appendChild(menupopup);
       menu.setAttribute("label", item.label);
       if (item.disabled) {
         menu.setAttribute("disabled", "true");
       }
+      if (item.accelerator) {
+        menu.setAttribute("acceltext", item.accelerator);
+      }
       if (item.accesskey) {
         menu.setAttribute("accesskey", item.accesskey);
       }
       if (item.id) {
         menu.id = item.id;
       }
       parent.appendChild(menu);
     } else if (item.type === "separator") {
@@ -144,16 +147,19 @@ Menu.prototype._createMenuItems = functi
         menuitem.setAttribute("type", "radio");
       }
       if (item.disabled) {
         menuitem.setAttribute("disabled", "true");
       }
       if (item.checked) {
         menuitem.setAttribute("checked", "true");
       }
+      if (item.accelerator) {
+        menuitem.setAttribute("acceltext", item.accelerator);
+      }
       if (item.accesskey) {
         menuitem.setAttribute("accesskey", item.accesskey);
       }
       if (item.id) {
         menuitem.id = item.id;
       }
 
       parent.appendChild(menuitem);