[IMP] web: get rid of WidgetButton template

Qweb rendering is great to render "complex" widget structures. However,
using it to render something as simple as a button was not very
meaningful. This commit deletes the "WidgetButton" template and replaces
it with an utility JS function to render buttons according to given
parameters.

Also, this change will allow a better change. Before this commit, the
only templates left in the "base_common.xml" file are the "WidgetButton"
and the "Dialog" ones. With the removal of "WidgetButton", the file can
now be lazy loaded only if necessary, on the first dialog instantiation.
This will allow to remove the need to load static XML files on each
frontend page loading.

3 files changed, 75 insertions, 40 deletions

diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index 6214c99483e..ec3a3109053 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -2,6 +2,7 @@ odoo.define('web.Dialog', function (require) {
 "use strict";
 
 var core = require('web.core');
+var dom = require('web.dom');
 var Widget = require('web.Widget');
 
 var QWeb = core.qweb;
@@ -71,36 +72,31 @@ var Dialog = Widget.extend({
         }
         this.$el.addClass('modal-body ' + this.dialogClass);
     },
-
-    set_buttons: function(buttons) {
+    /**
+     * @param {Object[]} buttons - @see init
+     */
+    set_buttons: function (buttons) {
         var self = this;
-
-        self.$footer.empty();
-
-        _.each(buttons, function(b) {
-            var text = b.text || "";
-            var classes = b.classes || ((buttons.length === 1)? "btn-primary" : "btn-default");
-
-            var $b = $(QWeb.render('WidgetButton', {
-                widget: {
-                    string: text,
-                    node: {
-                        attrs: {'class': classes, icon: b.icon}
-                    },
-                    fa_icon: true
-                }
-            }));
-            $b.prop('disabled', b.disabled);
-            $b.on('click', function(e) {
-                var click_def;
-                if(b.click) {
-                    click_def = b.click.call(self, e);
+        this.$footer.empty();
+        _.each(buttons, function (buttonData) {
+            var $button = dom.renderButton({
+                attrs: {
+                    class: buttonData.classes || (buttons.length > 1 ? 'btn-default' : 'btn-primary'),
+                    disabled: buttonData.disabled,
+                },
+                icon: buttonData.icon,
+                text: buttonData.text,
+            });
+            $button.on('click', function (e) {
+                var def;
+                if (buttonData.click) {
+                    def = buttonData.click.call(self, e);
                 }
-                if(b.close) {
-                    $.when(click_def).always(self.close.bind(self));
+                if (buttonData.close) {
+                    $.when(def).always(self.close.bind(self));
                 }
             });
-            self.$footer.append($b);
+            self.$footer.append($button);
         });
     },
 
diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 2dad9eb912f..e1592c53f73 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -19,8 +19,8 @@ var core = require('web.core');
  * @params {Array} [callbacks] array of {widget: w, callback_args: args} such
  * that on_attach_callback() will be called on each w with arguments args
  */
-function _notify (content, callbacks) {
-    _.each(callbacks, function(c) {
+function _notify(content, callbacks) {
+    _.each(callbacks, function (c) {
         if (c.widget && c.widget.on_attach_callback) {
             c.widget.on_attach_callback(c.callback_args);
         }
@@ -115,14 +115,14 @@ return {
      * @return {jQuery} the detached elements
      */
     detach: function (to_detach, options) {
-        _.each(to_detach, function(d) {
+        _.each(to_detach, function (d) {
             if (d.widget.on_detach_callback) {
                 d.widget.on_detach_callback(d.callback_args);
             }
         });
         var $to_detach = options && options.$to_detach;
         if (!$to_detach) {
-            $to_detach = $(_.map(to_detach, function(d) {
+            $to_detach = $(_.map(to_detach, function (d) {
                 return d.widget.el;
             }));
         }
@@ -160,6 +160,47 @@ return {
             _notify(content, options.callbacks);
         }
     },
+    /**
+     * Renders a button with standard odoo template. This does not use any xml
+     * template to avoid forcing the frontend part to lazy load a xml file for
+     * each widget which might want to create a simple button.
+     *
+     * @param {Object} options
+     * @param {Object} [options.attrs] - Attributes to put on the button element
+     * @param {string} [options.attrs.type="button"]
+     * @param {string} [options.attrs.class="btn-default"]
+     *        Note: automatically completed with "btn btn-X" (@see options.size
+     *        for the value of X)
+     * @param {string} [options.size=sm] - @see options.attrs.class
+     * @param {string} [options.icon]
+     *        The specific fa icon class (for example "fa-home") or an URL for
+     *        an image to use as icon.
+     * @param {string} [options.text] - the button's text
+     * @returns {jQuery}
+     */
+    renderButton: function (options) {
+        var params = options.attrs || {};
+        params.type = params.type || 'button';
+        params.class = 'btn btn-' + (options.size || 'sm') + ' ' + (params.class || 'btn-default');
+        var $button = $('<button/>', params);
+        if (options.icon) {
+            if (options.icon.substr(0, 3) === 'fa-') {
+                $button.append($('<i/>', {
+                    class: 'fa fa-fw o_button_icon ' + options.icon,
+                }));
+            } else {
+                $button.append($('<img/>', {
+                    src: options.icon,
+                }));
+            }
+        }
+        if (options.text) {
+            $button.append($('<span/>', {
+                text: options.text,
+            }));
+        }
+        return $button;
+    },
 };
 
 });
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index f7c4861dd2a..08b3fabd2e2 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -4,6 +4,7 @@ odoo.define('web.FormRenderer', function (require) {
 var BasicRenderer = require('web.BasicRenderer');
 var config = require('web.config');
 var core = require('web.core');
+var dom = require('web.dom');
 
 var _t = core._t;
 var qweb = core.qweb;
@@ -117,14 +118,14 @@ var FormRenderer = BasicRenderer.extend({
      * Disable stat buttons so that they can't be clicked anymore
      *
      */
-    disableButtons: function() {
+    disableButtons: function () {
         this.$('.oe_button_box button').attr('disabled', true);
     },
     /**
      * Enable stat buttons so they can be clicked again
      *
      */
-    enableButtons: function() {
+    enableButtons: function () {
         this.$('.oe_button_box button').removeAttr('disabled');
     },
     /**
@@ -541,14 +542,11 @@ var FormRenderer = BasicRenderer.extend({
      * @returns {jQueryElement}
      */
     _renderTagButton: function (node) {
-        var widget = {
-            node: node,
-            string: (node.attrs.string || '').replace(/_/g, '')
-        };
-        if (node.attrs.icon) {
-            widget.fa_icon = node.attrs.icon.indexOf('fa-') === 0;
-        }
-        var $button = $(qweb.render('WidgetButton', {widget: widget}));
+        var $button = dom.renderButton({
+            attrs: _.omit(node.attrs, 'icon', 'string'),
+            icon: node.attrs.icon,
+            text: (node.attrs.string || '').replace(/_/g, ''),
+        });
         $button.append(_.map(node.children, this._renderNode.bind(this)));
         this._addOnClickAction($button, node);
         this._handleAttributes($button, node);