Merge pull request #325 from sharelatex/pr-ab-test-labels

AB test labels

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

@@ -1,123 +1,389 @@
-header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
-	a.btn.btn-full-height(
-		href,
-		ng-click="ui.leftMenuShown = true"
-		tooltip='#{translate("menu")}',
-		tooltip-placement="bottom",
-		tooltip-append-to-body="true"
+div(ng-if="!shouldABTestHeaderLabels")
+	header.toolbar.toolbar-header(
+		ng-cloak,
+		ng-hide="state.loading"
 	)
-		i.fa.fa-fw.fa-bars
-	a(
-		href="/project"
-		tooltip="#{translate('back_to_projects')}",
-		tooltip-placement="bottom",
-		tooltip-append-to-body="true"
-	)
-		i.fa.fa-fw.fa-level-up
-	span(ng-controller="PdfViewToggleController")
+		a.btn.btn-full-height(
+			href,
+			ng-click="ui.leftMenuShown = true"
+			tooltip='#{translate("menu")}',
+			tooltip-placement="bottom",
+			tooltip-append-to-body="true",
+		)
+			i.fa.fa-fw.fa-bars
 		a(
-			href,
-			ng-show="ui.pdfLayout == 'flat' && fileTreeClosed",
-			tooltip="PDF",
+			href="/project"
+			tooltip="#{translate('back_to_projects')}",
 			tooltip-placement="bottom",
-			tooltip-append-to-body="true",
-			ng-click="togglePdfView()",
-			ng-class="{ 'active': ui.view == 'pdf' }"
+			tooltip-append-to-body="true"
 		)
-			i.fa.fa-file-pdf-o
-
-	.toolbar-center.project-name(ng-controller="ProjectNameController")
-		span.name(
-			ng-dblclick="!permissions.admin || startRenaming()",
-			ng-show="!state.renaming"
-		) {{ project.name }}
-
-		input.form-control(
-			type="text"
-			ng-model="inputs.name",
-			ng-show="state.renaming",
-			on-enter="finishRenaming()",
-			ng-blur="finishRenaming()",
-			select-name-when="state.renaming"
-		)
-
-		a.rename(
-			ng-if="permissions.admin",
-			href='#',
-			tooltip-placement="bottom",
-			tooltip="#{translate('rename')}",
-			tooltip-append-to-body="true",
-			ng-click="startRenaming()",
-			ng-show="!state.renaming"
-		)
-			i.fa.fa-pencil
-
-	.toolbar-right
-		span.online-users(
-			ng-show="onlineUsersArray.length > 0"
-			ng-controller="OnlineUsersController"
-		)
-			span(ng-if="onlineUsersArray.length < 4")
-				span.online-user(
-					ng-repeat="user in onlineUsersArray",
-					ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
-					popover="{{ user.name }}"
-					popover-placement="bottom"
-					popover-append-to-body="true"
-					popover-trigger="mouseenter"
-					ng-click="gotoUser(user)"
-				) {{ user.name.slice(0,1) }}
-			
-			span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
-				span.online-user.online-user-multi(
-					dropdown-toggle,
-					tooltip="#{translate('connected_users')}",
-					tooltip-placement="left"
-				)
-					strong {{ onlineUsersArray.length }}
-					i.fa.fa-fw.fa-user
-				ul.dropdown-menu.pull-right
-					li.dropdown-header #{translate('connected_users')}
-					li(ng-repeat="user in onlineUsersArray")
-						a(href, ng-click="gotoUser(user)")
-							span.online-user(
-								ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
-							) {{ user.name.slice(0,1) }}
-							| {{ user.name }}
-
-	
-		a.btn.btn-full-height(
-			href,
-			ng-if="permissions.admin",
-			tooltip="#{translate('share')}",
-			tooltip-placement="bottom",
-			ng-mouseenter="trackHover('share')"
-			ng-click="openShareProjectModal()",
-			ng-controller="ShareController"
-		)
-			i.fa.fa-fw.fa-group
-		a.btn.btn-full-height(
-			href,
-			ng-mouseenter="trackHover('track-changes')"
-			ng-click="toggleTrackChanges()",
-			ng-class="{ active: (ui.view == 'track-changes') }"
-			tooltip="#{translate('recent_changes')}",
-			tooltip-placement="bottom"
-		)
-			i.fa.fa-fw.fa-history
-		a.btn.btn-full-height(
-			href,
-			tooltip="#{translate('chat')}",
-			tooltip-placement="bottom",
-			ng-class="{ active: ui.chatOpen }",
-			ng-mouseenter="trackHover('chat')"
-			ng-click="toggleChat()",
-			ng-controller="ChatButtonController",
-			ng-show="!anonymous"
-		)
-			i.fa.fa-fw.fa-comment(
-				ng-class="{ 'bounce': unreadMessages > 0 }"
+			i.fa.fa-fw.fa-level-up
+		
+		span(ng-controller="PdfViewToggleController")
+			a(
+				href,
+				ng-show="ui.pdfLayout == 'flat' && fileTreeClosed",
+				tooltip="PDF",
+				tooltip-placement="bottom",
+				tooltip-append-to-body="true",
+				ng-click="togglePdfView()",
+				ng-class="{ 'active': ui.view == 'pdf' }"
 			)
-			span.label.label-info(
-				ng-show="unreadMessages > 0"
-			) {{ unreadMessages }}
+				i.fa.fa-file-pdf-o
+
+		.toolbar-center.project-name(ng-controller="ProjectNameController")
+			span.name(
+				ng-dblclick="!permissions.admin || startRenaming()",
+				ng-show="!state.renaming"
+			) {{ project.name }}
+
+			input.form-control(
+				type="text"
+				ng-model="inputs.name",
+				ng-show="state.renaming",
+				on-enter="finishRenaming()",
+				ng-blur="finishRenaming()",
+				select-name-when="state.renaming"
+			)
+
+			a.rename(
+				ng-if="permissions.admin",
+				href='#',
+				tooltip-placement="bottom",
+				tooltip="#{translate('rename')}",
+				tooltip-append-to-body="true",
+				ng-click="startRenaming()",
+				ng-show="!state.renaming"
+			)
+				i.fa.fa-pencil
+
+		.toolbar-right
+			span.online-users(
+				ng-show="onlineUsersArray.length > 0"
+				ng-controller="OnlineUsersController"
+			)
+				span(ng-if="onlineUsersArray.length < 4")
+					span.online-user(
+						ng-repeat="user in onlineUsersArray",
+						ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
+						popover="{{ user.name }}"
+						popover-placement="bottom"
+						popover-append-to-body="true"
+						popover-trigger="mouseenter"
+						ng-click="gotoUser(user)"
+					) {{ user.name.slice(0,1) }}
+				
+				span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
+					span.online-user.online-user-multi(
+						dropdown-toggle,
+						tooltip="#{translate('connected_users')}",
+						tooltip-placement="left"
+					)
+						strong {{ onlineUsersArray.length }}
+						i.fa.fa-fw.fa-user
+					ul.dropdown-menu.pull-right
+						li.dropdown-header #{translate('connected_users')}
+						li(ng-repeat="user in onlineUsersArray")
+							a(href, ng-click="gotoUser(user)")
+								span.online-user(
+									ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
+								) {{ user.name.slice(0,1) }}
+								| {{ user.name }}
+
+		
+			a.btn.btn-full-height(
+				href,
+				ng-if="permissions.admin",
+				tooltip="#{translate('share')}",
+				tooltip-placement="bottom",
+				ng-mouseenter="trackHover('share')"
+				ng-click="openShareProjectModal()",
+				ng-controller="ShareController",
+			)
+				i.fa.fa-fw.fa-group
+			a.btn.btn-full-height(
+				href,
+				ng-mouseenter="trackHover('track-changes')"
+				ng-click="toggleTrackChanges()",
+				ng-class="{ active: (ui.view == 'track-changes') }"
+				tooltip="#{translate('recent_changes')}",
+				tooltip-placement="bottom",
+			)
+				i.fa.fa-fw.fa-history
+			a.btn.btn-full-height(
+				href,
+				tooltip="#{translate('chat')}",
+				tooltip-placement="bottom",
+				ng-class="{ active: ui.chatOpen }",
+				ng-mouseenter="trackHover('chat')"
+				ng-click="toggleChat()",
+				ng-controller="ChatButtonController",
+				ng-show="!anonymous",
+			)
+				i.fa.fa-fw.fa-comment(
+					ng-class="{ 'bounce': unreadMessages > 0 }"
+				)
+				span.label.label-info(
+					ng-show="unreadMessages > 0"
+				) {{ unreadMessages }}
+
+div(ng-if="shouldABTestHeaderLabels")
+	div(sixpack-switch="editor-header")
+		header.toolbar.toolbar-header(
+			ng-cloak,
+			ng-hide="state.loading"
+			sixpack-default
+		)
+			a.btn.btn-full-height(
+				href,
+				ng-click="ui.leftMenuShown = true; trackABTestConversion('menu');"
+				tooltip='#{translate("menu")}',
+				tooltip-placement="bottom",
+				tooltip-append-to-body="true",
+				sixpack-convert="editor-header"
+			)
+				i.fa.fa-fw.fa-bars
+			a(
+				href="/project"
+				tooltip="#{translate('back_to_projects')}",
+				tooltip-placement="bottom",
+				tooltip-append-to-body="true"
+			)
+				i.fa.fa-fw.fa-level-up
+			
+			span(ng-controller="PdfViewToggleController")
+				a(
+					href,
+					ng-show="ui.pdfLayout == 'flat' && fileTreeClosed",
+					tooltip="PDF",
+					tooltip-placement="bottom",
+					tooltip-append-to-body="true",
+					ng-click="togglePdfView()",
+					ng-class="{ 'active': ui.view == 'pdf' }"
+				)
+					i.fa.fa-file-pdf-o
+
+			.toolbar-center.project-name(ng-controller="ProjectNameController")
+				span.name(
+					ng-dblclick="!permissions.admin || startRenaming()",
+					ng-show="!state.renaming"
+				) {{ project.name }}
+
+				input.form-control(
+					type="text"
+					ng-model="inputs.name",
+					ng-show="state.renaming",
+					on-enter="finishRenaming()",
+					ng-blur="finishRenaming()",
+					select-name-when="state.renaming"
+				)
+
+				a.rename(
+					ng-if="permissions.admin",
+					href='#',
+					tooltip-placement="bottom",
+					tooltip="#{translate('rename')}",
+					tooltip-append-to-body="true",
+					ng-click="startRenaming()",
+					ng-show="!state.renaming"
+				)
+					i.fa.fa-pencil
+
+			.toolbar-right
+				span.online-users(
+					ng-show="onlineUsersArray.length > 0"
+					ng-controller="OnlineUsersController"
+				)
+					span(ng-if="onlineUsersArray.length < 4")
+						span.online-user(
+							ng-repeat="user in onlineUsersArray",
+							ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
+							popover="{{ user.name }}"
+							popover-placement="bottom"
+							popover-append-to-body="true"
+							popover-trigger="mouseenter"
+							ng-click="gotoUser(user)"
+						) {{ user.name.slice(0,1) }}
+					
+					span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
+						span.online-user.online-user-multi(
+							dropdown-toggle,
+							tooltip="#{translate('connected_users')}",
+							tooltip-placement="left"
+						)
+							strong {{ onlineUsersArray.length }}
+							i.fa.fa-fw.fa-user
+						ul.dropdown-menu.pull-right
+							li.dropdown-header #{translate('connected_users')}
+							li(ng-repeat="user in onlineUsersArray")
+								a(href, ng-click="gotoUser(user)")
+									span.online-user(
+										ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
+									) {{ user.name.slice(0,1) }}
+									| {{ user.name }}
+
+			
+				a.btn.btn-full-height(
+					href,
+					ng-if="permissions.admin",
+					tooltip="#{translate('share')}",
+					tooltip-placement="bottom",
+					ng-mouseenter="trackHover('share')"
+					ng-click="openShareProjectModal(); trackABTestConversion('share');",
+					ng-controller="ShareController",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-group
+				a.btn.btn-full-height(
+					href,
+					ng-mouseenter="trackHover('track-changes')"
+					ng-click="toggleTrackChanges(); trackABTestConversion('history');",
+					ng-class="{ active: (ui.view == 'track-changes') }"
+					tooltip="#{translate('recent_changes')}",
+					tooltip-placement="bottom",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-history
+				a.btn.btn-full-height(
+					href,
+					tooltip="#{translate('chat')}",
+					tooltip-placement="bottom",
+					ng-class="{ active: ui.chatOpen }",
+					ng-mouseenter="trackHover('chat')"
+					ng-click="toggleChat(); trackABTestConversion('chat');",
+					ng-controller="ChatButtonController",
+					ng-show="!anonymous",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-comment(
+						ng-class="{ 'bounce': unreadMessages > 0 }"
+					)
+					span.label.label-info(
+						ng-show="unreadMessages > 0"
+					) {{ unreadMessages }}
+
+		header.toolbar.toolbar-header.toolbar-with-labels(
+			ng-cloak,
+			ng-hide="state.loading"
+			sixpack-when="labels"
+		)
+			.toolbar-left
+				a.btn.btn-full-height(
+					href,
+					ng-click="ui.leftMenuShown = true; trackABTestConversion('menu');",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-bars
+					p.toolbar-label #{translate("menu")}
+				a(
+					href="/project"
+				)
+					i.fa.fa-fw.fa-level-up
+
+			span(ng-controller="PdfViewToggleController")
+				a(
+					href,
+					ng-show="ui.pdfLayout == 'flat' && fileTreeClosed",
+					tooltip="PDF",
+					tooltip-placement="bottom",
+					tooltip-append-to-body="true",
+					ng-click="togglePdfView()",
+					ng-class="{ 'active': ui.view == 'pdf' }"
+				)
+					i.fa.fa-file-pdf-o
+
+			.toolbar-center.project-name(ng-controller="ProjectNameController")
+				span.name(
+					ng-dblclick="!permissions.admin || startRenaming()",
+					ng-show="!state.renaming"
+				) {{ project.name }}
+
+				input.form-control(
+					type="text"
+					ng-model="inputs.name",
+					ng-show="state.renaming",
+					on-enter="finishRenaming()",
+					ng-blur="finishRenaming()",
+					select-name-when="state.renaming"
+				)
+
+				a.rename(
+					ng-if="permissions.admin",
+					href='#',
+					tooltip-placement="bottom",
+					tooltip="#{translate('rename')}",
+					tooltip-append-to-body="true",
+					ng-click="startRenaming()",
+					ng-show="!state.renaming"
+				)
+					i.fa.fa-pencil
+
+			.toolbar-right
+				span.online-users(
+					ng-show="onlineUsersArray.length > 0"
+					ng-controller="OnlineUsersController"
+				)
+					span(ng-if="onlineUsersArray.length < 4")
+						span.online-user(
+							ng-repeat="user in onlineUsersArray",
+							ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
+							popover="{{ user.name }}"
+							popover-placement="bottom"
+							popover-append-to-body="true"
+							popover-trigger="mouseenter"
+							ng-click="gotoUser(user)"
+						) {{ user.name.slice(0,1) }}
+					
+					span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
+						span.online-user.online-user-multi(
+							dropdown-toggle,
+							tooltip="#{translate('connected_users')}",
+							tooltip-placement="left"
+						)
+							strong {{ onlineUsersArray.length }}
+							i.fa.fa-fw.fa-user
+						ul.dropdown-menu.pull-right
+							li.dropdown-header #{translate('connected_users')}
+							li(ng-repeat="user in onlineUsersArray")
+								a(href, ng-click="gotoUser(user)")
+									span.online-user(
+										ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
+									) {{ user.name.slice(0,1) }}
+									| {{ user.name }}
+
+			
+				a.btn.btn-full-height(
+					href,
+					ng-if="permissions.admin",
+					ng-mouseenter="trackHover('share'); trackABTestConversion('share');"
+					ng-click="openShareProjectModal()",
+					ng-controller="ShareController",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-group
+					p.toolbar-label #{translate("share")}
+				a.btn.btn-full-height(
+					href,
+					ng-mouseenter="trackHover('track-changes')"
+					ng-click="toggleTrackChanges(); trackABTestConversion('history');",
+					ng-class="{ active: (ui.view == 'track-changes') }",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-history
+					p.toolbar-label #{translate("history")}
+				a.btn.btn-full-height(
+					href,
+					ng-class="{ active: ui.chatOpen }",
+					ng-mouseenter="trackHover('chat')"
+					ng-click="toggleChat(); trackABTestConversion('chat');",
+					ng-controller="ChatButtonController",
+					ng-show="!anonymous",
+					sixpack-convert="editor-header"
+				)
+					i.fa.fa-fw.fa-comment(
+						ng-class="{ 'bounce': unreadMessages > 0 }"
+					)
+					span.label.label-info(
+						ng-show="unreadMessages > 0"
+					) {{ unreadMessages }}
+					p.toolbar-label #{translate("chat")}

services/web/public/coffee/ide.coffee

@@ -44,7 +44,7 @@ define [
 	SafariScrollPatcher
 ) ->
 
-	App.controller "IdeController", ($scope, $timeout, ide, localStorage, event_tracking) ->
+	App.controller "IdeController", ($scope, $timeout, ide, localStorage, sixpack, event_tracking) ->
 		# Don't freak out if we're already in an apply callback
 		$scope.$originalApply = $scope.$apply
 		$scope.$apply = (fn = () ->) ->
@@ -71,6 +71,24 @@ define [
 
 		$scope.chat = {}
 
+
+		# Only run the header AB test for newly registered users.
+		_abTestStartDate = new Date(Date.UTC(2016, 8, 28))
+		_userSignUpDate = new Date(window.user.signUpDate)
+		
+		$scope.shouldABTestHeaderLabels = _userSignUpDate > _abTestStartDate
+		$scope.headerLabelsABVariant = ""
+
+		if ($scope.shouldABTestHeaderLabels)
+			sixpack.participate "editor-header", [ "default", "labels"], (chosenVariation) ->
+				$scope.headerLabelsABVariant = chosenVariation
+
+		$scope.trackABTestConversion = (headerItem) ->
+			event_tracking.sendMB "header-label-ab-conversion", {
+				headerItem: headerItem,
+				variant: $scope.headerLabelsABVariant
+			}
+
 		# Tracking code.
 		$scope.$watch "ui.view", (newView, oldView) ->
 			if newView? and newView != "editor" and newView != "pdf"

services/web/public/stylesheets/app/editor/toolbar.less

@@ -17,7 +17,9 @@
 		outline: none;
 	}
 
-	> a:not(.btn), .toolbar-right > a:not(.btn) {
+	> a:not(.btn),
+	.toolbar-left > a:not(.btn),
+	.toolbar-right > a:not(.btn) {
 		display: inline-block;
 		color: @gray-light;
 		padding: 4px 10px 5px;
@@ -64,6 +66,11 @@
 		}
 	}
 
+	.toolbar-left {
+		float: left;
+		text-align: center;
+	}
+
 	.toolbar-right {
 		float: right;
 		.btn-full-height {
@@ -130,6 +137,14 @@
 	}
 }
 
+.toolbar-label {
+	display: inline-block;
+	margin: 0 4px;
+	font-size: 12px;
+	font-weight: normal;
+	vertical-align: middle;
+}
+
 .editor-dark {
 	.toolbar-alt {
 		background-color: darken(@editor-dark-background-color, 0%);