Show labels for tracked changes above and below

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

@@ -98,7 +98,8 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 				text="trackChanges.diff.text",
 				highlights="trackChanges.diff.highlights",
 				read-only="true",
-				resize-on="layout:main:resize"
+				resize-on="layout:main:resize",
+				navigate-highlights="true"
 			)
 		.diff-deleted.text-centered(
 			ng-show="trackChanges.diff.deleted"

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

@@ -27,6 +27,7 @@ define [
 				readOnly: "="
 				gotoLine: "="
 				annotations: "="
+				navigateHighlights: "="
 			}
 			link: (scope, element, attrs) ->
 				# Don't freak out if we're already in an apply callback
@@ -197,6 +198,27 @@ define [
 					>
 						{{ annotationLabel.text }}
 					</div>
+
+					<a
+						href
+						class="highlights-before-label btn btn-info btn-xs"
+						ng-show="updateLabels.highlightsBefore > 0"
+						ng-click="gotoHighlightAbove()"
+					>
+						<i class="fa fa-fw fa-arrow-up"></i>
+						{{ updateLabels.highlightsBefore }} more update{{ updateLabels.highlightsBefore > 1 && "" || "s" }} above
+					</a>
+
+					<a
+						href
+						class="highlights-after-label btn btn-info btn-xs"
+						ng-show="updateLabels.highlightsAfter > 0"
+						ng-click="gotoHighlightBelow()"
+					>
+						<i class="fa fa-fw fa-arrow-down"></i>
+						{{ updateLabels.highlightsAfter }} more update{{ updateLabels.highlightsAfter > 1 && "" || "s" }} below
+
+					</a>
 				</div>
 			"""
 		}

services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee

@@ -18,6 +18,11 @@ define [
 				text: ""
 			}
 
+			@$scope.updateLabels = {
+				updatesAbove: 0
+				updatesBelow: 0
+			}
+
 			@$scope.$watch "highlights", (value) =>
 				@redrawAnnotations()
 
@@ -29,9 +34,30 @@ define [
 				e.position = position
 				@showAnnotationLabels(position)
 
-			@editor.on "changeSession", () =>
+			onChangeScrollTop = () =>
+				@updateShowMoreLabels()
+
+			@editor.getSession().on "changeScrollTop", onChangeScrollTop
+
+			@$scope.$watch "text", () =>
+				if @$scope.navigateHighlights
+					setTimeout () =>
+						@scrollToFirstHighlight()
+					, 0
+
+			@editor.on "changeSession", (e) =>
+				e.oldSession?.off "changeScrollTop", onChangeScrollTop
+				e.session.on "changeScrollTop", onChangeScrollTop
 				@redrawAnnotations()
 
+			@$scope.gotoHighlightBelow = () =>
+				return if !@firstHiddenHighlightAfter?
+				@editor.scrollToLine(@firstHiddenHighlightAfter.end.row, true, false)
+
+			@$scope.gotoHighlightAbove = () =>
+				return if !@lastHiddenHighlightBefore?
+				@editor.scrollToLine(@lastHiddenHighlightBefore.start.row, true, false)
+
 		redrawAnnotations: () ->
 			@_clearMarkers()
 			@_clearLabels()
@@ -71,6 +97,8 @@ define [
 						}
 						@_drawStrikeThrough(annotation, colorScheme)
 
+			@updateShowMoreLabels()
+
 		showAnnotationLabels: (position) ->
 			labelToShow = null
 			for label in @labels or []
@@ -127,6 +155,39 @@ define [
 						text:   labelToShow.text
 					}
 
+		updateShowMoreLabels: () ->
+			return if !@$scope.navigateHighlights
+			setTimeout () =>
+				firstRow = @editor.getFirstVisibleRow()
+				lastRow  = @editor.getLastVisibleRow()
+				highlightsBefore = 0
+				highlightsAfter = 0
+				@lastHiddenHighlightBefore = null
+				@firstHiddenHighlightAfter = null
+				for annotation in @$scope.highlights or []
+					range = annotation.highlight or annotation.strikeThrough
+					continue if !range?
+					if range.start.row < firstRow
+						highlightsBefore += 1
+						@lastHiddenHighlightBefore = range
+					if range.end.row > lastRow
+						highlightsAfter += 1
+						@firstHiddenHighlightAfter ||= range
+
+				@$scope.$apply =>
+					@$scope.updateLabels = {
+						highlightsBefore: highlightsBefore
+						highlightsAfter:  highlightsAfter
+					}
+			, 100
+
+		scrollToFirstHighlight: () ->
+			for annotation in @$scope.highlights or []
+				range = annotation.highlight or annotation.strikeThrough
+				continue if !range?
+				@editor.scrollToLine(range.start.row, true, false)
+				break
+
 		_clearMarkers: () ->
 			for marker_id in @markerIds
 				@editor.getSession().removeMarker(marker_id)

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

@@ -153,6 +153,16 @@
 		position: absolute;
 		z-index: 2;
 	}
+	.highlights-before-label {
+		position: absolute;
+		top:   @line-height-computed / 2;
+		right: @line-height-computed;
+	}
+	.highlights-after-label {
+		position: absolute;
+		bottom: @line-height-computed / 2;
+		right:  @line-height-computed;
+	}
 }
 
 .ui-layout-resizer {
@@ -198,4 +208,3 @@
 	position: fixed;
 	z-index: 100;
 }
-