Fix up a bunch of issues with the track-changes list view.

- not crash when a user is null
- fix alignment of user color square
- if first and last name are absent, display email instead
- truncate overly long display name with '...'

services/web/app/views/project/editor/track-changes.jade

@@ -76,7 +76,7 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 							div.user(ng-repeat="update_user in update.meta.users")
 								.color-square(ng-if="update_user != null", ng-style="{'background-color': 'hsl({{ update_user.hue }}, 70%, 50%)'}")
 								.color-square(ng-if="update_user == null", ng-style="{'background-color': 'hsl(100, 70%, 50%)'}")
-								.name(ng-if="update_user.id != user.id") {{update_user.first_name}} {{update_user.last_name}}
+								.name(ng-if="update_user.id != user.id" ng-bind="displayName(update_user)") 
 								.name(ng-if="update_user.id == user.id") You
 								.name(ng-if="update_user == null") #{translate("anonymous")}
 							div.user(ng-if="update.meta.users.length == 0")

services/web/public/coffee/ide/track-changes/TrackChangesManager.coffee

@@ -250,5 +250,5 @@ define [
 
 		_updateContainsUserId: (update, user_id) ->
 			for user in update.meta.users
-				return true if user.id == user_id
+				return true if user?.id == user_id
 			return false

services/web/public/coffee/ide/track-changes/controllers/TrackChangesListController.coffee

@@ -103,4 +103,12 @@ define [
 			$scope.trackChanges.hoveringOverListSelectors = false
 			$scope.resetHoverState()
 
+		$scope.displayName = (user) ->
+			full_name = "#{user.first_name} #{user.last_name}"
+			if full_name != " "
+				full_name
+			else if user.email
+				user.email
+			else
+				"Unknown"
 	]

services/web/public/stylesheets/app/editor/track-changes.less

@@ -139,11 +139,14 @@
 							width: 12px;
 							border-radius: 3px;
 							position: absolute;
-							top: 3px;
 							left: 0;
+							bottom: 3px;
 						}
 						.name {
-							display: inline-block;
+							width: 94%;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
 						}
 					}
 				}