[IMP] Web et al.: ControlPanel extracted from ViewManager

The ControlPanel is still instantiated by the ViewManager.

Changes details:
* web: views.js:
    Code related to views header is extracted from the ViewManager
    to a new Widget named ControlPanel.

    Also uses the headless flag to tell the inner view not to put
    its buttons (use case: kanban) or pager (use case: list) in the
    header as it is hidden.
* web: view_form.js, base.xml:
    Uses the headless flag at initialization of the One2ManyViewManager
    widget instead of extending the ViewManager template (which doesn't
    handle the header anymore).

* web: view_list.js:
    Test on this.options.$pager instead of this.options.$buttons
    when dealing with pager.

    Note: the behavior for list view is unchanged and has a bug.
    If there are more then 80 records to display, only the 80th
    first are display, and as there is no pager, there is no way
    to see the remaining ones. A fix for this would be to use a
    light ControlPanel in One2Many views as well. With this,
    there won't be duplicated .oe-'view'-buttons/sidebar/pager
    anymore.

* web: view_graph.js, view_pivot.js:
    Only render buttons in non-headless mode

* web_dashboard: dashboard.js:
    Fix some references that were broken with ControlPanel extraction

* web_view_editor: web_view_editor.js:
    Extend ControlPanel instead of ViewManager

* Changes in selector of ControlPanel elements in several addons:
    * base_import
    * mail
    * web

2 files changed, 57 insertions, 58 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index c71c340dd04..5626ccec148 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -967,7 +967,7 @@
 .openerp .oe-view-manager .oe-view-manager-debug {
   margin-right: 5px;
 }
-.openerp .oe-view-manager-header {
+.openerp .oe-control-panel {
   background-color: #f0eeee;
   border-bottom: 1px solid #afafb6;
   -webkit-flex-shrink: 0;
@@ -977,141 +977,140 @@
   -moz-user-select: none;
   user-select: none;
 }
-.openerp .oe-view-manager-header .oe-button-column {
+.openerp .oe-control-panel .oe-button-column {
   height: 30px;
 }
-.openerp .oe-view-manager-header .dropdown-menu li {
+.openerp .oe-control-panel .dropdown-menu li {
   position: relative;
 }
-.openerp .oe-view-manager-header .dropdown-menu li a {
+.openerp .oe-control-panel .dropdown-menu li a {
   padding: 3px 25px;
 }
-.openerp .oe-view-manager-header .dropdown-menu .oe_searchview_custom_public a:after, .openerp .oe-view-manager-header .dropdown-menu .oe-share-filter:after {
+.openerp .oe-control-panel .dropdown-menu .oe_searchview_custom_public a:after, .openerp .oe-control-panel .dropdown-menu .oe-share-filter:after {
   font-family: FontAwesome;
   content: "";
   color: #666;
   margin-left: 3px;
 }
-.openerp .oe-view-manager-header .selected {
+.openerp .oe-control-panel .selected {
   display: block;
 }
-.openerp .oe-view-manager-header .selected a {
+.openerp .oe-control-panel .selected a {
   font-weight: bold;
 }
-.openerp .oe-view-manager-header .selected a:before {
+.openerp .oe-control-panel .selected a:before {
   font-family: FontAwesome;
   position: absolute;
   left: 6px;
   top: 3px;
   content: "";
 }
-.openerp .oe-view-manager-header .oe-right-toolbar {
+.openerp .oe-control-panel .oe-right-toolbar {
   float: right;
 }
-.openerp .oe-view-manager-header .oe-right-toolbar > div {
+.openerp .oe-control-panel .oe-right-toolbar > div {
   display: inline-block;
 }
-.openerp .oe-view-manager-header .row:first-child {
+.openerp .oe-control-panel .row:first-child {
   padding-top: 3px;
   padding-bottom: 3px;
 }
-.openerp .oe-view-manager-header .row:last-child {
+.openerp .oe-control-panel .row:last-child {
   padding-bottom: 10px;
 }
-.openerp .oe-view-manager-header .oe_tag {
+.openerp .oe-control-panel .oe_tag {
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-.openerp .oe-view-manager-header .oe-view-title {
+.openerp .oe-control-panel .oe-view-title {
   font-size: 18px;
   padding-left: 0;
   margin: 0;
   background-color: #f0eeee;
 }
-.openerp .oe-view-manager-header .oe-view-title li {
+.openerp .oe-control-panel .oe-view-title li {
   -moz-user-select: initial;
   -webkit-user-select: initial;
   user-select: initial;
 }
-.openerp .oe-view-manager-header .oe-view-manager-search-view {
+.openerp .oe-control-panel .oe-cp-search-view {
   padding-top: 5px;
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch button {
+.openerp .oe-control-panel .oe-cp-switch-buttons button {
   width: 34px;
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-kanban:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-kanban:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-list:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-list:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-form:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-form:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-graph:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-graph:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-calendar:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-calendar:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-gantt:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-gantt:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-pivot:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-pivot:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-tree:before {
+.openerp .oe-control-panel .oe-cp-switch-buttons .oe-cp-switch-tree:before {
   content: "";
 }
-.openerp .oe-view-manager-header .oe-view-manager-buttons {
+.openerp .oe-control-panel .oe-cp-buttons {
   display: inline-block;
 }
-.openerp .oe-view-manager-header .oe-view-manager-buttons > div {
+.openerp .oe-control-panel .oe-cp-buttons > div {
   display: none;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar {
+.openerp .oe-control-panel .oe-cp-sidebar {
   display: inline-block;
   float: right;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .oe_form_binary_form {
+.openerp .oe-control-panel .oe-cp-sidebar .oe_form_binary_form {
   cursor: pointer;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .oe_form_binary_form span {
+.openerp .oe-control-panel .oe-cp-sidebar .oe_form_binary_form span {
   padding: 3px 20px;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .oe_form_binary_form input.oe_form_binary_file {
+.openerp .oe-control-panel .oe-cp-sidebar .oe_form_binary_form input.oe_form_binary_file {
   width: 100%;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .oe_form_binary_form:hover {
+.openerp .oe-control-panel .oe-cp-sidebar .oe_form_binary_form:hover {
   background-color: #f5f5f5;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .oe_file_attachment {
+.openerp .oe-control-panel .oe-cp-sidebar .oe_file_attachment {
   padding: 3px 20px;
   display: inline-block;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .oe_sidebar_delete_item {
+.openerp .oe-control-panel .oe-cp-sidebar .oe_sidebar_delete_item {
   padding: 0;
-  position: absolute;
-  right: 10px;
+  display: inline-block;
 }
-.openerp .oe-view-manager-header .oe-view-manager-sidebar .dropdown-menu li a {
+.openerp .oe-control-panel .oe-cp-sidebar .dropdown-menu li a {
   width: 100%;
 }
-.openerp .oe-view-manager-header .oe_form_buttons {
+.openerp .oe-control-panel .oe_form_buttons {
   padding: 0;
 }
-.openerp .oe-view-manager-header .oe_form_buttons_view > button {
+.openerp .oe-control-panel .oe_form_buttons_view > button {
   float: left;
 }
-.openerp .oe-view-manager-header .oe_form_buttons_view > button:last-child {
+.openerp .oe-control-panel .oe_form_buttons_view > button:last-child {
   float: right;
   margin-left: 4px;
 }
-.openerp .oe-view-manager-header .oe-pager-buttons {
+.openerp .oe-control-panel .oe-pager-buttons {
   min-height: 30px;
 }
-.openerp .oe_view_manager_inline > .oe-view-manager-header, .openerp .oe_view_manager_inlineview > .oe-view-manager-header {
+.openerp .oe_view_manager_inline > .oe-control-panel-content, .openerp .oe_view_manager_inlineview > .oe-control-panel-content {
   display: none;
 }
 .openerp .o-modal-header > div {
@@ -3094,7 +3093,7 @@ body.oe_single_form .oe_single_form_container {
   .openerp .oe_application .oe_form_sheet .oe_list, .openerp .oe_application .oe_form_sheetbg .oe_list {
     overflow-x: visible;
   }
-  .openerp .oe_view_manager_current > .oe_view_manager_header {
+  .openerp .oe-control-panel {
     border: 0px !important;
     box-shadow: 0px 0px 0px;
   }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 1432352aa7e..63ef0cd5bdb 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -840,7 +840,7 @@ $sheet-padding: 16px
                     display: block
         .oe-view-manager-debug
             margin-right: 5px
-    .oe-view-manager-header
+    .oe-control-panel
         background-color: rgb(240, 238, 238)
         border-bottom: 1px solid #afafb6
         -webkit-flex-shrink: 0
@@ -891,32 +891,32 @@ $sheet-padding: 16px
                 -moz-user-select: initial
                 -webkit-user-select: initial
                 user-select: initial
-        .oe-view-manager-search-view
+        .oe-cp-search-view
             padding-top: 5px
-        .oe-view-manager-switch
+        .oe-cp-switch-buttons
             button
                 width: 34px
-            .oe-vm-switch-kanban:before
+            .oe-cp-switch-kanban:before
                 content: "\f009"
-            .oe-vm-switch-list:before
+            .oe-cp-switch-list:before
                 content: ""
-            .oe-vm-switch-form:before
+            .oe-cp-switch-form:before
                 content: "\f044"
-            .oe-vm-switch-graph:before
+            .oe-cp-switch-graph:before
                 content: "\f080"
-            .oe-vm-switch-calendar:before
+            .oe-cp-switch-calendar:before
                 content: "\f073"
-            .oe-vm-switch-gantt:before
+            .oe-cp-switch-gantt:before
                 content: "\f0ae"
-            .oe-vm-switch-pivot:before
+            .oe-cp-switch-pivot:before
                 content: "\f0ce"
-            .oe-vm-switch-tree:before
+            .oe-cp-switch-tree:before
                 content: "\f036"
-        .oe-view-manager-buttons
+        .oe-cp-buttons
             display: inline-block
             > div
                 display: none
-        .oe-view-manager-sidebar
+        .oe-cp-sidebar
             display: inline-block
             float: right
             .oe_form_binary_form
@@ -951,7 +951,7 @@ $sheet-padding: 16px
         .oe-pager-buttons
             min-height: 30px
     .oe_view_manager_inline, .oe_view_manager_inlineview
-        > .oe-view-manager-header
+        > .oe-control-panel-content
             display: none
 
         // }}}
@@ -2549,7 +2549,7 @@ body.oe_single_form
                 box-shadow: 0px 0px 0px
                 .oe_list
                     overflow-x: visible
-        .oe_view_manager_current > .oe_view_manager_header
+        .oe-control-panel
             border: 0px !important
             box-shadow: 0px 0px 0px
         text-shadow: none