4 files changed, 299 insertions, 0 deletions
diff --git a/devtools/client/dom/content/components/DomTree.js b/devtools/client/dom/content/components/DomTree.js
new file mode 100644
index 0000000000..b82a2785dd
--- /dev/null
+++ b/devtools/client/dom/content/components/DomTree.js
@@ -0,0 +1,141 @@
+/* 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/. */
+
+/* global DomProvider */
+
+"use strict";
+
+// React & Redux
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const TreeView = createFactory(
+  require("resource://devtools/client/shared/components/tree/TreeView.js")
+);
+// Reps
+const {
+  REPS,
+  MODE,
+} = require("resource://devtools/client/shared/components/reps/index.js");
+const { Rep } = REPS;
+
+const Grip = REPS.Grip;
+// DOM Panel
+const {
+  GripProvider,
+} = require("resource://devtools/client/dom/content/grip-provider.js");
+
+const {
+  DomDecorator,
+} = require("resource://devtools/client/dom/content/dom-decorator.js");
+
+/**
+ * Renders DOM panel tree.
+ */
+class DomTree extends Component {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      filter: PropTypes.string,
+      grips: PropTypes.object,
+      object: PropTypes.any,
+      openLink: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onFilter = this.onFilter.bind(this);
+  }
+
+  /**
+   * Filter DOM properties. Return true if the object
+   * should be visible in the tree.
+   */
+  onFilter(object) {
+    if (!this.props.filter) {
+      return true;
+    }
+
+    return object.name && object.name.indexOf(this.props.filter) > -1;
+  }
+
+  /**
+   * Render DOM panel content
+   */
+  render() {
+    const { dispatch, grips, object, openLink } = this.props;
+
+    const columns = [
+      {
+        id: "value",
+      },
+    ];
+
+    let onDOMNodeMouseOver;
+    let onDOMNodeMouseOut;
+    let onInspectIconClick;
+    const toolbox = DomProvider.getToolbox();
+    if (toolbox) {
+      const highlighter = toolbox.getHighlighter();
+      onDOMNodeMouseOver = async (grip, options = {}) => {
+        return highlighter.highlight(grip, options);
+      };
+      onDOMNodeMouseOut = async () => {
+        return highlighter.unhighlight();
+      };
+      onInspectIconClick = async grip => {
+        return toolbox.viewElementInInspector(grip, "inspect_dom");
+      };
+    }
+
+    // This is the integration point with Reps. The DomTree is using
+    // Reps to render all values. The code also specifies default rep
+    // used for data types that don't have its own specific template.
+    const renderValue = props => {
+      const repProps = Object.assign({}, props, {
+        onDOMNodeMouseOver,
+        onDOMNodeMouseOut,
+        onInspectIconClick,
+        defaultRep: Grip,
+        cropLimit: 50,
+      });
+
+      // Object can be an objectFront, while Rep always expect grips.
+      if (props?.object?.getGrip) {
+        repProps.object = props.object.getGrip();
+      }
+
+      return Rep(repProps);
+    };
+
+    return TreeView({
+      columns,
+      decorator: new DomDecorator(),
+      mode: MODE.SHORT,
+      object,
+      onFilter: this.onFilter,
+      openLink,
+      provider: new GripProvider(grips, dispatch),
+      renderValue,
+    });
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    grips: state.grips,
+    filter: state.filter,
+  };
+};
+
+// Exports from this module
+module.exports = connect(mapStateToProps)(DomTree);
diff --git a/devtools/client/dom/content/components/MainFrame.js b/devtools/client/dom/content/components/MainFrame.js
new file mode 100644
index 0000000000..fedbb09bb8
--- /dev/null
+++ b/devtools/client/dom/content/components/MainFrame.js
@@ -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/. */
+/* globals DomProvider */
+
+"use strict";
+
+// React & Redux
+const {
+  Component,
+  createFactory,
+} = 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");
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+// DOM Panel
+const DomTree = createFactory(
+  require("resource://devtools/client/dom/content/components/DomTree.js")
+);
+
+const MainToolbar = createFactory(
+  require("resource://devtools/client/dom/content/components/MainToolbar.js")
+);
+// Shortcuts
+const { div } = dom;
+
+/**
+ * Renders basic layout of the DOM panel. The DOM panel content consists
+ * from two main parts: toolbar and tree.
+ */
+class MainFrame extends Component {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      filter: PropTypes.string,
+      object: PropTypes.any,
+    };
+  }
+
+  /**
+   * Render DOM panel content
+   */
+  render() {
+    const { filter, object } = this.props;
+
+    return div(
+      { className: "mainFrame" },
+      MainToolbar({
+        dispatch: this.props.dispatch,
+        object: this.props.object,
+      }),
+      div(
+        { className: "treeTableBox devtools-monospace" },
+        DomTree({
+          filter,
+          object,
+          openLink: url => DomProvider.openLink(url),
+        })
+      )
+    );
+  }
+}
+
+// Transform state into props
+// Note: use https://github.com/faassen/reselect for better performance.
+const mapStateToProps = state => {
+  return {
+    filter: state.filter,
+  };
+};
+
+// Exports from this module
+module.exports = connect(mapStateToProps)(MainFrame);
diff --git a/devtools/client/dom/content/components/MainToolbar.js b/devtools/client/dom/content/components/MainToolbar.js
new file mode 100644
index 0000000000..f3f018741a
--- /dev/null
+++ b/devtools/client/dom/content/components/MainToolbar.js
@@ -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/. */
+"use strict";
+
+// React
+const {
+  Component,
+  createFactory,
+} = 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");
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+
+const { l10n } = require("resource://devtools/client/dom/content/utils.js");
+
+// Actions
+const {
+  fetchProperties,
+} = require("resource://devtools/client/dom/content/actions/grips.js");
+const {
+  setVisibilityFilter,
+} = require("resource://devtools/client/dom/content/actions/filter.js");
+
+/**
+ * This template is responsible for rendering a toolbar
+ * within the 'Headers' panel.
+ */
+class MainToolbar extends Component {
+  static get propTypes() {
+    return {
+      object: PropTypes.any.isRequired,
+      dispatch: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onRefresh = this.onRefresh.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+  }
+
+  onRefresh() {
+    this.props.dispatch(fetchProperties(this.props.object));
+  }
+
+  onSearch(value) {
+    this.props.dispatch(setVisibilityFilter(value));
+  }
+
+  render() {
+    return dom.div(
+      { className: "devtools-toolbar devtools-input-toolbar" },
+      SearchBox({
+        key: "filter",
+        delay: 250,
+        onChange: this.onSearch,
+        placeholder: l10n.getStr("dom.filterDOMPanel"),
+        type: "filter",
+      }),
+      dom.span({ className: "devtools-separator" }),
+      dom.button({
+        key: "refresh",
+        className: "refresh devtools-button",
+        id: "dom-refresh-button",
+        title: l10n.getStr("dom.refresh"),
+        onClick: this.onRefresh,
+      })
+    );
+  }
+}
+
+// Exports from this module
+module.exports = MainToolbar;
diff --git a/devtools/client/dom/content/components/moz.build b/devtools/client/dom/content/components/moz.build
new file mode 100644
index 0000000000..5b669bac24
--- /dev/null
+++ b/devtools/client/dom/content/components/moz.build
@@ -0,0 +1,6 @@
+# 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("DomTree.js", "MainFrame.js", "MainToolbar.js")