1 files changed, 619 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/XHRBreakpoints.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/XHRBreakpoints.spec.js.snap
new file mode 100644
index 0000000000..e7c4527621
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/XHRBreakpoints.spec.js.snap
@@ -0,0 +1,619 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`XHR Breakpoints should render with 0 expressions passed from props 1`] = `
+<XHRBreakpoints
+  disableXHRBreakpoint={[Function]}
+  enableXHRBreakpoint={[Function]}
+  onXHRAdded={[Function]}
+  removeXHRBreakpoint={[Function]}
+  setXHRBreakpoint={[Function]}
+  shouldPauseOnAny={false}
+  showInput={false}
+  togglePauseOnAny={[Function]}
+  updateXHRBreakpoint={[Function]}
+  xhrBreakpoints={
+    Array [
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "ANY",
+        "path": "",
+        "text": "URL contains \\"\\"",
+      },
+    ]
+  }
+>
+  <div
+    className="breakpoints-options empty"
+  >
+    <ExceptionOption
+      className="breakpoints-exceptions"
+      isChecked={false}
+      label="Pause on any URL"
+      onChange={[Function]}
+    >
+      <label
+        className="breakpoints-exceptions"
+      >
+        <input
+          checked={false}
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="breakpoint-exceptions-label"
+        >
+          Pause on any URL
+        </div>
+      </label>
+    </ExceptionOption>
+  </div>
+  <form
+    className="xhr-input-container xhr-input-form"
+    key="xhr-input-container"
+    onSubmit={[Function]}
+  >
+    <input
+      className="xhr-input-url"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Break when URL contains"
+      type="text"
+      value=""
+    />
+    <select
+      className="xhr-input-method"
+      onChange={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      value="ANY"
+    >
+      <option
+        key="ANY"
+        onMouseDown={[Function]}
+        value="ANY"
+      >
+        ANY
+      </option>
+      <option
+        key="GET"
+        onMouseDown={[Function]}
+        value="GET"
+      >
+        GET
+      </option>
+      <option
+        key="POST"
+        onMouseDown={[Function]}
+        value="POST"
+      >
+        POST
+      </option>
+      <option
+        key="PUT"
+        onMouseDown={[Function]}
+        value="PUT"
+      >
+        PUT
+      </option>
+      <option
+        key="HEAD"
+        onMouseDown={[Function]}
+        value="HEAD"
+      >
+        HEAD
+      </option>
+      <option
+        key="DELETE"
+        onMouseDown={[Function]}
+        value="DELETE"
+      >
+        DELETE
+      </option>
+      <option
+        key="PATCH"
+        onMouseDown={[Function]}
+        value="PATCH"
+      >
+        PATCH
+      </option>
+      <option
+        key="OPTIONS"
+        onMouseDown={[Function]}
+        value="OPTIONS"
+      >
+        OPTIONS
+      </option>
+    </select>
+    <input
+      style={
+        Object {
+          "display": "none",
+        }
+      }
+      type="submit"
+    />
+  </form>
+</XHRBreakpoints>
+`;
+
+exports[`XHR Breakpoints should render with 8 expressions passed from props 1`] = `
+<XHRBreakpoints
+  disableXHRBreakpoint={[Function]}
+  enableXHRBreakpoint={[Function]}
+  onXHRAdded={[Function]}
+  removeXHRBreakpoint={[Function]}
+  setXHRBreakpoint={[Function]}
+  shouldPauseOnAny={false}
+  showInput={false}
+  togglePauseOnAny={[Function]}
+  updateXHRBreakpoint={[Function]}
+  xhrBreakpoints={
+    Array [
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "ANY",
+        "path": "",
+        "text": "URL contains \\"\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "ANY",
+        "path": "this is any",
+        "text": "URL contains \\"this is any\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "GET",
+        "path": "this is get",
+        "text": "URL contains \\"this is get\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "POST",
+        "path": "this is post",
+        "text": "URL contains \\"this is post\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "PUT",
+        "path": "this is put",
+        "text": "URL contains \\"this is put\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "HEAD",
+        "path": "this is head",
+        "text": "URL contains \\"this is head\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "DELETE",
+        "path": "this is delete",
+        "text": "URL contains \\"this is delete\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "PATCH",
+        "path": "this is patch",
+        "text": "URL contains \\"this is patch\\"",
+      },
+      Object {
+        "disabled": false,
+        "loading": false,
+        "method": "OPTIONS",
+        "path": "this is options",
+        "text": "URL contains \\"this is options\\"",
+      },
+    ]
+  }
+>
+  <div
+    className="breakpoints-options"
+  >
+    <ExceptionOption
+      className="breakpoints-exceptions"
+      isChecked={false}
+      label="Pause on any URL"
+      onChange={[Function]}
+    >
+      <label
+        className="breakpoints-exceptions"
+      >
+        <input
+          checked={false}
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="breakpoint-exceptions-label"
+        >
+          Pause on any URL
+        </div>
+      </label>
+    </ExceptionOption>
+  </div>
+  <ul
+    className="pane expressions-list"
+  >
+    <li
+      className="xhr-container"
+      key="this is any-ANY"
+      onDoubleClick={[Function]}
+      title="this is any"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          ANY
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is any
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is get-GET"
+      onDoubleClick={[Function]}
+      title="this is get"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          GET
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is get
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is post-POST"
+      onDoubleClick={[Function]}
+      title="this is post"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          POST
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is post
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is put-PUT"
+      onDoubleClick={[Function]}
+      title="this is put"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          PUT
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is put
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is head-HEAD"
+      onDoubleClick={[Function]}
+      title="this is head"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          HEAD
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is head
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is delete-DELETE"
+      onDoubleClick={[Function]}
+      title="this is delete"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          DELETE
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is delete
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is patch-PATCH"
+      onDoubleClick={[Function]}
+      title="this is patch"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          PATCH
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is patch
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+    <li
+      className="xhr-container"
+      key="this is options-OPTIONS"
+      onDoubleClick={[Function]}
+      title="this is options"
+    >
+      <label>
+        <input
+          checked={true}
+          className="xhr-checkbox"
+          onChange={[Function]}
+          onClick={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="xhr-label-method"
+        >
+          OPTIONS
+        </div>
+        <div
+          className="xhr-label-url"
+        >
+          this is options
+        </div>
+        <div
+          className="xhr-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+          >
+            <button
+              className="close-btn"
+              onClick={[Function]}
+            >
+              <AccessibleImage
+                className="close"
+              >
+                <span
+                  className="img close"
+                />
+              </AccessibleImage>
+            </button>
+          </CloseButton>
+        </div>
+      </label>
+    </li>
+  </ul>
+</XHRBreakpoints>
+`;