improve start of js apps

28 files changed, 409 insertions, 506 deletions

diff --git a/server/sonar-web/src/main/js/apps/api-documentation/app.js b/server/sonar-web/src/main/js/apps/api-documentation/app.js
index 3e706bcc05f..bc38d046613 100644
--- a/server/sonar-web/src/main/js/apps/api-documentation/app.js
+++ b/server/sonar-web/src/main/js/apps/api-documentation/app.js
@@ -29,7 +29,6 @@ define([
   var $ = jQuery,
       App = new Marionette.Application(),
       init = function (options) {
-
         // State
         this.state = new Backbone.Model({ internal: false });
 
@@ -65,7 +64,7 @@ define([
         this.router = new Router({ app: this });
         Backbone.history.start({
           pushState: true,
-          root: getRoot()
+          root: options.urlRoot
         });
       };
 
@@ -75,13 +74,6 @@ define([
     });
   });
 
-  function getRoot () {
-    var API_DOCUMENTATION = '/api_documentation',
-        path = window.location.pathname,
-        pos = path.indexOf(API_DOCUMENTATION);
-    return path.substr(0, pos + API_DOCUMENTATION.length);
-  }
-
   return App;
 
 });
diff --git a/server/sonar-web/src/main/js/apps/api-documentation/layout.js b/server/sonar-web/src/main/js/apps/api-documentation/layout.js
index ae4ce851798..773463f8728 100644
--- a/server/sonar-web/src/main/js/apps/api-documentation/layout.js
+++ b/server/sonar-web/src/main/js/apps/api-documentation/layout.js
@@ -34,7 +34,7 @@ define([
     },
 
     onRender: function () {
-      var navigator = $('.search-navigator');
+      var navigator = this.$('.search-navigator');
       navigator.addClass('sticky search-navigator-extended-view');
       var top = navigator.offset().top;
       this.$('.search-navigator-workspace-header').css({ top: top });
diff --git a/server/sonar-web/src/main/js/apps/api-documentation/templates/api-documentation-layout.hbs b/server/sonar-web/src/main/js/apps/api-documentation/templates/api-documentation-layout.hbs
index 4ef38c51b11..18019c34a4c 100644
--- a/server/sonar-web/src/main/js/apps/api-documentation/templates/api-documentation-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/api-documentation/templates/api-documentation-layout.hbs
@@ -1,9 +1,11 @@
-<div class="search-navigator-side search-navigator-side-light">
-  <div class="search-navigator-filters"></div>
-  <div class="api-documentation-results panel"></div>
-</div>
+<div class="search-navigator sticky">
+  <div class="search-navigator-side search-navigator-side-light">
+    <div class="search-navigator-filters"></div>
+    <div class="api-documentation-results panel"></div>
+  </div>
 
-<div class="search-navigator-workspace">
-  <div class="search-navigator-workspace-header"></div>
-  <div class="search-navigator-workspace-details"></div>
+  <div class="search-navigator-workspace">
+    <div class="search-navigator-workspace-header"></div>
+    <div class="search-navigator-workspace-details"></div>
+  </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/app.js b/server/sonar-web/src/main/js/apps/coding-rules/app.js
index c07d7513591..61f5e97ddd2 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/app.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/app.js
@@ -1,37 +1,18 @@
-/*
- * SonarQube, open source software quality management tool.
- * Copyright (C) 2008-2014 SonarSource
- * mailto:contact AT sonarsource DOT com
- *
- * SonarQube is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * SonarQube is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
 define([
-  './models/state',
-  './layout',
-  './models/rules',
-  'components/navigator/models/facets',
+      './models/state',
+      './layout',
+      './models/rules',
+      'components/navigator/models/facets',
 
-  './controller',
-  'components/navigator/router',
+      './controller',
+      'components/navigator/router',
 
-  './workspace-list-view',
-  './workspace-header-view',
+      './workspace-list-view',
+      './workspace-header-view',
 
-  './facets-view',
-  './filters-view'
-],
+      './facets-view',
+      './filters-view'
+    ],
     function (State,
               Layout,
               Rules,
@@ -44,59 +25,48 @@ define([
               FiltersView) {
 
       var $ = jQuery,
-          App = new Marionette.Application();
-
-      App.addInitializer(function () {
-        this.layout = new Layout();
-        $('.coding-rules').empty().append(this.layout.render().el);
-        $('#footer').addClass('search-navigator-footer');
-      });
-
-      App.addInitializer(function () {
-        this.state = new State();
-        this.list = new Rules();
-        this.facets = new Facets();
-      });
-
-      App.addInitializer(function () {
-        this.controller = new Controller({
-          app: this
-        });
-      });
-
-      App.addInitializer(function () {
-        this.workspaceListView = new WorkspaceListView({
-          app: this,
-          collection: this.list
-        });
-        this.layout.workspaceListRegion.show(this.workspaceListView);
-        this.workspaceListView.bindScrollEvents();
-
-        this.workspaceHeaderView = new WorkspaceHeaderView({
-          app: this,
-          collection: this.list
-        });
-        this.layout.workspaceHeaderRegion.show(this.workspaceHeaderView);
-
-        this.facetsView = new FacetsView({
-          app: this,
-          collection: this.facets
-        });
-        this.layout.facetsRegion.show(this.facetsView);
-
-        this.filtersView = new FiltersView({
-          app: this
-        });
-        this.layout.filtersRegion.show(this.filtersView);
-      });
-
-      App.addInitializer(function () {
-        key.setScope('list');
-        this.router = new Router({
-          app: this
-        });
-        Backbone.history.start();
-      });
+          App = new Marionette.Application(),
+          init = function (options) {
+            this.layout = new Layout({ el: options.el });
+            this.layout.render();
+            $('#footer').addClass('search-navigator-footer');
+
+            this.state = new State();
+            this.list = new Rules();
+            this.facets = new Facets();
+
+            this.controller = new Controller({ app: this });
+
+            this.workspaceListView = new WorkspaceListView({
+              app: this,
+              collection: this.list
+            });
+            this.layout.workspaceListRegion.show(this.workspaceListView);
+            this.workspaceListView.bindScrollEvents();
+
+            this.workspaceHeaderView = new WorkspaceHeaderView({
+              app: this,
+              collection: this.list
+            });
+            this.layout.workspaceHeaderRegion.show(this.workspaceHeaderView);
+
+            this.facetsView = new FacetsView({
+              app: this,
+              collection: this.facets
+            });
+            this.layout.facetsRegion.show(this.facetsView);
+
+            this.filtersView = new FiltersView({
+              app: this
+            });
+            this.layout.filtersRegion.show(this.filtersView);
+
+            key.setScope('list');
+            this.router = new Router({
+              app: this
+            });
+            Backbone.history.start();
+          };
 
       App.manualRepository = function () {
         return {
@@ -116,13 +86,13 @@ define([
         }
       };
 
-      var appXHR = $.get(baseUrl + '/api/rules/app').done(function(r) {
+      var appXHR = $.get(baseUrl + '/api/rules/app').done(function (r) {
         App.canWrite = r.canWrite;
         App.qualityProfiles = _.sortBy(r.qualityprofiles, ['name', 'lang']);
         App.languages = _.extend(r.languages, {
           none: 'None'
         });
-        _.map(App.qualityProfiles, function(profile) {
+        _.map(App.qualityProfiles, function (profile) {
           profile.language = App.languages[profile.lang];
         });
         App.repositories = r.repositories;
@@ -133,8 +103,12 @@ define([
         });
       });
 
-      $.when(window.requestMessages(), appXHR).done(function () {
-        App.start();
+      App.on('start', function (options) {
+        $.when(window.requestMessages(), appXHR).done(function () {
+          init.call(App, options);
+        });
       });
 
+      return App;
+
     });
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/layout.js b/server/sonar-web/src/main/js/apps/coding-rules/layout.js
index 238db774707..34f66a61a2e 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/layout.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/layout.js
@@ -35,8 +35,7 @@ define([
     },
 
     onRender: function () {
-      var navigator = $('.search-navigator');
-      navigator.addClass('sticky');
+      var navigator = this.$('.search-navigator');
       var top = navigator.offset().top;
       this.$('.search-navigator-workspace-header').css({ top: top });
       this.$('.search-navigator-side').css({ top: top }).isolatedScroll();
@@ -44,12 +43,12 @@ define([
 
     showDetails: function () {
       this.scroll = $(window).scrollTop();
-      $('.search-navigator').addClass('search-navigator-extended-view');
+      this.$('.search-navigator').addClass('search-navigator-extended-view');
     },
 
 
     hideDetails: function () {
-      $('.search-navigator').removeClass('search-navigator-extended-view');
+      this.$('.search-navigator').removeClass('search-navigator-extended-view');
       if (this.scroll != null) {
         $(window).scrollTop(this.scroll);
       }
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs
index 8f46e4f8fb1..3290b738558 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs
@@ -1,10 +1,12 @@
-<div class="search-navigator-side">
-  <div class="search-navigator-filters"></div>
-  <div class="search-navigator-facets"></div>
-</div>
+<div class="coding-rules search-navigator sticky">
+  <div class="search-navigator-side">
+    <div class="search-navigator-filters"></div>
+    <div class="search-navigator-facets"></div>
+  </div>
 
-<div class="search-navigator-workspace">
-  <div class="search-navigator-workspace-header"></div>
-  <div class="search-navigator-workspace-list"></div>
-  <div class="search-navigator-workspace-details"></div>
+  <div class="search-navigator-workspace">
+    <div class="search-navigator-workspace-header"></div>
+    <div class="search-navigator-workspace-list"></div>
+    <div class="search-navigator-workspace-details"></div>
+  </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/issues/app-context.js b/server/sonar-web/src/main/js/apps/issues/app-context.js
index bcef0841779..ba15e720664 100644
--- a/server/sonar-web/src/main/js/apps/issues/app-context.js
+++ b/server/sonar-web/src/main/js/apps/issues/app-context.js
@@ -13,10 +13,55 @@ define([
              FacetsView) {
 
   var $ = jQuery,
-      App = new Marionette.Application();
+      App = new Marionette.Application(),
+      init = function (options) {
+        this.config = options.config;
+        this.state = new State({
+          isContext: true,
+          contextQuery: { componentUuids: options.config.resource },
+          contextComponentUuid: options.config.resource,
+          contextComponentName: options.config.resourceName,
+          contextComponentQualifier: options.config.resourceQualifier
+        });
+        this.updateContextFacets();
+        this.list = new Issues();
+        this.facets = new Facets();
+        this.filters = new Filters();
+
+        this.layout = new Layout({ app: this, el: options.el });
+        this.layout.render();
+        $('#footer').addClass('search-navigator-footer');
+
+        this.controller = new Controller({ app: this });
+
+        this.issuesView = new WorkspaceListView({
+          app: this,
+          collection: this.list
+        });
+        this.layout.workspaceListRegion.show(this.issuesView);
+        this.issuesView.bindScrollEvents();
+
+        this.workspaceHeaderView = new WorkspaceHeaderView({
+          app: this,
+          collection: this.list
+        });
+        this.layout.workspaceHeaderRegion.show(this.workspaceHeaderView);
+
+        this.facetsView = new FacetsView({
+          app: this,
+          collection: this.facets
+        });
+        this.layout.facetsRegion.show(this.facetsView);
+
+        this.controller.fetchFilters().done(function () {
+          key.setScope('list');
+          App.router = new Router({ app: App });
+          Backbone.history.start();
+        });
+      };
 
   App.getContextQuery = function () {
-    return { componentUuids: window.config.resource };
+    return { componentUuids: this.config.resource };
   };
 
   App.getRestrictedFacets = function () {
@@ -35,71 +80,17 @@ define([
         facetsFromServer = this.state.get('facetsFromServer');
     return this.state.set({
       facets: facets,
-      allFacets: _.difference(allFacets, this.getRestrictedFacets()[window.config.resourceQualifier]),
-      facetsFromServer: _.difference(facetsFromServer, this.getRestrictedFacets()[window.config.resourceQualifier])
+      allFacets: _.difference(allFacets, this.getRestrictedFacets()[this.config.resourceQualifier]),
+      facetsFromServer: _.difference(facetsFromServer, this.getRestrictedFacets()[this.config.resourceQualifier])
     });
   };
 
-  App.addInitializer(function () {
-    this.state = new State({
-      isContext: true,
-      contextQuery: this.getContextQuery(),
-      contextComponentUuid: window.config.resource,
-      contextComponentName: window.config.resourceName,
-      contextComponentQualifier: window.config.resourceQualifier
+  App.on('start', function (options) {
+    $.when(window.requestMessages()).done(function () {
+      init.call(App, options);
     });
-    this.updateContextFacets();
-    this.list = new Issues();
-    this.facets = new Facets();
-    this.filters = new Filters();
   });
 
-  App.addInitializer(function () {
-    this.layout = new Layout({ app: this });
-    $('.issues').empty().append(this.layout.render().el);
-    $('#footer').addClass('search-navigator-footer');
-  });
-
-  App.addInitializer(function () {
-    this.controller = new Controller({ app: this });
-  });
-
-  App.addInitializer(function () {
-    this.issuesView = new WorkspaceListView({
-      app: this,
-      collection: this.list
-    });
-    this.layout.workspaceListRegion.show(this.issuesView);
-    this.issuesView.bindScrollEvents();
-  });
-
-  App.addInitializer(function () {
-    this.workspaceHeaderView = new WorkspaceHeaderView({
-      app: this,
-      collection: this.list
-    });
-    this.layout.workspaceHeaderRegion.show(this.workspaceHeaderView);
-  });
-
-  App.addInitializer(function () {
-    this.facetsView = new FacetsView({
-      app: this,
-      collection: this.facets
-    });
-    this.layout.facetsRegion.show(this.facetsView);
-  });
-
-  App.addInitializer(function () {
-    return this.controller.fetchFilters().done(function () {
-      key.setScope('list');
-      App.router = new Router({ app: App });
-      Backbone.history.start();
-    });
-  });
-
-  var l10nXHR = window.requestMessages();
-  return jQuery.when(l10nXHR).done(function () {
-    return App.start();
-  });
+  return App;
 
 });
diff --git a/server/sonar-web/src/main/js/apps/issues/app-new.js b/server/sonar-web/src/main/js/apps/issues/app-new.js
index 07b047bfcd8..061903ae01f 100644
--- a/server/sonar-web/src/main/js/apps/issues/app-new.js
+++ b/server/sonar-web/src/main/js/apps/issues/app-new.js
@@ -14,69 +14,57 @@ define([
              FacetsView, FiltersView) {
 
   var $ = jQuery,
-      App = new Marionette.Application();
+      App = new Marionette.Application(),
+      init = function (options) {
+        this.state = new State();
+        this.list = new Issues();
+        this.facets = new Facets();
+        this.filters = new Filters();
 
-  App.addInitializer(function () {
-    this.state = new State();
-    this.list = new Issues();
-    this.facets = new Facets();
-    this.filters = new Filters();
-  });
+        this.layout = new Layout({ app: this, el: options.el });
+        this.layout.render();
+        $('#footer').addClass('search-navigator-footer');
 
-  App.addInitializer(function () {
-    this.layout = new Layout({ app: this });
-    $('.issues').empty().append(this.layout.render().el);
-    $('#footer').addClass('search-navigator-footer');
-  });
+        this.controller = new Controller({ app: this });
 
-  App.addInitializer(function () {
-    this.controller = new Controller({ app: this });
-  });
+        this.issuesView = new WorkspaceListView({
+          app: this,
+          collection: this.list
+        });
+        this.layout.workspaceListRegion.show(this.issuesView);
+        this.issuesView.bindScrollEvents();
 
-  App.addInitializer(function () {
-    this.issuesView = new WorkspaceListView({
-      app: this,
-      collection: this.list
-    });
-    this.layout.workspaceListRegion.show(this.issuesView);
-    this.issuesView.bindScrollEvents();
-  });
+        this.workspaceHeaderView = new WorkspaceHeaderView({
+          app: this,
+          collection: this.list
+        });
+        this.layout.workspaceHeaderRegion.show(this.workspaceHeaderView);
 
-  App.addInitializer(function () {
-    this.workspaceHeaderView = new WorkspaceHeaderView({
-      app: this,
-      collection: this.list
-    });
-    this.layout.workspaceHeaderRegion.show(this.workspaceHeaderView);
-  });
+        this.facetsView = new FacetsView({
+          app: this,
+          collection: this.facets
+        });
+        this.layout.facetsRegion.show(this.facetsView);
 
-  App.addInitializer(function () {
-    this.facetsView = new FacetsView({
-      app: this,
-      collection: this.facets
-    });
-    this.layout.facetsRegion.show(this.facetsView);
-  });
+        this.filtersView = new FiltersView({
+          app: this,
+          collection: this.filters
+        });
+        this.layout.filtersRegion.show(this.filtersView);
 
-  App.addInitializer(function () {
-    this.filtersView = new FiltersView({
-      app: this,
-      collection: this.filters
-    });
-    this.layout.filtersRegion.show(this.filtersView);
-  });
+        this.controller.fetchFilters().done(function () {
+          key.setScope('list');
+          App.router = new Router({ app: App });
+          Backbone.history.start();
+        });
+      };
 
-  App.addInitializer(function () {
-    this.controller.fetchFilters().done(function () {
-      key.setScope('list');
-      App.router = new Router({ app: App });
-      Backbone.history.start();
+  App.on('start', function (options) {
+    $.when(window.requestMessages()).done(function () {
+      init.call(App, options);
     });
   });
 
-  var l10nXHR = window.requestMessages();
-  return jQuery.when(l10nXHR).done(function () {
-    return App.start();
-  });
+  return App;
 
 });
diff --git a/server/sonar-web/src/main/js/apps/issues/layout.js b/server/sonar-web/src/main/js/apps/issues/layout.js
index 13a71301a24..5dbbcaf1139 100644
--- a/server/sonar-web/src/main/js/apps/issues/layout.js
+++ b/server/sonar-web/src/main/js/apps/issues/layout.js
@@ -19,8 +19,8 @@ define([
       if (this.options.app.state.get('isContext')) {
         this.$(this.filtersRegion.el).addClass('hidden');
       }
-      $('.search-navigator').addClass('sticky');
-      var top = $('.search-navigator').offset().top;
+      this.$('.search-navigator').addClass('sticky');
+      var top = this.$('.search-navigator').offset().top;
       this.$('.search-navigator-workspace-header').css({ top: top });
       this.$('.search-navigator-side').css({ top: top }).isolatedScroll();
     },
@@ -33,22 +33,22 @@ define([
 
     showComponentViewer: function () {
       this.scroll = $(window).scrollTop();
-      $('.issues').addClass('issues-extended-view');
+      this.$('.issues').addClass('issues-extended-view');
     },
 
     hideComponentViewer: function () {
-      $('.issues').removeClass('issues-extended-view');
+      this.$('.issues').removeClass('issues-extended-view');
       if (this.scroll != null) {
         $(window).scrollTop(this.scroll);
       }
     },
 
     showHomePage: function () {
-      $('.issues').addClass('issues-home-view');
+      this.$('.issues').addClass('issues-home-view');
     },
 
     hideHomePage: function () {
-      $('.issues').removeClass('issues-home-view');
+      this.$('.issues').removeClass('issues-home-view');
     }
   });
 
diff --git a/server/sonar-web/src/main/js/apps/issues/templates/issues-layout.hbs b/server/sonar-web/src/main/js/apps/issues/templates/issues-layout.hbs
index 5a61d1f66bf..b84449ae553 100644
--- a/server/sonar-web/src/main/js/apps/issues/templates/issues-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/issues/templates/issues-layout.hbs
@@ -1,11 +1,13 @@
-<div class="search-navigator-side">
-  <div class="search-navigator-filters"></div>
-  <div class="search-navigator-facets"></div>
-</div>
+<div class="issues search-navigator">
+  <div class="search-navigator-side">
+    <div class="search-navigator-filters"></div>
+    <div class="search-navigator-facets"></div>
+  </div>
 
-<div class="search-navigator-workspace">
-  <div class="search-navigator-workspace-header"></div>
-  <div class="search-navigator-workspace-list"></div>
-  <div class="issues-workspace-component-viewer"></div>
-  <div class="issues-workspace-home"></div>
+  <div class="search-navigator-workspace">
+    <div class="search-navigator-workspace-header"></div>
+    <div class="search-navigator-workspace-list"></div>
+    <div class="issues-workspace-component-viewer"></div>
+    <div class="issues-workspace-home"></div>
+  </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/nav/app.js b/server/sonar-web/src/main/js/apps/nav/app.js
index 5d45dd82f97..b229981ff6b 100644
--- a/server/sonar-web/src/main/js/apps/nav/app.js
+++ b/server/sonar-web/src/main/js/apps/nav/app.js
@@ -27,53 +27,54 @@ define([
 
   var $ = jQuery,
       App = new Marionette.Application(),
-      state = new State();
+      init = function (options) {
+        var state = new State(options);
+        state.fetchGlobal();
 
-  state.set(window.navbarOptions.toJSON());
+        this.navbarView = new GlobalNavbarView({
+          app: App,
+          el: $('.navbar-global'),
+          model: state
+        });
+        this.navbarView.render();
 
-  App.on('start', function () {
-    state.fetchGlobal();
-
-    this.navbarView = new GlobalNavbarView({
-      app: App,
-      el: $('.navbar-global'),
-      model: state
-    });
-    this.navbarView.render();
+        if (state.get('space') === 'component') {
+          state.fetchComponent();
+          this.contextNavbarView = new ContextNavbarView({
+            app: App,
+            el: $('.navbar-context'),
+            model: state
+          });
+          this.contextNavbarView.render();
+        }
 
-    if (state.get('space') === 'component') {
-      state.fetchComponent();
-      this.contextNavbarView = new ContextNavbarView({
-        app: App,
-        el: $('.navbar-context'),
-        model: state
-      });
-      this.contextNavbarView.render();
-    }
+        if (state.get('space') === 'settings') {
+          state.fetchSettings();
+          this.settingsNavbarView = new SettingsNavbarView({
+            app: App,
+            el: $('.navbar-context'),
+            model: state
+          });
+          this.settingsNavbarView.render();
+        }
 
-    if (state.get('space') === 'settings') {
-      state.fetchSettings();
-      this.settingsNavbarView = new SettingsNavbarView({
-        app: App,
-        el: $('.navbar-context'),
-        model: state
-      });
-      this.settingsNavbarView.render();
-    }
+        $(window).on('keypress', function (e) {
+          var tagName = e.target.tagName;
+          if (tagName !== 'INPUT' && tagName !== 'SELECT' && tagName !== 'TEXTAREA') {
+            var code = e.keyCode || e.which;
+            if (code === 63) {
+              App.navbarView.showShortcutsHelp();
+            }
+          }
+        });
+      };
 
-    $(window).on('keypress', function (e) {
-      var tagName = e.target.tagName;
-      if (tagName !== 'INPUT' && tagName !== 'SELECT' && tagName !== 'TEXTAREA') {
-        var code = e.keyCode || e.which;
-        if (code === 63) {
-          App.navbarView.showShortcutsHelp();
-        }
-      }
+  App.on('start', function (options) {
+    $.when(window.requestMessages()).done(function () {
+      init.call(App, options);
     });
   });
 
-  window.requestMessages().done(function () {
-    App.start();
-  });
+  return App;
 
 });
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/app.js b/server/sonar-web/src/main/js/apps/quality-gates/app.js
index f5d521fe310..6f939c9aa24 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/app.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/app.js
@@ -40,7 +40,7 @@ define([
     this.router = new Router({ app: this });
     Backbone.history.start({
       pushState: true,
-      root: getRoot()
+      root: options.urlRoot
     });
   };
 
@@ -57,13 +57,6 @@ define([
     });
   });
 
-  function getRoot () {
-    var ROOT = '/quality_gates',
-        path = window.location.pathname,
-        pos = path.indexOf(ROOT);
-    return path.substr(0, pos + ROOT.length);
-  }
-
   return App;
 
 });
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/layout.js b/server/sonar-web/src/main/js/apps/quality-gates/layout.js
index 791ba30ae83..db02143caa6 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/layout.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/layout.js
@@ -3,8 +3,6 @@ define([
   './templates'
 ], function (IntroView) {
 
-  var $ = jQuery;
-
   return Marionette.LayoutView.extend({
     template: Templates['quality-gates-layout'],
 
@@ -16,7 +14,7 @@ define([
     },
 
     onRender: function () {
-      var top = $('.search-navigator').offset().top;
+      var top = this.$('.search-navigator').offset().top;
       this.$('.search-navigator-workspace-header').css({ top: top });
       this.$('.search-navigator-side').css({ top: top }).isolatedScroll();
       this.renderIntro();
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/templates/quality-gates-layout.hbs b/server/sonar-web/src/main/js/apps/quality-gates/templates/quality-gates-layout.hbs
index 4ac8b8b6c37..25bd5742e32 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/templates/quality-gates-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/quality-gates/templates/quality-gates-layout.hbs
@@ -1,9 +1,11 @@
-<div class="search-navigator-side search-navigator-side-light">
-  <div class="search-navigator-filters"></div>
-  <div class="quality-gates-results panel"></div>
-</div>
+<div class="search-navigator sticky search-navigator-extended-view">
+  <div class="search-navigator-side search-navigator-side-light">
+    <div class="search-navigator-filters"></div>
+    <div class="quality-gates-results panel"></div>
+  </div>
 
-<div class="search-navigator-workspace">
-  <div class="search-navigator-workspace-header"></div>
-  <div class="search-navigator-workspace-details"></div>
+  <div class="search-navigator-workspace">
+    <div class="search-navigator-workspace-header"></div>
+    <div class="search-navigator-workspace-details"></div>
+  </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/app.js b/server/sonar-web/src/main/js/apps/quality-profiles/app.js
index 30ed90b173c..cd94804cb03 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/app.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/app.js
@@ -1,22 +1,3 @@
-/*
- * SonarQube, open source software quality management tool.
- * Copyright (C) 2008-2014 SonarSource
- * mailto:contact AT sonarsource DOT com
- *
- * SonarQube is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * SonarQube is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
 define([
   './router',
   './controller',
@@ -27,62 +8,55 @@ define([
 ], function (Router, Controller, Layout, Profiles, ActionsView, ProfilesView) {
 
   var $ = jQuery,
-      App = new Marionette.Application();
-
-  App.on('start', function () {
-    // Layout
-    this.layout = new Layout({ el: '#quality-profiles' });
-    this.layout.render();
-    $('#footer').addClass('search-navigator-footer');
-
-    // Profiles List
-    this.profiles = new Profiles();
-
-    // Controller
-    this.controller = new Controller({ app: this });
-
-    // Actions View
-    this.actionsView = new ActionsView({
-      collection: this.profiles,
-      canWrite: this.canWrite
-    });
-    this.actionsView.requestLanguages().done(function () {
-      App.layout.actionsRegion.show(App.actionsView);
-    });
-
-    // Profiles View
-    this.profilesView = new ProfilesView({
-      collection: this.profiles,
-      canWrite: this.canWrite
-    });
-    this.layout.resultsRegion.show(this.profilesView);
-
-    // Router
-    this.router = new Router({ app: this });
-    Backbone.history.start({
-      pushState: true,
-      root: getRoot()
-    });
-
-  });
-
-
-  var requestUser = $.get(baseUrl + '/api/users/current').done(function (r) {
+      App = new Marionette.Application(),
+      requestUser = $.get(baseUrl + '/api/users/current').done(function (r) {
         App.canWrite = r.permissions.global.indexOf('profileadmin') !== -1;
       }),
       requestExporters = $.get(baseUrl + '/api/qualityprofiles/exporters').done(function (r) {
         App.exporters = r.exporters;
-      });
-
-  $.when(window.requestMessages(), requestUser, requestExporters).done(function () {
-    App.start();
+      }),
+      init = function (options) {
+        // Layout
+        this.layout = new Layout({ el: options.el });
+        this.layout.render();
+        $('#footer').addClass('search-navigator-footer');
+
+        // Profiles List
+        this.profiles = new Profiles();
+
+        // Controller
+        this.controller = new Controller({ app: this });
+
+        // Actions View
+        this.actionsView = new ActionsView({
+          collection: this.profiles,
+          canWrite: this.canWrite
+        });
+        this.actionsView.requestLanguages().done(function () {
+          App.layout.actionsRegion.show(App.actionsView);
+        });
+
+        // Profiles View
+        this.profilesView = new ProfilesView({
+          collection: this.profiles,
+          canWrite: this.canWrite
+        });
+        this.layout.resultsRegion.show(this.profilesView);
+
+        // Router
+        this.router = new Router({ app: this });
+        Backbone.history.start({
+          pushState: true,
+          root: options.urlRoot
+        });
+      };
+
+  App.on('start', function (options) {
+    $.when(window.requestMessages(), requestUser, requestExporters).done(function () {
+      init.call(App, options);
+    });
   });
 
-  function getRoot () {
-    var QUALITY_PROFILES = '/profiles',
-        path = window.location.pathname,
-        pos = path.indexOf(QUALITY_PROFILES);
-    return path.substr(0, pos + QUALITY_PROFILES.length);
-  }
+  return App;
 
 });
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/layout.js b/server/sonar-web/src/main/js/apps/quality-profiles/layout.js
index 7ec62799470..44cafd82d32 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/layout.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/layout.js
@@ -22,8 +22,6 @@ define([
   './templates'
 ], function (IntroView) {
 
-  var $ = jQuery;
-
   return Marionette.LayoutView.extend({
     template: Templates['quality-profiles-layout'],
 
@@ -35,7 +33,7 @@ define([
     },
 
     onRender: function () {
-      var navigator = $('.search-navigator');
+      var navigator = this.$('.search-navigator');
       navigator.addClass('sticky search-navigator-extended-view');
       var top = navigator.offset().top;
       this.$('.search-navigator-workspace-header').css({ top: top });
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-layout.hbs b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-layout.hbs
index 91e2e23a237..ac6f40bcaa4 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/templates/quality-profiles-layout.hbs
@@ -1,9 +1,11 @@
-<div class="search-navigator-side search-navigator-side-light">
-  <div class="search-navigator-filters"></div>
-  <div class="quality-profiles-results panel"></div>
-</div>
+<div class="search-navigator">
+  <div class="search-navigator-side search-navigator-side-light">
+    <div class="search-navigator-filters"></div>
+    <div class="quality-profiles-results panel"></div>
+  </div>
 
-<div class="search-navigator-workspace">
-  <div class="search-navigator-workspace-header"></div>
-  <div class="search-navigator-workspace-details"></div>
+  <div class="search-navigator-workspace">
+    <div class="search-navigator-workspace-header"></div>
+    <div class="search-navigator-workspace-details"></div>
+  </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/source-viewer/app.js b/server/sonar-web/src/main/js/apps/source-viewer/app.js
index ded35b07041..1c6947db3ee 100644
--- a/server/sonar-web/src/main/js/apps/source-viewer/app.js
+++ b/server/sonar-web/src/main/js/apps/source-viewer/app.js
@@ -1,54 +1,29 @@
-/*
- * SonarQube, open source software quality management tool.
- * Copyright (C) 2008-2014 SonarSource
- * mailto:contact AT sonarsource DOT com
- *
- * SonarQube is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * SonarQube is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-requirejs.config({
-  baseUrl: baseUrl + '/js'
-});
-
-requirejs([
+define([
   'components/source-viewer/main'
-
 ], function (SourceViewer) {
 
-  var App = new Marionette.Application();
-
-  App.addRegions({
-    viewerRegion: '#source-viewer'
+  var App = new Marionette.Application(),
+      init = function (options) {
+        this.addRegions({ mainRegion: options.el });
+
+        var viewer = new SourceViewer();
+        this.mainRegion.show(viewer);
+        viewer.open(options.file.uuid);
+        if (typeof options.file.line === 'number') {
+          viewer.on('loaded', function () {
+            viewer
+                .highlightLine(options.file.line)
+                .scrollToLine(options.file.line);
+          });
+        }
+      };
+
+  App.on('start', function (options) {
+    window.requestMessages().done(function () {
+      init.call(App, options);
+    });
   });
 
-  App.addInitializer(function () {
-    var viewer = new SourceViewer();
-    App.viewerRegion.show(viewer);
-    viewer.open(window.file.uuid);
-    if (typeof window.file.line === 'number') {
-      viewer.on('loaded', function () {
-        viewer
-            .highlightLine(window.file.line)
-            .scrollToLine(window.file.line);
-      });
-    }
-  });
-
-  var l10nXHR = window.requestMessages();
-
-  l10nXHR.done(function () {
-    App.start();
-  });
+  return App;
 
 });
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb
index 9779e93a1c0..52765748951 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb
@@ -1,9 +1,7 @@
-<div id="api-documentation" class="search-navigator sticky"></div>
-
 <% content_for :extra_script do %>
   <script>
     require(['apps/api-documentation/app'], function (App) {
-      App.start({ el: '#api-documentation' });
+      App.start({ el: '#content', urlRoot: baseUrl + '/api_documentation' });
     });
   </script>
 <% end %>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb
index c520f46993c..804ed54db8f 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/coding_rules/index.html.erb
@@ -1,7 +1,7 @@
-<div class="coding-rules search-navigator"></div>
-
 <% content_for :extra_script do %>
   <script>
-    require(['apps/coding-rules/app']);
+    require(['apps/coding-rules/app'], function (App) {
+      App.start({ el: '#content' });
+    });
   </script>
 <% end %>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/component/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/component/index.html.erb
index 3711e3ebb46..5f6a94409f2 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/component/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/component/index.html.erb
@@ -1,14 +1,17 @@
-<% content_for :script do %>
-  <script>require(['apps/source-viewer/app']);</script>
+<% content_for :extra_script do %>
+  <script type="text/javascript">
+    (function () {
+      var file = {
+        uuid: '<%= @resource.uuid -%>',
+        key: '<%= @resource.key -%>'
+        <% if @line %>, line: <%= @line -%><% end %>
+      };
+      require(['apps/source-viewer/app'], function (App) {
+        App.start({ el: '#body', file: file })
+      });
+    })();
+  </script>
 <% end %>
 
-<div id="source-viewer"></div>
 
-<script type="text/javascript">
-  window.file = {
-    uuid: '<%= @resource.uuid -%>',
-    key: '<%= @resource.key -%>'
-    <% if @line %>,line: <%= @line -%><% end %>
-  };
-</script>
 
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/component_issues/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/component_issues/index.html.erb
index c1b98d59ad0..d3a46e6eeda 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/component_issues/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/component_issues/index.html.erb
@@ -1,14 +1,15 @@
-<% content_for :script do %>
-  <script>require(['apps/issues/app-context']);</script>
+<% content_for :extra_script do %>
+  <script>
+    (function () {
+      var config = {
+        resource: '<%= escape_javascript @resource.uuid -%>',
+        resourceQualifier: '<%= escape_javascript @resource.qualifier -%>',
+        resourceName: '<%= escape_javascript @resource.name -%>',
+        periodDate: <% if @period %>'<%= escape_javascript @snapshot.period_datetime(@period) -%>'<% else %>null<% end %>
+      };
+      require(['apps/issues/app-context'], function (App) {
+        App.start({ el: '#content', config: config });
+      });
+    })();
+  </script>
 <% end %>
-
-<div class="issues search-navigator"></div>
-
-<script>
-  var config = {
-    resource: '<%= escape_javascript @resource.uuid -%>',
-    resourceQualifier: '<%= escape_javascript @resource.qualifier -%>',
-    resourceName: '<%= escape_javascript @resource.name -%>',
-    periodDate: <% if @period %>'<%= escape_javascript @snapshot.period_datetime(@period) -%>'<% else %>null<% end %>
-  };
-</script>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb
index d23d96e68c2..23e483f5746 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/no_dashboard.html.erb
@@ -3,16 +3,21 @@
 </div>
 
 <% content_for :extra_script do %>
-  <script type="text/javascript">
-    window.file = {
-      uuid: '<%= @resource.uuid -%>',
-      key: '<%= @resource.key -%>'
-    };
-    document.querySelector('.navbar-context').remove();
-    jQuery('.page-wrapper-context').addClass('page-wrapper-global').removeClass('page-wrapper-context');
-  </script>
-
   <script>
-    require(['apps/source-viewer/app']);
+    (function () {
+      jQuery('.navbar-context').remove();
+      jQuery('.page-wrapper-context').addClass('page-wrapper-global').removeClass('page-wrapper-context');
+      var file = {
+        uuid: '<%= @resource.uuid -%>',
+        key: '<%= @resource.key -%>'
+      };
+      require(['apps/source-viewer/app'], function (App) {
+        App.start({ el: '#source-viewer', file: file })
+      });
+    })();
   </script>
 <% end %>
+
+
+
+
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/issues/search.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
index 66fb3c06168..1cf75f1d41f 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
@@ -1,7 +1,7 @@
-<div class="issues search-navigator"></div>
-
 <% content_for :extra_script do %>
   <script>
-    require(['apps/issues/app-new']);
+    require(['apps/issues/app-new'], function (App) {
+      App.start({ el: '#content' });
+    });
   </script>
 <% end %>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb
index 21e492f553c..dd25b284589 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar.html.erb
@@ -1,5 +1,29 @@
-<%= render 'layouts/navbar_conf' -%>
 <%= render 'layouts/recent_history' -%>
+
+<%
+   selected_section = controller.class::SECTION if defined?(controller.class::SECTION)
+   if selected_section == Navigation::SECTION_RESOURCE && !@project && !@resource
+     selected_section = Navigation::SECTION_HOME
+   end
+
+   @project = @resource unless @project || selected_section == Navigation::SECTION_HOME
+%>
+
 <script>
-  require(['apps/nav/app']);
+  (function () {
+    var options = {};
+    <% if selected_section == Navigation::SECTION_RESOURCE %>
+    options.space = 'component';
+    options.componentKey = '<%= escape_javascript @project.key -%>';
+    <% end %>
+
+    <% if selected_section == Navigation::SECTION_CONFIGURATION %>
+    options.space = 'settings';
+    <% end %>
+
+    window.SS.isUserAdmin = <%= current_user && is_admin? ? 'true' : 'false' -%>;
+    require(['apps/nav/app'], function (App) {
+      App.start(options);
+    });
+  })();
 </script>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb
deleted file mode 100644
index 194fe53bd42..00000000000
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_navbar_conf.html.erb
+++ /dev/null
@@ -1,22 +0,0 @@
-<%
-   selected_section = controller.class::SECTION if defined?(controller.class::SECTION)
-   if selected_section == Navigation::SECTION_RESOURCE && !@project && !@resource
-     selected_section = Navigation::SECTION_HOME
-   end
-
-   @project = @resource unless @project || selected_section == Navigation::SECTION_HOME
-%>
-
-<script>
-  window.navbarOptions = new Backbone.Model();
-
-  <% if selected_section == Navigation::SECTION_RESOURCE %>
-  window.navbarOptions.set({ space: 'component', componentKey: '<%= escape_javascript @project.key -%>' });
-  <% end %>
-
-  <% if selected_section == Navigation::SECTION_CONFIGURATION %>
-  window.navbarOptions.set({ space: 'settings' });
-  <% end %>
-
-  window.SS.isUserAdmin = <%= current_user && is_admin? ? 'true' : 'false' -%>;
-</script>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb
index 371d2b45735..9f4ee19f8cc 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb
@@ -1,7 +1,7 @@
-<div class="search-navigator" id="quality-profiles"></div>
-
 <% content_for :extra_script do %>
   <script>
-    require(['apps/quality-profiles/app']);
+    require(['apps/quality-profiles/app'], function (App) {
+      App.start({ el: '#content', urlRoot: baseUrl + '/profiles' });
+    });
   </script>
 <% end %>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb
index 749c6aeba6a..9563962a02a 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb
@@ -1,6 +1,7 @@
-<div class="search-navigator sticky search-navigator-extended-view" id="quality-gates"></div>
-<script>
-  require(['apps/quality-gates/app'], function (App) {
-    App.start({ el: '#quality-gates' });
-  });
-</script>
+<% content_for :extra_script do %>
+  <script>
+    require(['apps/quality-gates/app'], function (App) {
+      App.start({ el: '#content', urlRoot: baseUrl + '/quality_gates' });
+    });
+  </script>
+<% end %>