[IMP] website: theme customization assets recomputing

Assets are now split in multiple files and there is not a route which
always leads to the last version of an asset. This commit adapts theme
customization (without reloading) to these new features.

5 files changed, 32 insertions, 79 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 6492dbbc64a..4d946d1b7fa 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -655,11 +655,3 @@ ul.oe_menu_editor .disclose {
   position: absolute;
   z-index: 1;
 }
-
-/* ---- force the browse to re-compute the stylesheets ---- */
-body.theme_customize_css_loading {
-  magin-top: 1px;
-}
-body.theme_customize_css_loading #wrapwrap {
-  magin-top: -1px;
-}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 8f31a4889a1..e4bc4631ad7 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -565,11 +565,3 @@ $infobar_height: 20px
             opacity: 0.3
             position: absolute
             z-index: 1
-
-/* ---- force the browse to re-compute the stylesheets ---- */
-body.theme_customize_css_loading
-    magin-top: 1px
-    #wrapwrap
-        magin-top: -1px
-
-// }}}
diff --git a/addons/website/static/src/css/website.editor.css b/addons/website/static/src/css/website.editor.css
index 28ed8c94780..f1436929da1 100644
--- a/addons/website/static/src/css/website.editor.css
+++ b/addons/website/static/src/css/website.editor.css
@@ -253,11 +253,3 @@
   position: absolute;
   z-index: 1;
 }
-
-/* ---- force the browse to re-compute the stylesheets ---- */
-body.theme_customize_css_loading {
-  magin-top: 1px;
-}
-body.theme_customize_css_loading #wrapwrap {
-  magin-top: -1px;
-}
diff --git a/addons/website/static/src/css/website.editor.sass b/addons/website/static/src/css/website.editor.sass
index 8135a7af210..b7d2d28edda 100644
--- a/addons/website/static/src/css/website.editor.sass
+++ b/addons/website/static/src/css/website.editor.sass
@@ -224,11 +224,3 @@ $infobar_height: 20px
             opacity: 0.3
             position: absolute
             z-index: 1
-
-/* ---- force the browse to re-compute the stylesheets ---- */
-body.theme_customize_css_loading
-    magin-top: 1px
-    #wrapwrap
-        magin-top: -1px
-
-// }}}
diff --git a/addons/website/static/src/js/website.theme.js b/addons/website/static/src/js/website.theme.js
index 726549642e5..394c8afe843 100644
--- a/addons/website/static/src/js/website.theme.js
+++ b/addons/website/static/src/js/website.theme.js
@@ -3,6 +3,7 @@ odoo.define('website.theme', function (require) {
 
 var ajax = require('web.ajax');
 var core = require('web.core');
+var session = require('web.session');
 var Widget = require('web.Widget');
 var base = require('web_editor.base');
 var website = require('website.website');
@@ -121,57 +122,41 @@ var Theme = Widget.extend({
         });
         return xml_ids;
     },
-    compute_stylesheets: function () {
-        var self = this;
-        self.has_error = false;
-        $('link[href*=".assets_"]').attr('data-loading', true);
-        function theme_customize_css_onload() {
-            if ($('link[data-loading]').size()) {
-                $('body').toggleClass('theme_customize_css_loading');
-                setTimeout(theme_customize_css_onload, 50);
-            } else {
-                $('body').removeClass('theme_customize_css_loading');
-                self.$el.removeClass("loading");
-
-                if (window.getComputedStyle($('button[data-toggle="collapse"]:first')[0]).getPropertyValue('position') === 'static' ||
-                    window.getComputedStyle($('#theme_customize_modal')[0]).getPropertyValue('display') === 'none') {
-                    if (self.has_error) {
-                        window.location.hash = "theme=true";
-                        window.location.reload();
-                    } else {
-                        self.has_error = true;
-                        $('link[href*=".assets_"][data-error]').removeAttr('data-error').attr('data-loading', true);
-                        self.update_stylesheets();
-                        setTimeout(theme_customize_css_onload, 50);
-                    }
-                }
-            }
-        }
-        theme_customize_css_onload();
-    },
-    update_stylesheets: function () {
-        $('link[href*=".assets_"]').each(function update () {
-            var $style = $(this);
-            var href = $style.attr("href").replace(/[^\/]+$/, new Date().getTime());
-            var $asset = $('<link rel="stylesheet" href="'+href+'"/>');
-            $asset.attr("onload", "$(this).prev().attr('disable', true).remove(); $(this).removeAttr('onload').removeAttr('onerror');");
-            $asset.attr("onerror", "$(this).prev().removeAttr('data-loading').attr('data-error','loading'); $(this).attr('disable', true).remove();");
-            $style.after($asset);
-        });
-    },
     update_style: function (enable, disable, reload) {
-        var self = this;
-        if (this.$el.hasClass("loading")) return;
-        this.$el.addClass("loading");
+        if (this.$el.hasClass("loading")) {
+            return;
+        }
+        this.$el.addClass('loading');
 
-        if (!reload && $('link[href*=".assets_"]').size()) {
-            this.compute_stylesheets();
+        if (!reload && !session.debug) {
+            var self = this;
             return ajax.jsonRpc('/website/theme_customize', 'call', {
-                    'enable': enable,
-                    'disable': disable
-                }).then(function () {
-                    self.update_stylesheets();
+                enable: enable,
+                disable: disable,
+                get_bundle: true,
+            }).then(function (bundleHTML) {
+                var $links = $('link[href*=".assets_frontend"]');
+                var $newLinks = $(bundleHTML).filter('link');
+
+                var linksLoaded = $.Deferred();
+                var nbLoaded = 0;
+                $newLinks.on('load', function (e) {
+                    if (++nbLoaded >= $newLinks.length) {
+                        linksLoaded.resolve();
+                    }
                 });
+                $newLinks.on('error', function (e) {
+                    linksLoaded.reject();
+                    window.location.hash = "theme=true";
+                    window.location.reload();
+                });
+
+                $links.last().after($newLinks);
+                return linksLoaded.then(function () {
+                    $links.remove();
+                    self.$el.removeClass('loading');
+                });
+            });
         } else {
             var href = '/website/theme_customize_reload'+
                 '?href='+encodeURIComponent(window.location.href)+