[REF] web_editor: code refactoring and simplification

* Remove dead code + optimization
* Use Dialog API from web module
* Reorganize files
* Correct buggy $() function for snippet option class
* Add comments

* Fix the snippet parent navigation :

If a page contained a three level snippet structure (i.e A contains
B contains C), when editing the following bug occured :

If B or C was selected first, parenting buttons were correctly set.
But if selecting A then C, clicking on the parent lead to going back
on A instead of going on B.

* Fix snippet thumbnail layout
* Better isolate ui css from themes
* MediaDialog image list : prevent displaying empty attachments
* ...

7 files changed, 91 insertions, 240 deletions

diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 01deb49977c..8b7bbb5328a 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -27,7 +27,6 @@ var TopBarContent = Widget.extend({
         return this._super();
     },
     edit_menu: function () {
-        var self = this;
         var context = base.get_context();
         var def = $.Deferred();
         if ($("[data-content_menu_id]").length) {
@@ -49,8 +48,7 @@ var TopBarContent = Widget.extend({
                     context: context
                 },
             }).then(function (menu) {
-                var result = new EditMenuDialog(menu).appendTo(document.body);
-                return result;
+                return new EditMenuDialog(this, {}, menu).open();
             });
         });
     },
@@ -128,7 +126,7 @@ var TopBarContent = Widget.extend({
                 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')) {
@@ -170,13 +168,16 @@ website.TopBar.include({
 
 var SelectEditMenuDialog = widget.Dialog.extend({
     template: 'website.contentMenu.dialog.select',
-    init: function () {
+    init: function (parent, options) {
         var self = this;
         self.roots = [{id: null, name: _t("Top Menu")}];
         $("[data-content_menu_id]").each(function () {
             self.roots.push({id: $(this).data("content_menu_id"), name: $(this).attr("name")});
         });
-        this._super();
+        this._super(parent, _.extend({}, {
+            title: _t("Select a Menu"),
+            save_text: _t("Continue")
+        }, options || {}));
     },
     save: function () {
         this.trigger("save", parseInt(this.$el.find("select").val() || null));
@@ -191,12 +192,14 @@ var EditMenuDialog = widget.Dialog.extend({
         'click button.js_edit_menu': 'edit_menu',
         'click button.js_delete_menu': 'delete_menu',
     }),
-    init: function (menu) {
+    init: function (parent, options, menu) {
         this.menu = menu;
         this.root_menu_id = menu.id;
         this.flat = this.flatenize(menu);
         this.to_delete = [];
-        this._super();
+        this._super(parent, _.extend({}, {
+            title: _t("Edit Menu")
+        }, options || {}));
     },
     start: function () {
         var r = this._super.apply(this, arguments);
@@ -226,7 +229,7 @@ var EditMenuDialog = widget.Dialog.extend({
     },
     add_menu: function () {
         var self = this;
-        var dialog = new MenuEntryDialog(undefined, {});
+        var dialog = new MenuEntryDialog(this, {}, undefined, {});
         dialog.on('save', this, function (link) {
             var new_menu = {
                 id: _.uniqueId('new-'),
@@ -241,14 +244,14 @@ var EditMenuDialog = widget.Dialog.extend({
             self.$('.oe_menu_editor').append(
                 qweb.render('website.contentMenu.dialog.submenu', { submenu: new_menu }));
         });
-        dialog.appendTo(document.body);
+        dialog.open();
     },
     edit_menu: function (ev) {
         var self = this;
         var menu_id = $(ev.currentTarget).closest('[data-menu-id]').data('menu-id');
         var menu = self.flat[menu_id];
         if (menu) {
-            var dialog = new MenuEntryDialog(undefined, menu);
+            var dialog = new MenuEntryDialog(this, {}, undefined, menu);
             dialog.on('save', this, function (link) {
                 var id = link.id;
                 var menu_obj = self.flat[id];
@@ -260,13 +263,12 @@ var EditMenuDialog = widget.Dialog.extend({
                 var $menu = self.$('[data-menu-id="' + id + '"]');
                 $menu.find('.js_menu_label').first().text(menu_obj.name);
             });
-            dialog.appendTo(document.body);
+            dialog.open();
         } else {
             alert("Could not find menu entry");
         }
     },
     delete_menu: function (ev) {
-        var self = this;
         var $menu = $(ev.currentTarget).closest('[data-menu-id]');
         var mid = $menu.data('menu-id')|0;
         if (mid) {
@@ -307,7 +309,7 @@ var EditMenuDialog = widget.Dialog.extend({
 
 var MenuEntryDialog = widget.LinkDialog.extend({
     template: 'website.contentMenu.dialog.add',
-    init: function (editor, data) {
+    init: function (parent, options, editor, data) {
         data.text = data.name || '';
         data.isNewWindow = data.new_window;
         this.data = data;
@@ -337,10 +339,7 @@ var MenuEntryDialog = widget.LinkDialog.extend({
             return;
         }
         return this._super.apply(this, arguments);
-    },
-    destroy: function () {
-        this._super.apply(this, arguments);
-    },
+    }
 });
 
 return {
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 08501d3b48e..6a442b85c90 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -2,6 +2,7 @@ odoo.define('website.website', function (require) {
     "use strict";
 
     var ajax = require('web.ajax');
+    var Dialog = require("web.Dialog");
     var core = require('web.core');
     var Widget = require('web.Widget');
     var session = require('web.session');
@@ -165,10 +166,10 @@ odoo.define('website.website', function (require) {
         form.submit();
     };
 
+    ajax.loadXML('/web/static/src/xml/base_common.xml', qweb).then(function () {
+        ajax.loadXML('/website/static/src/xml/website.xml', qweb);
+    });
 
-    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"));
@@ -266,6 +267,13 @@ odoo.define('website.website', function (require) {
         }
     });
 
+    Dialog.include({
+        init: function () {
+            this._super.apply(this, arguments);
+            this.$modal.addClass("o_website_modal");
+        },
+    });
+
     var data = {
         prompt: prompt,
         error: error,
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index bf6213aafb5..212647d5584 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1,7 +1,6 @@
 odoo.define('website.snippets.editor', function (require) {
 'use strict';
 
-var widget = require('web_editor.widget');
 var animation = require('web_editor.snippets.animation');
 var options = require('web_editor.snippets.options');
 var snippet_editor = require('web_editor.snippet.editor');
@@ -58,8 +57,7 @@ options.registry.slider = options.Class.extend({
             .first().addClass("active");
     },
     start : function () {
-        var self = this;
-        this._super();
+        this._super.apply(this, arguments);
         this.$target.carousel({interval: false});
         this.id = this.$target.attr("id");
         this.$inner = this.$target.find('.carousel-inner');
@@ -67,7 +65,7 @@ options.registry.slider = options.Class.extend({
         this.$target.carousel('pause');
         this.rebind_event();
     },
-    add_slide: function (type, value) {
+    add_slide: function (type) {
         if(type !== "click") return;
 
         var self = this;
@@ -93,7 +91,7 @@ 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();
@@ -106,14 +104,13 @@ options.registry.slider = options.Class.extend({
         },0);
         return $clone;
     },
-    remove_slide: function (type, value) {
+    remove_slide: function (type) {
         if(type !== "click") return;
 
         if (this.remove_process) {
             return;
         }
         var self = this;
-        var new_index = 0;
         var cycle = this.$inner.find('.item').length - 1;
         var index = this.$inner.find('.item.active').index();
 
@@ -165,10 +162,6 @@ options.registry.carousel = options.registry.slider.extend({
         this._super();
 
         // set background and prepare to clean for save
-        var add_class = function (c) {
-            if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c;
-            return self._class || "";
-        };
         this.$target.on('slid.bs.carousel', function () {
             if(self.editor && self.editor.styles.background) {
                 self.editor.styles.background.$target = self.$target.find(".item.active");
@@ -178,30 +171,13 @@ options.registry.carousel = options.registry.slider.extend({
         });
         this.$target.trigger('slid.bs.carousel');
     },
-    add_slide: function (type, data) {
-        if(type !== "click") return;
-
-        var $clone = this._super(type, data);
-        // choose an other background
-        var bg = this.$target.data("snippet-option-ids").background;
-        if (!bg) return $clone;
-
-        var $styles = bg.$el.find("li[data-background]");
-        var $select = $styles.filter(".active").removeClass("active").next("li[data-background]");
-        if (!$select.length) {
-            $select = $styles.first();
-        }
-        $select.addClass("active");
-        $clone.css("background-image", $select.data("background") ? "url('"+ $select.data("background") +"')" : "");
-
-        return $clone;
-    },
     // rebind event to active carousel on edit mode
     rebind_event: function () {
         var self = this;
         this.$target.find('.carousel-control').off('click').on('click', function () {
-            self.$target.carousel( $(this).data('slide')); });
-        this._super();
+            self.$target.carousel($(this).data('slide'));
+        });
+        this._super.apply(this, arguments);
 
         /* Fix: backward compatibility saas-3 */
         this.$target.find('.item.text_image, .item.image_text, .item.text_only').find('.container > .carousel-caption > div, .container > img.carousel-image').attr('contentEditable', 'true');
@@ -324,7 +300,7 @@ options.registry.marginAndResize = options.Class.extend({
                 setTimeout(function () {
                     self.buildingBlock.editor_busy = false;
                     if (begin !== current) {
-                        self.buildingBlock.parent.rte.historyRecordUndo(self.$target, 'resize_' + XY);
+                        self.buildingBlock.getParent().rte.historyRecordUndo(self.$target, 'resize_' + XY);
                     }
                 },0);
                 self.$target.removeClass("resize_editor_busy");
@@ -332,10 +308,10 @@ 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 () {
             self.$target.css("height", "");
             self.$target.css("overflow", "");
-            self.buildingBlock.parent.rte.historyRecordUndo(self.$target, 'resize_Y');
+            self.buildingBlock.getParent().rte.historyRecordUndo(self.$target, 'resize_Y');
             self.buildingBlock.cover_target(self.$overlay, self.$target);
             return false;
         });
@@ -376,14 +352,14 @@ options.registry.marginAndResize = options.Class.extend({
 
         this.$overlay.attr("class", overlay_class);
     },
-    
+
     /* on_resize
     *  called when the box is resizing and the class change, before the cover_target
     *  @compass: resize direction : 'n', 's', 'e', 'w'
     *  @beginClass: attributes class at the begin
     *  @current: curent increment in this.grid
     */
-    on_resize: function (compass, beginClass, current) {
+    on_resize: function () {
         this.change_cursor();
     }
 });
@@ -411,7 +387,7 @@ options.registry["margin-x"] = options.registry.marginAndResize.extend(preventPa
         var grid = [1,2,3,4,5,6,7,8,9,10,11,12];
         this.grid.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
 
-        var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
+        grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
         this.grid.w = [_.map(grid, function (v) {return 'col-md-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
 
         return this.grid;
@@ -488,7 +464,7 @@ options.registry.parallax = options.Class.extend({
         this.grid.size = 8;
         return this.grid;
     },
-    on_resize: function (compass, beginClass, current) {
+    on_resize: function () {
         this.$target.data("snippet-view").set_values();
     },
     start : function () {
@@ -512,7 +488,6 @@ options.registry.parallax = options.Class.extend({
         this.$target.data("snippet-view").set_values();
     },
     set_active: function () {
-        var value = this.$target.attr('data-scroll-background-ratio') || 0;
         this.$el.find('[data-scroll]').removeClass("active")
             .filter('[data-scroll="' + (this.$target.attr('data-scroll-background-ratio') || 0) + '"]').addClass("active");
     },
@@ -524,118 +499,6 @@ options.registry.parallax = options.Class.extend({
     }
 });
 
-
-// to remove after 9.0 (keep for compatibility without update with -u)
-options.registry.transform = options.Class.extend({
-    start: function () {
-        var self = this;
-        this._super();
-        this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
-        this.$overlay.find('[data-toggle="dropdown"]')
-            .on("mousedown", function () {
-                self.$target.transfo("hide");
-            });
-        this.$target.on('attributes_change', function () {
-            self.resetTransfo();
-        });
-
-        // don't unactive transform if rotation and mouseup on an other container
-        var cursor_mousedown = false;
-        $(document).on('mousedown', function (event) {
-            if (self.$overlay.hasClass('oe_active') && $(event.target).closest(".transfo-controls").length) {
-                cursor_mousedown = event;
-            }
-        });
-        $(document).on('mouseup', function (event) {
-            if (cursor_mousedown) {
-                event.preventDefault();
-
-                var dx = event.clientX-cursor_mousedown.clientX;
-                var dy = event.clientY-cursor_mousedown.clientY;
-                setTimeout(function () {
-                    self.$target.focusIn().activateBlock();
-                    if (10 < Math.pow(dx, 2)+Math.pow(dy, 2)) {
-                        setTimeout(function () {
-                            self.$target.transfo({ 'hide': false });
-                        },0);
-                    }
-                },0);
-                cursor_mousedown = false;
-            }
-        });
-    },
-    style: function (type, value) {
-        if (type !== 'click') return;
-        var settings = this.$target.data("transfo").settings;
-        this.$target.transfo({ 'hide': (settings.hide = !settings.hide) });
-    },
-    clear_style: function (type, value) {
-        if (type !== 'click') return;
-        this.$target.removeClass("fa-spin").attr("style", "");
-        this.resetTransfo();
-    },
-    move_summernote_select: function () {
-        var self = this;
-        var transfo = this.$target.data("transfo");
-        $('body > .note-handle')
-            .attr('style', transfo.$markup.attr('style'))
-            .css({
-                'z-index': 0,
-                'pointer-events': 'none'
-            })
-            .off('mousedown mouseup')
-            .on('mousedown mouseup', function (event) {
-                self.$target.trigger( jQuery.Event( event.type, event ) );
-            })
-            .find('.note-control-selection').attr('style', transfo.$markup.find('.transfo-controls').attr('style'))
-                .css({
-                    'display': 'block',
-                    'cursor': 'auto'
-                });
-    },
-    resetTransfo: function () {
-        var self = this;
-        this.$overlay.css('width', '');
-        this.$overlay.data('not-cover_target', true);
-        this.$target.transfo("destroy");
-        this.$target.transfo({
-            hide: true,
-            callback: function () {
-                var pos = $(this).data("transfo").$center.offset();
-                self.$overlay.css({
-                    'top': pos.top | 0,
-                    'left': pos.left | 0,
-                    'position': 'absolute',
-                });
-                self.$overlay.find(".oe_overlay_options").attr("style", "width:0; left:0!important; top:0;");
-                self.$overlay.find(".oe_overlay_options > .btn-group").attr("style", "width:160px; left:-80px;");
-
-                self.move_summernote_select();
-            }});
-        this.$target.data('transfo').$markup
-            .on("mouseover", function () {
-                self.$target.trigger("mouseover");
-            })
-            .mouseover();
-    },
-    on_focus : function () {
-        var self = this;
-        setTimeout(function () {
-            self.$target.css({"-webkit-animation": "none", "animation": "none"});
-            self.resetTransfo();
-        },0);
-    },
-    on_blur : function () {
-        this.$target.transfo("hide");
-        $('.note-handle').hide(); // hide selection of summernote
-        this.$target.css({"-webkit-animation-play-state": "", "animation-play-state": "", "-webkit-transition": "", "transition": "", "-webkit-animation": "", "animation": ""});
-    },
-    clean_for_save: function () {
-        this.on_blur();
-        this._super();
-    }
-});
-
 options.registry.ul = options.Class.extend({
     start: function () {
         var self = this;
@@ -651,15 +514,15 @@ options.registry.ul = options.Class.extend({
         this.$target.find('.o_ul_toggle_self, .o_ul_toggle_next').remove();
 
         this.$target.find('li:has(>ul,>ol)').map(function () {
-                // get if the li contain a text label
-                var texts = _.filter(_.toArray(this.childNodes), function (a) { return a.nodeType == 3;});
-                if (!texts.length || !texts.reduce(function (a,b) { return a.textContent + b.textContent;}).match(/\S/)) {
-                    return;
-                }
-                $(this).children('ul,ol').addClass('o_close');
-                return $(this).children(':not(ul,ol)')[0] || this;
-            })
-            .prepend('<a href="#" class="o_ul_toggle_self fa" />');
+            // get if the li contain a text label
+            var texts = _.filter(_.toArray(this.childNodes), function (a) { return a.nodeType == 3;});
+            if (!texts.length || !texts.reduce(function (a,b) { return a.textContent + b.textContent;}).match(/\S/)) {
+                return;
+            }
+            $(this).children('ul,ol').addClass('o_close');
+            return $(this).children(':not(ul,ol)')[0] || this;
+        })
+        .prepend('<a href="#" class="o_ul_toggle_self fa" />');
 
         var $li = this.$target.find('li:has(+li:not(>.o_ul_toggle_self)>ul, +li:not(>.o_ul_toggle_self)>ol)');
         $li.map(function () { return $(this).children()[0] || this; })
@@ -747,7 +610,6 @@ options.registry.collapse = options.Class.extend(preventParentEmpty).extend({
 });
 
 return options;
-
 });
 
 
@@ -755,7 +617,6 @@ odoo.define('website.rte.summernote', function (require) {
 'use strict';
 
 var core = require('web.core');
-var options = require('website.snippets.editor');
 require('web_editor.rte.summernote');
 
 var eventHandler = $.summernote.eventHandler;
@@ -776,7 +637,6 @@ renderer.tplPopovers = function (lang, options) {
 
 
 $.summernote.pluginEvents.transform = function (event, editor, layoutInfo, sorted) {
-    var $editable = layoutInfo.editable();
     var $selection = layoutInfo.handle().find('.note-control-selection');
     var $image = $($selection.data('target'));
 
@@ -805,7 +665,6 @@ $.summernote.pluginEvents.transform = function (event, editor, layoutInfo, sorte
     $(document).on('mousedown', mousedown);
 };
 
-
 var fn_boutton_update = eventHandler.modules.popover.button.update;
 eventHandler.modules.popover.button.update = function ($container, oStyle) {
     fn_boutton_update.call(this, $container, oStyle);
@@ -813,6 +672,4 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         .toggleClass('active', $(oStyle.image).is('[style*="transform"]'))
         .toggleClass('hidden', !$(oStyle.image).is('img'));
 };
-
-
 });
diff --git a/addons/website/static/src/js/website.snippets.gallery.js b/addons/website/static/src/js/website.snippets.gallery.js
index 7bcc8f34c4d..ed1293229b8 100644
--- a/addons/website/static/src/js/website.snippets.gallery.js
+++ b/addons/website/static/src/js/website.snippets.gallery.js
@@ -19,7 +19,7 @@ ajax.loadXML('/website/static/src/xml/website.gallery.xml', qweb);
 
 /*--------------------------------------------------------------------------
   Gallery Snippet
-  
+
   This is the snippet responsible for configuring the image galleries.
   Look at /website/views/snippets.xml for the available options
   ------------------------------------------------------------------------*/
@@ -135,7 +135,7 @@ options.registry.gallery = options.Class.extend({
 
         var $row = $("<div class='row'/>");
         this.replace($row);
-        
+
         // if no columns let's default to 3, here we must update the DOM accordingly :'(
         if (columns === 0) {
             columns = 3;
@@ -226,12 +226,11 @@ options.registry.gallery = options.Class.extend({
         if(type !== "click") return;
         var self = this;
         var $container = this.$target.find(".container:first");
-        var editor = new widget.MediaDialog(this.$target.closest('.o_editable'), null, {select_images: true});
-        editor.appendTo(document.body);
+        var editor = new widget.MediaDialog(null, {select_images: true}, this.$target.closest('.o_editable'), null).open();
         var index = Math.max(0, _.max(_.map(this.$target.find("img").get(), function (img) { return img.dataset.index | 0; })) + 1);
         editor.on('saved', this, function (attachments) {
             for (var i = 0 ; i < attachments.length; i++) {
-                var img = $('<img class="img img-responsive mb8 mt8"/>')
+                $('<img class="img img-responsive mb8 mt8"/>')
                     .attr("src", attachments[i].src)
                     .attr('data-index', index+i)
                     .data('index', index+i)
@@ -255,7 +254,7 @@ options.registry.gallery = options.Class.extend({
     styles_to_preserve : function ($img) {
         var styles = [ 'img-rounded', 'img-thumbnail', 'img-circle', 'shadow', 'fa-spin' ];
         var preserved = [];
-        
+
         for (var style in styles) {
             if ($img.hasClass(style)) {
                 preserved.push(style);
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index fcca905eeca..4042c3607f7 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -11,11 +11,14 @@ body .modal {
 
         .modal-content {
             border-radius: 0;
-            background-color: @o-we-color-paper;
+            color: initial!important;
+            background-color: @o-we-color-paper!important;
             .modal-header .o_subtitle {
                 margin-left: 10px;
             }
             .modal-body {
+                color: inherit!important;
+                background-color: transparent!important;
                 .o_modal_header {
                     .o-webclient-padding(@top: 10px, @bottom: 10px);
                     .clearfix();
@@ -41,7 +44,7 @@ body .modal {
                 }
             }
         }
-        
+
         @media (min-width: @screen-sm-min) {
             .modal-dialog {
                 height: 100%;
@@ -78,8 +81,8 @@ body .modal {
             }
 
             .modal-content {
-                background-color: black;
-                color: lightgray;
+                background-color: black!important;
+                color: lightgray!important;
                 border: 3px outset gray;
                 border-radius: 20px;
                 box-shadow: 0 0 100em 0 white;
@@ -143,7 +146,7 @@ body .modal {
                     width: 33%;
                     margin: 2em 0;
                     padding: 0 15px;
-                    
+
                     a {
                         display: block;
                         font-size: 34px;
@@ -157,7 +160,7 @@ body .modal {
                             line-height: 104px;
                             background-color: #2C2C36;
                             color: white;
-                            
+
                             .o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1));
                         }
                         p {
@@ -189,7 +192,7 @@ body .modal {
             line-height: 1.2;
             font-size: small;
             font-family: arial, sans-serif;
-            h3 { 
+            h3 {
                 font-size: medium;
             }
             .r {
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index d6b1fe40b72..f3334fc2500 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -22,42 +22,33 @@
         </ul>
     </li>
 </t>
-<t t-name="website.contentMenu.dialog.select">
-    <t t-call="web_editor.dialog">
-        <t t-set="title">Select a Menu</t>
-        <t t-set="button">Continue</t>
-        <select class="form-control mb16" t-if="widget.roots">
-            <t t-foreach="widget.roots" t-as="root">
-                <option t-att-value="root.id"><t t-esc="root.name"/></option>
-            </t>
-        </select>
+<select t-name="website.contentMenu.dialog.select" class="form-control mb16" t-if="widget.roots">
+    <t t-foreach="widget.roots" t-as="root">
+        <option t-att-value="root.id"><t t-esc="root.name"/></option>
     </t>
-</t>
-<t t-name="website.contentMenu.dialog.edit">
-    <t t-call="web_editor.dialog">
-        <t t-set="title">Edit Menu</t>
-        <select class="form-control mb16" t-if="widget.roots">
-            <t t-foreach="widget.roots" t-as="root">
-                <option t-att-value="root.id"><t t-esc="root.name"/></option>
-            </t>
-        </select>
-        <ul class="oe_menu_editor list-unstyled">
-            <t t-foreach="widget.menu.children" t-as="submenu">
-                <t t-call="website.contentMenu.dialog.submenu"/>
-            </t>
-        </ul>
-        <div class="mt16">
-            <div class="pull-right text-muted">
-                Drag a menu to the right to create a sub-menu
-            </div>
-            <div>
-                <a href="#" class="js_add_menu">
-                    <i class="fa fa-plus-circle"/> Add Menu Entry
-                </a>
-            </div>
+</select>
+<div t-name="website.contentMenu.dialog.edit">
+    <select class="form-control mb16" t-if="widget.roots">
+        <t t-foreach="widget.roots" t-as="root">
+            <option t-att-value="root.id"><t t-esc="root.name"/></option>
+        </t>
+    </select>
+    <ul class="oe_menu_editor list-unstyled">
+        <t t-foreach="widget.menu.children" t-as="submenu">
+            <t t-call="website.contentMenu.dialog.submenu"/>
+        </t>
+    </ul>
+    <div class="mt16">
+        <div class="pull-right text-muted">
+            Drag a menu to the right to create a sub-menu
         </div>
-    </t>
-</t>
+        <div>
+            <a href="#" class="js_add_menu">
+                <i class="fa fa-plus-circle"/> Add Menu Entry
+            </a>
+        </div>
+    </div>
+</div>
 <t t-name="website.contentMenu.dialog.add" t-extend="web_editor.dialog.link">
     <t t-jquery="t[t-set='title']" t-operation="inner">
         <t t-if="!widget.update_mode">Add Menu Entry</t>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 8bfccbd25dd..c34d88456de 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -1,11 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <t t-extend="Dialog">
-        <t t-jquery=".modal-dialog">
-            $(this).parent().addClass('o_website_modal');
-        </t>
-    </t>
-
     <div t-name="website.mobile_preview">
         <iframe id="mobile-viewport" t-att-src="widget.mobile_src"/>
     </div>