overlays for profile lines

Author: pfitzseb

lib/debugger/stepper-view.coffee

@@ -84,7 +84,7 @@ class StepperView
 
         @view.parentElement.style.maxWidth = (window.innerWidth - RESULT_OFFSET - 10 - this.left) + 'px'
         @view.style.maxWidth = w + 'px'
-      setTimeout((() => process.nextTick(() => window.requestAnimationFrame(@widthListener))), 15*1000/60)
+      setTimeout((() => process.nextTick(() => window.requestAnimationFrame(@widthListener))), 300)
 
     window.requestAnimationFrame(@widthListener)
 

lib/editor/highlights.coffee

@@ -24,15 +24,24 @@ module.exports =
       watch.dispose()
       m.destroy() for m in markers
 
+  profileLineView: (ed, count) ->
+    v = document.createElement 'div'
+    v.classList.add 'ink-profile-line'
+    v.style.width = count*ed.preferredLineLength/2 + 'em'
+    v
+
   profileLines: (ls) ->
     markers = []
     watch = @observeLines ls, (ed, {line, count, classes}) =>
-      m = ed.markBufferRange [[line, 0], [line, 1+Math.round(count*ed.preferredLineLength)]],
-        invalidate: 'touch'
+      m = ed.markBufferRange [[line, 0], [line, 0]],
+        invalidate: 'never'
       markers.push m
       ed.decorateMarker m,
-        type: 'highlight'
+        type: 'overlay'
+        item: @profileLineView ed, count
         class: "ink-profile-line #{classes.join(' ')}"
+        avoidOverflow: false
+
     destroy: =>
       watch.dispose()
       m.destroy() for m in markers

lib/editor/result-view.js

@@ -163,7 +163,9 @@ export default class ResultView {
   }
 
   // only read from the DOM
-  decideUpdateWidth (edRect) {
+  decideUpdateWidth (edRect, winWidth) {
+    this.edRect = edRect
+    this.winWidth = winWidth
     this.isVisible = false
     this.left = 0
     this.shouldRedraw = false
@@ -179,7 +181,7 @@ export default class ResultView {
   }
 
   // only write to the DOM
-  updateWidth (edRect, winWidth) {
+  updateWidth () {
     if (!!this.isVisible || this.model.expanded) {
       this.getView().style.visibility = 'visible'
       this.getView().style.pointerEvents = 'auto'
@@ -188,16 +190,16 @@ export default class ResultView {
       this.getView().style.pointerEvents = 'none'
     }
     if (!!this.isVisible && (this.shouldRedraw || this.modelUpdated)) {
-      let w = edRect.right - RESULT_OFFSET - 10 - this.left
+      let w = this.edRect.right - RESULT_OFFSET - 10 - this.left
       if (w < MIN_RESULT_WIDTH) w = MIN_RESULT_WIDTH
-      if (edRect.width > 0 && this.left + RESULT_OFFSET + w > edRect.right) {
-        this.getView().style.left = (edRect.right - w - 10 - this.left) + 'px'
+      if (this.edRect.width > 0 && this.left + RESULT_OFFSET + w > this.edRect.right) {
+        this.getView().style.left = (this.edRect.right - w - 10 - this.left) + 'px'
         this.getView().style.opacity = 0.75
       } else {
         this.getView().style.left = RESULT_OFFSET + 'px'
         this.getView().style.opacity = 1.0
       }
-      this.getView().parentElement.style.maxWidth = (winWidth - RESULT_OFFSET - 10 - this.left) + 'px'
+      this.getView().parentElement.style.maxWidth = (this.winWidth - RESULT_OFFSET - 10 - this.left) + 'px'
       this.getView().style.maxWidth = w + 'px'
       this.modelUpdated = false
     }

lib/editor/result.js

@@ -256,6 +256,7 @@ export default class Result {
       }))
 
     let listener = () => {
+      let allresults = []
       for (let edid in layers) {
         let res = layers[edid].getMarkers().map((m) => m.result)
         res = res.filter((r) => r.type === 'inline')
@@ -267,16 +268,19 @@ 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))
+        res.forEach((r) => r.view.decideUpdateWidth(rect, winWidth))
+        allresults.push(...res)
       }
 
+      // DOM writes
+      allresults.forEach((r) => r.view.updateWidth())
+
+
       setTimeout(() => {
         process.nextTick(() => window.requestAnimationFrame(listener))
-      }, 500)
+      }, 400)
     }
+
     window.requestAnimationFrame(listener)
     return
   }
@@ -288,5 +292,5 @@ export default class Result {
 
 // stopgap for https://github.com/atom/atom/issues/16454
 function uniqueEditorID(editor) {
-  return editor.id + '_' + editor.buffer.id
+  return editor.id
 }

styles/ink.less

@@ -135,8 +135,16 @@
   }
 }
 
-.ink-profile-line {
-  background: fade(@background-color-info, 20%);
+atom-overlay.ink-profile-overlay{
+  pointer-events: none;
+  z-index: 0 !important;
+  .ink-profile-line {
+    position: relative;
+    height: 1.5em;
+    top: -1.5em;
+    border-radius: 0px 5px 5px 0px;
+    background: fade(@background-color-info, 20%);
+  }
 }
 
 atom-text-editor {