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