From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- devtools/client/dom/content/components/dom-tree.js | 91 ++++++++++++++++++++++ .../client/dom/content/components/main-frame.js | 63 +++++++++++++++ .../client/dom/content/components/main-toolbar.js | 66 ++++++++++++++++ devtools/client/dom/content/components/moz.build | 10 +++ 4 files changed, 230 insertions(+) create mode 100644 devtools/client/dom/content/components/dom-tree.js create mode 100644 devtools/client/dom/content/components/main-frame.js create mode 100644 devtools/client/dom/content/components/main-toolbar.js create mode 100644 devtools/client/dom/content/components/moz.build (limited to 'devtools/client/dom/content/components') diff --git a/devtools/client/dom/content/components/dom-tree.js b/devtools/client/dom/content/components/dom-tree.js new file mode 100644 index 000000000..ef529ac3f --- /dev/null +++ b/devtools/client/dom/content/components/dom-tree.js @@ -0,0 +1,91 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* 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 & Redux +const React = require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); + +// Reps +const { createFactories } = require("devtools/client/shared/components/reps/rep-utils"); +const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view")); +const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep")); +const { Grip } = require("devtools/client/shared/components/reps/grip"); + +// DOM Panel +const { GripProvider } = require("../grip-provider"); +const { DomDecorator } = require("../dom-decorator"); + +// Shortcuts +const PropTypes = React.PropTypes; + +/** + * Renders DOM panel tree. + */ +var DomTree = React.createClass({ + displayName: "DomTree", + + propTypes: { + object: PropTypes.any, + filter: PropTypes.string, + dispatch: PropTypes.func.isRequired, + grips: PropTypes.object, + }, + + /** + * Filter DOM properties. Return true if the object + * should be visible in the tree. + */ + onFilter: function (object) { + if (!this.props.filter) { + return true; + } + + return (object.name && object.name.indexOf(this.props.filter) > -1); + }, + + /** + * Render DOM panel content + */ + render: function () { + let columns = [{ + "id": "value" + }]; + + // 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. + let renderValue = props => { + return Rep(Object.assign({}, props, { + defaultRep: Grip, + cropLimit: 50, + })); + }; + + return ( + TreeView({ + object: this.props.object, + provider: new GripProvider(this.props.grips, this.props.dispatch), + decorator: new DomDecorator(), + mode: "short", + columns: columns, + renderValue: renderValue, + onFilter: this.onFilter + }) + ); + } +}); + +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/main-frame.js b/devtools/client/dom/content/components/main-frame.js new file mode 100644 index 000000000..d786314e2 --- /dev/null +++ b/devtools/client/dom/content/components/main-frame.js @@ -0,0 +1,63 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* 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 & Redux +const React = require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); + +// DOM Panel +const DomTree = React.createFactory(require("./dom-tree")); +const MainToolbar = React.createFactory(require("./main-toolbar")); + +// Shortcuts +const { div } = React.DOM; +const PropTypes = React.PropTypes; + +/** + * Renders basic layout of the DOM panel. The DOM panel cotent consists + * from two main parts: toolbar and tree. + */ +var MainFrame = React.createClass({ + displayName: "MainFrame", + + propTypes: { + object: PropTypes.any, + filter: PropTypes.string, + dispatch: PropTypes.func.isRequired, + }, + + /** + * Render DOM panel content + */ + render: function () { + return ( + div({className: "mainFrame"}, + MainToolbar({ + dispatch: this.props.dispatch, + object: this.props.object + }), + div({className: "treeTableBox"}, + DomTree({ + object: this.props.object, + filter: this.props.filter, + }) + ) + ) + ); + } +}); + +// 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/main-toolbar.js b/devtools/client/dom/content/components/main-toolbar.js new file mode 100644 index 000000000..c44a6b4ca --- /dev/null +++ b/devtools/client/dom/content/components/main-toolbar.js @@ -0,0 +1,66 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* 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 React = require("devtools/client/shared/vendor/react"); +const { l10n } = require("../utils"); + +// Reps +const { createFactories } = require("devtools/client/shared/components/reps/rep-utils"); +const { Toolbar, ToolbarButton } = createFactories(require("devtools/client/jsonview/components/reps/toolbar")); + +// DOM Panel +const SearchBox = React.createFactory(require("devtools/client/shared/components/search-box")); + +// Actions +const { fetchProperties } = require("../actions/grips"); +const { setVisibilityFilter } = require("../actions/filter"); + +// Shortcuts +const PropTypes = React.PropTypes; + +/** + * This template is responsible for rendering a toolbar + * within the 'Headers' panel. + */ +var MainToolbar = React.createClass({ + displayName: "MainToolbar", + + propTypes: { + object: PropTypes.any.isRequired, + dispatch: PropTypes.func.isRequired, + }, + + onRefresh: function () { + this.props.dispatch(fetchProperties(this.props.object)); + }, + + onSearch: function (value) { + this.props.dispatch(setVisibilityFilter(value)); + }, + + render: function () { + return ( + Toolbar({}, + ToolbarButton({ + className: "btn refresh", + onClick: this.onRefresh}, + l10n.getStr("dom.refresh") + ), + SearchBox({ + delay: 250, + onChange: this.onSearch, + placeholder: l10n.getStr("dom.filterDOMPanel"), + type: "filter" + }) + ) + ); + } +}); + +// 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 000000000..0fa1f8089 --- /dev/null +++ b/devtools/client/dom/content/components/moz.build @@ -0,0 +1,10 @@ +# 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( + 'dom-tree.js', + 'main-frame.js', + 'main-toolbar.js' +) -- cgit v1.2.3