Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

55 files changed, 14233 insertions, 0 deletions

diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
new file mode 100644
index 0000000000..368170bed7
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
@@ -0,0 +1,219 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../../utils/connect";
+import { createSelector } from "reselect";
+import actions from "../../../actions";
+
+import showContextMenu from "./BreakpointsContextMenu";
+import { CloseButton } from "../../shared/Button";
+
+import { getSelectedText, makeBreakpointId } from "../../../utils/breakpoint";
+import { getSelectedLocation } from "../../../utils/selected-location";
+import { isLineBlackboxed } from "../../../utils/source";
+
+import {
+  getBreakpointsList,
+  getSelectedFrame,
+  getSelectedSource,
+  getCurrentThread,
+  getContext,
+  isSourceMapIgnoreListEnabled,
+  isSourceOnSourceMapIgnoreList,
+} from "../../../selectors";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+class Breakpoint extends PureComponent {
+  static get propTypes() {
+    return {
+      breakpoint: PropTypes.object.isRequired,
+      cx: PropTypes.object.isRequired,
+      disableBreakpoint: PropTypes.func.isRequired,
+      editor: PropTypes.object.isRequired,
+      enableBreakpoint: PropTypes.func.isRequired,
+      frame: PropTypes.object,
+      openConditionalPanel: PropTypes.func.isRequired,
+      removeBreakpoint: PropTypes.func.isRequired,
+      selectSpecificLocation: PropTypes.func.isRequired,
+      selectedSource: PropTypes.object,
+      source: PropTypes.object.isRequired,
+      blackboxedRangesForSource: PropTypes.array.isRequired,
+      checkSourceOnIgnoreList: PropTypes.func.isRequired,
+    };
+  }
+
+  onContextMenu = e => {
+    showContextMenu({ ...this.props, contextMenuEvent: e });
+  };
+
+  get selectedLocation() {
+    const { breakpoint, selectedSource } = this.props;
+    return getSelectedLocation(breakpoint, selectedSource);
+  }
+
+  onDoubleClick = () => {
+    const { breakpoint, openConditionalPanel } = this.props;
+    if (breakpoint.options.condition) {
+      openConditionalPanel(this.selectedLocation);
+    } else if (breakpoint.options.logValue) {
+      openConditionalPanel(this.selectedLocation, true);
+    }
+  };
+
+  selectBreakpoint = event => {
+    event.preventDefault();
+    const { cx, selectSpecificLocation } = this.props;
+    selectSpecificLocation(cx, this.selectedLocation);
+  };
+
+  removeBreakpoint = event => {
+    const { cx, removeBreakpoint, breakpoint } = this.props;
+    event.stopPropagation();
+    removeBreakpoint(cx, breakpoint);
+  };
+
+  handleBreakpointCheckbox = () => {
+    const { cx, breakpoint, enableBreakpoint, disableBreakpoint } = this.props;
+    if (breakpoint.disabled) {
+      enableBreakpoint(cx, breakpoint);
+    } else {
+      disableBreakpoint(cx, breakpoint);
+    }
+  };
+
+  isCurrentlyPausedAtBreakpoint() {
+    const { frame } = this.props;
+    if (!frame) {
+      return false;
+    }
+
+    const bpId = makeBreakpointId(this.selectedLocation);
+    const frameId = makeBreakpointId(frame.selectedLocation);
+    return bpId == frameId;
+  }
+
+  getBreakpointLocation() {
+    const { source } = this.props;
+    const { column, line } = this.selectedLocation;
+
+    const isWasm = source?.isWasm;
+    const columnVal = column ? `:${column}` : "";
+    const bpLocation = isWasm
+      ? `0x${line.toString(16).toUpperCase()}`
+      : `${line}${columnVal}`;
+
+    return bpLocation;
+  }
+
+  getBreakpointText() {
+    const { breakpoint, selectedSource } = this.props;
+    const { condition, logValue } = breakpoint.options;
+    return logValue || condition || getSelectedText(breakpoint, selectedSource);
+  }
+
+  highlightText(text = "", editor) {
+    const node = document.createElement("div");
+    editor.CodeMirror.runMode(text, "application/javascript", node);
+    return { __html: node.innerHTML };
+  }
+
+  render() {
+    const {
+      breakpoint,
+      editor,
+      blackboxedRangesForSource,
+      checkSourceOnIgnoreList,
+    } = this.props;
+    const text = this.getBreakpointText();
+    const labelId = `${breakpoint.id}-label`;
+
+    return (
+      <div
+        className={classnames({
+          breakpoint,
+          paused: this.isCurrentlyPausedAtBreakpoint(),
+          disabled: breakpoint.disabled,
+          "is-conditional": !!breakpoint.options.condition,
+          "is-log": !!breakpoint.options.logValue,
+        })}
+        onClick={this.selectBreakpoint}
+        onDoubleClick={this.onDoubleClick}
+        onContextMenu={this.onContextMenu}
+      >
+        <input
+          id={breakpoint.id}
+          type="checkbox"
+          className="breakpoint-checkbox"
+          checked={!breakpoint.disabled}
+          disabled={isLineBlackboxed(
+            blackboxedRangesForSource,
+            breakpoint.location.line,
+            checkSourceOnIgnoreList(breakpoint.location.source)
+          )}
+          onChange={this.handleBreakpointCheckbox}
+          onClick={ev => ev.stopPropagation()}
+          aria-labelledby={labelId}
+        />
+        <span
+          id={labelId}
+          className="breakpoint-label cm-s-mozilla devtools-monospace"
+          onClick={this.selectBreakpoint}
+          title={text}
+        >
+          <span dangerouslySetInnerHTML={this.highlightText(text, editor)} />
+        </span>
+        <div className="breakpoint-line-close">
+          <div className="breakpoint-line devtools-monospace">
+            {this.getBreakpointLocation()}
+          </div>
+          <CloseButton
+            handleClick={e => this.removeBreakpoint(e)}
+            tooltip={L10N.getStr("breakpoints.removeBreakpointTooltip")}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+const getFormattedFrame = createSelector(
+  getSelectedSource,
+  getSelectedFrame,
+  (selectedSource, frame) => {
+    if (!frame) {
+      return null;
+    }
+
+    return {
+      ...frame,
+      selectedLocation: getSelectedLocation(frame, selectedSource),
+    };
+  }
+);
+
+const mapStateToProps = (state, p) => ({
+  cx: getContext(state),
+  breakpoints: getBreakpointsList(state),
+  frame: getFormattedFrame(state, getCurrentThread(state)),
+  checkSourceOnIgnoreList: source =>
+    isSourceMapIgnoreListEnabled(state) &&
+    isSourceOnSourceMapIgnoreList(state, source),
+});
+
+export default connect(mapStateToProps, {
+  enableBreakpoint: actions.enableBreakpoint,
+  removeBreakpoint: actions.removeBreakpoint,
+  removeBreakpoints: actions.removeBreakpoints,
+  removeAllBreakpoints: actions.removeAllBreakpoints,
+  disableBreakpoint: actions.disableBreakpoint,
+  selectSpecificLocation: actions.selectSpecificLocation,
+  setBreakpointOptions: actions.setBreakpointOptions,
+  toggleAllBreakpoints: actions.toggleAllBreakpoints,
+  toggleBreakpoints: actions.toggleBreakpoints,
+  toggleDisabledBreakpoint: actions.toggleDisabledBreakpoint,
+  openConditionalPanel: actions.openConditionalPanel,
+})(Breakpoint);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js
new file mode 100644
index 0000000000..c2c29cc258
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js
@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+
+import { connect } from "../../../utils/connect";
+import actions from "../../../actions";
+
+import {
+  getTruncatedFileName,
+  getDisplayPath,
+  getSourceQueryString,
+  getFileURL,
+} from "../../../utils/source";
+import { createLocation } from "../../../utils/location";
+import {
+  getBreakpointsForSource,
+  getContext,
+  getFirstSourceActorForGeneratedSource,
+} from "../../../selectors";
+
+import SourceIcon from "../../shared/SourceIcon";
+
+import showContextMenu from "./BreakpointHeadingsContextMenu";
+
+class BreakpointHeading extends PureComponent {
+  static get propTypes() {
+    return {
+      cx: PropTypes.object.isRequired,
+      sources: PropTypes.array.isRequired,
+      source: PropTypes.object.isRequired,
+      firstSourceActor: PropTypes.object,
+      selectSource: PropTypes.func.isRequired,
+    };
+  }
+  onContextMenu = e => {
+    showContextMenu({ ...this.props, contextMenuEvent: e });
+  };
+
+  render() {
+    const { cx, sources, source, selectSource } = this.props;
+
+    const path = getDisplayPath(source, sources);
+    const query = getSourceQueryString(source);
+
+    return (
+      <div
+        className="breakpoint-heading"
+        title={getFileURL(source, false)}
+        onClick={() => selectSource(cx, source)}
+        onContextMenu={this.onContextMenu}
+      >
+        <SourceIcon
+          // Breakpoints are displayed per source and may relate to many source actors.
+          // Arbitrarily pick the first source actor to compute the matching source icon
+          // The source actor is used to pick one specific source text content and guess
+          // the related framework icon.
+          location={createLocation({
+            source,
+            sourceActor: this.props.firstSourceActor,
+          })}
+          modifier={icon =>
+            ["file", "javascript"].includes(icon) ? null : icon
+          }
+        />
+        <div className="filename">
+          {getTruncatedFileName(source, query)}
+          {path && <span>{`../${path}/..`}</span>}
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, { source }) => ({
+  cx: getContext(state),
+  breakpointsForSource: getBreakpointsForSource(state, source.id),
+  firstSourceActor: getFirstSourceActorForGeneratedSource(state, source.id),
+});
+
+export default connect(mapStateToProps, {
+  selectSource: actions.selectSource,
+  enableBreakpointsInSource: actions.enableBreakpointsInSource,
+  disableBreakpointsInSource: actions.disableBreakpointsInSource,
+  removeBreakpointsInSource: actions.removeBreakpointsInSource,
+})(BreakpointHeading);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeadingsContextMenu.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeadingsContextMenu.js
new file mode 100644
index 0000000000..cdd3910b00
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeadingsContextMenu.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 { buildMenu, showMenu } from "../../../context-menu/menu";
+
+export default function showContextMenu(props) {
+  const {
+    cx,
+    source,
+    breakpointsForSource,
+    disableBreakpointsInSource,
+    enableBreakpointsInSource,
+    removeBreakpointsInSource,
+    contextMenuEvent,
+  } = props;
+
+  contextMenuEvent.preventDefault();
+
+  const enableInSourceLabel = L10N.getStr(
+    "breakpointHeadingsMenuItem.enableInSource.label"
+  );
+  const disableInSourceLabel = L10N.getStr(
+    "breakpointHeadingsMenuItem.disableInSource.label"
+  );
+  const removeInSourceLabel = L10N.getStr(
+    "breakpointHeadingsMenuItem.removeInSource.label"
+  );
+  const enableInSourceKey = L10N.getStr(
+    "breakpointHeadingsMenuItem.enableInSource.accesskey"
+  );
+  const disableInSourceKey = L10N.getStr(
+    "breakpointHeadingsMenuItem.disableInSource.accesskey"
+  );
+  const removeInSourceKey = L10N.getStr(
+    "breakpointHeadingsMenuItem.removeInSource.accesskey"
+  );
+
+  const disableInSourceItem = {
+    id: "node-menu-disable-in-source",
+    label: disableInSourceLabel,
+    accesskey: disableInSourceKey,
+    disabled: false,
+    click: () => disableBreakpointsInSource(cx, source),
+  };
+
+  const enableInSourceItem = {
+    id: "node-menu-enable-in-source",
+    label: enableInSourceLabel,
+    accesskey: enableInSourceKey,
+    disabled: false,
+    click: () => enableBreakpointsInSource(cx, source),
+  };
+
+  const removeInSourceItem = {
+    id: "node-menu-enable-in-source",
+    label: removeInSourceLabel,
+    accesskey: removeInSourceKey,
+    disabled: false,
+    click: () => removeBreakpointsInSource(cx, source),
+  };
+
+  const hideDisableInSourceItem = breakpointsForSource.every(
+    breakpoint => breakpoint.disabled
+  );
+  const hideEnableInSourceItem = breakpointsForSource.every(
+    breakpoint => !breakpoint.disabled
+  );
+
+  const items = [
+    { item: disableInSourceItem, hidden: () => hideDisableInSourceItem },
+    { item: enableInSourceItem, hidden: () => hideEnableInSourceItem },
+    { item: removeInSourceItem, hidden: () => false },
+  ];
+
+  showMenu(contextMenuEvent, buildMenu(items));
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
new file mode 100644
index 0000000000..98075058b8
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
@@ -0,0 +1,249 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.breakpoints-pane > ._content {
+  overflow-x: auto;
+}
+
+.breakpoints-exceptions-options *,
+.breakpoints-list * {
+  user-select: none;
+}
+
+.breakpoints-list {
+  padding: 4px 0;
+}
+
+.breakpoints-list .breakpoint-heading {
+  text-overflow: ellipsis;
+  width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.breakpoint-heading:not(:first-child) {
+  margin-top: 2px;
+}
+
+.breakpoints-list .breakpoint-heading .filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.breakpoints-list .breakpoint-heading .filename span {
+  opacity: 0.7;
+  padding-left: 4px;
+}
+
+.breakpoints-list .breakpoint-heading,
+.breakpoints-list .breakpoint {
+  color: var(--theme-text-color-strong);
+  position: relative;
+  cursor: pointer;
+}
+
+.breakpoints-list .breakpoint-heading,
+.breakpoints-list .breakpoint,
+.breakpoints-exceptions,
+.breakpoints-exceptions-caught {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-inline-start: 16px;
+  padding-inline-end: 12px;
+}
+
+.breakpoints-exceptions {
+  padding-bottom: 3px;
+  padding-top: 3px;
+  user-select: none;
+}
+
+.breakpoints-exceptions-caught {
+  padding-bottom: 3px;
+  padding-top: 3px;
+  padding-inline-start: 36px;
+}
+
+.breakpoints-exceptions-options {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.xhr-breakpoints-pane .breakpoints-exceptions-options {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.breakpoints-exceptions-options:not(.empty) {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.breakpoints-exceptions input,
+.breakpoints-exceptions-caught input {
+  padding-inline-start: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: 0;
+  margin-inline-end: 2px;
+  vertical-align: text-bottom;
+}
+
+.breakpoint-exceptions-label {
+  line-height: 14px;
+  padding-inline-end: 8px;
+  cursor: default;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+html[dir="rtl"] .breakpoints-list .breakpoint,
+html[dir="rtl"] .breakpoints-list .breakpoint-heading,
+html[dir="rtl"] .breakpoints-exceptions {
+  border-right: 4px solid transparent;
+}
+
+html:not([dir="rtl"]) .breakpoints-list .breakpoint,
+html:not([dir="rtl"]) .breakpoints-list .breakpoint-heading,
+html:not([dir="rtl"]) .breakpoints-exceptions {
+  border-left: 4px solid transparent;
+}
+
+html .breakpoints-list .breakpoint.is-conditional {
+  border-inline-start-color: var(--theme-graphs-yellow);
+}
+
+html .breakpoints-list .breakpoint.is-log {
+  border-inline-start-color: var(--theme-graphs-purple);
+}
+
+html .breakpoints-list .breakpoint.paused {
+  background-color: var(--theme-toolbar-background-alt);
+  border-color: var(--breakpoint-active-color);
+}
+
+.breakpoints-list .breakpoint:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.breakpoint-line-close {
+  margin-inline-start: 4px;
+}
+
+.breakpoints-list .breakpoint .breakpoint-line {
+  font-size: 11px;
+  color: var(--theme-comment);
+  min-width: 16px;
+  text-align: end;
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.breakpoints-list .breakpoint:hover .breakpoint-line,
+.breakpoints-list .breakpoint-line-close:focus-within .breakpoint-line {
+  color: transparent;
+}
+
+.breakpoints-list .breakpoint.paused:hover {
+  border-color: var(--breakpoint-active-color-hover);
+}
+
+.breakpoints-list .breakpoint-label {
+  display: inline-block;
+  cursor: pointer;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 11px;
+}
+
+.breakpoints-list .breakpoint-label span,
+.breakpoint-line-close {
+  display: inline;
+  line-height: 14px;
+}
+
+.breakpoint-checkbox {
+  margin-inline-start: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  vertical-align: text-bottom;
+}
+
+.breakpoint-label .location {
+  width: 100%;
+  display: inline-block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  padding: 1px 0;
+  vertical-align: bottom;
+}
+
+.breakpoints-list .pause-indicator {
+  flex: 0 1 content;
+  order: 3;
+}
+
+.breakpoint .close-btn {
+  position: absolute;
+  /* hide button outside of row until hovered or focused */
+  top: -100px;
+}
+
+[dir="ltr"] .breakpoint .close-btn {
+  right: 12px;
+}
+
+[dir="rtl"] .breakpoint .close-btn {
+  left: 12px;
+}
+
+/* Reveal the remove button on hover/focus */
+.breakpoint:hover .close-btn,
+.breakpoint .close-btn:focus {
+  top: calc(50% - 8px);
+}
+
+/* Hide the line number when revealing the remove button (since they're overlayed) */
+.breakpoint-line-close:focus-within .breakpoint-line,
+.breakpoint:hover .breakpoint-line {
+  visibility: hidden;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint {
+  cursor: pointer;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-lines {
+  padding: 0;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-sizer {
+  min-width: initial !important;
+}
+
+.breakpoints-list .breakpoint .CodeMirror.cm-s-mozilla-breakpoint {
+  transition: opacity 0.15s linear;
+}
+
+.breakpoints-list .breakpoint.disabled .CodeMirror.cm-s-mozilla-breakpoint {
+  opacity: 0.5;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-line span[role="presentation"] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code,
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-scroll {
+  pointer-events: none;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint {
+  padding-top: 1px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointsContextMenu.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointsContextMenu.js
new file mode 100644
index 0000000000..c2d8f3ff33
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointsContextMenu.js
@@ -0,0 +1,365 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 { buildMenu, showMenu } from "../../../context-menu/menu";
+import { getSelectedLocation } from "../../../utils/selected-location";
+import { isLineBlackboxed } from "../../../utils/source";
+import { features } from "../../../utils/prefs";
+import { formatKeyShortcut } from "../../../utils/text";
+
+export default function showContextMenu(props) {
+  const {
+    cx,
+    breakpoint,
+    breakpoints,
+    selectedSource,
+    removeBreakpoint,
+    removeBreakpoints,
+    removeAllBreakpoints,
+    toggleBreakpoints,
+    toggleAllBreakpoints,
+    toggleDisabledBreakpoint,
+    selectSpecificLocation,
+    setBreakpointOptions,
+    openConditionalPanel,
+    contextMenuEvent,
+    blackboxedRangesForSource,
+    checkSourceOnIgnoreList,
+  } = props;
+
+  contextMenuEvent.preventDefault();
+
+  const deleteSelfLabel = L10N.getStr("breakpointMenuItem.deleteSelf2.label");
+  const deleteAllLabel = L10N.getStr("breakpointMenuItem.deleteAll2.label");
+  const deleteOthersLabel = L10N.getStr(
+    "breakpointMenuItem.deleteOthers2.label"
+  );
+  const enableSelfLabel = L10N.getStr("breakpointMenuItem.enableSelf2.label");
+  const enableAllLabel = L10N.getStr("breakpointMenuItem.enableAll2.label");
+  const enableOthersLabel = L10N.getStr(
+    "breakpointMenuItem.enableOthers2.label"
+  );
+  const disableSelfLabel = L10N.getStr("breakpointMenuItem.disableSelf2.label");
+  const disableAllLabel = L10N.getStr("breakpointMenuItem.disableAll2.label");
+  const disableOthersLabel = L10N.getStr(
+    "breakpointMenuItem.disableOthers2.label"
+  );
+  const enableDbgStatementLabel = L10N.getStr(
+    "breakpointMenuItem.enabledbg.label"
+  );
+  const disableDbgStatementLabel = L10N.getStr(
+    "breakpointMenuItem.disabledbg.label"
+  );
+  const removeConditionLabel = L10N.getStr(
+    "breakpointMenuItem.removeCondition2.label"
+  );
+  const addConditionLabel = L10N.getStr(
+    "breakpointMenuItem.addCondition2.label"
+  );
+  const editConditionLabel = L10N.getStr(
+    "breakpointMenuItem.editCondition2.label"
+  );
+
+  const deleteSelfKey = L10N.getStr("breakpointMenuItem.deleteSelf2.accesskey");
+  const deleteAllKey = L10N.getStr("breakpointMenuItem.deleteAll2.accesskey");
+  const deleteOthersKey = L10N.getStr(
+    "breakpointMenuItem.deleteOthers2.accesskey"
+  );
+  const enableSelfKey = L10N.getStr("breakpointMenuItem.enableSelf2.accesskey");
+  const enableAllKey = L10N.getStr("breakpointMenuItem.enableAll2.accesskey");
+  const enableOthersKey = L10N.getStr(
+    "breakpointMenuItem.enableOthers2.accesskey"
+  );
+  const disableSelfKey = L10N.getStr(
+    "breakpointMenuItem.disableSelf2.accesskey"
+  );
+  const disableAllKey = L10N.getStr("breakpointMenuItem.disableAll2.accesskey");
+  const disableOthersKey = L10N.getStr(
+    "breakpointMenuItem.disableOthers2.accesskey"
+  );
+  const removeConditionKey = L10N.getStr(
+    "breakpointMenuItem.removeCondition2.accesskey"
+  );
+  const editConditionKey = L10N.getStr(
+    "breakpointMenuItem.editCondition2.accesskey"
+  );
+  const addConditionKey = L10N.getStr(
+    "breakpointMenuItem.addCondition2.accesskey"
+  );
+
+  const selectedLocation = getSelectedLocation(breakpoint, selectedSource);
+  const otherBreakpoints = breakpoints.filter(b => b.id !== breakpoint.id);
+  const enabledBreakpoints = breakpoints.filter(b => !b.disabled);
+  const disabledBreakpoints = breakpoints.filter(b => b.disabled);
+  const otherEnabledBreakpoints = breakpoints.filter(
+    b => !b.disabled && b.id !== breakpoint.id
+  );
+  const otherDisabledBreakpoints = breakpoints.filter(
+    b => b.disabled && b.id !== breakpoint.id
+  );
+
+  const deleteSelfItem = {
+    id: "node-menu-delete-self",
+    label: deleteSelfLabel,
+    accesskey: deleteSelfKey,
+    disabled: false,
+    click: () => {
+      removeBreakpoint(cx, breakpoint);
+    },
+  };
+
+  const deleteAllItem = {
+    id: "node-menu-delete-all",
+    label: deleteAllLabel,
+    accesskey: deleteAllKey,
+    disabled: false,
+    click: () => removeAllBreakpoints(cx),
+  };
+
+  const deleteOthersItem = {
+    id: "node-menu-delete-other",
+    label: deleteOthersLabel,
+    accesskey: deleteOthersKey,
+    disabled: false,
+    click: () => removeBreakpoints(cx, otherBreakpoints),
+  };
+
+  const enableSelfItem = {
+    id: "node-menu-enable-self",
+    label: enableSelfLabel,
+    accesskey: enableSelfKey,
+    disabled: isLineBlackboxed(
+      blackboxedRangesForSource,
+      breakpoint.location.line,
+      checkSourceOnIgnoreList(breakpoint.location.source)
+    ),
+    click: () => {
+      toggleDisabledBreakpoint(cx, breakpoint);
+    },
+  };
+
+  const enableAllItem = {
+    id: "node-menu-enable-all",
+    label: enableAllLabel,
+    accesskey: enableAllKey,
+    disabled: isLineBlackboxed(
+      blackboxedRangesForSource,
+      breakpoint.location.line,
+      checkSourceOnIgnoreList(breakpoint.location.source)
+    ),
+    click: () => toggleAllBreakpoints(cx, false),
+  };
+
+  const enableOthersItem = {
+    id: "node-menu-enable-others",
+    label: enableOthersLabel,
+    accesskey: enableOthersKey,
+    disabled: isLineBlackboxed(
+      blackboxedRangesForSource,
+      breakpoint.location.line,
+      checkSourceOnIgnoreList(breakpoint.location.source)
+    ),
+    click: () => toggleBreakpoints(cx, false, otherDisabledBreakpoints),
+  };
+
+  const disableSelfItem = {
+    id: "node-menu-disable-self",
+    label: disableSelfLabel,
+    accesskey: disableSelfKey,
+    disabled: false,
+    click: () => {
+      toggleDisabledBreakpoint(cx, breakpoint);
+    },
+  };
+
+  const disableAllItem = {
+    id: "node-menu-disable-all",
+    label: disableAllLabel,
+    accesskey: disableAllKey,
+    disabled: false,
+    click: () => toggleAllBreakpoints(cx, true),
+  };
+
+  const disableOthersItem = {
+    id: "node-menu-disable-others",
+    label: disableOthersLabel,
+    accesskey: disableOthersKey,
+    click: () => toggleBreakpoints(cx, true, otherEnabledBreakpoints),
+  };
+
+  const enableDbgStatementItem = {
+    id: "node-menu-enable-dbgStatement",
+    label: enableDbgStatementLabel,
+    disabled: false,
+    click: () =>
+      setBreakpointOptions(cx, selectedLocation, {
+        ...breakpoint.options,
+        condition: null,
+      }),
+  };
+
+  const disableDbgStatementItem = {
+    id: "node-menu-disable-dbgStatement",
+    label: disableDbgStatementLabel,
+    disabled: false,
+    click: () =>
+      setBreakpointOptions(cx, selectedLocation, {
+        ...breakpoint.options,
+        condition: "false",
+      }),
+  };
+
+  const removeConditionItem = {
+    id: "node-menu-remove-condition",
+    label: removeConditionLabel,
+    accesskey: removeConditionKey,
+    disabled: false,
+    click: () =>
+      setBreakpointOptions(cx, selectedLocation, {
+        ...breakpoint.options,
+        condition: null,
+      }),
+  };
+
+  const addConditionItem = {
+    id: "node-menu-add-condition",
+    label: addConditionLabel,
+    accesskey: addConditionKey,
+    click: () => {
+      selectSpecificLocation(cx, selectedLocation);
+      openConditionalPanel(selectedLocation);
+    },
+    accelerator: formatKeyShortcut(
+      L10N.getStr("toggleCondPanel.breakpoint.key")
+    ),
+  };
+
+  const editConditionItem = {
+    id: "node-menu-edit-condition",
+    label: editConditionLabel,
+    accesskey: editConditionKey,
+    click: () => {
+      selectSpecificLocation(cx, selectedLocation);
+      openConditionalPanel(selectedLocation);
+    },
+    accelerator: formatKeyShortcut(
+      L10N.getStr("toggleCondPanel.breakpoint.key")
+    ),
+  };
+
+  const addLogPointItem = {
+    id: "node-menu-add-log-point",
+    label: L10N.getStr("editor.addLogPoint"),
+    accesskey: L10N.getStr("editor.addLogPoint.accesskey"),
+    disabled: false,
+    click: () => {
+      selectSpecificLocation(cx, selectedLocation);
+      openConditionalPanel(selectedLocation, true);
+    },
+    accelerator: formatKeyShortcut(L10N.getStr("toggleCondPanel.logPoint.key")),
+  };
+
+  const editLogPointItem = {
+    id: "node-menu-edit-log-point",
+    label: L10N.getStr("editor.editLogPoint"),
+    accesskey: L10N.getStr("editor.editLogPoint.accesskey"),
+    disabled: false,
+    click: () => {
+      selectSpecificLocation(cx, selectedLocation);
+      openConditionalPanel(selectedLocation, true);
+    },
+    accelerator: formatKeyShortcut(L10N.getStr("toggleCondPanel.logPoint.key")),
+  };
+
+  const removeLogPointItem = {
+    id: "node-menu-remove-log",
+    label: L10N.getStr("editor.removeLogPoint.label"),
+    accesskey: L10N.getStr("editor.removeLogPoint.accesskey"),
+    disabled: false,
+    click: () =>
+      setBreakpointOptions(cx, selectedLocation, {
+        ...breakpoint.options,
+        logValue: null,
+      }),
+  };
+
+  const logPointItem = breakpoint.options.logValue
+    ? editLogPointItem
+    : addLogPointItem;
+
+  const hideEnableSelfItem = !breakpoint.disabled;
+  const hideEnableAllItem = disabledBreakpoints.length === 0;
+  const hideEnableOthersItem = otherDisabledBreakpoints.length === 0;
+  const hideDisableAllItem = enabledBreakpoints.length === 0;
+  const hideDisableOthersItem = otherEnabledBreakpoints.length === 0;
+  const hideDisableSelfItem = breakpoint.disabled;
+  const hideEnableDbgStatementItem =
+    !breakpoint.originalText.startsWith("debugger") ||
+    (breakpoint.originalText.startsWith("debugger") &&
+      breakpoint.options.condition !== "false");
+  const hideDisableDbgStatementItem =
+    !breakpoint.originalText.startsWith("debugger") ||
+    (breakpoint.originalText.startsWith("debugger") &&
+      breakpoint.options.condition === "false");
+  const items = [
+    { item: enableSelfItem, hidden: () => hideEnableSelfItem },
+    { item: enableAllItem, hidden: () => hideEnableAllItem },
+    { item: enableOthersItem, hidden: () => hideEnableOthersItem },
+    {
+      item: { type: "separator" },
+      hidden: () =>
+        hideEnableSelfItem && hideEnableAllItem && hideEnableOthersItem,
+    },
+    { item: deleteSelfItem },
+    { item: deleteAllItem },
+    { item: deleteOthersItem, hidden: () => breakpoints.length === 1 },
+    {
+      item: { type: "separator" },
+      hidden: () =>
+        hideDisableSelfItem && hideDisableAllItem && hideDisableOthersItem,
+    },
+
+    { item: disableSelfItem, hidden: () => hideDisableSelfItem },
+    { item: disableAllItem, hidden: () => hideDisableAllItem },
+    { item: disableOthersItem, hidden: () => hideDisableOthersItem },
+    {
+      item: { type: "separator" },
+    },
+    {
+      item: enableDbgStatementItem,
+      hidden: () => hideEnableDbgStatementItem,
+    },
+    {
+      item: disableDbgStatementItem,
+      hidden: () => hideDisableDbgStatementItem,
+    },
+    {
+      item: { type: "separator" },
+      hidden: () => hideDisableDbgStatementItem && hideEnableDbgStatementItem,
+    },
+    {
+      item: addConditionItem,
+      hidden: () => breakpoint.options.condition,
+    },
+    {
+      item: editConditionItem,
+      hidden: () => !breakpoint.options.condition,
+    },
+    {
+      item: removeConditionItem,
+      hidden: () => !breakpoint.options.condition,
+    },
+    {
+      item: logPointItem,
+      hidden: () => !features.logPoints,
+    },
+    {
+      item: removeLogPointItem,
+      hidden: () => !features.logPoints || !breakpoint.options.logValue,
+    },
+  ];
+
+  showMenu(contextMenuEvent, buildMenu(items));
+  return null;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js
new file mode 100644
index 0000000000..0b7d70fc62
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/ExceptionOption.js
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import PropTypes from "prop-types";
+
+export default function ExceptionOption({
+  className,
+  isChecked = false,
+  label,
+  onChange,
+}) {
+  return (
+    <div className={className} onClick={onChange}>
+      <input
+        type="checkbox"
+        checked={isChecked ? "checked" : ""}
+        onChange={e => e.stopPropagation() && onChange()}
+      />
+      <div className="breakpoint-exceptions-label">{label}</div>
+    </div>
+  );
+}
+
+ExceptionOption.propTypes = {
+  className: PropTypes.string.isRequired,
+  isChecked: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
new file mode 100644
index 0000000000..3a3cc19afa
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
@@ -0,0 +1,152 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../../utils/connect";
+
+import ExceptionOption from "./ExceptionOption";
+
+import Breakpoint from "./Breakpoint";
+import BreakpointHeading from "./BreakpointHeading";
+
+import actions from "../../../actions";
+import { getSelectedLocation } from "../../../utils/selected-location";
+import { createHeadlessEditor } from "../../../utils/editor/create-editor";
+
+import { makeBreakpointId } from "../../../utils/breakpoint";
+
+import {
+  getSelectedSource,
+  getBreakpointSources,
+  getBlackBoxRanges,
+} from "../../../selectors";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+import "./Breakpoints.css";
+
+class Breakpoints extends Component {
+  static get propTypes() {
+    return {
+      breakpointSources: PropTypes.array.isRequired,
+      pauseOnExceptions: PropTypes.func.isRequired,
+      selectedSource: PropTypes.object,
+      shouldPauseOnCaughtExceptions: PropTypes.bool.isRequired,
+      shouldPauseOnExceptions: PropTypes.bool.isRequired,
+      blackboxedRanges: PropTypes.array.isRequired,
+    };
+  }
+
+  componentWillUnmount() {
+    this.removeEditor();
+  }
+
+  getEditor() {
+    if (!this.headlessEditor) {
+      this.headlessEditor = createHeadlessEditor();
+    }
+    return this.headlessEditor;
+  }
+
+  removeEditor() {
+    if (!this.headlessEditor) {
+      return;
+    }
+    this.headlessEditor.destroy();
+    this.headlessEditor = null;
+  }
+
+  renderExceptionsOptions() {
+    const {
+      breakpointSources,
+      shouldPauseOnExceptions,
+      shouldPauseOnCaughtExceptions,
+      pauseOnExceptions,
+    } = this.props;
+
+    const isEmpty = !breakpointSources.length;
+
+    return (
+      <div
+        className={classnames("breakpoints-exceptions-options", {
+          empty: isEmpty,
+        })}
+      >
+        <ExceptionOption
+          className="breakpoints-exceptions"
+          label={L10N.getStr("pauseOnExceptionsItem2")}
+          isChecked={shouldPauseOnExceptions}
+          onChange={() => pauseOnExceptions(!shouldPauseOnExceptions, false)}
+        />
+
+        {shouldPauseOnExceptions && (
+          <ExceptionOption
+            className="breakpoints-exceptions-caught"
+            label={L10N.getStr("pauseOnCaughtExceptionsItem")}
+            isChecked={shouldPauseOnCaughtExceptions}
+            onChange={() =>
+              pauseOnExceptions(true, !shouldPauseOnCaughtExceptions)
+            }
+          />
+        )}
+      </div>
+    );
+  }
+
+  renderBreakpoints() {
+    const { breakpointSources, selectedSource, blackboxedRanges } = this.props;
+    if (!breakpointSources.length) {
+      return null;
+    }
+
+    const editor = this.getEditor();
+    const sources = breakpointSources.map(({ source }) => source);
+
+    return (
+      <div className="pane breakpoints-list">
+        {breakpointSources.map(({ source, breakpoints }) => {
+          return [
+            <BreakpointHeading
+              key={source.id}
+              source={source}
+              sources={sources}
+            />,
+            breakpoints.map(breakpoint => (
+              <Breakpoint
+                breakpoint={breakpoint}
+                source={source}
+                blackboxedRangesForSource={blackboxedRanges[source.url]}
+                selectedSource={selectedSource}
+                editor={editor}
+                key={makeBreakpointId(
+                  getSelectedLocation(breakpoint, selectedSource)
+                )}
+              />
+            )),
+          ];
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="pane">
+        {this.renderExceptionsOptions()}
+        {this.renderBreakpoints()}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  breakpointSources: getBreakpointSources(state),
+  selectedSource: getSelectedSource(state),
+  blackboxedRanges: getBlackBoxRanges(state),
+});
+
+export default connect(mapStateToProps, {
+  pauseOnExceptions: actions.pauseOnExceptions,
+})(Breakpoints);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/moz.build b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/moz.build
new file mode 100644
index 0000000000..2b075efdd4
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/moz.build
@@ -0,0 +1,15 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# 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/.
+
+DIRS += []
+
+CompiledModules(
+    "Breakpoint.js",
+    "BreakpointHeading.js",
+    "BreakpointHeadingsContextMenu.js",
+    "BreakpointsContextMenu.js",
+    "ExceptionOption.js",
+    "index.js",
+)
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js
new file mode 100644
index 0000000000..a28f9b06d5
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js
@@ -0,0 +1,104 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+
+import Breakpoint from "../Breakpoint";
+import {
+  createSourceObject,
+  createOriginalSourceObject,
+} from "../../../../utils/test-head";
+
+describe("Breakpoint", () => {
+  it("simple", () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("disabled", () => {
+    const { component } = render({}, makeBreakpoint({ disabled: true }));
+    expect(component).toMatchSnapshot();
+  });
+
+  it("paused at a generatedLocation", () => {
+    const { component } = render({
+      frame: { selectedLocation: generatedLocation },
+    });
+    expect(component).toMatchSnapshot();
+  });
+
+  it("paused at an original location", () => {
+    const source = createSourceObject("foo");
+    const origSource = createOriginalSourceObject(source);
+
+    const { component } = render(
+      {
+        selectedSource: origSource,
+        frame: { selectedLocation: location },
+      },
+      { location, options: {} }
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("paused at a different", () => {
+    const { component } = render({
+      frame: { selectedLocation: { ...generatedLocation, line: 14 } },
+    });
+    expect(component).toMatchSnapshot();
+  });
+});
+
+const generatedLocation = { source: { id: "foo" }, line: 53, column: 73 };
+const location = { source: { id: "foo/original" }, line: 5, column: 7 };
+
+function render(overrides = {}, breakpointOverrides = {}) {
+  const props = generateDefaults(overrides, breakpointOverrides);
+  const component = shallow(<Breakpoint.WrappedComponent {...props} />);
+  const defaultState = component.state();
+  const instance = component.instance();
+
+  return { component, props, defaultState, instance };
+}
+
+function makeBreakpoint(overrides = {}) {
+  return {
+    location,
+    generatedLocation,
+    disabled: false,
+    options: {},
+    ...overrides,
+    id: 1,
+  };
+}
+
+function generateDefaults(overrides = {}, breakpointOverrides = {}) {
+  const source = createSourceObject("foo");
+  const breakpoint = makeBreakpoint(breakpointOverrides);
+  const selectedSource = createSourceObject("foo");
+  return {
+    cx: {},
+    disableBreakpoint: () => {},
+    enableBreakpoint: () => {},
+    openConditionalPanel: () => {},
+    removeBreakpoint: () => {},
+    selectSpecificLocation: () => {},
+    blackboxedRangesForSource: [],
+    checkSourceOnIgnoreList: () => {},
+    source,
+    breakpoint,
+    selectedSource,
+    frame: null,
+    editor: {
+      CodeMirror: {
+        runMode: function () {
+          return "";
+        },
+      },
+    },
+    ...overrides,
+  };
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/BreakpointsContextMenu.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/BreakpointsContextMenu.spec.js
new file mode 100644
index 0000000000..87194f762d
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/BreakpointsContextMenu.spec.js
@@ -0,0 +1,134 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+
+import BreakpointsContextMenu from "../BreakpointsContextMenu";
+import { buildMenu } from "../../../../context-menu/menu";
+
+import {
+  makeMockBreakpoint,
+  makeMockSource,
+  mockcx,
+} from "../../../../utils/test-mockup";
+
+jest.mock("../../../../context-menu/menu");
+
+function render(disabled = false) {
+  const props = generateDefaults(disabled);
+  const component = shallow(<BreakpointsContextMenu {...props} />);
+  return { component, props };
+}
+
+function generateDefaults(disabled) {
+  const source = makeMockSource(
+    "https://example.com/main.js",
+    "source-https://example.com/main.js"
+  );
+  const breakpoints = [
+    {
+      ...makeMockBreakpoint(source, 1),
+      id: "https://example.com/main.js:1:",
+      disabled,
+      options: {
+        condition: "",
+        logValue: "",
+        hidden: false,
+      },
+    },
+    {
+      ...makeMockBreakpoint(source, 2),
+      id: "https://example.com/main.js:2:",
+      disabled,
+      options: {
+        hidden: false,
+      },
+    },
+    {
+      ...makeMockBreakpoint(source, 3),
+      id: "https://example.com/main.js:3:",
+      disabled,
+    },
+  ];
+
+  const props = {
+    cx: mockcx,
+    breakpoints,
+    breakpoint: breakpoints[0],
+    removeBreakpoint: jest.fn(),
+    removeBreakpoints: jest.fn(),
+    removeAllBreakpoints: jest.fn(),
+    toggleBreakpoints: jest.fn(),
+    toggleAllBreakpoints: jest.fn(),
+    toggleDisabledBreakpoint: jest.fn(),
+    selectSpecificLocation: jest.fn(),
+    setBreakpointCondition: jest.fn(),
+    openConditionalPanel: jest.fn(),
+    contextMenuEvent: { preventDefault: jest.fn() },
+    selectedSource: makeMockSource(),
+    setBreakpointOptions: jest.fn(),
+    checkSourceOnIgnoreList: jest.fn(),
+  };
+  return props;
+}
+
+describe("BreakpointsContextMenu", () => {
+  afterEach(() => {
+    buildMenu.mockReset();
+  });
+
+  describe("context menu actions affecting other breakpoints", () => {
+    it("'remove others' calls removeBreakpoints with proper arguments", () => {
+      const { props } = render();
+      const menuItems = buildMenu.mock.calls[0][0];
+      const deleteOthers = menuItems.find(
+        item => item.item.id === "node-menu-delete-other"
+      );
+      deleteOthers.item.click();
+
+      expect(props.removeBreakpoints).toHaveBeenCalled();
+
+      const otherBreakpoints = [props.breakpoints[1], props.breakpoints[2]];
+      expect(props.removeBreakpoints.mock.calls[0][1]).toEqual(
+        otherBreakpoints
+      );
+    });
+
+    it("'enable others' calls toggleBreakpoints with proper arguments", () => {
+      const { props } = render(true);
+      const menuItems = buildMenu.mock.calls[0][0];
+      const enableOthers = menuItems.find(
+        item => item.item.id === "node-menu-enable-others"
+      );
+      enableOthers.item.click();
+
+      expect(props.toggleBreakpoints).toHaveBeenCalled();
+
+      expect(props.toggleBreakpoints.mock.calls[0][1]).toBe(false);
+
+      const otherBreakpoints = [props.breakpoints[1], props.breakpoints[2]];
+      expect(props.toggleBreakpoints.mock.calls[0][2]).toEqual(
+        otherBreakpoints
+      );
+    });
+
+    it("'disable others' calls toggleBreakpoints with proper arguments", () => {
+      const { props } = render();
+      const menuItems = buildMenu.mock.calls[0][0];
+      const disableOthers = menuItems.find(
+        item => item.item.id === "node-menu-disable-others"
+      );
+      disableOthers.item.click();
+
+      expect(props.toggleBreakpoints).toHaveBeenCalled();
+      expect(props.toggleBreakpoints.mock.calls[0][1]).toBe(true);
+
+      const otherBreakpoints = [props.breakpoints[1], props.breakpoints[2]];
+      expect(props.toggleBreakpoints.mock.calls[0][2]).toEqual(
+        otherBreakpoints
+      );
+    });
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js
new file mode 100644
index 0000000000..238551cc10
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js
@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+
+import ExceptionOption from "../ExceptionOption";
+
+describe("ExceptionOption renders", () => {
+  it("with values", () => {
+    const component = shallow(
+      <ExceptionOption
+        label="testLabel"
+        isChecked={true}
+        onChange={() => null}
+        className="testClassName"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/__snapshots__/Breakpoint.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/__snapshots__/Breakpoint.spec.js.snap
new file mode 100644
index 0000000000..45f44e42f7
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/__snapshots__/Breakpoint.spec.js.snap
@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breakpoint disabled 1`] = `
+<div
+  className="breakpoint disabled"
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onDoubleClick={[Function]}
+>
+  <input
+    aria-labelledby="1-label"
+    checked={false}
+    className="breakpoint-checkbox"
+    disabled={true}
+    id={1}
+    onChange={[Function]}
+    onClick={[Function]}
+    type="checkbox"
+  />
+  <span
+    className="breakpoint-label cm-s-mozilla devtools-monospace"
+    id="1-label"
+    onClick={[Function]}
+  >
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </span>
+  <div
+    className="breakpoint-line-close"
+  >
+    <div
+      className="breakpoint-line devtools-monospace"
+    >
+      53:73
+    </div>
+    <CloseButton
+      handleClick={[Function]}
+      tooltip="Remove breakpoint"
+    />
+  </div>
+</div>
+`;
+
+exports[`Breakpoint paused at a different 1`] = `
+<div
+  className="breakpoint"
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onDoubleClick={[Function]}
+>
+  <input
+    aria-labelledby="1-label"
+    checked={true}
+    className="breakpoint-checkbox"
+    disabled={true}
+    id={1}
+    onChange={[Function]}
+    onClick={[Function]}
+    type="checkbox"
+  />
+  <span
+    className="breakpoint-label cm-s-mozilla devtools-monospace"
+    id="1-label"
+    onClick={[Function]}
+  >
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </span>
+  <div
+    className="breakpoint-line-close"
+  >
+    <div
+      className="breakpoint-line devtools-monospace"
+    >
+      53:73
+    </div>
+    <CloseButton
+      handleClick={[Function]}
+      tooltip="Remove breakpoint"
+    />
+  </div>
+</div>
+`;
+
+exports[`Breakpoint paused at a generatedLocation 1`] = `
+<div
+  className="breakpoint paused"
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onDoubleClick={[Function]}
+>
+  <input
+    aria-labelledby="1-label"
+    checked={true}
+    className="breakpoint-checkbox"
+    disabled={true}
+    id={1}
+    onChange={[Function]}
+    onClick={[Function]}
+    type="checkbox"
+  />
+  <span
+    className="breakpoint-label cm-s-mozilla devtools-monospace"
+    id="1-label"
+    onClick={[Function]}
+  >
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </span>
+  <div
+    className="breakpoint-line-close"
+  >
+    <div
+      className="breakpoint-line devtools-monospace"
+    >
+      53:73
+    </div>
+    <CloseButton
+      handleClick={[Function]}
+      tooltip="Remove breakpoint"
+    />
+  </div>
+</div>
+`;
+
+exports[`Breakpoint paused at an original location 1`] = `
+<div
+  className="breakpoint paused"
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onDoubleClick={[Function]}
+>
+  <input
+    aria-labelledby="1-label"
+    checked={true}
+    className="breakpoint-checkbox"
+    disabled={true}
+    id={1}
+    onChange={[Function]}
+    onClick={[Function]}
+    type="checkbox"
+  />
+  <span
+    className="breakpoint-label cm-s-mozilla devtools-monospace"
+    id="1-label"
+    onClick={[Function]}
+  >
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </span>
+  <div
+    className="breakpoint-line-close"
+  >
+    <div
+      className="breakpoint-line devtools-monospace"
+    >
+      5:7
+    </div>
+    <CloseButton
+      handleClick={[Function]}
+      tooltip="Remove breakpoint"
+    />
+  </div>
+</div>
+`;
+
+exports[`Breakpoint simple 1`] = `
+<div
+  className="breakpoint"
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onDoubleClick={[Function]}
+>
+  <input
+    aria-labelledby="1-label"
+    checked={true}
+    className="breakpoint-checkbox"
+    disabled={true}
+    id={1}
+    onChange={[Function]}
+    onClick={[Function]}
+    type="checkbox"
+  />
+  <span
+    className="breakpoint-label cm-s-mozilla devtools-monospace"
+    id="1-label"
+    onClick={[Function]}
+  >
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </span>
+  <div
+    className="breakpoint-line-close"
+  >
+    <div
+      className="breakpoint-line devtools-monospace"
+    >
+      53:73
+    </div>
+    <CloseButton
+      handleClick={[Function]}
+      tooltip="Remove breakpoint"
+    />
+  </div>
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/__snapshots__/ExceptionOption.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/__snapshots__/ExceptionOption.spec.js.snap
new file mode 100644
index 0000000000..19b5937676
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/__snapshots__/ExceptionOption.spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExceptionOption renders with values 1`] = `
+<div
+  className="testClassName"
+  onClick={[Function]}
+>
+  <input
+    checked="checked"
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <div
+    className="breakpoint-exceptions-label"
+  >
+    testLabel
+  </div>
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.css b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.css
new file mode 100644
index 0000000000..68bd0bfcdd
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.css
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.command-bar {
+  flex: 0 0 29px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  overflow: hidden;
+  z-index: 1;
+  background-color: var(--theme-toolbar-background);
+}
+
+html[dir="rtl"] .command-bar {
+  border-right: 1px solid var(--theme-splitter-color);
+}
+
+.command-bar .filler {
+  flex-grow: 1;
+}
+
+.command-bar .step-position {
+  color: var(--theme-text-color-inactive);
+  padding-top: 8px;
+  margin-inline-end: 4px;
+}
+
+.command-bar .divider {
+  width: 1px;
+  background: var(--theme-splitter-color);
+  height: 10px;
+  margin: 11px 6px 0 6px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
new file mode 100644
index 0000000000..a8f4173924
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
@@ -0,0 +1,433 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { connect } from "../../utils/connect";
+import { features, prefs } from "../../utils/prefs";
+import {
+  getIsWaitingOnBreak,
+  getSkipPausing,
+  getCurrentThread,
+  isTopFrameSelected,
+  getThreadContext,
+  getIsCurrentThreadPaused,
+  getIsThreadCurrentlyTracing,
+  getJavascriptTracingLogMethod,
+} from "../../selectors";
+import { formatKeyShortcut } from "../../utils/text";
+import actions from "../../actions";
+import { debugBtn } from "../shared/Button/CommandBarButton";
+import AccessibleImage from "../shared/AccessibleImage";
+import "./CommandBar.css";
+import { showMenu } from "../../context-menu/menu";
+
+const classnames = require("devtools/client/shared/classnames.js");
+const MenuButton = require("devtools/client/shared/components/menu/MenuButton");
+const MenuItem = require("devtools/client/shared/components/menu/MenuItem");
+const MenuList = require("devtools/client/shared/components/menu/MenuList");
+
+const isMacOS = Services.appinfo.OS === "Darwin";
+
+// NOTE: the "resume" command will call either the resume or breakOnNext action
+// depending on whether or not the debugger is paused or running
+const COMMANDS = ["resume", "stepOver", "stepIn", "stepOut"];
+
+const KEYS = {
+  WINNT: {
+    resume: "F8",
+    stepOver: "F10",
+    stepIn: "F11",
+    stepOut: "Shift+F11",
+  },
+  Darwin: {
+    resume: "Cmd+\\",
+    stepOver: "Cmd+'",
+    stepIn: "Cmd+;",
+    stepOut: "Cmd+Shift+:",
+    stepOutDisplay: "Cmd+Shift+;",
+  },
+  Linux: {
+    resume: "F8",
+    stepOver: "F10",
+    stepIn: "F11",
+    stepOut: "Shift+F11",
+  },
+};
+
+const LOG_METHODS = {
+  CONSOLE: "console",
+  STDOUT: "stdout",
+};
+
+function getKey(action) {
+  return getKeyForOS(Services.appinfo.OS, action);
+}
+
+function getKeyForOS(os, action) {
+  const osActions = KEYS[os] || KEYS.Linux;
+  return osActions[action];
+}
+
+function formatKey(action) {
+  const key = getKey(`${action}Display`) || getKey(action);
+  if (isMacOS) {
+    const winKey =
+      getKeyForOS("WINNT", `${action}Display`) || getKeyForOS("WINNT", action);
+    // display both Windows type and Mac specific keys
+    return formatKeyShortcut([key, winKey].join(" "));
+  }
+  return formatKeyShortcut(key);
+}
+
+class CommandBar extends Component {
+  constructor() {
+    super();
+
+    this.state = {};
+  }
+  static get propTypes() {
+    return {
+      breakOnNext: PropTypes.func.isRequired,
+      cx: PropTypes.object.isRequired,
+      horizontal: PropTypes.bool.isRequired,
+      isPaused: PropTypes.bool.isRequired,
+      isTracingEnabled: PropTypes.bool.isRequired,
+      isWaitingOnBreak: PropTypes.bool.isRequired,
+      javascriptEnabled: PropTypes.bool.isRequired,
+      trace: PropTypes.func.isRequired,
+      resume: PropTypes.func.isRequired,
+      skipPausing: PropTypes.bool.isRequired,
+      stepIn: PropTypes.func.isRequired,
+      stepOut: PropTypes.func.isRequired,
+      stepOver: PropTypes.func.isRequired,
+      toggleEditorWrapping: PropTypes.func.isRequired,
+      toggleInlinePreview: PropTypes.func.isRequired,
+      toggleJavaScriptEnabled: PropTypes.func.isRequired,
+      toggleSkipPausing: PropTypes.any.isRequired,
+      toggleSourceMapsEnabled: PropTypes.func.isRequired,
+      topFrameSelected: PropTypes.bool.isRequired,
+      toggleTracing: PropTypes.func.isRequired,
+      logMethod: PropTypes.string.isRequired,
+      setJavascriptTracingLogMethod: PropTypes.func.isRequired,
+      setHideOrShowIgnoredSources: PropTypes.func.isRequired,
+      toggleSourceMapIgnoreList: PropTypes.func.isRequired,
+    };
+  }
+
+  componentWillUnmount() {
+    const { shortcuts } = this.context;
+
+    COMMANDS.forEach(action => shortcuts.off(getKey(action)));
+
+    if (isMacOS) {
+      COMMANDS.forEach(action => shortcuts.off(getKeyForOS("WINNT", action)));
+    }
+  }
+
+  componentDidMount() {
+    const { shortcuts } = this.context;
+
+    COMMANDS.forEach(action =>
+      shortcuts.on(getKey(action), e => this.handleEvent(e, action))
+    );
+
+    if (isMacOS) {
+      // The Mac supports both the Windows Function keys
+      // as well as the Mac non-Function keys
+      COMMANDS.forEach(action =>
+        shortcuts.on(getKeyForOS("WINNT", action), e =>
+          this.handleEvent(e, action)
+        )
+      );
+    }
+  }
+
+  handleEvent(e, action) {
+    const { cx } = this.props;
+    e.preventDefault();
+    e.stopPropagation();
+    if (action === "resume") {
+      this.props.isPaused ? this.props.resume() : this.props.breakOnNext(cx);
+    } else {
+      this.props[action](cx);
+    }
+  }
+
+  renderStepButtons() {
+    const { isPaused, topFrameSelected } = this.props;
+    const className = isPaused ? "active" : "disabled";
+    const isDisabled = !isPaused;
+
+    return [
+      this.renderTraceButton(),
+      this.renderPauseButton(),
+      debugBtn(
+        () => this.props.stepOver(),
+        "stepOver",
+        className,
+        L10N.getFormatStr("stepOverTooltip", formatKey("stepOver")),
+        isDisabled
+      ),
+      debugBtn(
+        () => this.props.stepIn(),
+        "stepIn",
+        className,
+        L10N.getFormatStr("stepInTooltip", formatKey("stepIn")),
+        isDisabled || !topFrameSelected
+      ),
+      debugBtn(
+        () => this.props.stepOut(),
+        "stepOut",
+        className,
+        L10N.getFormatStr("stepOutTooltip", formatKey("stepOut")),
+        isDisabled
+      ),
+    ];
+  }
+
+  resume() {
+    this.props.resume();
+  }
+
+  renderTraceButton() {
+    if (!features.javascriptTracing) {
+      return null;
+    }
+    // Display a button which:
+    // - on left click, would toggle on/off javascript tracing
+    // - on right click, would display a context menu allowing to choose the loggin output (console or stdout)
+    return (
+      <button
+        className={`devtools-button command-bar-button debugger-trace-menu-button ${
+          this.props.isTracingEnabled ? "active" : ""
+        }`}
+        title={
+          this.props.isTracingEnabled
+            ? L10N.getStr("stopTraceButtonTooltip")
+            : L10N.getFormatStr("startTraceButtonTooltip", this.props.logMethod)
+        }
+        onClick={event => {
+          this.props.toggleTracing(this.props.logMethod);
+        }}
+        onContextMenu={event => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          // Avoid showing the menu to avoid having to support chaging tracing config "live"
+          if (this.props.isTracingEnabled) {
+            return;
+          }
+
+          const items = [
+            {
+              id: "debugger-trace-menu-item-console",
+              label: L10N.getStr("traceInWebConsole"),
+              checked: this.props.logMethod == LOG_METHODS.CONSOLE,
+              click: () => {
+                this.props.setJavascriptTracingLogMethod(LOG_METHODS.CONSOLE);
+              },
+            },
+            {
+              id: "debugger-trace-menu-item-stdout",
+              label: L10N.getStr("traceInStdout"),
+              checked: this.props.logMethod == LOG_METHODS.STDOUT,
+              click: () => {
+                this.props.setJavascriptTracingLogMethod(LOG_METHODS.STDOUT);
+              },
+            },
+          ];
+          showMenu(event, items);
+        }}
+      />
+    );
+  }
+
+  renderPauseButton() {
+    const { cx, breakOnNext, isWaitingOnBreak } = this.props;
+
+    if (this.props.isPaused) {
+      return debugBtn(
+        () => this.resume(),
+        "resume",
+        "active",
+        L10N.getFormatStr("resumeButtonTooltip", formatKey("resume"))
+      );
+    }
+
+    if (isWaitingOnBreak) {
+      return debugBtn(
+        null,
+        "pause",
+        "disabled",
+        L10N.getStr("pausePendingButtonTooltip"),
+        true
+      );
+    }
+
+    return debugBtn(
+      () => breakOnNext(cx),
+      "pause",
+      "active",
+      L10N.getFormatStr("pauseButtonTooltip", formatKey("resume"))
+    );
+  }
+
+  renderSkipPausingButton() {
+    const { skipPausing, toggleSkipPausing } = this.props;
+
+    return (
+      <button
+        className={classnames(
+          "command-bar-button",
+          "command-bar-skip-pausing",
+          {
+            active: skipPausing,
+          }
+        )}
+        title={
+          skipPausing
+            ? L10N.getStr("undoSkipPausingTooltip.label")
+            : L10N.getStr("skipPausingTooltip.label")
+        }
+        onClick={toggleSkipPausing}
+      >
+        <AccessibleImage
+          className={skipPausing ? "enable-pausing" : "disable-pausing"}
+        />
+      </button>
+    );
+  }
+
+  renderSettingsButton() {
+    const { toolboxDoc } = this.context;
+
+    return (
+      <MenuButton
+        menuId="debugger-settings-menu-button"
+        toolboxDoc={toolboxDoc}
+        className="devtools-button command-bar-button debugger-settings-menu-button"
+        title={L10N.getStr("settings.button.label")}
+      >
+        {() => this.renderSettingsMenuItems()}
+      </MenuButton>
+    );
+  }
+
+  renderSettingsMenuItems() {
+    return (
+      <MenuList id="debugger-settings-menu-list">
+        <MenuItem
+          key="debugger-settings-menu-item-disable-javascript"
+          className="menu-item debugger-settings-menu-item-disable-javascript"
+          checked={!this.props.javascriptEnabled}
+          label={L10N.getStr("settings.disableJavaScript.label")}
+          tooltip={L10N.getStr("settings.disableJavaScript.tooltip")}
+          onClick={() => {
+            this.props.toggleJavaScriptEnabled(!this.props.javascriptEnabled);
+          }}
+        />
+        <MenuItem
+          key="debugger-settings-menu-item-disable-inline-previews"
+          checked={features.inlinePreview}
+          label={L10N.getStr("inlinePreview.toggle.label")}
+          tooltip={L10N.getStr("inlinePreview.toggle.tooltip")}
+          onClick={() =>
+            this.props.toggleInlinePreview(!features.inlinePreview)
+          }
+        />
+        <MenuItem
+          key="debugger-settings-menu-item-disable-wrap-lines"
+          checked={prefs.editorWrapping}
+          label={L10N.getStr("editorWrapping.toggle.label")}
+          tooltip={L10N.getStr("editorWrapping.toggle.tooltip")}
+          onClick={() => this.props.toggleEditorWrapping(!prefs.editorWrapping)}
+        />
+        <MenuItem
+          key="debugger-settings-menu-item-disable-sourcemaps"
+          checked={prefs.clientSourceMapsEnabled}
+          label={L10N.getStr("settings.toggleSourceMaps.label")}
+          tooltip={L10N.getStr("settings.toggleSourceMaps.tooltip")}
+          onClick={() =>
+            this.props.toggleSourceMapsEnabled(!prefs.clientSourceMapsEnabled)
+          }
+        />
+        <MenuItem
+          key="debugger-settings-menu-item-hide-ignored-sources"
+          className="menu-item debugger-settings-menu-item-hide-ignored-sources"
+          checked={prefs.hideIgnoredSources}
+          label={L10N.getStr("settings.hideIgnoredSources.label")}
+          tooltip={L10N.getStr("settings.hideIgnoredSources.tooltip")}
+          onClick={() =>
+            this.props.setHideOrShowIgnoredSources(!prefs.hideIgnoredSources)
+          }
+        />
+        <MenuItem
+          key="debugger-settings-menu-item-enable-sourcemap-ignore-list"
+          className="menu-item debugger-settings-menu-item-enable-sourcemap-ignore-list"
+          checked={prefs.sourceMapIgnoreListEnabled}
+          label={L10N.getStr("settings.enableSourceMapIgnoreList.label")}
+          tooltip={L10N.getStr("settings.enableSourceMapIgnoreList.tooltip")}
+          onClick={() =>
+            this.props.toggleSourceMapIgnoreList(
+              this.props.cx,
+              !prefs.sourceMapIgnoreListEnabled
+            )
+          }
+        />
+      </MenuList>
+    );
+  }
+
+  render() {
+    return (
+      <div
+        className={classnames("command-bar", {
+          vertical: !this.props.horizontal,
+        })}
+      >
+        {this.renderStepButtons()}
+        <div className="filler" />
+        {this.renderSkipPausingButton()}
+        <div className="devtools-separator" />
+        {this.renderSettingsButton()}
+      </div>
+    );
+  }
+}
+
+CommandBar.contextTypes = {
+  shortcuts: PropTypes.object,
+  toolboxDoc: PropTypes.object,
+};
+
+const mapStateToProps = state => ({
+  cx: getThreadContext(state),
+  isWaitingOnBreak: getIsWaitingOnBreak(state, getCurrentThread(state)),
+  skipPausing: getSkipPausing(state),
+  topFrameSelected: isTopFrameSelected(state, getCurrentThread(state)),
+  javascriptEnabled: state.ui.javascriptEnabled,
+  isPaused: getIsCurrentThreadPaused(state),
+  isTracingEnabled: getIsThreadCurrentlyTracing(state, getCurrentThread(state)),
+  logMethod: getJavascriptTracingLogMethod(state),
+});
+
+export default connect(mapStateToProps, {
+  toggleTracing: actions.toggleTracing,
+  setJavascriptTracingLogMethod: actions.setJavascriptTracingLogMethod,
+  resume: actions.resume,
+  stepIn: actions.stepIn,
+  stepOut: actions.stepOut,
+  stepOver: actions.stepOver,
+  breakOnNext: actions.breakOnNext,
+  pauseOnExceptions: actions.pauseOnExceptions,
+  toggleSkipPausing: actions.toggleSkipPausing,
+  toggleInlinePreview: actions.toggleInlinePreview,
+  toggleEditorWrapping: actions.toggleEditorWrapping,
+  toggleSourceMapsEnabled: actions.toggleSourceMapsEnabled,
+  toggleJavaScriptEnabled: actions.toggleJavaScriptEnabled,
+  setHideOrShowIgnoredSources: actions.setHideOrShowIgnoredSources,
+  toggleSourceMapIgnoreList: actions.toggleSourceMapIgnoreList,
+})(CommandBar);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css
new file mode 100644
index 0000000000..b525783984
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+ .dom-mutation-empty {
+  padding: 6px 20px;
+  text-align: center;
+  font-style: italic;
+  color: var(--theme-body-color);
+  white-space: normal;
+ }
+
+ .dom-mutation-empty a {
+   text-decoration: underline;
+   color: var(--theme-toolbar-selected-color);
+   cursor: pointer;
+ }
+
+.dom-mutation-list * {
+  user-select: none;
+}
+
+.dom-mutation-list {
+  padding: 4px 0;
+  list-style-type: none;
+}
+
+.dom-mutation-list li {
+  position: relative;
+
+  display: flex;
+  align-items: start;
+  overflow: hidden;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-inline-start: 20px;
+  padding-inline-end: 12px;
+}
+
+.dom-mutation-list input {
+  margin: 2px 3px;
+
+  padding-inline-start: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: 0;
+  margin-inline-end: 2px;
+  vertical-align: text-bottom;
+}
+
+.dom-mutation-info {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-inline-end: 20px;
+}
+
+.dom-mutation-list .close-btn {
+  position: absolute;
+  /* hide button outside of row until hovered or focused */
+  top: -100px;
+}
+
+/* Reveal the remove button on hover/focus */
+.dom-mutation-list li:hover .close-btn,
+.dom-mutation-list li .close-btn:focus {
+  top: calc(50% - 8px);
+}
+
+[dir="ltr"] .dom-mutation-list .close-btn {
+  right: 12px;
+}
+
+[dir="rtl"] .dom-mutation-list .close-btn {
+  left: 12px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js
new file mode 100644
index 0000000000..375dad5563
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js
@@ -0,0 +1,175 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import Reps from "devtools/client/shared/components/reps/index";
+const {
+  REPS: { Rep },
+  MODE,
+} = Reps;
+import { translateNodeFrontToGrip } from "inspector-shared-utils";
+
+import {
+  deleteDOMMutationBreakpoint,
+  toggleDOMMutationBreakpointState,
+} from "framework-actions";
+
+import actions from "../../actions";
+import { connect } from "../../utils/connect";
+
+import { CloseButton } from "../shared/Button";
+
+import "./DOMMutationBreakpoints.css";
+
+const localizationTerms = {
+  subtree: L10N.getStr("domMutationTypes.subtree"),
+  attribute: L10N.getStr("domMutationTypes.attribute"),
+  removal: L10N.getStr("domMutationTypes.removal"),
+};
+
+class DOMMutationBreakpointsContents extends Component {
+  static get propTypes() {
+    return {
+      breakpoints: PropTypes.array.isRequired,
+      deleteBreakpoint: PropTypes.func.isRequired,
+      highlightDomElement: PropTypes.func.isRequired,
+      openElementInInspector: PropTypes.func.isRequired,
+      openInspector: PropTypes.func.isRequired,
+      setSkipPausing: PropTypes.func.isRequired,
+      toggleBreakpoint: PropTypes.func.isRequired,
+      unHighlightDomElement: PropTypes.func.isRequired,
+    };
+  }
+
+  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) {
+    const {
+      openElementInInspector,
+      highlightDomElement,
+      unHighlightDomElement,
+      deleteBreakpoint,
+    } = this.props;
+    const { enabled, id: breakpointId, nodeFront, mutationType } = breakpoint;
+
+    return (
+      <li key={breakpoint.id}>
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={() => this.handleBreakpoint(breakpointId, !enabled)}
+        />
+        <div className="dom-mutation-info">
+          <div className="dom-mutation-label">
+            {Rep({
+              object: translateNodeFrontToGrip(nodeFront),
+              mode: MODE.TINY,
+              onDOMNodeClick: () => openElementInInspector(nodeFront),
+              onInspectIconClick: () => openElementInInspector(nodeFront),
+              onDOMNodeMouseOver: () => highlightDomElement(nodeFront),
+              onDOMNodeMouseOut: () => unHighlightDomElement(),
+            })}
+          </div>
+          <div className="dom-mutation-type">
+            {localizationTerms[mutationType] || mutationType}
+          </div>
+        </div>
+        <CloseButton
+          handleClick={() => deleteBreakpoint(nodeFront, mutationType)}
+        />
+      </li>
+    );
+  }
+
+  /* eslint-disable react/no-danger */
+  renderEmpty() {
+    const { openInspector } = this.props;
+    const text = L10N.getFormatStr(
+      "noDomMutationBreakpoints",
+      `<a>${L10N.getStr("inspectorTool")}</a>`
+    );
+
+    return (
+      <div className="dom-mutation-empty">
+        <div
+          onClick={() => openInspector()}
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { breakpoints } = this.props;
+
+    if (breakpoints.length === 0) {
+      return this.renderEmpty();
+    }
+
+    return (
+      <ul className="dom-mutation-list">
+        {breakpoints.map(breakpoint => this.renderItem(breakpoint))}
+      </ul>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  breakpoints: state.domMutationBreakpoints.breakpoints,
+});
+
+const DOMMutationBreakpointsPanel = connect(
+  mapStateToProps,
+  {
+    deleteBreakpoint: deleteDOMMutationBreakpoint,
+    toggleBreakpoint: toggleDOMMutationBreakpointState,
+  },
+  undefined,
+  { storeKey: "toolbox-store" }
+)(DOMMutationBreakpointsContents);
+
+class DomMutationBreakpoints extends Component {
+  static get propTypes() {
+    return {
+      highlightDomElement: PropTypes.func.isRequired,
+      openElementInInspector: PropTypes.func.isRequired,
+      openInspector: PropTypes.func.isRequired,
+      setSkipPausing: PropTypes.func.isRequired,
+      unHighlightDomElement: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    return (
+      <DOMMutationBreakpointsPanel
+        openElementInInspector={this.props.openElementInInspector}
+        highlightDomElement={this.props.highlightDomElement}
+        unHighlightDomElement={this.props.unHighlightDomElement}
+        setSkipPausing={this.props.setSkipPausing}
+        openInspector={this.props.openInspector}
+      />
+    );
+  }
+}
+
+export default connect(undefined, {
+  // the debugger-specific action bound to the debugger store
+  // since there is no `storeKey`
+  openElementInInspector: actions.openElementInInspectorCommand,
+  highlightDomElement: actions.highlightDomElement,
+  unHighlightDomElement: actions.unHighlightDomElement,
+  setSkipPausing: actions.setSkipPausing,
+  openInspector: actions.openInspector,
+})(DomMutationBreakpoints);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.css b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.css
new file mode 100644
index 0000000000..2ca0670367
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.css
@@ -0,0 +1,154 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.event-listeners-content {
+  padding-block: 4px;
+}
+
+.event-listeners-content ul {
+  padding: 0;
+  list-style-type: none;
+}
+
+.event-listeners-content button:hover,
+.event-listeners-content button:focus {
+  background: none;
+}
+
+.event-listener-group {
+  user-select: none;
+}
+
+.event-listener-header {
+  display: flex;
+  align-items: center;
+}
+
+.event-listener-expand {
+  border: none;
+  background: none;
+  padding: 4px 5px;
+  line-height: 12px;
+}
+
+.event-listener-expand:hover {
+  background: transparent;
+}
+
+.event-listener-group input[type="checkbox"] {
+  margin: 0;
+  margin-inline-end: 4px;
+}
+
+.event-listener-label {
+  display: flex;
+  align-items: center;
+  padding-inline-end: 10px;
+}
+
+.event-listener-category {
+  padding: 3px 0;
+  line-height: 14px;
+}
+
+.event-listeners-content .arrow {
+  margin-inline-end: 0;
+}
+
+.event-listeners-content .arrow.expanded {
+  transform: rotate(0deg);
+}
+
+.event-listeners-content .arrow.expanded:dir(rtl) {
+  transform: rotate(90deg);
+}
+
+.event-listeners-list {
+  border-block-start: 1px;
+  padding-inline: 18px 20px;
+}
+
+.event-listener-event {
+  display: flex;
+  align-items: center;
+}
+
+.event-listeners-list .event-listener-event {
+  margin-inline-start: 40px;
+}
+
+.event-search-results-list .event-listener-event {
+  padding-inline: 20px;
+}
+
+.event-listener-name {
+  line-height: 14px;
+  padding: 3px 0;
+}
+
+.event-listener-event input {
+  margin-inline: 0 4px;
+  margin-block: 0;
+}
+
+.event-search-container {
+  display: flex;
+  border: 1px solid transparent;
+  border-block-end: 1px solid var(--theme-splitter-color);
+}
+
+.event-search-form {
+  display: flex;
+  flex-grow: 1;
+}
+
+.event-search-input {
+  flex-grow: 1;
+  margin: 0;
+  font-size: inherit;
+  background-color: var(--theme-sidebar-background);
+  border: 0;
+  outline: 0;
+  height: 24px;
+  color: var(--theme-body-color);
+  background-image: url("chrome://devtools/skin/images/filter-small.svg");
+  background-position-x: 4px;
+  background-position-y: 50%;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+  text-align: match-parent;
+}
+
+:root:dir(ltr) .event-search-input {
+  /* Be explicit about left/right direction to prevent the text/placeholder
+   * from overlapping the background image when the user changes the text
+   * direction manually (e.g. via Ctrl+Shift). */
+  padding-left: 19px;
+  padding-right: 12px;
+}
+
+:root:dir(rtl) .event-search-input {
+  background-position-x: right 4px;
+  padding-right: 19px;
+  padding-left: 12px;
+}
+
+.category-label {
+  color: var(--theme-comment);
+}
+
+.event-search-input::placeholder {
+  color: var(--theme-text-color-alt);
+  opacity: 1;
+}
+
+.event-search-container:focus-within {
+  border: 1px solid var(--theme-highlight-blue);
+}
+
+.devtools-searchinput-clear {
+  margin-inline-end: 8px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
new file mode 100644
index 0000000000..8b7c9975b0
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
@@ -0,0 +1,295 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { connect } from "../../utils/connect";
+import actions from "../../actions";
+import {
+  getActiveEventListeners,
+  getEventListenerBreakpointTypes,
+  getEventListenerExpanded,
+} from "../../selectors";
+
+import AccessibleImage from "../shared/AccessibleImage";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+import "./EventListeners.css";
+
+class EventListeners extends Component {
+  state = {
+    searchText: "",
+    focused: false,
+  };
+
+  static get propTypes() {
+    return {
+      activeEventListeners: PropTypes.array.isRequired,
+      addEventListenerExpanded: PropTypes.func.isRequired,
+      addEventListeners: PropTypes.func.isRequired,
+      categories: PropTypes.array.isRequired,
+      expandedCategories: PropTypes.array.isRequired,
+      removeEventListenerExpanded: PropTypes.func.isRequired,
+      removeEventListeners: PropTypes.func.isRequired,
+    };
+  }
+
+  hasMatch(eventOrCategoryName, searchText) {
+    const lowercaseEventOrCategoryName = eventOrCategoryName.toLowerCase();
+    const lowercaseSearchText = searchText.toLowerCase();
+
+    return lowercaseEventOrCategoryName.includes(lowercaseSearchText);
+  }
+
+  getSearchResults() {
+    const { searchText } = this.state;
+    const { categories } = this.props;
+    const searchResults = categories.reduce((results, cat, index) => {
+      const category = categories[index];
+
+      if (this.hasMatch(category.name, searchText)) {
+        results[category.name] = category.events;
+      } else {
+        results[category.name] = category.events.filter(event =>
+          this.hasMatch(event.name, searchText)
+        );
+      }
+
+      return results;
+    }, {});
+
+    return searchResults;
+  }
+
+  onCategoryToggle(category) {
+    const {
+      expandedCategories,
+      removeEventListenerExpanded,
+      addEventListenerExpanded,
+    } = this.props;
+
+    if (expandedCategories.includes(category)) {
+      removeEventListenerExpanded(category);
+    } else {
+      addEventListenerExpanded(category);
+    }
+  }
+
+  onCategoryClick(category, isChecked) {
+    const { addEventListeners, removeEventListeners } = this.props;
+    const eventsIds = category.events.map(event => event.id);
+
+    if (isChecked) {
+      addEventListeners(eventsIds);
+    } else {
+      removeEventListeners(eventsIds);
+    }
+  }
+
+  onEventTypeClick(eventId, isChecked) {
+    const { addEventListeners, removeEventListeners } = this.props;
+    if (isChecked) {
+      addEventListeners([eventId]);
+    } else {
+      removeEventListeners([eventId]);
+    }
+  }
+
+  onInputChange = event => {
+    this.setState({ searchText: event.currentTarget.value });
+  };
+
+  onKeyDown = event => {
+    if (event.key === "Escape") {
+      this.setState({ searchText: "" });
+    }
+  };
+
+  onFocus = event => {
+    this.setState({ focused: true });
+  };
+
+  onBlur = event => {
+    this.setState({ focused: false });
+  };
+
+  renderSearchInput() {
+    const { focused, searchText } = this.state;
+    const placeholder = L10N.getStr("eventListenersHeader1.placeholder");
+
+    return (
+      <form className="event-search-form" onSubmit={e => e.preventDefault()}>
+        <input
+          className={classnames("event-search-input", { focused })}
+          placeholder={placeholder}
+          value={searchText}
+          onChange={this.onInputChange}
+          onKeyDown={this.onKeyDown}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+      </form>
+    );
+  }
+
+  renderClearSearchButton() {
+    const { searchText } = this.state;
+
+    if (!searchText) {
+      return null;
+    }
+
+    return (
+      <button
+        onClick={() => this.setState({ searchText: "" })}
+        className="devtools-searchinput-clear"
+      />
+    );
+  }
+
+  renderCategoriesList() {
+    const { categories } = this.props;
+
+    return (
+      <ul className="event-listeners-list">
+        {categories.map((category, index) => {
+          return (
+            <li className="event-listener-group" key={index}>
+              {this.renderCategoryHeading(category)}
+              {this.renderCategoryListing(category)}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  renderSearchResultsList() {
+    const searchResults = this.getSearchResults();
+
+    return (
+      <ul className="event-search-results-list">
+        {Object.keys(searchResults).map(category => {
+          return searchResults[category].map(event => {
+            return this.renderListenerEvent(event, category);
+          });
+        })}
+      </ul>
+    );
+  }
+
+  renderCategoryHeading(category) {
+    const { activeEventListeners, expandedCategories } = this.props;
+    const { events } = category;
+
+    const expanded = expandedCategories.includes(category.name);
+    const checked = events.every(({ id }) => activeEventListeners.includes(id));
+    const indeterminate =
+      !checked && events.some(({ id }) => activeEventListeners.includes(id));
+
+    return (
+      <div className="event-listener-header">
+        <button
+          className="event-listener-expand"
+          onClick={() => this.onCategoryToggle(category.name)}
+        >
+          <AccessibleImage className={classnames("arrow", { expanded })} />
+        </button>
+        <label className="event-listener-label">
+          <input
+            type="checkbox"
+            value={category.name}
+            onChange={e => {
+              this.onCategoryClick(
+                category,
+                // Clicking an indeterminate checkbox should always have the
+                // effect of disabling any selected items.
+                indeterminate ? false : e.target.checked
+              );
+            }}
+            checked={checked}
+            ref={el => el && (el.indeterminate = indeterminate)}
+          />
+          <span className="event-listener-category">{category.name}</span>
+        </label>
+      </div>
+    );
+  }
+
+  renderCategoryListing(category) {
+    const { expandedCategories } = this.props;
+
+    const expanded = expandedCategories.includes(category.name);
+    if (!expanded) {
+      return null;
+    }
+
+    return (
+      <ul>
+        {category.events.map(event => {
+          return this.renderListenerEvent(event, category.name);
+        })}
+      </ul>
+    );
+  }
+
+  renderCategory(category) {
+    return <span className="category-label">{category} ▸ </span>;
+  }
+
+  renderListenerEvent(event, category) {
+    const { activeEventListeners } = this.props;
+    const { searchText } = this.state;
+
+    return (
+      <li className="event-listener-event" key={event.id}>
+        <label className="event-listener-label">
+          <input
+            type="checkbox"
+            value={event.id}
+            onChange={e => this.onEventTypeClick(event.id, e.target.checked)}
+            checked={activeEventListeners.includes(event.id)}
+          />
+          <span className="event-listener-name">
+            {searchText ? this.renderCategory(category) : null}
+            {event.name}
+          </span>
+        </label>
+      </li>
+    );
+  }
+
+  render() {
+    const { searchText } = this.state;
+
+    return (
+      <div className="event-listeners">
+        <div className="event-search-container">
+          {this.renderSearchInput()}
+          {this.renderClearSearchButton()}
+        </div>
+        <div className="event-listeners-content">
+          {searchText
+            ? this.renderSearchResultsList()
+            : this.renderCategoriesList()}
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  activeEventListeners: getActiveEventListeners(state),
+  categories: getEventListenerBreakpointTypes(state),
+  expandedCategories: getEventListenerExpanded(state),
+});
+
+export default connect(mapStateToProps, {
+  addEventListeners: actions.addEventListenerBreakpoints,
+  removeEventListeners: actions.removeEventListenerBreakpoints,
+  addEventListenerExpanded: actions.addEventListenerExpanded,
+  removeEventListenerExpanded: actions.removeEventListenerExpanded,
+})(EventListeners);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css
new file mode 100644
index 0000000000..c4291c80ff
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css
@@ -0,0 +1,175 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.expression-input-form {
+  width: 100%;
+}
+
+.input-expression {
+  width: 100%;
+  margin: 0;
+  font-size: inherit;
+  border: 1px;
+  background-color: var(--theme-sidebar-background);
+  height: 24px;
+  padding-inline-start: 19px;
+  padding-inline-end: 12px;
+  color: var(--theme-body-color);
+  outline: 0;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-10px);
+  }
+  40%,
+  80% {
+    transform: translateX(10px);
+  }
+}
+
+.input-expression::placeholder {
+  color: var(--theme-text-color-alt);
+  opacity: 1;
+}
+
+.input-expression:focus {
+  cursor: text;
+}
+
+.expressions-list .expression-input-container {
+  height: var(--expression-item-height);
+}
+
+.expressions-list .input-expression {
+  /* Prevent vertical bounce when editing an existing Watch Expression */
+  height: 100%;
+}
+
+.expressions-list {
+  /* TODO: add normalize */
+  margin: 0;
+  padding: 4px 0px;
+  overflow-x: auto;
+}
+
+.expression-input-container {
+  display: flex;
+  border: 1px solid transparent;
+}
+
+.expression-input-container.focused {
+  border: 1px solid var(--theme-highlight-blue);
+}
+
+:root.theme-dark .expression-input-container.focused {
+  border: 1px solid var(--blue-50);
+}
+
+.expression-input-container.error {
+  border: 1px solid red;
+}
+
+.expression-container {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-inline-start: 20px;
+  padding-inline-end: 12px;
+  width: 100%;
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.expression-container > .tree {
+  width: 100%;
+  overflow: hidden;
+}
+
+.expression-container .tree .tree-node[aria-level="1"] {
+  padding-top: 0px;
+  /* keep line-height at 14px to prevent row from shifting upon expansion */
+  line-height: 14px;
+}
+
+.expression-container .tree-node[aria-level="1"] .object-label {
+  font-family: var(--monospace-font-family);
+}
+
+:root.theme-light .expression-container:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+:root.theme-dark .expression-container:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.tree .tree-node:not(.focused):hover {
+  background-color: transparent;
+}
+
+.expression-container__close-btn {
+  position: absolute;
+  /* hiding button outside of row until hovered or focused */
+  top: -100px;
+}
+
+.expression-container:hover .expression-container__close-btn,
+.expression-container:focus-within .expression-container__close-btn,
+.expression-container__close-btn:focus-within {
+  top: 0;
+}
+
+.expression-content .object-node {
+  padding-inline-start: 0px;
+  cursor: default;
+}
+
+.expressions-list .tree.object-inspector .node.object-node {
+  max-width: calc(100% - 20px);
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.expression-container__close-btn {
+  max-height: 16px;
+  padding-inline-start: 4px;
+}
+
+[dir="ltr"] .expression-container__close-btn {
+  right: 0;
+}
+
+[dir="rtl"] .expression-container__close-btn {
+  left: 0;
+}
+
+.expression-content {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  position: relative;
+}
+
+.expression-content .tree {
+  overflow: hidden;
+  flex-grow: 1;
+  line-height: 15px;
+}
+
+.expression-content .tree-node[data-expandable="false"][aria-level="1"] {
+  padding-inline-start: 0px;
+}
+
+.input-expression:not(:placeholder-shown) {
+  font-family: var(--monospace-font-family);
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js
new file mode 100644
index 0000000000..308e6d4de5
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js
@@ -0,0 +1,395 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../utils/connect";
+import { features } from "../../utils/prefs";
+
+import { objectInspector } from "devtools/client/shared/components/reps/index";
+
+import actions from "../../actions";
+import {
+  getExpressions,
+  getExpressionError,
+  getAutocompleteMatchset,
+  getThreadContext,
+} from "../../selectors";
+import { getExpressionResultGripAndFront } from "../../utils/expressions";
+
+import { CloseButton } from "../shared/Button";
+
+import "./Expressions.css";
+
+const { debounce } = require("devtools/shared/debounce");
+const classnames = require("devtools/client/shared/classnames.js");
+
+const { ObjectInspector } = objectInspector;
+
+class Expressions extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: false,
+      editIndex: -1,
+      inputValue: "",
+      focused: false,
+    };
+  }
+
+  static get propTypes() {
+    return {
+      addExpression: PropTypes.func.isRequired,
+      autocomplete: PropTypes.func.isRequired,
+      autocompleteMatches: PropTypes.array,
+      clearAutocomplete: PropTypes.func.isRequired,
+      clearExpressionError: PropTypes.func.isRequired,
+      cx: PropTypes.object.isRequired,
+      deleteExpression: PropTypes.func.isRequired,
+      expressionError: PropTypes.bool.isRequired,
+      expressions: PropTypes.array.isRequired,
+      highlightDomElement: PropTypes.func.isRequired,
+      onExpressionAdded: PropTypes.func.isRequired,
+      openElementInInspector: PropTypes.func.isRequired,
+      openLink: PropTypes.any.isRequired,
+      showInput: PropTypes.bool.isRequired,
+      unHighlightDomElement: PropTypes.func.isRequired,
+      updateExpression: PropTypes.func.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { showInput } = this.props;
+
+    // Ensures that the input is focused when the "+"
+    // is clicked while the panel is collapsed
+    if (showInput && this._input) {
+      this._input.focus();
+    }
+  }
+
+  clear = () => {
+    this.setState(() => {
+      this.props.clearExpressionError();
+      return { editing: false, editIndex: -1, inputValue: "", focused: false };
+    });
+  };
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.state.editing && !nextProps.expressionError) {
+      this.clear();
+    }
+
+    // Ensures that the add watch expression input
+    // is no longer visible when the new watch expression is rendered
+    if (this.props.expressions.length < nextProps.expressions.length) {
+      this.hideInput();
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { editing, inputValue, focused } = this.state;
+    const { expressions, expressionError, showInput, autocompleteMatches } =
+      this.props;
+
+    return (
+      autocompleteMatches !== nextProps.autocompleteMatches ||
+      expressions !== nextProps.expressions ||
+      expressionError !== nextProps.expressionError ||
+      editing !== nextState.editing ||
+      inputValue !== nextState.inputValue ||
+      nextProps.showInput !== showInput ||
+      focused !== nextState.focused
+    );
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const input = this._input;
+
+    if (!input) {
+      return;
+    }
+
+    if (!prevState.editing && this.state.editing) {
+      input.setSelectionRange(0, input.value.length);
+      input.focus();
+    } else if (this.props.showInput && !this.state.focused) {
+      input.focus();
+    }
+  }
+
+  editExpression(expression, index) {
+    this.setState({
+      inputValue: expression.input,
+      editing: true,
+      editIndex: index,
+    });
+  }
+
+  deleteExpression(e, expression) {
+    e.stopPropagation();
+    const { deleteExpression } = this.props;
+    deleteExpression(expression);
+  }
+
+  handleChange = e => {
+    const { target } = e;
+    if (features.autocompleteExpression) {
+      this.findAutocompleteMatches(target.value, target.selectionStart);
+    }
+    this.setState({ inputValue: target.value });
+  };
+
+  findAutocompleteMatches = debounce((value, selectionStart) => {
+    const { autocomplete } = this.props;
+    autocomplete(this.props.cx, value, selectionStart);
+  }, 250);
+
+  handleKeyDown = e => {
+    if (e.key === "Escape") {
+      this.clear();
+    }
+  };
+
+  hideInput = () => {
+    this.setState({ focused: false });
+    this.props.onExpressionAdded();
+    this.props.clearExpressionError();
+  };
+
+  createElement = element => {
+    return document.createElement(element);
+  };
+
+  onFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  onBlur() {
+    this.clear();
+    this.hideInput();
+  }
+
+  handleExistingSubmit = async (e, expression) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.props.updateExpression(
+      this.props.cx,
+      this.state.inputValue,
+      expression
+    );
+  };
+
+  handleNewSubmit = async e => {
+    const { inputValue } = this.state;
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.props.clearExpressionError();
+    await this.props.addExpression(this.props.cx, this.state.inputValue);
+    this.setState({
+      editing: false,
+      editIndex: -1,
+      inputValue: this.props.expressionError ? inputValue : "",
+    });
+
+    this.props.clearAutocomplete();
+  };
+
+  renderExpression = (expression, index) => {
+    const {
+      expressionError,
+      openLink,
+      openElementInInspector,
+      highlightDomElement,
+      unHighlightDomElement,
+    } = this.props;
+
+    const { editing, editIndex } = this.state;
+    const { input, updating } = expression;
+    const isEditingExpr = editing && editIndex === index;
+    if (isEditingExpr || (isEditingExpr && expressionError)) {
+      return this.renderExpressionEditInput(expression);
+    }
+
+    if (updating) {
+      return null;
+    }
+
+    const { expressionResultGrip, expressionResultFront } =
+      getExpressionResultGripAndFront(expression);
+
+    const root = {
+      name: expression.input,
+      path: input,
+      contents: {
+        value: expressionResultGrip,
+        front: expressionResultFront,
+      },
+    };
+
+    return (
+      <li className="expression-container" key={input} title={expression.input}>
+        <div className="expression-content">
+          <ObjectInspector
+            roots={[root]}
+            autoExpandDepth={0}
+            disableWrap={true}
+            openLink={openLink}
+            createElement={this.createElement}
+            onDoubleClick={(items, { depth }) => {
+              if (depth === 0) {
+                this.editExpression(expression, index);
+              }
+            }}
+            onDOMNodeClick={grip => openElementInInspector(grip)}
+            onInspectIconClick={grip => openElementInInspector(grip)}
+            onDOMNodeMouseOver={grip => highlightDomElement(grip)}
+            onDOMNodeMouseOut={grip => unHighlightDomElement(grip)}
+            shouldRenderTooltip={true}
+            mayUseCustomFormatter={true}
+          />
+          <div className="expression-container__close-btn">
+            <CloseButton
+              handleClick={e => this.deleteExpression(e, expression)}
+              tooltip={L10N.getStr("expressions.remove.tooltip")}
+            />
+          </div>
+        </div>
+      </li>
+    );
+  };
+
+  renderExpressions() {
+    const { expressions, showInput } = this.props;
+
+    return (
+      <>
+        <ul className="pane expressions-list">
+          {expressions.map(this.renderExpression)}
+        </ul>
+        {showInput && this.renderNewExpressionInput()}
+      </>
+    );
+  }
+
+  renderAutoCompleteMatches() {
+    if (!features.autocompleteExpression) {
+      return null;
+    }
+    const { autocompleteMatches } = this.props;
+    if (autocompleteMatches) {
+      return (
+        <datalist id="autocomplete-matches">
+          {autocompleteMatches.map((match, index) => {
+            return <option key={index} value={match} />;
+          })}
+        </datalist>
+      );
+    }
+    return <datalist id="autocomplete-matches" />;
+  }
+
+  renderNewExpressionInput() {
+    const { expressionError } = this.props;
+    const { editing, inputValue, focused } = this.state;
+    const error = editing === false && expressionError === true;
+    const placeholder = error
+      ? L10N.getStr("expressions.errorMsg")
+      : L10N.getStr("expressions.placeholder");
+
+    return (
+      <form
+        className={classnames(
+          "expression-input-container expression-input-form",
+          { focused, error }
+        )}
+        onSubmit={this.handleNewSubmit}
+      >
+        <input
+          className="input-expression"
+          type="text"
+          placeholder={placeholder}
+          onChange={this.handleChange}
+          onBlur={this.hideInput}
+          onKeyDown={this.handleKeyDown}
+          onFocus={this.onFocus}
+          value={!editing ? inputValue : ""}
+          ref={c => (this._input = c)}
+          {...(features.autocompleteExpression && {
+            list: "autocomplete-matches",
+          })}
+        />
+        {this.renderAutoCompleteMatches()}
+        <input type="submit" style={{ display: "none" }} />
+      </form>
+    );
+  }
+
+  renderExpressionEditInput(expression) {
+    const { expressionError } = this.props;
+    const { inputValue, editing, focused } = this.state;
+    const error = editing === true && expressionError === true;
+
+    return (
+      <form
+        key={expression.input}
+        className={classnames(
+          "expression-input-container expression-input-form",
+          { focused, error }
+        )}
+        onSubmit={e => this.handleExistingSubmit(e, expression)}
+      >
+        <input
+          className={classnames("input-expression", { error })}
+          type="text"
+          onChange={this.handleChange}
+          onBlur={this.clear}
+          onKeyDown={this.handleKeyDown}
+          onFocus={this.onFocus}
+          value={editing ? inputValue : expression.input}
+          ref={c => (this._input = c)}
+          {...(features.autocompleteExpression && {
+            list: "autocomplete-matches",
+          })}
+        />
+        {this.renderAutoCompleteMatches()}
+        <input type="submit" style={{ display: "none" }} />
+      </form>
+    );
+  }
+
+  render() {
+    const { expressions } = this.props;
+
+    if (expressions.length === 0) {
+      return this.renderNewExpressionInput();
+    }
+
+    return this.renderExpressions();
+  }
+}
+
+const mapStateToProps = state => ({
+  cx: getThreadContext(state),
+  autocompleteMatches: getAutocompleteMatchset(state),
+  expressions: getExpressions(state),
+  expressionError: getExpressionError(state),
+});
+
+export default connect(mapStateToProps, {
+  autocomplete: actions.autocomplete,
+  clearAutocomplete: actions.clearAutocomplete,
+  addExpression: actions.addExpression,
+  clearExpressionError: actions.clearExpressionError,
+  updateExpression: actions.updateExpression,
+  deleteExpression: actions.deleteExpression,
+  openLink: actions.openLink,
+  openElementInInspector: actions.openElementInInspectorCommand,
+  highlightDomElement: actions.highlightDomElement,
+  unHighlightDomElement: actions.unHighlightDomElement,
+})(Expressions);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js
new file mode 100644
index 0000000000..4ea94df95d
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component, memo } from "react";
+import PropTypes from "prop-types";
+
+import AccessibleImage from "../../shared/AccessibleImage";
+import { formatDisplayName } from "../../../utils/pause/frames";
+import { getFilename, getFileURL } from "../../../utils/source";
+import FrameMenu from "./FrameMenu";
+import FrameIndent from "./FrameIndent";
+const classnames = require("devtools/client/shared/classnames.js");
+
+function FrameTitle({ frame, options = {}, l10n }) {
+  const displayName = formatDisplayName(frame, options, l10n);
+  return <span className="title">{displayName}</span>;
+}
+
+FrameTitle.propTypes = {
+  frame: PropTypes.object.isRequired,
+  options: PropTypes.object.isRequired,
+  l10n: PropTypes.object.isRequired,
+};
+
+const FrameLocation = memo(({ frame, displayFullUrl = false }) => {
+  if (!frame.source) {
+    return null;
+  }
+
+  if (frame.library) {
+    return (
+      <span className="location">
+        {frame.library}
+        <AccessibleImage
+          className={`annotation-logo ${frame.library.toLowerCase()}`}
+        />
+      </span>
+    );
+  }
+
+  const { location, source } = frame;
+  const filename = displayFullUrl
+    ? getFileURL(source, false)
+    : getFilename(source);
+
+  return (
+    <span className="location" title={source.url}>
+      <span className="filename">{filename}</span>:
+      <span className="line">{location.line}</span>
+    </span>
+  );
+});
+
+FrameLocation.displayName = "FrameLocation";
+
+FrameLocation.propTypes = {
+  frame: PropTypes.object.isRequired,
+  displayFullUrl: PropTypes.bool.isRequired,
+};
+
+export default class FrameComponent extends Component {
+  static defaultProps = {
+    hideLocation: false,
+    shouldMapDisplayName: true,
+    disableContextMenu: false,
+  };
+
+  static get propTypes() {
+    return {
+      copyStackTrace: PropTypes.func.isRequired,
+      cx: PropTypes.object,
+      disableContextMenu: PropTypes.bool.isRequired,
+      displayFullUrl: PropTypes.bool.isRequired,
+      frame: PropTypes.object.isRequired,
+      frameworkGroupingOn: PropTypes.bool.isRequired,
+      getFrameTitle: PropTypes.func,
+      hideLocation: PropTypes.bool.isRequired,
+      panel: PropTypes.oneOf(["debugger", "webconsole"]).isRequired,
+      restart: PropTypes.func,
+      selectFrame: PropTypes.func.isRequired,
+      selectedFrame: PropTypes.object,
+      shouldMapDisplayName: PropTypes.bool.isRequired,
+      toggleBlackBox: PropTypes.func,
+      toggleFrameworkGrouping: PropTypes.func.isRequired,
+    };
+  }
+
+  get isSelectable() {
+    return this.props.panel == "webconsole";
+  }
+
+  get isDebugger() {
+    return this.props.panel == "debugger";
+  }
+
+  onContextMenu(event) {
+    const {
+      frame,
+      copyStackTrace,
+      toggleFrameworkGrouping,
+      toggleBlackBox,
+      frameworkGroupingOn,
+      cx,
+      restart,
+    } = this.props;
+    FrameMenu(
+      frame,
+      frameworkGroupingOn,
+      { copyStackTrace, toggleFrameworkGrouping, toggleBlackBox, restart },
+      event,
+      cx
+    );
+  }
+
+  onMouseDown(e, frame, selectedFrame) {
+    if (e.button !== 0) {
+      return;
+    }
+
+    this.props.selectFrame(this.props.cx, frame);
+  }
+
+  onKeyUp(event, frame, selectedFrame) {
+    if (event.key != "Enter") {
+      return;
+    }
+
+    this.props.selectFrame(this.props.cx, frame);
+  }
+
+  render() {
+    const {
+      frame,
+      selectedFrame,
+      hideLocation,
+      shouldMapDisplayName,
+      displayFullUrl,
+      getFrameTitle,
+      disableContextMenu,
+    } = this.props;
+    const { l10n } = this.context;
+
+    const className = classnames("frame", {
+      selected: selectedFrame && selectedFrame.id === frame.id,
+    });
+
+    if (!frame.source) {
+      throw new Error("no frame source");
+    }
+
+    const title = getFrameTitle
+      ? getFrameTitle(
+          `${getFileURL(frame.source, false)}:${frame.location.line}`
+        )
+      : undefined;
+
+    return (
+      <div
+        role="listitem"
+        key={frame.id}
+        className={className}
+        onMouseDown={e => this.onMouseDown(e, frame, selectedFrame)}
+        onKeyUp={e => this.onKeyUp(e, frame, selectedFrame)}
+        onContextMenu={disableContextMenu ? null : e => this.onContextMenu(e)}
+        tabIndex={0}
+        title={title}
+      >
+        {frame.asyncCause && (
+          <span className="location-async-cause">
+            {this.isSelectable && <FrameIndent />}
+            {this.isDebugger ? (
+              <span className="async-label">{frame.asyncCause}</span>
+            ) : (
+              l10n.getFormatStr("stacktrace.asyncStack", frame.asyncCause)
+            )}
+            {this.isSelectable && <br className="clipboard-only" />}
+          </span>
+        )}
+        {this.isSelectable && <FrameIndent />}
+        <FrameTitle
+          frame={frame}
+          options={{ shouldMapDisplayName }}
+          l10n={l10n}
+        />
+        {!hideLocation && <span className="clipboard-only"> </span>}
+        {!hideLocation && (
+          <FrameLocation frame={frame} displayFullUrl={displayFullUrl} />
+        )}
+        {this.isSelectable && <br className="clipboard-only" />}
+      </div>
+    );
+  }
+}
+
+FrameComponent.displayName = "Frame";
+FrameComponent.contextTypes = { l10n: PropTypes.object };
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameIndent.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameIndent.js
new file mode 100644
index 0000000000..55eb5da08a
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameIndent.js
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+
+export default function FrameIndent() {
+  return (
+    <span className="frame-indent clipboard-only">
+      &nbsp;&nbsp;&nbsp;&nbsp;
+    </span>
+  );
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameMenu.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameMenu.js
new file mode 100644
index 0000000000..a92db936ba
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/FrameMenu.js
@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 { showMenu } from "../../../context-menu/menu";
+import { copyToTheClipboard } from "../../../utils/clipboard";
+
+const blackboxString = "ignoreContextItem.ignore";
+const unblackboxString = "ignoreContextItem.unignore";
+
+function formatMenuElement(labelString, click, disabled = false) {
+  const label = L10N.getStr(labelString);
+  const accesskey = L10N.getStr(`${labelString}.accesskey`);
+  const id = `node-menu-${labelString}`;
+  return {
+    id,
+    label,
+    accesskey,
+    disabled,
+    click,
+  };
+}
+
+function copySourceElement(url) {
+  return formatMenuElement("copySourceUri2", () => copyToTheClipboard(url));
+}
+
+function copyStackTraceElement(copyStackTrace) {
+  return formatMenuElement("copyStackTrace", () => copyStackTrace());
+}
+
+function toggleFrameworkGroupingElement(
+  toggleFrameworkGrouping,
+  frameworkGroupingOn
+) {
+  const actionType = frameworkGroupingOn
+    ? "framework.disableGrouping"
+    : "framework.enableGrouping";
+
+  return formatMenuElement(actionType, () => toggleFrameworkGrouping());
+}
+
+function blackBoxSource(cx, source, toggleBlackBox) {
+  const toggleBlackBoxString = source.isBlackBoxed
+    ? unblackboxString
+    : blackboxString;
+
+  return formatMenuElement(toggleBlackBoxString, () =>
+    toggleBlackBox(cx, source)
+  );
+}
+
+function restartFrame(cx, frame, restart) {
+  return formatMenuElement("restartFrame", () => restart(cx, frame));
+}
+
+function isValidRestartFrame(frame, callbacks) {
+  // Hides 'Restart Frame' item for call stack groups context menu,
+  // otherwise can be misleading for the user which frame gets restarted.
+  if (!callbacks.restart) {
+    return false;
+  }
+
+  // Any frame state than 'on-stack' is either dismissed by the server
+  // or can potentially cause unexpected errors.
+  // Global frame has frame.callee equal to null and can't be restarted.
+  return frame.type === "call" && frame.state === "on-stack";
+}
+
+export default function FrameMenu(
+  frame,
+  frameworkGroupingOn,
+  callbacks,
+  event,
+  cx
+) {
+  event.stopPropagation();
+  event.preventDefault();
+
+  const menuOptions = [];
+
+  if (isValidRestartFrame(frame, callbacks)) {
+    const restartFrameItem = restartFrame(cx, frame, callbacks.restart);
+    menuOptions.push(restartFrameItem);
+  }
+
+  const toggleFrameworkElement = toggleFrameworkGroupingElement(
+    callbacks.toggleFrameworkGrouping,
+    frameworkGroupingOn
+  );
+  menuOptions.push(toggleFrameworkElement);
+
+  const { source } = frame;
+  if (source) {
+    const copySourceUri2 = copySourceElement(source.url);
+    menuOptions.push(copySourceUri2);
+    menuOptions.push(blackBoxSource(cx, source, callbacks.toggleBlackBox));
+  }
+
+  const copyStackTraceItem = copyStackTraceElement(callbacks.copyStackTrace);
+
+  menuOptions.push(copyStackTraceItem);
+
+  showMenu(event, menuOptions);
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css
new file mode 100644
index 0000000000..5f57f97e51
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css
@@ -0,0 +1,185 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.frames [role="list"] {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+}
+
+.frames [role="list"] [role="listitem"] {
+  padding-bottom: 2px;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 0.5em;
+  flex-direction: row;
+  align-items: center;
+  margin: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.frames [role="list"] [role="listitem"] * {
+  user-select: none;
+}
+
+.frames .badge {
+  flex-shrink: 0;
+  margin-inline-end: 10px;
+}
+
+.frames .location {
+  font-weight: normal;
+  margin: 0;
+  flex-grow: 1;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  /* Trick to get the ellipsis at the start of the string */
+  text-overflow: ellipsis;
+  direction: rtl;
+}
+
+.call-stack-pane:dir(ltr) .frames .location {
+  padding-right: 10px;
+  text-align: right;
+}
+
+.call-stack-pane:dir(rtl) .frames .location {
+  padding-left: 10px;
+  text-align: left;
+}
+
+.call-stack-pane .location-async-cause {
+  color: var(--theme-comment);
+}
+
+.theme-light .frames .location {
+  color: var(--theme-comment);
+}
+
+:root.theme-dark .frames .location {
+  color: var(--theme-body-color);
+  opacity: 0.6;
+}
+
+.frames .title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-inline-start: 10px;
+}
+
+.frames-group .title {
+  padding-inline-start: 40px;
+}
+
+.frames [role="list"] [role="listitem"]:hover,
+.frames [role="list"] [role="listitem"]:focus {
+  background-color: var(--theme-toolbar-background-alt);
+}
+
+.frames [role="list"] [role="listitem"]:hover .location-async-cause,
+.frames [role="list"] [role="listitem"]:focus .location-async-cause,
+.frames [role="list"] [role="listitem"]:hover .async-label,
+.frames [role="list"] [role="listitem"]:focus .async-label {
+  background-color: var(--theme-body-background);
+}
+
+.theme-dark .frames [role="list"] [role="listitem"]:focus,
+.theme-dark .frames [role="list"] [role="listitem"]:focus .async-label,
+.theme-dark .frames [role="list"] [role="listitem"]:focus .async-label {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.frames [role="list"] [role="listitem"].selected,
+.frames [role="list"] [role="listitem"].selected .async-label {
+  background-color: var(--theme-selection-background);
+  color: white;
+}
+
+.frames [role="list"] [role="listitem"].selected i.annotation-logo svg path {
+  fill: white;
+}
+
+:root.theme-light .frames [role="list"] [role="listitem"].selected .location,
+:root.theme-dark .frames [role="list"] [role="listitem"].selected .location {
+  color: white;
+}
+
+.frames .show-more-container {
+  display: flex;
+  min-height: 24px;
+  padding: 4px 0;
+}
+
+.frames .show-more {
+  text-align: center;
+  padding: 8px 0px;
+  margin: 7px 10px 7px 7px;
+  border: 1px solid var(--theme-splitter-color);
+  background-color: var(--theme-tab-toolbar-background);
+  width: 100%;
+  font-size: inherit;
+  color: inherit;
+}
+
+.frames .show-more:hover {
+  background-color: var(--theme-toolbar-background-hover);
+}
+
+.frames .img.annotation-logo {
+  margin-inline-end: 4px;
+  background-color: currentColor;
+}
+
+/*
+ * We also show the library icon in locations, which are forced to RTL.
+ */
+.frames .location .img.annotation-logo {
+  margin-inline-start: 4px;
+}
+
+/* Some elements are added to the DOM only to be printed into the clipboard
+   when the user copy some elements. We don't want those elements to mess with
+   the layout so we put them outside of the screen
+*/
+.frames .clipboard-only {
+  position: absolute;
+  left: -9999px;
+}
+
+.call-stack-pane [role="listitem"] .location-async-cause {
+  height: 20px;
+  line-height: 20px;
+  color: var(--theme-icon-dimmed-color);
+  display: block;
+  z-index: 4;
+  position: relative;
+  padding-inline-start: 17px;
+  width: 100%;
+  pointer-events: none;
+}
+
+.frames-group .location-async-cause {
+  padding-inline-start: 47px;
+}
+
+.call-stack-pane [role="listitem"] .location-async-cause::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  z-index: -1;
+  height: 30px;
+  top: 50%;
+  width: 100%;
+  border-top: 1px solid var(--theme-tab-toolbar-background);;
+}
+
+.call-stack-pane .async-label {
+  z-index: 1;
+  background-color: var(--theme-sidebar-background);
+  padding: 0 3px;
+  display: inline-block;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.css b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.css
new file mode 100644
index 0000000000..14dbea9954
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.css
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.frames-group .group,
+.frames-group .group .location {
+  font-weight: 500;
+  cursor: default;
+  /*
+   * direction:rtl is set in Frames.css to overflow the location text from the
+   * start. Here we need to reset it in order to display the framework icon
+   * after the framework name.
+   */
+  direction: ltr;
+}
+
+.frames-group.expanded .group,
+.frames-group.expanded .group .location {
+  color: var(--theme-highlight-blue);
+}
+
+.frames-group .frames-list {
+  border-top: 1px solid var(--theme-splitter-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.frames-group.expanded .badge {
+  color: var(--theme-highlight-blue);
+}
+
+.frames-group .img.arrow {
+  margin-inline-start: -1px;
+  margin-inline-end: 4px;
+}
+
+.frames-group .group-description {
+  padding-inline-start: 6px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js
new file mode 100644
index 0000000000..162c89a2a6
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { getLibraryFromUrl } from "../../../utils/pause/frames";
+
+import FrameMenu from "./FrameMenu";
+import AccessibleImage from "../../shared/AccessibleImage";
+import FrameComponent from "./Frame";
+
+import "./Group.css";
+
+import Badge from "../../shared/Badge";
+import FrameIndent from "./FrameIndent";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+function FrameLocation({ frame, expanded }) {
+  const library = frame.library || getLibraryFromUrl(frame);
+  if (!library) {
+    return null;
+  }
+
+  const arrowClassName = classnames("arrow", { expanded });
+  return (
+    <span className="group-description">
+      <AccessibleImage className={arrowClassName} />
+      <AccessibleImage className={`annotation-logo ${library.toLowerCase()}`} />
+      <span className="group-description-name">{library}</span>
+    </span>
+  );
+}
+
+FrameLocation.propTypes = {
+  expanded: PropTypes.any.isRequired,
+  frame: PropTypes.object.isRequired,
+};
+
+FrameLocation.displayName = "FrameLocation";
+
+export default class Group extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = { expanded: false };
+  }
+
+  static get propTypes() {
+    return {
+      copyStackTrace: PropTypes.func.isRequired,
+      cx: PropTypes.object,
+      disableContextMenu: PropTypes.bool.isRequired,
+      displayFullUrl: PropTypes.bool.isRequired,
+      frameworkGroupingOn: PropTypes.bool.isRequired,
+      getFrameTitle: PropTypes.func,
+      group: PropTypes.array.isRequired,
+      panel: PropTypes.oneOf(["debugger", "webconsole"]).isRequired,
+      restart: PropTypes.func,
+      selectFrame: PropTypes.func.isRequired,
+      selectLocation: PropTypes.func,
+      selectedFrame: PropTypes.object,
+      toggleBlackBox: PropTypes.func,
+      toggleFrameworkGrouping: PropTypes.func.isRequired,
+    };
+  }
+
+  get isSelectable() {
+    return this.props.panel == "webconsole";
+  }
+
+  onContextMenu(event) {
+    const {
+      group,
+      copyStackTrace,
+      toggleFrameworkGrouping,
+      toggleBlackBox,
+      frameworkGroupingOn,
+      cx,
+    } = this.props;
+    const frame = group[0];
+    FrameMenu(
+      frame,
+      frameworkGroupingOn,
+      { copyStackTrace, toggleFrameworkGrouping, toggleBlackBox },
+      event,
+      cx
+    );
+  }
+
+  toggleFrames = event => {
+    event.stopPropagation();
+    this.setState(prevState => ({ expanded: !prevState.expanded }));
+  };
+
+  renderFrames() {
+    const {
+      cx,
+      group,
+      selectFrame,
+      selectLocation,
+      selectedFrame,
+      toggleFrameworkGrouping,
+      frameworkGroupingOn,
+      toggleBlackBox,
+      copyStackTrace,
+      displayFullUrl,
+      getFrameTitle,
+      disableContextMenu,
+      panel,
+      restart,
+    } = this.props;
+
+    const { expanded } = this.state;
+    if (!expanded) {
+      return null;
+    }
+
+    return (
+      <div className="frames-list">
+        {group.reduce((acc, frame, i) => {
+          if (this.isSelectable) {
+            acc.push(<FrameIndent key={`frame-indent-${i}`} />);
+          }
+          return acc.concat(
+            <FrameComponent
+              cx={cx}
+              copyStackTrace={copyStackTrace}
+              frame={frame}
+              frameworkGroupingOn={frameworkGroupingOn}
+              hideLocation={true}
+              key={frame.id}
+              selectedFrame={selectedFrame}
+              selectFrame={selectFrame}
+              selectLocation={selectLocation}
+              shouldMapDisplayName={false}
+              toggleBlackBox={toggleBlackBox}
+              toggleFrameworkGrouping={toggleFrameworkGrouping}
+              displayFullUrl={displayFullUrl}
+              getFrameTitle={getFrameTitle}
+              disableContextMenu={disableContextMenu}
+              panel={panel}
+              restart={restart}
+            />
+          );
+        }, [])}
+      </div>
+    );
+  }
+
+  renderDescription() {
+    const { l10n } = this.context;
+    const { group } = this.props;
+    const { expanded } = this.state;
+
+    const frame = group[0];
+    const l10NEntry = expanded
+      ? "callStack.group.collapseTooltip"
+      : "callStack.group.expandTooltip";
+    const title = l10n.getFormatStr(l10NEntry, frame.library);
+
+    return (
+      <div
+        role="listitem"
+        key={frame.id}
+        className="group"
+        onClick={this.toggleFrames}
+        tabIndex={0}
+        title={title}
+      >
+        {this.isSelectable && <FrameIndent />}
+        <FrameLocation frame={frame} expanded={expanded} />
+        {this.isSelectable && <span className="clipboard-only"> </span>}
+        <Badge>{this.props.group.length}</Badge>
+        {this.isSelectable && <br className="clipboard-only" />}
+      </div>
+    );
+  }
+
+  render() {
+    const { expanded } = this.state;
+    const { disableContextMenu } = this.props;
+    return (
+      <div
+        className={classnames("frames-group", { expanded })}
+        onContextMenu={disableContextMenu ? null : e => this.onContextMenu(e)}
+      >
+        {this.renderDescription()}
+        {this.renderFrames()}
+      </div>
+    );
+  }
+}
+
+Group.displayName = "Group";
+Group.contextTypes = { l10n: PropTypes.object };
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
new file mode 100644
index 0000000000..5c48af8cb3
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
@@ -0,0 +1,231 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import { connect } from "../../../utils/connect";
+import PropTypes from "prop-types";
+
+import FrameComponent from "./Frame";
+import Group from "./Group";
+
+import actions from "../../../actions";
+import { collapseFrames, formatCopyName } from "../../../utils/pause/frames";
+import { copyToTheClipboard } from "../../../utils/clipboard";
+
+import {
+  getFrameworkGroupingState,
+  getSelectedFrame,
+  getCallStackFrames,
+  getCurrentThread,
+  getThreadContext,
+} from "../../../selectors";
+
+import "./Frames.css";
+
+const NUM_FRAMES_SHOWN = 7;
+
+class Frames extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showAllFrames: !!props.disableFrameTruncate,
+    };
+  }
+
+  static get propTypes() {
+    return {
+      cx: PropTypes.object,
+      disableContextMenu: PropTypes.bool.isRequired,
+      disableFrameTruncate: PropTypes.bool.isRequired,
+      displayFullUrl: PropTypes.bool.isRequired,
+      frames: PropTypes.array.isRequired,
+      frameworkGroupingOn: PropTypes.bool.isRequired,
+      getFrameTitle: PropTypes.func,
+      panel: PropTypes.oneOf(["debugger", "webconsole"]).isRequired,
+      restart: PropTypes.func,
+      selectFrame: PropTypes.func.isRequired,
+      selectLocation: PropTypes.func,
+      selectedFrame: PropTypes.object,
+      toggleBlackBox: PropTypes.func,
+      toggleFrameworkGrouping: PropTypes.func,
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { frames, selectedFrame, frameworkGroupingOn } = this.props;
+    const { showAllFrames } = this.state;
+    return (
+      frames !== nextProps.frames ||
+      selectedFrame !== nextProps.selectedFrame ||
+      showAllFrames !== nextState.showAllFrames ||
+      frameworkGroupingOn !== nextProps.frameworkGroupingOn
+    );
+  }
+
+  toggleFramesDisplay = () => {
+    this.setState(prevState => ({
+      showAllFrames: !prevState.showAllFrames,
+    }));
+  };
+
+  collapseFrames(frames) {
+    const { frameworkGroupingOn } = this.props;
+    if (!frameworkGroupingOn) {
+      return frames;
+    }
+
+    return collapseFrames(frames);
+  }
+
+  truncateFrames(frames) {
+    const numFramesToShow = this.state.showAllFrames
+      ? frames.length
+      : NUM_FRAMES_SHOWN;
+
+    return frames.slice(0, numFramesToShow);
+  }
+
+  copyStackTrace = () => {
+    const { frames } = this.props;
+    const { l10n } = this.context;
+    const framesToCopy = frames.map(f => formatCopyName(f, l10n)).join("\n");
+    copyToTheClipboard(framesToCopy);
+  };
+
+  toggleFrameworkGrouping = () => {
+    const { toggleFrameworkGrouping, frameworkGroupingOn } = this.props;
+    toggleFrameworkGrouping(!frameworkGroupingOn);
+  };
+
+  renderFrames(frames) {
+    const {
+      cx,
+      selectFrame,
+      selectLocation,
+      selectedFrame,
+      toggleBlackBox,
+      frameworkGroupingOn,
+      displayFullUrl,
+      getFrameTitle,
+      disableContextMenu,
+      panel,
+      restart,
+    } = this.props;
+
+    const framesOrGroups = this.truncateFrames(this.collapseFrames(frames));
+
+    // We're not using a <ul> because it adds new lines before and after when
+    // the user copies the trace. Needed for the console which has several
+    // places where we don't want to have those new lines.
+    return (
+      <div role="list">
+        {framesOrGroups.map(frameOrGroup =>
+          frameOrGroup.id ? (
+            <FrameComponent
+              cx={cx}
+              frame={frameOrGroup}
+              toggleFrameworkGrouping={this.toggleFrameworkGrouping}
+              copyStackTrace={this.copyStackTrace}
+              frameworkGroupingOn={frameworkGroupingOn}
+              selectFrame={selectFrame}
+              selectLocation={selectLocation}
+              selectedFrame={selectedFrame}
+              toggleBlackBox={toggleBlackBox}
+              key={String(frameOrGroup.id)}
+              displayFullUrl={displayFullUrl}
+              getFrameTitle={getFrameTitle}
+              disableContextMenu={disableContextMenu}
+              panel={panel}
+              restart={restart}
+            />
+          ) : (
+            <Group
+              cx={cx}
+              group={frameOrGroup}
+              toggleFrameworkGrouping={this.toggleFrameworkGrouping}
+              copyStackTrace={this.copyStackTrace}
+              frameworkGroupingOn={frameworkGroupingOn}
+              selectFrame={selectFrame}
+              selectLocation={selectLocation}
+              selectedFrame={selectedFrame}
+              toggleBlackBox={toggleBlackBox}
+              key={frameOrGroup[0].id}
+              displayFullUrl={displayFullUrl}
+              getFrameTitle={getFrameTitle}
+              disableContextMenu={disableContextMenu}
+              panel={panel}
+              restart={restart}
+            />
+          )
+        )}
+      </div>
+    );
+  }
+
+  renderToggleButton(frames) {
+    const { l10n } = this.context;
+    const buttonMessage = this.state.showAllFrames
+      ? l10n.getStr("callStack.collapse")
+      : l10n.getStr("callStack.expand");
+
+    frames = this.collapseFrames(frames);
+    if (frames.length <= NUM_FRAMES_SHOWN) {
+      return null;
+    }
+
+    return (
+      <div className="show-more-container">
+        <button className="show-more" onClick={this.toggleFramesDisplay}>
+          {buttonMessage}
+        </button>
+      </div>
+    );
+  }
+
+  render() {
+    const { frames, disableFrameTruncate } = this.props;
+
+    if (!frames) {
+      return (
+        <div className="pane frames">
+          <div className="pane-info empty">
+            {L10N.getStr("callStack.notPaused")}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="pane frames">
+        {this.renderFrames(frames)}
+        {disableFrameTruncate ? null : this.renderToggleButton(frames)}
+      </div>
+    );
+  }
+}
+
+Frames.contextTypes = { l10n: PropTypes.object };
+
+const mapStateToProps = state => ({
+  cx: getThreadContext(state),
+  frames: getCallStackFrames(state),
+  frameworkGroupingOn: getFrameworkGroupingState(state),
+  selectedFrame: getSelectedFrame(state, getCurrentThread(state)),
+  disableFrameTruncate: false,
+  disableContextMenu: false,
+  displayFullUrl: false,
+});
+
+export default connect(mapStateToProps, {
+  selectFrame: actions.selectFrame,
+  selectLocation: actions.selectLocation,
+  toggleBlackBox: actions.toggleBlackBox,
+  toggleFrameworkGrouping: actions.toggleFrameworkGrouping,
+  restart: actions.restart,
+})(Frames);
+
+// Export the non-connected component in order to use it outside of the debugger
+// panel (e.g. console, netmonitor, …).
+export { Frames };
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/moz.build b/devtools/client/debugger/src/components/SecondaryPanes/Frames/moz.build
new file mode 100644
index 0000000000..f775363b14
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/moz.build
@@ -0,0 +1,14 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# 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/.
+
+DIRS += []
+
+CompiledModules(
+    "Frame.js",
+    "FrameIndent.js",
+    "FrameMenu.js",
+    "Group.js",
+    "index.js",
+)
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js
new file mode 100644
index 0000000000..10ec961858
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js
@@ -0,0 +1,155 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow, mount } from "enzyme";
+import Frame from "../Frame.js";
+import {
+  makeMockFrame,
+  makeMockSource,
+  mockthreadcx,
+} from "../../../../utils/test-mockup";
+
+import FrameMenu from "../FrameMenu";
+jest.mock("../FrameMenu", () => jest.fn());
+
+function frameProperties(frame, selectedFrame, overrides = {}) {
+  return {
+    cx: mockthreadcx,
+    frame,
+    selectedFrame,
+    copyStackTrace: jest.fn(),
+    contextTypes: {},
+    selectFrame: jest.fn(),
+    selectLocation: jest.fn(),
+    toggleBlackBox: jest.fn(),
+    displayFullUrl: false,
+    frameworkGroupingOn: false,
+    panel: "webconsole",
+    toggleFrameworkGrouping: null,
+    restart: jest.fn(),
+    ...overrides,
+  };
+}
+
+function render(frameToSelect = {}, overrides = {}, propsOverrides = {}) {
+  const source = makeMockSource("foo-view.js");
+  const defaultFrame = makeMockFrame("1", source, undefined, 10, "renderFoo");
+
+  const frame = { ...defaultFrame, ...overrides };
+  const selectedFrame = { ...frame, ...frameToSelect };
+
+  const props = frameProperties(frame, selectedFrame, propsOverrides);
+  const component = shallow(<Frame {...props} />);
+  return { component, props };
+}
+
+describe("Frame", () => {
+  it("user frame", () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("user frame (not selected)", () => {
+    const { component } = render({ id: "2" });
+    expect(component).toMatchSnapshot();
+  });
+
+  it("library frame", () => {
+    const source = makeMockSource("backbone.js");
+    const backboneFrame = {
+      ...makeMockFrame("3", source, undefined, 12, "updateEvents"),
+      library: "backbone",
+    };
+
+    const { component } = render({ id: "3" }, backboneFrame);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("filename only", () => {
+    const source = makeMockSource(
+      "https://firefox.com/assets/src/js/foo-view.js"
+    );
+    const frame = makeMockFrame("1", source, undefined, 10, "renderFoo");
+
+    const props = frameProperties(frame, null);
+    const component = mount(<Frame {...props} />);
+    expect(component.text()).toBe("    renderFoo foo-view.js:10");
+  });
+
+  it("full URL", () => {
+    const url = `https://${"a".repeat(100)}.com/assets/src/js/foo-view.js`;
+    const source = makeMockSource(url);
+    const frame = makeMockFrame("1", source, undefined, 10, "renderFoo");
+
+    const props = frameProperties(frame, null, { displayFullUrl: true });
+    const component = mount(<Frame {...props} />);
+    expect(component.text()).toBe(`    renderFoo ${url}:10`);
+  });
+
+  it("renders asyncCause", () => {
+    const url = `https://example.com/async.js`;
+    const source = makeMockSource(url);
+    const frame = makeMockFrame("1", source, undefined, 10, "timeoutFn");
+    frame.asyncCause = "setTimeout handler";
+
+    const props = frameProperties(frame);
+    const component = mount(<Frame {...props} />, { context: { l10n: L10N } });
+    expect(component.find(".location-async-cause").text()).toBe(
+      `    (Async: setTimeout handler)`
+    );
+  });
+
+  it("getFrameTitle", () => {
+    const url = `https://${"a".repeat(100)}.com/assets/src/js/foo-view.js`;
+    const source = makeMockSource(url);
+    const frame = makeMockFrame("1", source, undefined, 10, "renderFoo");
+
+    const props = frameProperties(frame, null, {
+      getFrameTitle: x => `Jump to ${x}`,
+    });
+    const component = shallow(<Frame {...props} />);
+    expect(component.prop("title")).toBe(`Jump to ${url}:10`);
+    expect(component).toMatchSnapshot();
+  });
+
+  describe("mouse events", () => {
+    it("does not call FrameMenu when disableContextMenu is true", () => {
+      const { component } = render(undefined, undefined, {
+        disableContextMenu: true,
+      });
+
+      const mockEvent = "mockEvent";
+      component.simulate("contextmenu", mockEvent);
+
+      expect(FrameMenu).toHaveBeenCalledTimes(0);
+    });
+
+    it("calls FrameMenu on right click", () => {
+      const { component, props } = render();
+      const {
+        copyStackTrace,
+        toggleFrameworkGrouping,
+        toggleBlackBox,
+        cx,
+        restart,
+      } = props;
+      const mockEvent = "mockEvent";
+      component.simulate("contextmenu", mockEvent);
+
+      expect(FrameMenu).toHaveBeenCalledWith(
+        props.frame,
+        props.frameworkGroupingOn,
+        {
+          copyStackTrace,
+          toggleFrameworkGrouping,
+          toggleBlackBox,
+          restart,
+        },
+        mockEvent,
+        cx
+      );
+    });
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/FrameMenu.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/FrameMenu.spec.js
new file mode 100644
index 0000000000..dbaa98f5cf
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/FrameMenu.spec.js
@@ -0,0 +1,117 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 FrameMenu from "../FrameMenu";
+
+import { showMenu } from "../../../../context-menu/menu";
+import { copyToTheClipboard } from "../../../../utils/clipboard";
+import {
+  makeMockFrame,
+  makeMockSource,
+  mockthreadcx,
+} from "../../../../utils/test-mockup";
+
+jest.mock("../../../../context-menu/menu", () => ({ showMenu: jest.fn() }));
+jest.mock("../../../../utils/clipboard", () => ({
+  copyToTheClipboard: jest.fn(),
+}));
+
+function generateMockId(labelString) {
+  return `node-menu-${labelString}`;
+}
+
+describe("FrameMenu", () => {
+  let mockEvent;
+  let mockFrame;
+  let emptyFrame;
+  let callbacks;
+  let frameworkGroupingOn;
+  let toggleFrameworkGrouping;
+
+  beforeEach(() => {
+    mockFrame = makeMockFrame(undefined, makeMockSource("isFake"));
+    mockEvent = {
+      stopPropagation: jest.fn(),
+      preventDefault: jest.fn(),
+    };
+    callbacks = {
+      toggleFrameworkGrouping,
+      toggleBlackbox: jest.fn(),
+      copyToTheClipboard,
+      restart: jest.fn(),
+    };
+    emptyFrame = {};
+  });
+
+  afterEach(() => {
+    showMenu.mockClear();
+  });
+
+  it("sends three element in menuOpts to showMenu if source is present", () => {
+    const restartFrameId = generateMockId("restartFrame");
+    const sourceId = generateMockId("copySourceUri2");
+    const stacktraceId = generateMockId("copyStackTrace");
+    const frameworkGroupingId = generateMockId("framework.enableGrouping");
+    const blackBoxId = generateMockId("ignoreContextItem.ignore");
+
+    FrameMenu(
+      mockFrame,
+      frameworkGroupingOn,
+      callbacks,
+      mockEvent,
+      mockthreadcx
+    );
+
+    const receivedArray = showMenu.mock.calls[0][1];
+    expect(showMenu).toHaveBeenCalledWith(mockEvent, receivedArray);
+    const receivedArrayIds = receivedArray.map(item => item.id);
+    expect(receivedArrayIds).toEqual([
+      restartFrameId,
+      frameworkGroupingId,
+      sourceId,
+      blackBoxId,
+      stacktraceId,
+    ]);
+  });
+
+  it("sends one element in menuOpts without source", () => {
+    const stacktraceId = generateMockId("copyStackTrace");
+    const frameworkGrouping = generateMockId("framework.enableGrouping");
+
+    FrameMenu(
+      emptyFrame,
+      frameworkGroupingOn,
+      callbacks,
+      mockEvent,
+      mockthreadcx
+    );
+
+    const receivedArray = showMenu.mock.calls[0][1];
+    expect(showMenu).toHaveBeenCalledWith(mockEvent, receivedArray);
+    const receivedArrayIds = receivedArray.map(item => item.id);
+    expect(receivedArrayIds).toEqual([frameworkGrouping, stacktraceId]);
+  });
+
+  it("uses the disableGrouping text if frameworkGroupingOn is false", () => {
+    const stacktraceId = generateMockId("copyStackTrace");
+    const frameworkGrouping = generateMockId("framework.disableGrouping");
+
+    FrameMenu(emptyFrame, true, callbacks, mockEvent, mockthreadcx);
+
+    const receivedArray = showMenu.mock.calls[0][1];
+    const receivedArrayIds = receivedArray.map(item => item.id);
+    expect(receivedArrayIds).toEqual([frameworkGrouping, stacktraceId]);
+  });
+
+  it("uses the enableGrouping text if frameworkGroupingOn is true", () => {
+    const stacktraceId = generateMockId("copyStackTrace");
+    const frameworkGrouping = generateMockId("framework.enableGrouping");
+
+    FrameMenu(emptyFrame, false, callbacks, mockEvent, mockthreadcx);
+
+    const receivedArray = showMenu.mock.calls[0][1];
+    const receivedArrayIds = receivedArray.map(item => item.id);
+    expect(receivedArrayIds).toEqual([frameworkGrouping, stacktraceId]);
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js
new file mode 100644
index 0000000000..da60418b07
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js
@@ -0,0 +1,295 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { mount, shallow } from "enzyme";
+import Frames from "../index.js";
+// eslint-disable-next-line
+import { formatCallStackFrames } from "../../../../selectors/getCallStackFrames";
+import { makeMockFrame, makeMockSource } from "../../../../utils/test-mockup";
+
+function render(overrides = {}) {
+  const defaultProps = {
+    frames: null,
+    selectedFrame: null,
+    frameworkGroupingOn: false,
+    toggleFrameworkGrouping: jest.fn(),
+    contextTypes: {},
+    selectFrame: jest.fn(),
+    toggleBlackBox: jest.fn(),
+  };
+
+  const props = { ...defaultProps, ...overrides };
+  const component = shallow(<Frames.WrappedComponent {...props} />, {
+    context: { l10n: L10N },
+  });
+
+  return component;
+}
+
+describe("Frames", () => {
+  describe("Supports different number of frames", () => {
+    it("empty frames", () => {
+      const component = render();
+      expect(component).toMatchSnapshot();
+      expect(component.find(".show-more").exists()).toBeFalsy();
+    });
+
+    it("one frame", () => {
+      const frames = [{ id: 1 }];
+      const selectedFrame = frames[0];
+      const component = render({ frames, selectedFrame });
+
+      expect(component.find(".show-more").exists()).toBeFalsy();
+      expect(component).toMatchSnapshot();
+    });
+
+    it("toggling the show more button", () => {
+      const frames = [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+        { id: 4 },
+        { id: 5 },
+        { id: 6 },
+        { id: 7 },
+        { id: 8 },
+        { id: 9 },
+        { id: 10 },
+      ];
+
+      const selectedFrame = frames[0];
+      const component = render({ selectedFrame, frames });
+
+      const getToggleBtn = () => component.find(".show-more");
+      const getFrames = () => component.find("Frame");
+
+      expect(getToggleBtn().text()).toEqual("Expand rows");
+      expect(getFrames()).toHaveLength(7);
+
+      getToggleBtn().simulate("click");
+      expect(getToggleBtn().text()).toEqual("Collapse rows");
+      expect(getFrames()).toHaveLength(10);
+      expect(component).toMatchSnapshot();
+    });
+
+    it("disable frame truncation", () => {
+      const framesNumber = 20;
+      const frames = Array.from({ length: framesNumber }, (_, i) => ({
+        id: i + 1,
+      }));
+
+      const component = render({
+        frames,
+        disableFrameTruncate: true,
+      });
+
+      const getToggleBtn = () => component.find(".show-more");
+      const getFrames = () => component.find("Frame");
+
+      expect(getToggleBtn().exists()).toBeFalsy();
+      expect(getFrames()).toHaveLength(framesNumber);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    it("shows the full URL", () => {
+      const frames = [
+        {
+          id: 1,
+          displayName: "renderFoo",
+          location: {
+            line: 55,
+          },
+          source: {
+            url: "http://myfile.com/mahscripts.js",
+          },
+        },
+      ];
+
+      const component = mount(
+        <Frames.WrappedComponent
+          frames={frames}
+          disableFrameTruncate={true}
+          displayFullUrl={true}
+        />
+      );
+      expect(component.text()).toBe(
+        "renderFoo http://myfile.com/mahscripts.js:55"
+      );
+    });
+
+    it("passes the getFrameTitle prop to the Frame component", () => {
+      const frames = [
+        {
+          id: 1,
+          displayName: "renderFoo",
+          location: {
+            line: 55,
+          },
+          source: {
+            url: "http://myfile.com/mahscripts.js",
+          },
+        },
+      ];
+      const getFrameTitle = () => {};
+      const component = render({ frames, getFrameTitle });
+
+      expect(component.find("Frame").prop("getFrameTitle")).toBe(getFrameTitle);
+      expect(component).toMatchSnapshot();
+    });
+
+    it("passes the getFrameTitle prop to the Group component", () => {
+      const frames = [
+        {
+          id: 1,
+          displayName: "renderFoo",
+          location: {
+            line: 55,
+          },
+          source: {
+            url: "http://myfile.com/mahscripts.js",
+          },
+        },
+        {
+          id: 2,
+          library: "back",
+          displayName: "a",
+          location: {
+            line: 55,
+          },
+          source: {
+            url: "http://myfile.com/back.js",
+          },
+        },
+        {
+          id: 3,
+          library: "back",
+          displayName: "b",
+          location: {
+            line: 55,
+          },
+          source: {
+            url: "http://myfile.com/back.js",
+          },
+        },
+      ];
+      const getFrameTitle = () => {};
+      const component = render({
+        frames,
+        getFrameTitle,
+        frameworkGroupingOn: true,
+      });
+
+      expect(component.find("Group").prop("getFrameTitle")).toBe(getFrameTitle);
+    });
+  });
+
+  describe("Blackboxed Frames", () => {
+    it("filters blackboxed frames", () => {
+      const source1 = makeMockSource("source1", "1");
+      const source2 = makeMockSource("source2", "2");
+      source2.isBlackBoxed = true;
+
+      const frames = [
+        makeMockFrame("1", source1),
+        makeMockFrame("2", source2),
+        makeMockFrame("3", source1),
+        makeMockFrame("8", source2),
+      ];
+
+      const blackboxedRanges = {
+        source2: [],
+      };
+
+      const processedFrames = formatCallStackFrames(
+        frames,
+        source1,
+        blackboxedRanges
+      );
+      const selectedFrame = frames[0];
+
+      const component = render({
+        frames: processedFrames,
+        frameworkGroupingOn: false,
+        selectedFrame,
+      });
+
+      expect(component.find("Frame")).toHaveLength(2);
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe("Library Frames", () => {
+    it("toggling framework frames", () => {
+      const frames = [
+        { id: 1 },
+        { id: 2, library: "back" },
+        { id: 3, library: "back" },
+        { id: 8 },
+      ];
+
+      const selectedFrame = frames[0];
+      const frameworkGroupingOn = false;
+      const component = render({ frames, frameworkGroupingOn, selectedFrame });
+
+      expect(component.find("Frame")).toHaveLength(4);
+      expect(component).toMatchSnapshot();
+
+      component.setProps({ frameworkGroupingOn: true });
+
+      expect(component.find("Frame")).toHaveLength(2);
+      expect(component).toMatchSnapshot();
+    });
+
+    it("groups all the Webpack-related frames", () => {
+      const frames = [
+        { id: "1-appFrame" },
+        {
+          id: "2-webpackBootstrapFrame",
+          source: { url: "webpack:///webpack/bootstrap 01d88449ca6e9335a66f" },
+        },
+        {
+          id: "3-webpackBundleFrame",
+          source: { url: "https://foo.com/bundle.js" },
+        },
+        {
+          id: "4-webpackBootstrapFrame",
+          source: { url: "webpack:///webpack/bootstrap 01d88449ca6e9335a66f" },
+        },
+        {
+          id: "5-webpackBundleFrame",
+          source: { url: "https://foo.com/bundle.js" },
+        },
+      ];
+      const selectedFrame = frames[0];
+      const frameworkGroupingOn = true;
+      const component = render({ frames, frameworkGroupingOn, selectedFrame });
+
+      expect(component).toMatchSnapshot();
+    });
+
+    it("selectable framework frames", () => {
+      const frames = [
+        { id: 1 },
+        { id: 2, library: "back" },
+        { id: 3, library: "back" },
+        { id: 8 },
+      ];
+
+      const selectedFrame = frames[0];
+
+      const component = render({
+        frames,
+        frameworkGroupingOn: false,
+        selectedFrame,
+        selectable: true,
+      });
+      expect(component).toMatchSnapshot();
+
+      component.setProps({ frameworkGroupingOn: true });
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js
new file mode 100644
index 0000000000..8ff1454d1a
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js
@@ -0,0 +1,134 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+import Group from "../Group.js";
+import {
+  makeMockFrame,
+  makeMockSource,
+  mockthreadcx,
+} from "../../../../utils/test-mockup";
+
+import FrameMenu from "../FrameMenu";
+jest.mock("../FrameMenu", () => jest.fn());
+
+function render(overrides = {}) {
+  const frame = { ...makeMockFrame(), displayName: "foo", library: "Back" };
+  const defaultProps = {
+    cx: mockthreadcx,
+    group: [frame],
+    selectedFrame: frame,
+    frameworkGroupingOn: true,
+    toggleFrameworkGrouping: jest.fn(),
+    selectFrame: jest.fn(),
+    selectLocation: jest.fn(),
+    copyStackTrace: jest.fn(),
+    toggleBlackBox: jest.fn(),
+    disableContextMenu: false,
+    displayFullUrl: false,
+    panel: "webconsole",
+    restart: jest.fn(),
+  };
+
+  const props = { ...defaultProps, ...overrides };
+  const component = shallow(<Group {...props} />, {
+    context: { l10n: L10N },
+  });
+  return { component, props };
+}
+
+describe("Group", () => {
+  it("displays a group", () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("passes the getFrameTitle prop to the Frame components", () => {
+    const mahscripts = makeMockSource("http://myfile.com/mahscripts.js");
+    const back = makeMockSource("http://myfile.com/back.js");
+    const group = [
+      {
+        ...makeMockFrame("1", mahscripts, undefined, 55, "renderFoo"),
+        library: "Back",
+      },
+      {
+        ...makeMockFrame("2", back, undefined, 55, "a"),
+        library: "Back",
+      },
+      {
+        ...makeMockFrame("3", back, undefined, 55, "b"),
+        library: "Back",
+      },
+    ];
+    const getFrameTitle = () => {};
+    const { component } = render({ group, getFrameTitle });
+
+    component.setState({ expanded: true });
+
+    const frameComponents = component.find("Frame");
+    expect(frameComponents).toHaveLength(3);
+    frameComponents.forEach(node => {
+      expect(node.prop("getFrameTitle")).toBe(getFrameTitle);
+    });
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders group with anonymous functions", () => {
+    const mahscripts = makeMockSource("http://myfile.com/mahscripts.js");
+    const back = makeMockSource("http://myfile.com/back.js");
+    const group = [
+      {
+        ...makeMockFrame("1", mahscripts, undefined, 55),
+        library: "Back",
+      },
+      {
+        ...makeMockFrame("2", back, undefined, 55),
+        library: "Back",
+      },
+      {
+        ...makeMockFrame("3", back, undefined, 55),
+        library: "Back",
+      },
+    ];
+
+    const { component } = render({ group });
+    expect(component).toMatchSnapshot();
+    component.setState({ expanded: true });
+    expect(component).toMatchSnapshot();
+  });
+
+  describe("mouse events", () => {
+    it("does not call FrameMenu when disableContextMenu is true", () => {
+      const { component } = render({
+        disableContextMenu: true,
+      });
+
+      const mockEvent = "mockEvent";
+      component.simulate("contextmenu", mockEvent);
+
+      expect(FrameMenu).toHaveBeenCalledTimes(0);
+    });
+
+    it("calls FrameMenu on right click", () => {
+      const { component, props } = render();
+      const { copyStackTrace, toggleFrameworkGrouping, toggleBlackBox, cx } =
+        props;
+      const mockEvent = "mockEvent";
+      component.simulate("contextmenu", mockEvent);
+
+      expect(FrameMenu).toHaveBeenCalledWith(
+        props.group[0],
+        props.frameworkGroupingOn,
+        {
+          copyStackTrace,
+          toggleFrameworkGrouping,
+          toggleBlackBox,
+        },
+        mockEvent,
+        cx
+      );
+    });
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap
new file mode 100644
index 0000000000..2b1edaeef7
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frame.spec.js.snap
@@ -0,0 +1,1196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Frame getFrameTitle 1`] = `
+<div
+  className="frame"
+  key="1"
+  onContextMenu={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  role="listitem"
+  tabIndex={0}
+  title="Jump to https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js:10"
+>
+  <FrameIndent />
+  <FrameTitle
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "renderFoo",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+              "path": "/assets/src/js/foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+                "path": "/assets/src/js/foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "1",
+        "index": 0,
+        "location": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+              "path": "/assets/src/js/foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+                "path": "/assets/src/js/foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "foo-view.js",
+            "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+            "path": "/assets/src/js/foo-view.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+    options={
+      Object {
+        "shouldMapDisplayName": true,
+      }
+    }
+  />
+  <span
+    className="clipboard-only"
+  >
+     
+  </span>
+  <FrameLocation
+    displayFullUrl={false}
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "renderFoo",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+              "path": "/assets/src/js/foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+                "path": "/assets/src/js/foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "1",
+        "index": 0,
+        "location": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+              "path": "/assets/src/js/foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+                "path": "/assets/src/js/foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "foo-view.js",
+            "group": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com",
+            "path": "/assets/src/js/foo-view.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/assets/src/js/foo-view.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+  />
+  <br
+    className="clipboard-only"
+  />
+</div>
+`;
+
+exports[`Frame library frame 1`] = `
+<div
+  className="frame selected"
+  key="3"
+  onContextMenu={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  role="listitem"
+  tabIndex={0}
+>
+  <FrameIndent />
+  <FrameTitle
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "updateEvents",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 12,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "backbone.js",
+              "group": "",
+              "path": "backbone.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "backbone.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "backbone.js",
+                "group": "",
+                "path": "backbone.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "backbone.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "3",
+        "index": 0,
+        "library": "backbone",
+        "location": Object {
+          "column": undefined,
+          "line": 12,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "backbone.js",
+              "group": "",
+              "path": "backbone.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "backbone.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "backbone.js",
+                "group": "",
+                "path": "backbone.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "backbone.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "backbone.js",
+            "group": "",
+            "path": "backbone.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "backbone.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+    options={
+      Object {
+        "shouldMapDisplayName": true,
+      }
+    }
+  />
+  <span
+    className="clipboard-only"
+  >
+     
+  </span>
+  <FrameLocation
+    displayFullUrl={false}
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "updateEvents",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 12,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "backbone.js",
+              "group": "",
+              "path": "backbone.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "backbone.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "backbone.js",
+                "group": "",
+                "path": "backbone.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "backbone.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "3",
+        "index": 0,
+        "library": "backbone",
+        "location": Object {
+          "column": undefined,
+          "line": 12,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "backbone.js",
+              "group": "",
+              "path": "backbone.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "backbone.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "backbone.js",
+                "group": "",
+                "path": "backbone.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "backbone.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "backbone.js",
+            "group": "",
+            "path": "backbone.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "backbone.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+  />
+  <br
+    className="clipboard-only"
+  />
+</div>
+`;
+
+exports[`Frame user frame (not selected) 1`] = `
+<div
+  className="frame"
+  key="1"
+  onContextMenu={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  role="listitem"
+  tabIndex={0}
+>
+  <FrameIndent />
+  <FrameTitle
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "renderFoo",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "1",
+        "index": 0,
+        "location": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "foo-view.js",
+            "group": "",
+            "path": "foo-view.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "foo-view.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+    options={
+      Object {
+        "shouldMapDisplayName": true,
+      }
+    }
+  />
+  <span
+    className="clipboard-only"
+  >
+     
+  </span>
+  <FrameLocation
+    displayFullUrl={false}
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "renderFoo",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "1",
+        "index": 0,
+        "location": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "foo-view.js",
+            "group": "",
+            "path": "foo-view.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "foo-view.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+  />
+  <br
+    className="clipboard-only"
+  />
+</div>
+`;
+
+exports[`Frame user frame 1`] = `
+<div
+  className="frame selected"
+  key="1"
+  onContextMenu={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  role="listitem"
+  tabIndex={0}
+>
+  <FrameIndent />
+  <FrameTitle
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "renderFoo",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "1",
+        "index": 0,
+        "location": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "foo-view.js",
+            "group": "",
+            "path": "foo-view.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "foo-view.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+    options={
+      Object {
+        "shouldMapDisplayName": true,
+      }
+    }
+  />
+  <span
+    className="clipboard-only"
+  >
+     
+  </span>
+  <FrameLocation
+    displayFullUrl={false}
+    frame={
+      Object {
+        "asyncCause": null,
+        "displayName": "renderFoo",
+        "generatedLocation": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "id": "1",
+        "index": 0,
+        "location": Object {
+          "column": undefined,
+          "line": 10,
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "foo-view.js",
+              "group": "",
+              "path": "foo-view.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "foo-view.js",
+          },
+          "sourceActor": Object {
+            "actor": "source-actor",
+            "id": "source-actor",
+            "source": "source",
+            "sourceObject": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "foo-view.js",
+                "group": "",
+                "path": "foo-view.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "foo-view.js",
+            },
+          },
+          "sourceActorId": "source-actor",
+          "sourceId": "source",
+          "sourceUrl": "",
+        },
+        "scope": Object {
+          "actor": "scope-actor",
+          "bindings": Object {
+            "arguments": Array [],
+            "variables": Object {},
+          },
+          "function": null,
+          "object": null,
+          "parent": null,
+          "scopeKind": "",
+          "type": "block",
+        },
+        "source": Object {
+          "displayURL": Object {
+            "fileExtension": "js",
+            "filename": "foo-view.js",
+            "group": "",
+            "path": "foo-view.js",
+            "search": "",
+          },
+          "extensionName": null,
+          "id": "source",
+          "isExtension": false,
+          "isOriginal": false,
+          "isPrettyPrinted": false,
+          "isWasm": false,
+          "thread": "FakeThread",
+          "url": "foo-view.js",
+        },
+        "state": "on-stack",
+        "this": Object {},
+        "thread": "FakeThread",
+        "type": "call",
+      }
+    }
+  />
+  <br
+    className="clipboard-only"
+  />
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frames.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frames.spec.js.snap
new file mode 100644
index 0000000000..9a9c2a379f
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Frames.spec.js.snap
@@ -0,0 +1,1651 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Frames Blackboxed Frames filters blackboxed frames 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-1",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "source1",
+              "group": "",
+              "path": "source1",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "1",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "source1",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-1",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "source1",
+              "group": "",
+              "path": "source1",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "1",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "source1",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-3",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "id": "3",
+          "index": 0,
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "source1",
+              "group": "",
+              "path": "source1",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "1",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "source1",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="3"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-1",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "source1",
+                "group": "",
+                "path": "source1",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "1",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "source1",
+            },
+            "sourceActor": Object {
+              "actor": "1-actor",
+              "id": "1-actor",
+              "source": "1",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "source1",
+                  "group": "",
+                  "path": "source1",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "1",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "source1",
+              },
+            },
+            "sourceActorId": "1-actor",
+            "sourceId": "1",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "source1",
+              "group": "",
+              "path": "source1",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "1",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "source1",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Library Frames groups all the Webpack-related frames 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": "1-appFrame",
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={false}
+      key="1-appFrame"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": "1-appFrame",
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Group
+      copyStackTrace={[Function]}
+      frameworkGroupingOn={true}
+      group={
+        Array [
+          Object {
+            "id": "2-webpackBootstrapFrame",
+            "source": Object {
+              "url": "webpack:///webpack/bootstrap 01d88449ca6e9335a66f",
+            },
+          },
+          Object {
+            "id": "3-webpackBundleFrame",
+            "source": Object {
+              "url": "https://foo.com/bundle.js",
+            },
+          },
+          Object {
+            "id": "4-webpackBootstrapFrame",
+            "source": Object {
+              "url": "webpack:///webpack/bootstrap 01d88449ca6e9335a66f",
+            },
+          },
+          Object {
+            "id": "5-webpackBundleFrame",
+            "source": Object {
+              "url": "https://foo.com/bundle.js",
+            },
+          },
+        ]
+      }
+      key="2-webpackBootstrapFrame"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": "1-appFrame",
+        }
+      }
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Library Frames selectable framework frames 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 2,
+          "library": "back",
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="2"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 3,
+          "library": "back",
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="3"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 8,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="8"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Library Frames selectable framework frames 2`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Group
+      copyStackTrace={[Function]}
+      frameworkGroupingOn={true}
+      group={
+        Array [
+          Object {
+            "id": 2,
+            "library": "back",
+          },
+          Object {
+            "id": 3,
+            "library": "back",
+          },
+        ]
+      }
+      key="2"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 8,
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={false}
+      key="8"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Library Frames toggling framework frames 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 2,
+          "library": "back",
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="2"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 3,
+          "library": "back",
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="3"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 8,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="8"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Library Frames toggling framework frames 2`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Group
+      copyStackTrace={[Function]}
+      frameworkGroupingOn={true}
+      group={
+        Array [
+          Object {
+            "id": 2,
+            "library": "back",
+          },
+          Object {
+            "id": 3,
+            "library": "back",
+          },
+        ]
+      }
+      key="2"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 8,
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={false}
+      key="8"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Supports different number of frames disable frame truncation 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 2,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="2"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 3,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="3"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 4,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="4"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 5,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="5"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 6,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="6"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 7,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="7"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 8,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="8"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 9,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="9"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 10,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="10"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 11,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="11"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 12,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="12"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 13,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="13"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 14,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="14"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 15,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="15"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 16,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="16"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 17,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="17"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 18,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="18"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 19,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="19"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 20,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="20"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Supports different number of frames empty frames 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    className="pane-info empty"
+  >
+    Not paused
+  </div>
+</div>
+`;
+
+exports[`Frames Supports different number of frames one frame 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Supports different number of frames passes the getFrameTitle prop to the Frame component 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "displayName": "renderFoo",
+          "id": 1,
+          "location": Object {
+            "line": 55,
+          },
+          "source": Object {
+            "url": "http://myfile.com/mahscripts.js",
+          },
+        }
+      }
+      frameworkGroupingOn={false}
+      getFrameTitle={[Function]}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={null}
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Frames Supports different number of frames toggling the show more button 1`] = `
+<div
+  className="pane frames"
+>
+  <div
+    role="list"
+  >
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 1,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="1"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 2,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="2"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 3,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="3"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 4,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="4"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 5,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="5"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 6,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="6"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 7,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="7"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 8,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="8"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 9,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="9"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Frame
+      copyStackTrace={[Function]}
+      disableContextMenu={false}
+      frame={
+        Object {
+          "id": 10,
+        }
+      }
+      frameworkGroupingOn={false}
+      hideLocation={false}
+      key="10"
+      selectFrame={[MockFunction]}
+      selectedFrame={
+        Object {
+          "id": 1,
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </div>
+  <div
+    className="show-more-container"
+  >
+    <button
+      className="show-more"
+      onClick={[Function]}
+    >
+      Collapse rows
+    </button>
+  </div>
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
new file mode 100644
index 0000000000..d6542f7fd2
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
@@ -0,0 +1,2440 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group displays a group 1`] = `
+<div
+  className="frames-group"
+  onContextMenu={[Function]}
+>
+  <div
+    className="group"
+    key="frame"
+    onClick={[Function]}
+    role="listitem"
+    tabIndex={0}
+    title="Show Back frames"
+  >
+    <FrameIndent />
+    <FrameLocation
+      expanded={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+    />
+    <span
+      className="clipboard-only"
+    >
+       
+    </span>
+    <Badge>
+      1
+    </Badge>
+    <br
+      className="clipboard-only"
+    />
+  </div>
+</div>
+`;
+
+exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
+<div
+  className="frames-group expanded"
+  onContextMenu={[Function]}
+>
+  <div
+    className="group"
+    key="1"
+    onClick={[Function]}
+    role="listitem"
+    tabIndex={0}
+    title="Collapse Back frames"
+  >
+    <FrameIndent />
+    <FrameLocation
+      expanded={true}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "renderFoo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "mahscripts.js",
+              "group": "myfile.com",
+              "path": "/mahscripts.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/mahscripts.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+    />
+    <span
+      className="clipboard-only"
+    >
+       
+    </span>
+    <Badge>
+      3
+    </Badge>
+    <br
+      className="clipboard-only"
+    />
+  </div>
+  <div
+    className="frames-list"
+  >
+    <FrameIndent
+      key="frame-indent-0"
+    />
+    <Frame
+      copyStackTrace={[MockFunction]}
+      cx={
+        Object {
+          "isPaused": false,
+          "navigateCounter": 0,
+          "pauseCounter": 0,
+          "thread": "FakeThread",
+        }
+      }
+      disableContextMenu={false}
+      displayFullUrl={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "renderFoo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "mahscripts.js",
+              "group": "myfile.com",
+              "path": "/mahscripts.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/mahscripts.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={true}
+      getFrameTitle={[Function]}
+      hideLocation={true}
+      key="1"
+      panel="webconsole"
+      restart={[MockFunction]}
+      selectFrame={[MockFunction]}
+      selectLocation={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={false}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[MockFunction]}
+    />
+    <FrameIndent
+      key="frame-indent-1"
+    />
+    <Frame
+      copyStackTrace={[MockFunction]}
+      cx={
+        Object {
+          "isPaused": false,
+          "navigateCounter": 0,
+          "pauseCounter": 0,
+          "thread": "FakeThread",
+        }
+      }
+      disableContextMenu={false}
+      displayFullUrl={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "a",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "2",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "back.js",
+              "group": "myfile.com",
+              "path": "/back.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/back.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={true}
+      getFrameTitle={[Function]}
+      hideLocation={true}
+      key="2"
+      panel="webconsole"
+      restart={[MockFunction]}
+      selectFrame={[MockFunction]}
+      selectLocation={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={false}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[MockFunction]}
+    />
+    <FrameIndent
+      key="frame-indent-2"
+    />
+    <Frame
+      copyStackTrace={[MockFunction]}
+      cx={
+        Object {
+          "isPaused": false,
+          "navigateCounter": 0,
+          "pauseCounter": 0,
+          "thread": "FakeThread",
+        }
+      }
+      disableContextMenu={false}
+      displayFullUrl={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "b",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "3",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "back.js",
+              "group": "myfile.com",
+              "path": "/back.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/back.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={true}
+      getFrameTitle={[Function]}
+      hideLocation={true}
+      key="3"
+      panel="webconsole"
+      restart={[MockFunction]}
+      selectFrame={[MockFunction]}
+      selectLocation={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={false}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[MockFunction]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Group renders group with anonymous functions 1`] = `
+<div
+  className="frames-group"
+  onContextMenu={[Function]}
+>
+  <div
+    className="group"
+    key="1"
+    onClick={[Function]}
+    role="listitem"
+    tabIndex={0}
+    title="Show Back frames"
+  >
+    <FrameIndent />
+    <FrameLocation
+      expanded={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-1",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "mahscripts.js",
+              "group": "myfile.com",
+              "path": "/mahscripts.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/mahscripts.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+    />
+    <span
+      className="clipboard-only"
+    >
+       
+    </span>
+    <Badge>
+      3
+    </Badge>
+    <br
+      className="clipboard-only"
+    />
+  </div>
+</div>
+`;
+
+exports[`Group renders group with anonymous functions 2`] = `
+<div
+  className="frames-group expanded"
+  onContextMenu={[Function]}
+>
+  <div
+    className="group"
+    key="1"
+    onClick={[Function]}
+    role="listitem"
+    tabIndex={0}
+    title="Collapse Back frames"
+  >
+    <FrameIndent />
+    <FrameLocation
+      expanded={true}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-1",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "mahscripts.js",
+              "group": "myfile.com",
+              "path": "/mahscripts.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/mahscripts.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+    />
+    <span
+      className="clipboard-only"
+    >
+       
+    </span>
+    <Badge>
+      3
+    </Badge>
+    <br
+      className="clipboard-only"
+    />
+  </div>
+  <div
+    className="frames-list"
+  >
+    <FrameIndent
+      key="frame-indent-0"
+    />
+    <Frame
+      copyStackTrace={[MockFunction]}
+      cx={
+        Object {
+          "isPaused": false,
+          "navigateCounter": 0,
+          "pauseCounter": 0,
+          "thread": "FakeThread",
+        }
+      }
+      disableContextMenu={false}
+      displayFullUrl={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-1",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "1",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "mahscripts.js",
+                "group": "myfile.com",
+                "path": "/mahscripts.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/mahscripts.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "mahscripts.js",
+                  "group": "myfile.com",
+                  "path": "/mahscripts.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/mahscripts.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "mahscripts.js",
+              "group": "myfile.com",
+              "path": "/mahscripts.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/mahscripts.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={true}
+      key="1"
+      panel="webconsole"
+      restart={[MockFunction]}
+      selectFrame={[MockFunction]}
+      selectLocation={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={false}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[MockFunction]}
+    />
+    <FrameIndent
+      key="frame-indent-1"
+    />
+    <Frame
+      copyStackTrace={[MockFunction]}
+      cx={
+        Object {
+          "isPaused": false,
+          "navigateCounter": 0,
+          "pauseCounter": 0,
+          "thread": "FakeThread",
+        }
+      }
+      disableContextMenu={false}
+      displayFullUrl={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-2",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "2",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "back.js",
+              "group": "myfile.com",
+              "path": "/back.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/back.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={true}
+      key="2"
+      panel="webconsole"
+      restart={[MockFunction]}
+      selectFrame={[MockFunction]}
+      selectLocation={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={false}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[MockFunction]}
+    />
+    <FrameIndent
+      key="frame-indent-2"
+    />
+    <Frame
+      copyStackTrace={[MockFunction]}
+      cx={
+        Object {
+          "isPaused": false,
+          "navigateCounter": 0,
+          "pauseCounter": 0,
+          "thread": "FakeThread",
+        }
+      }
+      disableContextMenu={false}
+      displayFullUrl={false}
+      frame={
+        Object {
+          "asyncCause": null,
+          "displayName": "display-3",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "3",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 55,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "js",
+                "filename": "back.js",
+                "group": "myfile.com",
+                "path": "/back.js",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "http://myfile.com/back.js",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "js",
+                  "filename": "back.js",
+                  "group": "myfile.com",
+                  "path": "/back.js",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "http://myfile.com/back.js",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "js",
+              "filename": "back.js",
+              "group": "myfile.com",
+              "path": "/back.js",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "http://myfile.com/back.js",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={true}
+      key="3"
+      panel="webconsole"
+      restart={[MockFunction]}
+      selectFrame={[MockFunction]}
+      selectLocation={[MockFunction]}
+      selectedFrame={
+        Object {
+          "asyncCause": null,
+          "displayName": "foo",
+          "generatedLocation": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "id": "frame",
+          "index": 0,
+          "library": "Back",
+          "location": Object {
+            "column": undefined,
+            "line": 4,
+            "source": Object {
+              "displayURL": Object {
+                "fileExtension": "",
+                "filename": "url",
+                "group": "",
+                "path": "url",
+                "search": "",
+              },
+              "extensionName": null,
+              "id": "source",
+              "isExtension": false,
+              "isOriginal": false,
+              "isPrettyPrinted": false,
+              "isWasm": false,
+              "thread": "FakeThread",
+              "url": "url",
+            },
+            "sourceActor": Object {
+              "actor": "source-actor",
+              "id": "source-actor",
+              "source": "source",
+              "sourceObject": Object {
+                "displayURL": Object {
+                  "fileExtension": "",
+                  "filename": "url",
+                  "group": "",
+                  "path": "url",
+                  "search": "",
+                },
+                "extensionName": null,
+                "id": "source",
+                "isExtension": false,
+                "isOriginal": false,
+                "isPrettyPrinted": false,
+                "isWasm": false,
+                "thread": "FakeThread",
+                "url": "url",
+              },
+            },
+            "sourceActorId": "source-actor",
+            "sourceId": "source",
+            "sourceUrl": "",
+          },
+          "scope": Object {
+            "actor": "scope-actor",
+            "bindings": Object {
+              "arguments": Array [],
+              "variables": Object {},
+            },
+            "function": null,
+            "object": null,
+            "parent": null,
+            "scopeKind": "",
+            "type": "block",
+          },
+          "source": Object {
+            "displayURL": Object {
+              "fileExtension": "",
+              "filename": "url",
+              "group": "",
+              "path": "url",
+              "search": "",
+            },
+            "extensionName": null,
+            "id": "source",
+            "isExtension": false,
+            "isOriginal": false,
+            "isPrettyPrinted": false,
+            "isWasm": false,
+            "thread": "FakeThread",
+            "url": "url",
+          },
+          "state": "on-stack",
+          "this": Object {},
+          "thread": "FakeThread",
+          "type": "call",
+        }
+      }
+      shouldMapDisplayName={false}
+      toggleBlackBox={[MockFunction]}
+      toggleFrameworkGrouping={[MockFunction]}
+    />
+  </div>
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css
new file mode 100644
index 0000000000..6f47c45d19
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css
@@ -0,0 +1,104 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.secondary-panes .map-scopes-header {
+  padding-inline-end: 3px;
+}
+
+.secondary-panes .header-buttons .img.shortcuts {
+  width: 14px;
+  height: 14px;
+  /* Better vertical centering of the icon */
+  margin-top: -2px;
+}
+
+.scopes-content .node.object-node {
+  padding-inline-start: 7px;
+}
+
+.scopes-content .pane.scopes-list {
+  font-family: var(--monospace-font-family);
+}
+
+.scopes-content .toggle-map-scopes a.mdn {
+  padding-inline-start: 3px;
+}
+
+.scopes-content .toggle-map-scopes .img.shortcuts {
+  background: var(--theme-comment);
+}
+
+.object-node.default-property {
+  opacity: 0.6;
+}
+
+.object-node {
+  padding-inline-start: 20px;
+}
+
+html[dir="rtl"] .object-node {
+  padding-right: 4px;
+}
+
+.object-label {
+  color: var(--theme-highlight-blue);
+}
+
+.objectBox-object,
+.objectBox-text,
+.objectBox-table,
+.objectLink-textNode,
+.objectLink-event,
+.objectLink-eventLog,
+.objectLink-regexp,
+.objectLink-object,
+.objectLink-Date,
+.theme-dark .objectBox-object,
+.theme-light .objectBox-object {
+  white-space: nowrap;
+}
+
+.scopes-pane ._content {
+  overflow: auto;
+}
+
+.scopes-list {
+  padding: 4px 0px;
+}
+
+.scopes-list .function-signature {
+  display: inline-block;
+}
+
+.scopes-list .scope-type-toggle {
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.scopes-list .scope-type-toggle button {
+  /* Override color so that the link doesn't turn purple */
+  color: var(--theme-body-color);
+  font-size: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.scopes-list .scope-type-toggle button:hover {
+  background: transparent;
+}
+
+.scopes-list .tree.object-inspector .node.object-node {
+  display: flex;
+  align-items: center;
+}
+
+.scopes-list .tree.object-inspector .tree-node button.arrow,
+.scopes-list button.invoke-getter {
+  margin-top: 2px;
+}
+
+.scopes-list .tree {
+  line-height: 15px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js
new file mode 100644
index 0000000000..2b6b5f94c9
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js
@@ -0,0 +1,311 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { showMenu } from "../../context-menu/menu";
+import { connect } from "../../utils/connect";
+import actions from "../../actions";
+
+import {
+  getSelectedSource,
+  getSelectedFrame,
+  getGeneratedFrameScope,
+  getOriginalFrameScope,
+  getPauseReason,
+  isMapScopesEnabled,
+  getThreadContext,
+  getLastExpandedScopes,
+  getIsCurrentThreadPaused,
+} from "../../selectors";
+import { getScopes } from "../../utils/pause/scopes";
+import { getScopeItemPath } from "../../utils/pause/scopes/utils";
+import { clientCommands } from "../../client/firefox";
+
+import { objectInspector } from "devtools/client/shared/components/reps/index";
+
+import "./Scopes.css";
+
+const { ObjectInspector } = objectInspector;
+
+class Scopes extends PureComponent {
+  constructor(props) {
+    const { why, selectedFrame, originalFrameScopes, generatedFrameScopes } =
+      props;
+
+    super(props);
+
+    this.state = {
+      originalScopes: getScopes(why, selectedFrame, originalFrameScopes),
+      generatedScopes: getScopes(why, selectedFrame, generatedFrameScopes),
+      showOriginal: true,
+    };
+  }
+
+  static get propTypes() {
+    return {
+      addWatchpoint: PropTypes.func.isRequired,
+      cx: PropTypes.object.isRequired,
+      expandedScopes: PropTypes.array.isRequired,
+      generatedFrameScopes: PropTypes.object,
+      highlightDomElement: PropTypes.func.isRequired,
+      isLoading: PropTypes.bool.isRequired,
+      isPaused: PropTypes.bool.isRequired,
+      mapScopesEnabled: PropTypes.bool.isRequired,
+      openElementInInspector: PropTypes.func.isRequired,
+      openLink: PropTypes.func.isRequired,
+      originalFrameScopes: PropTypes.object,
+      removeWatchpoint: PropTypes.func.isRequired,
+      selectedFrame: PropTypes.object.isRequired,
+      setExpandedScope: PropTypes.func.isRequired,
+      toggleMapScopes: PropTypes.func.isRequired,
+      unHighlightDomElement: PropTypes.func.isRequired,
+      why: PropTypes.object.isRequired,
+    };
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      selectedFrame,
+      originalFrameScopes,
+      generatedFrameScopes,
+      isPaused,
+    } = this.props;
+    const isPausedChanged = isPaused !== nextProps.isPaused;
+    const selectedFrameChanged = selectedFrame !== nextProps.selectedFrame;
+    const originalFrameScopesChanged =
+      originalFrameScopes !== nextProps.originalFrameScopes;
+    const generatedFrameScopesChanged =
+      generatedFrameScopes !== nextProps.generatedFrameScopes;
+
+    if (
+      isPausedChanged ||
+      selectedFrameChanged ||
+      originalFrameScopesChanged ||
+      generatedFrameScopesChanged
+    ) {
+      this.setState({
+        originalScopes: getScopes(
+          nextProps.why,
+          nextProps.selectedFrame,
+          nextProps.originalFrameScopes
+        ),
+        generatedScopes: getScopes(
+          nextProps.why,
+          nextProps.selectedFrame,
+          nextProps.generatedFrameScopes
+        ),
+      });
+    }
+  }
+
+  onToggleMapScopes = () => {
+    this.props.toggleMapScopes();
+  };
+
+  onContextMenu = (event, item) => {
+    const { addWatchpoint, removeWatchpoint } = this.props;
+
+    if (!item.parent || !item.contents.configurable) {
+      return;
+    }
+
+    if (!item.contents || item.contents.watchpoint) {
+      const removeWatchpointLabel = L10N.getStr("watchpoints.removeWatchpoint");
+
+      const removeWatchpointItem = {
+        id: "node-menu-remove-watchpoint",
+        label: removeWatchpointLabel,
+        disabled: false,
+        click: () => removeWatchpoint(item),
+      };
+
+      const menuItems = [removeWatchpointItem];
+      showMenu(event, menuItems);
+      return;
+    }
+
+    const addSetWatchpointLabel = L10N.getStr("watchpoints.setWatchpoint");
+    const addGetWatchpointLabel = L10N.getStr("watchpoints.getWatchpoint");
+    const addGetOrSetWatchpointLabel = L10N.getStr(
+      "watchpoints.getOrSetWatchpoint"
+    );
+    const watchpointsSubmenuLabel = L10N.getStr("watchpoints.submenu");
+
+    const addSetWatchpointItem = {
+      id: "node-menu-add-set-watchpoint",
+      label: addSetWatchpointLabel,
+      disabled: false,
+      click: () => addWatchpoint(item, "set"),
+    };
+
+    const addGetWatchpointItem = {
+      id: "node-menu-add-get-watchpoint",
+      label: addGetWatchpointLabel,
+      disabled: false,
+      click: () => addWatchpoint(item, "get"),
+    };
+
+    const addGetOrSetWatchpointItem = {
+      id: "node-menu-add-get-watchpoint",
+      label: addGetOrSetWatchpointLabel,
+      disabled: false,
+      click: () => addWatchpoint(item, "getorset"),
+    };
+
+    const watchpointsSubmenuItem = {
+      id: "node-menu-watchpoints",
+      label: watchpointsSubmenuLabel,
+      disabled: false,
+      click: () => addWatchpoint(item, "set"),
+      submenu: [
+        addSetWatchpointItem,
+        addGetWatchpointItem,
+        addGetOrSetWatchpointItem,
+      ],
+    };
+
+    const menuItems = [watchpointsSubmenuItem];
+    showMenu(event, menuItems);
+  };
+
+  renderWatchpointButton = item => {
+    const { removeWatchpoint } = this.props;
+
+    if (
+      !item ||
+      !item.contents ||
+      !item.contents.watchpoint ||
+      typeof L10N === "undefined"
+    ) {
+      return null;
+    }
+
+    const { watchpoint } = item.contents;
+    return (
+      <button
+        className={`remove-watchpoint-${watchpoint}`}
+        title={L10N.getStr("watchpoints.removeWatchpointTooltip")}
+        onClick={e => {
+          e.stopPropagation();
+          removeWatchpoint(item);
+        }}
+      />
+    );
+  };
+
+  renderScopesList() {
+    const {
+      cx,
+      isLoading,
+      openLink,
+      openElementInInspector,
+      highlightDomElement,
+      unHighlightDomElement,
+      mapScopesEnabled,
+      selectedFrame,
+      setExpandedScope,
+      expandedScopes,
+    } = this.props;
+    const { originalScopes, generatedScopes, showOriginal } = this.state;
+
+    const scopes =
+      (showOriginal && mapScopesEnabled && originalScopes) || generatedScopes;
+
+    function initiallyExpanded(item) {
+      return expandedScopes.some(path => path == getScopeItemPath(item));
+    }
+
+    if (scopes && !!scopes.length && !isLoading) {
+      return (
+        <div className="pane scopes-list">
+          <ObjectInspector
+            roots={scopes}
+            autoExpandAll={false}
+            autoExpandDepth={1}
+            client={clientCommands}
+            createElement={tagName => document.createElement(tagName)}
+            disableWrap={true}
+            dimTopLevelWindow={true}
+            frame={selectedFrame}
+            mayUseCustomFormatter={true}
+            openLink={openLink}
+            onDOMNodeClick={grip => openElementInInspector(grip)}
+            onInspectIconClick={grip => openElementInInspector(grip)}
+            onDOMNodeMouseOver={grip => highlightDomElement(grip)}
+            onDOMNodeMouseOut={grip => unHighlightDomElement(grip)}
+            onContextMenu={this.onContextMenu}
+            setExpanded={(path, expand) => setExpandedScope(cx, path, expand)}
+            initiallyExpanded={initiallyExpanded}
+            renderItemActions={this.renderWatchpointButton}
+            shouldRenderTooltip={true}
+          />
+        </div>
+      );
+    }
+
+    let stateText = L10N.getStr("scopes.notPaused");
+    if (this.props.isPaused) {
+      if (isLoading) {
+        stateText = L10N.getStr("loadingText");
+      } else {
+        stateText = L10N.getStr("scopes.notAvailable");
+      }
+    }
+
+    return (
+      <div className="pane scopes-list">
+        <div className="pane-info">{stateText}</div>
+      </div>
+    );
+  }
+
+  render() {
+    return <div className="scopes-content">{this.renderScopesList()}</div>;
+  }
+}
+
+const mapStateToProps = state => {
+  const cx = getThreadContext(state);
+  const selectedFrame = getSelectedFrame(state, cx.thread);
+  const selectedSource = getSelectedSource(state);
+
+  const { scope: originalFrameScopes, pending: originalPending } =
+    getOriginalFrameScope(
+      state,
+      cx.thread,
+      selectedSource?.id,
+      selectedFrame?.id
+    ) || { scope: null, pending: false };
+
+  const { scope: generatedFrameScopes, pending: generatedPending } =
+    getGeneratedFrameScope(state, cx.thread, selectedFrame?.id) || {
+      scope: null,
+      pending: false,
+    };
+
+  return {
+    cx,
+    selectedFrame,
+    mapScopesEnabled: isMapScopesEnabled(state),
+    isLoading: generatedPending || originalPending,
+    why: getPauseReason(state, cx.thread),
+    originalFrameScopes,
+    generatedFrameScopes,
+    expandedScopes: getLastExpandedScopes(state, cx.thread),
+    isPaused: getIsCurrentThreadPaused(state),
+  };
+};
+
+export default connect(mapStateToProps, {
+  openLink: actions.openLink,
+  openElementInInspector: actions.openElementInInspectorCommand,
+  highlightDomElement: actions.highlightDomElement,
+  unHighlightDomElement: actions.unHighlightDomElement,
+  toggleMapScopes: actions.toggleMapScopes,
+  setExpandedScope: actions.setExpandedScope,
+  addWatchpoint: actions.addWatchpoint,
+  removeWatchpoint: actions.removeWatchpoint,
+})(Scopes);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css b/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css
new file mode 100644
index 0000000000..dec84252f8
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.secondary-panes {
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  white-space: nowrap;
+  background-color: var(--theme-sidebar-background);
+  --breakpoint-expression-right-clear-space: 36px;
+}
+
+.secondary-panes .controlled > div {
+  max-width: 100%;
+}
+
+/*
+  We apply overflow to the container with the commandbar.
+  This allows the commandbar to remain fixed when scrolling
+  until the content completely ends. Not just the height of
+  the wrapper.
+  Ref: https://github.com/firefox-devtools/debugger/issues/3426
+*/
+
+.secondary-panes-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.secondary-panes .accordion {
+  flex: 1 0 auto;
+  margin-bottom: 0;
+}
+
+.secondary-panes-wrapper .accordion li:last-child ._content {
+  border-bottom: 0;
+}
+
+.pane {
+  color: var(--theme-body-color);
+}
+
+.pane .pane-info {
+  font-style: italic;
+  text-align: center;
+  padding: 0.5em;
+  user-select: none;
+  cursor: default;
+}
+
+.secondary-panes .breakpoints-buttons {
+  display: flex;
+}
+
+.dropdown {
+  width: 20em;
+  overflow: auto;
+}
+
+.secondary-panes input[type="checkbox"] {
+  margin: 0;
+  margin-inline-end: 4px;
+  vertical-align: middle;
+}
+
+.secondary-panes-wrapper .command-bar.bottom {
+  background-color: var(--theme-body-background);
+}
+
+/**
+ * Skip Pausing style
+ * Add a gray background and lower content opacity
+ */
+.skip-pausing .xhr-breakpoints-pane ._content,
+.skip-pausing .breakpoints-pane ._content,
+.skip-pausing .event-listeners-pane ._content,
+.skip-pausing .dom-mutations-pane ._content {
+  background-color: var(--skip-pausing-background-color);
+  opacity: var(--skip-pausing-opacity);
+  color: var(--skip-pausing-color);
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Thread.js b/devtools/client/debugger/src/components/SecondaryPanes/Thread.js
new file mode 100644
index 0000000000..c9db8a25ef
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Thread.js
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../utils/connect";
+
+import actions from "../../actions";
+import { getCurrentThread, getIsPaused, getContext } from "../../selectors";
+import AccessibleImage from "../shared/AccessibleImage";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+export class Thread extends Component {
+  static get propTypes() {
+    return {
+      currentThread: PropTypes.string.isRequired,
+      cx: PropTypes.object.isRequired,
+      isPaused: PropTypes.bool.isRequired,
+      selectThread: PropTypes.func.isRequired,
+      thread: PropTypes.object.isRequired,
+    };
+  }
+
+  onSelectThread = () => {
+    const { thread } = this.props;
+    this.props.selectThread(this.props.cx, thread.actor);
+  };
+
+  render() {
+    const { currentThread, isPaused, thread } = this.props;
+
+    const isWorker = thread.targetType.includes("worker");
+    let label = thread.name;
+    if (thread.serviceWorkerStatus) {
+      label += ` (${thread.serviceWorkerStatus})`;
+    }
+
+    return (
+      <div
+        className={classnames("thread", {
+          selected: thread.actor == currentThread,
+        })}
+        key={thread.actor}
+        onClick={this.onSelectThread}
+      >
+        <div className="icon">
+          <AccessibleImage className={isWorker ? "worker" : "window"} />
+        </div>
+        <div className="label">{label}</div>
+        {isPaused ? (
+          <div className="pause-badge">
+            <AccessibleImage className="pause" />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, props) => ({
+  cx: getContext(state),
+  currentThread: getCurrentThread(state),
+  isPaused: getIsPaused(state, props.thread.actor),
+});
+
+export default connect(mapStateToProps, {
+  selectThread: actions.selectThread,
+})(Thread);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Threads.css b/devtools/client/debugger/src/components/SecondaryPanes/Threads.css
new file mode 100644
index 0000000000..49e150dd44
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Threads.css
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.threads-list {
+  padding: 4px 0;
+}
+
+.threads-list * {
+  user-select: none;
+}
+
+.threads-list > .thread {
+  font-size: inherit;
+  color: var(--theme-text-color-strong);
+  padding: 2px 6px;
+  padding-inline-start: 20px;
+  line-height: 16px;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.threads-list > .thread:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.threads-list > .thread.selected {
+  background-color: var(--tab-line-selected-color);
+}
+
+.threads-list .icon {
+  flex: none;
+  margin-inline-end: 4px;
+}
+
+.threads-list .img {
+  display: block;
+}
+
+.threads-list .label {
+  display: inline-block;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.threads-list .pause-badge {
+  flex: none;
+  margin-inline-start: 4px;
+}
+
+.threads-list > .thread.selected {
+  background: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.threads-list > .thread.selected .img {
+  background-color: currentColor;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Threads.js b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js
new file mode 100644
index 0000000000..4dbf0ff081
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../utils/connect";
+
+import { getAllThreads } from "../../selectors";
+import Thread from "./Thread";
+
+import "./Threads.css";
+
+export class Threads extends Component {
+  static get propTypes() {
+    return {
+      threads: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { threads } = this.props;
+
+    return (
+      <div className="pane threads-list">
+        {threads.map(thread => (
+          <Thread thread={thread} key={thread.actor} />
+        ))}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  threads: getAllThreads(state),
+});
+
+export default connect(mapStateToProps)(Threads);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.css b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.css
new file mode 100644
index 0000000000..cbe2ebf4c9
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.css
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.why-paused {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  background-color: hsl(54, 100%, 92%);
+  color: var(--theme-body-color);
+  font-size: 12px;
+  cursor: default;
+  min-height: 44px;
+  padding: 6px;
+  white-space: normal;
+  font-weight: bold;
+}
+
+.why-paused > div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.why-paused .info.icon {
+  align-self: center;
+  padding-right: 4px;
+  margin-inline-start: 14px;
+  margin-inline-end: 3px;
+}
+
+.why-paused .pause.reason {
+  display: flex;
+  flex-direction: column;
+  padding-right: 4px;
+}
+
+.theme-dark .secondary-panes .why-paused {
+  background-color: hsl(42, 37%, 19%);
+  color: hsl(43, 94%, 81%);
+}
+
+.why-paused .message {
+  font-style: italic;
+  font-weight: 100;
+}
+
+.why-paused .mutationNode {
+  font-weight: normal;
+}
+
+.why-paused .message.warning {
+  color: var(--theme-graphs-full-red);
+  font-family: var(--monospace-font-family);
+  font-size: 10px;
+  font-style: normal;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
new file mode 100644
index 0000000000..5123649f37
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
@@ -0,0 +1,183 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+const {
+  LocalizationProvider,
+  Localized,
+} = require("devtools/client/shared/vendor/fluent-react");
+
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../utils/connect";
+import AccessibleImage from "../shared/AccessibleImage";
+import actions from "../../actions";
+
+import Reps from "devtools/client/shared/components/reps/index";
+const {
+  REPS: { Rep },
+  MODE,
+} = Reps;
+
+import { getPauseReason } from "../../utils/pause";
+import {
+  getCurrentThread,
+  getPaneCollapse,
+  getPauseReason as getWhy,
+} from "../../selectors";
+
+import "./WhyPaused.css";
+
+class WhyPaused extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { hideWhyPaused: "" };
+  }
+
+  static get propTypes() {
+    return {
+      delay: PropTypes.number.isRequired,
+      endPanelCollapsed: PropTypes.bool.isRequired,
+      highlightDomElement: PropTypes.func.isRequired,
+      openElementInInspector: PropTypes.func.isRequired,
+      unHighlightDomElement: PropTypes.func.isRequired,
+      why: PropTypes.object,
+    };
+  }
+
+  componentDidUpdate() {
+    const { delay } = this.props;
+
+    if (delay) {
+      setTimeout(() => {
+        this.setState({ hideWhyPaused: "" });
+      }, delay);
+    } else {
+      this.setState({ hideWhyPaused: "pane why-paused" });
+    }
+  }
+
+  renderExceptionSummary(exception) {
+    if (typeof exception === "string") {
+      return exception;
+    }
+
+    const { preview } = exception;
+    if (!preview || !preview.name || !preview.message) {
+      return null;
+    }
+
+    return `${preview.name}: ${preview.message}`;
+  }
+
+  renderMessage(why) {
+    const { type, exception, message } = why;
+
+    if (type == "exception" && exception) {
+      // Our types for 'Why' are too general because 'type' can be 'string'.
+      // $FlowFixMe - We should have a proper discriminating union of reasons.
+      const summary = this.renderExceptionSummary(exception);
+      return <div className="message warning">{summary}</div>;
+    }
+
+    if (type === "mutationBreakpoint" && why.nodeGrip) {
+      const { nodeGrip, ancestorGrip, action } = why;
+      const {
+        openElementInInspector,
+        highlightDomElement,
+        unHighlightDomElement,
+      } = this.props;
+
+      const targetRep = Rep({
+        object: nodeGrip,
+        mode: MODE.TINY,
+        onDOMNodeClick: () => openElementInInspector(nodeGrip),
+        onInspectIconClick: () => openElementInInspector(nodeGrip),
+        onDOMNodeMouseOver: () => highlightDomElement(nodeGrip),
+        onDOMNodeMouseOut: () => unHighlightDomElement(),
+      });
+
+      const ancestorRep = ancestorGrip
+        ? Rep({
+            object: ancestorGrip,
+            mode: MODE.TINY,
+            onDOMNodeClick: () => openElementInInspector(ancestorGrip),
+            onInspectIconClick: () => openElementInInspector(ancestorGrip),
+            onDOMNodeMouseOver: () => highlightDomElement(ancestorGrip),
+            onDOMNodeMouseOut: () => unHighlightDomElement(),
+          })
+        : null;
+
+      return (
+        <div>
+          <div className="message">{why.message}</div>
+          <div className="mutationNode">
+            {ancestorRep}
+            {ancestorGrip ? (
+              <span className="why-paused-ancestor">
+                <Localized
+                  id={
+                    action === "remove"
+                      ? "whypaused-mutation-breakpoint-removed"
+                      : "whypaused-mutation-breakpoint-added"
+                  }
+                ></Localized>
+                {targetRep}
+              </span>
+            ) : (
+              targetRep
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    if (typeof message == "string") {
+      return <div className="message">{message}</div>;
+    }
+
+    return null;
+  }
+
+  render() {
+    const { endPanelCollapsed, why } = this.props;
+    const { fluentBundles } = this.context;
+    const reason = getPauseReason(why);
+
+    if (!why || !reason || endPanelCollapsed) {
+      return <div className={this.state.hideWhyPaused} />;
+    }
+    return (
+      // We're rendering the LocalizationProvider component from here and not in an upper
+      // component because it does set a new context, overriding the context that we set
+      // in the first place in <App>, which breaks some components.
+      // This should be fixed in Bug 1743155.
+      <LocalizationProvider bundles={fluentBundles || []}>
+        <div className="pane why-paused">
+          <div>
+            <div className="info icon">
+              <AccessibleImage className="info" />
+            </div>
+            <div className="pause reason">
+              <Localized id={reason}></Localized>
+              {this.renderMessage(why)}
+            </div>
+          </div>
+        </div>
+      </LocalizationProvider>
+    );
+  }
+}
+
+WhyPaused.contextTypes = { fluentBundles: PropTypes.array };
+
+const mapStateToProps = state => ({
+  endPanelCollapsed: getPaneCollapse(state, "end"),
+  why: getWhy(state, getCurrentThread(state)),
+});
+
+export default connect(mapStateToProps, {
+  openElementInInspector: actions.openElementInInspectorCommand,
+  highlightDomElement: actions.highlightDomElement,
+  unHighlightDomElement: actions.unHighlightDomElement,
+})(WhyPaused);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.css
new file mode 100644
index 0000000000..5f0352a93c
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.css
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+.xhr-breakpoints-pane ._content {
+  overflow-x: auto;
+}
+
+.xhr-input-container {
+  display: flex;
+  border: 1px solid transparent;
+}
+
+.xhr-input-container.focused {
+  border: 1px solid var(--theme-highlight-blue);
+}
+
+:root.theme-dark .xhr-input-container.focused {
+  border: 1px solid var(--blue-50);
+}
+
+.xhr-input-container.error {
+  border: 1px solid red;
+}
+
+.xhr-input-form {
+  display: inline-flex;
+  width: 100%;
+  padding-inline-start: 20px;
+  padding-inline-end: 12px;
+  /* Stop select height from increasing as input height increases */
+  align-items: center;
+}
+
+.xhr-checkbox {
+  margin-inline-start: 0;
+  margin-inline-end: 4px;
+}
+
+.xhr-input-url {
+  border: 1px;
+  flex-grow: 1;
+  background-color: var(--theme-sidebar-background);
+  font-size: inherit;
+  height: 24px;
+  color: var(--theme-body-color);
+}
+
+.xhr-input-url::placeholder {
+  color: var(--theme-text-color-alt);
+  opacity: 1;
+}
+
+.xhr-input-url:focus {
+  cursor: text;
+  outline: none;
+}
+
+.expressions-list .xhr-input-container {
+  height: var(--expression-item-height);
+}
+
+.expressions-list .xhr-input-url {
+  /* Prevent vertical bounce when editing an existing XHR Breakpoint */
+  height: 100%;
+}
+
+.xhr-container {
+  border-left: 4px solid transparent;
+  width: 100%;
+  color: var(--theme-body-color);
+  padding-inline-start: 16px;
+  padding-inline-end: 12px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--expression-item-height);
+}
+
+:root.theme-light .xhr-container:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+:root.theme-dark .xhr-container:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.xhr-label-method {
+  line-height: 14px;
+  display: inline-block;
+  margin-inline-end: 2px;
+}
+
+.xhr-input-method {
+  display: none;
+  /* Vertically center select in form */
+  margin-top: 2px;
+}
+
+.expressions-list .xhr-input-method {
+  margin-top: 0px;
+}
+
+.xhr-input-container.focused .xhr-input-method {
+  display: block;
+}
+
+.xhr-label-url {
+  max-width: calc(100% - var(--breakpoint-expression-right-clear-space));
+  color: var(--theme-comment);
+  display: inline-block;
+  cursor: text;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0px 2px 0px 2px;
+  line-height: 14px;
+}
+
+.xhr-container label {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  overflow-x: hidden;
+}
+
+.xhr-container__close-btn {
+  display: flex;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js
new file mode 100644
index 0000000000..721b132a3b
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js
@@ -0,0 +1,361 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "../../utils/connect";
+import actions from "../../actions";
+
+import { CloseButton } from "../shared/Button";
+
+import "./XHRBreakpoints.css";
+import { getXHRBreakpoints, shouldPauseOnAnyXHR } from "../../selectors";
+import ExceptionOption from "./Breakpoints/ExceptionOption";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+// At present, the "Pause on any URL" checkbox creates an xhrBreakpoint
+// of "ANY" with no path, so we can remove that before creating the list
+function getExplicitXHRBreakpoints(xhrBreakpoints) {
+  return xhrBreakpoints.filter(bp => bp.path !== "");
+}
+
+const xhrMethods = [
+  "ANY",
+  "GET",
+  "POST",
+  "PUT",
+  "HEAD",
+  "DELETE",
+  "PATCH",
+  "OPTIONS",
+];
+
+class XHRBreakpoints extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editing: false,
+      inputValue: "",
+      inputMethod: "ANY",
+      focused: false,
+      editIndex: -1,
+      clickedOnFormElement: false,
+    };
+  }
+
+  static get propTypes() {
+    return {
+      disableXHRBreakpoint: PropTypes.func.isRequired,
+      enableXHRBreakpoint: PropTypes.func.isRequired,
+      onXHRAdded: PropTypes.func.isRequired,
+      removeXHRBreakpoint: PropTypes.func.isRequired,
+      setXHRBreakpoint: PropTypes.func.isRequired,
+      shouldPauseOnAny: PropTypes.bool.isRequired,
+      showInput: PropTypes.bool.isRequired,
+      togglePauseOnAny: PropTypes.func.isRequired,
+      updateXHRBreakpoint: PropTypes.func.isRequired,
+      xhrBreakpoints: PropTypes.array.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { showInput } = this.props;
+
+    // Ensures that the input is focused when the "+"
+    // is clicked while the panel is collapsed
+    if (this._input && showInput) {
+      this._input.focus();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const input = this._input;
+
+    if (!input) {
+      return;
+    }
+
+    if (!prevState.editing && this.state.editing) {
+      input.setSelectionRange(0, input.value.length);
+      input.focus();
+    } else if (this.props.showInput && !this.state.focused) {
+      input.focus();
+    }
+  }
+
+  handleNewSubmit = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const setXHRBreakpoint = function () {
+      this.props.setXHRBreakpoint(
+        this.state.inputValue,
+        this.state.inputMethod
+      );
+      this.hideInput();
+    };
+
+    // force update inputMethod in state for mochitest purposes
+    // before setting XHR breakpoint
+    this.setState(
+      { inputMethod: e.target.children[1].value },
+      setXHRBreakpoint
+    );
+  };
+
+  handleExistingSubmit = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const { editIndex, inputValue, inputMethod } = this.state;
+    const { xhrBreakpoints } = this.props;
+    const { path, method } = xhrBreakpoints[editIndex];
+
+    if (path !== inputValue || method != inputMethod) {
+      this.props.updateXHRBreakpoint(editIndex, inputValue, inputMethod);
+    }
+
+    this.hideInput();
+  };
+
+  handleChange = e => {
+    this.setState({ inputValue: e.target.value });
+  };
+
+  handleMethodChange = e => {
+    this.setState({
+      focused: true,
+      editing: true,
+      inputMethod: e.target.value,
+    });
+  };
+
+  hideInput = () => {
+    if (this.state.clickedOnFormElement) {
+      this.setState({
+        focused: true,
+        clickedOnFormElement: false,
+      });
+    } else {
+      this.setState({
+        focused: false,
+        editing: false,
+        editIndex: -1,
+        inputValue: "",
+        inputMethod: "ANY",
+      });
+      this.props.onXHRAdded();
+    }
+  };
+
+  onFocus = () => {
+    this.setState({ focused: true, editing: true });
+  };
+
+  onMouseDown = e => {
+    this.setState({ editing: false, clickedOnFormElement: true });
+  };
+
+  handleTab = e => {
+    if (e.key !== "Tab") {
+      return;
+    }
+
+    if (e.currentTarget.nodeName === "INPUT") {
+      this.setState({
+        clickedOnFormElement: true,
+        editing: false,
+      });
+    } else if (e.currentTarget.nodeName === "SELECT" && !e.shiftKey) {
+      // The user has tabbed off the select and we should
+      // cancel the edit
+      this.hideInput();
+    }
+  };
+
+  editExpression = index => {
+    const { xhrBreakpoints } = this.props;
+    const { path, method } = xhrBreakpoints[index];
+    this.setState({
+      inputValue: path,
+      inputMethod: method,
+      editing: true,
+      editIndex: index,
+    });
+  };
+
+  renderXHRInput(onSubmit) {
+    const { focused, inputValue } = this.state;
+    const placeholder = L10N.getStr("xhrBreakpoints.placeholder");
+
+    return (
+      <form
+        key="xhr-input-container"
+        className={classnames("xhr-input-container xhr-input-form", {
+          focused,
+        })}
+        onSubmit={onSubmit}
+      >
+        <input
+          className="xhr-input-url"
+          type="text"
+          placeholder={placeholder}
+          onChange={this.handleChange}
+          onBlur={this.hideInput}
+          onFocus={this.onFocus}
+          value={inputValue}
+          onKeyDown={this.handleTab}
+          ref={c => (this._input = c)}
+        />
+        {this.renderMethodSelectElement()}
+        <input type="submit" style={{ display: "none" }} />
+      </form>
+    );
+  }
+
+  handleCheckbox = index => {
+    const { xhrBreakpoints, enableXHRBreakpoint, disableXHRBreakpoint } =
+      this.props;
+    const breakpoint = xhrBreakpoints[index];
+    if (breakpoint.disabled) {
+      enableXHRBreakpoint(index);
+    } else {
+      disableXHRBreakpoint(index);
+    }
+  };
+
+  renderBreakpoint = breakpoint => {
+    const { path, disabled, method } = breakpoint;
+    const { editIndex } = this.state;
+    const { removeXHRBreakpoint, xhrBreakpoints } = this.props;
+
+    // The "pause on any" checkbox
+    if (!path) {
+      return null;
+    }
+
+    // Finds the xhrbreakpoint so as to not make assumptions about position
+    const index = xhrBreakpoints.findIndex(
+      bp => bp.path === path && bp.method === method
+    );
+
+    if (index === editIndex) {
+      return this.renderXHRInput(this.handleExistingSubmit);
+    }
+
+    return (
+      <li
+        className="xhr-container"
+        key={`${path}-${method}`}
+        title={path}
+        onDoubleClick={(items, options) => this.editExpression(index)}
+      >
+        <label>
+          <input
+            type="checkbox"
+            className="xhr-checkbox"
+            checked={!disabled}
+            onChange={() => this.handleCheckbox(index)}
+            onClick={ev => ev.stopPropagation()}
+          />
+          <div className="xhr-label-method">{method}</div>
+          <div className="xhr-label-url">{path}</div>
+          <div className="xhr-container__close-btn">
+            <CloseButton handleClick={e => removeXHRBreakpoint(index)} />
+          </div>
+        </label>
+      </li>
+    );
+  };
+
+  renderBreakpoints = explicitXhrBreakpoints => {
+    const { showInput } = this.props;
+
+    return (
+      <>
+        <ul className="pane expressions-list">
+          {explicitXhrBreakpoints.map(this.renderBreakpoint)}
+        </ul>
+        {showInput && this.renderXHRInput(this.handleNewSubmit)}
+      </>
+    );
+  };
+
+  renderCheckbox = explicitXhrBreakpoints => {
+    const { shouldPauseOnAny, togglePauseOnAny } = this.props;
+
+    return (
+      <div
+        className={classnames("breakpoints-exceptions-options", {
+          empty: explicitXhrBreakpoints.length === 0,
+        })}
+      >
+        <ExceptionOption
+          className="breakpoints-exceptions"
+          label={L10N.getStr("pauseOnAnyXHR")}
+          isChecked={shouldPauseOnAny}
+          onChange={() => togglePauseOnAny()}
+        />
+      </div>
+    );
+  };
+
+  renderMethodOption = method => {
+    return (
+      <option
+        key={method}
+        value={method}
+        // e.stopPropagation() required here since otherwise Firefox triggers 2x
+        // onMouseDown events on <select> upon clicking on an <option>
+        onMouseDown={e => e.stopPropagation()}
+      >
+        {method}
+      </option>
+    );
+  };
+
+  renderMethodSelectElement = () => {
+    return (
+      <select
+        value={this.state.inputMethod}
+        className="xhr-input-method"
+        onChange={this.handleMethodChange}
+        onMouseDown={this.onMouseDown}
+        onKeyDown={this.handleTab}
+      >
+        {xhrMethods.map(this.renderMethodOption)}
+      </select>
+    );
+  };
+
+  render() {
+    const { xhrBreakpoints } = this.props;
+    const explicitXhrBreakpoints = getExplicitXHRBreakpoints(xhrBreakpoints);
+
+    return (
+      <>
+        {this.renderCheckbox(explicitXhrBreakpoints)}
+        {explicitXhrBreakpoints.length === 0
+          ? this.renderXHRInput(this.handleNewSubmit)
+          : this.renderBreakpoints(explicitXhrBreakpoints)}
+      </>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  xhrBreakpoints: getXHRBreakpoints(state),
+  shouldPauseOnAny: shouldPauseOnAnyXHR(state),
+});
+
+export default connect(mapStateToProps, {
+  setXHRBreakpoint: actions.setXHRBreakpoint,
+  removeXHRBreakpoint: actions.removeXHRBreakpoint,
+  enableXHRBreakpoint: actions.enableXHRBreakpoint,
+  disableXHRBreakpoint: actions.disableXHRBreakpoint,
+  updateXHRBreakpoint: actions.updateXHRBreakpoint,
+  togglePauseOnAny: actions.togglePauseOnAny,
+})(XHRBreakpoints);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/index.js b/devtools/client/debugger/src/components/SecondaryPanes/index.js
new file mode 100644
index 0000000000..9b1e2dca60
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/index.js
@@ -0,0 +1,537 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/>. */
+
+const SplitBox = require("devtools/client/shared/components/splitter/SplitBox");
+
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { isGeneratedId } from "devtools/client/shared/source-map-loader/index";
+import { connect } from "../../utils/connect";
+
+import actions from "../../actions";
+import {
+  getTopFrame,
+  getExpressions,
+  getPauseCommand,
+  isMapScopesEnabled,
+  getSelectedFrame,
+  getShouldPauseOnExceptions,
+  getShouldPauseOnCaughtExceptions,
+  getThreads,
+  getCurrentThread,
+  getThreadContext,
+  getPauseReason,
+  getShouldBreakpointsPaneOpenOnPause,
+  getSkipPausing,
+  shouldLogEventBreakpoints,
+} from "../../selectors";
+
+import AccessibleImage from "../shared/AccessibleImage";
+import { prefs } from "../../utils/prefs";
+
+import Breakpoints from "./Breakpoints";
+import Expressions from "./Expressions";
+import Frames from "./Frames";
+import Threads from "./Threads";
+import Accordion from "../shared/Accordion";
+import CommandBar from "./CommandBar";
+import XHRBreakpoints from "./XHRBreakpoints";
+import EventListeners from "./EventListeners";
+import DOMMutationBreakpoints from "./DOMMutationBreakpoints";
+import WhyPaused from "./WhyPaused";
+
+import Scopes from "./Scopes";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+import "./SecondaryPanes.css";
+
+function debugBtn(onClick, type, className, tooltip) {
+  return (
+    <button
+      onClick={onClick}
+      className={`${type} ${className}`}
+      key={type}
+      title={tooltip}
+    >
+      <AccessibleImage className={type} title={tooltip} aria-label={tooltip} />
+    </button>
+  );
+}
+
+const mdnLink =
+  "https://firefox-source-docs.mozilla.org/devtools-user/debugger/using_the_debugger_map_scopes_feature/";
+
+class SecondaryPanes extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showExpressionsInput: false,
+      showXHRInput: false,
+    };
+  }
+
+  static get propTypes() {
+    return {
+      cx: PropTypes.object.isRequired,
+      evaluateExpressions: PropTypes.func.isRequired,
+      expressions: PropTypes.array.isRequired,
+      hasFrames: PropTypes.bool.isRequired,
+      horizontal: PropTypes.bool.isRequired,
+      logEventBreakpoints: PropTypes.bool.isRequired,
+      mapScopesEnabled: PropTypes.bool.isRequired,
+      pauseOnExceptions: PropTypes.func.isRequired,
+      pauseReason: PropTypes.string.isRequired,
+      shouldBreakpointsPaneOpenOnPause: PropTypes.bool.isRequired,
+      thread: PropTypes.string.isRequired,
+      renderWhyPauseDelay: PropTypes.number.isRequired,
+      selectedFrame: PropTypes.object,
+      shouldPauseOnCaughtExceptions: PropTypes.bool.isRequired,
+      shouldPauseOnExceptions: PropTypes.bool.isRequired,
+      skipPausing: PropTypes.bool.isRequired,
+      source: PropTypes.object,
+      toggleEventLogging: PropTypes.func.isRequired,
+      resetBreakpointsPaneState: PropTypes.func.isRequired,
+      toggleMapScopes: PropTypes.func.isRequired,
+      threads: PropTypes.array.isRequired,
+      removeAllBreakpoints: PropTypes.func.isRequired,
+      removeAllXHRBreakpoints: PropTypes.func.isRequired,
+    };
+  }
+
+  onExpressionAdded = () => {
+    this.setState({ showExpressionsInput: false });
+  };
+
+  onXHRAdded = () => {
+    this.setState({ showXHRInput: false });
+  };
+
+  watchExpressionHeaderButtons() {
+    const { expressions } = this.props;
+    const buttons = [];
+
+    if (expressions.length) {
+      buttons.push(
+        debugBtn(
+          evt => {
+            evt.stopPropagation();
+            this.props.evaluateExpressions(this.props.cx);
+          },
+          "refresh",
+          "active",
+          L10N.getStr("watchExpressions.refreshButton")
+        )
+      );
+    }
+    buttons.push(
+      debugBtn(
+        evt => {
+          if (prefs.expressionsVisible) {
+            evt.stopPropagation();
+          }
+          this.setState({ showExpressionsInput: true });
+        },
+        "plus",
+        "active",
+        L10N.getStr("expressions.placeholder")
+      )
+    );
+    return buttons;
+  }
+
+  xhrBreakpointsHeaderButtons() {
+    return [
+      debugBtn(
+        evt => {
+          if (prefs.xhrBreakpointsVisible) {
+            evt.stopPropagation();
+          }
+          this.setState({ showXHRInput: true });
+        },
+        "plus",
+        "active",
+        L10N.getStr("xhrBreakpoints.label")
+      ),
+
+      debugBtn(
+        evt => {
+          evt.stopPropagation();
+          this.props.removeAllXHRBreakpoints();
+        },
+        "removeAll",
+        "active",
+        L10N.getStr("xhrBreakpoints.removeAll.tooltip")
+      ),
+    ];
+  }
+
+  breakpointsHeaderButtons() {
+    return [
+      debugBtn(
+        evt => {
+          evt.stopPropagation();
+          this.props.removeAllBreakpoints(this.props.cx);
+        },
+        "removeAll",
+        "active",
+        L10N.getStr("breakpointMenuItem.deleteAll")
+      ),
+    ];
+  }
+
+  getScopeItem() {
+    return {
+      header: L10N.getStr("scopes.header"),
+      className: "scopes-pane",
+      component: <Scopes />,
+      opened: prefs.scopesVisible,
+      buttons: this.getScopesButtons(),
+      onToggle: opened => {
+        prefs.scopesVisible = opened;
+      },
+    };
+  }
+
+  getScopesButtons() {
+    const { selectedFrame, mapScopesEnabled, source } = this.props;
+
+    if (
+      !selectedFrame ||
+      isGeneratedId(selectedFrame.location.sourceId) ||
+      source?.isPrettyPrinted
+    ) {
+      return null;
+    }
+
+    return [
+      <div key="scopes-buttons">
+        <label
+          className="map-scopes-header"
+          title={L10N.getStr("scopes.mapping.label")}
+          onClick={e => e.stopPropagation()}
+        >
+          <input
+            type="checkbox"
+            checked={mapScopesEnabled ? "checked" : ""}
+            onChange={e => this.props.toggleMapScopes()}
+          />
+          {L10N.getStr("scopes.map.label")}
+        </label>
+        <a
+          className="mdn"
+          target="_blank"
+          href={mdnLink}
+          onClick={e => e.stopPropagation()}
+          title={L10N.getStr("scopes.helpTooltip.label")}
+        >
+          <AccessibleImage className="shortcuts" />
+        </a>
+      </div>,
+    ];
+  }
+
+  getEventButtons() {
+    const { logEventBreakpoints } = this.props;
+    return [
+      <div key="events-buttons">
+        <label
+          className="events-header"
+          title={L10N.getStr("eventlisteners.log.label")}
+          onClick={e => e.stopPropagation()}
+        >
+          <input
+            type="checkbox"
+            checked={logEventBreakpoints ? "checked" : ""}
+            onChange={e => this.props.toggleEventLogging()}
+            onKeyDown={e => e.stopPropagation()}
+          />
+          {L10N.getStr("eventlisteners.log")}
+        </label>
+      </div>,
+    ];
+  }
+
+  getWatchItem() {
+    return {
+      header: L10N.getStr("watchExpressions.header"),
+      className: "watch-expressions-pane",
+      buttons: this.watchExpressionHeaderButtons(),
+      component: (
+        <Expressions
+          showInput={this.state.showExpressionsInput}
+          onExpressionAdded={this.onExpressionAdded}
+        />
+      ),
+      opened: prefs.expressionsVisible,
+      onToggle: opened => {
+        prefs.expressionsVisible = opened;
+      },
+    };
+  }
+
+  getXHRItem() {
+    const { pauseReason } = this.props;
+
+    return {
+      header: L10N.getStr("xhrBreakpoints.header"),
+      className: "xhr-breakpoints-pane",
+      buttons: this.xhrBreakpointsHeaderButtons(),
+      component: (
+        <XHRBreakpoints
+          showInput={this.state.showXHRInput}
+          onXHRAdded={this.onXHRAdded}
+        />
+      ),
+      opened: prefs.xhrBreakpointsVisible || pauseReason === "XHR",
+      onToggle: opened => {
+        prefs.xhrBreakpointsVisible = opened;
+      },
+    };
+  }
+
+  getCallStackItem() {
+    return {
+      header: L10N.getStr("callStack.header"),
+      className: "call-stack-pane",
+      component: <Frames panel="debugger" />,
+      opened: prefs.callStackVisible,
+      onToggle: opened => {
+        prefs.callStackVisible = opened;
+      },
+    };
+  }
+
+  getThreadsItem() {
+    return {
+      header: L10N.getStr("threadsHeader"),
+      className: "threads-pane",
+      component: <Threads />,
+      opened: prefs.threadsVisible,
+      onToggle: opened => {
+        prefs.threadsVisible = opened;
+      },
+    };
+  }
+
+  getBreakpointsItem() {
+    const {
+      shouldPauseOnExceptions,
+      shouldPauseOnCaughtExceptions,
+      pauseOnExceptions,
+      pauseReason,
+      shouldBreakpointsPaneOpenOnPause,
+      thread,
+    } = this.props;
+
+    return {
+      header: L10N.getStr("breakpoints.header"),
+      className: "breakpoints-pane",
+      buttons: this.breakpointsHeaderButtons(),
+      component: (
+        <Breakpoints
+          shouldPauseOnExceptions={shouldPauseOnExceptions}
+          shouldPauseOnCaughtExceptions={shouldPauseOnCaughtExceptions}
+          pauseOnExceptions={pauseOnExceptions}
+        />
+      ),
+      opened:
+        prefs.breakpointsVisible ||
+        (pauseReason === "breakpoint" && shouldBreakpointsPaneOpenOnPause),
+      onToggle: opened => {
+        prefs.breakpointsVisible = opened;
+        //  one-shot flag used to force open the Breakpoints Pane only
+        //  when hitting a breakpoint, but not when selecting frames etc...
+        if (shouldBreakpointsPaneOpenOnPause) {
+          this.props.resetBreakpointsPaneState(thread);
+        }
+      },
+    };
+  }
+
+  getEventListenersItem() {
+    const { pauseReason } = this.props;
+
+    return {
+      header: L10N.getStr("eventListenersHeader1"),
+      className: "event-listeners-pane",
+      buttons: this.getEventButtons(),
+      component: <EventListeners />,
+      opened: prefs.eventListenersVisible || pauseReason === "eventBreakpoint",
+      onToggle: opened => {
+        prefs.eventListenersVisible = opened;
+      },
+    };
+  }
+
+  getDOMMutationsItem() {
+    const { pauseReason } = this.props;
+
+    return {
+      header: L10N.getStr("domMutationHeader"),
+      className: "dom-mutations-pane",
+      buttons: [],
+      component: <DOMMutationBreakpoints />,
+      opened:
+        prefs.domMutationBreakpointsVisible ||
+        pauseReason === "mutationBreakpoint",
+      onToggle: opened => {
+        prefs.domMutationBreakpointsVisible = opened;
+      },
+    };
+  }
+
+  getStartItems() {
+    const items = [];
+    const { horizontal, hasFrames } = this.props;
+
+    if (horizontal) {
+      if (this.props.threads.length) {
+        items.push(this.getThreadsItem());
+      }
+
+      items.push(this.getWatchItem());
+    }
+
+    items.push(this.getBreakpointsItem());
+
+    if (hasFrames) {
+      items.push(this.getCallStackItem());
+      if (horizontal) {
+        items.push(this.getScopeItem());
+      }
+    }
+
+    items.push(this.getXHRItem());
+
+    items.push(this.getEventListenersItem());
+
+    items.push(this.getDOMMutationsItem());
+
+    return items;
+  }
+
+  getEndItems() {
+    if (this.props.horizontal) {
+      return [];
+    }
+
+    const items = [];
+    if (this.props.threads.length) {
+      items.push(this.getThreadsItem());
+    }
+
+    items.push(this.getWatchItem());
+
+    if (this.props.hasFrames) {
+      items.push(this.getScopeItem());
+    }
+
+    return items;
+  }
+
+  getItems() {
+    return [...this.getStartItems(), ...this.getEndItems()];
+  }
+
+  renderHorizontalLayout() {
+    const { renderWhyPauseDelay } = this.props;
+
+    return (
+      <div>
+        <WhyPaused delay={renderWhyPauseDelay} />
+        <Accordion items={this.getItems()} />
+      </div>
+    );
+  }
+
+  renderVerticalLayout() {
+    return (
+      <SplitBox
+        initialSize="300px"
+        minSize={10}
+        maxSize="50%"
+        splitterSize={1}
+        startPanel={
+          <div style={{ width: "inherit" }}>
+            <WhyPaused delay={this.props.renderWhyPauseDelay} />
+            <Accordion items={this.getStartItems()} />
+          </div>
+        }
+        endPanel={<Accordion items={this.getEndItems()} />}
+      />
+    );
+  }
+
+  render() {
+    const { skipPausing } = this.props;
+    return (
+      <div className="secondary-panes-wrapper">
+        <CommandBar horizontal={this.props.horizontal} />
+        <div
+          className={classnames(
+            "secondary-panes",
+            skipPausing && "skip-pausing"
+          )}
+        >
+          {this.props.horizontal
+            ? this.renderHorizontalLayout()
+            : this.renderVerticalLayout()}
+        </div>
+      </div>
+    );
+  }
+}
+
+// Checks if user is in debugging mode and adds a delay preventing
+// excessive vertical 'jumpiness'
+function getRenderWhyPauseDelay(state, thread) {
+  const inPauseCommand = !!getPauseCommand(state, thread);
+
+  if (!inPauseCommand) {
+    return 100;
+  }
+
+  return 0;
+}
+
+const mapStateToProps = state => {
+  const thread = getCurrentThread(state);
+  const selectedFrame = getSelectedFrame(state, thread);
+  const pauseReason = getPauseReason(state, thread);
+  const shouldBreakpointsPaneOpenOnPause = getShouldBreakpointsPaneOpenOnPause(
+    state,
+    thread
+  );
+
+  return {
+    cx: getThreadContext(state),
+    expressions: getExpressions(state),
+    hasFrames: !!getTopFrame(state, thread),
+    renderWhyPauseDelay: getRenderWhyPauseDelay(state, thread),
+    selectedFrame,
+    mapScopesEnabled: isMapScopesEnabled(state),
+    shouldPauseOnExceptions: getShouldPauseOnExceptions(state),
+    shouldPauseOnCaughtExceptions: getShouldPauseOnCaughtExceptions(state),
+    threads: getThreads(state),
+    skipPausing: getSkipPausing(state),
+    logEventBreakpoints: shouldLogEventBreakpoints(state),
+    source: selectedFrame && selectedFrame.location.source,
+    pauseReason: pauseReason?.type ?? "",
+    shouldBreakpointsPaneOpenOnPause,
+    thread,
+  };
+};
+
+export default connect(mapStateToProps, {
+  evaluateExpressions: actions.evaluateExpressions,
+  pauseOnExceptions: actions.pauseOnExceptions,
+  toggleMapScopes: actions.toggleMapScopes,
+  breakOnNext: actions.breakOnNext,
+  toggleEventLogging: actions.toggleEventLogging,
+  removeAllBreakpoints: actions.removeAllBreakpoints,
+  removeAllXHRBreakpoints: actions.removeAllXHRBreakpoints,
+  resetBreakpointsPaneState: actions.resetBreakpointsPaneState,
+})(SecondaryPanes);
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/moz.build b/devtools/client/debugger/src/components/SecondaryPanes/moz.build
new file mode 100644
index 0000000000..33cfa2e316
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/moz.build
@@ -0,0 +1,22 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# 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/.
+
+DIRS += [
+    "Breakpoints",
+    "Frames",
+]
+
+CompiledModules(
+    "CommandBar.js",
+    "DOMMutationBreakpoints.js",
+    "EventListeners.js",
+    "Expressions.js",
+    "index.js",
+    "Scopes.js",
+    "Thread.js",
+    "Threads.js",
+    "WhyPaused.js",
+    "XHRBreakpoints.js",
+)
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js
new file mode 100644
index 0000000000..69dd75a187
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+import CommandBar from "../CommandBar";
+import { mockthreadcx } from "../../../utils/test-mockup";
+
+describe("CommandBar", () => {
+  it("f8 key command calls props.breakOnNext when not in paused state", () => {
+    const props = {
+      cx: mockthreadcx,
+      breakOnNext: jest.fn(),
+      resume: jest.fn(),
+      isPaused: false,
+    };
+    const mockEvent = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+
+    // The "on" spy will see all the keyboard listeners being registered by
+    // the shortcuts.on function
+    const context = { shortcuts: { on: jest.fn() } };
+
+    shallow(<CommandBar.WrappedComponent {...props} />, { context });
+
+    // get the keyboard event listeners recorded from the "on" spy.
+    // this will be an array where each item is itself a two item array
+    // containing the key code and the corresponding handler for that key code
+    const keyEventHandlers = context.shortcuts.on.mock.calls;
+
+    // simulate pressing the F8 key by calling the F8 handlers
+    keyEventHandlers
+      .filter(i => i[0] === "F8")
+      .forEach(([_, handler]) => {
+        handler(mockEvent);
+      });
+
+    expect(props.breakOnNext).toHaveBeenCalled();
+    expect(props.resume).not.toHaveBeenCalled();
+  });
+
+  it("f8 key command calls props.resume when in paused state", () => {
+    const props = {
+      cx: { ...mockthreadcx, isPaused: true },
+      breakOnNext: jest.fn(),
+      resume: jest.fn(),
+      isPaused: true,
+    };
+    const mockEvent = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+
+    // The "on" spy will see all the keyboard listeners being registered by
+    // the shortcuts.on function
+    const context = { shortcuts: { on: jest.fn() } };
+
+    shallow(<CommandBar.WrappedComponent {...props} />, { context });
+
+    // get the keyboard event listeners recorded from the "on" spy.
+    // this will be an array where each item is itself a two item array
+    // containing the key code and the corresponding handler for that key code
+    const keyEventHandlers = context.shortcuts.on.mock.calls;
+
+    // simulate pressing the F8 key by calling the F8 handlers
+    keyEventHandlers
+      .filter(i => i[0] === "F8")
+      .forEach(([_, handler]) => {
+        handler(mockEvent);
+      });
+    expect(props.resume).toHaveBeenCalled();
+    expect(props.breakOnNext).not.toHaveBeenCalled();
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js
new file mode 100644
index 0000000000..f82b2093c9
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js
@@ -0,0 +1,134 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+import EventListeners from "../EventListeners";
+
+function getCategories() {
+  return [
+    {
+      name: "Category 1",
+      events: [
+        { name: "Subcategory 1", id: "category1.subcategory1" },
+        { name: "Subcategory 2", id: "category1.subcategory2" },
+      ],
+    },
+    {
+      name: "Category 2",
+      events: [
+        { name: "Subcategory 3", id: "category2.subcategory1" },
+        { name: "Subcategory 4", id: "category2.subcategory2" },
+      ],
+    },
+  ];
+}
+
+function generateDefaults(overrides = {}) {
+  const defaults = {
+    activeEventListeners: [],
+    expandedCategories: [],
+    categories: [],
+  };
+
+  return { ...defaults, ...overrides };
+}
+
+function render(overrides = {}) {
+  const props = generateDefaults(overrides);
+  const component = shallow(<EventListeners.WrappedComponent {...props} />);
+  return { component, props };
+}
+
+describe("EventListeners", () => {
+  it("should render", async () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should render categories appropriately", async () => {
+    const props = {
+      ...generateDefaults(),
+      categories: getCategories(),
+    };
+    const { component } = render(props);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should render expanded categories appropriately", async () => {
+    const props = {
+      ...generateDefaults(),
+      categories: getCategories(),
+      expandedCategories: ["Category 2"],
+    };
+    const { component } = render(props);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should render checked subcategories appropriately", async () => {
+    const props = {
+      ...generateDefaults(),
+      categories: getCategories(),
+      activeEventListeners: ["category1.subcategory2"],
+      expandedCategories: ["Category 1"],
+    };
+    const { component } = render(props);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should filter the event listeners based on the event name", async () => {
+    const props = {
+      ...generateDefaults(),
+      categories: getCategories(),
+    };
+    const { component } = render(props);
+    component.find(".event-search-input").simulate("focus");
+
+    const searchInput = component.find(".event-search-input");
+    // Simulate a search query of "Subcategory 3" to display just one event which
+    // will be the Subcategory 3 event
+    searchInput.simulate("change", {
+      currentTarget: { value: "Subcategory 3" },
+    });
+
+    const displayedEvents = component.find(".event-listener-event");
+    expect(displayedEvents).toHaveLength(1);
+  });
+
+  it("should filter the event listeners based on the category name", async () => {
+    const props = {
+      ...generateDefaults(),
+      categories: getCategories(),
+    };
+    const { component } = render(props);
+    component.find(".event-search-input").simulate("focus");
+
+    const searchInput = component.find(".event-search-input");
+    // Simulate a search query of "Category 1" to display two events which will be
+    // the Subcategory 1 event and the Subcategory 2 event
+    searchInput.simulate("change", { currentTarget: { value: "Category 1" } });
+
+    const displayedEvents = component.find(".event-listener-event");
+    expect(displayedEvents).toHaveLength(2);
+  });
+
+  it("should be case insensitive when filtering events and categories", async () => {
+    const props = {
+      ...generateDefaults(),
+      categories: getCategories(),
+    };
+    const { component } = render(props);
+    component.find(".event-search-input").simulate("focus");
+
+    const searchInput = component.find(".event-search-input");
+    // Simulate a search query of "Subcategory 3" to display just one event which
+    // will be the Subcategory 3 event
+    searchInput.simulate("change", {
+      currentTarget: { value: "sUbCaTeGoRy 3" },
+    });
+
+    const displayedEvents = component.find(".event-listener-event");
+    expect(displayedEvents).toHaveLength(1);
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js
new file mode 100644
index 0000000000..ad14190276
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { shallow } from "enzyme";
+import Expressions from "../Expressions";
+
+function generateDefaults(overrides) {
+  return {
+    evaluateExpressions: async () => {},
+    expressions: [
+      {
+        input: "expression1",
+        value: {
+          result: {
+            value: "foo",
+            class: "",
+          },
+        },
+      },
+      {
+        input: "expression2",
+        value: {
+          result: {
+            value: "bar",
+            class: "",
+          },
+        },
+      },
+    ],
+    ...overrides,
+  };
+}
+
+function render(overrides = {}) {
+  const props = generateDefaults(overrides);
+  const component = shallow(<Expressions.WrappedComponent {...props} />);
+  return { component, props };
+}
+
+describe("Expressions", () => {
+  it("should render", async () => {
+    const { component } = render();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should always have unique keys", async () => {
+    const overrides = {
+      expressions: [
+        {
+          input: "expression1",
+          value: {
+            result: {
+              value: undefined,
+              class: "",
+            },
+          },
+        },
+        {
+          input: "expression2",
+          value: {
+            result: {
+              value: undefined,
+              class: "",
+            },
+          },
+        },
+      ],
+    };
+
+    const { component } = render(overrides);
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js
new file mode 100644
index 0000000000..e269e89ac5
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js
@@ -0,0 +1,345 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from "react";
+import { mount } from "enzyme";
+import XHRBreakpoints from "../XHRBreakpoints";
+
+const xhrMethods = [
+  "ANY",
+  "GET",
+  "POST",
+  "PUT",
+  "HEAD",
+  "DELETE",
+  "PATCH",
+  "OPTIONS",
+];
+
+// default state includes xhrBreakpoints[0] which is the checkbox that
+// enables breaking on any url during an XMLHTTPRequest
+function generateDefaultState(propsOverride) {
+  return {
+    xhrBreakpoints: [
+      {
+        path: "",
+        method: "ANY",
+        disabled: false,
+        loading: false,
+        text: 'URL contains ""',
+      },
+    ],
+    enableXHRBreakpoint: () => {},
+    disableXHRBreakpoint: () => {},
+    updateXHRBreakpoint: () => {},
+    removeXHRBreakpoint: () => {},
+    setXHRBreakpoint: () => {},
+    togglePauseOnAny: () => {},
+    showInput: false,
+    shouldPauseOnAny: false,
+    onXHRAdded: () => {},
+    ...propsOverride,
+  };
+}
+
+function renderXHRBreakpointsComponent(propsOverride) {
+  const props = generateDefaultState(propsOverride);
+  const xhrBreakpointsComponent = mount(
+    <XHRBreakpoints.WrappedComponent {...props} />
+  );
+  return xhrBreakpointsComponent;
+}
+
+describe("XHR Breakpoints", function () {
+  it("should render with 0 expressions passed from props", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+    expect(xhrBreakpointsComponent).toMatchSnapshot();
+  });
+
+  it("should render with 8 expressions passed from props", function () {
+    const allXHRBreakpointMethods = {
+      xhrBreakpoints: [
+        {
+          path: "",
+          method: "ANY",
+          disabled: false,
+          loading: false,
+          text: 'URL contains ""',
+        },
+        {
+          path: "this is any",
+          method: "ANY",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is any"',
+        },
+        {
+          path: "this is get",
+          method: "GET",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is get"',
+        },
+        {
+          path: "this is post",
+          method: "POST",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is post"',
+        },
+        {
+          path: "this is put",
+          method: "PUT",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is put"',
+        },
+        {
+          path: "this is head",
+          method: "HEAD",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is head"',
+        },
+        {
+          path: "this is delete",
+          method: "DELETE",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is delete"',
+        },
+        {
+          path: "this is patch",
+          method: "PATCH",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is patch"',
+        },
+        {
+          path: "this is options",
+          method: "OPTIONS",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is options"',
+        },
+      ],
+    };
+
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent(
+      allXHRBreakpointMethods
+    );
+    expect(xhrBreakpointsComponent).toMatchSnapshot();
+  });
+
+  it("should display xhr-input-method on click", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+
+    const xhrInputContainer = xhrBreakpointsComponent.find(
+      ".xhr-input-container"
+    );
+    expect(xhrInputContainer.hasClass("focused")).toBeTruthy();
+  });
+
+  it("should have focused and editing default to false", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+    expect(xhrBreakpointsComponent.state("focused")).toBe(false);
+    expect(xhrBreakpointsComponent.state("editing")).toBe(false);
+  });
+
+  it("should have state {..focused: true, editing: true} on focus", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+    expect(xhrBreakpointsComponent.state("focused")).toBe(true);
+    expect(xhrBreakpointsComponent.state("editing")).toBe(true);
+  });
+
+  // shifting focus from .xhr-input to any other element apart from
+  // .xhr-input-method should unrender .xhr-input-method
+  it("shifting focus should unrender XHR methods", function () {
+    const propsOverride = {
+      onXHRAdded: jest.fn,
+      togglePauseOnAny: jest.fn,
+    };
+    const xhrBreakpointsComponent =
+      renderXHRBreakpointsComponent(propsOverride);
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+    let xhrInputContainer = xhrBreakpointsComponent.find(
+      ".xhr-input-container"
+    );
+    expect(xhrInputContainer.hasClass("focused")).toBeTruthy();
+
+    xhrBreakpointsComponent
+      .find(".breakpoints-exceptions-options")
+      .simulate("mousedown");
+    expect(xhrBreakpointsComponent.state("focused")).toBe(true);
+    expect(xhrBreakpointsComponent.state("editing")).toBe(true);
+    expect(xhrBreakpointsComponent.state("clickedOnFormElement")).toBe(false);
+
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("blur");
+    expect(xhrBreakpointsComponent.state("focused")).toBe(false);
+    expect(xhrBreakpointsComponent.state("editing")).toBe(false);
+    expect(xhrBreakpointsComponent.state("clickedOnFormElement")).toBe(false);
+
+    xhrBreakpointsComponent
+      .find(".breakpoints-exceptions-options")
+      .simulate("click");
+
+    xhrInputContainer = xhrBreakpointsComponent.find(".xhr-input-container");
+    expect(xhrInputContainer.hasClass("focused")).not.toBeTruthy();
+  });
+
+  // shifting focus from .xhr-input to .xhr-input-method
+  // should not unrender .xhr-input-method
+  it("shifting focus to XHR methods should not unrender", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+
+    xhrBreakpointsComponent.find(".xhr-input-method").simulate("mousedown");
+    expect(xhrBreakpointsComponent.state("focused")).toBe(true);
+    expect(xhrBreakpointsComponent.state("editing")).toBe(false);
+    expect(xhrBreakpointsComponent.state("clickedOnFormElement")).toBe(true);
+
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("blur");
+    expect(xhrBreakpointsComponent.state("focused")).toBe(true);
+    expect(xhrBreakpointsComponent.state("editing")).toBe(false);
+    expect(xhrBreakpointsComponent.state("clickedOnFormElement")).toBe(false);
+
+    xhrBreakpointsComponent.find(".xhr-input-method").simulate("click");
+    const xhrInputContainer = xhrBreakpointsComponent.find(
+      ".xhr-input-container"
+    );
+    expect(xhrInputContainer.hasClass("focused")).toBeTruthy();
+  });
+
+  it("should have all 8 methods available as options", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+
+    const xhrInputMethod = xhrBreakpointsComponent.find(".xhr-input-method");
+    expect(xhrInputMethod.children()).toHaveLength(8);
+
+    const actualXHRMethods = [];
+    const expectedXHRMethods = xhrMethods;
+
+    // fill the actualXHRMethods array with actual methods displayed in DOM
+    for (let i = 0; i < xhrInputMethod.children().length; i++) {
+      actualXHRMethods.push(xhrInputMethod.childAt(i).key());
+    }
+
+    // check each expected XHR Method to see if they match the actual methods
+    expectedXHRMethods.forEach((expectedMethod, i) => {
+      function compareMethods(actualMethod) {
+        return expectedMethod === actualMethod;
+      }
+      expect(actualXHRMethods.find(compareMethods)).toBeTruthy();
+    });
+  });
+
+  it("should return focus to input box after selecting a method", function () {
+    const xhrBreakpointsComponent = renderXHRBreakpointsComponent();
+
+    // focus starts off at .xhr-input
+    xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+
+    // click on method options and select GET
+    const methodEvent = { target: { value: "GET" } };
+    xhrBreakpointsComponent.find(".xhr-input-method").simulate("mousedown");
+    expect(xhrBreakpointsComponent.state("inputMethod")).toBe("ANY");
+    expect(xhrBreakpointsComponent.state("editing")).toBe(false);
+    xhrBreakpointsComponent
+      .find(".xhr-input-method")
+      .simulate("change", methodEvent);
+
+    // if state.editing changes from false to true, infer that
+    // this._input.focus() is called, which shifts focus back to input box
+    expect(xhrBreakpointsComponent.state("inputMethod")).toBe("GET");
+    expect(xhrBreakpointsComponent.state("editing")).toBe(true);
+  });
+
+  it("should submit the URL and method when adding a breakpoint", function () {
+    const setXHRBreakpointCallback = jest.fn();
+    const propsOverride = {
+      setXHRBreakpoint: setXHRBreakpointCallback,
+      onXHRAdded: jest.fn(),
+    };
+    const mockEvent = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    const availableXHRMethods = xhrMethods;
+    expect(!!availableXHRMethods.length).toBeTruthy();
+
+    // check each of the available methods to see whether
+    // adding them as a method to a new breakpoint works as expected
+    availableXHRMethods.forEach(function (method) {
+      const xhrBreakpointsComponent =
+        renderXHRBreakpointsComponent(propsOverride);
+      xhrBreakpointsComponent.find(".xhr-input-url").simulate("focus");
+      const urlValue = `${method.toLowerCase()}URLValue`;
+
+      // simulate DOM event adding urlValue to .xhr-input
+      const xhrInput = xhrBreakpointsComponent.find(".xhr-input-url");
+      xhrInput.simulate("change", { target: { value: urlValue } });
+
+      // simulate DOM event adding the input method to .xhr-input-method
+      const xhrInputMethod = xhrBreakpointsComponent.find(".xhr-input-method");
+      xhrInputMethod.simulate("change", { target: { value: method } });
+
+      xhrBreakpointsComponent.find("form").simulate("submit", mockEvent);
+      expect(setXHRBreakpointCallback).toHaveBeenCalledWith(urlValue, method);
+    });
+  });
+
+  it("should submit the URL and method when editing a breakpoint", function () {
+    const setXHRBreakpointCallback = jest.fn();
+    const mockEvent = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    const propsOverride = {
+      updateXHRBreakpoint: setXHRBreakpointCallback,
+      onXHRAdded: jest.fn(),
+      xhrBreakpoints: [
+        {
+          path: "",
+          method: "ANY",
+          disabled: false,
+          loading: false,
+          text: 'URL contains ""',
+        },
+        {
+          path: "this is GET",
+          method: "GET",
+          disabled: false,
+          loading: false,
+          text: 'URL contains "this is get"',
+        },
+      ],
+    };
+    const xhrBreakpointsComponent =
+      renderXHRBreakpointsComponent(propsOverride);
+
+    // load xhrBreakpoints pane with one existing xhrBreakpoint
+    const existingXHRbreakpoint =
+      xhrBreakpointsComponent.find(".xhr-container");
+    expect(existingXHRbreakpoint).toHaveLength(1);
+
+    // double click on existing breakpoint
+    existingXHRbreakpoint.simulate("doubleclick");
+    const xhrInput = xhrBreakpointsComponent.find(".xhr-input-url");
+    xhrInput.simulate("focus");
+
+    // change inputs and submit form
+    const xhrInputMethod = xhrBreakpointsComponent.find(".xhr-input-method");
+    xhrInput.simulate("change", { target: { value: "POSTURLValue" } });
+    xhrInputMethod.simulate("change", { target: { value: "POST" } });
+    xhrBreakpointsComponent.find("form").simulate("submit", mockEvent);
+    expect(setXHRBreakpointCallback).toHaveBeenCalledWith(
+      1,
+      "POSTURLValue",
+      "POST"
+    );
+  });
+});
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/EventListeners.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/EventListeners.spec.js.snap
new file mode 100644
index 0000000000..cc2ddf09f6
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/EventListeners.spec.js.snap
@@ -0,0 +1,408 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventListeners should render 1`] = `
+<div
+  className="event-listeners"
+>
+  <div
+    className="event-search-container"
+  >
+    <form
+      className="event-search-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="event-search-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Filter by event type"
+        value=""
+      />
+    </form>
+  </div>
+  <div
+    className="event-listeners-content"
+  >
+    <ul
+      className="event-listeners-list"
+    />
+  </div>
+</div>
+`;
+
+exports[`EventListeners should render categories appropriately 1`] = `
+<div
+  className="event-listeners"
+>
+  <div
+    className="event-search-container"
+  >
+    <form
+      className="event-search-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="event-search-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Filter by event type"
+        value=""
+      />
+    </form>
+  </div>
+  <div
+    className="event-listeners-content"
+  >
+    <ul
+      className="event-listeners-list"
+    >
+      <li
+        className="event-listener-group"
+        key="0"
+      >
+        <div
+          className="event-listener-header"
+        >
+          <button
+            className="event-listener-expand"
+            onClick={[Function]}
+          >
+            <AccessibleImage
+              className="arrow"
+            />
+          </button>
+          <label
+            className="event-listener-label"
+          >
+            <input
+              checked={false}
+              onChange={[Function]}
+              type="checkbox"
+              value="Category 1"
+            />
+            <span
+              className="event-listener-category"
+            >
+              Category 1
+            </span>
+          </label>
+        </div>
+      </li>
+      <li
+        className="event-listener-group"
+        key="1"
+      >
+        <div
+          className="event-listener-header"
+        >
+          <button
+            className="event-listener-expand"
+            onClick={[Function]}
+          >
+            <AccessibleImage
+              className="arrow"
+            />
+          </button>
+          <label
+            className="event-listener-label"
+          >
+            <input
+              checked={false}
+              onChange={[Function]}
+              type="checkbox"
+              value="Category 2"
+            />
+            <span
+              className="event-listener-category"
+            >
+              Category 2
+            </span>
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`EventListeners should render checked subcategories appropriately 1`] = `
+<div
+  className="event-listeners"
+>
+  <div
+    className="event-search-container"
+  >
+    <form
+      className="event-search-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="event-search-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Filter by event type"
+        value=""
+      />
+    </form>
+  </div>
+  <div
+    className="event-listeners-content"
+  >
+    <ul
+      className="event-listeners-list"
+    >
+      <li
+        className="event-listener-group"
+        key="0"
+      >
+        <div
+          className="event-listener-header"
+        >
+          <button
+            className="event-listener-expand"
+            onClick={[Function]}
+          >
+            <AccessibleImage
+              className="arrow expanded"
+            />
+          </button>
+          <label
+            className="event-listener-label"
+          >
+            <input
+              checked={false}
+              onChange={[Function]}
+              type="checkbox"
+              value="Category 1"
+            />
+            <span
+              className="event-listener-category"
+            >
+              Category 1
+            </span>
+          </label>
+        </div>
+        <ul>
+          <li
+            className="event-listener-event"
+            key="category1.subcategory1"
+          >
+            <label
+              className="event-listener-label"
+            >
+              <input
+                checked={false}
+                onChange={[Function]}
+                type="checkbox"
+                value="category1.subcategory1"
+              />
+              <span
+                className="event-listener-name"
+              >
+                Subcategory 1
+              </span>
+            </label>
+          </li>
+          <li
+            className="event-listener-event"
+            key="category1.subcategory2"
+          >
+            <label
+              className="event-listener-label"
+            >
+              <input
+                checked={true}
+                onChange={[Function]}
+                type="checkbox"
+                value="category1.subcategory2"
+              />
+              <span
+                className="event-listener-name"
+              >
+                Subcategory 2
+              </span>
+            </label>
+          </li>
+        </ul>
+      </li>
+      <li
+        className="event-listener-group"
+        key="1"
+      >
+        <div
+          className="event-listener-header"
+        >
+          <button
+            className="event-listener-expand"
+            onClick={[Function]}
+          >
+            <AccessibleImage
+              className="arrow"
+            />
+          </button>
+          <label
+            className="event-listener-label"
+          >
+            <input
+              checked={false}
+              onChange={[Function]}
+              type="checkbox"
+              value="Category 2"
+            />
+            <span
+              className="event-listener-category"
+            >
+              Category 2
+            </span>
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`EventListeners should render expanded categories appropriately 1`] = `
+<div
+  className="event-listeners"
+>
+  <div
+    className="event-search-container"
+  >
+    <form
+      className="event-search-form"
+      onSubmit={[Function]}
+    >
+      <input
+        className="event-search-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Filter by event type"
+        value=""
+      />
+    </form>
+  </div>
+  <div
+    className="event-listeners-content"
+  >
+    <ul
+      className="event-listeners-list"
+    >
+      <li
+        className="event-listener-group"
+        key="0"
+      >
+        <div
+          className="event-listener-header"
+        >
+          <button
+            className="event-listener-expand"
+            onClick={[Function]}
+          >
+            <AccessibleImage
+              className="arrow"
+            />
+          </button>
+          <label
+            className="event-listener-label"
+          >
+            <input
+              checked={false}
+              onChange={[Function]}
+              type="checkbox"
+              value="Category 1"
+            />
+            <span
+              className="event-listener-category"
+            >
+              Category 1
+            </span>
+          </label>
+        </div>
+      </li>
+      <li
+        className="event-listener-group"
+        key="1"
+      >
+        <div
+          className="event-listener-header"
+        >
+          <button
+            className="event-listener-expand"
+            onClick={[Function]}
+          >
+            <AccessibleImage
+              className="arrow expanded"
+            />
+          </button>
+          <label
+            className="event-listener-label"
+          >
+            <input
+              checked={false}
+              onChange={[Function]}
+              type="checkbox"
+              value="Category 2"
+            />
+            <span
+              className="event-listener-category"
+            >
+              Category 2
+            </span>
+          </label>
+        </div>
+        <ul>
+          <li
+            className="event-listener-event"
+            key="category2.subcategory1"
+          >
+            <label
+              className="event-listener-label"
+            >
+              <input
+                checked={false}
+                onChange={[Function]}
+                type="checkbox"
+                value="category2.subcategory1"
+              />
+              <span
+                className="event-listener-name"
+              >
+                Subcategory 3
+              </span>
+            </label>
+          </li>
+          <li
+            className="event-listener-event"
+            key="category2.subcategory2"
+          >
+            <label
+              className="event-listener-label"
+            >
+              <input
+                checked={false}
+                onChange={[Function]}
+                type="checkbox"
+                value="category2.subcategory2"
+              />
+              <span
+                className="event-listener-name"
+              >
+                Subcategory 4
+              </span>
+            </label>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap
new file mode 100644
index 0000000000..4869b15a73
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expressions should always have unique keys 1`] = `
+<Fragment>
+  <ul
+    className="pane expressions-list"
+  >
+    <li
+      className="expression-container"
+      key="expression1"
+      title="expression1"
+    >
+      <div
+        className="expression-content"
+      >
+        <Component
+          autoExpandDepth={0}
+          createElement={[Function]}
+          disableWrap={true}
+          mayUseCustomFormatter={true}
+          onDOMNodeClick={[Function]}
+          onDOMNodeMouseOut={[Function]}
+          onDOMNodeMouseOver={[Function]}
+          onDoubleClick={[Function]}
+          onInspectIconClick={[Function]}
+          roots={
+            Array [
+              Object {
+                "contents": Object {
+                  "front": null,
+                  "value": Object {
+                    "class": "",
+                    "value": undefined,
+                  },
+                },
+                "name": "expression1",
+                "path": "expression1",
+              },
+            ]
+          }
+          shouldRenderTooltip={true}
+        />
+        <div
+          className="expression-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+            tooltip="Remove watch expression"
+          />
+        </div>
+      </div>
+    </li>
+    <li
+      className="expression-container"
+      key="expression2"
+      title="expression2"
+    >
+      <div
+        className="expression-content"
+      >
+        <Component
+          autoExpandDepth={0}
+          createElement={[Function]}
+          disableWrap={true}
+          mayUseCustomFormatter={true}
+          onDOMNodeClick={[Function]}
+          onDOMNodeMouseOut={[Function]}
+          onDOMNodeMouseOver={[Function]}
+          onDoubleClick={[Function]}
+          onInspectIconClick={[Function]}
+          roots={
+            Array [
+              Object {
+                "contents": Object {
+                  "front": null,
+                  "value": Object {
+                    "class": "",
+                    "value": undefined,
+                  },
+                },
+                "name": "expression2",
+                "path": "expression2",
+              },
+            ]
+          }
+          shouldRenderTooltip={true}
+        />
+        <div
+          className="expression-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+            tooltip="Remove watch expression"
+          />
+        </div>
+      </div>
+    </li>
+  </ul>
+</Fragment>
+`;
+
+exports[`Expressions should render 1`] = `
+<Fragment>
+  <ul
+    className="pane expressions-list"
+  >
+    <li
+      className="expression-container"
+      key="expression1"
+      title="expression1"
+    >
+      <div
+        className="expression-content"
+      >
+        <Component
+          autoExpandDepth={0}
+          createElement={[Function]}
+          disableWrap={true}
+          mayUseCustomFormatter={true}
+          onDOMNodeClick={[Function]}
+          onDOMNodeMouseOut={[Function]}
+          onDOMNodeMouseOver={[Function]}
+          onDoubleClick={[Function]}
+          onInspectIconClick={[Function]}
+          roots={
+            Array [
+              Object {
+                "contents": Object {
+                  "front": null,
+                  "value": Object {
+                    "class": "",
+                    "value": "foo",
+                  },
+                },
+                "name": "expression1",
+                "path": "expression1",
+              },
+            ]
+          }
+          shouldRenderTooltip={true}
+        />
+        <div
+          className="expression-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+            tooltip="Remove watch expression"
+          />
+        </div>
+      </div>
+    </li>
+    <li
+      className="expression-container"
+      key="expression2"
+      title="expression2"
+    >
+      <div
+        className="expression-content"
+      >
+        <Component
+          autoExpandDepth={0}
+          createElement={[Function]}
+          disableWrap={true}
+          mayUseCustomFormatter={true}
+          onDOMNodeClick={[Function]}
+          onDOMNodeMouseOut={[Function]}
+          onDOMNodeMouseOver={[Function]}
+          onDoubleClick={[Function]}
+          onInspectIconClick={[Function]}
+          roots={
+            Array [
+              Object {
+                "contents": Object {
+                  "front": null,
+                  "value": Object {
+                    "class": "",
+                    "value": "bar",
+                  },
+                },
+                "name": "expression2",
+                "path": "expression2",
+              },
+            ]
+          }
+          shouldRenderTooltip={true}
+        />
+        <div
+          className="expression-container__close-btn"
+        >
+          <CloseButton
+            handleClick={[Function]}
+            tooltip="Remove watch expression"
+          />
+        </div>
+      </div>
+    </li>
+  </ul>
+</Fragment>
+`;
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..5611f6ceef
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/__snapshots__/XHRBreakpoints.spec.js.snap
@@ -0,0 +1,621 @@
+// 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-exceptions-options empty"
+  >
+    <ExceptionOption
+      className="breakpoints-exceptions"
+      isChecked={false}
+      label="Pause on any URL"
+      onChange={[Function]}
+    >
+      <div
+        className="breakpoints-exceptions"
+        onClick={[Function]}
+      >
+        <input
+          checked=""
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="breakpoint-exceptions-label"
+        >
+          Pause on any URL
+        </div>
+      </div>
+    </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-exceptions-options"
+  >
+    <ExceptionOption
+      className="breakpoints-exceptions"
+      isChecked={false}
+      label="Pause on any URL"
+      onChange={[Function]}
+    >
+      <div
+        className="breakpoints-exceptions"
+        onClick={[Function]}
+      >
+        <input
+          checked=""
+          onChange={[Function]}
+          type="checkbox"
+        />
+        <div
+          className="breakpoint-exceptions-label"
+        >
+          Pause on any URL
+        </div>
+      </div>
+    </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>
+`;