Toggle review panel and track changes with ui elements

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

@@ -41,9 +41,13 @@ div.full-size(
 			review-panel="reviewPanel",
 			on-scroll="onScroll",
 			scroll-events="scrollEvents",
-			track-changes-enabled="true"
+			track-changes-enabled="trackChangesFeatureFlag"
+			track-new-changes= "reviewPanel.trackNewChanges"
 		)
 		#review-panel
+			.review-panel-toolbar
+				| Track Changes 
+				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}")

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

@@ -90,7 +90,15 @@ div(ng-if="!shouldABTestHeaderLabels")
 								) {{ user.name.slice(0,1) }}
 								| {{ user.name }}
 
-		
+			a.btn.btn-full-height(
+				href,
+				ng-if="trackChangesFeatureFlag",
+				ng-class="{ active: ui.reviewPanelOpen }"
+				tooltip="#{translate('review')}",
+				tooltip-placement="bottom",
+				ng-click="toggleReviewPanel()"
+			)
+				| Review
 			a.btn.btn-full-height(
 				href,
 				ng-if="permissions.admin",

services/web/public/coffee/ide.coffee

@@ -57,6 +57,9 @@ define [
 			else
 				this.$originalApply(fn);
 
+		if window.location.search.match /tcon=true/ # track changes on
+			$scope.trackChangesFeatureFlag = true
+	
 		$scope.state = {
 			loading: true
 			load_progress: 40
@@ -67,12 +70,11 @@ define [
 			view: "editor"
 			chatOpen: false
 			pdfLayout: 'sideBySide'
-			reviewPanelOpen: false
+			reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}") and $scope.trackChangesFeatureFlag
 			showCodeCheckerOnboarding: !window.userSettings.syntaxValidation?
 		}
 		$scope.user = window.user
 
-
 		$scope.shouldABTestPlans = false
 		if $scope.user.signUpDate >= '2016-10-27'
 			$scope.shouldABTestPlans = true
@@ -82,9 +84,12 @@ define [
 
 		$scope.chat = {}
 
-		ide.toggleReviewPanel = () ->
+		ide.toggleReviewPanel = $scope.toggleReviewPanel = () ->
 			$scope.ui.reviewPanelOpen = !$scope.ui.reviewPanelOpen
-			$scope.$digest()
+
+		$scope.$watch "ui.reviewPanelOpen", (value) ->
+			if value?
+				localStorage "ui.reviewPanelOpen.#{window.project_id}", value
 
 		# Only run the header AB test for newly registered users.
 		_abTestStartDate = new Date(Date.UTC(2016, 8, 28))

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

@@ -55,6 +55,7 @@ define [
 				reviewPanel: "="
 				onScroll: "="
 				scrollEvents: "="
+				trackNewChanges: "="
 				trackChangesEnabled: "="
 			}
 			link: (scope, element, attrs) ->
@@ -87,8 +88,6 @@ define [
 				highlightsManager     = new HighlightsManager(scope, editor, element)
 				cursorPositionManager = new CursorPositionManager(scope, editor, element, localStorage)
 				trackChangesManager   = new TrackChangesManager(scope, editor, element)
-				if scope.trackChangesEnabled and window.location.search.match /tcon=true/ # track changes on
-					trackChangesManager.enabled = true
 
 				# Prevert Ctrl|Cmd-S from triggering save dialog
 				editor.commands.addCommand
@@ -217,6 +216,21 @@ define [
 						session = editor.getSession()
 						session.setOption("useWorker", value);
 
+				scope.$watch "trackNewChanges", (track_new_changes) ->
+					return if !track_new_changes?
+					if track_new_changes
+						trackChangesManager.turn_on_tracking()
+					else
+						trackChangesManager.turn_off_tracking()
+
+				scope.$watch "trackChangesEnabled", (enabled) ->
+					return if !enabled?
+					if enabled
+						trackChangesManager.enable()
+					else
+						trackChangesManager.disable()
+
+
 				editor.setOption("scrollPastEnd", true)
 
 				updateCount = 0

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

@@ -9,9 +9,7 @@ define [
 		
 		constructor: (@$scope, @editor, @element) ->
 			@changesTracker = new ChangesTracker()
-			@changesTracker.track_changes = true
 			@changeIdToMarkerIdMap = {}
-			@enabled = false
 			window.trackChangesManager ?= @
 
 			@changesTracker.on "insert:added", (change) =>
@@ -69,6 +67,18 @@ define [
 			@editor.renderer.on "resize", () =>
 				@recalculateReviewEntriesScreenPositions()
 		
+		enable: () ->
+			@enabled = true
+	
+		disable: () ->
+			@disabled = false
+		
+		turn_on_tracking: () ->
+			@changesTracker.track_changes = true
+		
+		turn_off_tracking: () ->
+			@changesTracker.track_changes = false
+
 		addComment: (offset, length, comment) ->
 			@changesTracker.addComment offset, length, {
 				comment: comment

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -5,6 +5,7 @@ define [
 	App.controller "ReviewPanelController", ($scope, $element, ide) ->
 		$scope.reviewPanel =
 			entries: {}
+			trackNewChanges: false
 			
 		scroller = $element.find(".review-panel-scroller")
 		list = $element.find(".review-entry-list")

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

@@ -11,6 +11,19 @@
 	display: none;
 }
 
+.review-panel-toolbar {
+	height: 32px;
+	padding: 6px;
+	border-bottom: 1px solid grey;
+	background-color: #eee;
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+}
+
 .review-panel-scroller {
 	position: absolute;
 	top: 0;