[IMP] web: use a classname to show/hide widgets

The problem of $el.show()/hide() is that calling show() on a jQuery element on which
there is no display rule in the stylesheet automatically sets 'display: block'.

However, when a jQuery element is not yet in the DOM, the rules defined on it are not yet
applied, meaning that calling show() will set its display to block (in inline style),
even if there is different a css rule (e.g. 'dislay: flex'). As the inline style takes the
priority over the stylesheet, the correct display won't be applied, even when the widget
will be appended in the DOM, resulting in a possibly broken layout.

addons/web/static/src/css/base.css

@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -73,6 +73,10 @@
   vertical-align: middle;
 }
 
+.o_hidden {
+  display: none !important;
+}
+
 .openerp {
   padding: 0;
   margin: 0;
@@ -1282,13 +1286,6 @@
 .openerp .oe-search-options .filters-menu .divider {
   display: list-item;
 }
-.openerp .oe-search-options .closed-menu a:before {
-  font-family: FontAwesome;
-  position: absolute;
-  left: 12px;
-  top: 3px;
-  content: "";
-}
 .openerp .oe-search-options .oe-select-group {
   margin: 3px 25px;
 }

addons/web/static/src/css/base.sass

@@ -182,6 +182,9 @@ $sheet-padding: 16px
         vertical-align: middle
 // }}}
 
+.o_hidden
+    display: none!important
+
 .openerp
     // Global style {{{
     padding: 0

addons/web/static/src/js/action_manager.js

@@ -252,7 +252,7 @@ var ActionManager = Widget.extend({
             // Hide the old_widget as it will be removed from the DOM when it
             // is destroyed
             if (old_widget) {
-                old_widget.$el.hide();
+                old_widget.do_hide();
             }
             if (options.clear_breadcrumbs) {
                 self.clear_action_stack(to_destroy);

addons/web/static/src/js/framework/widget.js

@@ -347,10 +347,10 @@ var Widget = core.Class.extend(mixins.PropertiesMixin, {
         return this.$el.find(selector);
     },
     do_show: function () {
-        this.$el.show();
+        this.$el.removeClass('o_hidden');
     },
     do_hide: function () {
-        this.$el.hide();
+        this.$el.addClass('o_hidden');
     },
     /**
      * Proxies a method of the object, in order to keep the right ``this`` on

addons/web/static/src/js/views/form_common.js

@@ -918,11 +918,11 @@ var FormViewDialog = ViewDialog.extend({
             self.view_form.set_embedded_view(self.options.alternative_form_view);
         }
 
-        self.$el.hide();
+        self.do_hide();
         self.view_form.appendTo(self.$el);
         self.view_form.on("form_view_loaded", self, function() {
             self.view_form.do_show().then(function() {
-                self.$el.show();
+                self.do_show();
             });
         });
 

addons/web/static/src/js/views/form_view.js

@@ -316,7 +316,8 @@ var FormView = View.extend(common.FieldManagerMixin, {
     do_show: function (options) {
         var self = this;
         options = options || {};
-        this.$el.show().css({
+        this._super();
+        this.$el.css({
             opacity: '0',
             filter: 'alpha(opacity = 0)'
         });

addons/web/static/src/js/views/graph_view.js

@@ -74,7 +74,6 @@ var GraphView = View.extend({
     },
     do_show: function () {
         this.do_push_state({});
-        this.$el.show();
         return this._super();
     },
     prepare_fields: function (fields) {
@@ -101,7 +100,6 @@ var GraphView = View.extend({
                 fields: this.fields,
             });
             // append widget
-            this.$el.hide();
             this.widget.appendTo(this.$el);
         } else {
             var groupbys = group_by.length ? group_by : this.initial_groupbys.slice(0);

addons/web/static/src/js/views/pivot_view.js

@@ -209,7 +209,6 @@ var PivotView = View.extend({
         this.do_push_state({});
         this.data_loaded.done(function () {
             self.display_table(); 
-            self.$el.show();
         });
         return this._super();
     },

addons/web/static/src/js/views/search_view.js

@@ -393,7 +393,7 @@ var SearchView = Widget.extend(/** @lends instance.web.SearchView# */{
     },    
     start: function() {
         if (this.headless) {
-            this.$el.hide();
+            this.do_hide();
         }
         this.toggle_visibility(false);
         this.$facets_container = this.$('div.oe_searchview_facets');

addons/web/static/src/js/views/tree_view.js

@@ -260,13 +260,7 @@ var TreeView = View.extend(/** @lends instance.web.TreeView# */{
         }, this);
     },
 
-    do_show: function () {
-        this.$el.show();
-        this._super();
-    },
-
     do_hide: function () {
-        this.$el.hide();
         this.hidden = true;
         this._super();
     }

addons/web/static/src/js/widgets/pager.js

@@ -182,9 +182,9 @@ var Pager = Widget.extend({
         var single_page = 1 === current_min && current_max === size;
 
         if (size === 0 || (single_page && this.options.single_page_hidden)) {
-            this.$el.hide();
+            this.do_hide();
         } else {
-            this.$el.show();
+            this.do_show();
 
             if (single_page) {
                 this.disable();