[IMP] web: lazy load nvd3, ace and fullCalendar lib to reduce asset size

7 files changed, 85 insertions, 65 deletions

diff --git a/addons/web/static/src/js/core/ajax.js b/addons/web/static/src/js/core/ajax.js
index 63ee1f47c40..5bab96a0c1e 100644
--- a/addons/web/static/src/js/core/ajax.js
+++ b/addons/web/static/src/js/core/ajax.js
@@ -433,15 +433,52 @@ var loadXML = (function () {
     };
 })();
 
-return {
+
+/**
+ * Loads the given js and css libraries. Note that the ajax loadJS and loadCSS methods
+ * don't do anything if the given file is already loaded.
+ *
+ * @param {Object} libs
+ * @Param {Array | Array<Array>} [libs.jsLibs=[]] The list of JS files that we want to
+ *   load. The list may contain strings (the files to load), or lists of strings. The
+ *   first level is loaded sequentially, and files listed in inner lists are loaded in
+ *   parallel.
+ * @param {Array<string>} [libs.cssLibs=[]] A list of css files, to be loaded in
+ *   parallel
+ *
+ * @returns {Deferred}
+ */
+function loadLibs (libs) {
+    var defs = [];
+    _.each(libs.jsLibs || [], function (urls) {
+        defs.push($.when.apply($, defs).then(function () {
+            if (typeof(urls) === 'string') {
+                return ajax.loadJS(urls);
+            } else {
+                return $.when.apply($, _.map(urls, function (url) {
+                    return ajax.loadJS(url);
+                }));
+            }
+        }));
+    });
+    _.each(libs.cssLibs || [], function (url) {
+        defs.push(ajax.loadCSS(url));
+    });
+    return $.when.apply($, defs);
+}
+
+var ajax = {
     jsonRpc: jsonRpc,
     jsonpRpc: jsonpRpc,
     rpc: rpc,
     loadCSS: loadCSS,
     loadJS: loadJS,
     loadXML: loadXML,
+    loadLibs: loadLibs,
     get_file: get_file,
     post: post,
 };
 
+return ajax;
+
 });
diff --git a/addons/web/static/src/js/fields/abstract_field.js b/addons/web/static/src/js/fields/abstract_field.js
index 9b484354544..bdb745298b2 100644
--- a/addons/web/static/src/js/fields/abstract_field.js
+++ b/addons/web/static/src/js/fields/abstract_field.js
@@ -30,10 +30,13 @@ odoo.define('web.AbstractField', function (require) {
  * @module web.AbstractField
  */
 
+var ajax = require('web.ajax');
 var field_utils = require('web.field_utils');
 var Widget = require('web.Widget');
 
 var AbstractField = Widget.extend({
+    cssLibs: [],
+    jsLibs: [],
     events: {
         'keydown': '_onKeydown',
     },
@@ -173,6 +176,14 @@ var AbstractField = Widget.extend({
             return self._render();
         });
     },
+    /**
+     * Loads the libraries listed in this.jsLibs and this.cssLibs
+     *
+     * @override
+     */
+    willStart: function () {
+        return $.when(ajax.loadLibs(this), this._super.apply(this, arguments));
+    },
 
     //--------------------------------------------------------------------------
     // Public
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 4c4671275f2..7b15d30202d 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -8,7 +8,6 @@ odoo.define('web.basic_fields', function (require) {
  */
 
 var AbstractField = require('web.AbstractField');
-var ajax = require('web.ajax');
 var config = require('web.config');
 var core = require('web.core');
 var crash_manager = require('web.crash_manager');
@@ -1949,6 +1948,14 @@ var FieldToggleBoolean = AbstractField.extend({
 
 var JournalDashboardGraph = AbstractField.extend({
     className: "o_dashboard_graph",
+    cssLibs: [
+        '/web/static/lib/nvd3/nv.d3.css'
+    ],
+    jsLibs: [
+        '/web/static/lib/nvd3/d3.v3.js',
+        '/web/static/lib/nvd3/nv.d3.js',
+        '/web/static/src/js/libs/nvd3.js'
+    ],
     init: function () {
         this._super.apply(this, arguments);
         this.graph_type = this.attrs.graph_type;
@@ -2069,7 +2076,6 @@ var JournalDashboardGraph = AbstractField.extend({
             this._customizeChart();
         }
     },
-
 });
 
 /**
@@ -2282,26 +2288,15 @@ var FieldDomain = AbstractField.extend({
  */
 var AceEditor = DebouncedField.extend({
     template: "AceEditor",
+    jsLibs: [
+        '/web/static/lib/ace/ace.odoo-custom.js',
+        [
+            '/web/static/lib/ace/mode-python.js',
+            '/web/static/lib/ace/mode-xml.js'
+        ]
+    ],
     events: {}, // events are triggered manually for this debounced widget
     /**
-     * @override willStart from AbstractField (Widget)
-     * Loads the ace library if not already loaded.
-     *
-     * @returns {Deferred}
-     */
-    willStart: function () {
-        var loadJSDef;
-        if (!window.ace) {
-            loadJSDef = ajax.loadJS('/web/static/lib/ace/ace.odoo-custom.js').then(function () {
-                return $.when(
-                    ajax.loadJS('/web/static/lib/ace/mode-python.js'),
-                    ajax.loadJS('/web/static/lib/ace/mode-xml.js')
-                );
-            });
-        }
-        return $.when(this._super.apply(this, arguments), loadJSDef);
-    },
-    /**
      * @override start from AbstractField (Widget)
      *
      * @returns {Deferred}
diff --git a/addons/web/static/src/js/libs/nvd3.js b/addons/web/static/src/js/libs/nvd3.js
index 963a1454c3d..eebee6c9459 100644
--- a/addons/web/static/src/js/libs/nvd3.js
+++ b/addons/web/static/src/js/libs/nvd3.js
@@ -6,10 +6,6 @@ odoo.define('web.nvd3.extensions', function () {
  * in place.
  */
 
-if (!('nv' in window)) {
-    return;
-}
-
 nv.dev = false;  // sets nvd3 library in production mode
 
 // monkey patch nvd3 to allow removing eventhandler on windowresize events
diff --git a/addons/web/static/src/js/views/abstract_view.js b/addons/web/static/src/js/views/abstract_view.js
index 644ba8ac985..873fcc27b0d 100644
--- a/addons/web/static/src/js/views/abstract_view.js
+++ b/addons/web/static/src/js/views/abstract_view.js
@@ -23,13 +23,12 @@ odoo.define('web.AbstractView', function (require) {
  * in most case discarded.
  */
 
+var ajax = require('web.ajax');
 var Class = require('web.Class');
 var Context = require('web.Context');
-var ajax = require('web.ajax');
 var AbstractModel = require('web.AbstractModel');
 var AbstractRenderer = require('web.AbstractRenderer');
 var AbstractController = require('web.AbstractController');
-var Context = require('web.Context');
 
 var AbstractView = Class.extend({
     // name displayed in view switchers
@@ -51,8 +50,6 @@ var AbstractView = Class.extend({
         Model: AbstractModel,
         Renderer: AbstractRenderer,
         Controller: AbstractController,
-        js_libs: [],
-        css_libs: [],
     },
 
     /**
@@ -125,7 +122,15 @@ var AbstractView = Class.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Main method of the view class.
+     * Main method of the view class. Create a controller, and make sure that
+     * data and libraries are loaded.
+     *
+     * There is a unusual thing going in this method with parents: we create
+     * renderer/model with parent as parent, then we have to reassign them at
+     * the end to make sure that we have the proper relationships.  This is
+     * necessary to solve the problem that the controller need the model and the
+     * renderer to be instantiated, but the model need a parent to be able to
+     * load itself, and the renderer needs the data in its constructor.
      *
      * @param {Widget} parent The parent of the resulting Controller (most
      *      likely a view manager)
@@ -133,7 +138,7 @@ var AbstractView = Class.extend({
      */
     getController: function (parent) {
         var self = this;
-        return $.when(this._loadData(parent), this._loadLibs()).then(function () {
+        return $.when(this._loadData(parent), ajax.loadLibs(this)).then(function () {
             var model = self.getModel();
             var state = model.get(arguments[0]);
             var renderer = self.getRenderer(parent, state);
@@ -203,40 +208,6 @@ var AbstractView = Class.extend({
         return model.load(this.loadParams);
     },
     /**
-     * Makes sure that the js_libs and css_libs are properly loaded. Note that
-     * the ajax loadJS and loadCSS methods don't do anything if the given file
-     * is already loaded.
-     *
-     * @private
-     * @returns {Deferred}
-     */
-    _loadLibs: function () {
-        var defs = [];
-        var jsDefs;
-        _.each(this.config.js_libs, function (urls) {
-            if (typeof(urls) === 'string') {
-                // js_libs is an array of urls: those urls can be loaded in
-                // parallel
-                defs.push(ajax.loadJS(urls));
-            } else {
-                // js_libs is an array of arrays of urls: those arrays of urls
-                // must be loaded sequentially, but the urls inside each
-                // sub-array can be loaded in parallel
-                defs.push($.when.apply($, jsDefs).then(function () {
-                    jsDefs = [];
-                    _.each(urls, function (url) {
-                        jsDefs.push(ajax.loadJS(url));
-                    });
-                    return $.when.apply($, jsDefs);
-                }));
-            }
-        });
-        _.each(this.config.css_libs, function (url) {
-            defs.push(ajax.loadCSS(url));
-        });
-        return $.when.apply($, defs);
-    },
-    /**
      * Loads the subviews for x2many fields when they are not inline
      *
      * @private
diff --git a/addons/web/static/src/js/views/calendar/calendar_view.js b/addons/web/static/src/js/views/calendar/calendar_view.js
index 71a6c30b756..47c16300508 100644
--- a/addons/web/static/src/js/views/calendar/calendar_view.js
+++ b/addons/web/static/src/js/views/calendar/calendar_view.js
@@ -21,6 +21,8 @@ var fieldsToGather = [
 var CalendarView = AbstractView.extend({
     display_name: _lt('Calendar'),
     icon: 'fa-calendar',
+    jsLibs: ['/web/static/lib/fullcalendar/js/fullcalendar.js'],
+    cssLibs: ['/web/static/lib/fullcalendar/css/fullcalendar.css'],
     config: {
         Model: CalendarModel,
         Controller: CalendarController,
diff --git a/addons/web/static/src/js/views/graph/graph_view.js b/addons/web/static/src/js/views/graph/graph_view.js
index 423d52ca64c..a5ad21e1816 100644
--- a/addons/web/static/src/js/views/graph/graph_view.js
+++ b/addons/web/static/src/js/views/graph/graph_view.js
@@ -19,6 +19,14 @@ var _lt = core._lt;
 var GraphView = AbstractView.extend({
     display_name: _lt('Graph'),
     icon: 'fa-bar-chart',
+    cssLibs: [
+        '/web/static/lib/nvd3/nv.d3.css'
+    ],
+    jsLibs: [
+        '/web/static/lib/nvd3/d3.v3.js',
+        '/web/static/lib/nvd3/nv.d3.js',
+        '/web/static/src/js/libs/nvd3.js'
+    ],
     config: {
         Model: GraphModel,
         Controller: Controller,