firefox-devtools · jasonLaster · Jul 10, 2017 · Jun 28, 2017 · Jul 6, 2017 · Jul 6, 2017
diff --git a/configs/firefox-panel.json b/configs/firefox-panel.json
@@ -17,6 +17,7 @@
     "codeCoverage": { "enabled": false },
     "codeFolding": { "enabled": false },
     "searchNav": { "enabled": true },
-    "collapseFrame": { "enabled": true }
+    "collapseFrame": { "enabled": true },
+    "columnBreakpoints": { "enabled": true }
   }
 }
diff --git a/src/actions/navigation.js b/src/actions/navigation.js
@@ -2,6 +2,7 @@ import { clearDocuments } from "../utils/editor";
 import { getSources } from "../reducers/sources";
 import { waitForMs } from "../utils/utils";
 import { newSources } from "./sources";
+import { clearSymbols } from "../utils/parser";
 
 /**
  * Redux actions for the navigation state
@@ -16,6 +17,7 @@ export function willNavigate(_, event) {
   return async function({ dispatch, getState, client, sourceMaps }: ThunkArgs) {
     await sourceMaps.clearSourceMaps();
     clearDocuments();
+    clearSymbols();
 
     dispatch(navigate(event.url));
   };

diff --git a/src/actions/tests/__snapshots__/ast.js.snap b/src/actions/tests/__snapshots__/ast.js.snap
@@ -65,6 +65,7 @@ Object {
 
 exports[`ast setSymbols when the source is loaded should be able to set symbols 1`] = `
 Object {
+  "callExpressions": Array [],
   "comments": Array [],
   "functions": Array [
     Object {

diff --git a/src/components/Editor/CallSite.css b/src/components/Editor/CallSite.css
@@ -0,0 +1,46 @@
+.call-site {
+  background: #f0f9ff;
+  cursor: pointer;
+  position: relative;
+}
+
+.call-site::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 2px);
+  border-bottom: 2px solid #aed3ef;
+}
+
+.call-site-bp {
+  cursor: pointer;
+  position: relative;
+}
+
+.debug-expression.call-site-bp, .call-site-bp {
+  background-color: #fce7e7;
+}
+
+.call-site-bp::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 2px);
+  border-bottom: 2px solid red;
+}
+
+.theme-dark .call-site {
+  background-color: #4b5462;
+}
+
+.theme-dark .call-site::before {
+  border-bottom-color: #5f78a4;
+}
+
+.theme-dark .call-site-bp {
+  background-color: #4b3f3f;
+}
+
+.theme-dark .call-site-bp::before {
+  border-bottom-color: #dd4d4d;
+}
diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js
@@ -0,0 +1,95 @@
+// @flow
+import { Component } from "react";
+
+import { markText } from "../../utils/editor";
+require("./CallSite.css");
+
+type MarkerType = {
+  clear: Function
+};
+
+type props = {
+  callSite: Object,
+  editor: Object,
+  breakpoint: Object,
+  showCallSite: Boolean
+};
+export default class CallSite extends Component {
+  props: props;
+
+  addCallSite: Function;
+  marker: ?MarkerType;
+
+  constructor() {
+    super();
+
+    this.marker = undefined;
+    const self: any = this;
+    self.addCallSite = this.addCallSite.bind(this);
+    self.clearCallSite = this.clearCallSite.bind(this);
+  }
+
+  addCallSite(nextProps: props) {
+    const { editor, callSite, breakpoint } = nextProps || this.props;
+    const className = !breakpoint ? "call-site" : "call-site-bp";
+    this.marker = markText(editor, className, callSite.location);
+  }
+
+  clearCallSite() {
+    if (this.marker) {
+      this.marker.clear();
+      this.marker = null;
+    }
+  }
+
+  shouldComponentUpdate(nextProps: any) {
+    return this.props.editor !== nextProps.editor;
+  }
+
+  componentDidMount() {
+    const { breakpoint, editor, showCallSite } = this.props;
+    if (!editor) {
+      return;
+    }
+
+    if (!breakpoint && !showCallSite) {
+      return;
+    }
+
+    this.addCallSite();
+  }
+
+  componentWillReceiveProps(nextProps: props) {
+    const { breakpoint, showCallSite } = this.props;
+
+    if (nextProps.breakpoint !== breakpoint) {
+      if (this.marker) {
+        this.marker.clear();
+      }
+      this.addCallSite(nextProps);
+    }
+
+    if (nextProps.showCallSite !== showCallSite) {
+      if (nextProps.showCallSite) {
+        if (!this.marker) {
+          this.addCallSite();
+        }
+      } else if (!nextProps.breakpoint) {
+        this.clearCallSite();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (!this.props.editor || !this.marker) {
+      return;
+    }
+    this.marker.clear();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+CallSite.displayName = "CallSite";