1 files changed, 82 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/shared/PreviewFunction.js b/devtools/client/debugger/src/components/shared/PreviewFunction.js
new file mode 100644
index 0000000000..760a45db5d
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/PreviewFunction.js
@@ -0,0 +1,82 @@
+/* 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { formatDisplayName } from "../../utils/pause/frames";
+
+import "./PreviewFunction.css";
+
+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}</span>;
+  }
+
+  renderParams(func) {
+    const { parameterNames = [] } = func;
+
+    return parameterNames
+      .filter(Boolean)
+      .map((param, i, arr) => {
+        const elements = [
+          <span className="param" key={param}>
+            {param}
+          </span>,
+        ];
+        // if this isn't the last param, add a comma
+        if (i !== arr.length - 1) {
+          elements.push(
+            <span className="delimiter" key={i}>
+              {", "}
+            </span>
+          );
+        }
+        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">(</span>
+        {this.renderParams(func)}
+        <span className="paren">)</span>
+        {this.jumpToDefinitionButton(func)}
+      </span>
+    );
+  }
+}
+
+PreviewFunction.contextTypes = { l10n: PropTypes.object };