summaryrefslogtreecommitdiffstats
path: root/devtools/client/debugger/src/components/shared/PreviewFunction.js
blob: 1a6d164cdf479684fb5bc36e53238e5e6a78cbe8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* 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 { Component } from "devtools/client/shared/vendor/react";
import {
  span,
  button,
} from "devtools/client/shared/vendor/react-dom-factories";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";

import { formatDisplayName } from "../../utils/pause/frames/index";

const IGNORED_SOURCE_URLS = ["debugger eval code"];

export default class PreviewFunction extends Component {
  static get propTypes() {
    return {
      func: PropTypes.object.isRequired,
    };
  }

  renderFunctionName(func) {
    const { l10n } = this.context;
    const name = formatDisplayName(func, undefined, l10n);
    return span(
      {
        className: "function-name",
      },
      name
    );
  }

  renderParams(func) {
    const { parameterNames = [] } = func;

    return parameterNames
      .filter(Boolean)
      .map((param, i, arr) => {
        const elements = [
          span(
            {
              className: "param",
              key: param,
            },
            param
          ),
        ];
        // if this isn't the last param, add a comma
        if (i !== arr.length - 1) {
          elements.push(
            span(
              {
                className: "delimiter",
                key: i,
              },
              ", "
            )
          );
        }
        return elements;
      })
      .flat();
  }

  jumpToDefinitionButton(func) {
    const { location } = func;

    if (!location?.url || IGNORED_SOURCE_URLS.includes(location.url)) {
      return null;
    }

    const lastIndex = location.url.lastIndexOf("/");
    return button({
      className: "jump-definition",
      draggable: "false",
      title: `${location.url.slice(lastIndex + 1)}:${location.line}`,
    });
  }

  render() {
    const { func } = this.props;
    return span(
      {
        className: "function-signature",
      },
      this.renderFunctionName(func),
      span(
        {
          className: "paren",
        },
        "("
      ),
      this.renderParams(func),
      span(
        {
          className: "paren",
        },
        ")"
      ),
      this.jumpToDefinitionButton(func)
    );
  }
}

PreviewFunction.contextTypes = {
  l10n: PropTypes.object,
};