browser-flash-active-element.js

/**
 * This code is meant to be executed in a browser console in order
 * to make it visually apparent what section of the page has focus.
 * As focus moves around, different elements will exhibit a flashing border.
 * Usage:
 * 1. Drop definitions in in browser console
 * 2. Call `addAnimation()` to add the animation css to the current document
 * 3. Call `start()` to start tracking focus
 * 4. Call `stop()` to stop tracking focus
 */

window.start = (props = {}) => {
  const REFRESH_INTERVAL = 200
  const ANIMATION_DURATION = 200

  const { interval = REFRESH_INTERVAL, duration = ANIMATION_DURATION } = props

  let stopped = false
  let resetStyle

  function flash() {

    if (resetStyle) {
      // console.log('resetting style')
      resetStyle()
    }

    if (stopped) {
      return
    }

    if (document.activeElement) {
      const element = document.activeElement
      const { border } = element.style

      resetStyle = () => {
        Object.assign(element.style, {
          border,
          animation: '',
        })
      }

      // console.log('flashing', element)

      Object.assign(element.style, {
        border: "4px solid blue",
        animation: `borderBlink ${duration}ms linear 1`,
      })

    }

    setTimeout(() => {
      resetStyle()
      requestAnimationFrame(flash)
    }, interval)
  }

  flash()

  window.stop = () => { stopped = true }
}

function addAnimation() {
  const styleEl = document.createElement('style')
  styleEl.append(`
    @keyframes borderBlink {    
      from, to {    
          border-color: transparent    
      }    
      50% {    
          border-color: red    
      }    
    }
  `)

  document.body.prepend(styleEl)
}