tor-browser

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

MainTabbedArea.mjs (4284B)

      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 import { Component } from "resource://devtools/client/shared/vendor/react.mjs";
      6 import PropTypes from "resource://devtools/client/shared/vendor/react-prop-types.mjs";
      7 import { createFactories } from "resource://devtools/client/shared/react-utils.mjs";
      8 import { button } from "resource://devtools/client/shared/vendor/react-dom-factories.mjs";
      9 
     10 import JsonPanelClass from "resource://devtools/client/jsonview/components/JsonPanel.mjs";
     11 
     12 const { JsonPanel } = createFactories(JsonPanelClass);
     13 import TextPanelClass from "resource://devtools/client/jsonview/components/TextPanel.mjs";
     14 
     15 const { TextPanel } = createFactories(TextPanelClass);
     16 import HeadersPanelClass from "resource://devtools/client/jsonview/components/HeadersPanel.mjs";
     17 
     18 const { HeadersPanel } = createFactories(HeadersPanelClass);
     19 import * as TabsClass from "resource://devtools/client/shared/components/tabs/Tabs.mjs";
     20 
     21 const { Tabs, TabPanel } = createFactories(TabsClass);
     22 
     23 /**
     24 * This object represents the root application template
     25 * responsible for rendering the basic tab layout.
     26 */
     27 class MainTabbedArea extends Component {
     28  static get propTypes() {
     29    return {
     30      jsonText: PropTypes.instanceOf(Text),
     31      activeTab: PropTypes.number,
     32      actions: PropTypes.object,
     33      headers: PropTypes.object,
     34      searchFilter: PropTypes.string,
     35      json: PropTypes.oneOfType([
     36        PropTypes.string,
     37        PropTypes.object,
     38        PropTypes.array,
     39        PropTypes.bool,
     40        PropTypes.number,
     41      ]),
     42      expandedNodes: PropTypes.instanceOf(Set),
     43    };
     44  }
     45 
     46  constructor(props) {
     47    super(props);
     48 
     49    this.state = {
     50      json: props.json,
     51      expandedNodes: props.expandedNodes,
     52      jsonText: props.jsonText,
     53      activeTab: props.activeTab,
     54    };
     55 
     56    this.onTabChanged = this.onTabChanged.bind(this);
     57    this.onProfileSize = this.onProfileSize.bind(this);
     58  }
     59 
     60  onTabChanged(index) {
     61    this.setState({ activeTab: index });
     62 
     63    // Send notification event to the window. This is useful for tests.
     64    window.dispatchEvent(new CustomEvent("TabChanged", { detail: { index } }));
     65  }
     66 
     67  onProfileSize() {
     68    this.props.actions.onProfileSize();
     69  }
     70 
     71  renderToolbarButton() {
     72    if (!JSONView.sizeProfilerEnabled) {
     73      return null;
     74    }
     75    const isValidJson = !(this.state.json instanceof Error);
     76    return button({
     77      className: "profiler-icon-button",
     78      title: isValidJson
     79        ? JSONView.Locale["jsonViewer.sizeProfilerButton"]
     80        : JSONView.Locale["jsonViewer.sizeProfilerButtonDisabled"],
     81      onClick: this.onProfileSize,
     82      disabled: !isValidJson,
     83    });
     84  }
     85 
     86  render() {
     87    return Tabs(
     88      {
     89        activeTab: this.state.activeTab,
     90        onAfterChange: this.onTabChanged,
     91        tall: true,
     92        renderToolbarButton: () => this.renderToolbarButton(),
     93      },
     94      TabPanel(
     95        {
     96          id: "json",
     97          className: "json",
     98          title: JSONView.Locale["jsonViewer.tab.JSON"],
     99        },
    100        JsonPanel({
    101          data: this.state.json,
    102          expandedNodes: this.state.expandedNodes,
    103          actions: this.props.actions,
    104          searchFilter: this.state.searchFilter,
    105          dataSize: this.state.jsonText.length,
    106        })
    107      ),
    108      TabPanel(
    109        {
    110          id: "rawdata",
    111          className: "rawdata",
    112          title: JSONView.Locale["jsonViewer.tab.RawData"],
    113        },
    114        TextPanel({
    115          isValidJson:
    116            !(this.state.json instanceof Error) &&
    117            document.readyState != "loading",
    118          data: this.state.jsonText,
    119          errorMessage:
    120            this.state.json instanceof Error ? this.state.json + "" : null,
    121          actions: this.props.actions,
    122        })
    123      ),
    124      TabPanel(
    125        {
    126          id: "headers",
    127          className: "headers",
    128          title: JSONView.Locale["jsonViewer.tab.Headers"],
    129        },
    130        HeadersPanel({
    131          data: this.props.headers,
    132          actions: this.props.actions,
    133          searchFilter: this.props.searchFilter,
    134        })
    135      )
    136    );
    137  }
    138 }
    139 
    140 export default { MainTabbedArea };