tor-browser

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

BreakpointHeading.js (2722B)

      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 React, { PureComponent } from "devtools/client/shared/vendor/react";
      6 import { div, span } from "devtools/client/shared/vendor/react-dom-factories";
      7 import PropTypes from "devtools/client/shared/vendor/react-prop-types";
      8 
      9 import { connect } from "devtools/client/shared/vendor/react-redux";
     10 import actions from "../../../actions/index";
     11 
     12 import {
     13  getTruncatedFileName,
     14  getDisplayPath,
     15  getFileURL,
     16 } from "../../../utils/source";
     17 import { createLocation } from "../../../utils/location";
     18 import { getFirstSourceActorForGeneratedSource } from "../../../selectors/index";
     19 
     20 import SourceIcon from "../../shared/SourceIcon";
     21 
     22 class BreakpointHeading extends PureComponent {
     23  static get propTypes() {
     24    return {
     25      sources: PropTypes.array.isRequired,
     26      source: PropTypes.object.isRequired,
     27      firstSourceActor: PropTypes.object,
     28      selectSource: PropTypes.func.isRequired,
     29      showBreakpointHeadingContextMenu: PropTypes.func.isRequired,
     30    };
     31  }
     32  onContextMenu = event => {
     33    event.preventDefault();
     34 
     35    this.props.showBreakpointHeadingContextMenu(event, this.props.source);
     36  };
     37 
     38  render() {
     39    const { sources, source, selectSource } = this.props;
     40 
     41    const path = getDisplayPath(source, sources);
     42    return div(
     43      {
     44        className: "breakpoint-heading",
     45        title: getFileURL(source, false),
     46        onClick: () => selectSource(source),
     47        onContextMenu: this.onContextMenu,
     48      },
     49      React.createElement(
     50        SourceIcon,
     51        // Breakpoints are displayed per source and may relate to many source actors.
     52        // Arbitrarily pick the first source actor to compute the matching source icon
     53        // The source actor is used to pick one specific source text content and guess
     54        // the related framework icon.
     55        {
     56          location: createLocation({
     57            source,
     58            sourceActor: this.props.firstSourceActor,
     59          }),
     60          modifier: icon =>
     61            ["file", "javascript"].includes(icon) ? null : icon,
     62        }
     63      ),
     64      div(
     65        {
     66          className: "filename",
     67        },
     68        getTruncatedFileName(source),
     69        path && span(null, `../${path}/..`)
     70      )
     71    );
     72  }
     73 }
     74 
     75 const mapStateToProps = (state, { source }) => ({
     76  firstSourceActor: getFirstSourceActorForGeneratedSource(state, source.id),
     77 });
     78 
     79 export default connect(mapStateToProps, {
     80  selectSource: actions.selectSource,
     81  showBreakpointHeadingContextMenu: actions.showBreakpointHeadingContextMenu,
     82 })(BreakpointHeading);