[FIX] website, *: auto-fold menu review

* portal

Review https://github.com/odoo/odoo/commit/392c91cda3133b921e9aca9a7b1c511231027438

- Some elements should not be folded in the "+" dropdown, like the login
  button and related stuff
- Using pull-right instead of navbar-right (https://github.com/odoo/odoo/blob/392c91cda3133b921e9aca9a7b1c511231027438/addons/portal/views/portal_templates.xml#L37)
  broke the mobile version of the menu
- Folded menu <li/> seemed too small (but it was only an illusion)
- On Chrome, the menu was sometimes not folded when it should have been.
  This was because of rounded width calculations.

For the first point, the code has been made so that everything that
follows a divider is considered unfoldable.

addons/portal/static/src/less/portal.less

@@ -49,6 +49,11 @@ header {
             visibility: hidden;
         }
     }
+    .nav.navbar-nav.pull-right {
+        @media (max-width: @screen-xs-max) {
+            float: none!important;
+        }
+    }
 }
 ul.nav-stacked > li > a {
     padding: 2px 15px;

addons/website/static/src/js/content/menu.js

@@ -87,8 +87,9 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
      * @override
      */
     start: function () {
-        this.$topMenu = this.$('#top_menu');
-        this.$items = this.$topMenu.children();
+        var $allItems = this.$('#top_menu').children();
+        this.$unfoldableItems = $allItems.filter('.divider, .divider ~ li');
+        this.$items = $allItems.not(this.$unfoldableItems);
 
         $(window).on('resize', _.debounce(this._adapt.bind(this), 500));
         this._adapt();
@@ -117,13 +118,14 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
         }
 
         this.maxWidth = this.$el.width();
-        this.maxWidth -= _.reduce(this.$el.children().not('.navbar-collapse'), function (sum, el) {
-            return sum + $(el).outerWidth(true);
+        var $unfoldable = this.$unfoldableItems.add(this.$el.children().not('.navbar-collapse'));
+        this.maxWidth -= _.reduce($unfoldable, function (sum, el) {
+            return sum + computeFloatOuterWidthWithMargins(el);
         }, 0);
 
         var nbItems = this.$items.length;
         var menuItemsWidth = _.reduce(this.$items, function (sum, el) {
-            return sum + $(el).outerWidth(true);
+            return sum + computeFloatOuterWidthWithMargins(el);
         }, 0);
 
         if (menuItemsWidth > this.maxWidth) {
@@ -131,24 +133,30 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
             this.$extraItemsToggle.append($('<a/>', {href: '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown'})
                 .append($('<i/>', {class: 'fa fa-plus'})));
             this.$extraItemsToggle.append($('<ul/>', {class: 'dropdown-menu'}));
-            this.$extraItemsToggle.appendTo(this.$topMenu);
+            this.$extraItemsToggle.insertAfter(this.$items.last());
 
-            menuItemsWidth += this.$extraItemsToggle.outerWidth(true);
+            menuItemsWidth += computeFloatOuterWidthWithMargins(this.$extraItemsToggle[0]);
             do {
-                menuItemsWidth -= this.$items.eq(--nbItems).outerWidth(true);
+                menuItemsWidth -= computeFloatOuterWidthWithMargins(this.$items.eq(--nbItems)[0]);
             } while (menuItemsWidth > this.maxWidth);
 
             var $extraItems = this.$items.slice(nbItems).detach();
             this.$extraItemsToggle.children('ul').append($extraItems);
             this.$extraItemsToggle.toggleClass('active', $extraItems.hasClass('active'));
         }
+
+        function computeFloatOuterWidthWithMargins(el) {
+            var rect = el.getBoundingClientRect();
+            var style = window.getComputedStyle(el);
+            return rect.right - rect.left + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        }
     },
     /**
      * @private
      */
     _restore: function () {
         if (this.$extraItemsToggle) {
-            this.$extraItemsToggle.find("> ul > *").appendTo(this.$topMenu);
+            this.$extraItemsToggle.find("> ul > *").insertBefore(this.$extraItemsToggle);
             this.$extraItemsToggle.remove();
             delete this.$extraItemsToggle;
         }

addons/website/static/src/less/website.less

@@ -519,12 +519,7 @@ div.carousel {
 }
 
 .navbar .o_extra_menu_items.open > ul {
-    padding: 0;
-
     > li {
-        &.divider {
-            display: none;
-        }
         + li {
             border-top: 1px solid @gray-lighter;
         }

addons/website_sale/views/templates.xml

@@ -36,6 +36,7 @@
     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
+            <li class="divider hidden"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
             <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'hidden'">
                 <a href="/shop/cart">
                     <i class="fa fa-shopping-cart"></i>