Improve the collapsing behaviour of 'change' entries in track-changes.

services/web/app/views/project/editor/review-panel.pug

@@ -306,14 +306,21 @@ script(type='text/ng-template', id='aggregateChangeEntryTemplate')
 				.rp-entry-details
 					.rp-entry-description
 						| #{translate("aggregate_changed")} 
-						del.rp-content-highlight {{ entry.metadata.replaced_content }}
+						del.rp-content-highlight
+							| {{ entry.metadata.replaced_content | limitTo:(isDeletionCollapsed ? contentLimit : entry.metadata.replaced_contentlength) }}
+						a.rp-collapse-toggle(
+							href
+							ng-if="deletionNeedsCollapsing"
+							ng-click="toggleDeletionCollapse();"
+						) {{ isDeletionCollapsed ? '... (#{translate("show_all")})' : ' (#{translate("show_less")})' }}
 						|  #{translate("aggregate_to")} 
-						ins.rp-content-highlight {{ entry.content }}
+						ins.rp-content-highlight
+							| {{ entry.content | limitTo:(isInsertionCollapsed ? contentLimit : entry.contentlength) }}
 						a.rp-collapse-toggle(
 							href
-							ng-if="needsCollapsing"
-							ng-click="toggleCollapse();"
-						) {{ isCollapsed ? '... (#{translate("show_all")})' : ' (#{translate("show_less")})' }}
+							ng-if="insertionNeedsCollapsing"
+							ng-click="toggleInsertionCollapse();"
+						) {{ isInsertionCollapsed ? '... (#{translate("show_all")})' : ' (#{translate("show_less")})' }}
 					.rp-entry-metadata
 						| {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • 
 						span.rp-entry-user(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }} 

services/web/public/coffee/ide/review-panel/directives/aggregateChangeEntry.coffee

@@ -13,18 +13,28 @@ define [
 			onIndicatorClick: "&"
 			onBodyClick: "&"
 		link: (scope, element, attrs) ->
-			scope.contentLimit = 35
-			scope.isCollapsed = true
-			scope.needsCollapsing = false
+			scope.contentLimit = 17
+			scope.isDeletionCollapsed = true
+			scope.isInsertionCollapsed = true
+			scope.deletionNeedsCollapsing = false
+			scope.insertionNeedsCollapsing = false
 
 			element.on "click", (e) ->
 				if $(e.target).is('.rp-entry, .rp-entry-description, .rp-entry-body, .rp-entry-action-icon i')
 					scope.onBodyClick()
 
-			scope.toggleCollapse = () ->
-				scope.isCollapsed = !scope.isCollapsed
+			scope.toggleDeletionCollapse = () ->
+				scope.isDeletionCollapsed = !scope.isDeletionCollapsed
 				$timeout () ->
 					scope.$emit "review-panel:layout"
 
-			scope.$watch "entry.content.length + entry.metadata.agg_op.content.length", (contentLength) ->
-					scope.needsCollapsing = contentLength > scope.contentLimit
+			scope.toggleInsertionCollapse = () ->
+				scope.isInsertionCollapsed = !scope.isInsertionCollapsed
+				$timeout () ->
+					scope.$emit "review-panel:layout"
+
+			scope.$watch "entry.metadata.replaced_content.length", (deletionContentLength) ->
+					scope.deletionNeedsCollapsing = deletionContentLength > scope.contentLimit
+
+			scope.$watch "entry.content.length", (insertionContentLength) ->
+					scope.insertionNeedsCollapsing = insertionContentLength > scope.contentLimit