tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

InspectorTabPanel.js (1996B)

      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  Component,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 
     13 // Shortcuts
     14 const { div } = dom;
     15 
     16 /**
     17 * Helper panel component that is using an existing DOM node
     18 * as the content. It's used by Sidebar as well as SplitBox
     19 * components.
     20 */
     21 class InspectorTabPanel extends Component {
     22  static get propTypes() {
     23    return {
     24      // ID of the node that should be rendered as the content.
     25      id: PropTypes.string.isRequired,
     26      // Optional prefix for panel IDs.
     27      idPrefix: PropTypes.string,
     28      // Optional mount callback.
     29      onMount: PropTypes.func,
     30      // Optional unmount callback.
     31      onUnmount: PropTypes.func,
     32    };
     33  }
     34 
     35  static get defaultProps() {
     36    return {
     37      idPrefix: "",
     38    };
     39  }
     40 
     41  componentDidMount() {
     42    const doc = this.refs.content.ownerDocument;
     43    const panel = doc.getElementById(this.props.idPrefix + this.props.id);
     44 
     45    // Append existing DOM node into panel's content.
     46    this.refs.content.appendChild(panel);
     47 
     48    if (this.props.onMount) {
     49      this.props.onMount(this.refs.content, this.props);
     50    }
     51  }
     52 
     53  componentWillUnmount() {
     54    const doc = this.refs.content.ownerDocument;
     55    const panels = doc.getElementById("tabpanels");
     56 
     57    if (this.props.onUnmount) {
     58      this.props.onUnmount(this.refs.content, this.props);
     59    }
     60 
     61    // Move panel's content node back into list of tab panels.
     62    panels.appendChild(this.refs.content.firstChild);
     63  }
     64 
     65  render() {
     66    return div({
     67      ref: "content",
     68      className: "devtools-inspector-tab-panel",
     69    });
     70  }
     71 }
     72 
     73 module.exports = InspectorTabPanel;