[IMP] web: use bootstrap's notebook, rewrite process_notebook

Introduction of a specialized InvisibilityChanger for the notebook. It
allows to handle more elegantly the issues of the notebook during
page execution: modifiers hiding the active tab that must now
active its sibling.

Process_notebook only handle the processing of the page while
NotebookInvisibilityChanger only handle the behavior of the notebook
during the page execution.

- readable code (more readable, at least)
- correct handle of autofocus
- rendering of the whole notebook in one call to qweb's render
- one invisibility changer bound by header/content
- no custom css, only legacy bootstrap

1 files changed, 7 insertions, 6 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index e5b8286bdb9..dffa0a47fc3 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -888,17 +888,18 @@
 </t>
 <t t-name="FormRenderingNotebook">
     <div class="oe_clear">
-        <ul t-attf-class="oe_notebook #{classnames}">
+        <ul t-attf-class="nav nav-tabs #{classnames}" role="tablist">
             <li t-foreach="pages" t-as="page" t-att-modifiers="page.modifiers">
-                <a t-attf-href="##{page.id}" t-att-accesskey="page.accesskey">
+                <a role="tab" t-attf-href="##{page.id}" t-att-accesskey="page.accesskey" data-toggle="tab">
                     <t t-esc="page.string"/>
                 </a>
             </li>
         </ul>
-    </div>
-</t>
-<t t-name="FormRenderingNotebookPage">
-    <div t-attf-class="oe_notebook_page #{classnames}" t-att-id="id">
+        <div class="tab-content">
+            <div role="tabpanel" t-foreach="pages" t-as="page" t-attf-class="tab-pane fade #{classnames}" t-att-id="id">
+                <t t-raw="page.contents"/>
+            </div>
+        </div>
     </div>
 </t>
 <t t-name="FormRenderingSeparator">