1 files changed, 58 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js b/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js
new file mode 100644
index 0000000000..ad003552ad
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js
@@ -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/>. */
+
+import React, { PureComponent } from "devtools/client/shared/vendor/react";
+import PropTypes from "devtools/client/shared/vendor/react-prop-types";
+import AccessibleImage from "../AccessibleImage";
+import { CommandBarButton } from "./index";
+
+const classnames = require("resource://devtools/client/shared/classnames.js");
+
+class PaneToggleButton extends PureComponent {
+  static defaultProps = {
+    horizontal: false,
+    position: "start",
+  };
+
+  static get propTypes() {
+    return {
+      collapsed: PropTypes.bool.isRequired,
+      handleClick: PropTypes.func.isRequired,
+      horizontal: PropTypes.bool.isRequired,
+      position: PropTypes.oneOf(["start", "end"]).isRequired,
+    };
+  }
+
+  label(position, collapsed) {
+    switch (position) {
+      case "start":
+        return L10N.getStr(collapsed ? "expandSources" : "collapseSources");
+      case "end":
+        return L10N.getStr(
+          collapsed ? "expandBreakpoints" : "collapseBreakpoints"
+        );
+    }
+    return null;
+  }
+
+  render() {
+    const { position, collapsed, horizontal, handleClick } = this.props;
+    return React.createElement(
+      CommandBarButton,
+      {
+        className: classnames("toggle-button", position, {
+          collapsed,
+          vertical: !horizontal,
+        }),
+        onClick: () => handleClick(position, !collapsed),
+        title: this.label(position, collapsed),
+      },
+      React.createElement(AccessibleImage, {
+        className: collapsed ? "pane-expand" : "pane-collapse",
+      })
+    );
+  }
+}
+
+export default PaneToggleButton;