Bug 1848159 - [devtools] Introduce an option to start tracing on next page load. r=devtools-reviewers,devtools-backward-compat-reviewers,nchevobbe

Because the JavaScript tracer is currently running in each process/thread/target actor independently,
it is more complex to make it record across navigations as it may be spawn in a distinct process.

While it is fine for stdout and webconsole outputs (we could just spawn many concurrent tracers in each process),
this is more complex for the experimental "profiler" output.
For now, the profiler output automatically stops on target destruction and will open the profiler result.

By having an option to start recording on next page load, it prevents starting the tracer and prevent logging traces
for the current WindowGlobal. It should help focus on the new document.
For the profiler output, it prevents having the profiler to show up for the previous WindowGlobal.

Sideby tweak:
* stop passing logMethod and consider, like other option to be coming from the preferences.
* fix confusing state when debugging a page running in the same process.

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

Author: ochameau

devtools/client/debugger/src/actions/tracing.js

@@ -2,20 +2,20 @@
  * 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/>. */
 
-import { getIsJavascriptTracingEnabled } from "../selectors/index";
+import {
+  getIsJavascriptTracingEnabled,
+  getJavascriptTracingLogMethod,
+} from "../selectors/index";
 import { PROMISE } from "./utils/middleware/promise";
 
 /**
- * Toggle ON/OFF Javascript tracing for all targets,
- * using the specified log method.
- *
- * @param {string} logMethod
- *        Can be "stdout" or "console". See TracerActor.
+ * Toggle ON/OFF Javascript tracing for all targets.
  */
-export function toggleTracing(logMethod) {
+export function toggleTracing() {
   return async ({ dispatch, getState, client, panel }) => {
     // For now, the UI can only toggle all the targets all at once.
     const isTracingEnabled = getIsJavascriptTracingEnabled(getState());
+    const logMethod = getJavascriptTracingLogMethod(getState());
 
     // Automatically open the split console when enabling tracing to the console
     if (!isTracingEnabled && logMethod == "console") {
@@ -24,7 +24,7 @@ export function toggleTracing(logMethod) {
 
     return dispatch({
       type: "TOGGLE_TRACING",
-      [PROMISE]: client.toggleTracing(logMethod),
+      [PROMISE]: client.toggleTracing(),
       enabled: !isTracingEnabled,
     });
   };

devtools/client/debugger/src/actions/ui.js

@@ -226,11 +226,9 @@ export function copyToClipboard(location) {
 }
 
 export function setJavascriptTracingLogMethod(value) {
-  return ({ dispatch, getState }) => {
-    dispatch({
-      type: "SET_JAVASCRIPT_TRACING_LOG_METHOD",
-      value,
-    });
+  return {
+    type: "SET_JAVASCRIPT_TRACING_LOG_METHOD",
+    value,
   };
 }
 
@@ -246,6 +244,12 @@ export function toggleJavascriptTracingOnNextInteraction() {
   };
 }
 
+export function toggleJavascriptTracingOnNextLoad() {
+  return {
+    type: "TOGGLE_JAVASCRIPT_TRACING_ON_NEXT_LOAD",
+  };
+}
+
 export function setHideOrShowIgnoredSources(shouldHide) {
   return ({ dispatch, getState }) => {
     dispatch({ type: "HIDE_IGNORED_SOURCES", shouldHide });

devtools/client/debugger/src/client/firefox/commands.js

@@ -111,8 +111,8 @@ function forEachThread(iteratee) {
   return Promise.all(promises);
 }
 
-async function toggleTracing(logMethod) {
-  return commands.tracerCommand.toggle(logMethod);
+async function toggleTracing() {
+  return commands.tracerCommand.toggle();
 }
 
 function resume(thread, frameId) {

devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js

@@ -19,6 +19,7 @@ import {
   getJavascriptTracingLogMethod,
   getJavascriptTracingValues,
   getJavascriptTracingOnNextInteraction,
+  getJavascriptTracingOnNextLoad,
 } from "../../selectors/index";
 import { formatKeyShortcut } from "../../utils/text";
 import actions from "../../actions/index";
@@ -230,7 +231,7 @@ class CommandBar extends Component {
             this.props.logMethod
           ),
       onClick: event => {
-        this.props.toggleTracing(this.props.logMethod);
+        this.props.toggleTracing();
       },
       onContextMenu: event => {
         event.preventDefault();
@@ -261,21 +262,31 @@ class CommandBar extends Component {
           },
           { type: "separator" },
           {
-            id: "debugger-trace-menu-item-log-values",
-            label: L10N.getStr("traceValues"),
+            id: "debugger-trace-menu-item-next-interaction",
+            label: L10N.getStr("traceOnNextInteraction"),
             type: "checkbox",
-            checked: this.props.logValues,
+            checked: this.props.traceOnNextInteraction,
             click: () => {
-              this.props.toggleJavascriptTracingValues();
+              this.props.toggleJavascriptTracingOnNextInteraction();
             },
           },
           {
-            id: "debugger-trace-menu-item-next-interaction",
-            label: L10N.getStr("traceOnNextInteraction"),
+            id: "debugger-trace-menu-item-next-load",
+            label: L10N.getStr("traceOnNextLoad"),
             type: "checkbox",
-            checked: this.props.traceOnNextInteraction,
+            checked: this.props.traceOnNextLoad,
             click: () => {
-              this.props.toggleJavascriptTracingOnNextInteraction();
+              this.props.toggleJavascriptTracingOnNextLoad();
+            },
+          },
+          { type: "separator" },
+          {
+            id: "debugger-trace-menu-item-log-values",
+            label: L10N.getStr("traceValues"),
+            type: "checkbox",
+            checked: this.props.logValues,
+            click: () => {
+              this.props.toggleJavascriptTracingValues();
             },
           },
         ];
@@ -452,6 +463,7 @@ const mapStateToProps = state => ({
   logMethod: getJavascriptTracingLogMethod(state),
   logValues: getJavascriptTracingValues(state),
   traceOnNextInteraction: getJavascriptTracingOnNextInteraction(state),
+  traceOnNextLoad: getJavascriptTracingOnNextLoad(state),
 });
 
 export default connect(mapStateToProps, {
@@ -460,6 +472,7 @@ export default connect(mapStateToProps, {
   toggleJavascriptTracingValues: actions.toggleJavascriptTracingValues,
   toggleJavascriptTracingOnNextInteraction:
     actions.toggleJavascriptTracingOnNextInteraction,
+  toggleJavascriptTracingOnNextLoad: actions.toggleJavascriptTracingOnNextLoad,
   resume: actions.resume,
   stepIn: actions.stepIn,
   stepOut: actions.stepOut,

devtools/client/debugger/src/reducers/ui.js

@@ -39,6 +39,7 @@ export const initialUIState = () => ({
   javascriptTracingLogMethod: prefs.javascriptTracingLogMethod,
   javascriptTracingValues: prefs.javascriptTracingValues,
   javascriptTracingOnNextInteraction: prefs.javascriptTracingOnNextInteraction,
+  javascriptTracingOnNextLoad: prefs.javascriptTracingOnNextLoad,
   mutableSearchOptions: prefs.searchOptions || {
     [searchKeys.FILE_SEARCH]: {
       regexMatch: false,
@@ -190,6 +191,14 @@ function update(state = initialUIState(), action) {
       };
     }
 
+    case "TOGGLE_JAVASCRIPT_TRACING_ON_NEXT_LOAD": {
+      prefs.javascriptTracingOnNextLoad = !prefs.javascriptTracingOnNextLoad;
+      return {
+        ...state,
+        javascriptTracingOnNextLoad: prefs.javascriptTracingOnNextLoad,
+      };
+    }
+
     case "SET_SEARCH_OPTIONS": {
       state.mutableSearchOptions[action.searchKey] = {
         ...state.mutableSearchOptions[action.searchKey],

devtools/client/debugger/src/selectors/ui.js

@@ -92,6 +92,10 @@ export function getJavascriptTracingOnNextInteraction(state) {
   return state.ui.javascriptTracingOnNextInteraction;
 }
 
+export function getJavascriptTracingOnNextLoad(state) {
+  return state.ui.javascriptTracingOnNextLoad;
+}
+
 export function getSearchOptions(state, searchKey) {
   return state.ui.mutableSearchOptions[searchKey];
 }

devtools/client/debugger/src/utils/prefs.js

@@ -47,6 +47,7 @@ if (isNode()) {
   pref("devtools.debugger.javascript-tracing-log-method", "console");
   pref("devtools.debugger.javascript-tracing-values", false);
   pref("devtools.debugger.javascript-tracing-on-next-interaction", false);
+  pref("devtools.debugger.javascript-tracing-on-next-load", false);
   pref("devtools.debugger.hide-ignored-sources", false);
   pref("devtools.debugger.source-map-ignore-list-enabled", true);
   pref("devtools.debugger.features.wasm", true);
@@ -113,6 +114,10 @@ export const prefs = new PrefsHelper("devtools", {
     "Bool",
     "debugger.javascript-tracing-on-next-interaction",
   ],
+  javascriptTracingOnNextLoad: [
+    "Bool",
+    "debugger.javascript-tracing-on-next-load",
+  ],
   hideIgnoredSources: ["Bool", "debugger.hide-ignored-sources"],
   sourceMapIgnoreListEnabled: [
     "Bool",

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

@@ -590,3 +590,108 @@ add_task(async function testInteractionBetweenDebuggerAndConsole() {
   info("Also wait for stop message in the console");
   await hasConsoleMessage(dbg, "Stopped tracing");
 });
+
+add_task(async function testTracingOnNextLoad() {
+  await pushPref("devtools.debugger.features.javascript-tracing", true);
+  await pushPref(
+    "devtools.debugger.features.javascript-tracing-log-method",
+    "console"
+  );
+  // Cover tracing function argument values
+  const jsCode = `function foo() {}; function bar() {}; foo(); dump("plop\\n")`;
+  const dbg = await initDebuggerWithAbsoluteURL(
+    "data:text/html," +
+      encodeURIComponent(`<script>${jsCode}</script><body></body>`)
+  );
+
+  await openContextMenuInDebugger(dbg, "trace", 4);
+  const toggled = waitForDispatch(
+    dbg.store,
+    "TOGGLE_JAVASCRIPT_TRACING_ON_NEXT_LOAD"
+  );
+  selectContextMenuItem(dbg, `#debugger-trace-menu-item-next-load`);
+  await toggled;
+  ok(true, "Toggled the trace on next load");
+
+  info(
+    "Wait for the split console to be automatically displayed when toggling this setting"
+  );
+  await dbg.toolbox.getPanelWhenReady("webconsole");
+
+  invokeInTab("bar");
+
+  // Let some time for the call to be traced
+  await wait(500);
+
+  is(
+    (await findConsoleMessages(dbg.toolbox, "λ bar")).length,
+    0,
+    "The code isn't logged as the tracer shouldn't be started yet"
+  );
+
+  await clickElement(dbg, "trace");
+
+  const traceButton = findElement(dbg, "trace");
+  // Wait for the trace button to be highlighted
+  await waitFor(() => {
+    return traceButton.classList.contains("pending");
+  }, "The tracer button is pending before reloading the page");
+
+  info("Add an iframe to trigger a target creation");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+    const iframe = content.document.createElement("iframe");
+    iframe.src = "data:text/html,iframe";
+    content.document.body.appendChild(iframe);
+  });
+
+  // Let some time to regress and start the tracer
+  await wait(500);
+
+  ok(
+    traceButton.classList.contains("pending"),
+    "verify that the tracer is still pending after the iframe creation"
+  );
+
+  // Reload the page to trigger the tracer
+  await reload(dbg);
+
+  let topLevelThreadActorID =
+    dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID;
+  info("Wait for tracing to be enabled after page reload");
+  await waitForState(dbg, state => {
+    return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID);
+  });
+  ok(
+    traceButton.classList.contains("active"),
+    "The tracer button is now active after reload"
+  );
+
+  info("Wait for the split console to be displayed");
+  await dbg.toolbox.getPanelWhenReady("webconsole");
+
+  // Ensure that the very early code is traced
+  await hasConsoleMessage(dbg, "λ foo");
+
+  is(
+    (await findConsoleMessages(dbg.toolbox, "λ bar")).length,
+    0,
+    "The code ran before the reload isn't logged"
+  );
+
+  await clickElement(dbg, "trace");
+
+  topLevelThreadActorID =
+    dbg.toolbox.commands.targetCommand.targetFront.threadFront.actorID;
+  info("Wait for tracing to be disabled");
+  await waitForState(dbg, state => {
+    return dbg.selectors.getIsThreadCurrentlyTracing(topLevelThreadActorID);
+  });
+  await waitFor(() => {
+    return !traceButton.classList.contains("active");
+  }, "The tracer button is no longer active after stop request");
+
+  // Reset the trace on next interaction setting
+  Services.prefs.clearUserPref(
+    "devtools.debugger.javascript-tracing-on-next-interaction"
+  );
+});

devtools/client/locales/en-US/debugger.properties

@@ -153,6 +153,11 @@ traceValues=Log function arguments and returned values
 # This is used to automatically start the tracing on next user interaction (mousedown/keydown)
 traceOnNextInteraction=Trace only on next user interaction (mousedown/keydown)
 
+# LOCALIZATION NOTE (traceOnNextLoad): The label that is displayed in the context menu
+# of the trace button, which is in the top of the debugger right sidebar.
+# This is used to automatically start the tracing on next page load.
+traceOnNextLoad=Trace only on next page load (reload or navigation)
+
 # LOCALIZATION NOTE (resumeButtonTooltip): The label that is displayed on the pause
 # button when the debugger is in a paused state.
 resumeButtonTooltip=Resume %S

devtools/server/actors/resources/jstracer-state.js

@@ -59,6 +59,15 @@ class TracingStateWatcher {
   onTracingToggled(enabled, reason) {
     const tracerActor = this.targetActor.getTargetScopedActor("tracer");
     const logMethod = tracerActor?.getLogMethod();
+
+    // JavascriptTracer only supports recording once in the same process/thread.
+    // If we open another DevTools, on the same process, we would receive notification
+    // about a JavascriptTracer controlled by another toolbox's tracer actor.
+    // Ignore them as our current tracer actor didn't start tracing.
+    if (!logMethod) {
+      return;
+    }
+
     this.onAvailable([
       {
         resourceType: JSTRACER_STATE,

devtools/server/actors/targets/base-target-actor.js

@@ -5,6 +5,10 @@
 "use strict";
 
 const { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  TYPES,
+  getResourceWatcher,
+} = require("resource://devtools/server/actors/resources/index.js");
 
 loader.lazyRequireGetter(
   this,
@@ -146,10 +150,45 @@ class BaseTargetActor extends Actor {
    *
    * This will be called by the watcher when the DevTools target-configuration
    * is updated, or when a target is created via JSWindowActors.
+   *
+   * @param {JSON} options
+   *        Configuration object provided by the client.
+   *        See target-configuration actor.
+   * @param {Boolean} calledFromDocumentCreate
+   *        True, when this is called with initial configuration when the related target
+   *        actor is instantiated.
    */
   updateTargetConfiguration(options = {}, calledFromDocumentCreation = false) {
     // If there is some tracer options, we should start tracing, otherwise we should stop (if we were)
     if (options.tracerOptions) {
+      // Ignore the SessionData update if the user requested to start the tracer on next page load and:
+      //   - we apply it to an already loaded WindowGlobal,
+      //   - the target isn't the top level one.
+      if (
+        options.tracerOptions.traceOnNextLoad &&
+        (!calledFromDocumentCreation || !this.isTopLevelTarget)
+      ) {
+        if (this.isTopLevelTarget) {
+          const consoleMessageWatcher = getResourceWatcher(
+            this,
+            TYPES.CONSOLE_MESSAGE
+          );
+          if (consoleMessageWatcher) {
+            consoleMessageWatcher.emitMessages([
+              {
+                arguments: [
+                  "Waiting for next navigation or page reload before starting tracing",
+                ],
+                styles: [],
+                level: "jstracer",
+                chromeContext: false,
+                timeStamp: ChromeUtils.dateNow(),
+              },
+            ]);
+          }
+        }
+        return;
+      }
       const tracerActor = this.getTargetScopedActor("tracer");
       tracerActor.startTracing(options.tracerOptions);
     } else if (this.hasTargetScopedActor("tracer")) {