From 6df104bf4e575631cb67cd2caf32f4bdf15af05c Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Wed, 28 Jun 2017 19:49:21 -0400
Subject: [PATCH 01/10] call sites

---
 src/actions/navigation.js                     |   2 +
 src/components/Editor/CallSite.css            |  11 ++
 src/components/Editor/CallSite.js             |  94 +++++++++
 src/components/Editor/CallSites.js            | 180 ++++++++++++++++++
 src/components/Editor/ColumnBreakpoint.js     |  89 ---------
 src/components/Editor/index.js                |  47 ++---
 src/utils/breakpoint/index.js                 |  15 ++
 src/utils/editor/expression.js                |  13 +-
 src/utils/parser/getSymbols.js                |  27 ++-
 src/utils/parser/index.js                     |   1 +
 .../tests/__snapshots__/getSymbols.js.snap    |  24 +++
 src/utils/parser/tests/fixtures/call-sites.js |   2 +
 src/utils/parser/tests/getSymbols.js          |   6 +
 13 files changed, 378 insertions(+), 133 deletions(-)
 create mode 100644 src/components/Editor/CallSite.css
 create mode 100644 src/components/Editor/CallSite.js
 create mode 100644 src/components/Editor/CallSites.js
 delete mode 100644 src/components/Editor/ColumnBreakpoint.js
 create mode 100644 src/utils/parser/tests/fixtures/call-sites.js

diff --git a/src/actions/navigation.js b/src/actions/navigation.js
index e9341b78f9..7a28118f7d 100644
--- 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/components/Editor/CallSite.css b/src/components/Editor/CallSite.css
new file mode 100644
index 0000000000..2e52a8b1ee
--- /dev/null
+++ b/src/components/Editor/CallSite.css
@@ -0,0 +1,11 @@
+.call-site {
+  background: #f0f9ff;
+  height: calc(100% - 1px);
+  border-bottom: 2px solid #aed3ef;
+  cursor: pointer;
+}
+
+.call-site-bp {
+  border-bottom: 2px solid #f00000;
+  cursor: pointer;
+}
diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js
new file mode 100644
index 0000000000..28c2a23a7b
--- /dev/null
+++ b/src/components/Editor/CallSite.js
@@ -0,0 +1,94 @@
+// @flow
+import { Component } from "react";
+
+import { markText } from "../../utils/editor";
+require("./CallSite.css");
+
+type MarkerType = {
+  clear: Function
+};
+
+export default class CallSite extends Component {
+  props: {
+    callSite: Object,
+    editor: Object,
+    breakpoint: Object,
+    showCallSite: Boolean
+  };
+
+  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(props) {
+    const { editor, callSite, breakpoint } = 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(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    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(nextProps);
+        }
+      } else if (!nextProps.breakpoint) {
+        this.clearCallSite();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (!this.props.editor || !this.marker) {
+      return;
+    }
+    this.marker.clear();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+CallSite.displayName = "CallSite";
diff --git a/src/components/Editor/CallSites.js b/src/components/Editor/CallSites.js
new file mode 100644
index 0000000000..8bdca8ae66
--- /dev/null
+++ b/src/components/Editor/CallSites.js
@@ -0,0 +1,180 @@
+import { Component, createFactory, DOM as dom } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { isEnabled } from "devtools-config";
+
+import _CallSite from "./CallSite";
+const CallSite = createFactory(_CallSite);
+
+import {
+  getSelectedSource,
+  getSymbols,
+  getBreakpoint,
+  getSelectedLocation,
+  getBreakpointsForSource
+} from "../../selectors";
+
+import { findCallSiteBreakpoint } from "../../utils/breakpoint";
+import { getTokenLocation, breakpointAtLocation } from "../../utils/editor";
+
+import actions from "../../actions";
+
+let getSelectedBreakpoint;
+
+class CallSites extends Component {
+  props: {
+    symbols: Array<Symbol>,
+    editor: Object,
+    breakpoints: Map,
+    addBreakpoint: Function,
+    removeBreakpoint: Function,
+    selectedSource: Object,
+    selectedLocation: Object
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showCallSites: false
+    };
+  }
+
+  componentDidMount() {
+    const { editor } = this.props.editor;
+    const codeMirrorWrapper = editor.getWrapperElement();
+
+    codeMirrorWrapper.addEventListener("click", e => this.onTokenClick(e));
+    codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
+    codeMirrorWrapper.addEventListener("keyup", e => this.onKeyUp(e));
+  }
+
+  onKeyUp(e) {
+    if (e.key === "Alt") {
+      e.preventDefault();
+      this.setState({ showCallSites: false });
+    }
+  }
+
+  onKeyDown(e) {
+    if (e.key === "Alt") {
+      e.preventDefault();
+      this.setState({ showCallSites: true });
+    }
+  }
+
+  onTokenClick(e) {
+    const { target } = e;
+    const { editor } = this.props;
+
+    if (
+      !isEnabled("columnBreakpoints") ||
+      !e.altKey ||
+      (!target.classList.contains("call-site") &&
+        !target.classList.contains("call-site-bp"))
+    ) {
+      return;
+    }
+
+    const { line, column } = getTokenLocation(editor.codeMirror, target);
+
+    this.toggleBreakpoint(line, column - 2);
+  }
+
+  toggleBreakpoint(line, column = undefined) {
+    const {
+      selectedSource,
+      selectedLocation,
+      breakpoints,
+      addBreakpoint,
+      removeBreakpoint
+    } = this.props;
+
+    const bp = breakpointAtLocation(breakpoints, { line, column });
+
+    if ((bp && bp.loading) || !selectedLocation || !selectedSource) {
+      return;
+    }
+
+    const { sourceId } = selectedLocation;
+
+    if (bp) {
+      // NOTE: it's possible the breakpoint has slid to a column
+      column = column || bp.location.column;
+      removeBreakpoint({
+        sourceId: sourceId,
+        line: line + 1,
+        column
+      });
+    } else {
+      addBreakpoint(
+        {
+          sourceId: sourceId,
+          sourceUrl: selectedSource.get("url"),
+          line: line + 1,
+          column: column
+        },
+        // Pass in a function to get line text because the breakpoint
+        // may slide and it needs to compute the value at the new
+        // line.
+        { getTextForLine: l => getTextForLine(this.editor.codeMirror, l) }
+      );
+    }
+  }
+
+  render() {
+    const { editor, symbols } = this.props;
+    const { showCallSites } = this.state;
+    const callSites = symbols.callExpressions;
+    let sites;
+    if (!callSites) {
+      return null;
+    }
+
+    callSites = callSites.filter(
+      callSite => callSite.location.start.line === callSite.location.end.line
+    );
+
+    editor.codeMirror.operation(() => {
+      sites = dom.div(
+        {},
+        callSites.map((callSite, index) => {
+          const { location } = callSite;
+
+          return CallSite({
+            key: index,
+            callSite,
+            editor,
+            breakpoint: findCallSiteBreakpoint(location, getSelectedBreakpoint),
+            showCallSite: showCallSites
+          });
+        })
+      );
+    });
+    return sites;
+  }
+}
+
+export default connect(
+  state => {
+    const selectedLocation = getSelectedLocation(state);
+    const selectedSource = getSelectedSource(state);
+    const sourceId = selectedLocation && selectedLocation.sourceId;
+    const source = selectedSource && selectedSource.toJS();
+
+    getSelectedBreakpoint = location =>
+      getBreakpoint(state, {
+        line: location.line,
+        column: location.column,
+        sourceId: source.id,
+        sourceUrl: source.url
+      });
+
+    return {
+      selectedLocation,
+      selectedSource,
+      symbols: getSymbols(state, source),
+      breakpoints: getBreakpointsForSource(state, sourceId || "")
+    };
+  },
+  dispatch => bindActionCreators(actions, dispatch)
+)(CallSites);
diff --git a/src/components/Editor/ColumnBreakpoint.js b/src/components/Editor/ColumnBreakpoint.js
deleted file mode 100644
index dab79a9aa3..0000000000
--- a/src/components/Editor/ColumnBreakpoint.js
+++ /dev/null
@@ -1,89 +0,0 @@
-// @flow
-import { Component } from "react";
-import { isEnabled } from "devtools-config";
-import ReactDOM from "react-dom";
-import Svg from "../shared/Svg";
-import classnames from "classnames";
-
-const breakpointSvg = document.createElement("span");
-ReactDOM.render(Svg("column-breakpoint"), breakpointSvg);
-
-type BookMarkType = {
-  clear: Function
-};
-
-function makeBookmark(isDisabled: boolean) {
-  const bp = breakpointSvg.cloneNode(true);
-  bp.className = classnames("editor column-breakpoint", {
-    "breakpoint-disabled": isDisabled
-  });
-
-  return bp;
-}
-
-class ColumnBreakpoint extends Component {
-  props: {
-    breakpoint: Object,
-    editor: Object
-  };
-
-  addBreakpoint: Function;
-  bookmark: ?BookMarkType;
-
-  constructor() {
-    super();
-
-    this.bookmark = undefined;
-    const self: any = this;
-    self.addBreakpoint = this.addBreakpoint.bind(this);
-  }
-
-  addBreakpoint() {
-    if (!isEnabled("columnBreakpoints")) {
-      return;
-    }
-
-    const bp = this.props.breakpoint;
-    const line = bp.location.line - 1;
-    const column = bp.location.column;
-    const editor = this.props.editor;
-
-    const widget = makeBookmark(bp.disabled);
-    const bookmark = editor.setBookmark({ line, ch: column }, { widget });
-    this.bookmark = bookmark;
-  }
-  shouldComponentUpdate(nextProps: any) {
-    return (
-      this.props.editor !== nextProps.editor ||
-      this.props.breakpoint.disabled !== nextProps.breakpoint.disabled ||
-      this.props.breakpoint.condition !== nextProps.breakpoint.condition
-    );
-  }
-  componentDidMount() {
-    if (!this.props.editor) {
-      return;
-    }
-
-    this.addBreakpoint();
-  }
-  componentDidUpdate() {
-    if (this.bookmark) {
-      this.bookmark.clear();
-    }
-    this.addBreakpoint();
-  }
-  componentWillUnmount() {
-    if (!this.props.editor || !this.bookmark) {
-      return;
-    }
-
-    this.bookmark.clear();
-  }
-  render() {
-    return null;
-  }
-}
-
-ColumnBreakpoint.displayName = "ColumnBreakpoint";
-
-export default ColumnBreakpoint;
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
index 65c58861a3..0a8708c054 100644
--- a/src/components/Editor/index.js
+++ b/src/components/Editor/index.js
@@ -52,12 +52,12 @@ const Preview = createFactory(_Preview);
 import _Breakpoint from "./Breakpoint";
 const Breakpoint = createFactory(_Breakpoint);
 
-import _ColumnBreakpoint from "./ColumnBreakpoint";
-const ColumnBreakpoint = createFactory(_ColumnBreakpoint);
-
 import _HitMarker from "./HitMarker";
 const HitMarker = createFactory(_HitMarker);
 
+import _CallSites from "./CallSites";
+const CallSites = createFactory(_CallSites);
+
 import {
   getDocument,
   setDocument,
@@ -70,7 +70,6 @@ import {
   getCursorLine,
   resizeBreakpointGutter,
   traverseResults,
-  getTokenLocation,
   updateSelection,
   markText
 } from "../../utils/editor";
@@ -185,9 +184,7 @@ class Editor extends PureComponent {
 
     // Set code editor wrapper to be focusable
     codeMirrorWrapper.tabIndex = 0;
-    codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
     codeMirrorWrapper.addEventListener("mouseover", e => this.onMouseOver(e));
-    codeMirrorWrapper.addEventListener("click", e => this.onTokenClick(e));
 
     const toggleFoldMarkerVisibility = e => {
       if (node instanceof HTMLElement) {
@@ -333,20 +330,6 @@ class Editor extends PureComponent {
     this.clearPreviewSelection();
   }
 
-  onTokenClick(e) {
-    const { target } = e;
-    if (
-      !isEnabled("columnBreakpoints") ||
-      !e.altKey ||
-      !target.parentElement.closest(".CodeMirror-line")
-    ) {
-      return;
-    }
-
-    const { line, column } = getTokenLocation(this.editor.codeMirror, target);
-    this.toggleBreakpoint(line - 1, column - 1);
-  }
-
   onSearchAgain(_, e) {
     const { query, searchModifiers } = this.props;
     const { editor: { codeMirror } } = this.editor;
@@ -683,18 +666,7 @@ class Editor extends PureComponent {
         })
       );
 
-    const columnBreakpointBookmarks = breakpoints
-      .valueSeq()
-      .filter(b => (isEnabled("columnBreakpoints") ? b.location.column : false))
-      .map(bp =>
-        ColumnBreakpoint({
-          key: makeLocationId(bp.location),
-          breakpoint: bp,
-          editor: this.editor && this.editor.codeMirror
-        })
-      );
-
-    return breakpointMarkers.concat(columnBreakpointBookmarks);
+    return breakpointMarkers;
   }
 
   renderHitCounts() {
@@ -791,6 +763,14 @@ class Editor extends PureComponent {
     );
   }
 
+  renderCallSites() {
+    const editor = this.editor;
+    if (!editor || !isEnabled("columnBreakpoints")) {
+      return null;
+    }
+    return CallSites({ editor });
+  }
+
   render() {
     const {
       selectSource,
@@ -826,7 +806,8 @@ class Editor extends PureComponent {
       this.renderInScopeLines(),
       this.renderHitCounts(),
       Footer({ editor: this.editor, horizontal }),
-      this.renderPreview()
+      this.renderPreview(),
+      this.renderCallSites()
     );
   }
 }
diff --git a/src/utils/breakpoint/index.js b/src/utils/breakpoint/index.js
index a4315c067c..0f94cff1fc 100644
--- a/src/utils/breakpoint/index.js
+++ b/src/utils/breakpoint/index.js
@@ -40,3 +40,18 @@ export function equalizeLocationColumn(location, referenceLocation) {
   }
   return { ...location, column: undefined };
 }
+
+// Search through the column range to see if any breakpoints exist
+export function findCallSiteBreakpoint(location, getSelectedBreakpoint) {
+  const { line, column } = location.start;
+
+  column--;
+  while (column < location.end.column) {
+    const breakpoint = getSelectedBreakpoint({ line, column });
+    if (breakpoint) {
+      return breakpoint;
+    }
+    column++;
+  }
+  return null;
+}
diff --git a/src/utils/editor/expression.js b/src/utils/editor/expression.js
index c9e1d5af19..b160d7c473 100644
--- a/src/utils/editor/expression.js
+++ b/src/utils/editor/expression.js
@@ -2,14 +2,15 @@
 
 import isEqual from "lodash/isEqual";
 
-const lineOffset = 1;
-
-export function getTokenLocation(codeMirror: any, tokenEl: HTMLElement) {
-  const { left, top } = tokenEl.getBoundingClientRect();
-  const { line, ch } = codeMirror.coordsChar({ left, top });
+export function getTokenLocation(codeMirror: any, tokenEl) {
+  const { left, top, width, height } = tokenEl.getBoundingClientRect();
+  const { line, ch } = codeMirror.coordsChar({
+    left: left + width / 2,
+    top: top + height / 2
+  });
 
   return {
-    line: line + lineOffset,
+    line: line,
     column: ch
   };
 }
diff --git a/src/utils/parser/getSymbols.js b/src/utils/parser/getSymbols.js
index 2bf0e701e4..074d3d93ff 100644
--- a/src/utils/parser/getSymbols.js
+++ b/src/utils/parser/getSymbols.js
@@ -8,7 +8,7 @@ import getFunctionName from "./utils/getFunctionName";
 
 import type { Source } from "debugger-html";
 import type { NodePath, Node, Location as BabelLocation } from "babel-traverse";
-const symbolDeclarations = new Map();
+let symbolDeclarations = new Map();
 
 export type SymbolDeclaration = {|
   name: string,
@@ -73,6 +73,7 @@ function extractSymbols(source: Source) {
   const functions = [];
   const variables = [];
   const memberExpressions = [];
+  const callExpressions = [];
   const objectProperties = [];
   const identifiers = [];
 
@@ -117,6 +118,17 @@ function extractSymbols(source: Source) {
         });
       }
 
+      if (t.isCallExpression(path)) {
+        const callee = path.node.callee;
+        if (!t.isMemberExpression(callee)) {
+          const { start, end, identifierName } = callee.loc;
+          callExpressions.push({
+            name: identifierName,
+            location: { start, end }
+          });
+        }
+      }
+
       if (t.isIdentifier(path)) {
         const { start, end } = path.node.loc;
 
@@ -146,6 +158,7 @@ function extractSymbols(source: Source) {
   return {
     functions,
     variables,
+    callExpressions,
     memberExpressions,
     objectProperties,
     comments,
@@ -177,10 +190,6 @@ function extendSnippet(
   const prevArray = t.isArrayExpression(prevPath);
   const array = t.isArrayExpression(path);
 
-  // if (!name) {
-  //   return expression;
-  // }
-
   if (expression === "") {
     if (computed) {
       return `[${name}]`;
@@ -316,6 +325,7 @@ export function formatSymbols(source: Source) {
   const {
     objectProperties,
     memberExpressions,
+    callExpressions,
     identifiers,
     variables
   } = getSymbols(source);
@@ -348,6 +358,9 @@ export function formatSymbols(source: Source) {
     "member expressions",
     memberExpressions.map(summarize).join("\n"),
 
+    "call expressions",
+    callExpressions.map(summarize).join("\n"),
+
     "identifiers",
     identifiers.map(summarize).join("\n"),
 
@@ -355,3 +368,7 @@ export function formatSymbols(source: Source) {
     variables.map(summarize).join("\n")
   ].join("\n");
 }
+
+export function clearSymbols() {
+  symbolDeclarations = new Map();
+}
diff --git a/src/utils/parser/index.js b/src/utils/parser/index.js
index 0da0fc30e5..3307bc1b2e 100644
--- a/src/utils/parser/index.js
+++ b/src/utils/parser/index.js
@@ -11,6 +11,7 @@ export const getClosestExpression = dispatcher.task("getClosestExpression");
 export const getSymbols = dispatcher.task("getSymbols");
 export const getVariablesInScope = dispatcher.task("getVariablesInScope");
 export const getOutOfScopeLocations = dispatcher.task("getOutOfScopeLocations");
+export const clearSymbols = dispatcher.task("clearSymbols");
 
 export type { SymbolDeclaration, SymbolDeclarations } from "./getSymbols";
 export type { AstLocation } from "./types";
diff --git a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
index cd59774634..06fed49cd2 100644
--- a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
+++ b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
@@ -56,6 +56,30 @@ variables
 [(28, 12), (28, 18)]   person "
 `;
 
+exports[`Parser.getSymbols call sites 1`] = `
+"properties
+
+member expressions
+[(2, 8), (2, 9)] [(2, 0), (2, 9)]  c 
+[(2, 4), (2, 5)] [(2, 0), (2, 5)]  b 
+call expressions
+   undefined 
+   undefined 
+   undefined 
+   undefined 
+   undefined 
+   undefined 
+identifiers
+[(1, 0), (1, 1)]  a a 
+[(1, 2), (1, 3)]  b b 
+[(1, 7), (1, 8)]  c c 
+[(2, 0), (2, 1)]  a a 
+[(2, 4), (2, 5)]  b b 
+[(2, 8), (2, 9)]  c c 
+variables
+"
+`;
+
 exports[`Parser.getSymbols class 1`] = `
 "properties
 
diff --git a/src/utils/parser/tests/fixtures/call-sites.js b/src/utils/parser/tests/fixtures/call-sites.js
new file mode 100644
index 0000000000..c592a831c5
--- /dev/null
+++ b/src/utils/parser/tests/fixtures/call-sites.js
@@ -0,0 +1,2 @@
+aaa(bbb(), ccc());
+dddd().eee().ffff();
diff --git a/src/utils/parser/tests/getSymbols.js b/src/utils/parser/tests/getSymbols.js
index 0d4231504e..45c0d688ae 100644
--- a/src/utils/parser/tests/getSymbols.js
+++ b/src/utils/parser/tests/getSymbols.js
@@ -39,6 +39,12 @@ describe("Parser.getSymbols", () => {
     expect(symbols).toMatchSnapshot();
   });
 
+  fit("call sites", () => {
+    const symbols = formatSymbols(getSource("call-sites"));
+    console.log(symbols);
+    // expect(symbols).toMatchSnapshot();
+  });
+
   it("finds symbols in an html file", () => {
     const symbols = formatSymbols(getSource("parseScriptTags", "html"));
     expect(symbols).toMatchSnapshot();

From 2f2fb673a285f9ef07168737b52d0b4327a29b84 Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Thu, 6 Jul 2017 15:20:03 -0400
Subject: [PATCH 02/10] clean up the tests

---
 .../tests/__snapshots__/getSymbols.js.snap    | 45 +++++++++++++------
 src/utils/parser/tests/getSymbols.js          |  5 +--
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
index 06fed49cd2..b70be1b47e 100644
--- a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
+++ b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
@@ -10,6 +10,8 @@ member expressions
 [(21, 4), (21, 17)] [(21, 0), (21, 17)] Obj.otherProperty otherProperty 
 [(25, 9), (25, 16)] [(25, 4), (25, 16)] this.awesome awesome 
 [(29, 12), (29, 15)] [(29, 4), (29, 15)] console.log log 
+call expressions
+
 identifiers
 [(1, 6), (1, 15)]  TIME TIME 
 [(1, 6), (1, 10)]  TIME TIME 
@@ -60,22 +62,20 @@ exports[`Parser.getSymbols call sites 1`] = `
 "properties
 
 member expressions
-[(2, 8), (2, 9)] [(2, 0), (2, 9)]  c 
-[(2, 4), (2, 5)] [(2, 0), (2, 5)]  b 
+[(2, 13), (2, 17)] [(2, 0), (2, 17)]  ffff 
+[(2, 7), (2, 10)] [(2, 0), (2, 10)]  eee 
 call expressions
-   undefined 
-   undefined 
-   undefined 
-   undefined 
-   undefined 
-   undefined 
+[(1, 0), (1, 3)]   aaa 
+[(1, 4), (1, 7)]   bbb 
+[(1, 11), (1, 14)]   ccc 
+[(2, 0), (2, 4)]   dddd 
 identifiers
-[(1, 0), (1, 1)]  a a 
-[(1, 2), (1, 3)]  b b 
-[(1, 7), (1, 8)]  c c 
-[(2, 0), (2, 1)]  a a 
-[(2, 4), (2, 5)]  b b 
-[(2, 8), (2, 9)]  c c 
+[(1, 0), (1, 3)]  aaa aaa 
+[(1, 4), (1, 7)]  bbb bbb 
+[(1, 11), (1, 14)]  ccc ccc 
+[(2, 0), (2, 4)]  dddd dddd 
+[(2, 7), (2, 10)]  eee eee 
+[(2, 13), (2, 17)]  ffff ffff 
 variables
 "
 `;
@@ -86,6 +86,8 @@ exports[`Parser.getSymbols class 1`] = `
 member expressions
 [(3, 9), (3, 12)] [(3, 4), (3, 12)] this.foo foo 
 [(7, 12), (7, 15)] [(7, 4), (7, 15)] console.log log 
+call expressions
+
 identifiers
 [(1, 6), (1, 10)]  Test Test 
 [(2, 2), (2, 13)]  constructor constructor 
@@ -149,6 +151,9 @@ member expressions
 [(27, 29), (27, 43)] [(27, 13), (27, 43)]  secondProperty 
 [(27, 27), (27, 28)] [(27, 13), (27, 28)]  c 
 [(27, 18), (27, 24)] [(27, 13), (27, 24)] obj2.doEvil doEvil 
+call expressions
+[(22, 21), (22, 28)]   compute 
+[(23, 21), (23, 28)]   compute 
 identifiers
 [(1, 6), (1, 27)]  obj obj 
 [(1, 6), (1, 9)]  obj obj 
@@ -288,6 +293,9 @@ member expressions
 [(26, 4), (26, 7)] [(25, 19), (26, 7)] map map 
 [(30, 15), (30, 24)] [(30, 2), (30, 24)] globalObject.greetings greetings 
 [(38, 11), (38, 14)] [(38, 3), (38, 14)] console.log log 
+call expressions
+[(36, 3), (39, 3)]   undefined 
+[(37, 20), (37, 28)]   sayHello 
 identifiers
 [(4, 6), (7, 3)]  globalObject globalObject 
 [(4, 6), (4, 18)]  globalObject globalObject 
@@ -336,6 +344,8 @@ exports[`Parser.getSymbols func 1`] = `
 
 member expressions
 
+call expressions
+[(7, 1), (9, 1)]   undefined 
 identifiers
 [(1, 9), (1, 15)]  square square 
 [(1, 16), (1, 17)]  n n 
@@ -351,6 +361,9 @@ exports[`Parser.getSymbols math 1`] = `
 
 member expressions
 
+call expressions
+[(5, 14), (5, 20)]   square 
+[(6, 15), (6, 22)]   squaare 
 identifiers
 [(1, 9), (1, 13)]  math math 
 [(1, 14), (1, 15)]  n n 
@@ -386,6 +399,8 @@ member expressions
 [(5, 31), (5, 37)] [(5, 17), (5, 37)] Backbone.View.extend extend 
 [(5, 26), (5, 30)] [(5, 17), (5, 30)] Backbone.View View 
 [(9, 12), (9, 15)] [(9, 4), (9, 15)] console.log log 
+call expressions
+
 identifiers
 [(1, 6), (1, 25)]  foo foo 
 [(1, 6), (1, 9)]  foo foo 
@@ -417,6 +432,8 @@ exports[`Parser.getSymbols var 1`] = `
 
 member expressions
 
+call expressions
+
 identifiers
 [(1, 4), (1, 11)]  foo foo 
 [(1, 4), (1, 7)]  foo foo 
diff --git a/src/utils/parser/tests/getSymbols.js b/src/utils/parser/tests/getSymbols.js
index 45c0d688ae..af38c7df9e 100644
--- a/src/utils/parser/tests/getSymbols.js
+++ b/src/utils/parser/tests/getSymbols.js
@@ -39,10 +39,9 @@ describe("Parser.getSymbols", () => {
     expect(symbols).toMatchSnapshot();
   });
 
-  fit("call sites", () => {
+  it("call sites", () => {
     const symbols = formatSymbols(getSource("call-sites"));
-    console.log(symbols);
-    // expect(symbols).toMatchSnapshot();
+    expect(symbols).toMatchSnapshot();
   });
 
   it("finds symbols in an html file", () => {

From e91765222bd7f028795dd206d64a92d43e69a182 Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Thu, 6 Jul 2017 15:30:56 -0400
Subject: [PATCH 03/10] style

---
 src/components/Editor/CallSite.css | 24 +++++++++++++++++++++---
 src/components/Editor/CallSites.js | 16 ++++++++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/Editor/CallSite.css b/src/components/Editor/CallSite.css
index 2e52a8b1ee..e7131eb4fe 100644
--- a/src/components/Editor/CallSite.css
+++ b/src/components/Editor/CallSite.css
@@ -1,11 +1,29 @@
 .call-site {
   background: #f0f9ff;
-  height: calc(100% - 1px);
-  border-bottom: 2px solid #aed3ef;
   cursor: pointer;
+  position: relative;
+}
+
+.call-site::before {
+  content: " ";
+  position: absolute;
+  background: #aed3ef;
+  width: 100%;
+  height: 2px;
+  bottom: 0px;
 }
 
 .call-site-bp {
-  border-bottom: 2px solid #f00000;
   cursor: pointer;
+  position: relative;
+  background-color: #fce7e7;
+}
+
+.call-site-bp::before {
+  content: " ";
+  position: absolute;
+  background: #f00000;
+  width: 100%;
+  height: 2px;
+  bottom: 0px;
 }
diff --git a/src/components/Editor/CallSites.js b/src/components/Editor/CallSites.js
index 8bdca8ae66..fad022d89d 100644
--- a/src/components/Editor/CallSites.js
+++ b/src/components/Editor/CallSites.js
@@ -34,6 +34,9 @@ class CallSites extends Component {
 
   constructor(props) {
     super(props);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+
     this.state = {
       showCallSites: false
     };
@@ -44,8 +47,17 @@ class CallSites extends Component {
     const codeMirrorWrapper = editor.getWrapperElement();
 
     codeMirrorWrapper.addEventListener("click", e => this.onTokenClick(e));
-    codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
-    codeMirrorWrapper.addEventListener("keyup", e => this.onKeyUp(e));
+    document.body.addEventListener("keydown", this.onKeyDown);
+    document.body.addEventListener("keyup", this.onKeyUp);
+  }
+
+  componentDidUnmount() {
+    const { editor } = this.props.editor;
+    const codeMirrorWrapper = editor.getWrapperElement();
+
+    codeMirrorWrapper.addEventListener("click", e => this.onTokenClick(e));
+    document.body.removeEventListener("keydown", e => this.onKeyDown);
+    document.body.removeEventListener("keyup", this.onKeyUp);
   }
 
   onKeyUp(e) {

From 385ec9be3a354188c7986a30ff62549a86fac19e Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Thu, 6 Jul 2017 17:10:49 -0400
Subject: [PATCH 04/10] touchups

---
 src/actions/tests/__snapshots__/ast.js.snap |  1 +
 src/components/Editor/CallSite.css          | 10 ++-
 src/components/Editor/CallSite.js           | 25 +++---
 src/components/Editor/CallSites.js          | 89 +++++++++++++--------
 src/components/Editor/index.js              |  2 +-
 src/utils/breakpoint/index.js               | 15 ----
 src/utils/editor/expression.js              |  2 +-
 src/utils/parser/getSymbols.js              |  1 +
 8 files changed, 77 insertions(+), 68 deletions(-)

diff --git a/src/actions/tests/__snapshots__/ast.js.snap b/src/actions/tests/__snapshots__/ast.js.snap
index bc1659f2fc..240efb90ad 100644
--- 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
index e7131eb4fe..31eac4e59e 100644
--- a/src/components/Editor/CallSite.css
+++ b/src/components/Editor/CallSite.css
@@ -16,14 +16,16 @@
 .call-site-bp {
   cursor: pointer;
   position: relative;
+}
+
+.debug-expression.call-site-bp, .call-site-bp {
   background-color: #fce7e7;
 }
 
 .call-site-bp::before {
-  content: " ";
+  content: "";
   position: absolute;
-  background: #f00000;
   width: 100%;
-  height: 2px;
-  bottom: 0px;
+  height: calc(100% - 2px);
+  border-bottom: 2px solid red;
 }
diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js
index 28c2a23a7b..d4bcf968ad 100644
--- a/src/components/Editor/CallSite.js
+++ b/src/components/Editor/CallSite.js
@@ -8,13 +8,14 @@ type MarkerType = {
   clear: Function
 };
 
+type props = {
+  callSite: Object,
+  editor: Object,
+  breakpoint: Object,
+  showCallSite: Boolean
+};
 export default class CallSite extends Component {
-  props: {
-    callSite: Object,
-    editor: Object,
-    breakpoint: Object,
-    showCallSite: Boolean
-  };
+  props: props;
 
   addCallSite: Function;
   marker: ?MarkerType;
@@ -28,8 +29,8 @@ export default class CallSite extends Component {
     self.clearCallSite = this.clearCallSite.bind(this);
   }
 
-  addCallSite(props) {
-    const { editor, callSite, breakpoint } = props;
+  addCallSite() {
+    const { editor, callSite, breakpoint } = this.props;
     const className = !breakpoint ? "call-site" : "call-site-bp";
     this.marker = markText(editor, className, callSite.location);
   }
@@ -55,23 +56,23 @@ export default class CallSite extends Component {
       return;
     }
 
-    this.addCallSite(this.props);
+    this.addCallSite();
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: props) {
     const { breakpoint, showCallSite } = this.props;
 
     if (nextProps.breakpoint !== breakpoint) {
       if (this.marker) {
         this.marker.clear();
       }
-      this.addCallSite(nextProps);
+      this.addCallSite();
     }
 
     if (nextProps.showCallSite !== showCallSite) {
       if (nextProps.showCallSite) {
         if (!this.marker) {
-          this.addCallSite(nextProps);
+          this.addCallSite();
         }
       } else if (!nextProps.breakpoint) {
         this.clearCallSite();
diff --git a/src/components/Editor/CallSites.js b/src/components/Editor/CallSites.js
index fad022d89d..af32dd5f83 100644
--- a/src/components/Editor/CallSites.js
+++ b/src/components/Editor/CallSites.js
@@ -3,27 +3,27 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { isEnabled } from "devtools-config";
 
+import range from "lodash/range";
+import keyBy from "lodash/keyBy";
+
 import _CallSite from "./CallSite";
 const CallSite = createFactory(_CallSite);
 
 import {
   getSelectedSource,
   getSymbols,
-  getBreakpoint,
   getSelectedLocation,
   getBreakpointsForSource
 } from "../../selectors";
 
-import { findCallSiteBreakpoint } from "../../utils/breakpoint";
 import { getTokenLocation, breakpointAtLocation } from "../../utils/editor";
 
 import actions from "../../actions";
 
-let getSelectedBreakpoint;
-
 class CallSites extends Component {
   props: {
     symbols: Array<Symbol>,
+    callSites: Array<Symbol>,
     editor: Object,
     breakpoints: Map,
     addBreakpoint: Function,
@@ -51,7 +51,7 @@ class CallSites extends Component {
     document.body.addEventListener("keyup", this.onKeyUp);
   }
 
-  componentDidUnmount() {
+  componentDidUnMount() {
     const { editor } = this.props.editor;
     const codeMirrorWrapper = editor.getWrapperElement();
 
@@ -118,45 +118,32 @@ class CallSites extends Component {
         column
       });
     } else {
-      addBreakpoint(
-        {
-          sourceId: sourceId,
-          sourceUrl: selectedSource.get("url"),
-          line: line + 1,
-          column: column
-        },
-        // Pass in a function to get line text because the breakpoint
-        // may slide and it needs to compute the value at the new
-        // line.
-        { getTextForLine: l => getTextForLine(this.editor.codeMirror, l) }
-      );
+      addBreakpoint({
+        sourceId: sourceId,
+        sourceUrl: selectedSource.get("url"),
+        line: line + 1,
+        column: column
+      });
     }
   }
 
   render() {
-    const { editor, symbols } = this.props;
+    const { editor, callSites } = this.props;
     const { showCallSites } = this.state;
-    const callSites = symbols.callExpressions;
     let sites;
     if (!callSites) {
       return null;
     }
 
-    callSites = callSites.filter(
-      callSite => callSite.location.start.line === callSite.location.end.line
-    );
-
     editor.codeMirror.operation(() => {
       sites = dom.div(
         {},
         callSites.map((callSite, index) => {
-          const { location } = callSite;
-
           return CallSite({
             key: index,
             callSite,
             editor,
-            breakpoint: findCallSiteBreakpoint(location, getSelectedBreakpoint),
+            breakpoint: callSite.breakpoint,
             showCallSite: showCallSites
           });
         })
@@ -166,6 +153,43 @@ class CallSites extends Component {
   }
 }
 
+CallSites.displayName = "CallSites";
+function getCallSites(symbols, breakpoints) {
+  if (!symbols || !symbols.callExpressions) {
+    return;
+  }
+
+  const callSites = symbols.callExpressions;
+
+  // NOTE: we create a breakpoint map keyed on location
+  // to speed up the lookups. Hopefully we'll fix the
+  // inconsistency with column offsets so that we can expect
+  // a breakpoint to be added at the beginning of a call expression.
+  const bpLocationMap = keyBy(breakpoints.valueSeq().toJS(), ({ location }) =>
+    locationKey(location)
+  );
+
+  function locationKey({ line, column }) {
+    return `${line}/${column}`;
+  }
+
+  function findBreakpoint(callSite) {
+    const { location: { start, end } } = callSite;
+
+    const breakpointId = range(start.column - 1, end.column)
+      .map(column => locationKey({ line: start.line, column }))
+      .find(key => bpLocationMap[key]);
+
+    if (breakpointId) {
+      return bpLocationMap[breakpointId];
+    }
+  }
+
+  return callSites
+    .filter(({ location }) => location.start.line === location.end.line)
+    .map(callSite => ({ ...callSite, breakpoint: findBreakpoint(callSite) }));
+}
+
 export default connect(
   state => {
     const selectedLocation = getSelectedLocation(state);
@@ -173,19 +197,14 @@ export default connect(
     const sourceId = selectedLocation && selectedLocation.sourceId;
     const source = selectedSource && selectedSource.toJS();
 
-    getSelectedBreakpoint = location =>
-      getBreakpoint(state, {
-        line: location.line,
-        column: location.column,
-        sourceId: source.id,
-        sourceUrl: source.url
-      });
+    const symbols = getSymbols(state, source);
+    const breakpoints = getBreakpointsForSource(state, sourceId);
 
     return {
       selectedLocation,
       selectedSource,
-      symbols: getSymbols(state, source),
-      breakpoints: getBreakpointsForSource(state, sourceId || "")
+      callSites: getCallSites(symbols, breakpoints),
+      breakpoints: breakpoints
     };
   },
   dispatch => bindActionCreators(actions, dispatch)
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
index 0a8708c054..e6461d5dae 100644
--- a/src/components/Editor/index.js
+++ b/src/components/Editor/index.js
@@ -866,7 +866,7 @@ export default connect(
       highlightedLineRange: getHighlightedLineRange(state),
       searchOn: getActiveSearchState(state) === "file",
       loadedObjects: getLoadedObjects(state),
-      breakpoints: getBreakpointsForSource(state, sourceId || ""),
+      breakpoints: getBreakpointsForSource(state, sourceId),
       hitCount: getHitCountForSource(state, sourceId),
       selectedFrame: getSelectedFrame(state),
       pauseData: getPause(state),
diff --git a/src/utils/breakpoint/index.js b/src/utils/breakpoint/index.js
index 0f94cff1fc..a4315c067c 100644
--- a/src/utils/breakpoint/index.js
+++ b/src/utils/breakpoint/index.js
@@ -40,18 +40,3 @@ export function equalizeLocationColumn(location, referenceLocation) {
   }
   return { ...location, column: undefined };
 }
-
-// Search through the column range to see if any breakpoints exist
-export function findCallSiteBreakpoint(location, getSelectedBreakpoint) {
-  const { line, column } = location.start;
-
-  column--;
-  while (column < location.end.column) {
-    const breakpoint = getSelectedBreakpoint({ line, column });
-    if (breakpoint) {
-      return breakpoint;
-    }
-    column++;
-  }
-  return null;
-}
diff --git a/src/utils/editor/expression.js b/src/utils/editor/expression.js
index b160d7c473..8b86c1482a 100644
--- a/src/utils/editor/expression.js
+++ b/src/utils/editor/expression.js
@@ -2,7 +2,7 @@
 
 import isEqual from "lodash/isEqual";
 
-export function getTokenLocation(codeMirror: any, tokenEl) {
+export function getTokenLocation(codeMirror: any, tokenEl: HTMLElement) {
   const { left, top, width, height } = tokenEl.getBoundingClientRect();
   const { line, ch } = codeMirror.coordsChar({
     left: left + width / 2,
diff --git a/src/utils/parser/getSymbols.js b/src/utils/parser/getSymbols.js
index 074d3d93ff..38198c3e8d 100644
--- a/src/utils/parser/getSymbols.js
+++ b/src/utils/parser/getSymbols.js
@@ -27,6 +27,7 @@ export type SymbolDeclarations = {
   functions: Array<SymbolDeclaration>,
   variables: Array<SymbolDeclaration>,
   memberExpressions: Array<SymbolDeclaration>,
+  callExpressions: Array<SymbolDeclaration>,
   objectProperties: Array<SymbolDeclaration>,
   identifiers: Array<SymbolDeclaration>,
   comments: Array<SymbolDeclaration>

From 72abc532c71fbf2d37a24409b64e0b0a882081f2 Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Thu, 6 Jul 2017 18:34:05 -0400
Subject: [PATCH 05/10] tweaks

---
 configs/firefox-panel.json         |  3 ++-
 src/components/Editor/CallSite.css | 23 +++++++++++++++++++----
 src/components/Editor/CallSites.js | 27 +++++++++++++++++++++------
 src/components/Editor/index.js     |  2 ++
 4 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/configs/firefox-panel.json b/configs/firefox-panel.json
index 78608fdb9e..e8337d662f 100644
--- 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/components/Editor/CallSite.css b/src/components/Editor/CallSite.css
index 31eac4e59e..165556a182 100644
--- a/src/components/Editor/CallSite.css
+++ b/src/components/Editor/CallSite.css
@@ -5,12 +5,11 @@
 }
 
 .call-site::before {
-  content: " ";
+  content: "";
   position: absolute;
-  background: #aed3ef;
   width: 100%;
-  height: 2px;
-  bottom: 0px;
+  height: calc(100% - 2px);
+  border-bottom: 2px solid #aed3ef;
 }
 
 .call-site-bp {
@@ -29,3 +28,19 @@
   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/CallSites.js b/src/components/Editor/CallSites.js
index af32dd5f83..60089395c1 100644
--- a/src/components/Editor/CallSites.js
+++ b/src/components/Editor/CallSites.js
@@ -5,6 +5,8 @@ import { isEnabled } from "devtools-config";
 
 import range from "lodash/range";
 import keyBy from "lodash/keyBy";
+import find from "lodash/find";
+import isEqual from "lodash/isEqual";
 
 import _CallSite from "./CallSite";
 const CallSite = createFactory(_CallSite);
@@ -20,6 +22,12 @@ import { getTokenLocation, breakpointAtLocation } from "../../utils/editor";
 
 import actions from "../../actions";
 
+function getCallSiteAtLocation(callSites, location) {
+  return find(callSites, callSite =>
+    isEqual(callSite.location.start, location)
+  );
+}
+
 class CallSites extends Component {
   props: {
     symbols: Array<Symbol>,
@@ -43,8 +51,8 @@ class CallSites extends Component {
   }
 
   componentDidMount() {
-    const { editor } = this.props.editor;
-    const codeMirrorWrapper = editor.getWrapperElement();
+    const { editor } = this.props;
+    const codeMirrorWrapper = editor.codeMirror.getWrapperElement();
 
     codeMirrorWrapper.addEventListener("click", e => this.onTokenClick(e));
     document.body.addEventListener("keydown", this.onKeyDown);
@@ -52,8 +60,8 @@ class CallSites extends Component {
   }
 
   componentDidUnMount() {
-    const { editor } = this.props.editor;
-    const codeMirrorWrapper = editor.getWrapperElement();
+    const { editor } = this.props;
+    const codeMirrorWrapper = editor.codeMirror.getWrapperElement();
 
     codeMirrorWrapper.addEventListener("click", e => this.onTokenClick(e));
     document.body.removeEventListener("keydown", e => this.onKeyDown);
@@ -98,10 +106,17 @@ class CallSites extends Component {
       selectedLocation,
       breakpoints,
       addBreakpoint,
-      removeBreakpoint
+      removeBreakpoint,
+      callSites
     } = this.props;
 
-    const bp = breakpointAtLocation(breakpoints, { line, column });
+    const callSite = getCallSiteAtLocation(callSites, { line, column });
+
+    if (!callSite) {
+      return;
+    }
+
+    const bp = callSite.breakpoint;
 
     if ((bp && bp.loading) || !selectedLocation || !selectedSource) {
       return;
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
index e6461d5dae..ce5c3555fa 100644
--- a/src/components/Editor/index.js
+++ b/src/components/Editor/index.js
@@ -184,6 +184,7 @@ class Editor extends PureComponent {
 
     // Set code editor wrapper to be focusable
     codeMirrorWrapper.tabIndex = 0;
+    codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
     codeMirrorWrapper.addEventListener("mouseover", e => this.onMouseOver(e));
 
     const toggleFoldMarkerVisibility = e => {
@@ -765,6 +766,7 @@ class Editor extends PureComponent {
 
   renderCallSites() {
     const editor = this.editor;
+
     if (!editor || !isEnabled("columnBreakpoints")) {
       return null;
     }

From e57a91b4078d2e990c66b30571c67d734d47684d Mon Sep 17 00:00:00 2001
From: bomsy <b4bomsy@gmail.com>
Date: Mon, 10 Jul 2017 14:58:34 +0100
Subject: [PATCH 06/10] fix issue of failure removing breakpoints

---
 src/components/Editor/CallSite.js  |  6 +++---
 src/components/Editor/CallSites.js | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js
index d4bcf968ad..16f4f6df45 100644
--- a/src/components/Editor/CallSite.js
+++ b/src/components/Editor/CallSite.js
@@ -29,8 +29,8 @@ export default class CallSite extends Component {
     self.clearCallSite = this.clearCallSite.bind(this);
   }
 
-  addCallSite() {
-    const { editor, callSite, breakpoint } = this.props;
+  addCallSite(props) {
+    const { editor, callSite, breakpoint } = props || this.props;
     const className = !breakpoint ? "call-site" : "call-site-bp";
     this.marker = markText(editor, className, callSite.location);
   }
@@ -66,7 +66,7 @@ export default class CallSite extends Component {
       if (this.marker) {
         this.marker.clear();
       }
-      this.addCallSite();
+      this.addCallSite(nextProps);
     }
 
     if (nextProps.showCallSite !== showCallSite) {
diff --git a/src/components/Editor/CallSites.js b/src/components/Editor/CallSites.js
index 60089395c1..243be06b8a 100644
--- a/src/components/Editor/CallSites.js
+++ b/src/components/Editor/CallSites.js
@@ -6,7 +6,7 @@ import { isEnabled } from "devtools-config";
 import range from "lodash/range";
 import keyBy from "lodash/keyBy";
 import find from "lodash/find";
-import isEqual from "lodash/isEqual";
+import isEqualWith from "lodash/isEqualWith";
 
 import _CallSite from "./CallSite";
 const CallSite = createFactory(_CallSite);
@@ -24,7 +24,12 @@ import actions from "../../actions";
 
 function getCallSiteAtLocation(callSites, location) {
   return find(callSites, callSite =>
-    isEqual(callSite.location.start, location)
+    isEqualWith(callSite.location, location, (cloc, loc) => {
+      return (
+        loc.line === cloc.start.line &&
+        (loc.column >= cloc.start.column && loc.column <= cloc.end.column)
+      );
+    })
   );
 }
 
@@ -97,7 +102,7 @@ class CallSites extends Component {
 
     const { line, column } = getTokenLocation(editor.codeMirror, target);
 
-    this.toggleBreakpoint(line, column - 2);
+    this.toggleBreakpoint(line + 1, column - 2);
   }
 
   toggleBreakpoint(line, column = undefined) {
@@ -129,14 +134,14 @@ class CallSites extends Component {
       column = column || bp.location.column;
       removeBreakpoint({
         sourceId: sourceId,
-        line: line + 1,
+        line: line,
         column
       });
     } else {
       addBreakpoint({
         sourceId: sourceId,
         sourceUrl: selectedSource.get("url"),
-        line: line + 1,
+        line: line,
         column: column
       });
     }

From 357e7e42eb5737b4ccf14b37006aa70b8279365c Mon Sep 17 00:00:00 2001
From: bomsy <b4bomsy@gmail.com>
Date: Mon, 10 Jul 2017 16:32:11 +0100
Subject: [PATCH 07/10] fix lint and flow issues

---
 src/components/Editor/CallSite.js  | 4 ++--
 src/components/Editor/CallSites.js | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js
index 16f4f6df45..091832df22 100644
--- a/src/components/Editor/CallSite.js
+++ b/src/components/Editor/CallSite.js
@@ -29,8 +29,8 @@ export default class CallSite extends Component {
     self.clearCallSite = this.clearCallSite.bind(this);
   }
 
-  addCallSite(props) {
-    const { editor, callSite, breakpoint } = props || this.props;
+  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);
   }
diff --git a/src/components/Editor/CallSites.js b/src/components/Editor/CallSites.js
index 243be06b8a..1e3c0e8f21 100644
--- a/src/components/Editor/CallSites.js
+++ b/src/components/Editor/CallSites.js
@@ -18,7 +18,7 @@ import {
   getBreakpointsForSource
 } from "../../selectors";
 
-import { getTokenLocation, breakpointAtLocation } from "../../utils/editor";
+import { getTokenLocation } from "../../utils/editor";
 
 import actions from "../../actions";
 
@@ -38,7 +38,6 @@ class CallSites extends Component {
     symbols: Array<Symbol>,
     callSites: Array<Symbol>,
     editor: Object,
-    breakpoints: Map,
     addBreakpoint: Function,
     removeBreakpoint: Function,
     selectedSource: Object,
@@ -109,7 +108,6 @@ class CallSites extends Component {
     const {
       selectedSource,
       selectedLocation,
-      breakpoints,
       addBreakpoint,
       removeBreakpoint,
       callSites

From 849982d6adc65dbe273eb910bc75dac110645994 Mon Sep 17 00:00:00 2001
From: bomsy <b4bomsy@gmail.com>
Date: Mon, 10 Jul 2017 16:52:21 +0100
Subject: [PATCH 08/10] fix tests

---
 src/components/Editor/Tabs.js                            | 2 +-
 src/components/Editor/tests/__snapshots__/Editor.js.snap | 2 +-
 src/utils/frame.js                                       | 3 +--
 src/utils/parser/tests/__snapshots__/getSymbols.js.snap  | 6 +++---
 src/utils/parser/tests/fixtures/var.js                   | 3 +--
 src/utils/tests/scopes.js                                | 3 +--
 6 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/Editor/Tabs.js b/src/components/Editor/Tabs.js
index f81c9d5b5a..b7eb49b4a9 100644
--- a/src/components/Editor/Tabs.js
+++ b/src/components/Editor/Tabs.js
@@ -102,7 +102,7 @@ class SourceTabs extends PureComponent {
     selectSource: (string, ?Object) => void,
     moveTab: (string, number) => void,
     closeTab: string => void,
-    closeTabs: (List<string>) => void,
+    closeTabs: List<string> => void,
     setActiveSearch: (?ActiveSearchType) => void,
     togglePrettyPrint: string => void,
     togglePaneCollapse: () => void,
diff --git a/src/components/Editor/tests/__snapshots__/Editor.js.snap b/src/components/Editor/tests/__snapshots__/Editor.js.snap
index 6b07b1e48a..3dddc1fe33 100644
--- a/src/components/Editor/tests/__snapshots__/Editor.js.snap
+++ b/src/components/Editor/tests/__snapshots__/Editor.js.snap
@@ -148,7 +148,7 @@ ShallowWrapper {
           "validateCallback": [Function],
         },
       },
-      "_mountOrder": 5,
+      "_mountOrder": 3,
       "_pendingCallbacks": null,
       "_pendingElement": null,
       "_pendingForceUpdate": false,
diff --git a/src/utils/frame.js b/src/utils/frame.js
index 4ae54d62f0..c506ed05fa 100644
--- a/src/utils/frame.js
+++ b/src/utils/frame.js
@@ -134,8 +134,7 @@ const displayNameMap = {
   },
   React: {
     // eslint-disable-next-line max-len
-    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<":
-      "Render",
+    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<": "Render",
     _renderValidatedComponentWithoutOwnerOrContext: "Render"
   },
   Webpack: {
diff --git a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
index b70be1b47e..5513d609dd 100644
--- a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
+++ b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
@@ -443,12 +443,12 @@ identifiers
 [(3, 6), (3, 9)]  baz baz 
 [(4, 6), (4, 11)]  a a 
 [(4, 6), (4, 7)]  a a 
-[(5, 2), (5, 7)]  b b 
-[(5, 2), (5, 3)]  b b 
+[(4, 13), (4, 18)]  b b 
+[(4, 13), (4, 14)]  b b 
 variables
 [(1, 4), (1, 11)]   foo 
 [(2, 4), (2, 11)]   bar 
 [(3, 6), (3, 13)]   baz 
 [(4, 6), (4, 11)]   a 
-[(5, 2), (5, 7)]   b "
+[(4, 13), (4, 18)]   b "
 `;
diff --git a/src/utils/parser/tests/fixtures/var.js b/src/utils/parser/tests/fixtures/var.js
index d5307424d4..80ff5111b9 100644
--- a/src/utils/parser/tests/fixtures/var.js
+++ b/src/utils/parser/tests/fixtures/var.js
@@ -1,5 +1,4 @@
 var foo = 1;
 let bar = 2;
 const baz = 3;
-const a = 4,
-  b = 5;
+const a = 4, b = 5;
diff --git a/src/utils/tests/scopes.js b/src/utils/tests/scopes.js
index c9b07327e0..872933a73d 100644
--- a/src/utils/tests/scopes.js
+++ b/src/utils/tests/scopes.js
@@ -12,8 +12,7 @@ const errorGrip = {
     kind: "Error",
     name: "Error",
     message: "blah",
-    stack:
-      "onclick@http://localhost:8000/examples/doc-return-values.html:1:18\n",
+    stack: "onclick@http://localhost:8000/examples/doc-return-values.html:1:18\n",
     fileName: "http://localhost:8000/examples/doc-return-values.html",
     lineNumber: 1,
     columnNumber: 18

From d65209bce465c5270db7eeb838d1719b4e616160 Mon Sep 17 00:00:00 2001
From: bomsy <b4bomsy@gmail.com>
Date: Mon, 10 Jul 2017 17:51:07 +0100
Subject: [PATCH 09/10] fix lint issues

---
 src/components/Editor/Tabs.js | 2 +-
 src/utils/frame.js            | 3 ++-
 src/utils/tests/scopes.js     | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Editor/Tabs.js b/src/components/Editor/Tabs.js
index b7eb49b4a9..f81c9d5b5a 100644
--- a/src/components/Editor/Tabs.js
+++ b/src/components/Editor/Tabs.js
@@ -102,7 +102,7 @@ class SourceTabs extends PureComponent {
     selectSource: (string, ?Object) => void,
     moveTab: (string, number) => void,
     closeTab: string => void,
-    closeTabs: List<string> => void,
+    closeTabs: (List<string>) => void,
     setActiveSearch: (?ActiveSearchType) => void,
     togglePrettyPrint: string => void,
     togglePaneCollapse: () => void,
diff --git a/src/utils/frame.js b/src/utils/frame.js
index c506ed05fa..4a6cfaf1c6 100644
--- a/src/utils/frame.js
+++ b/src/utils/frame.js
@@ -134,7 +134,8 @@ const displayNameMap = {
   },
   React: {
     // eslint-disable-next-line max-len
-    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<": "Render",
+    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/" +
+     "renderedElement<": "Render",
     _renderValidatedComponentWithoutOwnerOrContext: "Render"
   },
   Webpack: {
diff --git a/src/utils/tests/scopes.js b/src/utils/tests/scopes.js
index 872933a73d..2ec8a25889 100644
--- a/src/utils/tests/scopes.js
+++ b/src/utils/tests/scopes.js
@@ -12,7 +12,8 @@ const errorGrip = {
     kind: "Error",
     name: "Error",
     message: "blah",
-    stack: "onclick@http://localhost:8000/examples/doc-return-values.html:1:18\n",
+    stack:
+     "onclick@http://localhost:8000/examples/doc-return-values.html:1:18\n",
     fileName: "http://localhost:8000/examples/doc-return-values.html",
     lineNumber: 1,
     columnNumber: 18

From 12ecc81a24f459e0125ef89e528b169155488060 Mon Sep 17 00:00:00 2001
From: Jason Laster <jason.laster.11@gmail.com>
Date: Mon, 10 Jul 2017 14:04:03 -0400
Subject: [PATCH 10/10] fixes

---
 src/utils/frame.js                                      | 4 ++--
 src/utils/parser/tests/__snapshots__/getSymbols.js.snap | 6 +++---
 src/utils/parser/tests/fixtures/var.js                  | 3 ++-
 src/utils/tests/scopes.js                               | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/utils/frame.js b/src/utils/frame.js
index 4a6cfaf1c6..4ae54d62f0 100644
--- a/src/utils/frame.js
+++ b/src/utils/frame.js
@@ -134,8 +134,8 @@ const displayNameMap = {
   },
   React: {
     // eslint-disable-next-line max-len
-    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/" +
-     "renderedElement<": "Render",
+    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<":
+      "Render",
     _renderValidatedComponentWithoutOwnerOrContext: "Render"
   },
   Webpack: {
diff --git a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
index 5513d609dd..b70be1b47e 100644
--- a/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
+++ b/src/utils/parser/tests/__snapshots__/getSymbols.js.snap
@@ -443,12 +443,12 @@ identifiers
 [(3, 6), (3, 9)]  baz baz 
 [(4, 6), (4, 11)]  a a 
 [(4, 6), (4, 7)]  a a 
-[(4, 13), (4, 18)]  b b 
-[(4, 13), (4, 14)]  b b 
+[(5, 2), (5, 7)]  b b 
+[(5, 2), (5, 3)]  b b 
 variables
 [(1, 4), (1, 11)]   foo 
 [(2, 4), (2, 11)]   bar 
 [(3, 6), (3, 13)]   baz 
 [(4, 6), (4, 11)]   a 
-[(4, 13), (4, 18)]   b "
+[(5, 2), (5, 7)]   b "
 `;
diff --git a/src/utils/parser/tests/fixtures/var.js b/src/utils/parser/tests/fixtures/var.js
index 80ff5111b9..d5307424d4 100644
--- a/src/utils/parser/tests/fixtures/var.js
+++ b/src/utils/parser/tests/fixtures/var.js
@@ -1,4 +1,5 @@
 var foo = 1;
 let bar = 2;
 const baz = 3;
-const a = 4, b = 5;
+const a = 4,
+  b = 5;
diff --git a/src/utils/tests/scopes.js b/src/utils/tests/scopes.js
index 2ec8a25889..c9b07327e0 100644
--- a/src/utils/tests/scopes.js
+++ b/src/utils/tests/scopes.js
@@ -13,7 +13,7 @@ const errorGrip = {
     name: "Error",
     message: "blah",
     stack:
-     "onclick@http://localhost:8000/examples/doc-return-values.html:1:18\n",
+      "onclick@http://localhost:8000/examples/doc-return-values.html:1:18\n",
     fileName: "http://localhost:8000/examples/doc-return-values.html",
     lineNumber: 1,
     columnNumber: 18