1 files changed, 110 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/Editor/HighlightCalls.js b/devtools/client/debugger/src/components/Editor/HighlightCalls.js
new file mode 100644
index 0000000000..0063f66c7a
--- /dev/null
+++ b/devtools/client/debugger/src/components/Editor/HighlightCalls.js
@@ -0,0 +1,110 @@
+/* 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 "react";
+import PropTypes from "prop-types";
+import { connect } from "../../utils/connect";
+import {
+  getHighlightedCalls,
+  getThreadContext,
+  getCurrentThread,
+} from "../../selectors";
+import { getSourceLocationFromMouseEvent } from "../../utils/editor";
+import actions from "../../actions";
+import "./HighlightCalls.css";
+
+export class HighlightCalls extends Component {
+  previousCalls = null;
+
+  static get propTypes() {
+    return {
+      continueToHere: PropTypes.func.isRequired,
+      cx: PropTypes.object.isRequired,
+      editor: PropTypes.object.isRequired,
+      highlightedCalls: PropTypes.array,
+      selectedSource: PropTypes.object,
+    };
+  }
+
+  componentDidUpdate() {
+    this.unhighlightFunctionCalls();
+    this.highlightFunctioCalls();
+  }
+
+  markCall = call => {
+    const { editor } = this.props;
+    const startLine = call.location.start.line - 1;
+    const endLine = call.location.end.line - 1;
+    const startColumn = call.location.start.column;
+    const endColumn = call.location.end.column;
+    const markedCall = editor.codeMirror.markText(
+      { line: startLine, ch: startColumn },
+      { line: endLine, ch: endColumn },
+      { className: "highlight-function-calls" }
+    );
+    return markedCall;
+  };
+
+  onClick = e => {
+    const { editor, selectedSource, cx, continueToHere } = this.props;
+
+    if (selectedSource) {
+      const location = getSourceLocationFromMouseEvent(
+        editor,
+        selectedSource,
+        e
+      );
+      continueToHere(cx, location);
+      editor.codeMirror.execCommand("singleSelection");
+      editor.codeMirror.execCommand("goGroupLeft");
+    }
+  };
+
+  highlightFunctioCalls() {
+    const { highlightedCalls } = this.props;
+
+    if (!highlightedCalls) {
+      return;
+    }
+
+    let markedCalls = [];
+    markedCalls = highlightedCalls.map(this.markCall);
+
+    const allMarkedElements = document.getElementsByClassName(
+      "highlight-function-calls"
+    );
+
+    for (let i = 0; i < allMarkedElements.length; i++) {
+      allMarkedElements[i].addEventListener("click", this.onClick);
+    }
+
+    this.previousCalls = markedCalls;
+  }
+
+  unhighlightFunctionCalls() {
+    if (!this.previousCalls) {
+      return;
+    }
+    this.previousCalls.forEach(call => call.clear());
+    this.previousCalls = null;
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const mapStateToProps = state => {
+  const thread = getCurrentThread(state);
+  return {
+    highlightedCalls: getHighlightedCalls(state, thread),
+    cx: getThreadContext(state),
+  };
+};
+
+const { continueToHere } = actions;
+
+const mapDispatchToProps = { continueToHere };
+
+export default connect(mapStateToProps, mapDispatchToProps)(HighlightCalls);