Detach not shown task to deduce dom nodes and increase speed.

app/assets/javascripts/app/controllers/_application_controller.coffee

@@ -645,9 +645,19 @@ class App.ControllerPermanent extends App.Controller
 
     super
 
-    $('.content').addClass('hide')
     @navShow()
 
+class App.ControllerSubContent extends App.Controller
+  constructor: ->
+    if @requiredPermission
+      @permissionCheckRedirect(@requiredPermission)
+
+    super
+
+  show: =>
+    return if !@header
+    @title @header, true
+
 class App.ControllerContent extends App.Controller
   constructor: ->
     if @requiredPermission
@@ -655,10 +665,10 @@ class App.ControllerContent extends App.Controller
 
     super
 
-    $('.content').addClass('hide')
+    # hide tasks
-    $('#content').removeClass('hide')
-    @navShow()
     App.TaskManager.hideAll()
+    $('#content').removeClass('hide').removeClass('active')
+    @navShow()
 
 class App.ControllerModal extends App.Controller
   authenticateRequired: false

app/assets/javascripts/app/controllers/_application_controller_generic.coffee

@@ -373,19 +373,65 @@ class App.ControllerTabs extends App.Controller
     @lastActiveTab = $(e.target).attr('href')
     @Config.set('lastTab', @lastActiveTab)
 
-class App.ControllerNavSidbar extends App.ControllerContent
+class App.ControllerNavSidbar extends App.Controller
   constructor: (params) ->
     super
 
-    @navupdate ''
-
     if @authenticateRequired
       @authenticateCheckRedirect()
 
-    @params = params
+    @user = App.User.find(App.Session.get('id'))
+
+    @render(true)
+
+    @bind('ui:rerender',
+      =>
+        @render(true)
+        @updateNavigation(true)
+    )
+
+  show: (params) =>
+    @navupdate ''
+    @shown = true
+    for key, value of params
+      if key isnt 'el' && key isnt 'shown' && key isnt 'match'
+        @[key] = value
+    @updateNavigation()
+    if @activeController && _.isFunction(@activeController.show)
+      @activeController.show(params)
+
+  hide: =>
+    @shown = false
+    if @activeController && _.isFunction(@activeController.hide)
+      @activeController.hide()
+
+  render: (force = false) =>
+    groups = @groupsSorted()
+    selectedItem = @selectedItem(groups)
+
+    @html App.view('generic/navbar_level2/index')(
+      className: @configKey
+    )
+    @$('.sidebar').html App.view('generic/navbar_level2/navbar')(
+      groups: groups
+      className: @configKey
+      selectedItem: selectedItem
+    )
+
+  updateNavigation: (force) =>
+    groups = @groupsSorted()
+    selectedItem = @selectedItem(groups)
+    return if !selectedItem
+    return if !force && @lastTarget && selectedItem.target is @lastTarget
+    @lastTarget = selectedItem.target
+    @$('.sidebar li').removeClass('active')
+    @$(".sidebar li a[href=\"#{selectedItem.target}\"]").parent().addClass('active')
+
+    @executeController(selectedItem)
+
+  groupsSorted: =>
 
     # get accessable groups
-    user = App.User.find(App.Session.get('id'))
     groups = App.Config.get(@configKey)
     groupsUnsorted = []
     for key, item of groups
@@ -395,13 +441,15 @@ class App.ControllerNavSidbar extends App.ControllerContent
         else
           match = false
           for permissionName in item.permission
-            if !match && user.permission(permissionName)
+            if !match && @user.permission(permissionName)
               match = true
               groupsUnsorted.push item
-    @groupsSorted = _.sortBy(groupsUnsorted, (item) -> return item.prio)
+    _.sortBy(groupsUnsorted, (item) -> return item.prio)
+
+  selectedItem: (groups) =>
 
     # get items of group
-    for group in @groupsSorted
+    for group in groups
       items = App.Config.get(@configKey)
       itemsUnsorted = []
       for key, item of items
@@ -412,76 +460,57 @@ class App.ControllerNavSidbar extends App.ControllerContent
             else
               match = false
               for permissionName in item.permission
-                if !match && user && user.permission(permissionName)
+                if !match && @user && @user.permission(permissionName)
                   match = true
                   itemsUnsorted.push item
 
       group.items = _.sortBy(itemsUnsorted, (item) -> return item.prio)
 
-    # check last selected item
-    selectedItem = undefined
-    selectedItemMeta = App.Config.get("Runtime::#{@configKey}")
-    keepLastMenuFor = 1000 * 60 * 10
-    if selectedItemMeta && selectedItemMeta.date && new Date < new Date( selectedItemMeta.date.getTime() + keepLastMenuFor )
-      selectedItem = selectedItemMeta.selectedItem
-
     # set active item
-    for group in @groupsSorted
+    selectedItem = undefined
+    for group in groups
       if group.items
         for item in group.items
-          if !@target && !selectedItem
+          if item.target.match("/#{@target}$")
-            item.active = true
-            selectedItem = item
-          else if @target && item.target is window.location.hash
-            item.active = true
-            selectedItem = item
-          else if @target && window.location.hash.match(item.target)
             item.active = true
             selectedItem = item
           else
             item.active = false
 
-    @renderContainer(selectedItem)
+    if !selectedItem
-    @renderNavBar(selectedItem)
+      for group in groups
+        break if selectedItem
+        if group.items
+          for item in group.items
+            item.active = true
+            selectedItem = item
+            break
 
-    @bind(
+    selectedItem
-      'ui:rerender'
-      =>
-        @renderNavBar(selectedItem)
-    )
-
-  renderContainer: =>
-    return if $( ".#{@configKey}" )[0]
-    @html App.view('generic/navbar_level2/index')(
-      className: @configKey
-    )
-
-  renderNavBar: (selectedItem) =>
-
-    # remember latest selected item
-    selectedItemMeta =
-      selectedItem: selectedItem
-      date: new Date
-    App.Config.set("Runtime::#{@configKey}", selectedItemMeta)
-
-    @$('.sidebar').html App.view('generic/navbar_level2/navbar')(
-      groups:     @groupsSorted
-      className:  @configKey
-    )
-    if selectedItem
-      @$('li').removeClass('active')
-      @$("a[href=\"#{selectedItem.target}\"]").parent().addClass('active')
-      @executeController(selectedItem)
 
   executeController: (selectedItem) =>
 
-    # in case of rerendering
+    if @activeController
-    if @activeController && @activeController.render
+      @activeController.el.remove()
-      @activeController.render()
+      @activeController = undefined
-      return
 
-    @params.el = @$('.main')
+    @$('.main').append('<div>')
-    @activeController = new selectedItem.controller(@params)
+    @activeController = new selectedItem.controller(
+      el: @$('.main div')
+    )
+
+  setPosition: (position) =>
+    return if @shown
+    return if !position
+    if position.main
+      @$('.main').scrollTop(position.main)
+    if position.main
+      @$('.sidebar').scrollTop(position.sidebar)
+
+  currentPosition: =>
+    data =
+      main: @$('.main').scrollTop()
+      sidebar: @$('.sidebar').scrollTop()
 
 class App.GenericHistory extends App.ControllerModal
   buttonClose: true

app/assets/javascripts/app/controllers/_channel/chat.coffee

@@ -1,5 +1,6 @@
-class App.ChannelChat extends App.ControllerContent
+class App.ChannelChat extends App.ControllerSubContent
   requiredPermission: 'admin.channel_chat'
+  header: 'Chat'
   events:
     'change .js-params': 'updateParams'
     'input .js-params': 'updateParams'
@@ -111,7 +112,6 @@ class App.ChannelChat extends App.ControllerContent
 
   constructor: ->
     super
-    @title 'Chat'
     if @Session.get('email')
       @previewUrl = "www.#{@Session.get('email').replace(/^.+?\@/, '')}"
 

app/assets/javascripts/app/controllers/_channel/facebook.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.channel_facebook'
+  header: 'Facebook'
   events:
     'click .js-new':       'new'
     'click .js-edit':      'edit'
@@ -66,6 +67,11 @@ class Index extends App.ControllerContent
     if @channel_id
       @edit(undefined, @channel_id)
 
+  show: (params) =>
+    for key, value of params
+      if key isnt 'el' && key isnt 'shown' && key isnt 'match'
+        @[key] = value
+
   configApp: =>
     external_credential = App.ExternalCredential.findByAttribute('name', 'facebook')
     contentInline = $(App.view('facebook/app_config')(

app/assets/javascripts/app/controllers/_channel/form.coffee

@@ -1,6 +1,7 @@
 # coffeelint: disable=no_unnecessary_double_quotes
-class App.ChannelForm extends App.ControllerContent
+class App.ChannelForm extends App.ControllerSubContent
   requiredPermission: 'admin.channel_formular'
+  header: 'Form'
   events:
     'change form.js-params': 'updateParams'
     'keyup form.js-params': 'updateParams'
@@ -12,7 +13,6 @@ class App.ChannelForm extends App.ControllerContent
 
   constructor: ->
     super
-    @title 'Form'
     App.Setting.fetchFull(
       @render
       force: false

app/assets/javascripts/app/controllers/_channel/twitter.coffee

@@ -1,4 +1,4 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.channel_twitter'
   events:
     'click .js-new':       'new'
@@ -66,6 +66,11 @@ class Index extends App.ControllerContent
     if @channel_id
       @edit(undefined, @channel_id)
 
+  show: (params) =>
+    for key, value of params
+      if key isnt 'el' && key isnt 'shown' && key isnt 'match'
+        @[key] = value
+
   configApp: =>
     external_credential = App.ExternalCredential.findByAttribute('name', 'twitter')
     contentInline = $(App.view('twitter/app_config')(

app/assets/javascripts/app/controllers/_profile/avatar.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.avatar'
+  header: 'Avatar'
   elements:
     '.js-upload':      'fileInput'
     '.avatar-gallery': 'avatarGallery'
@@ -12,7 +13,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-    @title 'Avatar', true
     @avatars = []
     @loadAvatarList()
 

app/assets/javascripts/app/controllers/_profile/calendar_subscriptions.coffee

@@ -1,5 +1,6 @@
-class CalendarSubscriptions extends App.ControllerContent
+class CalendarSubscriptions extends App.ControllerSubContent
   requiredPermission: 'user_preferences.calendar+ticket.agent'
+  header: 'Calendar'
   elements:
     'input[type=checkbox]': 'options'
     'output': 'output'
@@ -11,7 +12,6 @@ class CalendarSubscriptions extends App.ControllerContent
 
   constructor: ->
     super
-    @title 'Calendar', true
 
     @translationTable =
       new_open: App.i18n.translatePlain('new & open')

app/assets/javascripts/app/controllers/_profile/devices.coffee

@@ -1,11 +1,11 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.device'
+  header: 'Devices'
   events:
     'click [data-type=delete]': 'delete'
 
   constructor: ->
     super
-    @title 'Devices', true
     @load()
     @interval(
       =>

app/assets/javascripts/app/controllers/_profile/language.coffee

@@ -1,11 +1,11 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.language'
+  header: 'Language'
   events:
     'submit form': 'update'
 
   constructor: ->
     super
-    @title 'Language', true
     @render()
 
   render: =>

app/assets/javascripts/app/controllers/_profile/linked_accounts.coffee

@@ -1,11 +1,11 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.linked_accounts'
+  header: 'Linked Accounts'
   events:
     'click .js-remove': 'remove'
 
   constructor: ->
     super
-    @title 'Linked Accounts', true
     @render()
 
   render: =>

app/assets/javascripts/app/controllers/_profile/notification.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.notifications+ticket.agent'
+  header: 'Notifications'
   events:
     'submit form': 'update'
     'change .js-notificationSound': 'previewSound'
@@ -45,7 +46,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-    @title 'Notifications', true
     @render()
 
   render: =>

app/assets/javascripts/app/controllers/_profile/password.coffee

@@ -1,11 +1,11 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.password'
+  header: 'Password'
   events:
     'submit form': 'update'
 
   constructor: ->
     super
-    @title 'Password', true
     @render()
 
   render: =>

app/assets/javascripts/app/controllers/_profile/token_access.coffee

@@ -1,12 +1,12 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'user_preferences.access_token'
+  header: 'Token Access'
   events:
     'click .js-delete': 'delete'
     'click .js-create': 'create'
 
   constructor: ->
     super
-    @title 'Token Access', true
 
     @load()
     @interval(

app/assets/javascripts/app/controllers/api.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.api'
+  header: 'API'
   events:
     'click .action':  'action'
     'change .js-TokenAccess input': 'toggleTokenAccess'
@@ -12,9 +13,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-
-    @title 'API', true
-
     App.Setting.fetchFull(
       @render
       force: false

app/assets/javascripts/app/controllers/calendar.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.calendar'
+  header: 'Calendars'
   events:
     'click .js-new':         'new'
     'click .js-edit':        'edit'
@@ -73,7 +74,7 @@ class Index extends App.ControllerContent
   new: =>
     new App.ControllerGenericNew(
       pageData:
-        title: 'Calendars'
+        title: @header
         object: 'Calendar'
         objects: 'Calendars'
       genericObject: 'Calendar'
@@ -87,7 +88,7 @@ class Index extends App.ControllerContent
     new App.ControllerGenericEdit(
       id: id
       pageData:
-        title: 'Calendars'
+        title: @header
         object: 'Calendar'
         objects: 'Calendars'
       genericObject: 'Calendar'

app/assets/javascripts/app/controllers/chat.coffee

@@ -318,6 +318,12 @@ class App.CustomerChat extends App.Controller
     @clearDelay(@idleTimeoutId)
     @idleTimeoutId = undefined
 
+  setPosition: (position) =>
+    @$('.main').scrollTop(position)
+
+  currentPosition: =>
+    @$('.main').scrollTop()
+
 class CustomerChatRouter extends App.ControllerPermanent
   requiredPermission: 'chat.agent'
   constructor: (params) ->

app/assets/javascripts/app/controllers/cti.coffee

@@ -58,6 +58,14 @@ class App.CTI extends App.Controller
       'cti_rerender'
     )
 
+    # after a new websocket connection, load again
+    @bind('spool:sent', =>
+      if @initSpoolSent
+        @load()
+        return
+      @initSpoolSent = true
+    )
+
   # fetch data, render view
   load: ->
     @ajax(
@@ -191,6 +199,12 @@ class App.CTI extends App.Controller
       processData: true
     )
 
+  setPosition: (position) =>
+    @$('.main').scrollTop(position)
+
+  currentPosition: =>
+    @$('.main').scrollTop()
+
 class CTIRouter extends App.ControllerPermanent
   requiredPermission: 'cti.agent'
   constructor: (params) ->

app/assets/javascripts/app/controllers/groups.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.group'
+  header: 'Groups'
   constructor: ->
     super
 
@@ -8,7 +9,6 @@ class Index extends App.ControllerContent
       id: @id
       genericObject: 'Group'
       pageData:
-        title:     'Groups'
         home:      'groups'
         object:    'Group'
         objects:   'Groups'

app/assets/javascripts/app/controllers/integrations.coffee

@@ -1,37 +1,57 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.integration'
+  header: 'Integrations'
   constructor: ->
     super
 
-    @title 'Integrations', true
-
     @integrationItems = App.Config.get('NavBarIntegrations')
+    @subscribeId = App.Setting.subscribe(@render, initFetch: true, clear: false)
+
+  show: (params) =>
+    return if !params.target && !params.integration if @initRender
+
+    @target = params.target
+    @integration = params.integration
+    if !@initRender
+      @requestedIntegration = true
+      return
 
     if !@integration
-      @subscribeId = App.Setting.subscribe(@render, initFetch: true, clear: false)
+      if !params.noRender
+        @render()
       return
 
     for key, value of @integrationItems
-      if value.target is "#system/#{@target}/#{@integration}"
+      if value.target is "#system/#{params.target}/#{params.integration}"
         config = value
         break
 
     new config.controller(
-      el: @el.closest('.main')
+      el: @el
     )
 
   render: =>
+    return if @initRender && @integration
+
+    @initRender = true
     integrations = []
     for key, value of @integrationItems
       value.key = key
       integrations.push value
     integrations = _.sortBy(integrations, (item) -> return item.name)
-
     @html App.view('integration/index')(
       head:         'Integrations'
       integrations: integrations
     )
 
+    return if !@requestedIntegration
+    @show(
+      target: @target
+      integration: @integration
+      noRender: true
+    )
+    @requestedIntegration = undefined
+
   release: =>
     if @subscribeId
       App.Setting.unsubscribe(@subscribeId)

app/assets/javascripts/app/controllers/job.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.scheduler'
+  header: 'Scheduler'
   constructor: ->
     super
 
@@ -9,7 +10,6 @@ class Index extends App.ControllerContent
       genericObject: 'Job'
       defaultSortBy: 'name'
       pageData:
-        title: 'Scheduler'
         home: 'Jobs'
         object: 'Scheduler'
         objects: 'Schedulers'

app/assets/javascripts/app/controllers/macro.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.macro'
+  header: 'Macros'
   constructor: ->
     super
 
@@ -8,7 +9,6 @@ class Index extends App.ControllerContent
       id: @id
       genericObject: 'Macro'
       pageData:
-        title: 'Macros'
         home: 'macros'
         object: 'Macro'
         objects: 'Macros'

app/assets/javascripts/app/controllers/maintenance.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.maintenance'
+  header: 'Maintenance'
   events:
     'change .js-modeSetting input': 'setMode'
     'change .js-loginSetting input': 'setLogin'
@@ -12,9 +13,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-
-    @title 'Maintenance', true
-
     @subscribeId = App.Setting.subscribe(@render, initFetch: true, clear: false)
 
   release: =>

app/assets/javascripts/app/controllers/manage.coffee

@@ -1,14 +1,31 @@
-class IndexRouter extends App.ControllerNavSidbar
+class App.Manage extends App.ControllerNavSidbar
   authenticateRequired: true
   configKey: 'NavBarAdmin'
 
-App.Config.set('manage', IndexRouter, 'Routes')
+class ManageRouter extends App.ControllerPermanent
-App.Config.set('manage/:target', IndexRouter, 'Routes')
+  requiredPermission: ['admin.*']
-App.Config.set('settings/:target', IndexRouter, 'Routes')
+
-App.Config.set('channels/:target', IndexRouter, 'Routes')
+  constructor: (params) ->
-App.Config.set('channels/:target/:channel_id', IndexRouter, 'Routes')
+    super
-App.Config.set('system/:target', IndexRouter, 'Routes')
+
-App.Config.set('system/:target/:integration', IndexRouter, 'Routes')
+    # check authentication
+    @authenticateCheckRedirect()
+
+    App.TaskManager.execute(
+      key:        'Manage'
+      controller: 'Manage'
+      params:     params
+      show:       true
+      persistent: true
+    )
+
+App.Config.set('manage', ManageRouter, 'Routes')
+App.Config.set('manage/:target', ManageRouter, 'Routes')
+App.Config.set('settings/:target', ManageRouter, 'Routes')
+App.Config.set('channels/:target', ManageRouter, 'Routes')
+App.Config.set('channels/:target/:channel_id', ManageRouter, 'Routes')
+App.Config.set('system/:target', ManageRouter, 'Routes')
+App.Config.set('system/:target/:integration', ManageRouter, 'Routes')
 
 App.Config.set('Manage', { prio: 1000, name: 'Manage', target: '#manage', permission: ['admin.*'] }, 'NavBarAdmin')
 App.Config.set('Channels', { prio: 2500, name: 'Channels', target: '#channels', permission: ['admin.*'] }, 'NavBarAdmin')

app/assets/javascripts/app/controllers/object_manager.coffee

@@ -1,12 +1,9 @@
 # coffeelint: disable=duplicate_key
 class Index extends App.ControllerTabs
   requiredPermission: 'admin.object'
-  header: 'Object Manager'
   constructor: ->
     super
 
-    @title 'Objects', true
-
     # get data
     @startLoading()
     @ajax(
@@ -32,7 +29,8 @@ class Index extends App.ControllerTabs
 
     @render()
 
-class Items extends App.ControllerContent
+class Items extends App.ControllerSubContent
+  header: 'Object Manager'
   events:
     'click .js-delete':  'destroy'
     'click .js-new':     'new'

app/assets/javascripts/app/controllers/organization_profile.coffee

@@ -62,6 +62,12 @@ class App.OrganizationProfile extends App.Controller
       genericObject: organization
     )
 
+  setPosition: (position) =>
+    @$('.profile').scrollTop(position)
+
+  currentPosition: =>
+    @$('.profile').scrollTop()
+
 class ActionRow extends App.ObserverController
   model: 'Organization'
   observe:

app/assets/javascripts/app/controllers/organizations.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.organization'
+  header: 'Organizations'
   constructor: ->
     super
 
@@ -8,7 +9,6 @@ class Index extends App.ControllerContent
       id: @id
       genericObject: 'Organization'
       pageData:
-        title: 'Organizations'
         home: 'organizations'
         object: 'Organization'
         objects: 'Organizations'

app/assets/javascripts/app/controllers/overview.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.overview'
+  header: 'Overviews'
   constructor: ->
     super
 
@@ -10,7 +11,6 @@ class Index extends App.ControllerContent
       defaultSortBy: 'prio'
       #groupBy: 'role'
       pageData:
-        title: 'Overviews'
         home: 'overviews'
         object: 'Overview'
         objects: 'Overviews'

app/assets/javascripts/app/controllers/package.coffee

@@ -1,11 +1,11 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.package'
+  header: 'Packages'
   events:
     'click .action':  'action'
 
   constructor: ->
     super
-    @title 'Packages', true
     @load()
 
   load: ->

app/assets/javascripts/app/controllers/profile.coffee

@@ -1,9 +1,28 @@
-class Index extends App.ControllerNavSidbar
+class App.Profile extends App.ControllerNavSidbar
   authenticateRequired: true
   configKey: 'NavBarProfile'
 
-App.Config.set('profile', Index, 'Routes')
+class ProfileRouter extends App.ControllerPermanent
-App.Config.set('profile/:target', Index, 'Routes')
+  requiredPermission: ['user_preferences.*']
+
+  constructor: (params) ->
+    super
+
+    # check authentication
+    @authenticateCheckRedirect()
+
+    App.TaskManager.execute(
+      key:        'Profile'
+      controller: 'Profile'
+      params:     params
+      show:       true
+      persistent: true
+    )
+
+App.Config.set('profile', ProfileRouter, 'Routes')
+App.Config.set('profile/:target', ProfileRouter, 'Routes')
+
+App.Config.set('Profile', { controller: 'Profile', permission: ['user_preferences.*'] }, 'permanentTask')
 
 App.Config.set('Profile', { prio: 1000, name: 'Profile', target: '#profile' }, 'NavBarProfile')
 App.Config.set('Profile', { prio: 1700, parent: '#current_user', name: 'Profile', target: '#profile', translate: true }, 'NavBarRight')

app/assets/javascripts/app/controllers/report_profile.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.report_profile'
+  header: 'Report Profile'
   constructor: ->
     super
 
@@ -8,7 +9,6 @@ class Index extends App.ControllerContent
       id: @id
       genericObject: 'ReportProfile'
       pageData:
-        title: 'Report Profile'
         home: 'report_profiles'
         object: 'Report Profile'
         objects: 'Report Profiles'

app/assets/javascripts/app/controllers/role.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.role'
+  header: 'Roles'
   constructor: ->
     super
 
@@ -8,7 +9,6 @@ class Index extends App.ControllerContent
       id: @id
       genericObject: 'Role'
       pageData:
-        title:     'Roles'
         home:      'roles'
         object:    'Role'
         objects:   'Roles'

app/assets/javascripts/app/controllers/session.coffee

@@ -1,11 +1,11 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.session'
+  header: 'Sessions'
   events:
     'click .js-delete': 'destroy'
 
   constructor: ->
     super
-    @title 'Sessions', true
     @load()
     @interval(
       =>

app/assets/javascripts/app/controllers/sla.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.sla'
+  header: 'SLAs'
   events:
     'click .js-new':         'new'
     'click .js-edit':        'edit'

app/assets/javascripts/app/controllers/tag.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.tag'
+  header: 'Tags'
   events:
     'change .js-newTagSetting input': 'setTagNew'
     'submit .js-create': 'create'
@@ -9,7 +10,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-    @title 'Tags', true
     @subscribeId = App.Setting.subscribe(@render, initFetch: true, clear: false)
 
   release: =>
@@ -27,7 +27,6 @@ class Index extends App.ControllerContent
 
   setTagNew: (e) =>
     value = @tagNewSetting.prop('checked')
-    console.log('aa', value)
     App.Setting.set('tag_new', value)
 
   create: (e) =>

app/assets/javascripts/app/controllers/text_module.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.text_module'
+  header: 'TextModules'
   constructor: ->
     super
 
@@ -8,7 +9,6 @@ class Index extends App.ControllerContent
       id: @id
       genericObject: 'TextModule'
       pageData:
-        title: 'TextModules'
         home: 'text_modules'
         object: 'TextModule'
         objects: 'TextModules'

app/assets/javascripts/app/controllers/ticket_overview.coffee

@@ -1,5 +1,6 @@
 class App.TicketOverview extends App.Controller
   className: 'overviews'
+  activeFocus: 'nav'
 
   constructor: ->
     super
@@ -20,10 +21,20 @@ class App.TicketOverview extends App.Controller
     @contentController = new Table
       el:          elLocal.find('.overview-table')
       view:        @view
+      keyboardOn:  @keyboardOn
+      keyboardOff: @keyboardOff
 
     @html elLocal
 
+    @el.find('.main').on('click', =>
+      @activeFocus = 'overview'
+    )
+    @el.find('.sidebar').on('click', =>
+      @activeFocus = 'nav'
+    )
+
     @bind 'overview:fetch', =>
+      return if !@view
       update = =>
         App.OverviewListCollection.fetch(@view)
       @delay(update, 2800, 'overview:fetch')
@@ -36,6 +47,7 @@ class App.TicketOverview extends App.Controller
     "#ticket/view/#{@view}"
 
   show: (params) =>
+    @keyboardOn()
 
     # highlight navbar
     @navupdate '#ticket/view'
@@ -70,16 +82,109 @@ class App.TicketOverview extends App.Controller
       )
 
   hide: =>
+    @keyboardOff()
+
     if @navBarController
       @navBarController.active(false)
     if @navBarControllerVertical
       @navBarControllerVertical.active(false)
 
+  setPosition: (position) =>
+    @$('.main').scrollTop(position)
+
+  currentPosition: =>
+    @$('.main').scrollTop()
+
   changed: ->
     false
 
   release: ->
-    # no
+    @keyboardOff()
+    super
+
+  keyboardOn: =>
+    $(window).off 'keydown.overview_navigation'
+    $(window).on 'keydown.overview_navigation', @listNavigate
+
+  keyboardOff: ->
+    $(window).off 'keydown.overview_navigation'
+
+  listNavigate: (e) =>
+    if e.keyCode is 38 # up
+      e.preventDefault()
+      @nudge(e, -1)
+      return
+    else if e.keyCode is 40 # down
+      e.preventDefault()
+      @nudge(e, 1)
+      return
+    else if e.keyCode is 32 # space
+      e.preventDefault()
+      if @activeFocus is 'overview'
+        @$('.table-overview table tbody tr.is-hover td.js-checkbox-field label input').first().click()
+    else if e.keyCode is 9 # tab
+      e.preventDefault()
+      if @activeFocus is 'nav'
+        @activeFocus = 'overview'
+        @nudge(e, 1)
+      else
+        @activeFocus = 'nav'
+    else if e.keyCode is 13 # enter
+      if @activeFocus is 'overview'
+        location = @$('.table-overview table tbody tr.is-hover a').first().attr('href')
+        if location
+          @navigate location
+
+  nudge: (e, position) ->
+
+    if @activeFocus is 'overview'
+      items = @$('.table-overview table tbody')
+      current = items.find('tr.is-hover')
+
+      if !current.size()
+        items.find('tr').first().addClass('is-hover')
+        return
+
+      if position is 1
+        next = current.next('tr')
+        if next.size()
+          current.removeClass('is-hover')
+          next.addClass('is-hover')
+      else
+        prev = current.prev('tr')
+        if prev.size()
+          current.removeClass('is-hover')
+          prev.addClass('is-hover')
+
+      if next
+        @scrollToIfNeeded(next, true)
+      if prev
+        @scrollToIfNeeded(prev, true)
+
+    else
+      # get current
+      items = @$('.sidebar')
+      current = items.find('li.active')
+
+      if !current.size()
+        location = items.find('li a').first().attr('href')
+        if location
+          @navigate location
+        return
+
+      if position is 1
+        next = current.next('li')
+        if next.size()
+          @navigate next.find('a').attr('href')
+      else
+        prev = current.prev('li')
+        if prev.size()
+          @navigate prev.find('a').attr('href')
+
+      if next
+        @scrollToIfNeeded(next, true)
+      if prev
+        @scrollToIfNeeded(prev, true)
 
 class Navbar extends App.Controller
   elements:
@@ -204,6 +309,7 @@ class Table extends App.Controller
     # rerender view, e. g. on langauge change
     @bind 'ui:rerender', =>
       return if !@authenticateCheck()
+      return if !@view
       @render(App.OverviewListCollection.get(@view))
 
   release: =>
@@ -440,10 +546,12 @@ class Table extends App.Controller
 
   settings: (e) =>
     e.preventDefault()
+    @keyboardOff()
     new App.OverviewSettings(
       overview_id:     @overview.id
       view_mode:       @view_mode
       container:       @el.closest('.content')
+      onCloseCallback: @keyboardOn
     )
 
 class BulkForm extends App.Controller
@@ -735,6 +843,10 @@ class App.OverviewSettings extends App.ControllerModal
     )
     controller.form
 
+  onClose: =>
+    if @onCloseCallback
+      @onCloseCallback()
+
   onSubmit: (e) =>
     params = @formParam(e.target)
 

app/assets/javascripts/app/controllers/ticket_zoom.coffee

@@ -84,46 +84,10 @@ class App.TicketZoom extends App.Controller
       processData: true
       queue: true
       success: (data, status, xhr) =>
-        console.log('fetched', ignoreSame)
+        @load(data, ignoreSame)
-
-        # check if ticket has changed
-        newTicketRaw = data.assets.Ticket[@ticket_id]
-        console.log(newTicketRaw.updated_at)
-        console.log(@ticketUpdatedAtLastCall)
-
-        if @ticketUpdatedAtLastCall
-
-          # ignore if record is already shown
-          if ignoreSame && new Date(newTicketRaw.updated_at).getTime() is new Date(@ticketUpdatedAtLastCall).getTime()
-            console.log('debug no fetched, current ticket already there or requested')
-            return
-
-          # do not render if newer ticket is already requested
-          if new Date(newTicketRaw.updated_at).getTime() < new Date(@ticketUpdatedAtLastCall).getTime()
-            console.log('fetched no fetch, current ticket already newer')
-            return
-
-          # remember current record if newer as requested record
-          if new Date(newTicketRaw.updated_at).getTime() > new Date(@ticketUpdatedAtLastCall).getTime()
-            @ticketUpdatedAtLastCall = newTicketRaw.updated_at
-        else
-          @ticketUpdatedAtLastCall = newTicketRaw.updated_at
-
-        # notify if ticket changed not by my self
-        if @initFetched
-          if newTicketRaw.updated_by_id isnt @Session.get('id')
-            App.TaskManager.notify(@task_key)
-        @initFetched = true
-
-        @load(data)
         App.SessionStorage.set(@key, data)
 
-        if !@doNotLog
-          @doNotLog = 1
-          @recentView('Ticket', @ticket_id)
-
       error: (xhr) =>
-
         statusText = xhr.statusText
         status     = xhr.status
         detail     = xhr.responseText
@@ -160,7 +124,40 @@ class App.TicketZoom extends App.Controller
           )
     )
 
-  load: (data) =>
+  load: (data, ignoreSame = false, local = false) =>
+
+    # check if ticket has changed
+    newTicketRaw = data.assets.Ticket[@ticket_id]
+    console.log(newTicketRaw.updated_at)
+    console.log(@ticketUpdatedAtLastCall)
+
+    if @ticketUpdatedAtLastCall
+
+      # ignore if record is already shown
+      if ignoreSame && new Date(newTicketRaw.updated_at).getTime() is new Date(@ticketUpdatedAtLastCall).getTime()
+        console.log('debug no fetched, current ticket already there or requested')
+        return
+
+      # do not render if newer ticket is already requested
+      if new Date(newTicketRaw.updated_at).getTime() < new Date(@ticketUpdatedAtLastCall).getTime()
+        console.log('fetched no fetch, current ticket already newer')
+        return
+
+      # remember current record if newer as requested record
+      if new Date(newTicketRaw.updated_at).getTime() > new Date(@ticketUpdatedAtLastCall).getTime()
+        @ticketUpdatedAtLastCall = newTicketRaw.updated_at
+    else
+      @ticketUpdatedAtLastCall = newTicketRaw.updated_at
+
+    # notify if ticket changed not by my self
+    if @initFetched
+      if newTicketRaw.updated_by_id isnt @Session.get('id')
+        App.TaskManager.notify(@task_key)
+    @initFetched = true
+
+    if !@doNotLog
+      @doNotLog = 1
+      @recentView('Ticket', @ticket_id)
 
     # remember article ids
     @ticket_article_ids = data.ticket_article_ids
@@ -182,7 +179,7 @@ class App.TicketZoom extends App.Controller
     @ticket.article = undefined
 
     # render page
-    @render()
+    @render(local)
 
   meta: =>
 
@@ -217,39 +214,69 @@ class App.TicketZoom extends App.Controller
     # set all notifications to seen
     App.OnlineNotification.seen('Ticket', @ticket_id)
 
-    scrollToPosition = (position, delay) =>
-      scrollToDelay = =>
-        if position is 'article'
-          @scrollToArticle(@last_article_id)
-          return
-        @scrollToBottom()
-      @delay(scrollToDelay, delay, 'scrollToPosition')
-
-    # scroll to article if given
-    if params.article_id && params.article_id isnt @last_article_id
-      @last_article_id = params.article_id
-      scrollToPosition('article', 300)
-
     # if controller is executed twice, go to latest article (e. g. click on notification)
     if @activeState
-      scrollToPosition('bottom', 300)
+      if @ticket_article_ids
-      return
+        @shown = false
     @activeState = true
-
+    @pagePosition(params)
-    # if ticket is shown the first time
-    if !@shown
-      @shown = true
-
-      # trigger shown to article
-      App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id })
-
-      # scroll to end of page
-      scrollToPosition('bottom', 100)
 
     @positionPageHeaderStart()
     @autosaveStart()
     @shortcutNavigationStart()
 
+  pagePosition: (params = {}) =>
+
+    # remember for later
+    return if params.type is 'init' && !@shown
+
+    if params.article_id
+      article_id = params.article_id
+      params.article_id = undefined
+    else if @pagePositionData
+      article_id = @pagePositionData
+      @pagePositionData = undefined
+
+    # scroll to article if given
+    scrollToPosition = (position, delay) =>
+      scrollToDelay = =>
+        if position is 'article'
+          @scrollToArticle(article_id)
+          @positionPageHeaderUpdate()
+          return
+        @scrollToBottom()
+        @positionPageHeaderUpdate()
+      @delay(scrollToDelay, delay, 'scrollToPosition')
+
+    # trigger shown to article
+    if !@shown
+      @shown = true
+      App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id })
+      scrollToPosition('bottom', 50)
+      return
+
+    # scroll to article if given
+    if article_id && article_id isnt @last_article_id
+      @last_article_id = article_id
+      scrollToPosition('article', 300)
+      return
+
+    # scroll to end if new article has been added
+    if !@last_ticket_article_ids || !_.isEqual(_.sortBy(@last_ticket_article_ids), _.sortBy(@ticket_article_ids))
+      @last_ticket_article_ids = @ticket_article_ids
+      scrollToPosition('bottom', 100)
+      return
+
+  setPosition: (position) =>
+    @$('.main').scrollTop(position)
+
+  currentPosition: =>
+    element = @$('.main .ticketZoom')
+    offset = element.offset()
+    if offset
+      position = offset.top
+    Math.abs(position)
+
   hide: =>
     @activeState = false
     @positionPageHeaderStop()
@@ -354,7 +381,7 @@ class App.TicketZoom extends App.Controller
 
     @scrollHeaderPos = scroll
 
-  render: =>
+  render: (local) =>
 
     # update taskbar with new meta data
     App.TaskManager.touch(@task_key)
@@ -458,28 +485,15 @@ class App.TicketZoom extends App.Controller
       if @sidebar.linkWidget
         @sidebar.linkWidget.reload(@links)
 
-    if @shown
+    if !@initDone
-
+      if @article_id
-      # scroll to article if given
+        @pagePositionData = @article_id
-      if @article_id && @article_id isnt @last_article_id
+      @pagePosition(type: 'init')
-        @last_article_id = @article_id
-        scrollTo = =>
-          @scrollToArticle(@article_id)
-        @delay(scrollTo, 300)
-
-      # scroll to end if new article has been added
-      if !@last_ticket_article_ids || !_.isEqual(_.sortBy(@last_ticket_article_ids), _.sortBy(@ticket_article_ids))
-        @last_ticket_article_ids = @ticket_article_ids
-        @scrollToBottom()
-        @positionPageHeaderUpdate()
-
-    return if @initDone
       @initDone = true
+      return
 
-    # if shown was before init rendering, start actions again
+    return if local
-    return if !@shown
+    @pagePosition(type: 'init')
-    @positionPageHeaderStart()
-    App.Event.trigger('ui::ticket::shown', { ticket_id: @ticket_id })
 
   scrollToArticle: (article_id) =>
     articleContainer = document.getElementById("article-#{article_id}")
@@ -499,7 +513,9 @@ class App.TicketZoom extends App.Controller
     realContentHeight += @$('.ticket-article').height()
     realContentHeight += @$('.article-new').height()
     viewableContentHeight = @$('.main').height()
-    return if viewableContentHeight > realContentHeight
+    if viewableContentHeight > realContentHeight
+      @main.scrollTop(0)
+      return
     @main.scrollTop( @main.prop('scrollHeight') )
 
   autosaveStop: =>
@@ -729,12 +745,8 @@ class App.TicketZoom extends App.Controller
       processData: true
       success: (data) =>
 
-        # remember current data
-        newTicketRaw = data.assets.Ticket[ticket.id]
-        @ticketUpdatedAtLastCall = newTicketRaw.updated_at
-
         #App.SessionStorage.set(@key, data)
-        @load(data)
+        @load(data, true, true)
 
         # reset article - should not be resubmited on next ticket update
         ticket.article = undefined

app/assets/javascripts/app/controllers/translation.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.translation'
+  header: 'Translations'
   events:
     'click .js-pushChanges': 'pushChanges'
     'click .js-resetChanges': 'resetChanges'
@@ -7,8 +8,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-
-    @title 'Translations', true
     @locale = App.i18n.get()
     @render()
     @bind('i18n:translation_update_todo', =>
@@ -80,7 +79,13 @@ class Index extends App.ControllerContent
         @toggleAction()
     )
 
+  hide: =>
+    @rerender()
+
   release: =>
+    @rerender()
+
+  rerender: =>
     rerender = ->
       App.Event.trigger('ui:rerender')
     if @translationList && @translationList.changes()

app/assets/javascripts/app/controllers/trigger.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.trigger'
+  header: 'Triggers'
   constructor: ->
     super
 
@@ -9,7 +10,6 @@ class Index extends App.ControllerContent
       genericObject: 'Trigger'
       defaultSortBy: 'name'
       pageData:
-        title: 'Triggers'
         home: 'triggers'
         object: 'Trigger'
         objects: 'Triggers'

app/assets/javascripts/app/controllers/user_profile.coffee

@@ -63,6 +63,12 @@ class App.UserProfile extends App.Controller
       genericObject: user
     )
 
+  setPosition: (position) =>
+    @$('.profile').scrollTop(position)
+
+  currentPosition: =>
+    @$('.profile').scrollTop()
+
 class ActionRow extends App.ObserverController
   model: 'User'
   observe:

app/assets/javascripts/app/controllers/users.coffee

@@ -1,5 +1,6 @@
-class Index extends App.ControllerContent
+class Index extends App.ControllerSubContent
   requiredPermission: 'admin.user'
+  header: 'Users'
   elements:
     '.js-search': 'searchInput'
   events:
@@ -7,10 +8,6 @@ class Index extends App.ControllerContent
 
   constructor: ->
     super
-
-    # set title
-    @title 'Users', true
-
     @render()
 
   render: ->

app/assets/javascripts/app/lib/app_post/overview_list_collection.coffee

@@ -39,7 +39,7 @@ class _Singleton
     #    view: view
     #  )
     #  return
-
+    throw 'No view to fetch list!' if !view
     App.OverviewIndexCollection.fetch()
     return if @fetchActive[view]
     @fetchActive[view] = true

app/assets/javascripts/app/lib/app_post/task_manager.coffee

@@ -87,6 +87,8 @@ class _taskManagerSingleton extends App.Controller
     App.Interval.set(@taskUpdateLoop, 3000, 'check_update_to_server_pending', 'task')
 
   init: ->
+    @domStore          = {}
+    @shownStore        = {}
     @workers           = {}
     @allTasksByKey     = {}
     @tasksToUpdate     = {}
@@ -220,13 +222,6 @@ class _taskManagerSingleton extends App.Controller
     if params.show
       @el.find('#content').empty()
 
-      # hide all tasks
-      @el.find('.content').addClass('hide').removeClass('active')
-
-    # create div for task if not exists
-    if !@el.find("##{@domID(params.key)}")[0]
-      @el.append("<div id=\"#{@domID(params.key)}\" class=\"content horizontal flex\"></div>")
-
     # set all tasks to active false, only new/selected one to active
     if params.show
       for key, task of @allTasksByKey
@@ -253,7 +248,14 @@ class _taskManagerSingleton extends App.Controller
 
     # create clean params
     params_app = _.clone(params.params)
-    params_app['el']       = $("##{@domID(params.key)}")
+    domKey = @domID(params.key)
+    domStoreItem = @domStore[domKey]
+    if domStoreItem
+      el = domStoreItem.el
+    else
+      el = $("<div id=\"#{domKey}\" class=\"content horizontal flex\"></div>")
+      @domStore[domKey] = { el: el }
+    params_app['el'] = el
     params_app['task_key'] = params.key
     if !params.show
       params_app['doNotLog'] = 1
@@ -273,18 +275,34 @@ class _taskManagerSingleton extends App.Controller
     @tasksAutoCleanupDelay()
 
   showControllerHideOthers: (thisKey, params_app) =>
+    for key of @workers
+      if key isnt thisKey
+        if @shownStore[key] isnt false
+          @hide(key)
+    $('#content').addClass('hide')
+
     for key of @workers
       if key is thisKey
         @show(key, params_app)
-      else
-        @hide(key)
 
   # show task content
-  show: (key, params_app) ->
+  show: (key, params_app) =>
-    @el.find("##{@domID(key)}").removeClass('hide').addClass('active')
-
     controller = @workers[ key ]
-    return false if !controller
+    @shownStore[key] = true
+
+    domKey = @domID(key)
+    domStoreItem = @domStore[domKey]
+    localEl = domStoreItem.el
+    if !@$("##{domKey}").get(0) && localEl
+      @el.append(localEl)
+    @$("##{domKey}").removeClass('hide').addClass('active')
+
+    if controller
+
+      # set position of view
+      position = @domStore[@domID(key)].position
+      if position
+        controller.setPosition(position)
 
       # set controller state to active
       if controller.active && _.isFunction(controller.active)
@@ -297,10 +315,22 @@ class _taskManagerSingleton extends App.Controller
     true
 
   # hide task content
-  hide: (key) ->
+  hide: (key) =>
-    @el.find("##{@domID(key)}").addClass('hide').removeClass('active')
-
     controller = @workers[ key ]
+    @shownStore[key] = false
+
+    if @$("##{@domID(key)}").get(0)
+      domKey = @domID(key)
+      domStoreItem = @domStore[domKey]
+
+      if controller && _.isFunction(controller.currentPosition)
+        position = controller.currentPosition()
+        domStoreItem.position = position
+        @$("##{@domID(key)}").addClass('hide').removeClass('active')
+        domStoreItem.el = @$("##{@domID(key)}").detach()
+      else
+        @$("##{@domID(key)}").addClass('hide').removeClass('active')
+
     return false if !controller
 
     # set controller state to active
@@ -311,6 +341,8 @@ class _taskManagerSingleton extends App.Controller
     if controller.hide && _.isFunction(controller.hide)
       controller.hide()
 
+    @anyPopoversDestroy()
+
     true
 
   # get task
@@ -339,7 +371,6 @@ class _taskManagerSingleton extends App.Controller
 
   # remove task certain task from tasks
   remove: (key) =>
-
     task = @allTasksByKey[key]
     delete @allTasksByKey[key]
     return if !task
@@ -386,14 +417,24 @@ class _taskManagerSingleton extends App.Controller
 
   # release one task
   release: (key) =>
+    domKey = @domID(key)
+    localDomStore = @domStore[domKey]
+    if localDomStore
+      if localDomStore.el
+        $('#app').append("<div id=\"#{domKey}_trash\" class=\"hide\"></div>")
+        $("#app ##{domKey}_trash").append(localDomStore.el).remove()
+      localDomStore = undefined
+    delete @domStore[@domID(key)]
+    worker = @workers[key]
+    if worker
+      worker = undefined
+    delete @workers[key]
     try
-      @el.find("##{@domID(key)}").html('')
+      @$("##{@domID(key)}").html('')
-      @el.find("##{@domID(key)}").remove()
+      @$("##{@domID(key)}").remove()
     catch
       @log 'notice', "invalid key '#{key}'"
 
-    delete @workers[ key ]
-
   # reset while tasks
   reset: =>
 

app/assets/javascripts/app/views/generic/navbar_level2/navbar.jst.eco

@@ -5,7 +5,7 @@
       <ul class="nav nav-pills nav-stacked">
       <% if group.items: %>
         <% for item in group.items: %>
-          <li <% if item.active: %>class="active"<% end %>><a href="<%= item.target %>"><%- @T(item.name) %></a></li>
+          <li <% if item.active: %>class="active js-item"<% end %>><a href="<%= item.target %>"><%- @T(item.name) %></a></li>
         <% end %>
       <% end %>
       </ul>

public/assets/tests/taskbar.js

@@ -55,6 +55,7 @@ test( "taskbar basic tests", function() {
   equal($('#taskbars .content.active').text(), "some test controller message:'#2',show:'true',hide:'false',active:'true'", "check active content!")
 
   equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'false',active:'true'", "check active content!")
 
   // check task history
   equal(App.TaskManager.nextTaskUrl(), '#/some/url/#2')
@@ -69,13 +70,29 @@ test( "taskbar basic tests", function() {
     show:       false,
     persistent: false,
   })
-  equal($('#taskbars .content').length, 3, "check available active contents")
+  equal($('#taskbars .content').length, 2, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
   equal($('#taskbars .content.active').text(), "some test controller message:'#2',show:'true',hide:'false',active:'true'")
 
   equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'false',active:'true'", "check active content!")
 
+  App.TaskManager.execute({
+    key:        'TestKey3',
+    controller: 'TestController1',
+    params:     {
+      message: '#3',
+    },
+    show:       true,
+    persistent: false,
+  })
+  equal($('#taskbars .content').length, 3, "check available active contents")
+  equal($('#taskbars .content.active').length, 1, "check available active contents")
+  equal($('#taskbars .content.active').text(), "some test controller message:'#3',show:'true',hide:'true',active:'true'", "check active content!")
+
+  equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'true'", "check active content!")
 
   App.TaskManager.execute({
     key:        'TestKey4',
@@ -86,14 +103,13 @@ test( "taskbar basic tests", function() {
     show:       false,
     persistent: true,
   })
-  equal($('#taskbars .content').length, 4, "check available active contents")
+  equal($('#taskbars .content').length, 3, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
-  equal($('#taskbars .content.active').text(), "some test controller message:'#2',show:'true',hide:'false',active:'true'")
+  equal($('#taskbars .content.active').text(), "some test controller message:'#3',show:'true',hide:'true',active:'true'", "check active content!")
 
   equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey4').text(), "some test controller message:'#4',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'true'", "check active content!")
-
 
   App.TaskManager.execute({
     key:        'TestKey5',
@@ -104,15 +120,14 @@ test( "taskbar basic tests", function() {
     show:       true,
     persistent: true,
   })
-  equal($('#taskbars .content').length, 5, "check available active contents")
+  equal($('#taskbars .content').length, 4, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
   equal($('#taskbars .content.active').text(), "some test controller message:'#5',show:'true',hide:'false',active:'true'")
 
   equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
   equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey4').text(), "some test controller message:'#4',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey5').text(), "some test controller message:'#5',show:'true',hide:'false',active:'true'", "check active content!")
-
 
   App.TaskManager.execute({
     key:        'TestKey6',
@@ -123,28 +138,27 @@ test( "taskbar basic tests", function() {
     show:       true,
     persistent: false,
   })
-  equal($('#taskbars .content').length, 6, "check available active contents")
-  equal($('#taskbars .content.active').length, 1, "check available active contents")
-  equal($('#taskbars .content.active').text(), "some test controller message:'#6',show:'true',hide:'false',active:'true'")
-
-  equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'false',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey4').text(), "some test controller message:'#4',show:'false',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey5').text(), "some test controller message:'#5',show:'true',hide:'true',active:'false'", "check active content!")
-
-
-  // remove task#2
-  App.TaskManager.remove('TestKey2')
-
   equal($('#taskbars .content').length, 5, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
   equal($('#taskbars .content.active').text(), "some test controller message:'#6',show:'true',hide:'false',active:'true'")
 
   equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey2').text(), "some test controller message:'#2',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey4').text(), "some test controller message:'#4',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'false'", "check active content!")
   equal($('#taskbars #content_permanent_TestKey5').text(), "some test controller message:'#5',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey6').text(), "some test controller message:'#6',show:'true',hide:'false',active:'true'", "check active content!")
+
+  // remove task#2
+  App.TaskManager.remove('TestKey2')
+
+  equal($('#taskbars .content').length, 4, "check available active contents")
+  equal($('#taskbars .content.active').length, 1, "check available active contents")
+  equal($('#taskbars .content.active').text(), "some test controller message:'#6',show:'true',hide:'false',active:'true'")
+
+  equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey5').text(), "some test controller message:'#5',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey6').text(), "some test controller message:'#6',show:'true',hide:'false',active:'true'", "check active content!")
 
   // activate task#3
   App.TaskManager.execute({
@@ -156,13 +170,14 @@ test( "taskbar basic tests", function() {
     show:       true,
     persistent: false,
   })
-  equal($('#taskbars .content').length, 5, "check available active contents")
+  equal($('#taskbars .content').length, 4, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
   equal($('#taskbars .content.active').text(), "some test controller message:'#3',show:'true',hide:'true',active:'true'")
 
   equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey4').text(), "some test controller message:'#4',show:'false',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'true'", "check active content!")
   equal($('#taskbars #content_permanent_TestKey5').text(), "some test controller message:'#5',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey6').text(), "some test controller message:'#6',show:'true',hide:'true',active:'false'", "check active content!")
 
 
   // activate task#1
@@ -175,19 +190,20 @@ test( "taskbar basic tests", function() {
     show:       true,
     persistent: false,
   })
-  equal($('#taskbars .content').length, 5, "check available active contents")
+  equal($('#taskbars .content').length, 4, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
   equal($('#taskbars .content.active').text(), "some test controller message:'#1',show:'true',hide:'true',active:'true'")
 
+  equal($('#taskbars #content_permanent_TestKey1').text(), "some test controller message:'#1',show:'true',hide:'true',active:'true'", "check active content!")
   equal($('#taskbars #content_permanent_TestKey3').text(), "some test controller message:'#3',show:'true',hide:'true',active:'false'", "check active content!")
-  equal($('#taskbars #content_permanent_TestKey4').text(), "some test controller message:'#4',show:'false',hide:'true',active:'false'", "check active content!")
   equal($('#taskbars #content_permanent_TestKey5').text(), "some test controller message:'#5',show:'true',hide:'true',active:'false'", "check active content!")
+  equal($('#taskbars #content_permanent_TestKey6').text(), "some test controller message:'#6',show:'true',hide:'true',active:'false'", "check active content!")
 
   // remove task#1
   App.TaskManager.remove('TestKey1')
 
   // verify if task#3 is active
-  equal($('#taskbars .content').length, 4, "check available active contents")
+  equal($('#taskbars .content').length, 3, "check available active contents")
   equal($('#taskbars .content.active').length, 0, "check available active contents")
   equal($('#taskbars .content.active').text(), "")
 
@@ -195,7 +211,7 @@ test( "taskbar basic tests", function() {
   App.TaskManager.remove('TestKey3')
 
   // verify if task#5 is active
-  equal($('#taskbars .content').length, 3, "check available active contents")
+  equal($('#taskbars .content').length, 2, "check available active contents")
   equal($('#taskbars .content.active').length, 0, "check available active contents")
   equal($('#taskbars .content.active').text(), "")
 
@@ -203,7 +219,7 @@ test( "taskbar basic tests", function() {
   App.TaskManager.remove('TestKey5')
 
   // verify if task#5 is active
-  equal($('#taskbars .content').length, 3, "check available active contents")
+  equal($('#taskbars .content').length, 2, "check available active contents")
   equal($('#taskbars .content.active').length, 0, "check available active contents")
   equal($('#taskbars .content.active').text(), "")
 
@@ -217,7 +233,7 @@ test( "taskbar basic tests", function() {
     show:       true,
     persistent: false,
   })
-  equal($('#taskbars .content').length, 4, "check available active contents")
+  equal($('#taskbars .content').length, 3, "check available active contents")
   equal($('#taskbars .content.active').length, 1, "check available active contents")
   equal($('#taskbars .content.active').text(), "some test controller message:'#7',show:'true',hide:'false',active:'true'", "check active content!")
 
@@ -225,7 +241,7 @@ test( "taskbar basic tests", function() {
   App.TaskManager.remove('TestKey7')
 
   // verify if task#5 is active
-  equal($('#taskbars .content').length, 3, "check available active contents")
+  equal($('#taskbars .content').length, 2, "check available active contents")
   equal($('#taskbars .content.active').length, 0, "check available active contents")
   equal($('#taskbars .content.active').text(), "")
 

test/browser/aaa_getting_started_test.rb

@@ -175,15 +175,15 @@ class AaaGettingStartedTest < TestCase
       css: 'a[href="#manage"]',
     )
     click(
-      css: 'a[href="#settings/branding"]',
+      css: '.content.active a[href="#settings/branding"]',
     )
 
     match(
-      css: '#content input[name="organization"]',
+      css: '.content.active input[name="organization"]',
       value: 'Some Organization',
     )
     click(
-      css: 'a[href="#settings/system"]',
+      css: '.content.active a[href="#settings/system"]',
     )
 
     fqdn = nil
@@ -192,7 +192,7 @@ class AaaGettingStartedTest < TestCase
     end
     raise "Unable to get fqdn based on #{browser_url}" if !fqdn
     match(
-      css: '#content input[name="fqdn"]',
+      css: '.content.active input[name="fqdn"]',
       value: fqdn,
     )
   end

test/browser/admin_channel_email_test.rb

@@ -21,9 +21,9 @@ class AdminChannelEmailTest < TestCase
     tasks_close_all()
 
     click(css: 'a[href="#manage"]')
-    click(css: 'a[href="#channels/email"]')
+    click(css: '.content.active a[href="#channels/email"]')
 
-    click(css: '#content .js-channelNew')
+    click(css: '.content.active .js-channelNew')
 
     modal_ready()
 
@@ -55,15 +55,15 @@ class AdminChannelEmailTest < TestCase
 
     # delete all channels
     loop do
-      break if !@browser.find_elements(css: '#content .js-channelDelete')[0]
+      break if !@browser.find_elements(css: '.content.active .js-channelDelete')[0]
-      click(css: '#content .js-channelDelete')
+      click(css: '.content.active .js-channelDelete')
       sleep 2
       click(css: '.modal .js-submit')
       sleep 2
     end
 
     # re-create
-    click(css: '#content .js-channelNew')
+    click(css: '.content.active .js-channelNew')
 
     modal_ready()
 
@@ -93,12 +93,12 @@ class AdminChannelEmailTest < TestCase
     exists_not(css: '.modal')
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: mailbox_user,
     )
 
     # set invalid folder
-    click(css: '#content .js-editInbound')
+    click(css: '.content.active .js-editInbound')
 
     modal_ready()
 

test/browser/admin_object_manager_test.rb

@@ -62,10 +62,10 @@ class AdminObjectManagerTest < TestCase
     )
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Database Update required',
     )
-    click(css: '#content .tab-pane.active div.js-execute')
+    click(css: '.content.active .tab-pane.active div.js-execute')
     watch_for(
       css: '.modal',
       value: 'restart',
@@ -76,7 +76,7 @@ class AdminObjectManagerTest < TestCase
     )
     sleep 5
     watch_for(
-      css: '#content',
+      css: '.content.active',
     )
 
     # create new ticket
@@ -113,11 +113,11 @@ class AdminObjectManagerTest < TestCase
     click(css: 'a[href="#manage"]')
     click(css: 'a[href="#system/object_manager"]')
     watch_for(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test1',
     )
     match_not(
-      css: '#content',
+      css: '.content.active',
       value: 'Database Update required',
     )
     object_manager_attribute_delete(
@@ -126,14 +126,14 @@ class AdminObjectManagerTest < TestCase
       },
     )
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Database Update required',
     )
     watch_for(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test1',
     )
-    click(css: '#content .tab-pane.active div.js-execute')
+    click(css: '.content.active .tab-pane.active div.js-execute')
     watch_for(
       css: '.modal',
       value: 'restart',
@@ -144,14 +144,14 @@ class AdminObjectManagerTest < TestCase
     )
     sleep 5
     watch_for(
-      css: '#content',
+      css: '.content.active',
     )
     match_not(
-      css: '#content',
+      css: '.content.active',
       value: 'Database Update required',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test1',
     )
   end
@@ -263,10 +263,10 @@ class AdminObjectManagerTest < TestCase
     )
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Database Update required',
     )
-    click(css: '#content .tab-pane.active div.js-execute')
+    click(css: '.content.active .tab-pane.active div.js-execute')
     watch_for(
       css: '.modal',
       value: 'restart',
@@ -277,7 +277,7 @@ class AdminObjectManagerTest < TestCase
     )
     sleep 5
     watch_for(
-      css: '#content',
+      css: '.content.active',
     )
 
     # create new ticket
@@ -345,7 +345,7 @@ class AdminObjectManagerTest < TestCase
         name: 'browser_test7',
       },
     )
-    click(css: '#content .tab-pane.active div.js-execute')
+    click(css: '.content.active .tab-pane.active div.js-execute')
     watch_for(
       css: '.modal',
       value: 'restart',
@@ -356,34 +356,34 @@ class AdminObjectManagerTest < TestCase
     )
     sleep 5
     watch_for(
-      css: '#content',
+      css: '.content.active',
     )
     match_not(
-      css: '#content',
+      css: '.content.active',
       value: 'Database Update required',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test2',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test3',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test4',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test5',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test6',
     )
     match_not(
-      css: '#content table',
+      css: '.content.active table',
       value: 'browser_test7',
     )
   end

test/browser/agent_ticket_tag_test.rb

@@ -247,12 +247,12 @@ class AgentTicketTagTest < TestCase
     )
     click(
       browser: browser2,
-      css: 'a[href="#manage/tags"]',
+      css: '.content.active a[href="#manage/tags"]',
     )
     sleep 3
     execute(
       browser: browser2,
-      js: "$('#content .js-name:contains(\"tag3\")').click()",
+      js: "$('.content.active .js-name:contains(\"tag3\")').click()",
     )
     sleep 2
     set(
@@ -301,12 +301,12 @@ class AgentTicketTagTest < TestCase
     )
     click(
       browser: browser2,
-      css: 'a[href="#manage/tags"]',
+      css: '.content.active a[href="#manage/tags"]',
     )
     sleep 3
     execute(
       browser: browser2,
-      js: "$('#content .js-name:contains(\"tag5\")').closest('tr').find('.js-delete').click()",
+      js: "$('.content.active .js-name:contains(\"tag5\")').closest('tr').find('.js-delete').click()",
     )
     sleep 2
     click(
@@ -357,32 +357,32 @@ class AgentTicketTagTest < TestCase
     tasks_close_all()
 
     click(css: 'a[href="#manage"]')
-    click(css: 'a[href="#manage/tags"]')
+    click(css: '.content.active a[href="#manage/tags"]')
     switch(
-      css:  '#content .js-newTagSetting',
+      css:  '.content.active .js-newTagSetting',
       type: 'off',
     )
 
     set(
-      css: '#content .js-create input[name="name"]',
+      css: '.content.active .js-create input[name="name"]',
       value: tag_prefix + ' A',
     )
-    click(css: '#content .js-create .js-submit')
+    click(css: '.content.active .js-create .js-submit')
     set(
-      css: '#content .js-create input[name="name"]',
+      css: '.content.active .js-create input[name="name"]',
       value: tag_prefix + ' a',
     )
-    click(css: '#content .js-create .js-submit')
+    click(css: '.content.active .js-create .js-submit')
     set(
-      css: '#content .js-create input[name="name"]',
+      css: '.content.active .js-create input[name="name"]',
       value: tag_prefix + ' B',
     )
-    click(css: '#content .js-create .js-submit')
+    click(css: '.content.active .js-create .js-submit')
     set(
-      css: '#content .js-create input[name="name"]',
+      css: '.content.active .js-create input[name="name"]',
       value: tag_prefix + ' C',
     )
-    click(css: '#content .js-create .js-submit')
+    click(css: '.content.active .js-create .js-submit')
 
     # set tag (by tab)
     ticket1 = ticket_create(
@@ -509,9 +509,9 @@ class AgentTicketTagTest < TestCase
     )
 
     click(css: 'a[href="#manage"]')
-    click(css: 'a[href="#manage/tags"]')
+    click(css: '.content.active a[href="#manage/tags"]')
     switch(
-      css:  '#content .js-newTagSetting',
+      css:  '.content.active .js-newTagSetting',
       type: 'on',
     )
   end

test/browser/chat_test.rb

@@ -23,11 +23,11 @@ class ChatTest < TestCase
     )
     click(
       browser: agent,
-      css: 'a[href="#channels/chat"]',
+      css: '.content.active a[href="#channels/chat"]',
     )
     switch(
       browser: agent,
-      css: '#content .js-chatSetting',
+      css: '.content.active .js-chatSetting',
       type: 'off',
     )
 
@@ -60,11 +60,11 @@ class ChatTest < TestCase
     )
     click(
       browser: agent,
-      css: 'a[href="#channels/chat"]',
+      css: '.content.active a[href="#channels/chat"]',
     )
     switch(
       browser: agent,
-      css: '#content .js-chatSetting',
+      css: '.content.active .js-chatSetting',
       type: 'on',
     )
     sleep 15 # wait for rerendering

test/browser/first_steps_test.rb

@@ -112,7 +112,7 @@ class FirstStepsTest < TestCase
     click(css: '.active.content a[href="#channels/form"]')
     sleep 2
     switch(
-      css: '#content .js-formSetting',
+      css: '.content.active .js-formSetting',
       type: 'on',
     )
     click(css: '#navigation a[href="#dashboard"]')

test/browser/form_test.rb

@@ -22,11 +22,11 @@ class FormTest < TestCase
     )
     click(
       browser: agent,
-      css: 'a[href="#channels/form"]',
+      css: '.content.active a[href="#channels/form"]',
     )
     switch(
       browser: agent,
-      css: '#content .js-formSetting',
+      css: '.content.active .js-formSetting',
       type: 'off',
     )
 
@@ -43,7 +43,7 @@ class FormTest < TestCase
     )
     switch(
       browser: agent,
-      css: '#content .js-formSetting',
+      css: '.content.active .js-formSetting',
       type: 'on',
     )
 

test/browser/integration_test.rb

@@ -18,25 +18,25 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/sipgate"]')
     sleep 2
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'on',
     )
     set(
-      css: '#content .main .js-inboundBlockCallerId input[name=caller_id]',
+      css: '.content.active .main .js-inboundBlockCallerId input[name=caller_id]',
       value: '041 1234567',
     )
     set(
-      css: '#content .main .js-inboundBlockCallerId input[name=note]',
+      css: '.content.active .main .js-inboundBlockCallerId input[name=note]',
       value: 'block spam caller id',
     )
-    click(css: '#content .main .js-inboundBlockCallerId .js-add')
+    click(css: '.content.active .main .js-inboundBlockCallerId .js-add')
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
 
     exists(
-      css: '#content .main .js-inboundBlockCallerId [value="0411234567"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="0411234567"]',
     )
     exists(
-      css: '#content .main .js-inboundBlockCallerId [value="block spam caller id"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="block spam caller id"]',
     )
 
     click(css: 'a[href="#dashboard"]')
@@ -45,33 +45,33 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/sipgate"]')
 
     exists(
-      css: '#content .main .js-inboundBlockCallerId [value="0411234567"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="0411234567"]',
     )
     exists(
-      css: '#content .main .js-inboundBlockCallerId [value="block spam caller id"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="block spam caller id"]',
     )
 
     reload()
     exists(
-      css: '#content .main .js-inboundBlockCallerId [value="0411234567"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="0411234567"]',
     )
     exists(
-      css: '#content .main .js-inboundBlockCallerId [value="block spam caller id"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="block spam caller id"]',
     )
-    click(css: '#content .main .js-inboundBlockCallerId .js-remove')
+    click(css: '.content.active .main .js-inboundBlockCallerId .js-remove')
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
     sleep 6
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'off',
     )
 
     reload()
     exists_not(
-      css: '#content .main .js-inboundBlockCallerId [value="0411234567"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="0411234567"]',
     )
     exists_not(
-      css: '#content .main .js-inboundBlockCallerId [value="block spam caller id"]',
+      css: '.content.active .main .js-inboundBlockCallerId [value="block spam caller id"]',
     )
   end
 
@@ -90,35 +90,35 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/slack"]')
     sleep 2
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'on',
     )
-    click(css: '#content .main .checkbox-replacement')
+    click(css: '.content.active .main .checkbox-replacement')
     select(
-      css: '#content .main select[name="group_id"]',
+      css: '.content.active .main select[name="group_id"]',
       value: 'Users',
     )
     set(
-      css: '#content .main input[name="webhook"]',
+      css: '.content.active .main input[name="webhook"]',
       value: 'http://some_url/webhook/123',
     )
     set(
-      css: '#content .main input[name="username"]',
+      css: '.content.active .main input[name="username"]',
       value: 'someuser',
     )
 
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
 
     match(
-      css: '#content .main select[name="group_id"]',
+      css: '.content.active .main select[name="group_id"]',
       value: 'Users',
     )
     match(
-      css: '#content .main input[name="webhook"]',
+      css: '.content.active .main input[name="webhook"]',
       value: 'http://some_url/webhook/123',
     )
     match(
-      css: '#content .main input[name="username"]',
+      css: '.content.active .main input[name="username"]',
       value: 'someuser',
     )
 
@@ -128,35 +128,35 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/slack"]')
 
     match(
-      css: '#content .main select[name="group_id"]',
+      css: '.content.active .main select[name="group_id"]',
       value: 'Users',
     )
     match(
-      css: '#content .main input[name="webhook"]',
+      css: '.content.active .main input[name="webhook"]',
       value: 'http://some_url/webhook/123',
     )
     match(
-      css: '#content .main input[name="username"]',
+      css: '.content.active .main input[name="username"]',
       value: 'someuser',
     )
 
     reload()
 
     match(
-      css: '#content .main select[name="group_id"]',
+      css: '.content.active .main select[name="group_id"]',
       value: 'Users',
     )
     match(
-      css: '#content .main input[name="webhook"]',
+      css: '.content.active .main input[name="webhook"]',
       value: 'http://some_url/webhook/123',
     )
     match(
-      css: '#content .main input[name="username"]',
+      css: '.content.active .main input[name="username"]',
       value: 'someuser',
     )
 
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'off',
     )
   end
@@ -176,23 +176,23 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/clearbit"]')
     sleep 2
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'on',
     )
     set(
-      css: '#content .main input[name="api_key"]',
+      css: '.content.active .main input[name="api_key"]',
       value: 'some_api_key',
     )
     set(
-      css: '#content .main .js-userSync .js-new [name="source"]',
+      css: '.content.active .main .js-userSync .js-new [name="source"]',
       value: 'source1',
     )
     set(
-      css: '#content .main .js-userSync .js-new [name="destination"]',
+      css: '.content.active .main .js-userSync .js-new [name="destination"]',
       value: 'destination1',
     )
-    click(css: '#content .main .js-userSync .js-add')
+    click(css: '.content.active .main .js-userSync .js-add')
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
 
     click(css: 'a[href="#dashboard"]')
     click(css: 'a[href="#manage"]')
@@ -200,54 +200,54 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/clearbit"]')
 
     match(
-      css: '#content .main input[name="api_key"]',
+      css: '.content.active .main input[name="api_key"]',
       value: 'some_api_key',
     )
     exists(
-      css: '#content .main .js-userSync [value="source1"]',
+      css: '.content.active .main .js-userSync [value="source1"]',
     )
     exists(
-      css: '#content .main .js-userSync [value="destination1"]',
+      css: '.content.active .main .js-userSync [value="destination1"]',
     )
 
     reload()
 
     match(
-      css: '#content .main input[name="api_key"]',
+      css: '.content.active .main input[name="api_key"]',
       value: 'some_api_key',
     )
     exists(
-      css: '#content .main .js-userSync [value="source1"]',
+      css: '.content.active .main .js-userSync [value="source1"]',
     )
     exists(
-      css: '#content .main .js-userSync [value="destination1"]',
+      css: '.content.active .main .js-userSync [value="destination1"]',
     )
 
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'off',
     )
 
     set(
-      css: '#content .main input[name="api_key"]',
+      css: '.content.active .main input[name="api_key"]',
       value: '-empty-',
     )
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
 
     reload()
     match_not(
-      css: '#content .main input[name="api_key"]',
+      css: '.content.active .main input[name="api_key"]',
       value: 'some_api_key',
     )
     match(
-      css: '#content .main input[name="api_key"]',
+      css: '.content.active .main input[name="api_key"]',
       value: '-empty-',
     )
     exists(
-      css: '#content .main .js-userSync [value="source1"]',
+      css: '.content.active .main .js-userSync [value="source1"]',
     )
     exists(
-      css: '#content .main .js-userSync [value="destination1"]',
+      css: '.content.active .main .js-userSync [value="destination1"]',
     )
   end
 
@@ -266,25 +266,25 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/icinga"]')
     sleep 2
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'on',
     )
     set(
-      css: '#content .main input[name="icinga_sender"]',
+      css: '.content.active .main input[name="icinga_sender"]',
       value: 'some@othersender.com',
     )
     select(
-      css: '#content .main select[name="icinga_auto_close"]',
+      css: '.content.active .main select[name="icinga_auto_close"]',
       value: 'no',
     )
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
 
     match(
-      css: '#content .main input[name="icinga_sender"]',
+      css: '.content.active .main input[name="icinga_sender"]',
       value: 'some@othersender.com',
     )
     match(
-      css: '#content .main select[name="icinga_auto_close"]',
+      css: '.content.active .main select[name="icinga_auto_close"]',
       value: 'no',
     )
 
@@ -294,45 +294,45 @@ class IntegrationTest < TestCase
     click(css: 'a[href="#system/integration/icinga"]')
 
     match(
-      css: '#content .main input[name="icinga_sender"]',
+      css: '.content.active .main input[name="icinga_sender"]',
       value: 'some@othersender.com',
     )
     match(
-      css: '#content .main select[name="icinga_auto_close"]',
+      css: '.content.active .main select[name="icinga_auto_close"]',
       value: 'no',
     )
 
     reload()
 
     match(
-      css: '#content .main input[name="icinga_sender"]',
+      css: '.content.active .main input[name="icinga_sender"]',
       value: 'some@othersender.com',
     )
     match(
-      css: '#content .main select[name="icinga_auto_close"]',
+      css: '.content.active .main select[name="icinga_auto_close"]',
       value: 'no',
     )
 
     switch(
-      css: '#content .main .js-switch',
+      css: '.content.active .main .js-switch',
       type: 'off',
     )
     set(
-      css: '#content .main input[name="icinga_sender"]',
+      css: '.content.active .main input[name="icinga_sender"]',
       value: 'icinga@monitoring.example.com',
     )
     select(
-      css: '#content .main select[name="icinga_auto_close"]',
+      css: '.content.active .main select[name="icinga_auto_close"]',
       value: 'yes',
     )
-    click(css: '#content .main .js-submit')
+    click(css: '.content.active .main .js-submit')
 
     match(
-      css: '#content .main input[name="icinga_sender"]',
+      css: '.content.active .main input[name="icinga_sender"]',
       value: 'icinga@monitoring.example.com',
     )
     match(
-      css: '#content .main select[name="icinga_auto_close"]',
+      css: '.content.active .main select[name="icinga_auto_close"]',
       value: 'yes',
     )
   end

test/browser/maintenance_login_message_test.rb

@@ -25,7 +25,7 @@ class MaintenanceLoginMessageTest < TestCase
     message = "test <b>#{string}</b>"
     set(
       browser: browser1,
-      css: '#content .js-loginPreview [data-name="message"]',
+      css: '.content.active .js-loginPreview [data-name="message"]',
       value: message,
     )
     click(
@@ -45,7 +45,7 @@ class MaintenanceLoginMessageTest < TestCase
 
     switch(
       browser: browser1,
-      css:  '#content .js-loginSetting',
+      css:  '.content.active .js-loginSetting',
       type: 'on',
     )
 
@@ -57,7 +57,7 @@ class MaintenanceLoginMessageTest < TestCase
 
     switch(
       browser: browser1,
-      css:  '#content .js-loginSetting',
+      css:  '.content.active .js-loginSetting',
       type: 'off',
     )
 

test/browser/maintenance_mode_test.rb

@@ -33,7 +33,7 @@ class MaintenanceModeTest < TestCase
 
     switch(
       browser:  browser1,
-      css:      '#content .js-modeSetting',
+      css:      '.content.active .js-modeSetting',
       type:     'on',
       no_check: true,
     )
@@ -41,12 +41,12 @@ class MaintenanceModeTest < TestCase
     # check warning
     watch_for(
       browser: browser1,
-      css: '#content .modal .modal-header',
+      css: '.content.active .modal .modal-header',
       value: 'confirm',
     )
     click(
       browser: browser1,
-      css: '#content .modal .js-submit',
+      css: '.content.active .modal .js-submit',
     )
 
     watch_for(
@@ -92,7 +92,7 @@ class MaintenanceModeTest < TestCase
 
     switch(
       browser: browser1,
-      css:  '#content .js-modeSetting',
+      css:  '.content.active .js-modeSetting',
       type: 'off',
     )
 
@@ -121,7 +121,7 @@ class MaintenanceModeTest < TestCase
 
     switch(
       browser:  browser1,
-      css:      '#content .js-modeSetting',
+      css:      '.content.active .js-modeSetting',
       type:     'on',
       no_check: true,
     )
@@ -129,12 +129,12 @@ class MaintenanceModeTest < TestCase
     # check warning
     watch_for(
       browser: browser1,
-      css: '#content .modal .modal-header',
+      css: '.content.active .modal .modal-header',
       value: 'confirm',
     )
     click(
       browser: browser1,
-      css: '#content .modal .js-submit',
+      css: '.content.active .modal .js-submit',
     )
 
     watch_for(
@@ -148,7 +148,7 @@ class MaintenanceModeTest < TestCase
 
     switch(
       browser: browser1,
-      css:  '#content .js-modeSetting',
+      css:  '.content.active .js-modeSetting',
       type: 'off',
     )
 

test/browser/maintenance_session_message_test.rb

@@ -36,18 +36,18 @@ class MaintenanceSessionMessageTest < TestCase
 
     set(
       browser: browser1,
-      css: '#content .js-Message input[name="head"]',
+      css: '.content.active .js-Message input[name="head"]',
       value: title_html,
     )
     set(
       browser: browser1,
-      css: '#content .js-Message .js-textarea[data-name="message"]',
+      css: '.content.active .js-Message .js-textarea[data-name="message"]',
       value: message_html,
     )
 
     click(
       browser: browser1,
-      css: '#content .js-Message button.js-submit',
+      css: '.content.active .js-Message button.js-submit',
     )
 
     watch_for(
@@ -84,18 +84,18 @@ class MaintenanceSessionMessageTest < TestCase
 
     set(
       browser: browser1,
-      css: '#content .js-Message input[name="head"]',
+      css: '.content.active .js-Message input[name="head"]',
       value: title_html + ' #2',
     )
     set(
       browser: browser1,
-      css: '#content .js-Message .js-textarea[data-name="message"]',
+      css: '.content.active .js-Message .js-textarea[data-name="message"]',
       value: message_html + ' #2',
     )
 
     click(
       browser: browser1,
-      css: '#content .js-Message button.js-submit',
+      css: '.content.active .js-Message button.js-submit',
     )
 
     watch_for(
@@ -132,21 +132,21 @@ class MaintenanceSessionMessageTest < TestCase
 
     set(
       browser: browser1,
-      css: '#content .js-Message input[name="head"]',
+      css: '.content.active .js-Message input[name="head"]',
       value: title_html + ' #3',
     )
     set(
       browser: browser1,
-      css: '#content .js-Message .js-textarea[data-name="message"]',
+      css: '.content.active .js-Message .js-textarea[data-name="message"]',
       value: message_html + ' #3',
     )
     click(
       browser: browser1,
-      css: '#content .js-Message input[name="reload"] + .icon-checkbox.icon-unchecked',
+      css: '.content.active .js-Message input[name="reload"] + .icon-checkbox.icon-unchecked',
     )
     click(
       browser: browser1,
-      css: '#content .js-Message button.js-submit',
+      css: '.content.active .js-Message button.js-submit',
     )
 
     watch_for(

test/browser/preferences_language_test.rb

@@ -50,7 +50,7 @@ class PreferencesLanguageTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'Deutsch',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     watch_for(
       css: 'body',
       value: 'Sprache',
@@ -163,7 +163,7 @@ class PreferencesLanguageTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'English (United States)',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     sleep 2
     watch_for(
       css: 'body',
@@ -279,7 +279,7 @@ class PreferencesLanguageTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'Deutsch',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     sleep 4
     watch_for(
       css: 'body',
@@ -324,7 +324,7 @@ class PreferencesLanguageTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'English (United States)',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     sleep 2
     watch_for(
       css: 'body',

test/browser/preferences_token_access_test.rb

@@ -15,48 +15,48 @@ class PreferencesTokenAccessTest < TestCase
     click(css: 'a[href="#profile"]')
     click(css: 'a[href="#profile/token_access"]')
 
-    click(css: '#content .js-create')
+    click(css: '.content.active .js-create')
     watch_for(
       css: '.modal .modal-title',
       value: 'Add a Personal Access Token'
     )
 
     set(
-      css:   '#content .modal .js-input',
+      css:   '.content.active .modal .js-input',
       value: 'Some App#1',
     )
     set(
-      css:   '#content .modal .js-datepicker',
+      css:   '.content.active .modal .js-datepicker',
       value: '05/15/2022',
     )
     sendkey(value: :tab)
-    click(css: '#content .modal input[value="ticket.agent"] ~ .label-text')
+    click(css: '.content.active .modal input[value="ticket.agent"] ~ .label-text')
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
     watch_for(
       css: '.modal .modal-title',
       value: 'Your New Personal Access Token'
     )
     click(css: '.modal .js-submit')
     watch_for(
-      css: '#content .js-tokenList',
+      css: '.content.active .js-tokenList',
       value: 'Some App#1'
     )
     watch_for(
-      css: '#content .js-tokenList',
+      css: '.content.active .js-tokenList',
       value: '05/15/2022'
     )
 
-    click(css: '#content .js-create')
+    click(css: '.content.active .js-create')
     watch_for(
       css: '.modal .modal-title',
       value: 'Add a Personal Access Token'
     )
     set(
-      css:   '#content .modal .js-input',
+      css:   '.content.active .modal .js-input',
       value: 'Some App#2',
     )
-    click(css: '#content .modal input[value="ticket.agent"] ~ .label-text')
+    click(css: '.content.active .modal input[value="ticket.agent"] ~ .label-text')
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for(
       css: '.modal .modal-title',
@@ -64,20 +64,20 @@ class PreferencesTokenAccessTest < TestCase
     )
     click(css: '.modal .js-submit')
     watch_for(
-      css: '#content .js-tokenList',
+      css: '.content.active .js-tokenList',
       value: 'Some App#2'
     )
 
-    click(css: '#content .js-tokenList a')
+    click(css: '.content.active .js-tokenList a')
     watch_for(
-      css: '#content .modal .modal-header',
+      css: '.content.active .modal .modal-header',
       value: 'confirm',
     )
     click(
-      css: '#content .modal .js-submit',
+      css: '.content.active .modal .js-submit',
     )
     watch_for_disappear(
-      css: '#content .js-tokenList',
+      css: '.content.active .js-tokenList',
       value: 'Some App#2'
     )
 

test/browser/setting_test.rb

@@ -19,7 +19,7 @@ class SettingTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'English (United States)',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     sleep 2
 
     # change settings
@@ -28,7 +28,7 @@ class SettingTest < TestCase
     click(css: 'a[href="#third_party_auth"]')
     sleep 2
     switch(
-      css: '#content .js-setting[data-name="auth_facebook"]',
+      css: '.content.active .js-setting[data-name="auth_facebook"]',
       type: 'off',
     )
 
@@ -50,7 +50,7 @@ class SettingTest < TestCase
 
     # set yes
     switch(
-      css: '#content .js-setting[data-name="auth_facebook"]',
+      css: '.content.active .js-setting[data-name="auth_facebook"]',
       type: 'on',
     )
 
@@ -124,7 +124,7 @@ class SettingTest < TestCase
     )
     sleep 2
     switch(
-      css: '#content .js-setting[data-name="auth_facebook"]',
+      css: '.content.active .js-setting[data-name="auth_facebook"]',
       type: 'off',
     )
 

test/browser/switch_to_user_test.rb

@@ -12,18 +12,18 @@ class SwitchToUserTest < TestCase
     tasks_close_all()
 
     click(css: 'a[href="#manage"]')
-    click(css: 'a[href="#manage/users"]')
+    click(css: '.content.active a[href="#manage/users"]')
 
     set(
-      css:   '#content .js-search',
+      css:   '.content.active .js-search',
       value: 'nicole',
     )
     sleep 3
 
-    @browser.mouse.move_to(@browser.find_elements({ css: '#content .table-overview tbody tr:first-child' } )[0])
+    @browser.mouse.move_to(@browser.find_elements({ css: '.content.active .table-overview tbody tr:first-child' } )[0])
     sleep 0.5
     click(
-      css: '#content .icon-switchView',
+      css: '.content.active .icon-switchView',
     )
     sleep 3
 

test/browser/translation_test.rb

@@ -18,7 +18,7 @@ class TranslationTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'English (United States)',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     sleep 2
     watch_for(
       css: 'body',
@@ -29,7 +29,7 @@ class TranslationTest < TestCase
     click(css: 'a[href="#system/translation"]')
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'English is the source language, so we have nothing to translate',
     )
 
@@ -40,7 +40,7 @@ class TranslationTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'Deutsch',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     watch_for(
       css: 'body',
       value: 'Sprache',
@@ -51,7 +51,7 @@ class TranslationTest < TestCase
 
     notify_close(optional: true) # to be not in click area
     set(
-      css: '#content input.js-Item[data-source="Translations"]',
+      css: '.content.active input.js-Item[data-source="Translations"]',
       value: 'Übersetzung2',
     )
     sleep 5 # wait until nofify is gone
@@ -65,11 +65,11 @@ class TranslationTest < TestCase
     click(css: 'a[href="#system/translation"]')
 
     match(
-      css: '#content .sidebar',
+      css: '.content.active .sidebar',
       value: 'Übersetzung2',
     )
     match(
-      css: '#content input.js-Item[data-source="Translations"]',
+      css: '.content.active input.js-Item[data-source="Translations"]',
       value: 'Übersetzung2',
     )
 
@@ -79,11 +79,11 @@ class TranslationTest < TestCase
     sleep 5
 
     match(
-      css: '#content .sidebar',
+      css: '.content.active .sidebar',
       value: 'Übersetzung2',
     )
     match_not(
-      css: '#content input.js-Item[data-source="Translations"]',
+      css: '.content.active input.js-Item[data-source="Translations"]',
       value: 'Übersetzung2',
     )
 
@@ -95,15 +95,15 @@ class TranslationTest < TestCase
     sleep 2
 
     match_not(
-      css: '#content .sidebar',
+      css: '.content.active .sidebar',
       value: 'Übersetzung2',
     )
     match_not(
-      css: '#content input.js-Item[data-source="Translations"]',
+      css: '.content.active input.js-Item[data-source="Translations"]',
       value: 'Übersetzung2',
     )
     match_not(
-      css: '#content .sidebar',
+      css: '.content.active .sidebar',
       value: 'Übersetzung2',
     )
 
@@ -156,7 +156,7 @@ class TranslationTest < TestCase
     sleep 4
 
     match(
-      css: '#content input.js-Item[data-source="Overviews"]',
+      css: '.content.active input.js-Item[data-source="Overviews"]',
       value: 'Übersichten123',
     )
 
@@ -184,7 +184,7 @@ class TranslationTest < TestCase
       css: '.language_item [name="locale"]',
       value: 'English (United States)',
     )
-    click(css: '.content button[type="submit"]')
+    click(css: '.content.active button[type="submit"]')
     sleep 2
     watch_for(
       css: 'body',
@@ -232,11 +232,11 @@ class TranslationTest < TestCase
     sleep 4
 
     match(
-      css: '#content input.js-Item[data-source="Overviews"]',
+      css: '.content.active input.js-Item[data-source="Overviews"]',
       value: 'Overviews123',
     )
     match_not(
-      css: '#content',
+      css: '.content.active',
       value: 'English is the source language, so we have nothing to translate',
     )
 
@@ -245,7 +245,7 @@ class TranslationTest < TestCase
     )
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'English is the source language, so we have nothing to translate',
     )
 

test/browser_test_helper.rb

@@ -1193,7 +1193,7 @@ class TestCase < Test::Unit::TestCase
 
   file_upload(
     browser: browser1,
-    css:     '.active .attachmentPlaceholder-inputHolder input'
+    css:     '.content.active .attachmentPlaceholder-inputHolder input'
     files:   ['path/in/home/some_file.ext'], # 'test/fixtures/test1.pdf'
   )
 
@@ -1571,12 +1571,12 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/overviews"]',
+      css:  '.content.active a[href="#manage/overviews"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  '#content a[data-type="new"]',
+      css:  '.content.active a[data-type="new"]',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -1674,11 +1674,11 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/overviews"]',
+      css: '.content.active a[href="#manage/overviews"]',
       mute_log: true,
     )
 
-    instance.execute_script("$(\"#content td:contains('#{data[:name]}')\").first().click()")
+    instance.execute_script("$(\".content.active td:contains('#{data[:name]}')\").first().click()")
     sleep 2
 
     if data[:name]
@@ -1808,7 +1808,7 @@ wait untill text in selector disabppears
 
     found = false
     7.times {
-      element = instance.find_elements(css: '.active .newTicket')[0]
+      element = instance.find_elements(css: '.content.active .newTicket')[0]
       if element
         found = true
         break
@@ -1824,23 +1824,23 @@ wait untill text in selector disabppears
       if data[:group] == '-NONE-'
 
         # check if owner selection exists
-        count = instance.find_elements(css: '.active .newTicket select[name="group_id"] option').count
+        count = instance.find_elements(css: '.content.active .newTicket select[name="group_id"] option').count
         assert_equal(0, count, 'owner selection should not be showm')
 
         # check count of agents, should be only 3 / - selection + master + agent on init screen
-        count = instance.find_elements(css: '.active .newTicket select[name="owner_id"] option').count
+        count = instance.find_elements(css: '.content.active .newTicket select[name="owner_id"] option').count
         assert_equal(3, count, 'check if owner selection is - selection + master + agent per default')
 
       else
 
         # check count of agents, should be only 1 / - selection on init screen
         if !params[:disable_group_check]
-          count = instance.find_elements(css: '.active .newTicket select[name="owner_id"] option').count
+          count = instance.find_elements(css: '.content.active .newTicket select[name="owner_id"] option').count
           assert_equal(1, count, 'check if owner selection is empty per default')
         end
         select(
           browser:  instance,
-          css:      '.active .newTicket select[name="group_id"]',
+          css:      '.content.active .newTicket select[name="group_id"]',
           value:    data[:group],
           mute_log: true,
         )
@@ -1850,7 +1850,7 @@ wait untill text in selector disabppears
     if data[:priority]
       select(
         browser:  instance,
-        css:      '.active .newTicket select[name="priority_id"]',
+        css:      '.content.active .newTicket select[name="priority_id"]',
         value:    data[:priority],
         mute_log: true,
       )
@@ -1858,7 +1858,7 @@ wait untill text in selector disabppears
     if data[:state]
       select(
         browser:  instance,
-        css:      '.active .newTicket select[name="state_id"]',
+        css:      '.content.active .newTicket select[name="state_id"]',
         value:    data[:state],
         mute_log: true,
       )
@@ -1866,7 +1866,7 @@ wait untill text in selector disabppears
     if data[:title]
       set(
         browser:  instance,
-        css:      '.active .newTicket input[name="title"]',
+        css:      '.content.active .newTicket input[name="title"]',
         value:    data[:title],
         clear:    true,
         mute_log: true,
@@ -1875,20 +1875,20 @@ wait untill text in selector disabppears
     if data[:body]
       set(
         browser:  instance,
-        css:      '.active .newTicket div[data-name=body]',
+        css:      '.content.active .newTicket div[data-name=body]',
         value:    data[:body],
         clear:    true,
         mute_log: true,
       )
     end
     if data[:customer]
-      element = instance.find_elements(css: '.active .newTicket input[name="customer_id_completion"]')[0]
+      element = instance.find_elements(css: '.content.active .newTicket input[name="customer_id_completion"]')[0]
       element.click
       element.clear
 
       # ff issue, sometimes focus event gets dropped
       # if drowdown is not open, try it again
-      if !instance.find_elements(css: '.active .newTicket .js-recipientDropdown.open')[0]
+      if !instance.find_elements(css: '.content.active .newTicket .js-recipientDropdown.open')[0]
         instance.execute_script('$(".active .newTicket .js-recipientDropdown").addClass("open")')
       end
 
@@ -1899,8 +1899,8 @@ wait untill text in selector disabppears
       sleep 0.4
       # ff issue, sometimes enter event gets dropped
       # take user manually
-      if instance.find_elements(css: '.active .newTicket .js-recipientDropdown.open')[0]
+      if instance.find_elements(css: '.content.active .newTicket .js-recipientDropdown.open')[0]
-        instance.find_elements(css: '.active .newTicket .recipientList-entry.js-user.is-active')[0].click
+        instance.find_elements(css: '.content.active .newTicket .recipientList-entry.js-user.is-active')[0].click
         sleep 0.4
       end
     end
@@ -1909,7 +1909,7 @@ wait untill text in selector disabppears
       params[:custom_data_select].each { |local_key, local_value|
         select(
           browser: instance,
-          css:     ".active .newTicket select[name=\"#{local_key}\"]",
+          css:     ".content.active .newTicket select[name=\"#{local_key}\"]",
           value:   local_value,
         )
       }
@@ -1918,7 +1918,7 @@ wait untill text in selector disabppears
       params[:custom_data_input].each { |local_key, local_value|
         set(
           browser: instance,
-          css:     ".active .newTicket input[name=\"#{local_key}\"]",
+          css:     ".content.active .newTicket input[name=\"#{local_key}\"]",
           value:   local_value,
           clear:   true,
         )
@@ -1928,7 +1928,7 @@ wait untill text in selector disabppears
     if data[:attachment]
       file_upload(
         browser: instance,
-        css: '#content .text-1',
+        css: '.content.active .text-1',
         value: 'some text',
       )
     end
@@ -1941,7 +1941,7 @@ wait untill text in selector disabppears
     #instance.execute_script('$(".content.active .newTicket form").submit();')
     click(
       browser: instance,
-      css:  '.active .newTicket button.js-submit',
+      css:  '.content.active .newTicket button.js-submit',
       mute_log: true,
     )
 
@@ -1954,7 +1954,7 @@ wait untill text in selector disabppears
         id.gsub!(//,)
         id.gsub!(%r{^.+?/(\d+)$}, '\\1')
 
-        element = instance.find_elements(css: '.active .ticketZoom-header .ticket-number')[0]
+        element = instance.find_elements(css: '.content.active .ticketZoom-header .ticket-number')[0]
         if element
           number = element.text
           ticket = {
@@ -2045,10 +2045,10 @@ wait untill text in selector disabppears
     if data[:customer]
 
       # select tab
-      click(browser: instance, css: '.active .tabsSidebar-tab[data-tab="customer"]')
+      click(browser: instance, css: '.content.active .tabsSidebar-tab[data-tab="customer"]')
 
-      click(browser: instance, css: '.active div[data-tab="customer"] .js-actions .icon-arrow-down')
+      click(browser: instance, css: '.content.active div[data-tab="customer"] .js-actions .icon-arrow-down')
-      click(browser: instance, css: '.active div[data-tab="customer"] .js-actions [data-type="customer-change"]')
+      click(browser: instance, css: '.content.active div[data-tab="customer"] .js-actions [data-type="customer-change"]')
       watch_for(
         browser: instance,
         css: '.modal',
@@ -2072,12 +2072,12 @@ wait untill text in selector disabppears
 
       watch_for(
         browser: instance,
-        css: '.active .tabsSidebar',
+        css: '.content.active .tabsSidebar',
         value: data[:customer],
       )
 
       # select tab
-      click(browser: instance, css: '.active .tabsSidebar-tab[data-tab="ticket"]')
+      click(browser: instance, css: '.content.active .tabsSidebar-tab[data-tab="ticket"]')
 
     end
     if data[:body]
@@ -2102,17 +2102,17 @@ wait untill text in selector disabppears
       if data[:group] == '-NONE-'
 
         # check if owner selection exists
-        count = instance.find_elements(css: '.active .sidebar select[name="group_id"] option').count
+        count = instance.find_elements(css: '.content.active .sidebar select[name="group_id"] option').count
         assert_equal(0, count, 'owner selection should not be showm')
 
         # check count of agents, should be only 3 / - selection + master + agent on init screen
-        count = instance.find_elements(css: '.active .sidebar select[name="owner_id"] option').count
+        count = instance.find_elements(css: '.content.active .sidebar select[name="owner_id"] option').count
         assert_equal(3, count, 'check if owner selection is - selection + master + agent per default')
 
       else
         select(
           browser:  instance,
-          css:      '.active .sidebar select[name="group_id"]',
+          css:      '.content.active .sidebar select[name="group_id"]',
           value:    data[:group],
           mute_log: true,
         )
@@ -2123,7 +2123,7 @@ wait untill text in selector disabppears
     if data[:priority]
       select(
         browser:  instance,
-        css:      '.active .sidebar select[name="priority_id"]',
+        css:      '.content.active .sidebar select[name="priority_id"]',
         value:    data[:priority],
         mute_log: true,
       )
@@ -2132,7 +2132,7 @@ wait untill text in selector disabppears
     if data[:state]
       select(
         browser:  instance,
-        css:      '.active .sidebar select[name="state_id"]',
+        css:      '.content.active .sidebar select[name="state_id"]',
         value:    data[:state],
         mute_log: true,
       )
@@ -2313,7 +2313,7 @@ wait untill text in selector disabppears
     screenshot(browser: instance, comment: 'ticket_open_by_overview_search')
     instance.find_elements(partial_link_text: params[:number])[0].click
     sleep 1
-    number = instance.find_elements(css: '.active .ticketZoom-header .ticket-number')[0].text
+    number = instance.find_elements(css: '.content.active .ticketZoom-header .ticket-number')[0].text
     if number !~ /#{params[:number]}/
       screenshot(browser: instance, comment: 'ticket_open_by_overview_failed')
       raise "unable to search/find ticket #{params[:number]}!"
@@ -2359,7 +2359,7 @@ wait untill text in selector disabppears
     #instance.find_element(partial_link_text: params[:number] } ).click
     instance.execute_script("$(\".js-global-search-result a:contains('#{params[:number]}') .nav-tab-icon\").first().click()")
     sleep 1
-    number = instance.find_elements(css: '.active .ticketZoom-header .ticket-number')[0].text
+    number = instance.find_elements(css: '.content.active .ticketZoom-header .ticket-number')[0].text
     if number !~ /#{params[:number]}/
       screenshot(browser: instance, comment: 'ticket_open_by_search_failed')
       raise "unable to search/find ticket #{params[:number]}!"
@@ -2395,7 +2395,7 @@ wait untill text in selector disabppears
     #instance.find_element(partial_link_text: params[:title] } ).click
     instance.execute_script("$(\".js-global-search-result a:contains('#{params[:title]}') .nav-tab-icon\").click()")
     sleep 1
-    title = instance.find_elements(css: '.active .ticketZoom-header .js-objectTitle')[0].text
+    title = instance.find_elements(css: '.content.active .ticketZoom-header .js-objectTitle')[0].text
     if title !~ /#{params[:title]}/
       screenshot(browser: instance, comment: 'ticket_open_by_title_failed')
       raise "unable to search/find ticket #{params[:title]}!"
@@ -2483,7 +2483,7 @@ wait untill text in selector disabppears
     #instance.find_element(partial_link_text: params[:value] } ).click
     instance.execute_script("$(\".js-global-search-result a:contains('#{params[:value]}') .nav-tab-icon\").click()")
     sleep 1
-    name = instance.find_elements(css: '.active h1')[0].text
+    name = instance.find_elements(css: '.content.active h1')[0].text
     if name !~ /#{params[:value]}/
       screenshot(browser: instance, comment: 'organization_open_by_search_failed')
       raise "unable to search/find org #{params[:value]}!"
@@ -2518,7 +2518,7 @@ wait untill text in selector disabppears
     #instance.find_element(partial_link_text: params[:value]).click
     instance.execute_script("$(\".js-global-search-result a:contains('#{params[:value]}') .nav-tab-icon\").click()")
     sleep 1
-    name = instance.find_elements(css: '.active h1')[0].text
+    name = instance.find_elements(css: '.content.active h1')[0].text
     if name !~ /#{params[:value]}/
       screenshot(browser: instance, comment: 'user_open_by_search_failed')
       raise "unable to search/find user #{params[:value]}!"
@@ -2557,12 +2557,12 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/users"]',
+      css:  '.content.active a[href="#manage/users"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  'a[data-type="new"]',
+      css:  '.content.active a[data-type="new"]',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -2630,12 +2630,12 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/slas"]',
+      css:  '.content.active a[href="#manage/slas"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  'a.js-new',
+      css:  '.content.active a.js-new',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -2688,12 +2688,12 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/text_modules"]',
+      css:  '.content.active a[href="#manage/text_modules"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  'a[data-type="new"]',
+      css:  '.content.active a[data-type="new"]',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -2754,18 +2754,18 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#channels/email"]',
+      css: '.content.active a[href="#channels/email"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  'a[href="#c-signature"]',
+      css: '.content.active a[href="#c-signature"]',
       mute_log: true,
     )
     sleep 4
     click(
       browser: instance,
-      css:  '#content #c-signature a[data-type="new"]',
+      css: '.content.active #c-signature a[data-type="new"]',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -2824,12 +2824,12 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/groups"]',
+      css: '.content.active a[href="#manage/groups"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  'a[data-type="new"]',
+      css: '.content.active a[data-type="new"]',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -2859,14 +2859,14 @@ wait untill text in selector disabppears
           data[:member].each { |login|
             instance.find_elements(css: 'a[href="#manage"]')[0].click
             sleep 1
-            instance.find_elements(css: 'a[href="#manage/users"]')[0].click
+            instance.find_elements(css: '.content.active a[href="#manage/users"]')[0].click
             sleep 3
-            element = instance.find_elements(css: '#content [name="search"]')[0]
+            element = instance.find_elements(css: '.content.active [name="search"]')[0]
             element.clear
             element.send_keys(login)
             sleep 3
-            #instance.find_elements(:css => '#content table [data-id]')[0].click
+            #instance.find_elements(:css => '.content.active table [data-id]')[0].click
-            instance.execute_script('$("#content table [data-id] td").first().click()')
+            instance.execute_script('$(".content.active  table [data-id] td").first().click()')
             sleep 3
             #instance.find_elements(:css => 'label:contains(" ' + action[:name] + '")')[0].click
             instance.execute_script('$(\'label:contains(" ' + data[:name] + '")\').first().click()')
@@ -2915,12 +2915,12 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/roles"]',
+      css: '.content.active a[href="#manage/roles"]',
       mute_log: true,
     )
     click(
       browser: instance,
-      css:  'a[data-type="new"]',
+      css: '.content.active a[data-type="new"]',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -2961,14 +2961,14 @@ wait untill text in selector disabppears
           data[:member].each { |login|
             instance.find_elements(css: 'a[href="#manage"]')[0].click
             sleep 1
-            instance.find_elements(css: 'a[href="#manage/users"]')[0].click
+            instance.find_elements(css: '.content.active a[href="#manage/users"]')[0].click
             sleep 3
-            element = instance.find_elements(css: '#content [name="search"]')[0]
+            element = instance.find_elements(css: '.content.active  [name="search"]')[0]
             element.clear
             element.send_keys(login)
             sleep 3
-            #instance.find_elements(:css => '#content table [data-id]')[0].click
+            #instance.find_elements(:css => '.content.active table [data-id]')[0].click
-            instance.execute_script('$("#content table [data-id] td").first().click()')
+            instance.execute_script('$(".content.active table [data-id] td").first().click()')
             sleep 3
             #instance.find_elements(:css => 'label:contains(" ' + action[:name] + '")')[0].click
             instance.execute_script('$(\'label:contains(" ' + data[:name] + '")\').first().click()')
@@ -3017,10 +3017,10 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#manage/roles"]',
+      css:  '.content.active a[href="#manage/roles"]',
       mute_log: true,
     )
-    instance.execute_script('$(\'#content table tr td:contains(" ' + data[:name] + '")\').first().click()')
+    instance.execute_script('$(\'.content.active table tr td:contains(" ' + data[:name] + '")\').first().click()')
 
     modal_ready(browser: instance)
     element = instance.find_elements(css: '.modal input[name=name]')[0]
@@ -3070,14 +3070,14 @@ wait untill text in selector disabppears
           data[:member].each { |login|
             instance.find_elements(css: 'a[href="#manage"]')[0].click
             sleep 1
-            instance.find_elements(css: 'a[href="#manage/users"]')[0].click
+            instance.find_elements(css: '.content.active a[href="#manage/users"]')[0].click
             sleep 3
-            element = instance.find_elements(css: '#content [name="search"]')[0]
+            element = instance.find_elements(css: '.content.active [name="search"]')[0]
             element.clear
             element.send_keys(login)
             sleep 3
-            #instance.find_elements(:css => '#content table [data-id]')[0].click
+            #instance.find_elements(:css => '.content.active table [data-id]')[0].click
-            instance.execute_script('$("#content table [data-id] td").first().click()')
+            instance.execute_script('$(".content.active table [data-id] td").first().click()')
             sleep 3
             #instance.find_elements(:css => 'label:contains(" ' + action[:name] + '")')[0].click
             instance.execute_script('$(\'label:contains(" ' + data[:name] + '")\').first().click()')
@@ -3204,13 +3204,13 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#system/object_manager"]',
+      css:  '.content.active a[href="#system/object_manager"]',
       mute_log: true,
     )
     sleep 4
     click(
       browser: instance,
-      css:  '#content .js-new',
+      css:  '.content.active .js-new',
       mute_log: true,
     )
     modal_ready(browser: instance)
@@ -3321,15 +3321,15 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#system/object_manager"]',
+      css: '.content.active a[href="#system/object_manager"]',
       mute_log: true,
     )
     sleep 4
 
     instance = params[:browser] || @browser
     data     = params[:data]
-    r = instance.execute_script("$(\"#content td:contains('#{data[:name]}')\").first().closest('tr').find('.js-delete').click()")
+    r = instance.execute_script("$(\".content.active td:contains('#{data[:name]}')\").first().closest('tr').find('.js-delete').click()")
-    p "rrr #{r.inspect}"
+    #p "rrr #{r.inspect}"
   end
 
 =begin
@@ -3353,17 +3353,17 @@ wait untill text in selector disabppears
     )
     click(
       browser: instance,
-      css:  'a[href="#system/object_manager"]',
+      css:  '.content.active a[href="#system/object_manager"]',
       mute_log: true,
     )
     sleep 4
 
-    element = instance.find_elements(css: '#content .js-discard').first
+    element = instance.find_elements(css: '.content.active .js-discard').first
     element.click
 
     watch_for_disappear(
       browser: instance,
-      css:     '#content .js-discard',
+      css:     '.content.active .js-discard',
     )
 
   end

test/integration/facebook_browser_test.rb

@@ -43,71 +43,71 @@ class FacebookBrowserTest < TestCase
     tasks_close_all()
 
     click(css: 'a[href="#manage"]')
-    click(css: 'a[href="#channels/facebook"]')
+    click(css: '.content.active a[href="#channels/facebook"]')
 
-    click(css: '#content .js-configApp')
+    click(css: '.content.active .js-configApp')
     modal_ready()
     set(
-      css: '#content .modal [name=application_id]',
+      css: '.content.active .modal [name=application_id]',
       value: app_id,
     )
     set(
-      css: '#content .modal [name=application_secret]',
+      css: '.content.active .modal [name=application_secret]',
       value: 'wrong',
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Error',
     )
 
     set(
-      css: '#content .modal [name=application_secret]',
+      css: '.content.active .modal [name=application_secret]',
       value: app_secret,
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for_disappear(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Error',
     )
 
     watch_for(
-      css: '#content .js-new',
+      css: '.content.active .js-new',
       value: 'add account',
     )
 
-    click(css: '#content .js-configApp')
+    click(css: '.content.active .js-configApp')
     modal_ready()
     set(
-      css: '#content .modal [name=application_secret]',
+      css: '.content.active .modal [name=application_secret]',
       value: 'wrong',
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Error',
     )
 
     set(
-      css: '#content .modal [name=application_secret]',
+      css: '.content.active .modal [name=application_secret]',
       value: app_secret,
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for_disappear(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Error',
     )
 
     watch_for(
-      css: '#content .js-new',
+      css: '.content.active .js-new',
       value: 'add account',
     )
 
-    click(css: '#content .js-new')
+    click(css: '.content.active .js-new')
 
     watch_for(
       css: 'body',
@@ -131,7 +131,7 @@ class FacebookBrowserTest < TestCase
     #sleep 10
 
     #watch_for(
-    #  css: '#content .modal',
+    #  css: '.content.active .modal',
     #  value: '',
     #)
 
@@ -140,44 +140,44 @@ class FacebookBrowserTest < TestCase
       value: 'Dashboard',
     )
 
-    select(css: '#content .modal [name="pages::' + page_id + '::group_id"]', value: 'Users')
+    select(css: '.content.active .modal [name="pages::' + page_id + '::group_id"]', value: 'Users')
     sleep 1
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
     sleep 5
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Hansi Merkur',
     )
     exists(
-      css: '#content .main .action:nth-child(1)'
+      css: '.content.active .main .action:nth-child(1)'
     )
     exists_not(
-      css: '#content .main .action:nth-child(2)'
+      css: '.content.active .main .action:nth-child(2)'
     )
 
-    click(css: '#content .js-new')
+    click(css: '.content.active .js-new')
 
     sleep 10
 
     #click(css: '#login_button_inline')
 
     #watch_for(
-    #  css: '#content .modal',
+    #  css: '.content.active .modal',
     #  value: 'Search Terms',
     #)
 
-    click(css: '#content .modal .js-close')
+    click(css: '.content.active .modal .js-close')
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Hansi Merkur',
     )
     exists(
-      css: '#content .main .action:nth-child(1)'
+      css: '.content.active .main .action:nth-child(1)'
     )
     exists_not(
-      css: '#content .main .action:nth-child(2)'
+      css: '.content.active .main .action:nth-child(2)'
     )
 
     # watch till post is in app

test/integration/twitter_browser_test.rb

@@ -46,70 +46,70 @@ class TwitterBrowserTest < TestCase
     tasks_close_all()
 
     click(css: 'a[href="#manage"]')
-    click(css: 'a[href="#channels/twitter"]')
+    click(css: '.content.active a[href="#channels/twitter"]')
-    click(css: '#content .js-configApp')
+    click(css: '.content.active .js-configApp')
     sleep 2
     set(
-      css: '#content .modal [name=consumer_key]',
+      css: '.content.active .modal [name=consumer_key]',
       value: consumer_key,
     )
     set(
-      css: '#content .modal [name=consumer_secret]',
+      css: '.content.active .modal [name=consumer_secret]',
       value: 'wrong',
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Authorization Required',
     )
 
     set(
-      css: '#content .modal [name=consumer_secret]',
+      css: '.content.active .modal [name=consumer_secret]',
       value: consumer_secret,
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for_disappear(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Authorization Required',
     )
 
     watch_for(
-      css: '#content .js-new',
+      css: '.content.active .js-new',
       value: 'add account',
     )
 
-    click(css: '#content .js-configApp')
+    click(css: '.content.active .js-configApp')
 
     set(
-      css: '#content .modal [name=consumer_secret]',
+      css: '.content.active .modal [name=consumer_secret]',
       value: 'wrong',
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Authorization Required',
     )
 
     set(
-      css: '#content .modal [name=consumer_secret]',
+      css: '.content.active .modal [name=consumer_secret]',
       value: consumer_secret,
     )
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
 
     watch_for_disappear(
-      css: '#content .modal .alert',
+      css: '.content.active .modal .alert',
       value: 'Authorization Required',
     )
 
     watch_for(
-      css: '#content .js-new',
+      css: '.content.active .js-new',
       value: 'add account',
     )
 
-    click(css: '#content .js-new')
+    click(css: '.content.active .js-new')
 
     sleep 10
 
@@ -131,59 +131,59 @@ class TwitterBrowserTest < TestCase
     #)
 
     watch_for(
-      css: '#content .modal',
+      css: '.content.active .modal',
       value: 'Search Terms',
     )
 
     # add hash tag to search
-    click(css: '#content .modal .js-searchTermAdd')
+    click(css: '.content.active .modal .js-searchTermAdd')
-    set(css: '#content .modal [name="search::term"]', value: hash)
+    set(css: '.content.active .modal [name="search::term"]', value: hash)
-    select(css: '#content .modal [name="search::group_id"]', value: 'Users')
+    select(css: '.content.active .modal [name="search::group_id"]', value: 'Users')
-    click(css: '#content .modal .js-submit')
+    click(css: '.content.active .modal .js-submit')
     sleep 5
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Bob Mutschler',
     )
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: "@#{twitter_user_login}",
     )
     exists(
-      css: '#content .main .action:nth-child(1)'
+      css: '.content.active .main .action:nth-child(1)'
     )
     exists_not(
-      css: '#content .main .action:nth-child(2)'
+      css: '.content.active .main .action:nth-child(2)'
     )
 
     # add account again
-    click(css: '#content .js-new')
+    click(css: '.content.active .js-new')
 
     sleep 10
 
     click(css: '#allow')
 
     watch_for(
-      css: '#content .modal',
+      css: '.content.active .modal',
       value: 'Search Terms',
     )
 
-    click(css: '#content .modal .js-close')
+    click(css: '.content.active .modal .js-close')
 
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: 'Bob Mutschler',
     )
     watch_for(
-      css: '#content',
+      css: '.content.active',
       value: "@#{twitter_user_login}",
     )
     exists(
-      css: '#content .main .action:nth-child(1)'
+      css: '.content.active .main .action:nth-child(1)'
     )
     exists_not(
-      css: '#content .main .action:nth-child(2)'
+      css: '.content.active .main .action:nth-child(2)'
     )
 
     # wait till new streaming of channel is active