Basic mark-up for AB testing labels.

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

@@ -1,123 +1,252 @@
-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"
-	)
-		i.fa.fa-fw.fa-bars
-	a(
-		href="/project"
-		tooltip="#{translate('back_to_projects')}",
-		tooltip-placement="bottom",
-		tooltip-append-to-body="true"
+div(sixpack-switch="editor-header")
+
+	header.toolbar.toolbar-header(
+		ng-cloak,
+		ng-hide="state.loading"
+		sixpack-default
 	)
-		i.fa.fa-fw.fa-level-up
-	span(ng-controller="PdfViewToggleController")
-		a(
+		a.btn.btn-full-height(
 			href,
-			ng-show="ui.pdfLayout == 'flat' && fileTreeClosed",
-			tooltip="PDF",
+			ng-click="ui.leftMenuShown = true"
+			tooltip='#{translate("menu")}',
 			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
+			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 }}
+		.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"
-		)
+			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
+			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"
+		.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 }"
 				)
-					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 }}
+				span.label.label-info(
+					ng-show="unreadMessages > 0"
+				) {{ unreadMessages }}
 
-	
-		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
+	header.toolbar.toolbar-header.toolbar-with-labels(
+		ng-cloak,
+		ng-hide="state.loading"
+		sixpack-when="labels"
+	)
 		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"
+			ng-click="ui.leftMenuShown = true"
 		)
-			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-bars
+			p.toolbar-label Menu
+		a(
+			href="/project"
 		)
-			i.fa.fa-fw.fa-comment(
-				ng-class="{ 'bounce': unreadMessages > 0 }"
+			i.fa.fa-fw.fa-level-up
+			p.toolbar-label Back
+
+		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.label.label-info(
-				ng-show="unreadMessages > 0"
-			) {{ unreadMessages }}
+				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')"
+				ng-click="openShareProjectModal()",
+				ng-controller="ShareController"
+			)
+				i.fa.fa-fw.fa-group
+				p.toolbar-label Share
+			a.btn.btn-full-height(
+				href,
+				ng-mouseenter="trackHover('track-changes')"
+				ng-click="toggleTrackChanges()",
+				ng-class="{ active: (ui.view == 'track-changes') }"
+			)
+				i.fa.fa-fw.fa-history
+				p.toolbar-label Changes
+			a.btn.btn-full-height(
+				href,
+				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 }}
+				p.toolbar-label Chat