[FIX] web_editor, website: debounce we-range events

This commit allows to debounce the events of the RangeUserValueWidget so
that the user can use this widget with the left and right arrows without
having a lag effect (especially on the image quality option).
In addition, steps were added in the website_gray_color_palette tour to
let the time for the debounce to trigger the changes.

task-2601533

closes odoo/odoo#109165

X-original-commit: dddec7489f5cb4e48368684a8783015517c394ee
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -2314,6 +2314,8 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
             this.outputEl.classList.add('ms-2');
             this.containerEl.appendChild(this.outputEl);
         }
+
+        this._onInputChange = _.debounce(this._onInputChange, 100);
     },
 
     //--------------------------------------------------------------------------

addons/website/static/tests/tours/gray_color_palette.js

@@ -43,6 +43,11 @@ wTourUtils.registerWebsitePreviewTour('website_gray_color_palette', {
             slider.dispatchEvent(new InputEvent('change', {bubbles: true}));
         },
     },
+    {
+        content: "Check the preview of the gray 900 after hue change",
+        trigger: '[variable="900"][style="background-color: rgb(36, 41, 33) !important;"]',
+        run: () => {}, // This is a check.
+    },
     ...waitForCSSReload(),
     {
         content: "Drag the saturation slider",
@@ -54,6 +59,11 @@ wTourUtils.registerWebsitePreviewTour('website_gray_color_palette', {
             slider.dispatchEvent(new InputEvent('change', {bubbles: true}));
         }
     },
+    {
+        content: "Check the preview of the gray 900 after saturation change",
+        trigger: '[variable="900"][style="background-color: rgb(34, 47, 27) !important;"]',
+        run: () => {}, // This is a check.
+    },
     ...waitForCSSReload(),
     {
         content: "Wait for the iframe to be loaded",