performance improvements for result animations

and breakpoint gutter insertion

Author: pfitzseb

lib/debugger/breakpoints.js

@@ -71,14 +71,16 @@ export default class BreakpointManager {
     this.onUncaught = false
     this.compiledMode = false
 
-    this.subs.add(atom.workspace.observeTextEditors(ed => {
-      this.subs.add(ed.observeGrammar(() => {
-        if (this.appliesToEditor(ed)) {
-          this.init(ed)
-        } else {
-          this.deinit(ed)
-        }
-      }))
+    this.subs.add(atom.workspace.observeActiveTextEditor(ed => {
+      if (ed && ed.observeGrammar) {
+        this.subs.add(ed.observeGrammar(() => {
+          if (this.appliesToEditor(ed)) {
+            this.init(ed)
+          } else {
+            this.deinit(ed)
+          }
+        }))
+      }
     }))
   }
 
@@ -100,22 +102,30 @@ export default class BreakpointManager {
   }
 
   init(ed) {
+    if (ed.gutterWithName(this.name) !== null) return
     ed.addGutter({
       name: this.name,
       priority: 0
     })
 
-    // click on gutter creates new bp
     const editorElement = atom.views.getView(ed)
+    let hasListener = false
 
+    // click on gutter creates new bp
     const addClickListener = () => {
+      if (hasListener) return
+
       const gutterElement = editorElement.querySelector(`.gutter[gutter-name="${this.name}"]`)
 
       if (gutterElement == null) {
-        window.requestAnimationFrame(addClickListener)
+        setTimeout(() => {
+          process.nextTick(() => window.requestAnimationFrame(addClickListener))
+        }, 1000)
+
         return
       }
 
+      hasListener = true
       gutterElement.addEventListener('click', event => {
         if (!ed || !ed.getPath()) {
           atom.notifications.addError('Need a saved file to add a breakpoint')

lib/editor/result.js

@@ -268,13 +268,14 @@ export default class Result {
         let winWidth = window.innerWidth;
 
         res.forEach((r) => r.view.decideUpdateWidth(rect))
+
         // DOM writes
         res.forEach((r) => r.view.updateWidth(rect, winWidth))
       }
-      window.requestAnimationFrame(listener)
-      // setTimeout(() => {
-      //   process.nextTick(() => window.requestAnimationFrame(listener))
-      // }, 10*1000/60)
+
+      setTimeout(() => {
+        process.nextTick(() => window.requestAnimationFrame(listener))
+      }, 750)
     }
     window.requestAnimationFrame(listener)
     return