[Breakpoints] Fix timing issue with showing breakpoints

src/components/Editor/Breakpoint.js

@@ -52,12 +52,9 @@ class Breakpoint extends PureComponent<Props> {
 
     const sourceId = selectedSource.id;
     const line = toEditorLine(sourceId, breakpoint.location.line);
+    const doc = getDocument(sourceId);
 
-    editor.codeMirror.setGutterMarker(
-      line,
-      "breakpoints",
-      makeMarker(breakpoint.disabled)
-    );
+    doc.setGutterMarker(line, "breakpoints",  makeMarker(breakpoint.disabled));
 
     editor.codeMirror.addLineClass(line, "line", "new-breakpoint");
     if (breakpoint.condition) {
@@ -77,30 +74,20 @@ class Breakpoint extends PureComponent<Props> {
 
   componentWillUnmount() {
     const { editor, breakpoint, selectedSource } = this.props;
-
-    if (!selectedSource) {
-      return;
-    }
-
-    if (breakpoint.loading) {
+    if (!selectedSource || breakpoint.loading) {
       return;
     }
 
     const sourceId = selectedSource.id;
     const doc = getDocument(sourceId);
+
     if (!doc) {
       return;
     }
 
     const line = toEditorLine(sourceId, breakpoint.location.line);
 
-    // NOTE: when we upgrade codemirror we can use `doc.setGutterMarker`
-    if (doc.setGutterMarker) {
-      doc.setGutterMarker(line, "breakpoints", null);
-    } else {
-      editor.codeMirror.setGutterMarker(line, "breakpoints", null);
-    }
-
+    doc.setGutterMarker(line, "breakpoints", null);
     doc.removeLineClass(line, "line", "new-breakpoint");
     doc.removeLineClass(line, "line", "has-condition");
   }

src/components/Editor/Breakpoints.js

@@ -21,18 +21,10 @@ type Props = {
 };
 
 class Breakpoints extends Component<Props> {
-  shouldComponentUpdate(nextProps: Props) {
-    if (nextProps.selectedSource && !isLoaded(nextProps.selectedSource)) {
-      return false;
-    }
-
-    return true;
-  }
-
   render() {
     const { breakpoints, selectedSource, editor } = this.props;
 
-    if (!selectedSource || !breakpoints || selectedSource.isBlackBoxed) {
+    if (!breakpoints || selectedSource.isBlackBoxed) {
       return null;
     }
 

src/components/Editor/index.js

@@ -9,8 +9,6 @@ import React, { PureComponent } from "react";
 import ReactDOM from "react-dom";
 import { connect } from "react-redux";
 import classnames from "classnames";
-import { debounce } from "lodash";
-
 import { isLoaded } from "../../utils/source";
 import { isFirefox } from "devtools-environment";
 import { features } from "../../utils/prefs";
@@ -20,6 +18,8 @@ import {
   getActiveSearch,
   getSelectedLocation,
   getSelectedSource,
+  getHitCountForSource,
+  getCoverageEnabled,
   getConditionalPanelLine,
   getSymbols
 } from "../../selectors";
@@ -32,7 +32,8 @@ import SearchBar from "./SearchBar";
 import HighlightLines from "./HighlightLines";
 import Preview from "./Preview";
 import Breakpoints from "./Breakpoints";
-import ColumnBreakpoints from "./ColumnBreakpoints";
+import HitMarker from "./HitMarker";
+import CallSites from "./CallSites";
 import DebugLine from "./DebugLine";
 import HighlightLine from "./HighlightLine";
 import EmptyLines from "./EmptyLines";
@@ -75,9 +76,11 @@ const cssVars = {
 };
 
 export type Props = {
+  hitCount: Object,
   selectedLocation: ?Location,
   selectedSource: ?Source,
   searchOn: boolean,
+  coverageOn: boolean,
   horizontal: boolean,
   startPanelSize: number,
   endPanelSize: number,
@@ -93,8 +96,7 @@ export type Props = {
   toggleBreakpointsAtLine: (?number) => void,
   addOrToggleDisabledBreakpoint: (?number) => void,
   jumpToMappedLocation: any => void,
-  traverseResults: (boolean, Object) => void,
-  updateViewport: void => void
+  traverseResults: (boolean, Object) => void
 };
 
 type State = {
@@ -160,7 +162,6 @@ class Editor extends PureComponent<Props, State> {
     codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
     codeMirrorWrapper.addEventListener("click", e => this.onClick(e));
     codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror));
-    codeMirror.on("scroll", this.onEditorScroll);
 
     const toggleFoldMarkerVisibility = e => {
       if (node instanceof HTMLElement) {
@@ -281,8 +282,6 @@ class Editor extends PureComponent<Props, State> {
     this.toggleConditionalPanel(line);
   };
 
-  onEditorScroll = debounce(this.props.updateViewport, 200);
-
   onKeyDown(e: KeyboardEvent) {
     const { codeMirror } = this.state.editor;
     const { key, target } = e;
@@ -534,11 +533,34 @@ class Editor extends PureComponent<Props, State> {
     };
   }
 
+  renderHitCounts() {
+    const { hitCount, selectedSource } = this.props;
+
+    if (
+      !selectedSource ||
+      !isLoaded(selectedSource) ||
+      !hitCount ||
+      !this.state.editor
+    ) {
+      return;
+    }
+
+    return hitCount
+      .filter(marker => marker.get("count") > 0)
+      .map(marker => (
+        <HitMarker
+          key={marker.get("line")}
+          hitData={marker.toJS()}
+          editor={this.state.editor.codeMirror}
+        />
+      ));
+  }
+
   renderItems() {
     const { horizontal, selectedSource } = this.props;
     const { editor } = this.state;
 
-    if (!editor || !selectedSource) {
+    if (!selectedSource || !editor || !getDocument(selectedSource.id)) {
       return null;
     }
 
@@ -554,9 +576,8 @@ class Editor extends PureComponent<Props, State> {
         <EditorMenu editor={editor} />
         <GutterMenu editor={editor} />
         <ConditionalPanel editor={editor} />
-        {features.columnBreakpoints ? (
-          <ColumnBreakpoints editor={editor} />
-        ) : null}
+        {features.columnBreakpoints ? <CallSites editor={editor} /> : null}
+        {this.renderHitCounts()}
       </div>
     );
   }
@@ -572,9 +593,13 @@ class Editor extends PureComponent<Props, State> {
   }
 
   render() {
+    const { coverageOn } = this.props;
+
     return (
       <div
-        className={classnames("editor-wrapper")}
+        className={classnames("editor-wrapper", {
+          "coverage-on": coverageOn
+        })}
         ref={c => (this.$editorWrapper = c)}
       >
         <div
@@ -594,11 +619,14 @@ Editor.contextTypes = {
 
 const mapStateToProps = state => {
   const selectedSource = getSelectedSource(state);
+  const sourceId = selectedSource ? selectedSource.id : "";
 
   return {
     selectedLocation: getSelectedLocation(state),
     selectedSource,
     searchOn: getActiveSearch(state) === "file",
+    hitCount: getHitCountForSource(state, sourceId),
+    coverageOn: getCoverageEnabled(state),
     conditionalPanelLine: getConditionalPanelLine(state),
     symbols: getSymbols(state, selectedSource)
   };
@@ -615,7 +643,6 @@ export default connect(
     toggleBreakpointsAtLine: actions.toggleBreakpointsAtLine,
     addOrToggleDisabledBreakpoint: actions.addOrToggleDisabledBreakpoint,
     jumpToMappedLocation: actions.jumpToMappedLocation,
-    traverseResults: actions.traverseResults,
-    updateViewport: actions.updateViewport
+    traverseResults: actions.traverseResults
   }
 )(Editor);