Refactor callout and background styles and don't show in overview

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

@@ -332,7 +332,7 @@ define [
 			callout_range = @_makeZeroWidthRange(position)
 			markerLayer = @editor.renderer.$markerBack
 			callout_marker_id = session.addMarker callout_range, klass, (html, range, left, top, config) ->
-				markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, "width: auto; right: 0;")
+				markerLayer.drawSingleLineMarker(html, range, "track-changes-marker-callout #{klass} ace_start", config, 0, "width: auto; right: 0;")
 
 		_onInsertAdded: (change) ->
 			start = @_shareJsOffsetToAcePosition(change.op.p)
@@ -340,7 +340,7 @@ define [
 			session = @editor.getSession()
 			doc = session.getDocument()
 			background_range = new Range(start.row, start.column, end.row, end.column)
-			background_marker_id = session.addMarker background_range, "track-changes-added-marker", "text"
+			background_marker_id = session.addMarker background_range, "track-changes-marker track-changes-added-marker", "text"
 			callout_marker_id = @_createCalloutMarker(start, "track-changes-added-marker-callout")
 			@changeIdToMarkerIdMap[change.id] = { background_marker_id, callout_marker_id }
 			@updateReviewEntriesScope()
@@ -351,7 +351,7 @@ define [
 			doc = session.getDocument()
 
 			markerLayer = @editor.renderer.$markerBack
-			klass = "track-changes-deleted-marker"
+			klass = "track-changes-marker track-changes-deleted-marker"
 			background_range = @_makeZeroWidthRange(position)
 			background_marker_id = session.addMarker background_range, klass, (html, range, left, top, config) ->
 				markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, "")
@@ -380,7 +380,7 @@ define [
 			session = @editor.getSession()
 			doc = session.getDocument()
 			background_range = new Range(start.row, start.column, end.row, end.column)
-			background_marker_id = session.addMarker background_range, "track-changes-comment-marker", "text"
+			background_marker_id = session.addMarker background_range, "track-changes-marker track-changes-comment-marker", "text"
 			callout_marker_id = @_createCalloutMarker(start, "track-changes-comment-marker-callout")
 			@changeIdToMarkerIdMap[comment.id] = { background_marker_id, callout_marker_id }
 			@updateReviewEntriesScope()

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

@@ -141,37 +141,6 @@
 		background-repeat: repeat-x;
 		background-position: bottom left;
 	}
-	.track-changes-added-marker {
-		border-radius: 0;
-		position: absolute;
-		background-color: hsl(100, 70%, 85%);
-	}
-	.track-changes-added-marker-callout {
-		border-radius: 0;
-		position: absolute;
-		border-bottom: 1px dashed green;
-	}
-	.track-changes-comment-marker {
-		border-radius: 0;
-		position: absolute;
-		background-color: #fde5b7;
-	}
-	.track-changes-comment-marker-callout {
-		border-radius: 0;
-		position: absolute;
-		border-bottom: 1px dashed orange;
-	}
-	.track-changes-deleted-marker {
-		border-radius: 0;
-		position: absolute;
-		border-left: 2px dotted red;
-		margin-left: -1px;
-	}
-	.track-changes-deleted-marker-callout {
-		border-radius: 0;
-		position: absolute;
-		border-bottom: 1px dashed red;
-	}
 	.remote-cursor {
 		position: absolute;
 		border-left: 2px solid transparent;

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

@@ -512,3 +512,38 @@
 		}
 	}
 }
+
+.ace-editor-wrapper {
+	.track-changes-marker-callout {
+		border-radius: 0;
+		position: absolute;
+		.rp-state-overview & {
+			display: none;
+		}
+	}
+	.track-changes-added-marker-callout {
+		border-bottom: 1px dashed @rp-green;
+	}
+	.track-changes-comment-marker-callout {
+		border-bottom: 1px dashed @rp-yellow;
+	}
+	.track-changes-deleted-marker-callout {
+		border-bottom: 1px dashed @rp-red;
+	}
+	
+	.track-changes-marker {
+		border-radius: 0;
+		position: absolute;
+	}
+
+	.track-changes-comment-marker {
+		background-color: @rp-dim-yellow;
+	}
+	.track-changes-added-marker {
+		background-color: @rp-dim-green;
+	}
+	.track-changes-deleted-marker {
+		border-left: 2px dotted @rp-red;
+		margin-left: -1px;
+	}
+}