tor-browser

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

ExtensionSidebar.js (3248B)

      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  createFactory,
      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 const {
     14  connect,
     15 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     16 
     17 const ExtensionPage = createFactory(
     18  require("resource://devtools/client/inspector/extensions/components/ExtensionPage.js")
     19 );
     20 const ObjectTreeView = createFactory(
     21  require("resource://devtools/client/inspector/extensions/components/ObjectTreeView.js")
     22 );
     23 const ExpressionResultView = createFactory(
     24  require("resource://devtools/client/inspector/extensions/components/ExpressionResultView.js")
     25 );
     26 const Types = require("resource://devtools/client/inspector/extensions/types.js");
     27 
     28 /**
     29 * The ExtensionSidebar is a React component with 2 supported viewMode:
     30 * - an ObjectTreeView UI, used to show the JS objects
     31 *   (used by the sidebar.setObject WebExtensions APIs)
     32 * - an ExpressionResultView UI, used to show the result for an expression
     33 *   (used by sidebar.setExpression WebExtensions APIs)
     34 * - an ExtensionPage UI used to show an extension page
     35 *   (used by the sidebar.setPage WebExtensions APIs).
     36 *
     37 * TODO: implement the ExtensionPage viewMode.
     38 */
     39 class ExtensionSidebar extends PureComponent {
     40  static get propTypes() {
     41    return {
     42      id: PropTypes.string.isRequired,
     43      extensionsSidebar: PropTypes.object.isRequired,
     44      onExtensionPageMount: PropTypes.func.isRequired,
     45      onExtensionPageUnmount: PropTypes.func.isRequired,
     46      // Helpers injected as props by extension-sidebar.js.
     47      serviceContainer: PropTypes.shape(Types.serviceContainer).isRequired,
     48    };
     49  }
     50 
     51  render() {
     52    const {
     53      id,
     54      extensionsSidebar,
     55      onExtensionPageMount,
     56      onExtensionPageUnmount,
     57      serviceContainer,
     58    } = this.props;
     59 
     60    const {
     61      iframeURL,
     62      object,
     63      expressionResult,
     64      rootTitle,
     65      viewMode = "empty-sidebar",
     66    } = extensionsSidebar[id] || {};
     67 
     68    let sidebarContentEl;
     69 
     70    switch (viewMode) {
     71      case "object-treeview":
     72        sidebarContentEl = ObjectTreeView({ object });
     73        break;
     74      case "object-value-grip-view":
     75        sidebarContentEl = ExpressionResultView({
     76          expressionResult,
     77          rootTitle,
     78          serviceContainer,
     79        });
     80        break;
     81      case "extension-page":
     82        sidebarContentEl = ExtensionPage({
     83          iframeURL,
     84          onExtensionPageMount,
     85          onExtensionPageUnmount,
     86        });
     87        break;
     88      case "empty-sidebar":
     89        break;
     90      default:
     91        throw new Error(`Unknown ExtensionSidebar viewMode: "${viewMode}"`);
     92    }
     93 
     94    const className = "devtools-monospace extension-sidebar inspector-tabpanel";
     95 
     96    return dom.div(
     97      {
     98        id,
     99        className,
    100      },
    101      sidebarContentEl
    102    );
    103  }
    104 }
    105 
    106 module.exports = connect(state => state)(ExtensionSidebar);