3 files changed, 90 insertions, 0 deletions
diff --git a/devtools/client/inspector/components/InspectorTabPanel.css b/devtools/client/inspector/components/InspectorTabPanel.css
new file mode 100644
index 0000000000..6bffa61462
--- /dev/null
+++ b/devtools/client/inspector/components/InspectorTabPanel.css
@@ -0,0 +1,8 @@
+/* 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/. */
+
+.devtools-inspector-tab-panel {
+  width: 100%;
+  height: 100%;
+}
diff --git a/devtools/client/inspector/components/InspectorTabPanel.js b/devtools/client/inspector/components/InspectorTabPanel.js
new file mode 100644
index 0000000000..0da70fb1d4
--- /dev/null
+++ b/devtools/client/inspector/components/InspectorTabPanel.js
@@ -0,0 +1,73 @@
+/* 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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+// Shortcuts
+const { div } = dom;
+
+/**
+ * Helper panel component that is using an existing DOM node
+ * as the content. It's used by Sidebar as well as SplitBox
+ * components.
+ */
+class InspectorTabPanel extends Component {
+  static get propTypes() {
+    return {
+      // ID of the node that should be rendered as the content.
+      id: PropTypes.string.isRequired,
+      // Optional prefix for panel IDs.
+      idPrefix: PropTypes.string,
+      // Optional mount callback.
+      onMount: PropTypes.func,
+      // Optional unmount callback.
+      onUnmount: PropTypes.func,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      idPrefix: "",
+    };
+  }
+
+  componentDidMount() {
+    const doc = this.refs.content.ownerDocument;
+    const panel = doc.getElementById(this.props.idPrefix + this.props.id);
+
+    // Append existing DOM node into panel's content.
+    this.refs.content.appendChild(panel);
+
+    if (this.props.onMount) {
+      this.props.onMount(this.refs.content, this.props);
+    }
+  }
+
+  componentWillUnmount() {
+    const doc = this.refs.content.ownerDocument;
+    const panels = doc.getElementById("tabpanels");
+
+    if (this.props.onUnmount) {
+      this.props.onUnmount(this.refs.content, this.props);
+    }
+
+    // Move panel's content node back into list of tab panels.
+    panels.appendChild(this.refs.content.firstChild);
+  }
+
+  render() {
+    return div({
+      ref: "content",
+      className: "devtools-inspector-tab-panel",
+    });
+  }
+}
+
+module.exports = InspectorTabPanel;
diff --git a/devtools/client/inspector/components/moz.build b/devtools/client/inspector/components/moz.build
new file mode 100644
index 0000000000..cf6226361a
--- /dev/null
+++ b/devtools/client/inspector/components/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# 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/.
+
+DevToolsModules(
+    "InspectorTabPanel.js",
+)