Distinguish between inserts and deletes in the entries repeater.

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

@@ -50,8 +50,12 @@ div.full-size(
 				input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
 			.review-panel-scroller
 				.review-entry-list(review-panel-sorted)
-					.review-entry(ng-repeat="(entry_id, entry) in reviewPanel.entries", ng-style="{'top': top}")
-						div(ng-if="entry.type == 'change'")
+					.review-entry(
+						ng-repeat="(entry_id, entry) in reviewPanel.entries"
+						ng-class="'review-entry-' + entry.type"
+						ng-style="{'top': top}"
+					)
+						div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
 							div.small {{ entry.metadata.ts }}
 							{{ entry.content }}
 						div(ng-if="entry.type == 'comment'")

services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee

@@ -158,7 +158,7 @@ define [
 			@$scope.reviewPanel.entries = {}
 			for change in @changesTracker.changes
 				@$scope.reviewPanel.entries[change.id] = {
-					type: "change"
+					type: if change.op.i then "insert" else "delete"
 					content: change.op.i or change.op.d
 					offset: change.op.p
 					metadata: change.metadata

services/web/public/stylesheets/app/editor/review-panel.less

@@ -59,10 +59,11 @@
 .review-entry {
 	position: absolute;
 	font-size: 12px;
-	padding: 2px 6px;
-	border: 1px solid #999;
+	padding: 5px 5px 5px 9px;
+	border-left: solid 4px transparent;
+	border-radius: 3px;
 	margin: 0 6px;
-	background-color: white;
+	background-color: #FFF;
 	max-width: 148px;
 	word-wrap: break-word;
 }