Bug 1824725 - [devtools] Add a global key shortcut to toggle JavaScript tracing. r=devtools-reviewers,fluent-reviewers,flod,nchevobbe

This key will be trigerred even when devtools aren't focused.
We are willing to trigger this key especially when the page is focused.
But the shortcut will only do something when the debugger is opened.

This feature highlights that JS tracing may as well work solely based
on the WebConsole... we may want to followup to make this feature work
across console and debugger.

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

devtools/client/debugger/panel.js

@@ -338,6 +338,12 @@ class DebuggerPanel {
     this._actions.selectThread(cx, threadActorID);
   }
 
+  toggleJavascriptTracing() {
+    this._actions.toggleTracing(
+      this._selectors.getJavascriptTracingLogMethod(this._getState())
+    );
+  }
+
   destroy() {
     this.panelWin.Debugger.destroy();
     this.emit("destroyed");

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

@@ -23,6 +23,8 @@ prefs =
   # fail the test if it occurs during shutdown (unhandled promise
   # rejection).
   dom.ipc.processPrelaunch.enabled=false
+  # This pref has to be set before the process starts
+  devtools.debugger.features.javascript-tracing=true
 
 # Integration tests:
 [browser_dbg-integration-reloading-compressed-sourcemaps.js]

devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer.js

@@ -86,3 +86,78 @@ add_task(async function testPersitentLogMethod() {
   info("Reset back to the default value");
   dbg.actions.setJavascriptTracingLogMethod("console");
 });
+
+add_task(async function testPageKeyShortcut() {
+  // Ensures that the key shortcut emitted in the content process bubbles up to the parent process
+  await pushPref("test.events.async.enabled", true);
+
+  // Fake DevTools being opened by a real user interaction.
+  // Tests are bypassing DevToolsStartup to open the tools by calling gDevTools directly.
+  // By doing so DevToolsStartup considers itself as uninitialized,
+  // whereas we want it to handle the key shortcut we trigger in this test.
+  const DevToolsStartup = Cc["@mozilla.org/devtools/startup-clh;1"].getService(
+    Ci.nsISupports
+  ).wrappedJSObject;
+  DevToolsStartup.initialized = true;
+  registerCleanupFunction(() => {
+    DevToolsStartup.initialized = false;
+  });
+
+  const dbg = await initDebugger("data:text/html,key-shortcut");
+
+  const topLevelThread =
+    dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID;
+  ok(
+    !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThread),
+    "Tracing is disabled on debugger opening"
+  );
+
+  info(
+    "Focus the page in order to assert that the page keeps the focus when enabling the tracer"
+  );
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
+    content.focus();
+  });
+  await waitFor(
+    () => Services.focus.focusedElement == gBrowser.selectedBrowser
+  );
+  is(
+    Services.focus.focusedElement,
+    gBrowser.selectedBrowser,
+    "The tab is still focused before enabling tracing"
+  );
+
+  info("Toggle ON the tracing via the key shortcut from the web page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
+    EventUtils.synthesizeKey(
+      "VK_5",
+      { ctrlKey: true, shiftKey: true },
+      content
+    );
+  });
+
+  info("Wait for tracing to be enabled");
+  await waitForState(dbg, state => {
+    return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThread);
+  });
+
+  is(
+    Services.focus.focusedElement,
+    gBrowser.selectedBrowser,
+    "The tab is still focused after enabling tracing"
+  );
+
+  info("Toggle it back off, wit the same shortcut");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
+    EventUtils.synthesizeKey(
+      "VK_5",
+      { ctrlKey: true, shiftKey: true },
+      content
+    );
+  });
+
+  info("Wait for tracing to be disabled");
+  await waitForState(dbg, state => {
+    return !dbg.selectors.getIsThreadCurrentlyTracing(topLevelThread);
+  });
+});

devtools/client/framework/devtools-browser.js

@@ -320,6 +320,19 @@ var gDevToolsBrowser = (exports.gDevToolsBrowser = {
           trigger: "shortcut",
         });
         break;
+      case "javascriptTracingToggle":
+        const toolbox = await gDevTools.getToolboxForTab(
+          window.gBrowser.selectedTab
+        );
+        if (!toolbox) {
+          break;
+        }
+        const dbg = await toolbox.getPanel("jsdebugger");
+        if (!dbg) {
+          break;
+        }
+        dbg.toggleJavascriptTracing();
+        break;
     }
   },
 

devtools/startup/DevToolsStartup.sys.mjs

@@ -220,6 +220,23 @@ XPCOMUtils.defineLazyGetter(lazy, "KeyShortcuts", function() {
     shortcuts.push(...getProfilerKeyShortcuts());
   }
 
+  // Allow toggling the JavaScript tracing not only from DevTools UI,
+  // but also from the web page when it is focused.
+  if (
+    Services.prefs.getBoolPref(
+      "devtools.debugger.features.javascript-tracing",
+      false
+    )
+  ) {
+    shortcuts.push({
+      id: "javascriptTracingToggle",
+      shortcut: getLocalizedKeyShortcut(
+        "devtools-commandkey-javascript-tracing-toggle"
+      ),
+      modifiers: "control,shift",
+    });
+  }
+
   return shortcuts;
 });
 
@@ -778,6 +795,13 @@ DevToolsStartup.prototype = {
         }
       }
 
+      // Ignore the following key shortcut if DevTools aren't yet opened.
+      // The key shortcut is registered in this core component in order to
+      // work even when the web page is focused.
+      if (key.id == "javascriptTracingToggle" && !this.initialized) {
+        return;
+      }
+
       // Record the timing at which this event started in order to compute later in
       // gDevTools.showToolbox, the complete time it takes to open the toolbox.
       // i.e. especially take `initDevTools` into account.

devtools/startup/locales/en-US/key-shortcuts.ftl

@@ -34,3 +34,5 @@ devtools-commandkey-accessibility-f12 = VK_F12
 devtools-commandkey-profiler-start-stop = VK_1
 # Key pressed to capture a recorded performance profile
 devtools-commandkey-profiler-capture = VK_2
+# Key pressed to toggle the JavaScript tracing
+devtools-commandkey-javascript-tracing-toggle = VK_5