Bug 1555333 - Toggle skipPausing when adding or enabling a breakpoint via reducers r=jlast

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

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/actions/pause/index.js

@@ -26,7 +26,7 @@ export { breakOnNext } from "./breakOnNext";
 export { mapFrames } from "./mapFrames";
 export { pauseOnExceptions } from "./pauseOnExceptions";
 export { selectFrame } from "./selectFrame";
-export { toggleSkipPausing } from "./skipPausing";
+export { toggleSkipPausing, setSkipPausing } from "./skipPausing";
 export { toggleMapScopes } from "./mapScopes";
 export { setExpandedScope } from "./expandScopes";
 export { generateInlinePreview } from "./inlinePreview";

devtools/client/debugger/src/actions/pause/skipPausing.js

@@ -18,3 +18,19 @@ export function toggleSkipPausing() {
     dispatch({ type: "TOGGLE_SKIP_PAUSING", skipPausing });
   };
 }
+
+/**
+ * @memberof actions/pause
+ * @static
+ */
+export function setSkipPausing(skipPausing: boolean) {
+  return async ({ dispatch, client, getState, sourceMaps }: ThunkArgs) => {
+    const currentlySkipping = getSkipPausing(getState());
+    if (currentlySkipping === skipPausing) {
+      return;
+    }
+
+    await client.setSkipPausing(skipPausing);
+    dispatch({ type: "TOGGLE_SKIP_PAUSING", skipPausing });
+  };
+}

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

@@ -31,6 +31,7 @@ type Props = {
   unHighlightDomElement: typeof actions.unHighlightDomElement,
   deleteBreakpoint: typeof deleteDOMMutationBreakpoint,
   toggleBreakpoint: typeof toggleDOMMutationBreakpointState,
+  setSkipPausing: typeof actions.setSkipPausing,
 };
 
 const localizationTerms = {
@@ -40,12 +41,22 @@ const localizationTerms = {
 };
 
 class DOMMutationBreakpointsContents extends Component<Props> {
+  handleBreakpoint(breakpointId, shouldEnable) {
+    const { toggleBreakpoint, setSkipPausing } = this.props;
+
+    // The user has enabled a mutation breakpoint so we should no
+    // longer skip pausing
+    if (shouldEnable) {
+      setSkipPausing(false);
+    }
+    toggleBreakpoint(breakpointId, shouldEnable);
+  }
+
   renderItem(breakpoint: DOMMutationBreakpoint) {
     const {
       openElementInInspector,
       highlightDomElement,
       unHighlightDomElement,
-      toggleBreakpoint,
       deleteBreakpoint,
     } = this.props;
     const { enabled, id: breakpointId, nodeFront, mutationType } = breakpoint;
@@ -55,7 +66,7 @@ class DOMMutationBreakpointsContents extends Component<Props> {
         <input
           type="checkbox"
           checked={enabled}
-          onChange={() => toggleBreakpoint(breakpointId, !enabled)}
+          onChange={() => this.handleBreakpoint(breakpointId, !enabled)}
         />
         <div className="dom-mutation-info">
           <div className="dom-mutation-label">
@@ -123,6 +134,7 @@ class DomMutationBreakpoints extends Component<Props> {
         openElementInInspector={this.props.openElementInInspector}
         highlightDomElement={this.props.highlightDomElement}
         unHighlightDomElement={this.props.unHighlightDomElement}
+        setSkipPausing={this.props.setSkipPausing}
       />
     );
   }
@@ -136,5 +148,6 @@ export default connect(
     openElementInInspector: actions.openElementInInspectorCommand,
     highlightDomElement: actions.highlightDomElement,
     unHighlightDomElement: actions.unHighlightDomElement,
+    setSkipPausing: actions.setSkipPausing,
   }
 )(DomMutationBreakpoints);

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

@@ -343,6 +343,20 @@ function update(
       };
     }
 
+    // Disable skipPausing if a breakpoint is enabled or added
+    case "SET_BREAKPOINT": {
+      return action.breakpoint.disabled
+        ? state
+        : { ...state, skipPausing: false };
+    }
+
+    case "UPDATE_EVENT_LISTENERS":
+    case "REMOVE_BREAKPOINT":
+    case "SET_XHR_BREAKPOINT":
+    case "ENABLE_XHR_BREAKPOINT": {
+      return { ...state, skipPausing: false };
+    }
+
     case "TOGGLE_SKIP_PAUSING": {
       const { skipPausing } = action;
       prefs.skipPausing = skipPausing;

devtools/client/debugger/test/mochitest/browser_dbg-breakpoint-skipping.js

@@ -7,6 +7,19 @@ function skipPausing(dbg) {
   return waitForState(dbg, state => dbg.selectors.getSkipPausing());
 }
 
+function toggleBreakpoint(dbg, index) {
+  const breakpoints = findAllElements(dbg, "breakpointItems");
+  const bp = breakpoints[index];
+  const input = bp.querySelector("input");
+  input.click();
+}
+
+async function disableBreakpoint(dbg, index) {
+  const disabled = waitForDispatch(dbg, "SET_BREAKPOINT");
+  toggleBreakpoint(dbg, index);
+  await disabled;
+}
+
 /*
  * Tests toggling the skip pausing button and
  * invoking functions without pausing.
@@ -25,4 +38,14 @@ add_task(async function() {
   await reload(dbg, "simple3");
   res = await invokeInTab("simple");
   is(res, 3, "simple() successfully completed");
+
+  info("Adding a breakpoint disables skipPausing");
+  await addBreakpoint(dbg, "simple3", 3);
+  await waitForState(dbg, state => !state.skipPausing);
+
+  info("Enabling a breakpoint disables skipPausing");
+  await skipPausing(dbg);
+  await disableBreakpoint(dbg, 0);
+  await toggleBreakpoint(dbg, 0);
+  await waitForState(dbg, state => !state.skipPausing);
 });