Show and preform auto-reconnect

services/web/app/views/project/editor.jade

@@ -13,7 +13,6 @@ block scripts
 	script(src=jsPath+'libs/jquery.storage.js')
 
 block content
-
 	.editor(ng-controller="IdeController")
 		.loading-screen(ng-show="state.loading")
 			.container
@@ -21,6 +20,19 @@ block content
 				.progress
 					.progress-bar(ng-style="{'width': state.load_progress + '%'}")
 
+		.global-alerts(ng-cloak)
+			.alert.alert-danger.small(ng-if="connection.forced_disconnect")
+				strong Disconnected
+				|  Please refresh the page to continue.
+
+			.alert.alert-warning.small(ng-if="connection.reconnection_countdown")
+				strong Lost Connection.
+				|  Reconnecting in {{ connection.reconnection_countdown }} secs. 
+				a.pull-right(href, ng-click="tryReconnectNow()") Try Now
+
+			.alert.alert-warning.small(ng-if="connection.reconnecting")
+				strong Reconnecting...
+
 		header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
 			a.btn.btn-full-height(href='#', tooltip="Menu", tooltip-placement="bottom")
 				i.fa.fa-bars
@@ -38,7 +50,7 @@ block content
 				a.btn.btn-full-height(href='#', tooltip="Chat", tooltip-placement="bottom")
 					i.fa.fa-comment
 
-		#editor-content(ng-cloak, layout="main", ng-hide="state.loading")
+		#ide-body(ng-cloak, layout="main", ng-hide="state.loading")
 			include ./editor/file-tree
 
 			.ui-layout-center

services/web/public/coffee/app/ide/connection/ConnectionManager.coffee

@@ -1,35 +1,102 @@
 define [], () ->
 	class ConnectionManager
 		constructor: (@ide, @$scope) ->
+			@connected = false
+
+			@$scope.connection = 
+				reconnecting: false
+				# If we need to force everyone to reload the editor
+				forced_disconnect: false
+
+			@$scope.tryReconnectNow = () =>
+				@tryReconnect()
+
 			@ide.socket = io.connect null,
 				reconnect: false
 				"force new connection": true
 
 			@ide.socket.on "connect", () =>
+				@connected = true
+				@ide.pushEvent("connected")
+
 				@$scope.$apply () =>
-					@$scope.state.load_progress = 80
+					@$scope.connection.reconnecting = false
+					if @$scope.state.loading
+						@$scope.state.load_progress = 80
+
+				setTimeout(() =>
+					@joinProject()
+				, 100)
+
+			@ide.socket.on 'disconnect', () =>
+				@connected = false
+				@ide.pushEvent("disconnected")
+
+				@$scope.$apply () =>
+					@$scope.connection.reconnecting = false
+
+				setTimeout(=>
+					ga('send', 'event', 'editor-interaction', 'disconnect')
+				, 2000)
 
-				joinProject = () =>
-					@ide.socket.emit 'joinProject', {
-						project_id: @ide.project_id
-					}, (err, project, permissionsLevel, protocolVersion) =>
-						if @$scope.protocolVersion? and @$scope.protocolVersion != protocolVersion
-							location.reload(true)
+				if !$scope.connection.forced_disconnect
+					@startAutoReconnectCountdown()
 
-						@$scope.$apply () =>
-							@$scope.protocolVersion = protocolVersion
-							@$scope.project = project
-							@$scope.state.load_progress = 100
-							@$scope.state.loading = false
+			@ide.socket.on 'forceDisconnect', (message) =>
+				@$scope.$apply () =>
+					@$scope.connection.forced_disconnect = true
+				@socket.disconnect()
 
-							@$scope.$emit "project:joined"
+		joinProject: () ->
+			@ide.socket.emit 'joinProject', {
+				project_id: @ide.project_id
+			}, (err, project, permissionsLevel, protocolVersion) =>
+				if @$scope.protocolVersion? and @$scope.protocolVersion != protocolVersion
+					location.reload(true)
 
-				setTimeout(joinProject, 100)
+				@$scope.$apply () =>
+					@$scope.protocolVersion = protocolVersion
+					@$scope.project = project
+					@$scope.state.load_progress = 100
+					@$scope.state.loading = false
+					@$scope.$emit "project:joined"
 
 		reconnectImmediately: () ->
-			console.log "RECONNECT IMMEDIATELY STUB"
 			@disconnect()
-			#@tryReconnect()
+			@tryReconnect()
 
 		disconnect: () ->
-			@socket.disconnect()
+			@ide.socket.disconnect()
+
+		startAutoReconnectCountdown: () ->
+			# TODO: Reconnect slowly if no recent updates
+			@$scope.$apply () =>
+				@$scope.connection.reconnection_countdown = 3 + Math.floor(Math.random() * 7)
+
+			setTimeout(=>
+				if !@connected
+					@timeoutId = setTimeout (=> @decreaseCountdown()), 1000
+			, 200)
+
+		cancelReconnect: () ->
+			clearTimeout @timeoutId if @timeoutId?
+					
+		decreaseCountdown: () ->
+			console.log "Decreasing countdown"
+			@$scope.$apply () =>
+				@$scope.connection.reconnection_countdown--
+
+			if @$scope.connection.reconnection_countdown <= 0
+				@$scope.$apply () =>
+					@tryReconnect()
+			else
+				@timeoutId = setTimeout (=> @decreaseCountdown()), 1000
+
+		tryReconnect: () ->
+			console.log "Trying reconnect"
+			@cancelReconnect()
+			@$scope.connection.reconnecting = true
+			delete @$scope.connection.reconnection_countdown
+			@ide.socket.socket.reconnect()
+			setTimeout (=> @startAutoReconnectCountdown() if !@connected), 1000
+

services/web/public/coffee/app/ide/editor/directives/aceEditor.coffee

@@ -21,7 +21,7 @@ define [
 			link: (scope, element, attrs) ->
 				editor = Ace.edit(element.find(".ace-editor-body")[0])
 				scope.undo =
-					show_remote_warning: true
+					show_remote_warning: false
 
 				# Prevert Ctrl|Cmd-S from triggering save dialog
 				editor.commands.addCommand
@@ -71,7 +71,6 @@ define [
 						session.setUndoManager(undoManager)
 
 						sharejs_doc.on "remoteop.recordForUndo", () =>
-							console.log "Remote OP!"
 							undoManager.nextUpdateIsRemote = true
 
 						sharejs_doc.attachToAce(editor)

services/web/public/stylesheets/app/editor.less

@@ -1,3 +1,12 @@
+.global-alerts {
+	position: absolute;
+	z-index: 20;
+	top: (@line-height-computed / 4);
+	width: 400px;
+	left: 50%;
+	margin-left: -200px;
+}
+
 .toolbar {
 	height: 40px;
 	border-bottom: 1px solid @toolbar-border-color;
@@ -57,14 +66,6 @@
 	}
 }
 
-#editor-content {
-	position: absolute;
-	top: 40px;
-	bottom: 0;
-	left: 0;
-	right: 0;
-}
-
 #file-tree {
 	background-color: #fafafa;
 
@@ -152,6 +153,14 @@
 	}
 }
 
+#ide-body {
+	position: absolute;
+	top: 40px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
 #editor {
 	position: absolute;
 	top: 0;