tor-browser

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

CompatibilityApp.js (4035B)

      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  connect,
      9 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     10 const {
     11  createFactory,
     12  PureComponent,
     13 } = require("resource://devtools/client/shared/vendor/react.mjs");
     14 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     15 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     16 
     17 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     18 
     19 const Types = require("resource://devtools/client/inspector/compatibility/types.js");
     20 
     21 const Accordion = createFactory(
     22  require("resource://devtools/client/shared/components/Accordion.js")
     23 );
     24 const Footer = createFactory(
     25  require("resource://devtools/client/inspector/compatibility/components/Footer.js")
     26 );
     27 const IssuePane = createFactory(
     28  require("resource://devtools/client/inspector/compatibility/components/IssuePane.js")
     29 );
     30 const Settings = createFactory(
     31  require("resource://devtools/client/inspector/compatibility/components/Settings.js")
     32 );
     33 
     34 class CompatibilityApp extends PureComponent {
     35  static get propTypes() {
     36    return {
     37      dispatch: PropTypes.func.isRequired,
     38      // getString prop is injected by the withLocalization wrapper
     39      getString: PropTypes.func.isRequired,
     40      isSettingsVisible: PropTypes.bool.isRequired,
     41      isTopLevelTargetProcessing: PropTypes.bool.isRequired,
     42      selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
     43        .isRequired,
     44      topLevelTargetIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
     45        .isRequired,
     46      setSelectedNode: PropTypes.func.isRequired,
     47    };
     48  }
     49 
     50  render() {
     51    const {
     52      dispatch,
     53      getString,
     54      isSettingsVisible,
     55      isTopLevelTargetProcessing,
     56      selectedNodeIssues,
     57      topLevelTargetIssues,
     58      setSelectedNode,
     59    } = this.props;
     60 
     61    const selectedNodeIssuePane = IssuePane({
     62      issues: selectedNodeIssues,
     63    });
     64 
     65    const topLevelTargetIssuePane =
     66      topLevelTargetIssues.length || !isTopLevelTargetProcessing
     67        ? IssuePane({
     68            dispatch,
     69            issues: topLevelTargetIssues,
     70            setSelectedNode,
     71          })
     72        : null;
     73 
     74    const throbber = isTopLevelTargetProcessing
     75      ? dom.div({
     76          className: "compatibility-app__throbber devtools-throbber",
     77        })
     78      : null;
     79 
     80    return dom.section(
     81      {
     82        className: "compatibility-app theme-sidebar inspector-tabpanel",
     83      },
     84      dom.div(
     85        {
     86          className:
     87            "compatibility-app__container" +
     88            (isSettingsVisible ? " compatibility-app__container-hidden" : ""),
     89        },
     90        Accordion({
     91          className: "compatibility-app__main",
     92          items: [
     93            {
     94              id: "compatibility-app--selected-element-pane",
     95              header: getString("compatibility-selected-element-header"),
     96              component: selectedNodeIssuePane,
     97              opened: true,
     98            },
     99            {
    100              id: "compatibility-app--all-elements-pane",
    101              header: getString("compatibility-all-elements-header"),
    102              component: [topLevelTargetIssuePane, throbber],
    103              opened: true,
    104            },
    105          ],
    106        }),
    107        Footer({
    108          className: "compatibility-app__footer",
    109        })
    110      ),
    111      isSettingsVisible ? Settings() : null
    112    );
    113  }
    114 }
    115 
    116 const mapStateToProps = state => {
    117  return {
    118    isSettingsVisible: state.compatibility.isSettingsVisible,
    119    isTopLevelTargetProcessing: state.compatibility.isTopLevelTargetProcessing,
    120    selectedNodeIssues: state.compatibility.selectedNodeIssues,
    121    topLevelTargetIssues: state.compatibility.topLevelTargetIssues,
    122  };
    123 };
    124 module.exports = FluentReact.withLocalization(
    125  connect(mapStateToProps)(CompatibilityApp)
    126 );