Merge remote-tracking branch 'odoo/master' into master-autocompletion-ged

5 files changed, 146 insertions, 299 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index c14100a7d5f..d496496c1fe 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -20,6 +20,25 @@
   font-style: normal;
 }
 
+#oe_main_menu_navbar {
+  min-height: 34px;
+  z-index: 1001;
+  border-radius: 0;
+}
+#oe_main_menu_navbar li a, #oe_main_menu_navbar li button {
+  padding: 4px 8px 4px 8px;
+  margin-top: 2px;
+  font-size: 13px;
+}
+#oe_main_menu_navbar .oe_topbar_avatar {
+  max-height: 18px;
+  width: auto;
+}
+
+#oe_main_menu_navbar.navbar {
+  margin-bottom: 0px;
+}
+
 .openerp {
   padding: 0;
   margin: 0;
@@ -32,7 +51,12 @@
    */
 }
 .openerp.openerp_webclient_container {
-  height: 100%;
+  height: calc(100% - 34px);
+}
+@media (max-width: 768px) {
+  .openerp.openerp_webclient_container {
+    height: calc(100% - 52px);
+  }
 }
 .openerp :-moz-placeholder {
   color: #afafb6 !important;
@@ -461,7 +485,7 @@
   background-image: -webkit-radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
   background-image: -moz-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
   background-image: -ms-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+  background-image: radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
 }
 .openerp .oe_kanban_status_green {
   background: green;
@@ -469,7 +493,7 @@
   background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44aa44 40%, #339933 100%);
   background-image: -moz-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
   background-image: -ms-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
-  background-image: radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
+  background-image: radial-gradient(circle, #55dd55 0%, #44aa44 40%, #339933 100%);
 }
 .openerp .oe_kanban_status_red {
   background: red;
@@ -477,7 +501,7 @@
   background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
   background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
   background-image: -ms-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
-  background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
+  background-image: radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
 }
 .openerp .btn-group.kanban_state {
   padding-top: 8px;
@@ -822,7 +846,7 @@
   background-image: -moz-linear-gradient(top, #fc8787, maroon);
   background-image: -ms-linear-gradient(top, #fc8787, maroon);
   background-image: -o-linear-gradient(top, #fc8787, maroon);
-  background-image: linear-gradient(to bottom, #fc8787, maroon);
+  background-image: linear-gradient(to bottom, #fc8787, #800000);
 }
 .openerp .navbar .oe_topbar_anonymous_login a {
   display: block;
@@ -925,49 +949,8 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.openerp .navbar-nav {
-  float: left;
-  padding: 0;
-  margin: 0;
-  font-size: 13px;
-}
-.openerp .navbar-nav > li {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  float: left;
-  display: block;
-  color: #eeeeee;
-}
-.openerp .navbar-nav > li > a {
-  display: block;
-  padding: 5px 10px 26px !important;
-  line-height: 20px;
-  height: 20px;
-  text-decoration: none;
-  color: #eeeeee !important;
-  vertical-align: top;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-transition: all 0.2s ease-out;
-  -moz-transition: all 0.2s ease-out;
-  -ms-transition: all 0.2s ease-out;
-  -o-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-.openerp .navbar-nav > li > a:hover {
-  background: rgba(0, 0, 0, 0.2);
-  text-shadow: black 0px 0px 3px;
-  color: white;
-  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
-}
-.openerp .navbar-nav > li > .active {
-  background: rgba(0, 0, 0, 0.3);
-  text-shadow: black 0px 0px 3px;
-  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+.openerp .nav li a {
+  padding: 6px 8px 4px 8px;
 }
 .openerp .oe_user_menu {
   float: right;
@@ -981,13 +964,6 @@
 .openerp .oe_user_menu .oe_dropdown_menu {
   right: -1px;
 }
-.openerp .oe_systray > div {
-  float: left;
-  padding: 0 4px 0 4px;
-}
-.openerp .oe_systray {
-  float: right;
-}
 .openerp .oe_leftbar {
   display: none;
   width: 220px;
@@ -3018,34 +2994,6 @@
   font-size: 95%;
   line-height: 1.2em;
 }
-.openerp .navbar {
-  min-height: 32px;
-  margin-bottom: 0px;
-  border: none;
-  z-index: 1;
-  position: static;
-  background-color: #414141;
-  background-color: #454343;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
-  background-image: -webkit-linear-gradient(top, #646060, #262626);
-  background-image: -moz-linear-gradient(top, #646060, #262626);
-  background-image: -ms-linear-gradient(top, #646060, #262626);
-  background-image: -o-linear-gradient(top, #646060, #262626);
-  background-image: linear-gradient(to bottom, #646060, #262626);
-}
-.openerp .navbar-default .navbar-nav li a:hover, .openerp .navbar-default .navbar-nav li a:focus {
-  background: rgba(0, 0, 0, 0.3);
-}
-.openerp .navbar-default .navbar-nav .open > a, .openerp .navbar-default .navbar-nav a:hover, .openerp .navbar-default .navbar-nav a:focus {
-  background: rgba(0, 0, 0, 0.3) !important;
-}
-.openerp .navbar-default .navbar-nav .dropdown > a .caret {
-  border-top-color: #777777 !important;
-  border-bottom-color: #777777 !important;
-}
-.openerp .navbar-nav li a {
-  padding: 4px 32px 4px 12px;
-}
 .openerp .oe_navbar .dropdown-menu {
   font-size: 13px;
   padding: 4px 0;
@@ -3075,11 +3023,11 @@
 .openerp .oe_view_manager_new .oe_form_nosheet .oe_form_label {
   font-weight: normal;
 }
-.openerp .nav li > a {
-  padding: 3px 4px 2px 18px;
+.openerp .nav-pills li > a {
+  padding: 6px 4px 2px 18px;
   color: #4c4c4c;
 }
-.openerp .nav nav-pills.nav-stacked > li > ul {
+.openerp .nav-pills .nav-stacked > li > ul {
   padding-left: 16px;
 }
 .openerp .nav-pills > li.active > a, .openerp a.list-group-item.active > a {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index e3a84a8f78c..9817daab5c7 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -55,7 +55,7 @@ $sheet-padding: 16px
     background-image: -webkit-radial-gradient(circle, $gradient)
     background-image: -moz-radial-gradient($gradient)
     background-image: -ms-radial-gradient($gradient)
-    background-image: radial-gradient($gradient)
+    background-image: radial-gradient(circle, $gradient)
 
 @mixin radius($radius: 5px)
     -moz-border-radius: $radius
@@ -143,6 +143,21 @@ $sheet-padding: 16px
 
 // }}}
 
+#oe_main_menu_navbar
+    min-height: 34px
+    z-index: 1001
+    border-radius: 0
+    li a, li button
+        padding: 4px 8px 4px 8px
+        margin-top: 2px
+        font-size: 13px
+    .oe_topbar_avatar
+        max-height: 18px
+        width: auto
+        
+#oe_main_menu_navbar.navbar
+    margin-bottom: 0px
+
 .openerp
     // Global style {{{
     padding: 0
@@ -152,7 +167,10 @@ $sheet-padding: 16px
     font-size: 13px
     background: white
     &.openerp_webclient_container
-        height: 100%
+        height: calc(100% - 34px)
+    @media (max-width: 768px)
+        &.openerp_webclient_container
+            height: calc(100% - 52px)
     // }}}
     //Placeholder style{{{
     \:-moz-placeholder
@@ -713,7 +731,6 @@ $sheet-padding: 16px
             display: none
     // }}}
     // Top Menu {{{
-
     .navbar
         .oe_topbar_anonymous_login
             background-color: #dc5f59
@@ -788,37 +805,8 @@ $sheet-padding: 16px
     // So why aren't the buttons oe_topbar_items ? This sad state of affairs
     // is a leftover from an uncomplete refactoring when the left and top menu
     // were merged. You are welcome to refactor and clean this up
-    .navbar-nav
-        float: left
-        padding: 0
-        margin: 0
-        font-size: 13px
-        > li
-            list-style-type: none
-            padding: 0
-            margin: 0
-            float: left
-            display: block
-            color: #eeeeee
-            > a
-                display: block
-                padding: 5px 10px 26px !important
-                line-height: 20px
-                height: 20px
-                text-decoration: none
-                color: #eee !important
-                vertical-align: top
-                text-shadow: 0 1px 1px rgba(0,0,0,0.2)
-                @include transition(all 0.2s ease-out)
-                &:hover
-                    background: rgba(0,0,0,0.2)
-                    text-shadow: black 0px 0px 3px
-                    color: white
-                    @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
-            > .active
-                background: rgba(0,0,0,0.30)
-                text-shadow: black 0px 0px 3px
-                @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
+    .nav li a
+        padding: 6px 8px 4px 8px
 
     .oe_user_menu
         float: right
@@ -830,12 +818,6 @@ $sheet-padding: 16px
         .oe_dropdown_menu
             right: -1px
 
-    .oe_systray > div
-        float: left
-        padding: 0 4px 0 4px
-    .oe_systray
-        float: right
-
     // }}}
     // Webclient.leftbar {{{
     .oe_leftbar
@@ -2429,28 +2411,6 @@ $sheet-padding: 16px
         line-height: 1.2em
     // }}}
     // Bootstrap HACKS {{{
-    .navbar
-        min-height: 32px
-        margin-bottom: 0px
-        border: none
-        z-index: 1
-        position: static
-        background-color: #414141
-        @include vertical-gradient(#646060, #262626)
-    .navbar-default
-        .navbar-nav
-            li
-                a:hover,a:focus
-                    background: rgba(0, 0, 0, 0.3)
-            .open > a,a:hover,a:focus
-                background: rgba(0, 0, 0, 0.3) !important
-            .dropdown > a .caret
-                border-top-color: #777 !important
-                border-bottom-color: #777 !important
-    .navbar-nav
-        li
-            a
-                padding: 4px 32px 4px 12px
     .oe_navbar .dropdown-menu
         font-size: 13px
         padding: 4px 0
@@ -2473,11 +2433,11 @@ $sheet-padding: 16px
             font-weight: normal
 
     // Customize bootstrap3 for leftbar
-    .nav
+    .nav-pills
         li > a
-            padding: 3px 4px 2px 18px
+            padding: 6px 4px 2px 18px
             color: #4c4c4c
-        nav-pills.nav-stacked > li > ul
+        .nav-stacked > li > ul
             padding-left: 16px
     .nav-pills > li.active,a.list-group-item.active
         > a
diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js
index c8cc7ce8a4b..e53c8f0da6c 100644
--- a/addons/web/static/src/js/chrome.js
+++ b/addons/web/static/src/js/chrome.js
@@ -734,51 +734,52 @@ instance.web.ChangePassword =  instance.web.Widget.extend({
 instance.web.client_actions.add("change_password", "instance.web.ChangePassword");
 
 instance.web.Menu =  instance.web.Widget.extend({
-    template: 'Menu',
     init: function() {
         var self = this;
         this._super.apply(this, arguments);
-        this.has_been_loaded = $.Deferred();
+        this.is_bound = $.Deferred();
         this.maximum_visible_links = 'auto'; // # of menu to show. 0 = do not crop, 'auto' = algo
         this.data = {data:{children:[]}};
-        this.on("menu_loaded", this, function (menu_data) {
-            self.reflow();
+        this.on("menu_bound", this, function() {
             // launch the fetch of needaction counters, asynchronous
-            if (!_.isEmpty(menu_data.all_menu_ids)) {
-                this.do_load_needaction(menu_data.all_menu_ids);
+            var $all_menus = self.$el.parents('body').find('.oe_webclient').find('[data-menu]');
+            var all_menu_ids = _.map($all_menus, function (menu) {return parseInt($(menu).attr('data-menu'), 10);});
+            if (!_.isEmpty(all_menu_ids)) {
+                this.do_load_needaction(all_menu_ids);
             }
         });
-        var lazyreflow = _.debounce(this.reflow.bind(this), 200);
-        instance.web.bus.on('resize', this, function() {
-            self.$el.height(0);
-            lazyreflow();
-        });
     },
     start: function() {
         this._super.apply(this, arguments);
-        this.$secondary_menus = this.getParent().$el.find('.oe_secondary_menus_container');
-        this.$secondary_menus.on('click', 'a[data-menu]', this.on_menu_click);
-        return this.do_reload();
+        return this.bind_menu();
     },
     do_reload: function() {
         var self = this;
-        return this.rpc("/web/menu/load", {}).done(function(r) {
-            self.menu_loaded(r);
-        });
+        self.bind_menu();
     },
-    menu_loaded: function(data) {
+    bind_menu: function() {
         var self = this;
-        this.data = {data: data};
-        this.renderElement();
-        this.$secondary_menus.html(QWeb.render("Menu.secondary", { widget : this }));
+        this.$secondary_menus = this.$el.parents().find('.oe_secondary_menus_container')
+        this.$secondary_menus.on('click', 'a[data-menu]', this.on_menu_click);
         this.$el.on('click', 'a[data-menu]', this.on_top_menu_click);
         // Hide second level submenus
         this.$secondary_menus.find('.oe_menu_toggler').siblings('.oe_secondary_submenu').hide();
         if (self.current_menu) {
             self.open_menu(self.current_menu);
         }
-        this.trigger('menu_loaded', data);
-        this.has_been_loaded.resolve();
+        this.trigger('menu_bound');
+
+        var lazyreflow = _.debounce(this.reflow.bind(this), 200);
+        instance.web.bus.on('resize', this, function() {
+            if (parseInt(self.$el.parent().css('width')) <= 768 ) {
+                lazyreflow('all_outside');
+            } else {
+                lazyreflow();
+            }
+        });
+        instance.web.bus.trigger('resize');
+
+        this.is_bound.resolve();
     },
     do_load_needaction: function (menu_ids) {
         var self = this;
@@ -803,30 +804,48 @@ instance.web.Menu =  instance.web.Widget.extend({
     },
     /**
      * Reflow the menu items and dock overflowing items into a "More" menu item.
-     * Automatically called when 'menu_loaded' event is triggered and on window resizing.
+     * Automatically called when 'menu_bound' event is triggered and on window resizing.
+     *
+     * @param {string} behavior If set to 'all_outside', all the items are displayed. If set to
+     * 'all_inside', all the items are hidden under the more item. If not set, only the 
+     * overflowing items are hidden.
      */
-    reflow: function() {
+    reflow: function(behavior) {
         var self = this;
-        this.$el.height('auto').show();
         var $more_container = this.$('#menu_more_container').hide();
         var $more = this.$('#menu_more');
-        $more.children('li').insertBefore($more_container);
-        var $toplevel_items = this.$el.children('li').not($more_container).hide();
+        var $systray = this.$el.parents().find('.oe_systray');
+
+        $more.children('li').insertBefore($more_container);  // Pull all the items out of the more menu
+        
+        // 'all_outside' beahavior should display all the items, so hide the more menu and exit
+        if (behavior === 'all_outside') {
+            this.$el.find('li').show();
+            $more_container.hide();
+            return;
+        }
+
+        var $toplevel_items = this.$el.find('li').not($more_container).not($systray.find('li')).hide();
         $toplevel_items.each(function() {
+            // In all inside mode, we do not compute to know if we must hide the items, we hide them all
+            if (behavior === 'all_inside') {
+                return false;
+            }
             var remaining_space = self.$el.parent().width() - $more_container.outerWidth();
             self.$el.parent().children(':visible').each(function() {
                 remaining_space -= $(this).outerWidth();
             });
+
             if ($(this).width() > remaining_space) {
                 return false;
             }
             $(this).show();
         });
         $more.append($toplevel_items.filter(':hidden').show());
-        $more_container.toggle(!!$more.children().length);
+        $more_container.toggle(!!$more.children().length || behavior === 'all_inside');
         // Hide toplevel item if there is only one
         var $toplevel = this.$el.children("li:visible");
-        if ($toplevel.length === 1) {
+        if ($toplevel.length === 1 && behavior != 'all_inside') {
             $toplevel.hide();
         }
     },
@@ -853,7 +872,7 @@ instance.web.Menu =  instance.web.Widget.extend({
 
         // Activate current main menu
         this.$el.find('.active').removeClass('active');
-        $main_menu.addClass('active');
+        $main_menu.parent().addClass('active');
 
         // Show current sub menu
         this.$secondary_menus.find('.oe_secondary_menu').hide();
@@ -939,22 +958,19 @@ instance.web.Menu =  instance.web.Widget.extend({
      * @param {Event} ev the jquery event
      */
     on_top_menu_click: function(ev) {
+        ev.preventDefault();
         var self = this;
         var id = $(ev.currentTarget).data('menu');
-        var menu_ids = [id];
-        var menu = _.filter(this.data.data.children, function (menu) {return menu.id == id;})[0];
-        function add_menu_ids (menu) {
-            if (menu.children) {
-                _.each(menu.children, function (menu) {
-                    menu_ids.push(menu.id);
-                    add_menu_ids(menu);
-                });
-            }
-        }
-        add_menu_ids(menu);
+
+        // Fetch the menu leaves ids in order to check if they need a 'needaction'
+        var $secondary_menu = this.$el.parents().find('.oe_secondary_menu[data-menu-parent=' + id + ']');
+        var $menu_leaves = $secondary_menu.children().find('.oe_menu_leaf');
+        var menu_ids = _.map($menu_leaves, function (leave) {return parseInt($(leave).attr('data-menu'), 10);});
+
         self.do_load_needaction(menu_ids).then(function () {
             self.trigger("need_action_reloaded");
         });
+
         this.on_menu_click(ev);
     },
     on_menu_click: function(ev) {
@@ -980,6 +996,7 @@ instance.web.UserMenu =  instance.web.Widget.extend({
                 f($(this));
             }
         });
+        this.$el.parent().show()
     },
     do_update: function () {
         var self = this;
@@ -1001,6 +1018,8 @@ instance.web.UserMenu =  instance.web.Widget.extend({
                 }
                 var avatar_src = self.session.url('/web/binary/image', {model:'res.users', field: 'image_small', id: self.session.uid});
                 $avatar.attr('src', avatar_src);
+
+                openerp.web.bus.trigger('resize');  // Re-trigger the reflow logic
             });
         };
         this.update_promise = this.update_promise.then(fct, fct);
@@ -1086,15 +1105,13 @@ instance.web.Client = instance.web.Widget.extend({
     start: function() {
         var self = this;
         return instance.session.session_bind(this.origin).then(function() {
-            var $e = $(QWeb.render(self._template, {widget: self}));
-            self.replaceElement($e);
-            $e.openerpClass();
             self.bind_events();
             return self.show_common();
         });
     },
     bind_events: function() {
         var self = this;
+        $('.oe_systray').show();
         this.$el.on('mouseenter', '.oe_systray > div:not([data-toggle=tooltip])', function() {
             $(this).attr('data-toggle', 'tooltip').tooltip().trigger('mouseenter');
         });
@@ -1146,10 +1163,6 @@ instance.web.Client = instance.web.Widget.extend({
 });
 
 instance.web.WebClient = instance.web.Client.extend({
-    _template: 'WebClient',
-    events: {
-        'click .oe_logo_edit_admin': 'logo_edit'
-    },
     init: function(parent, client_options) {
         this._super(parent);
         if (client_options) {
@@ -1164,6 +1177,7 @@ instance.web.WebClient = instance.web.Client.extend({
         var self = this;
         this.on("change:title_part", this, this._title_changed);
         this._title_changed();
+
         return $.when(this._super()).then(function() {
             if (jQuery.deparam !== undefined && jQuery.deparam(jQuery.param.querystring()).kitten !== undefined) {
                 self.to_kitten();
@@ -1227,12 +1241,19 @@ instance.web.WebClient = instance.web.Client.extend({
     show_application: function() {
         var self = this;
         self.toggle_bars(true);
+
         self.update_logo();
+        this.$('.oe_logo_edit_admin').click(function(ev) {
+            self.logo_edit(ev);
+        });
+
+        // Menu is rendered server-side thus we don't want the widget to create any dom
         self.menu = new instance.web.Menu(self);
-        self.menu.replace(this.$el.find('.oe_menu_placeholder'));
+        self.menu.setElement(this.$el.parents().find('.oe_application_menu_placeholder'));
+        self.menu.start();
         self.menu.on('menu_click', this, this.on_menu_action);
         self.user_menu = new instance.web.UserMenu(self);
-        self.user_menu.replace(this.$el.find('.oe_user_menu_placeholder'));
+        self.user_menu.appendTo(this.$el.parents().find('.oe_user_menu_placeholder'));
         self.user_menu.on('user_logout', self, self.on_logout);
         self.user_menu.do_update();
         self.bind_hashchange();
@@ -1250,6 +1271,7 @@ instance.web.WebClient = instance.web.Client.extend({
     },
     logo_edit: function(ev) {
         var self = this;
+        ev.preventDefault();
         self.alive(new instance.web.Model("res.users").get_func("read")(this.session.uid, ["company_id"])).then(function(res) {
             self.rpc("/web/action/load", { action_id: "base.action_res_company_form" }).done(function(result) {
                 result.res_id = res['company_id'][0];
@@ -1294,7 +1316,7 @@ instance.web.WebClient = instance.web.Client.extend({
                         return false;
                     });
                 });
-                $icon.appendTo(self.$('.oe_systray'));
+                $icon.prependTo(window.$('.oe_systray'));
             }
         });
     },
@@ -1309,7 +1331,6 @@ instance.web.WebClient = instance.web.Client.extend({
         return this.session.session_reload().then(function () {
             instance.session.load_modules(true).then(
                 self.menu.proxy('do_reload')); });
-
     },
     do_notify: function() {
         var n = this.notification;
@@ -1331,15 +1352,16 @@ instance.web.WebClient = instance.web.Client.extend({
 
         var state = $.bbq.getState(true);
         if (_.isEmpty(state) || state.action == "login") {
-            self.menu.has_been_loaded.done(function() {
+            self.menu.is_bound.done(function() {
                 new instance.web.Model("res.users").call("read", [self.session.uid, ["action_id"]]).done(function(data) {
                     if(data.action_id) {
                         self.action_manager.do_action(data.action_id[0]);
                         self.menu.open_action(data.action_id[0]);
                     } else {
                         var first_menu_id = self.menu.$el.find("a:first").data("menu");
-                        if(first_menu_id)
+                        if(first_menu_id) {
                             self.menu.menu_click(first_menu_id);
+                        }
                     }
                 });
             });
@@ -1353,10 +1375,9 @@ instance.web.WebClient = instance.web.Client.extend({
         if (!_.isEqual(this._current_state, stringstate)) {
             var state = event.getState(true);
             if(!state.action && state.menu_id) {
-                self.menu.has_been_loaded.done(function() {
-                    self.menu.do_reload().done(function() {
-                        self.menu.menu_click(state.menu_id);
-                    });
+                self.menu.is_bound.done(function() {
+                    self.menu.do_reload();
+                    self.menu.menu_click(state.menu_id);
                 });
             } else {
                 state._push_me = false;  // no need to push state back...
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index 19597add308..a9a444d0004 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -271,7 +271,7 @@ instance.web.ActionManager = instance.web.Widget.extend({
                     }
                     action_loaded = this.do_action(state.action, { additional_context: add_context });
                     $.when(action_loaded || null).done(function() {
-                        instance.webclient.menu.has_been_loaded.done(function() {
+                        instance.webclient.menu.is_bound.done(function() {
                             if (self.inner_action && self.inner_action.id) {
                                 instance.webclient.menu.open_action(self.inner_action.id);
                             }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 1caef25a907..adae3be7c63 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -294,9 +294,9 @@
     </div>
 </t>
 <t t-name="DatabaseManager.user_menu">
-    <span class="oe_right">
-         <a id="back-to-login" href="#"><span class="oe_topbar_item oe_topbar_name">Back to Login</span></a>
-    </span>
+    <li>
+         <a id="back-to-login" href="#">Back to Login</a>
+    </li>
 </t>
 <t t-name="DatabaseManager.menu">
     <div class="oe_secondary_menu_section">Database Management</div>
@@ -341,52 +341,6 @@
     </form>
 </t>
 
-<t t-name="Menu">
-    <ul class="nav navbar-nav navbar-left" t-if="widget.data">
-        <li t-foreach="widget.data.data.children" t-as="menu">
-            <t t-call="Menu.link"/>
-        </li>
-        <li id="menu_more_container" class="dropdown" style="display: none;">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
-            <ul id="menu_more" class="dropdown-menu"></ul>
-        </li>
-    </ul>
-</t>
-<t t-name="Menu.secondary">
-    <div t-foreach="widget.data.data.children" t-as="menu" style="display: none" class="oe_secondary_menu" t-att-data-menu-parent="menu.id">
-        <t t-foreach="menu.children" t-as="menu">
-            <div class="oe_secondary_menu_section">
-                <t t-esc="menu.name"/>
-                <!--
-                    Shall the section be still clickable ?
-                    <t t-call="Menu.link"/>
-                -->
-            </div>
-            <t t-call="Menu.secondary.submenu"/>
-        </t>
-    </div>
-</t>
-<t t-name="Menu.secondary.submenu">
-    <ul t-if="menu.children.length" class="oe_secondary_submenu nav nav-pills nav-stacked">
-        <li t-foreach="menu.children" t-as="menu">
-            <t t-call="Menu.link"/>
-            <!--<span class="oe_menu_label">8</span>-->
-            <t t-call="Menu.secondary.submenu"/>
-        </li>
-    </ul>
-</t>
-<t t-name="Menu.link">
-    <a t-attf-href="#menu_id=#{menu.id}&amp;action=#{menu.action ? menu.action.split(',')[1] : ''}"
-        t-att-class="menu.children.length ? 'oe_menu_toggler' : 'oe_menu_leaf'"
-        t-att-data-menu="menu.id"
-        t-att-data-action-model="menu.action ? menu.action.split(',')[0] : ''"
-        t-att-data-action-id="menu.action ? menu.action.split(',')[1] : ''">
-        <span class="oe_menu_text">
-            <t t-esc="menu.name"/>
-        </span>
-    </a>
-</t>
-
 <t t-name="Menu.needaction_counter">
     <div id="menu_counter" class="badge pull-right">
         <t t-if="widget.needaction_counter &gt; 99"> 99+ </t>
@@ -395,7 +349,6 @@
 </t>
 
 <t t-name="UserMenu">
-    <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <img class="oe_topbar_avatar" t-att-data-default-src="_s + '/web/static/src/img/user_menu_avatar.png'"/>
@@ -409,7 +362,6 @@
                 <li><a href="#" data-menu="logout">Log out</a></li>
             </ul>
         </li>
-    </ul>
 </t>
 <t t-name="UserMenu.about">
 
@@ -428,40 +380,6 @@
 
 </t>
 
-<t t-name="WebClient">
-    <div class="openerp openerp_webclient_container">
-    <table class="oe_webclient">
-        <tr>
-            <td colspan="2" class="navbar navbar-default navbar-static-top oe_navbar" role="navigation">
-                <div class="oe_menu_placeholder"/>
-                <div class="oe_user_menu_placeholder"/>
-                <div class="oe_systray"/>
-            </td>
-        </tr>
-        <tr>
-            <td class="oe_leftbar" valign="top">
-                <div>
-                    <t t-set="debug" t-value="__debug__ ? '&amp;debug' : ''"/>
-                    <a class="oe_logo" t-attf-href="/web?#{debug}">
-                        <span class="oe_logo_edit">Edit Company data</span>
-                        <img t-att-src='widget.session.url("/web/binary/company_logo")'/>
-                    </a>
-                    <div>
-                        <div>
-                            <div class="oe_secondary_menus_container"/>
-                        </div>
-                    </div>
-                    <div class="oe_footer">
-                        Powered by <a href="http://www.odoo.com" target="_blank"><span>Odoo</span></a>
-                    </div>
-                </div>
-            </td>
-            <td class="oe_application">
-            </td>
-        </tr>
-    </table>
-    </div>
-</t>
 <t t-name="WebClient.timezone_notification">
     <div class="oe_webclient_timezone_notification">
         <p>Your user's preference timezone does not match your browser timezone:</p>
@@ -477,9 +395,9 @@
     </div>
 </t>
 <t t-name="WebClient.timezone_systray">
-    <div class="oe_topbar_item oe_timezone_systray" title="Timezone mismatch">
-        <span class="ui-icon ui-state-error ui-icon-alert"/>
-    </div>
+    <li class="oe_topbar_item oe_timezone_systray" title="Timezone mismatch">
+        <a href="#"><i class="fa fa-exclamation-triangle" style="color:red;"></i></a>
+    </li>
 </t>
 
 <t t-name="EmbedClient">