[FIX] website: restore broken promises in website

Since the switch to jQuery 3, Odoo uses native promises in its JS. Some
mistakes were made in the website app during conversion from old jQuery
deferred to native promises.

- `this` -> `self` when wrapping in a promise
- `.always(fct)` -> `.then(fct).guardedCatch(fct)`
- a function returned sometimes a jQuery deferred, sometimes a native
  promise. This made the caller fail when using `always` or fail
  when using `guardedCatch`

closes odoo/odoo#31887

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/editor/widget_link.js

@@ -49,10 +49,13 @@ weWidgets.LinkDialog.include({
             _.each(anchors, function (anchor) {
                 $selectMenu.append($('<option>', {text: anchor}));
             });
-        }).always(function () {
+            always();
+        }).guardedCatch(always);
+
+        function always() {
             $anchorsLoading.addClass('d-none');
             $selectMenu.prop("selectedIndex", -1);
-        });
+        }
     },
 
     //--------------------------------------------------------------------------

addons/website/static/src/js/menu/content.js

@@ -951,7 +951,7 @@ var PageManagement = Widget.extend({
 // TODO: This function should be integrated in a widget in the future
 function _deletePage(pageId, fromPageManagement) {
     var self = this;
-    var prom = new Promise(function (resolve, reject) {
+    new Promise(function (resolve, reject) {
         // Search the page dependencies
         self._getPageDependencies(pageId)
         .then(function (dependencies) {
@@ -974,8 +974,7 @@ function _deletePage(pageId, fromPageManagement) {
         }).then(function () {
             if (fromPageManagement) {
                 window.location.reload(true);
-            }
-            else {
+            } else {
                 window.location.href = '/';
             }
         }, reject);

addons/website/static/src/js/utils.js

@@ -13,13 +13,13 @@ var qweb = core.qweb;
  * @returns {Deferred<string[]>}
  */
 function loadAnchors(url) {
-    var def;
-    if (url !== window.location.pathname && url[0] !== '#') {
-        def = $.get(window.location.origin + url);
-    } else {
-        def = Promise.resolve(document.body.outerHTML);
-    }
-    return def.then(function (response) {
+    return new Promise(function (resolve, reject) {
+        if (url !== window.location.pathname && url[0] !== '#') {
+            $.get(window.location.origin + url).then(resolve, reject);
+        } else {
+            resolve(document.body.outerHTML);
+        }
+    }).then(function (response) {
         return _.map($(response).find('[id][data-anchor=true]'), function (el) {
             return '#' + el.id;
         });

addons/website/static/src/js/widgets/ace.js

@@ -65,7 +65,7 @@ var WebsiteAceEditor = AceEditor.extend({
             }
             return Promise.all(defs).then((function () {
                 window.location.reload();
-                return new Promise(function() { });
+                return new Promise(function () {});
             }));
         }).bind(this));
     },

addons/website/static/src/js/widgets/theme.js

@@ -218,17 +218,17 @@ var ThemeCustomizeDialog = Dialog.extend({
         var self = this;
         var def = new Promise(function (resolve, reject) {
             var $image = $('<img/>');
-            var editor = new weWidgets.MediaDialog(this, {
+            var editor = new weWidgets.MediaDialog(self, {
                 onlyImages: true,
                 firstFilters: ['background'],
             }, $image[0]);
 
-            editor.on('save', this, function (media) { // TODO use scss customization instead (like for user colors)
+            editor.on('save', self, function (media) { // TODO use scss customization instead (like for user colors)
                 var src = $(media).attr('src');
                 self._rpc({
                     model: 'ir.model.data',
                     method: 'get_object_reference',
-                    args: ['website', this.CUSTOM_BODY_IMAGE_XML_ID],
+                    args: ['website', self.CUSTOM_BODY_IMAGE_XML_ID],
                 }).then(function (data) {
                     return self._rpc({
                         model: 'ir.ui.view',
@@ -241,7 +241,7 @@ var ThemeCustomizeDialog = Dialog.extend({
                     });
                 }).then(resolve).guardedCatch(resolve);
             });
-            editor.on('cancel', this, function () {
+            editor.on('cancel', self, function () {
                 resolve();
             });
 
@@ -435,15 +435,15 @@ var ThemeCustomizeDialog = Dialog.extend({
         var colorType = $color.data('colorType');
 
         return new Promise(function (resolve, reject) {
-            var colorpicker = new ColorpickerDialog(this, {
+            var colorpicker = new ColorpickerDialog(self, {
                 defaultColor: $color.css('background-color'),
             });
             var chosenColor = undefined;
-            colorpicker.on('colorpicker:saved', this, function (ev) {
+            colorpicker.on('colorpicker:saved', self, function (ev) {
                 ev.stopPropagation();
                 chosenColor = ev.data.cssColor;
             });
-            colorpicker.on('closed', this, function (ev) {
+            colorpicker.on('closed', self, function (ev) {
                 if (chosenColor === undefined) {
                     resolve();
                     return;
@@ -461,7 +461,7 @@ var ThemeCustomizeDialog = Dialog.extend({
                     colors['epsilon'] = 'null';
                 }
 
-                self._makeSCSSCusto(url, colors).always(resolve);
+                self._makeSCSSCusto(url, colors).then(resolve).guardedCatch(resolve);
             });
             colorpicker.open();
         });
@@ -499,25 +499,27 @@ var ThemeCustomizeDialog = Dialog.extend({
      * @private
      */
     _quickEdit: function ($inputData) {
+        var self = this;
         var text = $inputData.text().trim();
         var value = parseFloat(text) || '';
         var unit = text.match(/([^\s\d]+)$/)[1];
 
         var def = new Promise(function (resolve, reject) {
-            var qEdit = new QuickEdit(this, value, unit);
-            qEdit.on('QuickEdit:save', this, function (ev) {
+            var qEdit = new QuickEdit(self, value, unit);
+            qEdit.on('QuickEdit:save', self, function (ev) {
                 ev.stopPropagation();
 
                 var value = ev.data.value;
                 // Convert back to rem if needed
                 if ($inputData.data('unit') === 'rem' && unit === 'px' && value !== 'null') {
-                    value = parseFloat(value) / this.PX_BY_REM + 'rem';
+                    value = parseFloat(value) / self.PX_BY_REM + 'rem';
                 }
 
                 var values = {};
                 values[$inputData.data('value')] = value;
-                this._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values)
-                    .always(resolve);
+                self._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values)
+                    .then(resolve)
+                    .guardedCatch(resolve);
             });
             qEdit.appendTo($inputData.closest('.o_theme_customize_option'));
         });