vapid 0.1.0

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/index.coffee

@@ -0,0 +1,5 @@
+#= require_self
+#= require trix/watchdog/recorder
+#= require trix/watchdog/player_element
+
+Trix.Watchdog = {}

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/player.coffee

@@ -0,0 +1,60 @@
+#= require trix/watchdog/recording
+
+class Trix.Watchdog.Player
+  constructor: (@recording) ->
+    @playing = false
+    @index = -1
+    @length = @recording.getFrameCount()
+
+  play: ->
+    return if @playing
+    @index = -1 if @hasEnded()
+    @playing = true
+    @delegate?.playerDidStartPlaying?()
+    @tick()
+
+  tick: =>
+    if @hasEnded()
+      @stop()
+    else
+      @seek(@index + 1)
+      duration = @getTimeToNextFrame()
+      @timeout = setTimeout(@tick, duration)
+
+  seek: (index) ->
+    previousIndex = @index
+
+    if index < 0
+      @index = 0
+    else if index >= @length
+      @index = @length - 1
+    else
+      @index = index
+
+    if @index isnt previousIndex
+      @delegate?.playerDidSeekToIndex?(index)
+
+  stop: ->
+    return unless @playing
+    clearTimeout(@timeout)
+    @timeout = null
+    @playing = false
+    @delegate?.playerDidStopPlaying?()
+
+  isPlaying: ->
+    @playing
+
+  hasEnded: ->
+    @index >= @length - 1
+
+  getSnapshot: ->
+    @recording.getSnapshotAtFrameIndex(@index)
+
+  getEvents: ->
+    @recording.getEventsUpToFrameIndex(@index)
+
+  getTimeToNextFrame: ->
+    current = @recording.getTimestampAtFrameIndex(@index)
+    next = @recording.getTimestampAtFrameIndex(@index + 1)
+    duration = if current? and next? then next - current else 0
+    Math.min(duration, 500)

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/player_controller.coffee

@@ -0,0 +1,43 @@
+#= require trix/watchdog/player
+#= require trix/watchdog/player_view
+
+class Trix.Watchdog.PlayerController
+  constructor: (@element, @recording) ->
+    @player = new Trix.Watchdog.Player @recording
+    @player.delegate = this
+
+    @view = new Trix.Watchdog.PlayerView @element
+    @view.delegate = this
+
+    @view.setLength(@player.length)
+    @player.seek(0)
+
+  play: ->
+    @player.play()
+
+  stop: ->
+    @player.stop()
+
+  playerViewDidClickPlayButton: ->
+    if @player.isPlaying()
+      @player.stop()
+    else
+      @player.play()
+
+  playerViewDidChangeSliderValue: (value) ->
+    @player.seek(value)
+
+  playerDidSeekToIndex: (index) ->
+    @view.setIndex(index)
+
+    if snapshot = @player.getSnapshot(index)
+      @view.renderSnapshot(snapshot)
+
+    if events = @player.getEvents(index)
+      @view.renderEvents(events)
+
+  playerDidStartPlaying: ->
+    @view.playerDidStartPlaying()
+
+  playerDidStopPlaying: ->
+    @view.playerDidStopPlaying()

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/player_element.coffee

@@ -0,0 +1,32 @@
+#= require trix/watchdog/recording
+#= require trix/watchdog/player_controller
+
+Trix.registerElement "trix-watchdog-player",
+  defaultCSS: """
+    %t > div { display: -webkit-flex; display: flex; font-size: 14px; margin: 10px 0 }
+    %t > div > button { width: 65px }
+    %t > div > input { width: 100%; -webkit-align-self: stretch; align-self: stretch; margin: 0 20px }
+    %t > div > span { display: inline-block; text-align: center; width: 110px }
+  """
+
+  attachedCallback: ->
+    if url = @getAttribute("src")
+      @fetchRecordingAtURL(url)
+
+  attributeChangedCallback: (attributeName, oldValue, newValue) ->
+    if attributeName is "src"
+      @fetchRecordingAtURL(newValue)
+
+  fetchRecordingAtURL: (url) ->
+    @activeRequest?.abort()
+    @activeRequest = new XMLHttpRequest
+    @activeRequest.open("GET", url)
+    @activeRequest.send()
+    @activeRequest.onload = =>
+      json = @activeRequest.responseText
+      @activeRequest = null
+      recording = Trix.Watchdog.Recording.fromJSON(JSON.parse(json))
+      @loadRecording(recording)
+
+  loadRecording: (recording) ->
+    @controller = new Trix.Watchdog.PlayerController this, recording

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/player_view.coffee

@@ -0,0 +1,133 @@
+#= require trix/watchdog/deserializer
+
+class Trix.Watchdog.PlayerView
+  @documentClassName: "trix-watchdog-player"
+  @playingClassName: "trix-watchdog-player-playing"
+
+  constructor: (@element) ->
+    @frame = document.createElement("iframe")
+    @frame.style.border = "none"
+    @frame.style.width = "100%"
+    @frame.onload = @frameDidLoadDefaultDocument
+    @frame.onblur = @frameDidLoseFocus
+
+    controlsContainer = document.createElement("div")
+
+    @playButton = document.createElement("button")
+    @playButton.textContent = "Play"
+    @playButton.onclick = @didClickPlayButton
+
+    @slider = document.createElement("input")
+    @slider.type = "range"
+    @slider.oninput = @didChangeSliderValue
+
+    @indexLabel = document.createElement("span")
+
+    logContainer = document.createElement("div")
+
+    @log = document.createElement("textarea")
+    @log.setAttribute("readonly", "")
+    @log.rows = 4
+
+    render(controlsContainer, @playButton, @slider, @indexLabel)
+    render(logContainer, @log)
+    render(@element, @frame, controlsContainer, logContainer)
+    @setIndex(0)
+
+  renderSnapshot: (snapshot) ->
+    if @body
+      {element, range} = @deserializeSnapshot(snapshot)
+      render(@body, element)
+      select(@document, range)
+      @updateFrame()
+    else
+      @snapshot = snapshot
+
+  renderEvents: (events) ->
+    renderedEvents = for event, index in events by -1
+      @renderEvent(event, index)
+    @log.innerText = renderedEvents.join("\n")
+
+  setIndex: (index) ->
+    @slider.value = index
+    @indexLabel.textContent = "Frame #{index}"
+
+  setLength: (length) ->
+    @slider.max = length - 1
+
+  playerDidStartPlaying: ->
+    @element.classList.add(@constructor.playingClassName)
+    @playButton.textContent = "Pause"
+
+  playerDidStopPlaying: ->
+    @element.classList.remove(@constructor.playingClassName)
+    @playButton.textContent = "Play"
+
+  frameDidLoadDefaultDocument: =>
+    @document = @frame.contentDocument
+    @document.documentElement.classList.add(@constructor.documentClassName)
+
+    @document.head.innerHTML = document.head.innerHTML
+    for stylesheet in @document.head.querySelectorAll("link[rel=stylesheet]")
+      stylesheet.onload = @frameDidLoadStylesheet
+
+    @body = @document.body
+    @body.style.cssText = "margin: 0; padding: 0"
+    @body.onkeydown = (event) -> event.preventDefault()
+
+    if @snapshot
+      @renderSnapshot(snapshot)
+      @snapshot = null
+
+  frameDidLoadStylesheet: =>
+    @updateFrame()
+
+  frameDidLoseFocus: =>
+    if @element.classList.contains(@constructor.playingClassName)
+      requestAnimationFrame(@updateFrame)
+
+  didClickPlayButton: =>
+    @delegate?.playerViewDidClickPlayButton?()
+
+  didChangeSliderValue: =>
+    value = parseInt(@slider.value, 10)
+    @delegate?.playerViewDidChangeSliderValue?(value)
+
+  renderEvent: (event, index) ->
+    description = switch event.type
+      when "input"
+        "Browser input event received"
+      when "keypress"
+        key = event.character ? event.charCode ? event.keyCode
+        "Key pressed: #{JSON.stringify(key)}"
+      when "log"
+        event.message
+      when "snapshot"
+        "DOM update"
+
+    "[#{index}] #{description}"
+
+  deserializeSnapshot: (snapshot) ->
+    deserializer = new Trix.Watchdog.Deserializer @document, snapshot
+    element: deserializer.getElement()
+    range: deserializer.getRange()
+
+  updateFrame: =>
+    @frame.style.height = 0
+    @frame.style.height = @body.scrollHeight + "px"
+    @frame.focus()
+    @frame.contentWindow.focus()
+
+  clear = (element) ->
+    element.removeChild(element.lastChild) while element.lastChild
+
+  render = (element, contents...) ->
+    clear(element)
+    element.appendChild(content) for content in contents
+
+  select = (document, range) ->
+    return unless range
+    window = document.defaultView
+    selection = window.getSelection()
+    selection.removeAllRanges()
+    selection.addRange(range)

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/recorder.coffee

@@ -0,0 +1,82 @@
+#= require trix/watchdog/recording
+#= require trix/watchdog/serializer
+
+class Trix.Watchdog.Recorder
+  constructor: (@element, {@snapshotLimit} = {}) ->
+    @recording = new Trix.Watchdog.Recording
+
+  start: ->
+    return if @started
+    @installMutationObserver()
+    @installEventListeners()
+    @recordSnapshot()
+    @started = true
+
+  stop: ->
+    return unless @started
+    @uninstallMutationObserver()
+    @uninstallEventListeners()
+    @started = false
+
+  log: (message) ->
+    @recording.recordEvent(type: "log", message: message)
+
+  installMutationObserver: ->
+    @mutationObserver = new MutationObserver @recordSnapshotDuringNextAnimationFrame
+    @mutationObserver.observe(@element, attributes: true, characterData: true, childList: true, subtree: true)
+
+  uninstallMutationObserver: ->
+    @mutationObserver.disconnect()
+    @mutationObserver = null
+
+  recordSnapshotDuringNextAnimationFrame: =>
+    @animationFrameRequest ?= requestAnimationFrame =>
+      @animationFrameRequest = null
+      @recordSnapshot()
+
+  installEventListeners: ->
+    @element.addEventListener("input", @handleEvent, true)
+    @element.addEventListener("keypress", @handleEvent, true)
+    document.addEventListener("selectionchange", @handleEvent, true)
+
+  uninstallEventListeners: ->
+    @element.removeEventListener("input", @handleEvent, true)
+    @element.removeEventListener("keypress", @handleEvent, true)
+    document.removeEventListener("selectionchange", @handleEvent, true)
+
+  handleEvent: (event) =>
+    switch event.type
+      when "input"
+        @recordInputEvent(event)
+      when "keypress"
+        @recordKeypressEvent(event)
+      when "selectionchange"
+        @recordSnapshotDuringNextAnimationFrame()
+
+  recordInputEvent: (event) ->
+    @recording.recordEvent(type: "input")
+
+  recordKeypressEvent: (event) ->
+    @recording.recordEvent
+      type: "keypress"
+      altKey: event.altKey
+      ctrlKey: event.ctrlKey
+      metaKey: event.metaKey
+      shiftKey: event.shiftKey
+      keyCode: event.keyCode
+      charCode: event.charCode
+      character: characterFromKeyboardEvent(event)
+
+  recordSnapshot: ->
+    @recording.recordSnapshot(@getSnapshot())
+    @recording.truncateToSnapshotCount(@snapshotLimit) if @snapshotLimit?
+
+  getSnapshot: ->
+    serializer = new Trix.Watchdog.Serializer @element
+    serializer.getSnapshot()
+
+  characterFromKeyboardEvent = (event) ->
+    if event.which is null
+      String.fromCharCode(event.keyCode)
+    else if event.which isnt 0 and event.charCode isnt 0
+      String.fromCharCode(event.charCode)

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/recording.coffee

@@ -0,0 +1,54 @@
+class Trix.Watchdog.Recording
+  @fromJSON: ({snapshots, frames}) ->
+    new this snapshots, frames
+
+  constructor: (@snapshots = [], @frames = []) ->
+
+  recordSnapshot: (snapshot) ->
+    snapshotJSON = JSON.stringify(snapshot)
+    if snapshotJSON isnt @lastSnapshotJSON
+      @lastSnapshotJSON = snapshotJSON
+      @snapshots.push(snapshot)
+      @recordEvent(type: "snapshot")
+
+  recordEvent: (event) ->
+    frame = [@getTimestamp(), @snapshots.length - 1, event]
+    @frames.push(frame)
+
+  getSnapshotAtIndex: (index) ->
+    @snapshots[index] if index >= 0
+
+  getSnapshotAtFrameIndex: (frameIndex) ->
+    snapshotIndex = @getSnapshotIndexAtFrameIndex(frameIndex)
+    @getSnapshotAtIndex(snapshotIndex)
+
+  getTimestampAtFrameIndex: (index) ->
+    @frames[index]?[0]
+
+  getSnapshotIndexAtFrameIndex: (index) ->
+    @frames[index]?[1]
+
+  getEventAtFrameIndex: (index) ->
+    @frames[index]?[2]
+
+  getEventsUpToFrameIndex: (index) ->
+    frame[2] for frame in @frames.slice(0, index + 1)
+
+  getFrameCount: ->
+    @frames.length
+
+  getTimestamp: ->
+    new Date().getTime()
+
+  truncateToSnapshotCount: (snapshotCount) ->
+    offset = @snapshots.length - snapshotCount
+    return if offset < 0
+
+    frames = @frames
+    @frames = for [timestamp, index, event] in frames when index >= offset
+      [timestamp, index - offset, event]
+
+    @snapshots = @snapshots.slice(offset)
+
+  toJSON: ->
+    {@snapshots, @frames}

data/lib/vapid/vendor/trix/src/trix/inspector/watchdog/serializer.coffee

@@ -0,0 +1,61 @@
+class Trix.Watchdog.Serializer
+  constructor: (@element) ->
+    @id = 0
+    @serializeTree()
+    @serializeSelection()
+
+  serializeTree: ->
+    @ids = new Map
+    @tree = @serializeNode(@element)
+
+  serializeNode: (node) ->
+    object = id: ++@id, name: node.nodeName
+    @ids.set(node, object.id)
+
+    switch node.nodeType
+      when Node.ELEMENT_NODE
+        @serializeElementToObject(node, object)
+        @serializeElementChildrenToObject(node, object)
+
+      when Node.TEXT_NODE, Node.COMMENT_NODE
+        @serializeNodeValueToObject(node, object)
+
+    object
+
+  serializeElementToObject: (node, object) ->
+    attributes = {}
+    hasAttributes = false
+
+    for {name} in node.attributes
+      if node.hasAttribute(name)
+        value = node.getAttribute(name)
+        value = "data:" if name is "src" and value[0...5] is "data:"
+        attributes[name] = value
+        hasAttributes = true
+
+    if hasAttributes
+      object.attributes = attributes
+
+  serializeElementChildrenToObject: (node, object) ->
+    if node.childNodes.length
+      object.children = for childNode in node.childNodes
+        @serializeNode(childNode)
+
+  serializeNodeValueToObject: (node, object) ->
+    object.value = node.nodeValue
+
+  serializeSelection: ->
+    selection = window.getSelection()
+    return unless selection.rangeCount > 0
+
+    range = selection.getRangeAt(0)
+    startId = @ids.get(range?.startContainer)
+    endId = @ids.get(range?.endContainer)
+
+    if startId and endId
+      @selection =
+        start: id: startId, offset: range.startOffset
+        end: id: endId, offset: range.endOffset
+
+  getSnapshot: ->
+    {@tree, @selection}