Lengthen time slides are shown. Darken panes which are irrelevant to what is shown.

src/styles/components/helptour.scss

@@ -104,3 +104,36 @@
     border-right-color: #FFF;
   }
 }
+.helptourShowRoomPane {
+  #bar,
+  #buddylist {
+    opacity: .4;
+  }
+  .overlaybar {
+    background: $componentfg2;
+  }
+}
+.helptourShowSettingsPane {
+  #roombar {
+    opacity: .4;
+  }
+}
+.helptourShowChatPane {
+  #roombar,
+  #buddylist {
+    opacity: .4;
+  }
+}
+.helptourShowBuddyListPane {
+  #bar,
+  #roombar {
+    opacity: .4;
+  }
+}
+.helptourShowMediaAccessPane {
+  #bar,
+  #roombar,
+  #buddylist {
+    opacity: .4;
+  }
+}

static/js/directives/helptour.js

@@ -25,7 +25,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
 	return [function() {
 
 		var controller = ['$scope', '$timeout', '$modal', '$rootScope', 'mediaStream', function($scope, $timeout, $modal, $rootScope, mediaStream) {
-			var displayTime = 2000;
+			var displayTime = 12000;
 			var shown = localStorage.getItem('mediastream-helptour');
 			var timeoutAutoStepsIn = [];
 			var timeoutAutoStepsOut = [];
@@ -47,7 +47,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
 					mediaStream.webrtc.testMediaAccess(function() {});
 				}
 			};
-			menus.toggleRoom = function() {
+			menus.toggleRoom = function(css) {
 				$scope.layout.roombar = !$scope.layout.roombar;
 			};
 			menus.toggleChat = function() {
@@ -56,13 +56,20 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
 			menus.toggleSettings = function() {
 				$scope.layout.settings = !$scope.layout.settings;
 			};
+			menus.toggleCSS = function(css) {
+				$('body').toggleClass(css);
+			};
 			var toggleTargetMenu = function() {
 				var menu = $($scope.steps[$scope.currentIndex]).data('menu');
+				var css = $($scope.steps[$scope.currentIndex]).data('css');
 				if (menu) {
 					if (menu.search('trigger') > -1) {
 						trigger = !trigger;
 					}
-					menus[menu]();
+					menus[menu](css);
+				}
+				if (css) {
+					menus.toggleCSS(css);
 				}
 			};
 			var outStep = function() {

static/partials/helpoverlay.html

@@ -1,31 +1,31 @@
 <div class="helptour">
     <div class="tourSteps">
-        <div class="popover bottom roomPane" data-menu="toggleRoom">
+        <div class="popover bottom roomPane" data-menu="toggleRoom" data-css="helptourShowRoomPane">
             <div class="arrow"></div>
             <h3 class="popover-title">{{_('A room')}}</h3>
             <div class="popover-content">{{_('Place to meet people(buddy). Change rooms here and easily send friends a room link with the social media links provided. Not all room names are available and certain characters are automatically removed.')}}</div>
         </div>
-        <div class="popover left buddyListPane">
+        <div class="popover left buddyListPane" data-css="helptourShowBuddyListPane">
             <div class="arrow"></div>
             <h3 class="popover-title">{{_('Buddy List')}}</h3>
             <div class="popover-content">{{_('List of all buddys in the same room and saved contacts.')}}</div>
         </div>
-        <div class="popover left buddyListPane">
+        <div class="popover left buddyListPane" data-css="helptourShowBuddyListPane">
             <div class="arrow"></div>
             <h3 class="popover-title">{{_('A buddy')}}</h3>
             <div class="popover-content">{{_('An individual in the same room. If someone is in the same room, a buddy card will be shown. Simply hover over the card to callout chat/call actions. If a star appears next to a buddy comment, the buddy is logged in. When the star is filled the buddy is a contact. Click the star to add a buddy as a contact or remove a contact.')}}</div>
         </div>
-        <div class="popover left chatPane" data-menu="toggleChat">
+        <div class="popover left chatPane" data-menu="toggleChat" data-css="helptourShowChatPane">
             <div class="arrow"></div>
             <h3 class="popover-title">{{_('Chat sessions')}}</h3>
             <div class="popover-content">{{_('Group and individual chat sessions. Chat with everyone in a room or chat individually. In group chats you are able to share files and your current location. In individual chats you are also able to start a video call.')}}</div>
         </div>
-        <div class="popover left settingsPane" data-menu="toggleSettings">
+        <div class="popover left settingsPane" data-menu="toggleSettings" data-css="helptourShowSettingsPane">
             <div class="arrow"></div>
             <h3 class="popover-title">{{_('Settings')}}</h3>
             <div class="popover-content">{{_('Choose a name, upload a picture, signin, and customize you experience.')}}</div>
         </div>
-        <div class="popover bottom mediaAccessPane" data-menu="triggerMediaAccess">
+        <div class="popover bottom mediaAccessPane" data-menu="triggerMediaAccess" data-css="helptourShowMediaAccessPane">
             <div class="arrow"></div>
             <div class="secondArrow right"></div>
             <h3 class="popover-title">{{_('Media permission')}}</h3>