[REF] web_editor,website,mass_mailing: JS/XML update

* Adapt DOM selectors
* Refactore dialog XMLs to have odoo styling
* New editor options (background-position, ...)
* Various improvements

14 files changed, 425 insertions, 577 deletions

diff --git a/addons/website/static/src/js/web_planner_website.js b/addons/website/static/src/js/web_planner_website.js
index 835e26594f7..58da5432a66 100644
--- a/addons/website/static/src/js/web_planner_website.js
+++ b/addons/website/static/src/js/web_planner_website.js
@@ -10,13 +10,13 @@ require('web_editor.base');  // wait for implicit dependencies to load
 
 var qweb = core.qweb;
 
-if(!$('#oe_systray').length) {
-    return $.Deferred().reject("DOM doesn't contain '#oe_systray'");
+if(!$('#oe_main_menu_navbar').length) {
+    return $.Deferred().reject("DOM doesn't contain #oe_main_menu_navbar");
 }
 
 var WebsitePlannerLauncher = Widget.extend({
     template: "PlannerLauncher",
-    start: function() {
+    start: function () {
         var self = this;
         var res = this._super.apply(this, arguments);
         this.$('.progress').show();
@@ -29,22 +29,22 @@ var WebsitePlannerLauncher = Widget.extend({
             }
         });
     },
-    get_website_planner: function() {
+    get_website_planner: function () {
         return (new Model('web.planner')).call('search_read', [[['planner_application', '=', 'planner_website']]]);
     },
-    setup: function() {
+    setup: function () {
         var self = this;
         this.dialog = new planner.PlannerDialog(this, this.planner);
         this.dialog.appendTo($('<div>'));
         this.$(".progress").tooltip({html: true, title: this.planner.tooltip_planner, placement: 'bottom', container: 'body', delay: {'show': 700}});
-        this.dialog.on("planner_progress_changed", this, function(percent) {
+        this.dialog.on("planner_progress_changed", this, function (percent) {
             self.update_parent_progress_bar(percent);
         });
     },
-    update_parent_progress_bar: function(percent) {
+    update_parent_progress_bar: function (percent) {
         this.$(".progress-bar").css('width', percent+"%");
     },
-    show_dialog: function() {
+    show_dialog: function () {
         this.dialog.$el.appendTo(document.body);
         this.dialog.$el.modal('show');
     },
@@ -52,7 +52,7 @@ var WebsitePlannerLauncher = Widget.extend({
 
 return ajax.loadXML('/web_planner/static/src/xml/web_planner.xml', qweb).then(function() {
     var websitePlannerLauncher = new WebsitePlannerLauncher();
-    websitePlannerLauncher.prependTo($('#oe_systray'));
+    websitePlannerLauncher.prependTo($('#oe_main_menu_navbar .o_menu_systray'));
 });
 
 });
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index 77a4ac27446..73ea30b91fd 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -105,10 +105,6 @@ var ViewEditor = Widget.extend({
             self.aceEditor.resize();
             self.$el.width(width);
         }
-        function resizeEditorHeight(height) {
-            self.$el.css('top', height);
-            self.$('.ace_editor').css('bottom', height);
-        }
         function storeEditorWidth() {
             window.localStorage.setItem('ace_editor_width', self.$el.width());
         }
@@ -136,13 +132,9 @@ var ViewEditor = Widget.extend({
         self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
         $(document).mousemove(updateWidth);
         $('button[data-action=edit]').click(function () {
-           self.close();
-        });
-        this.getParent().on('change:height', this, function () {
-            resizeEditorHeight(this.getParent().$el.outerHeight()+2);
+            self.close();
         });
         resizeEditor(readEditorWidth());
-        resizeEditorHeight(this.getParent().$el.outerHeight()+2);
     },
     loadTemplates: function () {
         var self = this;
@@ -220,7 +212,7 @@ var ViewEditor = Widget.extend({
             model: 'ir.ui.view',
             method: 'read',
             args: [[viewId], ['arch'], _.extend(base.get_context(), {'lang': null})],
-        }).then(function(result) {
+        }).then(function (result) {
             var editingSession = self.buffers[viewId] = new ace.EditSession(result[0].arch);
             editingSession.setMode("ace/mode/xml");
             editingSession.setUndoManager(new ace.UndoManager());
@@ -359,12 +351,7 @@ var ViewEditor = Widget.extend({
             this.$("#ace-view-list").val(session.id).change();
         }
 
-        var $dialog = $(qweb.render('website.error_dialog', {
-            title: session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1],
-            message:"<b>Malformed XML document</b>:<br/>" + message
-        }));
-        $dialog.appendTo("body");
-        $dialog.modal('show');
+        website.error(session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1], "<b>Malformed XML document</b>:<br/>" + message);
     },
     open: function () {
         this.$el.removeClass('oe_ace_closed').addClass('oe_ace_open');
@@ -378,9 +365,11 @@ var ViewEditor = Widget.extend({
 website.TopBar.include({
     start: function () {
         this.ace = new Ace();
-        var def = this.ace.attachTo($('#html_editor'));
-        return $.when(this._super(), def);
-    }
+        return $.when(
+            this._super.apply(this, arguments),
+            this.ace.attachTo($('#html_editor'))
+        );
+    },
 });
 
 });
diff --git a/addons/website/static/src/js/website.backend.js b/addons/website/static/src/js/website.backend.js
index 7a3b6a6e580..a50b838854c 100644
--- a/addons/website/static/src/js/website.backend.js
+++ b/addons/website/static/src/js/website.backend.js
@@ -9,7 +9,7 @@ var _t = core._t;
 
 var WidgetWebsiteButton = form_common.AbstractField.extend({
     template: 'WidgetWebsiteButton',
-    render_value: function() {
+    render_value: function () {
         this._super.apply(this, arguments);
 
         var $value = this.$('.o_value');
@@ -28,7 +28,7 @@ var WidgetWebsiteButton = form_common.AbstractField.extend({
             this.$el.addClass(this.node.attrs.class);
         }
     },
-    is_false: function() {
+    is_false: function () {
         return false;
     },
 });
diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 3cbcaefbb14..01deb49977c 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -15,34 +15,18 @@ var qweb = core.qweb;
 ajax.loadXML('/website/static/src/xml/website.contentMenu.xml', qweb);
 
 var TopBarContent = Widget.extend({
-    start: function() {
+    start: function () {
         var self = this;
-        self.$el.on('click', 'a[data-action]', function(ev) {
-            ev.preventDefault();
-            var $content_item = $(this);
-            self[$content_item.data('action')]();
-        });
-
-        // Build 'ADD PAGE' modal
-        var $cont    = $('#website_addPage_modal .website_addPage_ul');
-        var $defIcon = $('<i class="fa fa-cube"></i>')
 
-        $("#website_addPage_list").nextAll().each(function(){
-            var $clone = $(this).clone().appendTo($cont).attr("data-dismiss","modal").addClass('animated')
-            var $a     = $clone.find('a')
-            var text   = $a.text()
-
-            if($clone.find('i').length < 1){ $defIcon.clone().prependTo($a)}
-            if($clone.find('p').length < 1){ $a.html($a.html().replace($a.text(),'')).append('<p>' + text + '</p>')}
+        // Add page modal + menu content event
+        this.$el.add($('#o_website_add_page_modal')).on('click', 'a[data-action]', function (e) {
+            e.preventDefault();
+            self[$(this).data('action')]();
+        });
 
-            $a.on('click', function(){
-                var $content_item = $(this);
-                self[$content_item.data('action')]();
-            })
-        })
         return this._super();
     },
-    edit_menu: function() {
+    edit_menu: function () {
         var self = this;
         var context = base.get_context();
         var def = $.Deferred();
@@ -70,7 +54,7 @@ var TopBarContent = Widget.extend({
             });
         });
     },
-    new_page: function() {
+    new_page: function () {
         website.prompt({
             id: "editor_new_page",
             window_title: _t("New Page"),
@@ -79,18 +63,11 @@ var TopBarContent = Widget.extend({
                 var $group = this.$dialog.find("div.form-group");
                 $group.removeClass("mb0");
 
-                var $add = $(
-                    '<div class="form-group mb0">'+
-                        '<span class="col-sm-offset-3 col-sm-9 text-left">'+
-                            '<label class="switch checked" for="switch_addTo_menu">' +
-                              '<input type="checkbox" id="switch_addTo_menu" class="switch_input" checked="checked" />' +
-                              '<span class="switch_track"></span>' +
-                            '</label>' +
-                        '</span>'+
-                    '</div>');
-                $add.find('label').after(_t("Add page in menu"));
+                var $add = $('<div/>', {'class': 'form-group mb0'})
+                            .append($('<span/>', {'class': 'col-sm-offset-3 col-sm-9 text-left'})
+                                    .append(qweb.render('web_editor.components.switch', {id: 'switch_addTo_menu', label: _t("Add page in menu")})));
+                $add.find('input').prop('checked', true);
                 $group.after($add);
-                console.log(website)
             }
         }).then(function (val, field, $dialog) {
             if (val) {
@@ -100,7 +77,7 @@ var TopBarContent = Widget.extend({
             }
         });
     },
-    rename_page: function() {
+    rename_page: function () {
         var self = this;
         var context = base.get_context();
         self.mo_id = self.getMainObject().id;
@@ -134,7 +111,7 @@ var TopBarContent = Widget.extend({
             });
         });
     },
-    delete_page: function() {
+    delete_page: function () {
         var self = this;
         var context = base.get_context();
         self.mo_id = self.getMainObject().id;
@@ -144,17 +121,17 @@ var TopBarContent = Widget.extend({
             method: 'page_search_dependencies',
             args: [self.mo_id],
             kwargs: {
-                context: context
+                context: context,
             },
         }).then(function (deps) {
             website.prompt({
                 id: "editor_delete_page",
                 window_title: _t("Delete Page"),
                 dependencies: deps,
-                    init: function() { $('.btn-continue').prop("disabled", true)},
+                    init: function () { $('.btn-continue').prop("disabled", true)},
             }, 'website.delete_page').then(function (val, field, $dialog) {
 
-                if ($dialog.find('input[type="checkbox"]').is(':checked')){
+                if ($dialog.find('input[type="checkbox"]').is(':checked')) {
                     ajax.jsonRpc('/web/dataset/call_kw', 'call', {
                         model: 'website',
                         method: 'delete_page',
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index a670f53bef1..b40c2deac9f 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -23,47 +23,16 @@ website.TopBar.include({
     },
     start: function () {
         var self = this;
-        $("#wrapwrap").on('click', '.o_editable, [data-oe-model]', function (event) {
-            var $this = $(event.srcElement);
-            var tag = $this[0] && $this[0].tagName.toLowerCase();
-            if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
-                self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
-            }
-        });
-
         $("#wrapwrap").find("[data-oe-model] .oe_structure.oe_empty, [data-oe-model].oe_structure.oe_empty, [data-oe-type=html]:empty")
             .filter(".oe_not_editable")
             .filter(".oe_no_empty")
-            .addClass("oe_empty")
-            .attr("data-oe-placeholder", _t("Press The Top-Left Edit Button"));
+            .addClass("oe_empty");
 
         if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang') === "en_US") {
             this.$el.addClass('editing_mode');
         }
 
-        self.init_components()
-
-        self.resize()
-        $(window).on("resize", function(){
-            self.resize()
-        })
-
-        return this._super();
-    },
-    init_components: function(){
-        $(".switch").each(function(){
-            var $el = $(this)
-            $el.on('click', function(){
-                var $i = $el.find('.switch_input')
-                $el.toggleClass('checked')
-                if($i.prop("checked")){
-                    $i.prop("checked", false);
-                } else {
-                    $i.prop("checked", true);
-                }
-                return false;
-            })
-        });
+        return this._super.apply(this, arguments);
     },
     edit: function () {
         this.$('button[data-action=edit]').prop('disabled', true);
@@ -71,31 +40,6 @@ website.TopBar.include({
         editor.editor_bar = new editor.Class(this);
         editor.editor_bar.prependTo(document.body);
     },
-    resize: function() {
-        var wW = $(window).width(),
-            $sys = $('#oe_systray'),
-            $nav = $('#website_main_menu_navbar');
-
-        // Adapt dropdown-menu orientation to fit screen size
-        $sys.find('> li.wb_dropdown, >li.dropdown').each(function(){
-          var $el = $(this),
-           offset = $el.offset(),
-            width = $el.width();
-          var centerX = offset.left + width / 2;
-          if(centerX > wW/2){
-            $el.addClass('right')
-          } else {
-            $el.removeClass('right')
-          }
-        })
-        // Resize oe_systray
-        var totalWidth = null;
-        $nav.find('>*').not($sys).each(function(index) {
-            totalWidth += parseInt($(this).outerWidth() , 10);
-        });
-        $sys.width((wW - totalWidth)-50).addClass('ready')
-
-    }
 });
 
 /* ----- Customize Template ---- */
@@ -105,7 +49,7 @@ website.TopBarCustomize = Widget.extend({
         'mousedown a.dropdown-toggle': 'load_menu',
         'click ul a[data-view-id]': 'do_customize',
     },
-    start: function() {
+    start: function () {
         var self = this;
         this.$menu = self.$el.find('ul');
         this.view_name = $(document.documentElement).data('view-xmlid');
@@ -119,43 +63,36 @@ website.TopBarCustomize = Widget.extend({
         if(this.loaded) {
             return;
         }
-        ajax.jsonRpc('/website/customize_template_get', 'call', { 'key': this.view_name }).then(
-            function(result) {
-                _.each(result, function (item) {
-                    if (item.key === "website.debugger" && !window.location.search.match(/[&?]debug(&|$)/)) return;
-                    if (item.header) {
-                        self.$menu.append('<li class="dropdown-header">' + item.name + '</li>');
-                    } else {
-                         self.$menu.append(_.str.sprintf(
-                                                '<li role="presentation">'+
-                                                    '<a href="#" data-view-id="%s" role="menuitem">' +
-                                                        '<span class="toggle_container">' +
-                                                            '<label class="switch %s" for="switch-%s">' +
-                                                                '<input type="checkbox" id="switch-%s" class="switch_input" checked="%s">' +
-                                                                '<span class="switch_track"></span>' +
-                                                            '</label>' +
-                                                        '</span> %s'+
-                                                    '</a>' +
-                                                '</li>',
-                            item.id, item.active ? 'checked' : '', item.id, item.id, item.active ? 'true' : 'false', item.name));
-                    }
-                });
-                self.loaded = true;
-            }
-        );
+        ajax.jsonRpc('/website/customize_template_get', 'call', {
+            key: this.view_name,
+        }).then(function (result) {
+            _.each(result, function (item) {
+                if (item.key === "website.debugger" && !window.location.search.match(/[&?]debug(&|$)/)) return;
+                if (item.header) {
+                    self.$menu.append('<li class="dropdown-header">' + item.name + '</li>');
+                } else {
+                    var $li = $('<li/>', {role: 'presentation'})
+                                .append($('<a/>', {href: '#', 'data-view-id': item.id, role: 'menuitem'})
+                                    .append(qweb.render('web_editor.components.switch', {id: 'switch-' + item.id, label: item.name})));
+                    $li.find('input').prop('checked', !!item.active);
+                    self.$menu.append($li);
+                }
+            });
+            self.loaded = true;
+        });
     },
-    do_customize: function (event) {
-        var view_id = $(event.currentTarget).data('view-id');
-        $('#website_loading').addClass('active')
+    do_customize: function (e) {
+        e.preventDefault();
+        var view_id = $(e.currentTarget).data('view-id');
         return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
             model: 'ir.ui.view',
             method: 'toggle',
             args: [],
             kwargs: {
                 ids: [parseInt(view_id, 10)],
-                context: base.get_context()
+                context: base.get_context(),
             }
-        }).then( function() {
+        }).then(function () {
             window.location.reload();
         });
     },
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index e26ba130f52..08501d3b48e 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -1,189 +1,178 @@
 odoo.define('website.website', function (require) {
-"use strict";
+    "use strict";
 
-var ajax = require('web.ajax');
-var core = require('web.core');
-var Widget = require('web.Widget');
-var session = require('web.session');
-var base = require('web_editor.base');
-var Tour = require('web.Tour');
+    var ajax = require('web.ajax');
+    var core = require('web.core');
+    var Widget = require('web.Widget');
+    var session = require('web.session');
+    var base = require('web_editor.base');
+    var Tour = require('web.Tour');
 
-var qweb = core.qweb;
-var _t = core._t;
-base.url_translations = '/website/translations';
+    var qweb = core.qweb;
+    var _t = core._t;
+    base.url_translations = '/website/translations';
 
-/* --- Set the browser into the dom for css selectors --- */
-var browser;
-if ($.browser.webkit) browser = "webkit";
-else if ($.browser.safari) browser = "safari";
-else if ($.browser.opera) browser = "opera";
-else if ($.browser.msie || ($.browser.mozilla && +$.browser.version.replace(/^([0-9]+\.[0-9]+).*/, '\$1') < 20)) browser = "msie";
-else if ($.browser.mozilla) browser = "mozilla";
-browser += ","+$.browser.version;
-if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) browser += ",mobile";
-document.documentElement.setAttribute('data-browser', browser);
+    /* --- Set the browser into the dom for css selectors --- */
+    var browser;
+    if ($.browser.webkit) browser = "webkit";
+    else if ($.browser.safari) browser = "safari";
+    else if ($.browser.opera) browser = "opera";
+    else if ($.browser.msie || ($.browser.mozilla && +$.browser.version.replace(/^([0-9]+\.[0-9]+).*/, '\$1') < 20)) browser = "msie";
+    else if ($.browser.mozilla) browser = "mozilla";
+    browser += ","+$.browser.version;
+    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) browser += ",mobile";
+    document.documentElement.setAttribute('data-browser', browser);
 
 
-/* ----------------------------------------------------
-   Helpers
-   ---------------------------------------------------- */
+    /* ----------------------------------------------------
+       Helpers
+       ---------------------------------------------------- */
+    var get_context = base.get_context;
+    base.get_context = base.get_context = function (dict) {
+        var html = document.documentElement;
+        return _.extend({
+            'website_id': html.getAttribute('data-website-id')|0
+        }, get_context(dict), dict);
+    };
 
-var get_context = base.get_context;
-base.get_context = base.get_context = function (dict) {
-    var html = document.documentElement;
-    return _.extend({
-        'website_id': html.getAttribute('data-website-id')|0
-    }, get_context(dict), dict);
-};
+    /* ----------------------------------------------------
+       Widgets
+       ---------------------------------------------------- */ 
+    var prompt = function (options, _qweb) {
+        /**
+         * A bootstrapped version of prompt() albeit asynchronous
+         * This was built to quickly prompt the user with a single field.
+         * For anything more complex, please use editor.Dialog class
+         *
+         * Usage Ex:
+         *
+         * website.prompt("What... is your quest ?").then(function (answer) {
+         *     arthur.reply(answer || "To seek the Holy Grail.");
+         * });
+         *
+         * website.prompt({
+         *     select: "Please choose your destiny",
+         *     init: function () {
+         *         return [ [0, "Sub-Zero"], [1, "Robo-Ky"] ];
+         *     }
+         * }).then(function (answer) {
+         *     mame_station.loadCharacter(answer);
+         * });
+         *
+         * @param {Object|String} options A set of options used to configure the prompt or the text field name if string
+         * @param {String} [options.window_title=''] title of the prompt modal
+         * @param {String} [options.input] tell the modal to use an input text field, the given value will be the field title
+         * @param {String} [options.textarea] tell the modal to use a textarea field, the given value will be the field title
+         * @param {String} [options.select] tell the modal to use a select box, the given value will be the field title
+         * @param {Object} [options.default=''] default value of the field
+         * @param {Function} [options.init] optional function that takes the `field` (enhanced with a fillWith() method) and the `dialog` as parameters [can return a deferred]
+         */
+        if (typeof options === 'string') {
+            options = {
+                text: options
+            };
+        }
+        if (_.isUndefined(_qweb)) {
+            _qweb = 'website.prompt';
+        }
+        options = _.extend({
+            window_title: '',
+            field_name: '',
+            'default': '', // dict notation for IE<9
+            init: function () {},
+        }, options || {});
 
-/* ----------------------------------------------------
-   Widgets
-   ---------------------------------------------------- */ 
+        var type = _.intersection(Object.keys(options), ['input', 'textarea', 'select']);
+        type = type.length ? type[0] : 'input';
+        options.field_type = type;
+        options.field_name = options.field_name || options[type];
 
-var prompt = function (options, _qweb) {
-    /**
-     * A bootstrapped version of prompt() albeit asynchronous
-     * This was built to quickly prompt the user with a single field.
-     * For anything more complex, please use editor.Dialog class
-     *
-     * Usage Ex:
-     *
-     * website.prompt("What... is your quest ?").then(function (answer) {
-     *     arthur.reply(answer || "To seek the Holy Grail.");
-     * });
-     *
-     * website.prompt({
-     *     select: "Please choose your destiny",
-     *     init: function() {
-     *         return [ [0, "Sub-Zero"], [1, "Robo-Ky"] ];
-     *     }
-     * }).then(function (answer) {
-     *     mame_station.loadCharacter(answer);
-     * });
-     *
-     * @param {Object|String} options A set of options used to configure the prompt or the text field name if string
-     * @param {String} [options.window_title=''] title of the prompt modal
-     * @param {String} [options.input] tell the modal to use an input text field, the given value will be the field title
-     * @param {String} [options.textarea] tell the modal to use a textarea field, the given value will be the field title
-     * @param {String} [options.select] tell the modal to use a select box, the given value will be the field title
-     * @param {Object} [options.default=''] default value of the field
-     * @param {Function} [options.init] optional function that takes the `field` (enhanced with a fillWith() method) and the `dialog` as parameters [can return a deferred]
-     */
-    if (typeof options === 'string') {
-        options = {
-            text: options
+        var def = $.Deferred();
+        var dialog = $(qweb.render(_qweb, options)).appendTo("body");
+        options.$dialog = dialog;
+        var field = dialog.find(options.field_type).first();
+        field.val(options['default']); // dict notation for IE<9
+        field.fillWith = function (data) {
+            if (field.is('select')) {
+                var select = field[0];
+                data.forEach(function (item) {
+                    select.options[select.options.length] = new Option(item[1], item[0]);
+                });
+            } else {
+                field.val(data);
+            }
         };
-    }
-    if (_.isUndefined(_qweb)) {
-        _qweb = 'website.prompt';
-    }
-    options = _.extend({
-        window_title: '',
-        field_name: '',
-        'default': '', // dict notation for IE<9
-        init: function() {},
-    }, options || {});
-
-    var type = _.intersection(Object.keys(options), ['input', 'textarea', 'select']);
-    type = type.length ? type[0] : 'input';
-    options.field_type = type;
-    options.field_name = options.field_name || options[type];
-
-    var def = $.Deferred();
-    var dialog = $(qweb.render(_qweb, options)).appendTo("body");
-    options.$dialog = dialog;
-    var field = dialog.find(options.field_type).first();
-    field.val(options['default']); // dict notation for IE<9
-    field.fillWith = function (data) {
-        if (field.is('select')) {
-            var select = field[0];
-            data.forEach(function (item) {
-                select.options[select.options.length] = new Option(item[1], item[0]);
+        var init = options.init(field, dialog);
+        $.when(init).then(function (fill) {
+            if (fill) {
+                field.fillWith(fill);
+            }
+            dialog.modal('show');
+            field.focus();
+            dialog.on('click', '.btn-primary', function () {
+                    var backdrop = $('.modal-backdrop');
+                def.resolve(field.val(), field, dialog);
+                dialog.modal('hide').remove();
+                    backdrop.remove();
             });
-        } else {
-            field.val(data);
-        }
-    };
-    var init = options.init(field, dialog);
-    $.when(init).then(function (fill) {
-        if (fill) {
-            field.fillWith(fill);
-        }
-        dialog.modal('show');
-        field.focus();
-        dialog.on('click', '.btn-primary', function () {
+        });
+        dialog.on('hidden.bs.modal', function () {
                 var backdrop = $('.modal-backdrop');
-            def.resolve(field.val(), field, dialog);
-            dialog.modal('hide').remove();
+            def.reject();
+            dialog.remove();
                 backdrop.remove();
         });
-    });
-    dialog.on('hidden.bs.modal', function () {
-            var backdrop = $('.modal-backdrop');
-        def.reject();
-        dialog.remove();
-            backdrop.remove();
-    });
-    if (field.is('input[type="text"], select')) {
-        field.keypress(function (e) {
-            if (e.which == 13) {
-                e.preventDefault();
-                dialog.find('.btn-primary').trigger('click');
-            }
-        });
-    }
-    return def;
-};
-
-var error = function(data, url) {
-    var $error = $(qweb.render('website.error_dialog', {
-        'title': data.data ? data.data.arguments[0] : "",
-        'message': data.data ? data.data.arguments[1] : data.statusText,
-        'backend_url': url
-    }));
-    $error.appendTo("body");
-    $error.modal('show');
-};
+        if (field.is('input[type="text"], select')) {
+            field.keypress(function (e) {
+                if (e.which == 13) {
+                    e.preventDefault();
+                    dialog.find('.btn-primary').trigger('click');
+                }
+            });
+        }
+        return def;
+    };
 
-function _add_input(form, name, value) {
-    var param = document.createElement('input');
-    param.setAttribute('type', 'hidden');
-    param.setAttribute('name', name);
-    param.setAttribute('value', value);
-    form.appendChild(param);
-}
-var form = function (url, method, params) {
-    var form = document.createElement('form');
-    form.setAttribute('action', url);
-    form.setAttribute('method', method);
+    var error = function (title, message, url) {
+        return new Dialog(null, {
+            title: data.data ? data.data.arguments[0] : "",
+            $content: $(qweb.render('website.error_dialog', {
+                message: data.data ? data.data.arguments[1] : data.statusText,
+                backend_url: url,
+            })),
+        }).open();
+    };
 
-    if (core.csrf_token) {
-        _add_input(form, 'csrf_token', core.csrf_token);
+    function _add_input(form, name, value) {
+        var param = document.createElement('input');
+        param.setAttribute('type', 'hidden');
+        param.setAttribute('name', name);
+        param.setAttribute('value', value);
+        form.appendChild(param);
     }
-    _.each(params, function (v, k) {
-        _add_input(form, k, v);
-    });
-    document.body.appendChild(form);
-    form.submit();
-};
-
+    var form = function (url, method, params) {
+        var form = document.createElement('form');
+        form.setAttribute('action', url);
+        form.setAttribute('method', method);
 
-ajax.loadXML('/website/static/src/xml/website.xml', qweb);
-ajax.loadXML('/web/static/src/xml/base_common.xml', qweb);
+        if (core.csrf_token) {
+            _add_input(form, 'csrf_token', core.csrf_token);
+        }
+        _.each(params, function (v, k) {
+            _add_input(form, k, v);
+        });
+        document.body.appendChild(form);
+        form.submit();
+    };
 
-/**
- * Cancel the auto run of Tour (test) and launch the tour after tob bar all bind events
- */
- 
-base.ready().then(function () {
-    data.topBar = new TopBar();
-    data.topBar.attachTo($("#website_main_menu_navbar"));
-});
 
-/**
- * Returns a deferred resolved when the templates are loaded
- * and the Widgets can be instanciated.
- */
+    ajax.loadXML('/website/static/src/xml/website.xml', qweb);
+    ajax.loadXML('/web/static/src/xml/base_common.xml', qweb);
+    
+    base.ready().then(function () {
+        data.topBar = new TopBar();
+        return data.topBar.attachTo($("#oe_main_menu_navbar"));
+    });
 
     /* ----- PUBLISHING STUFF ---- */
     $(document).on('click', '.js_publish_management .js_publish_btn', function () {
@@ -194,22 +183,22 @@ base.ready().then(function () {
                 $data.toggleClass("css_unpublished css_published");
                 $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off');
             }).fail(function (err, data) {
-                error(data, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id'));
+                error(data.data ? data.data.arguments[0] : "", data.data ? data.data.arguments[1] : data.statusText, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id'));
             });
         });
 
         if (!$('.js_change_lang').length) {
             // in case template is not up to date...
             var links = $('ul.js_language_selector li a:not([data-oe-id])');
-            var m = $(_.min(links, function(l) { return $(l).attr('href').length; })).attr('href');
-            links.each(function() {
+            var m = $(_.min(links, function (l) { return $(l).attr('href').length; })).attr('href');
+            links.each(function () {
                 var t = $(this).attr('href');
                 var l = (t === m) ? "default" : t.split('/')[1];
                 $(this).data('lang', l).addClass('js_change_lang');
             });
         }
 
-        $(document).on('click', '.js_change_lang', function(e) {
+        $(document).on('click', '.js_change_lang', function (e) {
             e.preventDefault();
 
             var self = $(this);
@@ -227,54 +216,65 @@ base.ready().then(function () {
         init_kanban(this);
     });
 
-    $('.js_website_submit_form').on('submit', function() {
+    $('.js_website_submit_form').on('submit', function () {
         var $buttons = $(this).find('button[type="submit"], a.a-submit');
-        _.each($buttons, function(btn) {
+        _.each($buttons, function (btn) {
             $(btn).attr('data-loading-text', '<i class="fa fa-spinner fa-spin"></i> ' + $(btn).text()).button('loading');
         });
     });
 
-    setTimeout(function () {
+    _.defer(function () {
         if (window.location.hash.indexOf("scrollTop=") > -1) {
             window.document.body.scrollTop = +location.hash.match(/scrollTop=([0-9]+)/)[1];
         }
-    },0);
-
-// display image thumbnail
-$(".o_image[data-mimetype^='image']").each(function () {
-    var $img = $(this);
-    if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
-        $img.css('background-image', "url('" + $img.data('src') + "')");
-    }
-});
+    });
 
-/**
- * Object who contains all method and bind for the top bar, the template is create server side.
- */
+    // display image thumbnail
+    $(".o_image[data-mimetype^='image']").each(function () {
+        var $img = $(this);
+        if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
+            $img.css('background-image', "url('" + $img.data('src') + "')");
+        }
+    });
 
-var TopBar = Widget.extend({
-    start: function () {
-        var $collapse = this.$('#oe_applications ul.dropdown-menu').clone()
-                .attr("id", "oe_applications_collapse")
-                .attr("class", "nav navbar-nav navbar-left navbar-collapse collapse");
-        this.$('#oe_applications').before($collapse);
-        $collapse.wrap('<div class="visible-xs"/>');
-        this.$('[data-target="#oe_applications"]').attr("data-target", "#oe_applications_collapse");
+    /**
+     * Object who contains all method and bind for the top bar, the template is create server side.
+     */
+    var TopBar = Widget.extend({
+        start: function () {
+            var $collapse = this.$('#oe_applications ul.dropdown-menu').clone()
+                    .attr("id", "oe_applications_collapse")
+                    .attr("class", "nav navbar-nav navbar-left navbar-collapse collapse");
+            this.$('#oe_applications').before($collapse);
+            $collapse.wrap('<div class="visible-xs"/>');
+            this.$('[data-target="#oe_applications"]').attr("data-target", "#oe_applications_collapse");
 
-        return this._super();
-    }
-});
+            var self = this;
+            this.$el.on('mouseover', '> ul > li.dropdown:not(.open)', function (e) {
+                var $opened = self.$('> ul > li.dropdown.open');
+                if($opened.length) {
+                    $opened.removeClass('open');
+                    $(e.currentTarget).find('.dropdown-toggle').mousedown().focus().mouseup().click();
+                }
+            });
 
+            this.$el.on('click', '.o_mobile_menu_toggle', function (ev) {
+                self.$el.parent().toggleClass('o_mobile_menu_opened');
+            });
 
-var data = {
-    prompt: prompt,
-    form: form,
-    TopBar: TopBar,
-    ready: function () {
-        console.warn("website.ready is deprecated: Please use require('web_editor.base').ready()");
-        return base.ready();
-    }
-};
-return data;
+            return this._super.apply(this, arguments);
+        }
+    });
 
+    var data = {
+        prompt: prompt,
+        error: error,
+        form: form,
+        TopBar: TopBar,
+        ready: function () {
+            console.warn("website.ready is deprecated: Please use require('web_editor.base').ready()");
+            return base.ready();
+        },
+    };
+    return data;
 });
diff --git a/addons/website/static/src/js/website.mobile.js b/addons/website/static/src/js/website.mobile.js
index d784ea3fafc..1392f0981ad 100644
--- a/addons/website/static/src/js/website.mobile.js
+++ b/addons/website/static/src/js/website.mobile.js
@@ -1,39 +1,49 @@
 odoo.define('website.mobile', function (require) {
 'use strict';
 
-var core = require('web.core');
 var ajax = require('web.ajax');
+var core = require('web.core');
+var Dialog = require('web.Dialog');
 var Widget = require('web.Widget');
 var base = require('web_editor.base');
 var website = require('website.website');
 
-var qweb = core.qweb;
+var _t = core._t;
 
-var MobilePreview = Widget.extend({
+var MobilePreviewDialog = Dialog.extend({
     template: 'website.mobile_preview',
-    events: {
-        'hidden.bs.modal': 'destroy'
-    },
-    start: function() {
-        if (!window.location.origin) { // fix for ie9
-            window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
-        }
-        document.getElementById("mobile-viewport").src = window.location.origin + window.location.pathname + window.location.search + "#mobile-preview";
-        this.$el.modal();
+
+    init: function () {
+        this._super.apply(this, arguments);
+        this.mobile_src = $.param.querystring(window.location.href, 'mobilepreview');
     },
-    destroy: function() {
-        $('.modal-backdrop').remove();
-        this._super();
+
+    start: function () {
+        var self = this;
+        this.$modal.addClass('oe_mobile_preview');
+        this.$modal.on('click', '.modal-header', function () {
+            self.$el.toggleClass('o_invert_orientation');
+        });
+        this.$iframe = this.$('iframe');
+        this.$iframe.on('load', function (e) {
+            self.$iframe.contents().find('body').removeAttr('user');
+            self.$iframe.contents().find('#oe_main_menu_navbar, #o_website_add_page_modal').remove();
+        });
+
+        return this._super.apply(this, arguments);
     },
 });
 
 website.TopBar.include({
     start: function () {
-        this.$el.on('click', 'a[data-action=show-mobile-preview]', function() {
-            new MobilePreview().appendTo($(document.body));
+        var self = this;
+        this.$el.on('click', 'a[data-action=show-mobile-preview]', function () {
+            new MobilePreviewDialog(self, {
+                title: _t('Mobile preview') + " <span class='fa fa-repeat'/>",
+            }).open();
         });
         return this._super();
-    }
+    },
 });
 
 });
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index d2b7683645f..da7a4149862 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -4,6 +4,7 @@ odoo.define('website.seo', function (require) {
 var core = require('web.core');
 var ajax = require('web.ajax');
 var Class = require('web.Class');
+var Dialog = require('web.Dialog');
 var mixins = require('web.mixins');
 var Model = require('web.Model');
 var Widget = require('web.Widget');
@@ -84,11 +85,11 @@ var SuggestionList = Widget.extend({
         ajax.jsonRpc('/website/seo_suggest', 'call', {
             'keywords': self.root,
             'lang': language,
-        }).then(function(keyword_list){
+        }).then(function (keyword_list) {
             self.addSuggestions(JSON.parse(keyword_list));
         });
     },
-    addSuggestions: function(keywords) {
+    addSuggestions: function (keywords) {
         var self = this;
         self.$el.empty();
         // TODO Improve algorithm + Ajust based on custom user keywords
@@ -222,7 +223,6 @@ var Image = Widget.extend({
     },
 });
 
-
 var ImageList = Widget.extend({
     init: function (parent, options) {
         this.htmlPage = options.page;
@@ -339,15 +339,13 @@ var Tip = Widget.extend({
     },
 });
 
-var Configurator = Widget.extend({
+var Configurator = Dialog.extend({
     template: 'website.seo_configuration',
     events: {
         'keyup input[name=seo_page_keywords]': 'confirmKeyword',
         'keyup input[name=seo_page_title]': 'titleChanged',
         'keyup textarea[name=seo_page_description]': 'descriptionChanged',
         'click button[data-action=add]': 'addKeyword',
-        'click button[data-action=update]': 'update',
-        'hidden.bs.modal': 'destroy',
     },
     canEditTitle: false,
     canEditDescription: false,
@@ -355,44 +353,51 @@ var Configurator = Widget.extend({
     canEditLanguage: false,
     maxTitleSize: 65,
     maxDescriptionSize: 150,
+
+    init: function (parent, options) {
+        options = options || {};
+        _.defaults(options, {
+            title: _t('Promote This Page'),
+            subtitle: _t('Get this page efficiently referenced in Google to attract more visitors.'),
+            buttons: [
+                {text: _t('Save'), classes: 'btn-primary', click: this.update},
+                {text: _t('Discard'), close: true},
+            ],
+        });
+
+        this._super(parent, options);
+    },
     start: function () {
         var self = this;
-        var $modal = self.$el;
-        var htmlPage = this.htmlPage = new HtmlPage();
-        $modal.find('.js_seo_page_url').text(htmlPage.url());
-        $modal.find('input[name=seo_page_title]').val(htmlPage.title());
-        $modal.find('textarea[name=seo_page_description]').val(htmlPage.description());
-        // self.suggestImprovements();
-        // self.imageList = new ImageList(self, { page: htmlPage });
-        // if (htmlPage.images().length === 0) {
-        //     $modal.find('.js_image_section').remove();
-        // } else {
-        //     self.imageList.appendTo($modal.find('.js_seo_image_list'));
-        // }
-        self.keywordList = new KeywordList(self, { page: htmlPage });
-        self.keywordList.on('list-full', self, function () {
-            $modal.find('input[name=seo_page_keywords]')
-                .attr('readonly', "readonly")
-                .attr('placeholder', "Remove a keyword first");
-            $modal.find('button[data-action=add]')
-                .prop('disabled', true).addClass('disabled');
+
+        this.$modal.addClass('oe_seo_configuration js_seo_configuration');
+
+        this.htmlPage = new HtmlPage();
+        this.$('.js_seo_page_url').text(this.htmlPage.url());
+        this.$('input[name=seo_page_title]').val(this.htmlPage.title());
+        this.$('textarea[name=seo_page_description]').val(this.htmlPage.description());
+
+        this.keywordList = new KeywordList(self, { page: this.htmlPage });
+        this.keywordList.on('list-full', self, function () {
+            self.$('input[name=seo_page_keywords]').attr({
+                readonly: "readonly",
+                placeholder: "Remove a keyword first"
+            });
+            self.$('button[data-action=add]').prop('disabled', true).addClass('disabled');
         });
-        self.keywordList.on('list-not-full', self, function () {
-            $modal.find('input[name=seo_page_keywords]')
-                .removeAttr('readonly').attr('placeholder', "");
-            $modal.find('button[data-action=add]')
-                .prop('disabled', false).removeClass('disabled');
+        this.keywordList.on('list-not-full', self, function () {
+            self.$('input[name=seo_page_keywords]').removeAttr('readonly').attr('placeholder', "");
+            self.$('button[data-action=add]').prop('disabled', false).removeClass('disabled');
         });
-        self.keywordList.on('selected', self, function (word, language) {
+        this.keywordList.on('selected', self, function (word, language) {
             self.keywordList.add(word, language);
         });
-        self.keywordList.appendTo($modal.find('.js_seo_keywords_list'));
-        self.disableUnsavableFields();
-        self.renderPreview();
-        $modal.modal();
-        self.getLanguages();
+        this.keywordList.appendTo(this.$('.js_seo_keywords_list'));
+        this.disableUnsavableFields();
+        this.renderPreview();
+        this.getLanguages();
     },
-    getLanguages: function(){
+    getLanguages: function () {
         var self = this;
         ajax.jsonRpc('/web/dataset/call_kw', 'call', {
             model: 'website',
@@ -402,7 +407,7 @@ var Configurator = Widget.extend({
                 ids: [base.get_context().website_id],
                 context: base.get_context()
             }
-        }).then( function(data) {
+        }).then( function (data) {
             self.$('#language-box').html(core.qweb.render('Configurator.language_promote', {
                 'language': data,
                 'def_lang': base.get_context().lang
@@ -411,47 +416,34 @@ var Configurator = Widget.extend({
     },
     disableUnsavableFields: function () {
         var self = this;
-        var $modal = self.$el;
-        self.loadMetaData().then(function (data) {
+        this.loadMetaData().then(function (data) {
             self.canEditTitle = data && ('website_meta_title' in data);
             self.canEditDescription = data && ('website_meta_description' in data);
             self.canEditKeywords = data && ('website_meta_keywords' in data);
             if (!self.canEditTitle) {
-                $modal.find('input[name=seo_page_title]').attr('disabled', true);
+                self.$('input[name=seo_page_title]').attr('disabled', true);
             }
             if (!self.canEditDescription) {
-                $modal.find('textarea[name=seo_page_description]').attr('disabled', true);
+                self.$('textarea[name=seo_page_description]').attr('disabled', true);
             }
             if (!self.canEditTitle && !self.canEditDescription && !self.canEditKeywords) {
-                $modal.find('button[data-action=update]').attr('disabled', true);
+                self.$footer.find('button[data-action=update]').attr('disabled', true);
             }
         });
     },
     suggestImprovements: function () {
-        var tips = [];
         var self = this;
+        var tips = [];
+        _.each(tips, function (tip) {
+            displayTip(tip.message, tip.type);
+        });
+
         function displayTip(message, type) {
             new Tip(self, {
                message: message,
                type: type,
             }).appendTo(self.$('.js_seo_tips'));
         }
-        var htmlPage = this.htmlPage;
-
-        // Add message suggestions at the top of the dialog
-        // if necessary....
-        // if (htmlPage.headers('h1').length === 0) {
-        //     tips.push({
-        //         type: 'warning',
-        //         message: "This page seems to be missing a title.",
-        //     });
-        // }
-
-        if (tips.length > 0) {
-            _.each(tips, function (tip) {
-                displayTip(tip.message, tip.type);
-            });
-        }
     },
     confirmKeyword: function (e) {
         if (e.keyCode == 13) {
@@ -469,17 +461,17 @@ var Configurator = Widget.extend({
     update: function () {
         var self = this;
         var data = {};
-        if (self.canEditTitle) {
-            data.website_meta_title = self.htmlPage.title();
+        if (this.canEditTitle) {
+            data.website_meta_title = this.htmlPage.title();
         }
-        if (self.canEditDescription) {
-            data.website_meta_description = self.htmlPage.description();
+        if (this.canEditDescription) {
+            data.website_meta_description = this.htmlPage.description();
         }
-        if (self.canEditKeywords) {
-            data.website_meta_keywords = self.keywordList.keywords().join(", ");
+        if (this.canEditKeywords) {
+            data.website_meta_keywords = this.keywordList.keywords().join(", ");
         }
-        self.saveMetaData(data).then(function () {
-           self.$el.modal('hide');
+        this.saveMetaData(data).then(function () {
+           self.close();
         });
     },
     getMainObject: function () {
@@ -495,7 +487,6 @@ var Configurator = Widget.extend({
         }
     },
     loadMetaData: function () {
-        var self = this;
         var obj = this.getMainObject();
         var def = $.Deferred();
         if (!obj) {
@@ -527,19 +518,19 @@ var Configurator = Widget.extend({
     },
     titleChanged: function () {
         var self = this;
-        setTimeout(function () {
+        _.defer(function () {
             var title = self.$('input[name=seo_page_title]').val();
             self.htmlPage.changeTitle(title);
             self.renderPreview();
-        }, 0);
+        });
     },
     descriptionChanged: function () {
         var self = this;
-        setTimeout(function () {
+        _.defer(function () {
             var description = self.$('textarea[name=seo_page_description]').val();
             self.htmlPage.changeDescription(description);
             self.renderPreview();
-        }, 0);
+        });
     },
     renderPreview: function () {
         var preview = new Preview(this, {
@@ -553,14 +544,14 @@ var Configurator = Widget.extend({
     },
     destroy: function () {
         this.htmlPage.changeKeywords(this.keywordList.keywords());
-        this._super();
+        this._super.apply(this, arguments);
     },
 });
 
 website.TopBar.include({
     start: function () {
-        this.$el.on('click', 'a[data-action=promote-current-page]', function() {
-            new Configurator(this).appendTo($(document.body));
+        this.$el.on('click', 'a[data-action=promote-current-page]', function () {
+            new Configurator(this).open();
         });
         return this._super();
     }
diff --git a/addons/website/static/src/js/website.share.js b/addons/website/static/src/js/website.share.js
index daeeb757d93..4de4dd65117 100644
--- a/addons/website/static/src/js/website.share.js
+++ b/addons/website/static/src/js/website.share.js
@@ -59,7 +59,7 @@ var SocialShare = Widget.extend({
             }, 200);
         });
     },
-    renderSocial: function(social) {
+    renderSocial: function (social) {
         var url = document.URL.split(/[?#]/)[0];  // get current url without query string
         var title = document.title.split(" | ")[0];  // get the page title without the company name
         var hashtags = ' #'+ document.title.split(" | ")[1].replace(' ','') + ' ' + this.hashtags;  // company name without spaces (for hashtag)
@@ -76,8 +76,8 @@ var SocialShare = Widget.extend({
 });
 
 // Initialize all social_share links when ready
-base.ready().done(function() {
-    $('.oe_social_share').mouseenter(function() {
+base.ready().done(function () {
+    $('.oe_social_share').mouseenter(function () {
         new SocialShare($(this));
     });
 });
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 15311cb8dc8..87b7e6dce46 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -8,8 +8,6 @@ var animation = require('web_editor.snippets.animation');
 
 var qweb = core.qweb;
 
-/*-------------------------------------------------------------------------*/
-
 function load_called_template () {
     var ids_or_xml_ids = _.uniq($("[data-oe-call]").map(function () {return $(this).data('oe-call');}).get());
     if (ids_or_xml_ids.length) {
@@ -26,50 +24,6 @@ function load_called_template () {
     }
 }
 
-
-// Ripple animation
-animation.registry.ripple = animation.Class.extend({
-  selector: ".wb_dropdown-toggle, #oe_systray .dropdown-toggle",
-
-  start: function(){
-
-    var timeout,
-        btn = this.$target;
-
-    btn
-    .css({ position: 'relative', overflow: 'hidden'})
-    .bind('mousedown', function(e) {
-      var ripple;
-      if (btn.find('.ripple').length === 0) {
-        ripple = $('<span class="ripple"/>');
-        btn.prepend(ripple);
-      } else {
-        ripple = btn.find('.ripple');
-      }
-      ripple.removeClass('animate');
-
-      if (!ripple.height() && !ripple.width()) {
-        var diameter = Math.max(btn.outerWidth(), btn.outerHeight());
-        ripple.css({ height: diameter, width: diameter });
-      }
-
-      var x = e.pageX - btn.offset().left - ripple.width() / 2;
-      var y = e.pageY - btn.offset().top - ripple.height() / 2;
-
-      ripple
-        .css({ top: y + 'px',left: x + 'px'})
-        .addClass('animate');
-
-      setTimeout(function() {
-        //ripple.removeClass('animate');
-      }, 700);
-    });
-  },
-}),
-
-
-/*-------------------------------------------------------------------------*/
-
 base.ready().then(function () {
     load_called_template();
     if ($(".o_gallery:not(.oe_slideshow)").size()) {
@@ -78,8 +32,6 @@ base.ready().then(function () {
     }
 });
 
-/*-------------------------------------------------------------------------*/
-
 animation.registry.slider = animation.Class.extend({
     selector: ".carousel",
     start: function () {
@@ -199,11 +151,11 @@ inside a gallery
 -------------------------------------------------------------------------*/
 animation.registry.gallery = animation.Class.extend({
     selector: ".o_gallery:not(.o_slideshow)",
-    start: function() {
+    start: function () {
         var self = this;
         this.$el.on("click", "img", this.click_handler);
     },
-    click_handler : function(event) {
+    click_handler : function (event) {
         var self = this;
         var $cur = $(event.currentTarget);
         var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
@@ -225,7 +177,7 @@ animation.registry.gallery = animation.Class.extend({
                     height : Math.round( window.innerHeight *  size)
             };
 
-            $images.each(function() {
+            $images.each(function () {
                 urls.push($(this).attr("src"));
             });
             var $img = ($cur.is("img") === true) ? $cur : $cur.closest("img");
@@ -244,7 +196,7 @@ animation.registry.gallery = animation.Class.extend({
                 keyboard : true,
                 backdrop : true
             });
-            $modal.on('hidden.bs.modal', function() {
+            $modal.on('hidden.bs.modal', function () {
                 $(this).hide();
                 $(this).siblings().filter(".modal-backdrop").remove(); // bootstrap leaves a modal-backdrop
                 $(this).remove();
@@ -257,9 +209,10 @@ animation.registry.gallery = animation.Class.extend({
         }
     } // click_handler
 });
+
 animation.registry.gallery_slider = animation.Class.extend({
     selector: ".o_slideshow",
-    start: function() {
+    start: function () {
         var $carousel = this.$target.is(".carousel") ? this.$target : this.$target.find(".carousel");
         var self = this;
         var $indicator = $carousel.find('.carousel-indicators');
@@ -271,7 +224,7 @@ animation.registry.gallery_slider = animation.Class.extend({
         var nb = Math.ceil($lis.length / 10);
 
          // fix bootstrap use index insead of data-slide-to
-        $carousel.on('slide.bs.carousel', function() {
+        $carousel.on('slide.bs.carousel', function () {
             setTimeout(function () {
                 var $item = $carousel.find('.carousel-inner .prev, .carousel-inner .next');
                 var index = $item.index();
@@ -298,7 +251,7 @@ animation.registry.gallery_slider = animation.Class.extend({
         });
         hide();
 
-        $carousel.on('slid.bs.carousel', function() {
+        $carousel.on('slid.bs.carousel', function () {
             var index = ($lis.filter('.active').index() || 1) -1;
             page = Math.floor(index / 10);
             hide();
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 0da262f145e..bf6213aafb5 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -6,16 +6,14 @@ var animation = require('web_editor.snippets.animation');
 var options = require('web_editor.snippets.options');
 var snippet_editor = require('web_editor.snippet.editor');
 
-
 snippet_editor.Class.include({
     _get_snippet_url: function () {
         return '/website/snippets';
     }
 });
 
-
 var preventParentEmpty = {
-    hide_remove_button: function() {
+    hide_remove_button: function () {
         this.$overlay.find('.oe_snippet_remove, .oe_snippet_move').toggleClass("hidden", !this.$target.siblings().length);
     },
     on_focus : function () {
@@ -32,9 +30,8 @@ var preventParentEmpty = {
     },
 };
 
-
 options.registry.slider = options.Class.extend({
-    drop_and_build_snippet: function() {
+    drop_and_build_snippet: function () {
         this.id = "myCarousel" + new Date().getTime();
         this.$target.attr("id", this.id);
         this.$target.find("[data-slide]").attr("data-cke-saved-href", "#" + this.id);
@@ -96,14 +93,14 @@ options.registry.slider = options.Class.extend({
             });
         }
         else {
-            var s_class = selection.attr('class').split(' ').filter(function(o) { return _.str.startsWith(o, "s_") })[0]
+            var s_class = selection.attr('class').split(' ').filter(function (o) { return _.str.startsWith(o, "s_") })[0]
             selection = $snippets.find("." + s_class);
         }
         var $clone = $(selection).find('.item:first').clone();
 
         // insert
         $clone.removeClass('active').insertAfter($active);
-        setTimeout(function() {
+        setTimeout(function () {
             self.$target.carousel().carousel(++index);
             self.rebind_event();
         },0);
@@ -140,7 +137,7 @@ options.registry.slider = options.Class.extend({
             this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden");
         }
     },
-    interval : function(type, value) {
+    interval : function (type, value) {
         this.$target.attr("data-interval", value);
     },
     set_active: function () {
@@ -168,7 +165,7 @@ options.registry.carousel = options.registry.slider.extend({
         this._super();
 
         // set background and prepare to clean for save
-        var add_class = function (c){
+        var add_class = function (c) {
             if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c;
             return self._class || "";
         };
@@ -223,7 +220,7 @@ options.registry.marginAndResize = options.Class.extend({
         if (resize_values.w) this.$overlay.find(".oe_handle.w").removeClass("readonly");
         if (resize_values.size) this.$overlay.find(".oe_handle.size").removeClass("readonly");
 
-        this.$overlay.find(".oe_handle:not(.size), .oe_handle.size .size").on('mousedown', function (event){
+        this.$overlay.find(".oe_handle:not(.size), .oe_handle.size .size").on('mousedown', function (event) {
             event.preventDefault();
 
             var $handle = $(this);
@@ -284,7 +281,7 @@ options.registry.marginAndResize = options.Class.extend({
             var $body = $(document.body);
             $body.addClass(cursor);
 
-            var body_mousemove = function (event){
+            var body_mousemove = function (event) {
                 event.preventDefault();
                 if (compass === 'size') {
                     var dy = event.pageY-offset;
@@ -320,7 +317,7 @@ options.registry.marginAndResize = options.Class.extend({
                 }
             };
 
-            var body_mouseup = function(){
+            var body_mouseup = function () {
                 $body.unbind('mousemove', body_mousemove);
                 $body.unbind('mouseup', body_mouseup);
                 $body.removeClass(cursor);
@@ -335,7 +332,7 @@ options.registry.marginAndResize = options.Class.extend({
             $body.mousemove(body_mousemove);
             $body.mouseup(body_mouseup);
         });
-        this.$overlay.find(".oe_handle.size .auto_size").on('click', function (event){
+        this.$overlay.find(".oe_handle.size .auto_size").on('click', function (event) {
             self.$target.css("height", "");
             self.$target.css("overflow", "");
             self.buildingBlock.parent.rte.historyRecordUndo(self.$target, 'resize_Y');
@@ -419,7 +416,7 @@ options.registry["margin-x"] = options.registry.marginAndResize.extend(preventPa
 
         return this.grid;
     },
-    _drag_and_drop_after_insert_dropzone: function(){
+    _drag_and_drop_after_insert_dropzone: function () {
         var self = this;
         $(".row:has(> .oe_drop_zone)").each(function () {
             var $row = $(this);
@@ -729,7 +726,9 @@ options.registry.collapse = options.Class.extend(preventParentEmpty).extend({
         this.create_ids(this.$target);
     },
     on_clone: function ($clone) {
-        this._super();
+        this._super.apply(this, arguments);
+        $clone.find('[data-toggle="collapse"]').removeAttr('data-target').removeData('target');
+        $clone.find('.panel-collapse').removeAttr('id');
         this.create_ids($clone);
     },
     on_move: function () {
diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js
index 74f20e7a314..7bcc8f34c4d 100644
--- a/addons/website/static/src/js/website.snippets.gallery.js
+++ b/addons/website/static/src/js/website.snippets.gallery.js
@@ -24,7 +24,7 @@ ajax.loadXML('/website/static/src/xml/website.gallery.xml', qweb);
   Look at /website/views/snippets.xml for the available options
   ------------------------------------------------------------------------*/
 options.registry.gallery = options.Class.extend({
-    start  : function() {
+    start  : function () {
         this._super();
         this.bind_change();
         var index = Math.max(_.map(this.$target.find("img").get(), function (img) { return img.dataset.index | 0; }));
@@ -37,27 +37,27 @@ options.registry.gallery = options.Class.extend({
         this._temp_mode = this.$el.find("data-mode").data("mode");
         this._temp_col = this.$el.find("data-columns").data("columns");
     },
-    drop_and_build_snippet: function() {
+    drop_and_build_snippet: function () {
         var uuid = new Date().getTime();
         this.$target.find('.carousel').attr('id', 'slideshow_' + uuid);
         this.$target.find('[data-target]').attr('data-target', '#slideshow_' + uuid);
     },
-    styling  : function(type, value) {
+    styling  : function (type, value) {
         var classes = this.$el.find('li[data-styling]').map(function () {
             return $(this).data('styling');
         }).get().join(' ');
         this.$target.find("img").removeClass(classes).addClass(value);
     },
-    interval : function(type, value) {
+    interval : function (type, value) {
         this.$target.find('.carousel:first').attr("data-interval", value);
     },
-    reapply : function() {
+    reapply : function () {
         var self    = this,
             modes   = [ 'o_nomode', 'o_grid', 'o_masonry', 'o_slideshow' ],
             classes = this.$target.attr("class").split(/\s+/);
         this.cancel_masonry();
 
-        modes.forEach(function(mode) {
+        modes.forEach(function (mode) {
             if (classes.indexOf(mode) != -1) {
                 self.mode("reapply", mode.slice(2, Infinity));
                 return;
@@ -98,7 +98,7 @@ options.registry.gallery = options.Class.extend({
         $container.empty().append($content);
         return $container;
     },
-    nomode : function(type) {
+    nomode : function (type) {
         if (type !== "reapply" && !this.$target.attr('class').match(/o_grid|o_masonry|o_slideshow/)) return;
 
         var self = this,
@@ -126,7 +126,7 @@ options.registry.gallery = options.Class.extend({
         $(this.masonry_imgs).appendTo(this.$target);
         this.masonry_imgs = [];
     },
-    masonry : function(type) {
+    masonry : function (type) {
         var self     = this,
             imgs    = this.get_imgs(),
             columns  = this.get_columns(),
@@ -160,7 +160,7 @@ options.registry.gallery = options.Class.extend({
         if (imgs.length) add();
         this.$target.css("height", "");
     },
-    grid : function(type) {
+    grid : function (type) {
         if (type !== "reapply" && this.$target.hasClass('o_grid')) return;
 
         var self     = this,
@@ -171,7 +171,7 @@ options.registry.gallery = options.Class.extend({
             colClass = "col-md-"+(12/columns),
             $container = this.replace($row);
 
-        $imgs.each(function(index) { // 0 based index
+        $imgs.each(function (index) { // 0 based index
             $img = $(this);
             $col = $img.wrap('<div>').parent();
             self.img_preserve_styles($img);
@@ -190,7 +190,7 @@ options.registry.gallery = options.Class.extend({
 
         var self = this,
             $imgs    = $(this.get_imgs()),
-            urls = $imgs.map(function() { return $(this).attr("src"); } ).get();
+            urls = $imgs.map(function () { return $(this).attr("src"); } ).get();
         var params = {
                 srcs : urls,
                 index: 0,
@@ -215,14 +215,14 @@ options.registry.gallery = options.Class.extend({
             this.$target.data("snippet-view").start(true);
         }
     },
-    columns : function(type, value) {
+    columns : function (type, value) {
         this.$target.attr("data-columns", value);
         if (this._temp_col !== value) {
             this._temp_col = value;
             this.reapply();
         }
     },
-    images_add : function(type) {
+    images_add : function (type) {
         if(type !== "click") return;
         var self = this;
         var $container = this.$target.find(".container:first");
@@ -243,16 +243,16 @@ options.registry.gallery = options.Class.extend({
             },0);
         });
     },
-    images_rm   : function(type) {
+    images_rm   : function (type) {
         if(type !== "click") return;
         this.replace($('<div class="alert alert-info css_editable_mode_display"/>').text(_t("Add Images from the 'Customize' menu")));
     },
-    sizing : function() { // done via css, keep it to avoid undefined error
+    sizing : function () { // done via css, keep it to avoid undefined error
     },
     /*
      *  helpers
      */
-    styles_to_preserve : function($img) {
+    styles_to_preserve : function ($img) {
         var styles = [ 'img-rounded', 'img-thumbnail', 'img-circle', 'shadow', 'fa-spin' ];
         var preserved = [];
         
@@ -263,17 +263,17 @@ options.registry.gallery = options.Class.extend({
         }
         return preserved.join(' ');
     },
-    img_preserve_styles : function($img) {
+    img_preserve_styles : function ($img) {
         var classes = this.styles_to_preserve($img);
         $img.removeAttr("class");
         $img.addClass(classes);
         return $img;
     },
-    img_responsive : function(img) {
+    img_responsive : function (img) {
         img.addClass("img img-responsive");
         return img;
     },
-    lowest : function($cols) {
+    lowest : function ($cols) {
         var height = 0, min = -1, col=0, lowest = undefined;
         $cols.each(function () {
             var $col = $(this);
@@ -285,11 +285,11 @@ options.registry.gallery = options.Class.extend({
         });
         return lowest;
     },
-    get_columns : function() {
+    get_columns : function () {
         return parseInt(this.$target.attr("data-columns") || 3);
     },
 
-    clean_for_save: function() {
+    clean_for_save: function () {
         var self = this;
         if (this.$target.hasClass("slideshow")) {
             this.$target.removeAttr("style");
diff --git a/addons/website/static/src/js/website.theme.js b/addons/website/static/src/js/website.theme.js
index b392f27dc5b..6b4fd81c7ae 100644
--- a/addons/website/static/src/js/website.theme.js
+++ b/addons/website/static/src/js/website.theme.js
@@ -45,7 +45,6 @@ var Theme = Widget.extend({
         this.timer = null;
         this.reload = false;
         this.flag = false;
-        this.$el.addClass("theme_customize_modal");
         this.active_select_tags();
         this.$inputs = this.$("input[data-xmlid],input[data-enable],input[data-disable]");
         setTimeout(function () {self.$el.addClass('in');}, 0);
@@ -95,20 +94,20 @@ var Theme = Widget.extend({
         var self = this;
         $('#theme_error').remove();
         return ajax.jsonRpc('/website/theme_customize_get', 'call', {
-                'xml_ids': this.get_xml_ids(this.$inputs)
-            }).done(function (data) {
-                self.$inputs.filter('[data-xmlid=""]').prop("checked", true).change();
-                self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])').each(function () {
-                    if (!_.difference(self.get_xml_ids($(this)), data[1]).length) {
-                        $(this).prop("checked", false).trigger("change", true);
-                    }
-                    if (!_.difference(self.get_xml_ids($(this)), data[0]).length) {
-                        $(this).prop("checked", true).trigger("change", true);
-                    }
-                });
-            }).fail(function (d, error) {
-                $('body').prepend($('<div id="theme_error"/>').text(error.data.message));
+            'xml_ids': this.get_xml_ids(this.$inputs)
+        }).done(function (data) {
+            self.$inputs.filter('[data-xmlid=""]').prop("checked", true).change();
+            self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])').each(function () {
+                if (!_.difference(self.get_xml_ids($(this)), data[1]).length) {
+                    $(this).prop("checked", false).trigger("change", true);
+                }
+                if (!_.difference(self.get_xml_ids($(this)), data[0]).length) {
+                    $(this).prop("checked", true).trigger("change", true);
+                }
             });
+        }).fail(function (d, error) {
+            $('body').prepend($('<div id="theme_error"/>').text(error.data.message));
+        });
     },
     get_inputs: function (string) {
         return this.$inputs.filter('#'+string.split(/\s*,\s*/).join(", #"));
@@ -278,14 +277,7 @@ function themeError(message) {
         message = '<span class="text-muted">' + message + "</span><br/><br/>" + _t("Please install or update node-less");
     }
 
-    var $error = $( QWeb.render('website.error_dialog', {
-        title: _t("Theme Error"),
-        message: message
-    }));
-    $error.appendTo("body").modal();
-    $error.on('hidden.bs.modal', function () {
-        $(this).remove();
-    });
+    website.error(_t("Theme Error"), message);
 }
 
 function theme_customize() {
diff --git a/addons/website/static/src/js/website.translator.js b/addons/website/static/src/js/website.translator.js
index 1c5d0252dbb..eb53ebaaeef 100644
--- a/addons/website/static/src/js/website.translator.js
+++ b/addons/website/static/src/js/website.translator.js
@@ -55,13 +55,13 @@ var nodialog = 'website_translator_nodialog';
 
 var Translate = translate.Class.include({
     onTranslateReady: function () {
-        if(this.gengo_translate){
+        if(this.gengo_translate) {
             this.translation_gengo_display();
         }
         this._super();
     },
     edit: function () {
-        $("#website_main_menu_navbar").hide();
+        $("#oe_main_menu_navbar").hide();
         if (!localStorage[nodialog]) {
             var dialog = new TranslatorDialog();
             dialog.appendTo($(document.body));
@@ -77,7 +77,7 @@ var Translate = translate.Class.include({
         return this._super();
     },
     cancel: function () {
-        $("#website_main_menu_navbar").show();
+        $("#oe_main_menu_navbar").show();
         return this._super();
     }
 });