[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) {
@@ -81,30 +78,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

@@ -20,18 +20,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

@@ -576,7 +576,7 @@ class Editor extends PureComponent<Props, State> {
     const { horizontal, selectedSource, conditionalPanelLocation } = this.props;
     const { editor } = this.state;
 
-    if (!editor || !selectedSource) {
+    if (!selectedSource || !editor || !getDocument(selectedSource.id)) {
       return null;
     }