Bug 1746142 - [devtools] Fix keyboard shortcut for showing ShortcutsModal on non-OSX OSes. r=ochameau.

The keyboard shortcut was not set properly (and wasn't unset).
A test is added to ensure this works as expected.

Differential Revision: https://phabricator.services.mozilla.com/D133862

devtools/client/debugger/src/components/App.js

@@ -89,7 +89,7 @@ class App extends Component {
     );
 
     shortcuts.on("Escape", this.onEscape);
-    shortcuts.on("Cmd+/", this.onCommandSlash);
+    shortcuts.on("CmdOrCtrl+/", this.onCommandSlash);
   }
 
   componentWillUnmount() {
@@ -109,6 +109,7 @@ class App extends Component {
     shortcuts.off(L10N.getStr("gotoLineModal.key3"), this.toggleQuickOpenModal);
 
     shortcuts.off("Escape", this.onEscape);
+    shortcuts.off("CmdOrCtrl+/", this.onCommandSlash);
   }
 
   onEscape = e => {

devtools/client/debugger/test/mochitest/browser.ini

@@ -104,6 +104,7 @@ skip-if = true # bug 1607636
 [browser_dbg-inline-exceptions.js]
 [browser_dbg-inspector-integration.js]
 [browser_dbg-keyboard-navigation.js]
+[browser_dbg-keyboard-shortcuts-modal.js]
 [browser_dbg-keyboard-shortcuts.js]
 skip-if = os == "linux" # bug 1351952
 [browser_dbg-layout-changes.js]

devtools/client/debugger/test/mochitest/browser_dbg-keyboard-shortcuts-modal.js

@@ -0,0 +1,47 @@
+/* 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/>. */
+
+/**
+ * Test the keyboard shortcuts modal
+ */
+
+add_task(async function() {
+  const dbg = await initDebuggerWithAbsoluteURL(
+    "data:text/html,Test keyboard shortcuts modal"
+  );
+
+  ok(!getShortcutsModal(dbg), "The shortcuts modal is hidden by default");
+
+  info("Open the modal with the shortcut");
+  pressKeyboardShortcut(dbg);
+
+  const el = await waitFor(() => getShortcutsModal(dbg));
+  const sections = [...el.querySelectorAll(".shortcuts-section h2")].map(
+    h2 => h2.textContent
+  );
+  is(
+    JSON.stringify(sections),
+    JSON.stringify(["Editor", "Stepping", "Search"]),
+    "The modal has the expected sections"
+  );
+
+  info("Close the modal with the shortcut");
+  pressKeyboardShortcut(dbg);
+  await waitFor(() => !getShortcutsModal(dbg));
+  ok(true, "The modal was closed");
+});
+
+function getShortcutsModal(dbg) {
+  return findElementWithSelector(dbg, ".shortcuts-modal");
+}
+
+function pressKeyboardShortcut(dbg) {
+  EventUtils.synthesizeKey(
+    "/",
+    {
+      [Services.appinfo.OS === "Darwin" ? "metaKey" : "ctrlKey"]: true,
+    },
+    dbg.win
+  );
+}