MainFrame.js (1958B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 /* globals DomProvider */ 5 6 "use strict"; 7 8 // React & Redux 9 const { 10 Component, 11 createFactory, 12 } = require("resource://devtools/client/shared/vendor/react.mjs"); 13 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 14 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 15 16 const { 17 connect, 18 } = require("resource://devtools/client/shared/vendor/react-redux.js"); 19 // DOM Panel 20 const DomTree = createFactory( 21 require("resource://devtools/client/dom/content/components/DomTree.js") 22 ); 23 24 const MainToolbar = createFactory( 25 require("resource://devtools/client/dom/content/components/MainToolbar.js") 26 ); 27 // Shortcuts 28 const { div } = dom; 29 30 /** 31 * Renders basic layout of the DOM panel. The DOM panel content consists 32 * from two main parts: toolbar and tree. 33 */ 34 class MainFrame extends Component { 35 static get propTypes() { 36 return { 37 dispatch: PropTypes.func.isRequired, 38 filter: PropTypes.string, 39 object: PropTypes.any, 40 }; 41 } 42 43 /** 44 * Render DOM panel content 45 */ 46 render() { 47 const { filter, object } = this.props; 48 49 return div( 50 { className: "mainFrame" }, 51 MainToolbar({ 52 dispatch: this.props.dispatch, 53 object: this.props.object, 54 }), 55 div( 56 { className: "treeTableBox devtools-monospace" }, 57 DomTree({ 58 filter, 59 object, 60 openLink: url => DomProvider.openLink(url), 61 }) 62 ) 63 ); 64 } 65 } 66 67 // Transform state into props 68 // Note: use https://github.com/faassen/reselect for better performance. 69 const mapStateToProps = state => { 70 return { 71 filter: state.filter, 72 }; 73 }; 74 75 // Exports from this module 76 module.exports = connect(mapStateToProps)(MainFrame);