tor-browser

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

DebugTargetPane.js (4299B)

      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  createRef,
     10  PureComponent,
     11 } = require("resource://devtools/client/shared/vendor/react.mjs");
     12 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     13 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     14 
     15 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     16 
     17 const DebugTargetList = createFactory(
     18  require("resource://devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetList.js")
     19 );
     20 
     21 const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js");
     22 const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
     23 
     24 /**
     25 * This component provides list for debug target and name area.
     26 */
     27 class DebugTargetPane extends PureComponent {
     28  static get propTypes() {
     29    return {
     30      actionComponent: PropTypes.any.isRequired,
     31      additionalActionsComponent: PropTypes.any,
     32      children: PropTypes.node,
     33      collapsibilityKey: PropTypes.string.isRequired,
     34      detailComponent: PropTypes.any.isRequired,
     35      dispatch: PropTypes.func.isRequired,
     36      // Provided by wrapping the component with FluentReact.withLocalization.
     37      getString: PropTypes.func.isRequired,
     38      icon: PropTypes.string.isRequired,
     39      isCollapsed: PropTypes.bool.isRequired,
     40      name: PropTypes.string.isRequired,
     41      targets: PropTypes.arrayOf(Types.debugTarget).isRequired,
     42    };
     43  }
     44 
     45  constructor(props) {
     46    super(props);
     47    this.collapsableRef = createRef();
     48  }
     49 
     50  componentDidUpdate(prevProps, prevState, snapshot) {
     51    if (snapshot === null) {
     52      return;
     53    }
     54 
     55    const el = this.collapsableRef.current;
     56 
     57    // Cancel existing animation which is collapsing/expanding.
     58    for (const animation of el.getAnimations()) {
     59      animation.cancel();
     60    }
     61 
     62    el.animate(
     63      { maxHeight: [`${snapshot}px`, `${el.clientHeight}px`] },
     64      { duration: 150, easing: "cubic-bezier(.07, .95, 0, 1)" }
     65    );
     66  }
     67 
     68  getSnapshotBeforeUpdate(prevProps) {
     69    if (this.props.isCollapsed !== prevProps.isCollapsed) {
     70      return this.collapsableRef.current.clientHeight;
     71    }
     72 
     73    return null;
     74  }
     75 
     76  toggleCollapsibility() {
     77    const { collapsibilityKey, dispatch, isCollapsed } = this.props;
     78    dispatch(
     79      Actions.updateDebugTargetCollapsibility(collapsibilityKey, !isCollapsed)
     80    );
     81  }
     82 
     83  render() {
     84    const {
     85      actionComponent,
     86      additionalActionsComponent,
     87      children,
     88      detailComponent,
     89      dispatch,
     90      getString,
     91      icon,
     92      isCollapsed,
     93      name,
     94      targets,
     95    } = this.props;
     96 
     97    const title = getString("about-debugging-collapse-expand-debug-targets");
     98 
     99    return dom.section(
    100      {
    101        className: "qa-debug-target-pane",
    102      },
    103      dom.a(
    104        {
    105          className:
    106            "undecorated-link debug-target-pane__title " +
    107            "qa-debug-target-pane-title",
    108          title,
    109          onClick: () => this.toggleCollapsibility(),
    110        },
    111        dom.h2(
    112          { className: "main-subheading debug-target-pane__heading" },
    113          dom.img({
    114            className: "main-subheading__icon",
    115            src: icon,
    116          }),
    117          `${name} (${targets.length})`,
    118          dom.img({
    119            className:
    120              "main-subheading__icon debug-target-pane__icon" +
    121              (isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
    122            src: "chrome://devtools/skin/images/arrow-e.svg",
    123          })
    124        )
    125      ),
    126      dom.div(
    127        {
    128          className:
    129            "debug-target-pane__collapsable qa-debug-target-pane__collapsable" +
    130            (isCollapsed ? " debug-target-pane__collapsable--collapsed" : ""),
    131          ref: this.collapsableRef,
    132        },
    133        children,
    134        DebugTargetList({
    135          actionComponent,
    136          additionalActionsComponent,
    137          detailComponent,
    138          dispatch,
    139          isCollapsed,
    140          targets,
    141        })
    142      )
    143    );
    144  }
    145 }
    146 
    147 module.exports = FluentReact.withLocalization(DebugTargetPane);