Only create Controller when showing onboarding

services/web/app/coffee/Features/Project/ProjectController.coffee

@@ -225,7 +225,7 @@ module.exports = ProjectController =
 				if !user_id?
 					return cb()
 				timeout = setTimeout cb, 500
-				AnalyticsManager.getLastOccurance user_id, "shown-track-changes-onboarding", (error, event) ->
+				AnalyticsManager.getLastOccurance user_id, "shown-track-changes-onboarding-2", (error, event) ->
 					clearTimeout timeout
 					if error?
 						return cb(null, false)

services/web/app/views/project/editor/feature-onboarding.pug

@@ -1,112 +1,112 @@
-div(ng-controller="FeatureOnboardingController")
-	.feat-onboard(
-		ng-class="('feat-onboard-step' + onboarding.innerStep)"
-		ng-if="!state.loading && showCollabFeaturesOnboarding"
-		ng-cloak
-		stop-propagation="click"
-	)
-		a.feat-onboard-dismiss(
-			href
-			ng-click="dismiss();"
-		) ×
-		.feat-onboard-wrapper
-			h1.feat-onboard-title
-				| Introducing 
-				span.feat-onboard-highlight Commenting
-				|  & 
-				span.feat-onboard-highlight Track Changes
-			p.feat-onboard-description
-				span.feat-onboard-highlight Commenting 
-				| and 
-				span.feat-onboard-highlight Track Changes 
-				| will make it easier for you to work with peers in your documents. 
+.feat-onboard(
+	ng-controller="FeatureOnboardingController"
+	ng-class="('feat-onboard-step' + onboarding.innerStep)"
+	ng-if="!state.loading && ui.showCollabFeaturesOnboarding"
+	ng-cloak
+	stop-propagation="click"
+)
+	a.feat-onboard-dismiss(
+		href
+		ng-click="dismiss();"
+	) ×
+	.feat-onboard-wrapper
+		h1.feat-onboard-title
+			| Introducing 
+			span.feat-onboard-highlight Commenting
+			|  & 
+			span.feat-onboard-highlight Track Changes
+		p.feat-onboard-description
+			span.feat-onboard-highlight Commenting 
+			| and 
+			span.feat-onboard-highlight Track Changes 
+			| will make it easier for you to work with peers in your documents. 
 
-			.feat-onboard-tutorial-wrapper
-				button.btn.btn-primary.feat-onboard-nav-btn(
-					ng-click="gotoPrevStep();"
-					ng-disabled="onboarding.innerStep === 1;")
-					i.fa.fa-arrow-left
-				div(ng-show="onboarding.innerStep === 1;")
-					video.feat-onboard-video(
-						video-play-state="onboarding.innerStep === 1;"
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/open-review.gif")
-				div(ng-show="onboarding.innerStep === 2;")
-					video.feat-onboard-video(
-						video-play-state="onboarding.innerStep === 2;"
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/commenting.gif")
-				div(ng-show="onboarding.innerStep === 3;")
-					video.feat-onboard-video(
-						video-play-state="onboarding.innerStep === 3;"
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/add-changes.gif")
-				div(ng-show="onboarding.innerStep === 4;")
-					video.feat-onboard-video(
-						video-play-state="onboarding.innerStep === 4;"
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/accept-changes.gif")
-				button.btn.btn-primary.feat-onboard-nav-btn(
-					ng-click="gotoNextStep();"
-					ng-disabled="onboarding.innerStep === onboarding.nSteps;")
-					i.fa.fa-arrow-right
+		.feat-onboard-tutorial-wrapper
+			button.btn.btn-primary.feat-onboard-nav-btn(
+				ng-click="gotoPrevStep();"
+				ng-disabled="onboarding.innerStep === 1;")
+				i.fa.fa-arrow-left
+			div(ng-show="onboarding.innerStep === 1;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 1;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/open-review.gif")
+			div(ng-show="onboarding.innerStep === 2;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 2;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/commenting.gif")
+			div(ng-show="onboarding.innerStep === 3;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 3;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/add-changes.gif")
+			div(ng-show="onboarding.innerStep === 4;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 4;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/accept-changes.gif")
+			button.btn.btn-primary.feat-onboard-nav-btn(
+				ng-click="gotoNextStep();"
+				ng-disabled="onboarding.innerStep === onboarding.nSteps;")
+				i.fa.fa-arrow-right
 
-			div(ng-switch="onboarding.innerStep")
-				.row(ng-switch-when="1")
-					.col-xs-6
-						h2.feat-onboard-adv-title Commenting
-						p.feat-onboard-description Want to discuss specific parts of the text?
-						p.feat-onboard-description Use our brand-new commenting system.
-					.col-xs-6
-						h2.feat-onboard-adv-title Track Changes
-						p.feat-onboard-description See changes in your documents, live.
-						p.feat-onboard-description Track, accept and reject changes individually.
-				.row(ng-switch-when="2")
-					.col-xs-12
-						h2.feat-onboard-adv-title Commenting
-						p.feat-onboard-description Just select a span of text and click on 
-							span.feat-onboard-highlight “Add comment”
-							| .	
-						p.feat-onboard-description 
-							span.feat-onboard-highlight Comments 
-							| can be 
-							span.feat-onboard-highlight replied 
-							| to, 
-							span.feat-onboard-highlight resolved 
-							| and permanently 
-							span.feat-onboard-highlight deleted
-							| .
-				.row(ng-switch-when="3")
-					.col-xs-12
-						h2.feat-onboard-adv-title Track Changes
-						p.feat-onboard-description
-							| Let your peers know what you've been up to.
-						p.feat-onboard-description
-							| Click on the 
-							span.feat-onboard-highlight “Track Changes” 
-							| toggle to start marking your insertions, as well as your deletions.
+		div(ng-switch="onboarding.innerStep")
+			.row(ng-switch-when="1")
+				.col-xs-6
+					h2.feat-onboard-adv-title Commenting
+					p.feat-onboard-description Want to discuss specific parts of the text?
+					p.feat-onboard-description Use our brand-new commenting system.
+				.col-xs-6
+					h2.feat-onboard-adv-title Track Changes
+					p.feat-onboard-description See changes in your documents, live.
+					p.feat-onboard-description Track, accept and reject changes individually.
+			.row(ng-switch-when="2")
+				.col-xs-12
+					h2.feat-onboard-adv-title Commenting
+					p.feat-onboard-description Just select a span of text and click on 
+						span.feat-onboard-highlight “Add comment”
+						| .	
+					p.feat-onboard-description 
+						span.feat-onboard-highlight Comments 
+						| can be 
+						span.feat-onboard-highlight replied 
+						| to, 
+						span.feat-onboard-highlight resolved 
+						| and permanently 
+						span.feat-onboard-highlight deleted
+						| .
+			.row(ng-switch-when="3")
+				.col-xs-12
+					h2.feat-onboard-adv-title Track Changes
+					p.feat-onboard-description
+						| Let your peers know what you've been up to.
+					p.feat-onboard-description
+						| Click on the 
+						span.feat-onboard-highlight “Track Changes” 
+						| toggle to start marking your insertions, as well as your deletions.
 
-				.row(ng-switch-when="4") 
-					.col-xs-12
-						h2.feat-onboard-adv-title Track Changes
-						p.feat-onboard-description Upon reviewing, 
-							span.feat-onboard-highlight changes 
-							| can be accepted or undone.
-						p.feat-onboard-description
-							| Click 
-							span.feat-onboard-highlight “Accept” 
-							| or 
-							span.feat-onboard-highlight “Reject” 
-							| to incorporate or discard an individual change.
+			.row(ng-switch-when="4") 
+				.col-xs-12
+					h2.feat-onboard-adv-title Track Changes
+					p.feat-onboard-description Upon reviewing, 
+						span.feat-onboard-highlight changes 
+						| can be accepted or undone.
+					p.feat-onboard-description
+						| Click 
+						span.feat-onboard-highlight “Accept” 
+						| or 
+						span.feat-onboard-highlight “Reject” 
+						| to incorporate or discard an individual change.

services/web/public/coffee/ide.coffee

@@ -72,6 +72,10 @@ define [
 			reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}")
 		}
 		$scope.user = window.user
+		
+		$scope.$watch "project.features.trackChangesVisible", (visible) ->
+			return if !visible?
+			$scope.ui.showCollabFeaturesOnboarding = window.showTrackChangesOnboarding and visible
 
 		$scope.shouldABTestPlans = false
 		if $scope.user.signUpDate >= '2016-10-27'

services/web/public/coffee/ide/FeatureOnboardingController.coffee

@@ -5,16 +5,10 @@ define [
 		$scope.onboarding = 
 			innerStep: 1
 			nSteps: 4
-		
-		$scope.$watch "project.features.trackChangesVisible", (visible) ->
-			return if !visible?
-			$scope.showCollabFeaturesOnboarding = window.showTrackChangesOnboarding and visible
 
 		$scope.dismiss = () ->
-			event_tracking.sendMB "shown-track-changes-onboarding"
-			$scope.$applyAsync(() -> $scope.showCollabFeaturesOnboarding = false)
-			$(document).off "keydown", handleKeydown
-			$(document).off "click", $scope.dismiss
+			event_tracking.sendMB "shown-track-changes-onboarding-2"
+			$scope.$applyAsync(() -> $scope.ui.showCollabFeaturesOnboarding = false)
 
 		$scope.gotoPrevStep = () ->
 			if $scope.onboarding.innerStep > 1