modal for lost connection

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

@@ -85,6 +85,11 @@ block content
 		.modal-footer
 			button.btn.btn-info(ng-click="done()") #{translate("ok")}
 
+	script(type="text/ng-template", id="lockEditorModalTemplate")
+		.modal-header
+			h3 {{ title }}
+		.modal-body(ng-bind-html="message")
+
 block requirejs
 	script(type="text/javascript" src='/socket.io/socket.io.js')
 

services/web/public/coffee/ide/editor/controllers/SavingNotificationController.coffee

@@ -10,12 +10,16 @@ define [
 		$(window).bind 'beforeunload', () =>
 			warnAboutUnsavedChanges()
 
+		lockEditorModal = null # modal showing "connection lost"
+		MAX_UNSAVED_SECONDS = 15 # lock the editor after this time if unsaved
+
 		$scope.docSavingStatus = {}
 		pollSavedStatus = () ->
 			oldStatus = $scope.docSavingStatus
 			oldUnsavedCount = $scope.docSavingStatusCount
 			newStatus = {}
 			newUnsavedCount = 0
+			maxUnsavedSeconds = 0
 
 			for doc_id, doc of Document.openDocs
 				saving = doc.pollSavedStatus()
@@ -23,13 +27,26 @@ define [
 					newUnsavedCount++
 					if oldStatus[doc_id]?
 						newStatus[doc_id] = oldStatus[doc_id]
-						newStatus[doc_id].unsavedSeconds += 1
+						t = newStatus[doc_id].unsavedSeconds += 1
+						if t > maxUnsavedSeconds
+							maxUnsavedSeconds = t
 					else
 						newStatus[doc_id] = {
 							unsavedSeconds: 0
 							doc: ide.fileTreeManager.findEntityById(doc_id)
 						}
 
+			if newUnsavedCount > 0 and t > MAX_UNSAVED_SECONDS and not lockEditorModal
+				lockEditorModal = ide.showLockEditorMessageModal(
+						"Connection lost"
+						"Sorry, the connection to the server is down."
+					)
+				lockEditorModal.result.finally () ->
+					lockEditorModal = null # unset the modal if connection comes back
+
+			if lockEditorModal and newUnsavedCount is 0
+				lockEditorModal.dismiss "connection back up"
+
 			# for performance, only update the display if the old or new
 			# counts of unsaved files are nonzeror.  If both old and new
 			# unsaved counts are zero then we know we are in a good state

services/web/public/coffee/ide/services/ide.coffee

@@ -40,6 +40,19 @@ define [
 					message: -> message
 			}
 
+		ide.showLockEditorMessageModal = (title, message) ->
+			# modal to block the editor when connection is down
+			$modal.open {
+				templateUrl: "lockEditorModalTemplate"
+				controller:  "GenericMessageModalController"
+				backdrop:    "static" # prevent dismiss by click on background
+				keyboard:    false    # prevent dismiss via keyboard
+				resolve:
+					title:   -> title
+					message: -> message
+				windowClass: "lock-editor-modal"
+			}
+
 		return ide
 	]
 

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

@@ -263,6 +263,16 @@
 	margin-bottom:0px;
 }
 
+// vertically centre the "connection down" modal so it does not hide
+// the reconnecting indicator
+
+.modal.lock-editor-modal {
+	display: flex !important;
+	.modal-dialog {
+		margin: auto;
+	}
+}
+
 .sl_references_search_hint-varDefault {
 	position: absolute;
 	bottom: -22px;