move to array, add checkbox for Pause on Any

assets/panel/debugger.properties

@@ -517,6 +517,10 @@ xhrBreakpoints.header=XHR Breakpoints
 xhrBreakpoints.placeholder=Break when URL contains
 xhrBreakpoints.label=Add XHR breakpoint
 
+# LOCALIZATION NOTE (pauseOnAnyXHR): The pause on any xhr checkbox description
+# when the debugger will pause on any xhr requests.
+pauseOnAnyXHR=Pause on Any
+
 # LOCALIZATION NOTE (sourceTabs.closeTab): Editor source tab context menu item
 # for closing the selected tab below the mouse.
 sourceTabs.closeTab=Close tab

src/actions/breakpoints/index.js

@@ -14,6 +14,7 @@ import { PROMISE } from "../utils/middleware/promise";
 import {
   getBreakpoint,
   getBreakpoints,
+  getXHRBreakpoints,
   getSelectedSource,
   getBreakpointAtLocation,
   getBreakpointsAtLine
@@ -382,52 +383,99 @@ export function toggleDisabledBreakpoint(line: number, column?: number) {
   };
 }
 
-export function enableXHRBreakpoint(breakpoint: XHRBreakpoint) {
-  return ({ dispatch }: ThunkArgs) => {
+export function enableXHRBreakpoint(index: number, bp: XHRBreakpoint) {
+  return ({ dispatch, getState }: ThunkArgs) => {
+    const xhrBreakpoints = getXHRBreakpoints(getState());
+    const breakpoint = bp || xhrBreakpoints.get(index);
     const enabledBreakpoint = {
       ...breakpoint,
       disabled: false
     };
 
     return dispatch({
       type: "ENABLE_XHR_BREAKPOINT",
-      breakpoint: enabledBreakpoint
+      breakpoint: enabledBreakpoint,
+      index
     });
   };
 }
 
-export function disableXHRBreakpoint(breakpoint: XHRBreakpoint) {
-  return ({ dispatch }: ThunkArgs) => {
+export function disableXHRBreakpoint(index: number, bp: XHRBreakpoint) {
+  return ({ dispatch, getState }: ThunkArgs) => {
+    const xhrBreakpoints = getXHRBreakpoints(getState());
+    const breakpoint = bp || xhrBreakpoints.get(index);
     const disabledBreakpoint = {
       ...breakpoint,
       disabled: true
     };
 
     return dispatch({
       type: "DISABLE_XHR_BREAKPOINT",
-      breakpoint: disabledBreakpoint
+      breakpoint: disabledBreakpoint,
+      index
     });
   };
 }
 
-export function setXHRBreakpoint(contains: string) {
+export function updateXHRBreakpoint(
+  index: number,
+  path: string,
+  method: string
+) {
+  return ({ dispatch, getState }: ThunkArgs) => {
+    const xhrBreakpoints = getXHRBreakpoints(getState());
+    const breakpoint = xhrBreakpoints.get(index);
+
+    const updatedBreakpoint = {
+      ...breakpoint,
+      path,
+      method,
+      text: `URL contains "${path}"`
+    };
+
+    return dispatch({
+      type: "UPDATE_XHR_BREAKPOINT",
+      breakpoint: updatedBreakpoint,
+      index
+    });
+  };
+}
+export function togglePauseOnAny() {
+  return ({ dispatch, getState }: ThunkArgs) => {
+    const xhrBreakpoints = getXHRBreakpoints(getState());
+    const emptyBp = xhrBreakpoints.find(({ path }) => path.length === 0);
+    if (!emptyBp) {
+      return dispatch(setXHRBreakpoint("", "ANY"));
+    }
+
+    const { disabled } = emptyBp;
+    if (disabled) {
+      return dispatch(enableXHRBreakpoint(0, emptyBp));
+    }
+
+    return dispatch(disableXHRBreakpoint(0, emptyBp));
+  };
+}
+
+export function setXHRBreakpoint(path: string, method: string) {
   return ({ dispatch, getState, client }: ThunkArgs) => {
-    const breakpoint = createXHRBreakpoint(contains);
+    const breakpoint = createXHRBreakpoint(path, method);
 
     return dispatch({
       type: "SET_XHR_BREAKPOINT",
       breakpoint
-      // [PROMISE]: client.setXHRBreakpoint(contains, "ANY")
     });
   };
 }
 
-export function removeXHRBreakpoint(contains: string) {
-  return ({ dispatch, getState, client }: ThunkArgs) => {
+export function removeXHRBreakpoint(index: number) {
+  return ({ dispatch, getState }: ThunkArgs) => {
+    const xhrBreakpoints = getXHRBreakpoints(getState());
+    const breakpoint = xhrBreakpoints.get(index);
     return dispatch({
       type: "REMOVE_XHR_BREAKPOINT",
-      contains
-      // [PROMISE]: client.removeXHRBreakpoint(contains, "ANY")
+      breakpoint,
+      index
     });
   };
 }

src/actions/types/BreakpointAction.js

@@ -33,17 +33,24 @@ export type BreakpointAction =
     |}
   | {|
       +type: "ENABLE_XHR_BREAKPOINT",
-      +breakpoint: XHRBreakpoint
+      +breakpoint: XHRBreakpoint,
+      +index: number
+    |}
+  | {|
+      +type: "UPDATE_XHR_BREAKPOINT",
+      +breakpoint: XHRBreakpoint,
+      +index: number
     |}
   | {|
       +type: "DISABLE_XHR_BREAKPOINT",
-      +breakpoint: XHRBreakpoint
+      +breakpoint: XHRBreakpoint,
+      +index: number
     |}
   | {|
       +type: "REMOVE_XHR_BREAKPOINT",
-      +contains: string
+      +index: number,
+      +breakpoint: XHRBreakpoint
     |}
-  // for simulating a successful server request
   | {|
       +type: "REMOVE_BREAKPOINT",
       +breakpoint: Breakpoint,

src/client/firefox/commands.js

@@ -149,12 +149,12 @@ function getBreakpointByLocation(location: Location) {
   return null;
 }
 
-function setXHRBreakpoint(contains: string, method: string) {
-  return threadClient.setXHRBreakpoint(contains, method);
+function setXHRBreakpoint(path: string, method: string) {
+  return threadClient.setXHRBreakpoint(path, method);
 }
 
-function removeXHRBreakpoint(contains: string, method: string) {
-  return threadClient.removeXHRBreakpoint(contains, method);
+function removeXHRBreakpoint(path: string, method: string) {
+  return threadClient.removeXHRBreakpoint(path, method);
 }
 
 function setBreakpoint(

src/client/firefox/types.js

@@ -352,8 +352,8 @@ export type ThreadClient = {
   source: ({ actor: SourceId }) => SourceClient,
   pauseGrip: (Grip | Function) => ObjectClient,
   pauseOnExceptions: (boolean, boolean) => Promise<*>,
-  setXHRBreakpoint: (contains: string, method: string) => Promise<boolean>,
-  removeXHRBreakpoint: (contains: string, method: string) => Promise<boolean>,
+  setXHRBreakpoint: (path: string, method: string) => Promise<boolean>,
+  removeXHRBreakpoint: (path: string, method: string) => Promise<boolean>,
   interrupt: () => Promise<*>,
   eventListeners: () => Promise<*>,
   getFrames: (number, number) => FramesResponse,

src/components/SecondaryPanes/XHRBreakpoints.js

@@ -12,25 +12,29 @@ import actions from "../../actions";
 import { CloseButton } from "../shared/Button";
 
 import "./XHRBreakpoints.css";
-import { getXHRBreakpoints } from "../../selectors";
+import { getXHRBreakpoints, shouldPauseOnAnyXHR } from "../../selectors";
+import ExceptionOption from "./Breakpoints/ExceptionOption";
 
 import type { XHRBreakpointsMap } from "../../reducers/types";
 
 type Props = {
   xhrBreakpoints: XHRBreakpointsMap,
+  shouldPauseOnAny: boolean,
   showInput: boolean,
   onXHRAdded: Function,
   setXHRBreakpoint: Function,
   removeXHRBreakpoint: typeof actions.removeXHRBreakpoint,
   enableXHRBreakpoint: typeof actions.enableXHRBreakpoint,
-  disableXHRBreakpoint: typeof actions.disableXHRBreakpoint
+  disableXHRBreakpoint: typeof actions.disableXHRBreakpoint,
+  togglePauseOnAny: typeof actions.togglePauseOnAny,
+  updateXHRBreakpoint: typeof actions.updateXHRBreakpoint
 };
 
 type State = {
   editing: boolean,
   inputValue: string,
+  inputMethod: string,
   editIndex: number,
-  previousInput: string,
   focused: boolean
 };
 
@@ -41,7 +45,7 @@ class XHRBreakpoints extends Component<Props, State> {
     this.state = {
       editing: false,
       inputValue: "",
-      previousInput: "",
+      inputMethod: "",
       focused: false,
       editIndex: -1
     };
@@ -60,11 +64,12 @@ class XHRBreakpoints extends Component<Props, State> {
     e.preventDefault();
     e.stopPropagation();
 
-    const { previousInput, inputValue } = this.state;
+    const { editIndex, inputValue, inputMethod } = this.state;
+    const { xhrBreakpoints } = this.props;
+    const { path, method } = xhrBreakpoints.get(editIndex);
 
-    if (previousInput !== inputValue) {
-      this.props.removeXHRBreakpoint(previousInput);
-      this.props.setXHRBreakpoint(inputValue);
+    if (path !== inputValue || method != inputMethod) {
+      this.props.updateXHRBreakpoint(editIndex, inputValue, inputMethod);
     }
 
     this.hideInput();
@@ -80,8 +85,8 @@ class XHRBreakpoints extends Component<Props, State> {
       focused: false,
       editing: false,
       editIndex: -1,
-      previousInput: "",
-      inputValue: ""
+      inputValue: "",
+      inputMethod: ""
     });
     this.props.onXHRAdded();
   };
@@ -90,10 +95,12 @@ class XHRBreakpoints extends Component<Props, State> {
     this.setState({ focused: true });
   };
 
-  editExpression = (contains, index) => {
+  editExpression = index => {
+    const { xhrBreakpoints } = this.props;
+    const { path, method } = xhrBreakpoints.get(index);
     this.setState({
-      inputValue: contains,
-      previousInput: contains,
+      inputValue: path,
+      inputMethod: method,
       editing: true,
       editIndex: index
     });
@@ -124,66 +131,96 @@ class XHRBreakpoints extends Component<Props, State> {
       </li>
     );
   }
-  handleCheckbox = contains => {
+  handleCheckbox = index => {
     const {
       xhrBreakpoints,
       enableXHRBreakpoint,
       disableXHRBreakpoint
     } = this.props;
-    const breakpoint = xhrBreakpoints.get(contains);
+    const breakpoint = xhrBreakpoints.get(index);
     if (breakpoint.disabled) {
-      enableXHRBreakpoint(breakpoint);
+      enableXHRBreakpoint(index);
     } else {
-      disableXHRBreakpoint(breakpoint);
+      disableXHRBreakpoint(index);
     }
   };
 
-  renderBreakpoint = ([contains, { text, disabled }], index) => {
+  renderBreakpoint = ({ path, text, disabled, method }, index) => {
     const { editIndex } = this.state;
     const { removeXHRBreakpoint } = this.props;
 
     if (index === editIndex) {
       return this.renderXHRInput(this.handleExistingSubmit);
+    } else if (!path) {
+      return;
     }
 
     return (
       <li
         className="xhr-container"
-        key={contains}
-        title={contains}
-        onDoubleClick={(items, options) => this.editExpression(contains, index)}
+        key={path}
+        title={path}
+        onDoubleClick={(items, options) => this.editExpression(index)}
       >
         <input
           type="checkbox"
           className="xhr-checkbox"
           checked={!disabled}
-          onChange={() => this.handleCheckbox(contains)}
+          onChange={() => this.handleCheckbox(index)}
           onClick={ev => ev.stopPropagation()}
         />
         <div className="xhr-label">{text}</div>
         <div className="xhr-container__close-btn">
-          <CloseButton handleClick={e => removeXHRBreakpoint(contains)} />
+          <CloseButton handleClick={e => removeXHRBreakpoint(index)} />
         </div>
       </li>
     );
   };
 
-  render() {
+  renderBreakpoints = () => {
     const { showInput, xhrBreakpoints } = this.props;
-    const breakpoints = xhrBreakpoints.entrySeq();
     return (
       <ul className="pane expressions-list">
-        {breakpoints.map(this.renderBreakpoint)}
+        {xhrBreakpoints.map(this.renderBreakpoint)}
         {(showInput || !xhrBreakpoints.size) &&
           this.renderXHRInput(this.handleNewSubmit)}
       </ul>
     );
+  };
+
+  renderCheckpoint = () => {
+    const { shouldPauseOnAny, togglePauseOnAny, xhrBreakpoints } = this.props;
+    const isEmpty = xhrBreakpoints.size === 0;
+    return (
+      <div
+        className={classnames("breakpoints-exceptions-options", {
+          empty: isEmpty
+        })}
+      >
+        <ExceptionOption
+          className="breakpoints-exceptions"
+          label={L10N.getStr("pauseOnAnyXHR")}
+          isChecked={shouldPauseOnAny}
+          onChange={() => togglePauseOnAny()}
+        />
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <div>
+        {this.renderCheckpoint()}
+        {this.renderBreakpoints()}
+      </div>
+    );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    xhrBreakpoints: getXHRBreakpoints(state)
+    xhrBreakpoints: getXHRBreakpoints(state),
+    shouldPauseOnAny: shouldPauseOnAnyXHR(state)
   };
 };
 
@@ -193,6 +230,8 @@ export default connect(
     setXHRBreakpoint: actions.setXHRBreakpoint,
     removeXHRBreakpoint: actions.removeXHRBreakpoint,
     enableXHRBreakpoint: actions.enableXHRBreakpoint,
-    disableXHRBreakpoint: actions.disableXHRBreakpoint
+    disableXHRBreakpoint: actions.disableXHRBreakpoint,
+    updateXHRBreakpoint: actions.updateXHRBreakpoint,
+    togglePauseOnAny: actions.togglePauseOnAny
   }
 )(XHRBreakpoints);