const overlay = document.createElement('div')
overlay.style.backgroundColor = 'rgba(104, 182, 255, 0.35)'
overlay.style.position = 'fixed'
overlay.style.zIndex = '99999'
overlay.style.pointerEvents = 'none'

/**
 * Highlight an instance.
 *
 * @param {Vue} instance
 */

export function highlight (instance) {
  if (!instance) return
  if (!util().inDoc(instance.$el)) {
    return
  }
  if (!instance._isFragment) {
    showOverlay(instance.$el.getBoundingClientRect())
  } else {
    highlightFragment(instance)
  }
}

/**
 * Remove highlight overlay.
 */

export function unHighlight () {
  if (overlay.parentNode) {
    document.body.removeChild(overlay)
  }
}

/**
 * Highlight a fragment instance.
 * Loop over its node range and determine its bounding box.
 *
 * @param {Vue} instance
 */

function highlightFragment ({ _fragmentStart, _fragmentEnd }) {
  let top, bottom, left, right
  util().mapNodeRange(_fragmentStart, _fragmentEnd, function (node) {
    let rect
    if (node.nodeType === 1 || node.getBoundingClientRect) {
      rect = node.getBoundingClientRect()
    } else if (node.nodeType === 3 && node.data.trim()) {
      rect = getTextRect(node)
    }
    if (rect) {
      if (!top || rect.top < top) {
        top = rect.top
      }
      if (!bottom || rect.bottom > bottom) {
        bottom = rect.bottom
      }
      if (!left || rect.left < left) {
        left = rect.left
      }
      if (!right || rect.right > right) {
        right = rect.right
      }
    }
  })
  showOverlay({
    top,
    left,
    width: right - left,
    height: bottom - top
  })
}

/**
 * Get the bounding rect for a text node using a Range.
 *
 * @param {Text} node
 * @return {Rect}
 */

const range = document.createRange()
function getTextRect (node) {
  range.selectNode(node)
  return range.getBoundingClientRect()
}

/**
 * Display the overlay with given rect.
 *
 * @param {Rect}
 */

function showOverlay ({ width = 0, height = 0, top = 0, left = 0 }) {
  overlay.style.width = ~~width + 'px'
  overlay.style.height = ~~height + 'px'
  overlay.style.top = ~~top + 'px'
  overlay.style.left = ~~left + 'px'
  document.body.appendChild(overlay)
}

/**
 * Get Vue's util
 */

function util () {
  return window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue.util
}

@@ -383,41 +383,8 @@
   %7D%0A
-  if (!instance._isFragment) %7B%0A  
   sh
@@ -397,77 +397,22 @@
 lay(
-i
+getI
 nstance
-.$el.getBoundingClientRect())%0A  %7D else %7B%0A    highlightFragmen
+Rec
 t(in
@@ -418,20 +418,17 @@
 nstance)
-%0A  %7D
+)
 %0A%7D%0A%0A/**%0A
@@ -564,24 +564,299 @@
 lay)%0A  %7D%0A%7D%0A%0A
+/**%0A * Get the client rect for an instance.%0A *%0A * @param %7BVue%7D instance%0A * @return %7BObject%7D%0A */%0A%0Aexport function getInstanceRect (instance) %7B%0A  if (instance._isFragment) %7B%0A    return getFragmentRect(instance)%0A  %7D else %7B%0A    return instance.$el.getBoundingClientRect()%0A  %7D%0A%7D%0A%0A
 /**%0A * Highl
@@ -965,24 +965,44 @@
 e%7D instance%0A
+ * @return %7BObject%7D%0A
  */%0A%0Afunctio
@@ -1003,24 +1003,18 @@
 unction 
-highligh
+ge
 tFragmen
@@ -1014,16 +1014,20 @@
 Fragment
+Rect
  (%7B _fra
@@ -1695,28 +1695,23 @@
 %0A  %7D)%0A  
-showOverlay(
+return 
 %7B%0A    to
@@ -1776,17 +1776,16 @@
  top%0A  %7D
-)
 %0A%7D%0A%0A/**%0A

refactor highlighter