Fixed debug view

framer/Config.coffee

@@ -35,6 +35,12 @@ body {
	-webkit-user-select: auto;
}

.framerDebug {
	padding: 6px;
	color: #fff;
	font: 10px/1em Monaco;
}

"""

Utils.domComplete -> Utils.insertCSS(FramerCSS)

framer/Debug.coffee

@@ -5,43 +5,31 @@ Utils = require "./Utils"
###############################################################
# Debug overview

_debugContext = null

createDebugLayer = (layer) ->

	overLayer = new Layer
		frame: layer.screenFrame
		backgroundColor: "rgba(50,150,200,.35)"

	overLayer.style =
		textAlign: "center"
		color: "white"
		font: "10px/1em Monaco"
		lineHeight: "#{overLayer.height + 1}px"
		boxShadow: "inset 0 0 0 1px rgba(255,255,255,.5)"

	overLayer.html = layer.name or layer.id

	overLayer.on Events.Click, (event, layer) ->
		layer.scale = 0.8
		layer.animate 
			properties: {scale:1}
			curve: "spring(1000,10,0)"

	overLayer
_debugStyle =
	border: "1px solid rgba(50,150,200,.35)"
	backgroundColor: "rgba(50,150,200,.35)"

showDebug = -> 
	
	_debugContext ?= new Context(name:"Debug")

	layerList = window.Framer.DefaultContext.getLayers()
	_debugContext.run ->
		layerList.map createDebugLayer
	for layer in Framer.CurrentContext.getLayers()
		
		layer._debugStyle = _.pick(layer.style, _.keys(_debugStyle))
		layer.style = _debugStyle

		layer._debugElement = document.createElement("div")
		layer._debugElement.innerHTML = layer.name or layer.id
		layer._debugElement.classList.add("framerDebug")
		
		layer._element.appendChild(layer._debugElement)

hideDebug = ->
	_debugContext.reset()
	
	for layer in Framer.CurrentContext.getLayers()
		layer.style = layer._debugStyle
		layer._debugElement.parentElement.removeChild(layer._debugElement)
		layer._debugElement = null

toggleDebug = Utils.toggle showDebug, hideDebug
toggleDebug = Utils.toggle(showDebug, hideDebug)

EventKeys =
	Shift: 16