Hide new UI behind query string parameter.

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

@@ -19,7 +19,8 @@ div.full-size(
 			'rp-size-mini': (!ui.reviewPanelOpen && reviewPanel.hasEntries),\
 			'rp-size-expanded': ui.reviewPanelOpen,\
 			'rp-layout-left': reviewPanel.layoutToLeft,\
-			'rp-loading-threads': reviewPanel.loadingThreads\
+			'rp-loading-threads': reviewPanel.loadingThreads,\
+			'rp-new-comment-ui': reviewPanel.newAddCommentUI\
 		}"
 	)
 		.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")

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

@@ -7,7 +7,7 @@
 	) !{translate("track_changes_is_on")}
 	a.rp-add-comment-btn(
 		href
-		ng-if="reviewPanel.entries[editor.open_doc_id]['add-comment'] != null"
+		ng-if="reviewPanel.newAddCommentUI && reviewPanel.entries[editor.open_doc_id]['add-comment'] != null"
 		ng-click="addNewComment();"
 	) 
 		i.fa.fa-comment
@@ -81,6 +81,7 @@
 						on-start-new="startNewComment();"
 						on-submit="submitNewComment(content);"
 						on-cancel="cancelNewComment();"
+						on-indicator-click="toggleReviewPanel();"
 						layout-to-left="reviewPanel.layoutToLeft"
 					)
 
@@ -321,6 +322,14 @@ script(type='text/ng-template', id='resolvedCommentEntryTemplate')
 script(type='text/ng-template', id='addCommentEntryTemplate')
 	div
 		.rp-entry-callout.rp-entry-callout-add-comment
+		.rp-entry-indicator.rp-entry-indicator-add-comment(
+			ng-if="!commentState.adding"
+			ng-click="startNewComment(); onIndicatorClick();"
+			tooltip=translate("add_comment")
+			tooltip-placement="{{ layoutToLeft ? 'left' : 'right' }}"
+			tooltip-append-to-body="true"
+		)
+			i.fa.fa-commenting
 		.rp-entry.rp-entry-add-comment(
 			ng-class="[ (state.isAdding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
 		)

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

@@ -28,6 +28,10 @@ define [
 			layoutToLeft: false
 			rendererData: {}
 			loadingThreads: false
+			newAddCommentUI: false # Test new UI for adding comments; remove afterwards.
+
+		if window.location.search.match /new-comments=true/
+			$scope.reviewPanel.newAddCommentUI = true
 
 		window.addEventListener "beforeunload", () ->
 			collapsedStates = {}
@@ -166,7 +170,8 @@ define [
 			entries = $scope.reviewPanel.entries[$scope.editor.open_doc_id] or {}
 			permEntries = {}
 			for entry, entryData of entries
-				permEntries[entry] = entryData if entry != "add-comment"
+				if entry != "add-comment" or !$scope.reviewPanel.newAddCommentUI
+					permEntries[entry] = entryData 
 			Object.keys(permEntries).length
 		), (nEntries) ->
 			$scope.reviewPanel.hasEntries = nEntries > 0 and $scope.project.features.trackChangesVisible

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

@@ -7,7 +7,8 @@ define [
 		scope: 
 			onStartNew: "&"
 			onSubmit: "&"
-			onCancel: "&"	
+			onCancel: "&"
+			onIndicatorClick: "&"	
 			layoutToLeft: "="
 		link: (scope, element, attrs) ->
 			scope.state =

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

@@ -197,6 +197,10 @@
 		right: 4px;
 		z-index: 1;
 	}
+
+	.rp-new-comment-ui &-add-comment {
+		display: none;
+	}
 }
 
 .rp-entry-wrapper {
@@ -569,7 +573,7 @@
 		}
 	}
 
-	.rp-state-current-file &-add-comment {
+	.rp-size-mini.rp-new-comment-ui &-add-comment {
 		display: none;
 	}
 }
@@ -884,7 +888,7 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	font-size: 10px;
+	font-size: 11px;
 	
 	.rp-size-mini & {
 		right: @review-off-width;