[REF] web_editor, website, *: complete refactoring

* mass_mailing, payment, point_of_sale, portal, survey, web, web_tour,
  website_blog, website_crm_partner_assign, website_event,
  website_event_questions, website_form, website_forum, website_gengo,
  website_hr_recruitment, website_links, website_mail,
  website_mail_channel, website_mass_mailing, website_quote,
  website_sale, website_sale_options, website_slides, website_twitter

This commit reviews the whole "JS side" of the web_editor and website
apps. This is a first step to be able to improve them with new and
better functionnalities; this commit is not supposed to change any
visual behavior.

The main goal was to achieve a structure similar to the backend one.
Now, the frontend side also has a root widget (like the WebClient)
and all other widgets are attached to it one way or another. This allows
the benefits of using the 'trigger_up' functionnality for example.

As RPC are now mainly done with the `this._rpc` functionnality (being
possible thanks to the parent hierarchy), the frontend will also be
possible to test thanks to QUnit in a future update (besides the "text"
editor side which still requires a refactoring to be able to do that).

---

Here are some of the changes:

(-) conventions and documentation

The code has been updated to follow JS conventions and a lot of code has
been commented (around +2000 lines of comment). This also means that
lots of functions have been renamed to use camelCase or simply to make
their name understandable.
See https://github.com/odoo/odoo/wiki/Javascript-coding-guidelines.

(-) deprecated: web_editor.base

The "web_editor.base" module has been split and does not force the
modules which require it to wait for DOM ready anymore. This was indeed
slowing loading times, but also prevented to use some modules in some
contexts (see the LESS editor use in web_studio which is the subject of
another task).
Now the "editor context" can be got thanks to the "web_editor.context"
JS module with its "get" function.
The "web_editor.base" module should probably not be used anymore (see
its code and recent updates).

(-) new: web.dom_ready

If a JS module should wait for the DOM to be ready to be executed, a
new JS module has been created: "web.dom_ready". This should always
be used in a module which only want to instantiate stuff. Do not
extend (or worst, include) classes after DOM ready.

(-) website.website

The "website.website" module has been split. "website.website" does not
return anything useful anymore, it just initialize some miscellaneous
stuff, without waiting for the DOM to be ready. You might want to check
"website.utils", "website.content.compatibility" or `WebsiteRoot`. Also
`website.form` has been deleted (use `this._rpc`), so has been
`website.error`. `website.prompt` will be removed in a future update to
be replaced by `Dialog.prompt`.

(-) widgets are great

Many classes which were not widgets are now widgets. This allows them to
use the 'events', the 'xmlDependencies' and the 'this._rpc' features for
example. Here are some of the main ones:

- Snippet options: these were classes with a `$el` for the menu element
    and `$target` for the customized element. This is still the case
    but following standard `Widget` structure (one exception: using
    `this.$(...)` searches in the `$target` as before this update).

- Snippet animations: instead of class instances with a `$target`
    element which can be `start` and `stop`, these are now standard
    widgets which can be `start` and `destroy`. `this.$target` is
    an alias to `this.$el` for ease of compatibility.

- Snippet editors: instead of class instances in charge of an editor
    overlay, these are now widgets. Each "child" snippet editor is
    properly attached as a "child", which allows editors to communicate
    and to be properly destroyed.

(-) root widgets and website navbar

The frontend is different of the backend. In the backend, the page has
an empty <body/> element and all the components are instantiated from
parent to children (i.e. the `WebClient` is instantiated and is in
charge of instantiating the `ControlPanel`, etc). The frontend cannot
work like that on page loadings as they are way more frequent than in
the backend and we do not want them to flicker. A frontend page is
loaded as a <body/> element which already contains the website navbar
and its menus and the whole content page. JS code has to be "attached"
to these existing elements. This is possible thanks to the `RootWidget`
instances and the specialized `WebsiteRoot`, `IframeRoot` and
`WebsiteNavbar` (see code for details).

(-) lazy loading

No more (or at least a lot less) XML/JS has to be loaded on page
loading, thanks to the use of the `Widget.xmlDependencies` feature.
XML which have to be lazy loaded is loaded only on related Widget
instantiation if necessary, which allows to execute a lot of JS code
before the DOM is ready and to start many widgets on DOM ready (not
later). A visual benefit of this is clicking on the 'edit' button as
soon as it is possible: before this commit, this was sometimes not
doing anything as event handlers were not binded yet.

Still a possible exception: loading the session and locales. This may
be asynchronous stuff which is still required before widget
instantiations but this will be the subject of another task.

(-) deprecated code and code location

More than reviewing code and organizing it, many apparent dead code was
removed. More importantly, mislocated code was put in the right app.
This is the case for snippet animations which is a concept for website
apps but was defined in the web_editor app, or some translation concepts
which were part of website but should have been part of web_editor.

---

There are probably more things to say about this commit but I will let
the comments speak for those.

5 files changed, 70 insertions, 220 deletions

diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index d7fa51e1ad8..4d3ba998ef0 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 <t t-name="website.contentMenu.dialog.submenu">
     <li t-att-data-menu-id="submenu.id">
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 269795082f1..76bf650e76d 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -1,58 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-    <!-- 
-    =======================================================================
-        Gallery Dialog
-     
-        This template is shown when creating a gallery, allowing users to upload
-        images.
-     ======================================================================= 
-     -->
-
-    <t t-name="website.gallery.dialog.upload">
-        <div class="modal o_technical_modal fade" >
-            <div class="modal-dialog" style="max-width: 50%;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><![CDATA[&times;]]></button>
-                        <h4 class="modal-title">Add images</h4>
-                    </div>
-                    <div class="modal-body">
-                        <form action="/web_editor/attachment/add" method="post" enctype="multipart/form-data" >
-                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                            <div class="form-group">
-                                <input name="upload" type="file" value="Choose images" multiple="multiple" accept="image/*"/> 
-                            </div>
-                            <div class="form-group hidden">
-                                <input type="submit" value="Upload images" class="btn btn-default" />
-                            </div>
-                        </form>
-                        <div class="text-center"><span class="fa fa-refresh fa-5x fa-spin hidden"></span></div>
-                        <div class="alert alert-success" role="alert">Upload successful.</div>
-                        <div class="alert alert-danger" role="alert">Upload failed, some images might not have been uploaded. Check your network connectivity.</div>
-                    </div>
-                    
-                </div>
-            </div>
-        </div>
-    </t>
-
-    <!-- 
+    <!--
         ========================================================================
         Gallery Slideshow
-                
-        This template is used to display a slideshow of images inside a 
+
+        This template is used to display a slideshow of images inside a
         bootstrap carousel.
-        
+
         ========================================================================
     -->
-
     <t t-name="website.gallery.slideshow">
         <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
             <div class="carousel-inner container" style="padding: 0;">
                  <t t-foreach="srcs" t-as="src">
                     <div t-attf-class="item #{src_index == index and 'active' or ''}">
-                        <img t-attf-class="img #{userStyle}" t-att-src="src"/>
+                        <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src"/>
                     </div>
                  </t>
             </div>
@@ -64,32 +26,24 @@
                 </t>
                 <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;"></li>
             </ul>
-            
-            <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev"><span class="fa fa-chevron-left" /></a> 
+
+            <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev"><span class="fa fa-chevron-left" /></a>
             <a class="carousel-control right" t-attf-href="##{id}" data-slide="next"><span class="fa fa-chevron-right" /></a>
-        </div> <!-- carousel-id -->
-        <script type="text/javascript">
-            (function () {
-            $(".slideshow").css("height", Math.round(window.innerHeight*0.7));
-            $(window).on("resize", function () { $(".slideshow").css("height", Math.round(window.innerHeight*0.7)); });
-            })();
-        </script>
+        </div>
     </t>
-    
+
     <!--
         ========================================================================
         Gallery Slideshow LightBox
-        
+
         This template is used to display a lightbox with a slideshow.
-        
+
         This template wraps website.gallery.slideshow in a bootstrap modal
         dialog.
         ========================================================================
     -->
     <t t-name="website.gallery.slideshow.lightbox">
-
         <div class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
-
             <div class="modal-dialog modal-lg" role="Picture Gallery"
                 t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
                 <div class="modal-content">
@@ -98,7 +52,7 @@
                         <t t-call="website.gallery.slideshow"></t>
                     </div>
 
-                </div> 
+                </div>
             </div>
         </div>
     </t>
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 807a9e5711c..a3018720515 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -1,10 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
-
-    <t t-name="website.TopBar.menu.promote">
-        <li><a data-action="promote-current-page" href="#"><span title="Promote page on the web">Promote</span></a></li>
-    </t>
-
     <t t-name="Configurator.language_promote">
         <t t-foreach="language" t-as="lang">
             <option t-att-value="lang[0]" t-att-selected="lang[0] == def_lang ? 'selected' : null"><t t-esc="lang[1]" /></option>
@@ -118,13 +113,6 @@
         </li>
     </t>
 
-    <t t-name="website.seo_image">
-        <div class="col-sm-6 col-md-3 oe_seo_image_preview">
-            <img t-att-src="widget.src" class="img-rounded thumbnail"/>
-            <input type="text" class="form-control" t-att-src="widget.src" t-att-value="widget.alt" placeholder="Description..."/>
-        </div>
-    </t>
-
     <t t-name="website.seo_preview">
         <li class="oe_seo_preview_g">
             <div class="rc">
@@ -136,5 +124,4 @@
             </div>
         </li>
     </t>
-
 </templates>
diff --git a/addons/website/static/src/xml/website.translator.xml b/addons/website/static/src/xml/website.translator.xml
deleted file mode 100644
index 7af85d55f9a..00000000000
--- a/addons/website/static/src/xml/website.translator.xml
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates id="template" xml:space="preserve">
-
-<t t-name="website.TranslatorAdditionalButtons">
-    <li><a class="btn btn-link" data-action="edit_master" href="#"> or Edit Master</a></li>
-</t>
-
-<t t-name="website.TranslatorDialog">
-    <div class="modal o_technical_modal fade oe_website_translator" tabindex="-1" role="dialog">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button title="Close" type="button" class="close" data-dismiss="modal">×</button>
-                    <h2 class="modal-title">Translate this page</h2>
-                </div>
-                <div class="modal-body">
-                    <section>
-                        <p>
-                            You are about to enter the translation mode.
-                        </p>
-                        <p>
-                            Here are the visuals used to help you translate efficiently:
-                            <ul class="oe_translate_examples">
-                                <li data-oe-translation-state="to_translate">
-                                    Content to translate
-                                </li>
-                                <li data-oe-translation-state="translated">
-                                    Translated content
-                                </li>
-                            </ul>
-                        </p>
-                        <p>
-                            In this mode, you can only translate texts.  To
-                            change the structure of the page, you must edit the
-                            master page. Each modification on the master page
-                            is automatically applied to all translated
-                            versions.
-                        </p>
-                    </section>
-                </div>
-                <div class="modal-footer">
-                    <div class="pull-left">
-                        <input type="checkbox" name="do_not_show"/>
-                        Do not show this dialog later.
-                    </div>
-                    <button type="button" data-action="activate" class="btn btn-primary">Ok</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</t>
-</templates>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index d58534f5ded..bc042547176 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -1,117 +1,77 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <div t-name="website.mobile_preview">
-        <iframe id="mobile-viewport" t-att-src="widget.mobile_src"/>
-    </div>
-
-    <div t-name="website.error_dialog">
-        <section t-if="message">
-            <t t-raw="message"/>
-        </section>
-        <section class="mt32" t-if="backend_url">
-            <p>The web site has encountered an error.</p>
-            <p>It might be possible to edit the relevant items or fix the issue in <a t-attf-href="#{backend_url}"> the classic Odoo interface</a>.</p>
-        </section>
-    </div>
-
     <t t-name="website.prompt">
-        <t t-call="website.modal_base">
-            <form class="form-horizontal" role="form" t-att-id="id">
-                <div class="form-group mb0">
-                    <label for="page-name" class="col-sm-3 control-label">
-                        <t t-esc="field_name"/>:
-                    </label>
-                    <div class="col-sm-8">
-                        <input t-if="field_type == 'input'" type="text" class="form-control" required="required"/>
-                        <textarea t-if="field_type == 'textarea'" class="form-control" required="required" rows="5"></textarea>
-                        <select t-if="field_type == 'select'" class="form-control"></select>
-                    </div>
-                </div>
-            </form>
-        </t>
-    </t>
-
-    <t t-name="website.modal_base">
-        <div class="modal o_technical_modal " tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal o_technical_modal" tabindex="-1" role="dialog" aria-hidden="true">
                 <div class="modal-dialog">
                 <div class="modal-content">
-                    <t t-call="website.modal_header" />
+                    <div class="modal-header" t-if="window_title">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 class="modal-title"><t t-esc="window_title"/></h3>
+                    </div>
                     <div class="modal-body">
-                        <t t-raw="0"/>
+                        <form class="form-horizontal" role="form" t-att-id="id">
+                            <div class="form-group mb0">
+                                <label for="page-name" class="col-sm-3 control-label">
+                                    <t t-esc="field_name"/>:
+                                </label>
+                                <div class="col-sm-8">
+                                    <input t-if="field_type == 'input'" type="text" class="form-control" required="required"/>
+                                    <textarea t-if="field_type == 'textarea'" class="form-control" required="required" rows="5"></textarea>
+                                    <select t-if="field_type == 'select'" class="form-control"></select>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-sm btn-primary btn-continue">Continue</button>
+                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                     </div>
-                    <t t-call="website.modal_footer" />
                 </div>
             </div>
         </div>
     </t>
-    <t t-name="website.modal_header">
-        <div class="modal-header" t-if="window_title">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3 class="modal-title"><t t-esc="window_title"/></h3>
-        </div>
-    </t>
-
-    <t t-name="website.modal_footer">
-        <div class="modal-footer">
-            <button type="button" class="btn btn-sm btn-primary btn-continue">Continue</button>
-            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
-        </div>
-    </t>
 
     <t t-name="website.dependencies">
-        <div t-if="_.keys(dependencies).length > 0" class="panel panel-warning">
-            <div class="panel-heading"><strong>Warning!</strong> Don't forget to update all links referring to this page:</div>
-
-            <t t-set='tid' t-value='0'/>
-            <div class="panel-body">
-                <div t-foreach="_.keys(dependencies)" t-as="type">
-                    <a class="collapsed" data-toggle="collapse" t-att-href="'#collapseDependencies'+tid" aria-expanded="false" t-att-aria-controls="'collapseDependencies'+tid">
-                        <i class="fa fa-caret-right"/>
-                        <b><t t-esc="type"/></b>:&amp;nbsp;
-                        <span class="text-muted"><t t-esc="dependencies[type].length"/> found<span t-if="dependencies[type].length > 1">s</span></span>
-                    </a>
-                    <div t-att-id="'collapseDependencies'+tid" class="collapse" aria-expanded="false">
-                        <ul>
-                            <li t-foreach="dependencies[type]" t-as="error">
-                                <a t-if="!_.contains(['', '#', false,], error.link)" t-att-href="error.link">
-                                    <t t-raw="error.text"/>
-                                </a>
-                                <t t-if="_.contains(['', '#', false,], error.link)" t-raw="error.text"/>
-                            </li>
-                        </ul>
-                    </div>
-                    <t t-set='tid' t-value='tid+1'/>
+        <p class="text-warning">Don't forget to update all links referring to this page.</p>
+        <t t-if="dependencies and _.keys(dependencies).length">
+            <p class="text-warning">We found these ones:</p>
+            <div t-foreach="dependencies" t-as="type" class="mb16">
+                <a class="collapsed fa fa-caret-right" data-toggle="collapse" t-attf-href="#collapseDependencies#{type_index}" aria-expanded="false" t-attf-aria-controls="collapseDependencies#{type_index}">
+                    <t t-esc="type"/>&amp;nbsp;
+                    <span class="text-muted"><t t-esc="type_value.length"/> found(s)</span>
+                </a>
+                <div t-attf-id="collapseDependencies#{type_index}" class="collapse" aria-expanded="false">
+                    <ul>
+                        <li t-foreach="type_value" t-as="error">
+                            <a t-if="!_.contains(['', '#', false], error.link)" t-att-href="error.link">
+                                <t t-raw="error.text"/>
+                            </a>
+                            <t t-else="">
+                                <t t-raw="error.text"/>
+                            </t>
+                        </li>
+                    </ul>
                 </div>
             </div>
-        </div>
-    </t>
-    <t t-name="website.delete_page">
-        <t t-call="website.modal_base">
-            <t t-call="website.dependencies" />
-            <form class="form-horizontal" role="form" t-att-id="id">
-                <div class="form-group">
-                    <label class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8 mt16 text-center alert alert-danger">
-                        <input style="margin-right:10px" type="checkbox" onchange="$('.btn-continue').prop('disabled', !this.checked)"/>
-                        <span style="font-weight:normal"><br class="visible-xs"/><b>I'm sure</b>, I want to delete this page <b> <ins>definitively</ins></b></span>
-                    </label>
-                </div>
-            </form>
         </t>
     </t>
 
-    <t t-name="website.rename_page">
-        <t t-call="website.modal_base">
-            <t t-call="website.dependencies" />
-            <div class="well">
-                <form class="form-horizontal" role="form" t-att-id="id">
-                    <div class="form-group mb0" >
-                        <label for="new_name" class="control-label col-sm-4">Rename Page To:</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us" />
-                        </div>
+    <div t-name="website.delete_page">
+        <p>Are you sure you want to delete this page ?</p>
+        <t t-call="website.dependencies"/>
+    </div>
+
+    <div t-name="website.rename_page">
+        <div class="well">
+            <form class="form-horizontal">
+                <div class="form-group mb0">
+                    <label for="new_name" class="control-label col-sm-4">Rename Page To:</label>
+                    <div class="col-sm-8">
+                        <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/>
                     </div>
-                </form>
-            </div>
-        </t>
-    </t>
+                </div>
+            </form>
+        </div>
+        <t t-call="website.dependencies"/>
+    </div>
 </templates>