Cleanup ContextMenus

docs/local-development.md

@@ -5,7 +5,8 @@
   * [L10N](#l10n)
   * [RTL](#rtl)
 * [Prefs](#prefs)
-* [SVGs](#svgs)
+* [https://github.com/devtools-html/debugger.html#development-guide](#svgs)
+* [ContextMenus](#context-menu)
 * [Flow](#flow)
 * [Logging](#logging)
 * [Testing](#testing)
@@ -63,7 +64,7 @@ L10N.getStr("scopes.header")
 L10N.getFormatStr("editor.searchResults", index + 1, count)
 ```
 
-Translated strings are added to the [debugger properties][debugger-properties] file. 
+Translated strings are added to the [debugger properties][debugger-properties] file.
 
 #### RTL
 
@@ -124,7 +125,7 @@ const { prefs } = require("./utils/prefs");
 prefs.clientSourceMapsEnabled = false;
 ```
 
-### SVGs
+### https://github.com/devtools-html/debugger.html#development-guide
 
 We use SVGs in DevTools because they look good at any resolution.
 
@@ -201,6 +202,66 @@ index 5996700..bb828d8 100644
 +}
 ```
 
+### Context Menus
+
+The Debugger can create its own [context menus][context-menus]. In the launchpad, it uses a [shimmed][shimmed-context-menus] context menu library. In Firefox, it has special permission to create native context menus.
+
+Here's a simple example:
+
+```js
+const { showMenu } = require("devtools-launchpad");
+
+function onClick(event) {
+  const copySourceUrlLabel = L10N.getStr("copySourceUrl");
+  const copySourceUrlKey = L10N.getStr("copySourceUrl.accesskey");
+
+  showMenu(event, [{
+    id: "node-menu-copy-source",
+    label: copySourceUrlLabel,
+    accesskey: copySourceUrlKey,
+    disabled: false,
+    click: () => copyToClipboad(url),
+    hidden: () => url.match(/chrome:\/\//)
+  }]);
+}
+```
+
+Notes:
+
+- `id` helps screen readers and accessibility
+- `label` menu item label shown
+- `accesskey` keyboard shortcut used
+- `disabled` inert item
+- `click` on click callback
+- `hidden` dynamically hide items
+
+#### Context Menu Groups
+
+You can use a menu item separator to create menu groups.
+
+```js
+const { showMenu } = require("devtools-launchpad");
+
+function onClick(event) {
+  const copySourceUrlLabel = L10N.getStr("copySourceUrl");
+  const copySourceUrlKey = L10N.getStr("copySourceUrl.accesskey");
+
+  const menuItem = {
+    id: "node-menu-copy-source",
+    label: copySourceUrlLabel,
+    accesskey: copySourceUrlKey,
+    disabled: false,
+    click: () => copyToClipboad(url),
+    hidden: () => url.match(/chrome:\/\//)
+  }
+
+  showMenu(event, [
+    menuItem,
+    { item: { type: "separator" } },
+  ]);
+}
+```
+
 ### Flow
 
 - [Adding flow to a file](./flow.md#adding-flow-to-a-file)
@@ -539,3 +600,6 @@ your questions on [slack][slack].
 [Client Adapters]: https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-client-adapters
 [Modules]: https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-modules
 [Source Maps]: https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-source-map
+
+[shimmed-context-menus]: https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/src/menu.js
+[context-menus]: https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-modules/client/framework/menu.js

src/components/Editor/EditorMenu.js

@@ -1,4 +1,4 @@
-const { showMenu } = require("../shared/menu");
+const { showMenu } = require("devtools-launchpad");
 const { isEnabled } = require("devtools-config");
 const { isOriginalId } = require("devtools-source-map");
 const { copyToTheClipboard } = require("../../utils/clipboard");

src/components/Editor/GutterMenu.js

@@ -1,4 +1,4 @@
-const { showMenu } = require("../shared/menu");
+const { showMenu } = require("devtools-launchpad");
 
 function GutterMenu(
   {

src/components/Editor/Tabs.js

@@ -19,7 +19,7 @@ const PaneToggleButton = createFactory(
 );
 import Svg from "../shared/Svg";
 const Dropdown = createFactory(require("../shared/Dropdown").default);
-import { showMenu, buildMenu } from "../shared/menu";
+import { showMenu, buildMenu } from "devtools-launchpad";
 import debounce from "lodash/debounce";
 import { formatKeyShortcut } from "../../utils/text";
 import "./Tabs.css";

src/components/SecondaryPanes/Frames.js

@@ -10,7 +10,7 @@ import get from "lodash/get";
 
 const { getFrames, getSelectedFrame, getSource } = require("../../selectors");
 
-import { showMenu } from "../shared/menu";
+import { showMenu } from "devtools-launchpad";
 import { copyToTheClipboard } from "../../utils/clipboard";
 import classNames from "classnames";
 

src/components/SourcesTree.js

@@ -25,7 +25,7 @@ import {
 const ManagedTree = createFactory(require("./shared/ManagedTree"));
 import actions from "../actions";
 import Svg from "./shared/Svg";
-import { showMenu } from "./shared/menu";
+import { showMenu } from "devtools-launchpad";
 import { copyToTheClipboard } from "../utils/clipboard";
 import { throttle } from "../utils/utils";