ExtensionPage.js (1514B)
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 5 "use strict"; 6 7 const { 8 createRef, 9 PureComponent, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 13 14 /** 15 * The ExtensionPage React Component is used in the ExtensionSidebar component to provide 16 * a UI viewMode which shows an extension page rendered inside the sidebar panel. 17 */ 18 class ExtensionPage extends PureComponent { 19 static get propTypes() { 20 return { 21 iframeURL: PropTypes.string.isRequired, 22 onExtensionPageMount: PropTypes.func.isRequired, 23 onExtensionPageUnmount: PropTypes.func.isRequired, 24 }; 25 } 26 27 constructor(props) { 28 super(props); 29 30 this.iframeRef = createRef(); 31 } 32 33 componentDidMount() { 34 this.props.onExtensionPageMount(this.iframeRef.current); 35 } 36 37 componentWillUnmount() { 38 this.props.onExtensionPageUnmount(this.iframeRef.current); 39 } 40 41 render() { 42 return dom.iframe({ 43 className: "inspector-extension-sidebar-page", 44 src: this.props.iframeURL, 45 style: { 46 width: "100%", 47 height: "100%", 48 margin: 0, 49 padding: 0, 50 }, 51 ref: this.iframeRef, 52 }); 53 } 54 } 55 56 module.exports = ExtensionPage;