tor-browser

index.js (4918B)

---

/* 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/>. */

import React, { Component } from "devtools/client/shared/vendor/react";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";

import actions from "../../actions/index";
import { getSelectedPrimaryPaneTab } from "../../selectors/index";
import { prefs, features } from "../../utils/prefs";
import { connect } from "devtools/client/shared/vendor/react-redux";
import { primaryPaneTabs } from "../../constants";

import Outline from "./Outline";
import SourcesTree from "./SourcesTree";
import ProjectSearch from "./ProjectSearch";
import Tracer from "./Tracer";
const AppErrorBoundary = require("resource://devtools/client/shared/components/AppErrorBoundary.js");

const { TabPanel, Tabs } = ChromeUtils.importESModule(
 "resource://devtools/client/shared/components/tabs/Tabs.mjs",
 { global: "current" }
);

// Note that the following list should follow the same order as displayed
const tabs = [
 primaryPaneTabs.SOURCES,
 primaryPaneTabs.OUTLINE,
 primaryPaneTabs.PROJECT_SEARCH,
];
if (features.javascriptTracing) {
 tabs.push(primaryPaneTabs.TRACER);
}

class PrimaryPanes extends Component {
 constructor(props) {
   super(props);

   this.state = {
     alphabetizeOutline: prefs.alphabetizeOutline,
   };
 }

 static get propTypes() {
   return {
     selectedTab: PropTypes.oneOf(tabs).isRequired,
     setPrimaryPaneTab: PropTypes.func.isRequired,
     setActiveSearch: PropTypes.func.isRequired,
     closeActiveSearch: PropTypes.func.isRequired,
   };
 }

 onAlphabetizeClick = () => {
   const alphabetizeOutline = !prefs.alphabetizeOutline;
   prefs.alphabetizeOutline = alphabetizeOutline;
   this.setState({ alphabetizeOutline });
 };

 onActivateTab = index => {
   const tab = tabs.at(index);
   this.props.setPrimaryPaneTab(tab);
   if (tab == primaryPaneTabs.PROJECT_SEARCH) {
     this.props.setActiveSearch(tab);
   } else {
     this.props.closeActiveSearch();
   }
 };

 render() {
   const { selectedTab } = this.props;
   return React.createElement(
     "aside",
     {
       className: "tab-panel sources-panel",
     },
     React.createElement(
       Tabs,
       {
         activeTab: tabs.indexOf(selectedTab),
         onAfterChange: this.onActivateTab,
       },
       React.createElement(
         TabPanel,
         {
           id: "sources-tab",
           key: `sources-tab${
             selectedTab === primaryPaneTabs.SOURCES ? "-selected" : ""
           }`,
           className: "tab sources-tab",
           title: L10N.getStr("sources.header"),
         },
         React.createElement(SourcesTree, null)
       ),
       React.createElement(
         TabPanel,
         {
           id: "outline-tab",
           key: `outline-tab${
             selectedTab === primaryPaneTabs.OUTLINE ? "-selected" : ""
           }`,
           className: "tab outline-tab",
           title: L10N.getStr("outline.header"),
         },
         React.createElement(Outline, {
           alphabetizeOutline: this.state.alphabetizeOutline,
           onAlphabetizeClick: this.onAlphabetizeClick,
         })
       ),
       React.createElement(
         TabPanel,
         {
           id: "search-tab",
           key: `search-tab${
             selectedTab === primaryPaneTabs.PROJECT_SEARCH ? "-selected" : ""
           }`,
           className: "tab search-tab",
           title: L10N.getStr("search.header"),
         },
         React.createElement(ProjectSearch, null)
       ),
       features.javascriptTracing
         ? React.createElement(
             TabPanel,
             {
               id: "tracer-tab",
               key: `tracer-tab${
                 selectedTab === primaryPaneTabs.TRACER ? "-selected" : ""
               }`,
               className: "tab tracer-tab",
               title: L10N.getStr("tracer.header"),
             },
             // As the tracer is an application on its own (and is prototypish)
             // let's encapsulate it to track its own exceptions.
             React.createElement(
               AppErrorBoundary,
               {
                 componentName: "Debugger",
                 panel: "JavaScript Tracer",
               },
               React.createElement(Tracer)
             )
           )
         : null
     )
   );
 }
}

const mapStateToProps = state => {
 return {
   selectedTab: getSelectedPrimaryPaneTab(state),
 };
};

const connector = connect(mapStateToProps, {
 setPrimaryPaneTab: actions.setPrimaryPaneTab,
 setActiveSearch: actions.setActiveSearch,
 closeActiveSearch: actions.closeActiveSearch,
});

export default connector(PrimaryPanes);