[IMP] web, *: lazy load dialog xml template

* web_editor, web_planner, website

The 'Dialog' class is used in both backend and frontend. Also, lots of
actions can be done without the use of any modal. It thus makes sense
to lazy load its related xml only when a first modal is opened.

This change also allows to get rid of the "base_common.xml" file as the
dialog template is the only remaining one in there and, in the future
website update, it will allow to not load any static XML file on website
page loadings.

8 files changed, 136 insertions, 86 deletions

diff --git a/addons/web/static/src/js/chrome/action_manager.js b/addons/web/static/src/js/chrome/action_manager.js
index 5d4a44ba420..131a31ad776 100644
--- a/addons/web/static/src/js/chrome/action_manager.js
+++ b/addons/web/static/src/js/chrome/action_manager.js
@@ -731,7 +731,7 @@ var ActionManager = Widget.extend({
      * @param {String} executor.klass CSS class to add on the dialog root, if action.target=new
      * @param {Function<instance.web.Widget, undefined>} executor.post_process cleanup called after a widget has been added as inner_widget
      * @param {Object} options
-     * @return {*}
+     * @return {Deferred<*>}
      */
     ir_actions_common: function(executor, options) {
         var self = this;
@@ -772,10 +772,13 @@ var ActionManager = Widget.extend({
             };
             this.dialog.on("closed", null, this.dialog.on_close);
             this.dialog_widget = executor.widget();
+            var $dialogFooter;
             if (this.dialog_widget instanceof ViewManager) {
                 executor.action.viewManager = this.dialog_widget;
+                $dialogFooter = $('<div/>'); // fake dialog footer in which view
+                                             // manager buttons will be put
                 _.defaults(this.dialog_widget.flags, {
-                    $buttons: this.dialog.$footer,
+                    $buttons: $dialogFooter,
                     footer_to_buttons: true,
                 });
                 if (this.dialog_widget.action.view_mode === 'form') {
@@ -790,15 +793,24 @@ var ActionManager = Widget.extend({
             this.dialog_widget.setParent(this.dialog);
 
             var fragment = document.createDocumentFragment();
-            return this.dialog_widget.appendTo(fragment).then(function() {
+            return this.dialog_widget.appendTo(fragment).then(function () {
+                var def = $.Deferred();
+                self.dialog.opened().then(function () {
+                    dom.append(self.dialog.$el, fragment, {
+                        in_DOM: true,
+                        callbacks: [{widget: self.dialog_widget}],
+                    });
+                    if ($dialogFooter) {
+                        self.dialog.$footer.empty().append($dialogFooter.contents());
+                    }
+                    if (options.state && self.dialog_widget.do_load_state) {
+                        return self.dialog_widget.do_load_state(options.state);
+                    }
+                })
+                .done(def.resolve.bind(def))
+                .fail(def.reject.bind(def));
                 self.dialog.open();
-                dom.append(self.dialog.$el, fragment, {
-                    in_DOM: true,
-                    callbacks: [{widget: self.dialog_widget}],
-                });
-                if(options.state && self.dialog_widget.do_load_state) {
-                    return self.dialog_widget.do_load_state(options.state);
-                }
+                return def;
             }).then(function () {
                 return executor.action;
             });
diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index ec3a3109053..23eac8ac5f5 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -16,20 +16,30 @@ var _t = core._t;
     during the lifecycle of the dialog.
 */
 var Dialog = Widget.extend({
+    xmlDependencies: ['/web/static/src/xml/dialog.xml'],
+
     /**
-        Constructor.
-
-        @param {Widget} parent
-        @param {dictionary} options
-            - title
-            - subtitle
-            - size: one of the following: 'large', 'medium', 'small'
-            - dialogClass: class to add to the modal-body
-            - buttons: It must be a list of dictionaries -> text, classes, close, click, disabled
-                -> If no buttons, a "ok" primary button is added with close = true
-                -> By default: close = false and classes = 'btn-primary' if only one button and 'btn-default' if many buttons
-            - $content: Some content to replace this.$el .
-    */
+     * @constructor
+     * @param {Widget} parent
+     * @param {Object} [options]
+     * @param {string} [options.title=Odoo]
+     * @param {string} [options.subtitle]
+     * @param {string} [options.size=large] - 'large', 'medium' or 'small'
+     * @param {string} [options.dialogClass] - class to add to the modal-body
+     * @param {jQuery} [options.$content]
+     *        Element which will be the $el, replace the .modal-body and get the
+     *        modal-body class
+     * @param {Object[]} [options.buttons]
+     *        List of button descriptions. Note: if no buttons, a "ok" primary
+     *        button is added to allow closing the dialog
+     * @param {string} [options.buttons[].text]
+     * @param {string} [options.buttons[].classes]
+     *        Default to 'btn-primary' if only one button, 'btn-default'
+     *        otherwise
+     * @param {boolean} [options.buttons[].close=false]
+     * @param {function} [options.buttons[].click]
+     * @param {boolean} [options.buttons[].disabled]
+     */
     init: function (parent, options) {
         this._super(parent);
         this._opened = $.Deferred();
@@ -43,31 +53,42 @@ var Dialog = Widget.extend({
         });
 
         this.$content = options.$content;
-
         this.title = options.title;
         this.subtitle = options.subtitle;
-        this.$modal = $(QWeb.render('Dialog', {title: this.title, subtitle: this.subtitle}));
-
-        switch(options.size) {
-            case 'large':
-                this.$modal.find('.modal-dialog').addClass('modal-lg');
-                break;
-            case 'small':
-                this.$modal.find('.modal-dialog').addClass('modal-sm');
-                break;
-        }
-
         this.dialogClass = options.dialogClass;
-        this.$footer = this.$modal.find(".modal-footer");
-
-        this.set_buttons(options.buttons);
-
-        this.$modal.on('hidden.bs.modal', _.bind(this.destroy, this));
+        this.size = options.size;
+        this.buttons = options.buttons;
     },
-
-    renderElement: function() {
+    /**
+     * Wait for XML dependencies and instantiate the modal structure (except
+     * modal-body).
+     *
+     * @override
+     */
+    willStart: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            // Render modal once xml dependencies are loaded
+            self.$modal = $(QWeb.render('Dialog', {title: self.title, subtitle: self.subtitle}));
+            switch (self.size) {
+                case 'large':
+                    self.$modal.find('.modal-dialog').addClass('modal-lg');
+                    break;
+                case 'small':
+                    self.$modal.find('.modal-dialog').addClass('modal-sm');
+                    break;
+            }
+            self.$footer = self.$modal.find(".modal-footer");
+            self.set_buttons(self.buttons);
+            self.$modal.on('hidden.bs.modal', _.bind(self.destroy, self));
+        });
+    },
+    /**
+     * @override
+     */
+    renderElement: function () {
         this._super();
-        if(this.$content) {
+        if (this.$content) {
             this.setElement(this.$content);
         }
         this.$el.addClass('modal-body ' + this.dialogClass);
@@ -100,7 +121,7 @@ var Dialog = Widget.extend({
         });
     },
 
-    set_title: function(title, subtitle) {
+    set_title: function (title, subtitle) {
         this.title = title || "";
         if (subtitle !== undefined) {
             this.subtitle = subtitle || "";
@@ -114,15 +135,16 @@ var Dialog = Widget.extend({
         return this;
     },
 
-    opened: function(handler) {
+    opened: function (handler) {
         return (handler)? this._opened.then(handler) : this._opened;
     },
 
-    open: function() {
+    open: function () {
         $('.tooltip').remove(); // remove open tooltip if any to prevent them staying when modal is opened
 
         var self = this;
-        this.replace(this.$modal.find(".modal-body")).then(function() {
+        this.appendTo($('<div/>')).then(function () {
+            self.$modal.find(".modal-body").replaceWith(self.$el);
             self.$modal.modal('show');
             self._opened.resolve();
         });
@@ -130,26 +152,32 @@ var Dialog = Widget.extend({
         return self;
     },
 
-    close: function() {
-        this.$modal.modal('hide');
+    close: function () {
+        this.destroy();
     },
 
-    destroy: function(reason) {
+    destroy: function (reason) {
+        // Need to trigger before real destroy but if 'closed' handler destroys
+        // the widget again, we want to avoid infinite recursion
+        if (!this.__closed) {
+            this.__closed = true;
+            this.trigger("closed", reason);
+        }
+
         if (this.isDestroyed()) {
             return;
         }
-
-        this.trigger("closed", reason);
-
         this._super();
 
         $('.tooltip').remove(); //remove open tooltip if any to prevent them staying when modal has disappeared
-        this.$modal.modal('hide');
-        this.$modal.remove();
+        if (this.$modal) {
+            this.$modal.modal('hide');
+            this.$modal.remove();
+        }
 
         setTimeout(function () { // Keep class modal-open (deleted by bootstrap hide fnct) on body to allow scrolling inside the modal
             var modals = $('body > .modal').filter(':visible');
-            if(modals.length) {
+            if (modals.length) {
                 modals.last().focus();
                 $('body').addClass('modal-open');
             }
diff --git a/addons/web/static/src/js/report/report.editor.js b/addons/web/static/src/js/report/report.editor.js
index 57942f9b79c..a36b1596ca2 100644
--- a/addons/web/static/src/js/report/report.editor.js
+++ b/addons/web/static/src/js/report/report.editor.js
@@ -12,8 +12,6 @@ var trusted_host = utils.get_host_from_url(web_base_url);
 var trusted_protocol = utils.get_protocol_from_url(web_base_url);
 var trusted_origin = utils.build_origin(trusted_protocol, trusted_host);
 
-ajax.loadXML('/web/static/src/xml/base_common.xml', core.qweb);
-
 // Patch the editor's behavior when it is launched inside an iframe.
 if (window.self !== window.top) {
     $(document.body).addClass('o_in_iframe'); //  in order to apply css rules
diff --git a/addons/web/static/src/js/services/crash_manager.js b/addons/web/static/src/js/services/crash_manager.js
index f09eec23daf..9d3b9fa63b8 100644
--- a/addons/web/static/src/js/services/crash_manager.js
+++ b/addons/web/static/src/js/services/crash_manager.js
@@ -117,12 +117,17 @@ var CrashManager = core.Class.extend({
         var dialog = new Dialog(this, {
             title: _.str.capitalize(error.type || error.message) || _t("Odoo Error"),
             $content: $(QWeb.render('CrashManager.error', {error: error}))
-        }).open();
+        });
 
         // When the dialog opens, initialize the copy feature and destroy it when the dialog is closed
         var $clipboardBtn;
         var clipboard;
         dialog.opened(function () {
+            // When the full traceback is shown, scroll it to the end (useful for better python error reporting)
+            dialog.$(".o_error_detail").on("shown.bs.collapse", function (e) {
+                e.target.scrollTop = e.target.scrollHeight;
+            });
+
             $clipboardBtn = dialog.$(".o_clipboard_button");
             $clipboardBtn.tooltip({title: _t("Copied !"), trigger: "manual", placement: "left"});
             clipboard = new window.Clipboard($clipboardBtn[0], {
@@ -144,10 +149,7 @@ var CrashManager = core.Class.extend({
             clipboard.destroy();
         });
 
-        // When the full traceback is shown, scroll it to the end (useful for better python error reporting)
-        dialog.$(".o_error_detail").on("shown.bs.collapse", function (e) {
-            e.target.scrollTop = e.target.scrollHeight;
-        });
+        dialog.open();
     },
     show_message: function(exception) {
         this.show_error({
diff --git a/addons/web/static/src/js/views/view_dialogs.js b/addons/web/static/src/js/views/view_dialogs.js
index d38400c2e84..97b17f00413 100644
--- a/addons/web/static/src/js/views/view_dialogs.js
+++ b/addons/web/static/src/js/views/view_dialogs.js
@@ -192,13 +192,16 @@ var FormViewDialog = ViewDialog.extend({
                 .then(function () {
                     var $buttons = $('<div>');
                     self.form_view.renderButtons($buttons);
-                    if ($buttons.children().length) {
-                        self.$footer.empty().append($buttons.contents());
-                    }
-                    dom.append(_super().$el, fragment, {
-                        callbacks: [{widget: self.form_view}],
-                        in_DOM: true,
+                    self.opened().always(function () {
+                        if ($buttons.children().length) {
+                            self.$footer.empty().append($buttons.contents());
+                        }
+                        dom.append(self.$el, fragment, {
+                            callbacks: [{widget: self.form_view}],
+                            in_DOM: true,
+                        });
                     });
+                    _super();
                 });
         });
 
@@ -282,7 +285,7 @@ var SelectCreateDialog = ViewDialog.extend({
     },
 
     open: function () {
-        if(this.options.initial_view !== "search") {
+        if (this.options.initial_view !== "search") {
             return this.create_edit_record();
         }
         var self = this;
@@ -303,10 +306,14 @@ var SelectCreateDialog = ViewDialog.extend({
         this.loadViews(this.dataset.model, this.dataset.get_context(), [[false, 'list'], [false, 'search']], {})
             .then(this.setup.bind(this, search_defaults))
             .then(function (fragment) {
-                dom.append(_super().$el, fragment, {
-                    callbacks: [{widget: self.list_controller}],
-                    in_DOM: true,
+                self.opened().then(function () {
+                    dom.append(self.$el, fragment, {
+                        callbacks: [{widget: self.list_controller}],
+                        in_DOM: true,
+                    });
+                    self.set_buttons(self.__buttons);
                 });
+                _super();
             });
         return this;
     },
@@ -349,20 +356,20 @@ var SelectCreateDialog = ViewDialog.extend({
         }).then(function (controller) {
             self.list_controller = controller;
             // Set the dialog's buttons
-            var buttons = [{
+            self.__buttons = [{
                 text: _t("Cancel"),
                 classes: "btn-default o_form_button_cancel",
                 close: true,
             }];
             if (!self.options.no_create) {
-                buttons.unshift({
+                self.__buttons.unshift({
                     text: _t("Create"),
                     classes: "btn-primary",
                     click: self.create_edit_record.bind(self)
                 });
             }
             if (!self.options.disable_multiple_selection) {
-                buttons.unshift({
+                self.__buttons.unshift({
                     text: _t("Select"),
                     classes: "btn-primary o_select_button",
                     disabled: true,
@@ -372,7 +379,6 @@ var SelectCreateDialog = ViewDialog.extend({
                     },
                 });
             }
-            self.set_buttons(buttons);
             return self.list_controller.appendTo(fragment);
         }).then(function () {
             searchview.toggle_visibility(true);
@@ -401,7 +407,7 @@ var SelectCreateDialog = ViewDialog.extend({
                 self.on_selected([record.res_id]);
             },
         })).open();
-        dialog.on('closed', this, this.close.bind(this));
+        dialog.on('closed', this, this.close);
     },
 });
 
diff --git a/addons/web/static/src/js/widgets/data_export.js b/addons/web/static/src/js/widgets/data_export.js
index c11551ca2cc..fde9001f860 100644
--- a/addons/web/static/src/js/widgets/data_export.js
+++ b/addons/web/static/src/js/widgets/data_export.js
@@ -210,16 +210,16 @@ var DataExport = Dialog.extend({
 
         this.row_index = 0;
         this.row_index_level = 0;
+    },
+    start: function() {
+        var self = this;
+        var waitFor = [this._super.apply(this, arguments)];
 
         // The default for the ".modal_content" element is "max-height: 100%;"
         // but we want it to always expand to "height: 100%;" for this modal.
         // This can be achieved thanks to LESS modification without touching
         // the ".modal-content" rules... but not with Internet explorer (11).
         this.$modal.find(".modal-content").css("height", "100%");
-    },
-    start: function() {
-        var self = this;
-        var waitFor = [this._super.apply(this, arguments)];
 
         this.$fields_list = this.$('.o_fields_list');
         this.$import_compat_radios = this.$('.o_import_compat input');
diff --git a/addons/web/static/src/js/widgets/debug_manager.js b/addons/web/static/src/js/widgets/debug_manager.js
index 912a30edb2c..baa147d9a1f 100644
--- a/addons/web/static/src/js/widgets/debug_manager.js
+++ b/addons/web/static/src/js/widgets/debug_manager.js
@@ -351,10 +351,14 @@ DebugManager.include({
         this._active_view.controller.open_defaults_dialog();
     },
     fvg: function() {
-        var dialog = new Dialog(this, { title: _t("Fields View Get") }).open();
-        $('<pre>').text(utils.json_node_to_xml(
-            this._active_view.controller.renderer.arch, true)
-        ).appendTo(dialog.$el);
+        var self = this;
+        var dialog = new Dialog(this, { title: _t("Fields View Get") });
+        dialog.opened().then(function () {
+            $('<pre>').text(utils.json_node_to_xml(
+                self._active_view.controller.renderer.arch, true)
+            ).appendTo(dialog.$el);
+        });
+        dialog.open();
     },
 });
 function make_context(width, height, fn) {
diff --git a/addons/web/static/src/xml/base_common.xml b/addons/web/static/src/xml/dialog.xml
index ae9b33ca373..ae9b33ca373 100644
--- a/addons/web/static/src/xml/base_common.xml
+++ b/addons/web/static/src/xml/dialog.xml