Merge pull request #463 from sharelatex/pr-ab-test-add-comments

PR AB test "add comment" button

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

@@ -1,18 +1,18 @@
-.rp-in-editor-widgets
-	a.rp-track-changes-indicator(
-		href
-		ng-if="editor.wantTrackChanges"
-		ng-click="toggleReviewPanel();"
-		ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }"
-	) !{translate("track_changes_is_on")}
-	a.rp-add-comment-btn(
-		href
-		ng-if="reviewPanel.newAddCommentUI && reviewPanel.entries[editor.open_doc_id]['add-comment'] != null"
-		ng-click="addNewComment();"
-	) 
-		i.fa.fa-comment
-		|  #{translate("add_comment")}
 #review-panel
+	.rp-in-editor-widgets
+		a.rp-track-changes-indicator(
+			href
+			ng-if="editor.wantTrackChanges"
+			ng-click="toggleReviewPanel();"
+			ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }"
+		) !{translate("track_changes_is_on")}
+		a.rp-add-comment-btn(
+			href
+			ng-if="reviewPanel.newAddCommentUI && reviewPanel.entries[editor.open_doc_id]['add-comment'] != null"
+			ng-click="addNewComment();"
+		) 
+			i.fa.fa-comment
+			|  #{translate("add_comment")}
 	.review-panel-toolbar
 		resolved-comments-dropdown(
 			class="rp-flex-block"

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

@@ -4,7 +4,7 @@ define [
 	"ide/colors/ColorManager"
 	"ide/review-panel/RangesTracker"
 ], (App, EventEmitter, ColorManager, RangesTracker) ->
-	App.controller "ReviewPanelController", ($scope, $element, ide, $timeout, $http, $modal, event_tracking, localStorage) ->
+	App.controller "ReviewPanelController", ($scope, $element, ide, $timeout, $http, $modal, event_tracking, sixpack, localStorage) ->
 		$reviewPanelEl = $element.find "#review-panel"
 
 		$scope.SubViews =
@@ -29,8 +29,12 @@ define [
 			loadingThreads: false
 			newAddCommentUI: false # Test new UI for adding comments; remove afterwards.
 
-		if window.location.search.match /new-comments=true/
-			$scope.reviewPanel.newAddCommentUI = true
+		$scope.shouldABAddCommentBtn = false
+		if $scope.user.signUpDate >= '2017-03-27'
+			sixpack.participate "add-comment-btn", [ "default", "editor-corner" ], (variation) ->
+				$scope.shouldABAddCommentBtn = true
+				$scope.variationABAddCommentBtn = variation
+				$scope.reviewPanel.newAddCommentUI = (variation == "editor-corner")
 
 		window.addEventListener "beforeunload", () ->
 			collapsedStates = {}
@@ -339,7 +343,9 @@ define [
 			$scope.$broadcast "comment:select_line"
 			$timeout () ->
 				$scope.$broadcast "review-panel:layout"
-		
+			if $scope.shouldABAddCommentBtn and !$scope.ui.reviewPanelOpen
+				sixpack.convert "add-comment-btn"
+
 		$scope.submitNewComment = (content) ->
 			return if !content? or content == ""
 			doc_id = $scope.editor.open_doc_id

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

@@ -90,7 +90,7 @@
 	}
 
 #review-panel {
-	display: none;
+	display: block;
 	.rp-size-expanded & {
 		display: flex;
 		flex-direction: column;
@@ -98,7 +98,6 @@
 		overflow: visible;
 	}
 	.rp-size-mini & {
-		display: block;
 		width: @review-off-width;
 		z-index: 6;
 	}
@@ -152,7 +151,13 @@
 	}
 
 .rp-entry-list {
+	display: none;
 	width: 100%;
+
+	.rp-size-expanded &,
+	.rp-size-mini & {
+		display: block;
+	}
 	
 	.rp-state-current-file & {
 		position: absolute;
@@ -620,11 +625,12 @@
 }
 
 .rp-nav {
-	display: flex;
+	display: none;
 	flex-shrink: 0;
-	.rp-size-mini & {
-		display: none;
+	.rp-size-expanded & {
+		display: flex;
 	}
+
 	.rp-state-current-file & {
 		position: absolute;
 		bottom: 0;