summaryrefslogtreecommitdiffstats
path: root/devtools/client/dom/content/components
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/dom/content/components')
-rw-r--r--devtools/client/dom/content/components/DomTree.js141
-rw-r--r--devtools/client/dom/content/components/MainFrame.js76
-rw-r--r--devtools/client/dom/content/components/MainToolbar.js76
-rw-r--r--devtools/client/dom/content/components/moz.build6
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")