1 files changed, 96 insertions, 0 deletions
diff --git a/devtools/client/shared/components/StackTrace.js b/devtools/client/shared/components/StackTrace.js
new file mode 100644
index 0000000000..e89e79b344
--- /dev/null
+++ b/devtools/client/shared/components/StackTrace.js
@@ -0,0 +1,96 @@
+/* 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/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const Frame = createFactory(
+  require("resource://devtools/client/shared/components/Frame.js")
+);
+
+const l10n = new LocalizationHelper(
+  "devtools/client/locales/webconsole.properties"
+);
+
+class AsyncFrameClass extends Component {
+  static get propTypes() {
+    return {
+      asyncCause: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const { asyncCause } = this.props;
+
+    return dom.span(
+      { className: "frame-link-async-cause" },
+      l10n.getFormatStr("stacktrace.asyncStack", asyncCause)
+    );
+  }
+}
+
+class StackTrace extends Component {
+  static get propTypes() {
+    return {
+      stacktrace: PropTypes.array.isRequired,
+      onViewSourceInDebugger: PropTypes.func.isRequired,
+      // Service to enable the source map feature.
+      sourceMapURLService: PropTypes.object,
+    };
+  }
+
+  render() {
+    const { stacktrace, onViewSourceInDebugger, sourceMapURLService } =
+      this.props;
+
+    if (!stacktrace || !stacktrace.length) {
+      return null;
+    }
+
+    const frames = [];
+    stacktrace.forEach((s, i) => {
+      if (s.asyncCause) {
+        frames.push(
+          "\t",
+          AsyncFrame({
+            key: `${i}-asyncframe`,
+            asyncCause: s.asyncCause,
+          }),
+          "\n"
+        );
+      }
+
+      frames.push(
+        "\t",
+        Frame({
+          key: `${i}-frame`,
+          frame: {
+            functionDisplayName: s.functionName,
+            source: s.filename,
+            line: s.lineNumber,
+            column: s.columnNumber,
+          },
+          showFunctionName: true,
+          showAnonymousFunctionName: true,
+          showFullSourceUrl: true,
+          onClick: onViewSourceInDebugger,
+          sourceMapURLService,
+        }),
+        "\n"
+      );
+    });
+
+    return dom.div({ className: "stack-trace" }, frames);
+  }
+}
+
+const AsyncFrame = createFactory(AsyncFrameClass);
+
+module.exports = StackTrace;