Add accelerator support for panel (#1087)

Author: jbhoosreddy

packages/devtools-modules/src/menu/index.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const { formatKeyShortcut } = require("../utils/text");
 const EventEmitter = require("../utils/event-emitter");
 
 function inToolbox() {
@@ -138,6 +139,9 @@ Menu.prototype._createMenuItems = function(parent) {
       if (item.id) {
         menu.id = item.id;
       }
+      if (item.accelerator) {
+        menuitem.setAttribute("acceltext", formatKeyShortcut(item.accelerator));
+      }
       parent.appendChild(menu);
     } else if (item.type === "separator") {
       let menusep = doc.createElement("menuseparator");
@@ -170,7 +174,9 @@ Menu.prototype._createMenuItems = function(parent) {
       if (item.id) {
         menuitem.id = item.id;
       }
-
+      if (item.accelerator) {
+        menuitem.setAttribute("acceltext", formatKeyShortcut(item.accelerator));
+      }
       parent.appendChild(menuitem);
     }
   });

packages/devtools-modules/src/menu/menu-item.js

@@ -12,7 +12,6 @@
  *   - role String - Define the action of the menu item; when specified the
  *                   click property will be ignored
  *   - sublabel String
- *   - accelerator Accelerator
  *   - icon NativeImage
  *   - position String - This field allows fine-grained definition of the
  *                       specific location within a given menu.
@@ -35,6 +34,8 @@
  *      will be automatically converted to one using Menu.buildFromTemplate.
  *    Boolean visible
  *      If false, the menu item will be entirely hidden.
+ *    String accelerator
+ *      If specified, will be used as accelerator text for MenuItem
  */
 function MenuItem({
     accesskey = null,
@@ -46,6 +47,7 @@ function MenuItem({
     submenu = null,
     type = "normal",
     visible = true,
+    accelerator = "",
 } = { }) {
   this.accesskey = accesskey;
   this.checked = checked;
@@ -56,6 +58,7 @@ function MenuItem({
   this.submenu = submenu;
   this.type = type;
   this.visible = visible;
+  this.accelerator = accelerator;
 }
 
 module.exports = MenuItem;

packages/devtools-modules/src/utils/text.js

@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+/**
+ * Utils for keyboard command strings
+ * @module utils/text
+ */
+import Services from "devtools-services";
+const { appinfo } = Services;
+
+const isMacOS = appinfo.OS === "Darwin";
+
+/**
+ * Formats key for use in tooltips
+ * For macOS we use the following unicode
+ *
+ * cmd ⌘ = \u2318
+ * shift ⇧ – \u21E7
+ * option (alt) ⌥ \u2325
+ *
+ * For Win/Lin this replaces CommandOrControl or CmdOrCtrl with Ctrl
+ *
+ * @memberof utils/text
+ * @static
+ */
+export function formatKeyShortcut(shortcut) {
+    if (isMacOS) {
+        return shortcut
+            .replace(/Shift\+/g, "\u21E7")
+            .replace(/Command\+|Cmd\+/g, "\u2318")
+            .replace(/CommandOrControl\+|CmdOrCtrl\+/g, "\u2318")
+            .replace(/Alt\+/g, "\u2325");
+    }
+    return shortcut
+        .replace(/CommandOrControl\+|CmdOrCtrl\+/g, "Ctrl")
+        .replace(/Shift\+/g, "Shift");
+}