Bug 1640318 - Disable only JavaScript in the present tab when using the debugger menu r=jlast

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

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

@@ -133,3 +133,13 @@ export function ensureHasThread(thread: ActorId) {
     }
   };
 }
+
+export function toggleJavaScriptEnabled(enabled: Boolean) {
+  return async ({ panel, dispatch, client }: ThunkArgs) => {
+    await client.toggleJavaScriptEnabled(enabled);
+    dispatch({
+      type: "TOGGLE_JAVASCRIPT_ENABLED",
+      value: enabled,
+    });
+  };
+}

devtools/client/debugger/src/actions/types/UIAction.js

@@ -38,6 +38,10 @@ export type UIAction =
       +type: "TOGGLE_SOURCE_MAPS_ENABLED",
       +value: boolean,
     |}
+  | {|
+      +type: "TOGGLE_JAVASCRIPT_ENABLED",
+      +value: boolean,
+    |}
   | {|
       +type: "SHOW_SOURCE",
       +source: Source,

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

@@ -189,6 +189,14 @@ function removeXHRBreakpoint(path: string, method: string) {
   return currentThreadFront().removeXHRBreakpoint(path, method);
 }
 
+export function toggleJavaScriptEnabled(enabled: Boolean) {
+  return currentTarget().reconfigure({
+    options: {
+      javascriptEnabled: enabled,
+    },
+  });
+}
+
 function addWatchpoint(
   object: Grip,
   property: string,
@@ -579,6 +587,7 @@ const clientCommands = {
   lookupTarget,
   getFrontByID,
   fetchAncestorFramePositions,
+  toggleJavaScriptEnabled,
 };
 
 export { setupCommands, clientCommands };

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

@@ -207,6 +207,7 @@ export type Target = {
   isParentProcess: boolean,
   isServiceWorker: boolean,
   targetForm: Object,
+  reconfigure: Object,
 
   // Property installed by the debugger itself.
   debuggerServiceWorkerStatus: string,

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

@@ -9,7 +9,7 @@ import React, { Component } from "react";
 
 import { connect } from "../../utils/connect";
 import classnames from "classnames";
-import { features, javascriptPrefs, prefs } from "../../utils/prefs";
+import { features, prefs } from "../../utils/prefs";
 import {
   getIsWaitingOnBreak,
   getSkipPausing,
@@ -90,6 +90,7 @@ type Props = {
   isWaitingOnBreak: boolean,
   horizontal: boolean,
   skipPausing: boolean,
+  javascriptEnabled: boolean,
   topFrameSelected: boolean,
   resume: typeof actions.resume,
   stepIn: typeof actions.stepIn,
@@ -100,6 +101,7 @@ type Props = {
   toggleSkipPausing: typeof actions.toggleSkipPausing,
   toggleInlinePreview: typeof actions.toggleInlinePreview,
   toggleSourceMapsEnabled: typeof actions.toggleSourceMapsEnabled,
+  toggleJavaScriptEnabled: typeof actions.toggleJavaScriptEnabled,
 };
 
 class CommandBar extends Component<Props> {
@@ -258,11 +260,11 @@ class CommandBar extends Component<Props> {
         <MenuItem
           key="debugger-settings-menu-item-disable-javascript"
           className="menu-item debugger-settings-menu-item-disable-javascript"
-          checked={!javascriptPrefs.enableJavaScript}
+          checked={!this.props.javascriptEnabled}
           label={L10N.getStr("settings.disableJavaScript.label")}
           tooltip={L10N.getStr("settings.disableJavaScript.tooltip")}
           onClick={() => {
-            javascriptPrefs.enableJavaScript = !javascriptPrefs.enableJavaScript;
+            this.props.toggleJavaScriptEnabled(!this.props.javascriptEnabled);
           }}
         />
         <MenuItem
@@ -314,6 +316,7 @@ const mapStateToProps = state => ({
   isWaitingOnBreak: getIsWaitingOnBreak(state, getCurrentThread(state)),
   skipPausing: getSkipPausing(state),
   topFrameSelected: isTopFrameSelected(state, getCurrentThread(state)),
+  javascriptEnabled: state.ui.javascriptEnabled,
 });
 
 export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps, {
@@ -326,4 +329,5 @@ export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps, {
   toggleSkipPausing: actions.toggleSkipPausing,
   toggleInlinePreview: actions.toggleInlinePreview,
   toggleSourceMapsEnabled: actions.toggleSourceMapsEnabled,
+  toggleJavaScriptEnabled: actions.toggleJavaScriptEnabled,
 })(CommandBar);

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

@@ -41,6 +41,7 @@ export type UIState = {
   isLogPoint: boolean,
   inlinePreviewEnabled: boolean,
   sourceMapsEnabled: boolean,
+  javascriptEnabled: boolean,
 };
 
 export const createUIState = (): UIState => ({
@@ -58,6 +59,7 @@ export const createUIState = (): UIState => ({
   cursorPosition: null,
   inlinePreviewEnabled: features.inlinePreview,
   sourceMapsEnabled: prefs.clientSourceMapsEnabled,
+  javascriptEnabled: true,
 });
 
 function update(state: UIState = createUIState(), action: Action): UIState {
@@ -76,6 +78,10 @@ function update(state: UIState = createUIState(), action: Action): UIState {
       return { ...state, inlinePreviewEnabled: action.value };
     }
 
+    case "TOGGLE_JAVASCRIPT_ENABLED": {
+      return { ...state, javascriptEnabled: action.value };
+    }
+
     case "TOGGLE_SOURCE_MAPS_ENABLED": {
       prefs.clientSourceMapsEnabled = action.value;
       return { ...state, sourceMapsEnabled: action.value };

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

@@ -77,7 +77,6 @@ if (isDevelopment()) {
   pref("devtools.debugger.features.watchpoints", true);
   pref("devtools.debugger.features.frame-step", true);
   pref("devtools.editor.tabsize", 2);
-  pref("javascript.enabled", true);
 }
 
 export const prefs = new PrefsHelper("devtools", {
@@ -122,10 +121,6 @@ export const prefs = new PrefsHelper("devtools", {
   indentSize: ["Int", "editor.tabsize"],
 });
 
-export const javascriptPrefs = new PrefsHelper("javascript", {
-  enableJavaScript: ["Bool", "enabled"],
-});
-
 // The pref may not be defined. Defaulting to null isn't viable (cursor never blinks).
 // Can't use CodeMirror.defaults here because it's loaded later.
 // Hardcode the fallback value to that of CodeMirror.defaults.cursorBlinkRate.

devtools/client/debugger/test/mochitest/browser_dbg-settings-disable-javascript.js

@@ -11,7 +11,6 @@ async function toggleJavaScript(dbg, shouldBeCheckedAtStart) {
   menuButton.click();
   await waitForTime(200);
 
-  // Wait for the menu to show before trying to click the item
   const { parent } = dbg.panel.panelWin;
   const { document } = parent;
 
@@ -34,10 +33,8 @@ add_task(async function() {
 
   info("Clicking the disable javascript button in the settings menu");
   await toggleJavaScript(dbg, false);
-  is(Services.prefs.getBoolPref("javascript.enabled"), false, "JavaScript is disabled");
 
-  info("Reloading page to ensure there are no sources");
-  await reload(dbg);
+  info("Waiting for reload triggered by disabling javascript");
   await waitForSourceCount(dbg, 0);
 
   info("Clicking the disable javascript button in the settings menu to reenable JavaScript");

devtools/client/debugger/test/mochitest/helpers.js

@@ -585,7 +585,6 @@ async function clearDebuggerPreferences(prefs = []) {
   Services.prefs.clearUserPref("devtools.debugger.scopes-visible");
   Services.prefs.clearUserPref("devtools.debugger.skip-pausing");
   Services.prefs.clearUserPref("devtools.debugger.map-scopes-enabled");
-  Services.prefs.clearUserPref("javascript.enabled");
   await pushPref("devtools.debugger.log-actions", true);
 
   for (const pref of prefs) {