[IMP] change webclient structure: remove table

This is a small change if measured in lines of code, but is a large
change: it removes the table structure from the web client and use divs
instead.  It will likely break a lot of things (some css selectors
will not work), but it should simplify our lives in the future:
closer to being responsive, easier layout computations for the browsers
(and hopefully less discrepencies between the results), simpler html, ...

5 files changed, 74 insertions, 179 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index e0fe28a58f9..7f7b04e53f1 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -83,7 +83,7 @@
 }
 .openerp.openerp_webclient_container {
   height: calc(100% - 34px);
-  overflow: auto;
+  display: flex;
 }
 @media (max-width: 768px) {
   .openerp.openerp_webclient_container {
@@ -798,27 +798,23 @@
   display: none;
 }
 .openerp .oe_leftbar {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-shrink: 0;
   width: 220px;
   background: #f0eeee;
   border-right: 1px solid #afafb6;
-  text-shadow: none;
-}
-.openerp .oe_leftbar > div {
-  height: 100%;
-  display: table;
-  width: 220px;
   position: relative;
 }
-.openerp .oe_leftbar > div a.oe_logo {
-  display: table-row;
+.openerp .oe_leftbar a.oe_logo {
   text-align: center;
 }
-.openerp .oe_leftbar > div a.oe_logo img {
+.openerp .oe_leftbar a.oe_logo img {
   margin: 14px 0;
   border: 0;
 }
-.openerp .oe_leftbar > div a.oe_logo .oe_logo_edit {
+.openerp .oe_leftbar a.oe_logo .oe_logo_edit {
   margin: 14px 0;
   position: absolute;
   top: 1px;
@@ -833,36 +829,22 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
-.openerp .oe_leftbar > div a.oe_logo:hover .oe_logo_edit_admin {
+.openerp .oe_leftbar a.oe_logo:hover .oe_logo_edit_admin {
   display: block;
 }
-.openerp .oe_leftbar > div > div {
-  display: table-row;
-  height: 100%;
-}
-.openerp .oe_leftbar > div > div > div {
-  position: relative;
-  height: 100%;
-}
-.openerp .oe_leftbar > div > div > div > div.oe_secondary_menus_container {
-  position: absolute;
-  position: static\9;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-x: hidden;
+.openerp .oe_leftbar .oe_secondary_menus_container {
+  flex-grow: 1;
   overflow-y: auto;
 }
-.openerp .oe_leftbar > div .oe_footer {
+.openerp .oe_leftbar .oe_footer {
   background: #f0eeee;
   text-align: center;
 }
-.openerp .oe_leftbar > div .oe_footer a {
+.openerp .oe_leftbar .oe_footer a {
   font-weight: bold;
   color: black;
 }
-.openerp .oe_leftbar > div .oe_footer a span {
+.openerp .oe_leftbar .oe_footer a span {
   color: #a24689;
 }
 .openerp .oe_secondary_menu_section {
@@ -987,51 +969,26 @@
   text-decoration: underline;
 }
 .openerp .oe_application {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.openerp .oe_application > div {
-  position: relative;
-  height: 100%;
-}
-.openerp .oe_application .oe-view-manager .oe-view-manager-debug {
-  margin-right: 5px;
-}
-.openerp .oe_application .oe-view-manager .oe-view-manager-content {
-  display: table-row;
   height: 100%;
+  flex-grow: 1;
 }
-.openerp .oe_application .oe-view-manager-body {
-  position: relative;
-  height: 100%;
-}
-.openerp .oe_application .oe-view-manager-body a {
-  color: #7C7BAD;
-}
-.openerp .oe_application .oe-view-manager-body .oe-view-manager-view-kanban:not(:empty) {
+.openerp .oe-view-manager {
+  width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-.openerp .oe_application .oe-view-manager-body > div {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.openerp .oe-view-manager .oe-view-manager-content {
   overflow: auto;
 }
-.openerp .oe_application .oe_form_field_one2many .oe-view-manager-views {
-  position: initial;
-}
-.openerp .oe-view-manager {
-  display: table;
-  width: 100%;
-  height: 100%;
+.openerp .oe-view-manager .oe-view-manager-debug {
+  margin-right: 5px;
 }
 .openerp .oe-view-manager-header {
-  display: table-row;
   background-color: #f0eeee;
   border-bottom: 1px solid #afafb6;
+  flex-shrink: 0;
+  width: 100%;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -1048,9 +1005,6 @@
 .openerp .oe-view-manager-header .oe-right-toolbar > div {
   display: inline-block;
 }
-.openerp .oe-view-manager-header .row {
-  margin: 0;
-}
 .openerp .oe-view-manager-header .row:first-child {
   padding-top: 3px;
   padding-bottom: 3px;
@@ -1153,14 +1107,6 @@
   top: 3px;
   content: "";
 }
-.openerp .oe_application > div > div > .oe-view-manager-body {
-  position: absolute;
-  top: 90px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: auto;
-}
 .openerp .oe_popup_form {
   display: table;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index e5b50b30652..4bb76f74399 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -199,7 +199,7 @@ $sheet-padding: 16px
     background: white
     &.openerp_webclient_container
         height: calc(100% - 34px)
-        overflow: auto
+        display: flex
     @media (max-width: 768px)
         &.openerp_webclient_container
             height: calc(100% - 52px)
@@ -705,58 +705,43 @@ $sheet-padding: 16px
     // }}}
     // Webclient.leftbar {{{
     .oe_leftbar
-        display: none
+        display: flex
+        flex-direction: column
+        justify-content: space-between
+        flex-shrink: 0
         width: 220px
         background: #f0eeee
         border-right: 1px solid $tag-border
-        text-shadow: none
-        > div
-            height: 100%
-            display: table
-            width: 220px
-            position: relative
-            a.oe_logo
-                display: table-row
-                text-align: center
-                img
-                    margin: 14px 0
-                    border: 0
-                .oe_logo_edit
-                    margin: 14px 0
-                    position: absolute
-                    top: 1px
-                    padding: 4px
-                    width: 100%
-                    display: none
-                    text-align: center
-                    color: #eee
-                    background: rgba(37,37,37,0.9)
-                    @include box-sizing(border)
-                &:hover .oe_logo_edit_admin
-                    display: block
-            > div
-                display: table-row
-                height: 100%
-                > div
-                    position: relative
-                    height: 100%
-                    > div.oe_secondary_menus_container
-                        position: absolute
-                        position: static\9
-                        top: 0
-                        bottom: 0
-                        left: 0
-                        right: 0
-                        overflow-x: hidden
-                        overflow-y: auto
-            .oe_footer
-                background: #f0eeee
+        position: relative
+        a.oe_logo
+            text-align: center
+            img
+                margin: 14px 0
+                border: 0
+            .oe_logo_edit
+                margin: 14px 0
+                position: absolute
+                top: 1px
+                padding: 4px
+                width: 100%
+                display: none
                 text-align: center
-                a
-                    font-weight: bold
-                    color: black
-                    span
-                        color: #a24689
+                color: #eee
+                background: rgba(37,37,37,0.9)
+                @include box-sizing(border)
+            &:hover .oe_logo_edit_admin
+                display: block
+        .oe_secondary_menus_container
+            flex-grow: 1
+            overflow-y: auto
+        .oe_footer
+            background: #f0eeee
+            text-align: center
+            a
+                font-weight: bold
+                color: black
+                span
+                    color: #a24689
     // }}}
     // Webclient.leftbar items {{{
 
@@ -859,47 +844,24 @@ $sheet-padding: 16px
     a.oe_form_uri:hover
         text-decoration: underline
     .oe_application
-        width: 100%
         height: 100%
-        overflow: hidden
-        > div
-            position: relative
-            height: 100%
-        .oe-view-manager
-            .oe-view-manager-debug
-                margin-right: 5px
-            .oe-view-manager-content
-                display: table-row
-                height: 100%
-
-        .oe-view-manager-body
-            position: relative
-            height: 100%
-            a
-                color: $link-color
-            .oe-view-manager-view-kanban:not(:empty)
-                height: 100%
-            > div
-                position: absolute
-                top: 0
-                bottom: 0
-                left: 0
-                right: 0
-                overflow: auto
-        .oe_form_field_one2many
-            .oe-view-manager-views
-                position: initial
-
+        flex-grow: 1
     // }}}
     // ViewManager common {{{
     .oe-view-manager
-        display: table
         width: 100%
         height: 100%
+        display: flex
+        flex-direction: column
+        .oe-view-manager-content
+            overflow: auto
+        .oe-view-manager-debug
+            margin-right: 5px
     .oe-view-manager-header
-        display: table-row
         background-color: rgb(240, 238, 238)
         border-bottom: 1px solid #afafb6
+        flex-shrink: 0
+        width: 100%
         -webkit-user-select: none
         -moz-user-select: none
         user-select: none
@@ -912,8 +874,6 @@ $sheet-padding: 16px
             float: right
             > div
                 display: inline-block
-        .row
-            margin: 0
         .row:first-child
             padding-top: 3px
             padding-bottom: 3px
@@ -992,16 +952,6 @@ $sheet-padding: 16px
                 top: 3px
                 content: "\f00c"
 
-    .oe_application 
-        > div    
-            > div
-                > .oe-view-manager-body
-                    position: absolute
-                    top: 90px
-                    bottom: 0
-                    left: 0
-                    right: 0
-                    overflow: auto
         // }}}
     // FormPopup {{{
     .oe_popup_form 
diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js
index 66202e4ae47..88da348ee17 100644
--- a/addons/web/static/src/js/chrome.js
+++ b/addons/web/static/src/js/chrome.js
@@ -1188,7 +1188,7 @@ instance.web.Client = instance.web.Widget.extend({
         self.loading = new instance.web.Loading(self);
         self.loading.appendTo(self.$('.openerp_webclient_container'));
         self.action_manager = new instance.web.ActionManager(self);
-        self.action_manager.appendTo(self.$('.oe_application'));
+        self.action_manager.replace(self.$('.oe_application'));
     },
     toggle_bars: function(value) {
         this.$('tr:has(td.navbar),.oe_leftbar').toggle(value);
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index b71817e867c..48a61e84ce5 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -11,6 +11,7 @@ var QWeb = instance.web.qweb,
     _t = instance.web._t;
 
 instance.web.ActionManager = instance.web.Widget.extend({
+    template: "ActionManager",
     init: function(parent) {
         this._super(parent);
         this.inner_action = null;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index f7441cc3711..660d17943c3 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -469,6 +469,8 @@
     </div>
 </t>
 
+<div t-name="ActionManager" class="oe_application" />
+
 <div t-name="ViewManager" class="oe-view-manager">
     <div class="oe-view-manager-header container-fluid">
         <div class="row">
@@ -505,13 +507,9 @@
         </div>
     </div>
     <div class="oe-view-manager-content">
-        <div class="oe-view-manager-body">
-            <div class="oe-view-manager-views">
-                <t t-foreach="widget.views" t-as="view">
-                    <div t-attf-class="oe-view-manager-view-#{view}"/>
-                </t>
-            </div>
-        </div>
+        <t t-foreach="widget.views" t-as="view">
+            <div t-attf-class="oe-view-manager-view-#{view}"/>
+        </t>
     </div>
 </div>
 <t t-name="ViewManagerDebug">