From bc1b2420214fa01004caa090cf350808e792e5aa Mon Sep 17 00:00:00 2001 From: "Guillaume (gdi)" Date: Tue, 19 Apr 2022 13:08:33 +0000 Subject: [PATCH] [FIX] web_editor, website: debounce we-range events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../static/src/js/editor/snippets.options.js | 2 ++ .../website/static/tests/tours/gray_color_palette.js | 10 ++++++++++ 2 files changed, 12 insertions(+) diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 92f3896953d..8e846ebe635 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/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); }, //-------------------------------------------------------------------------- diff --git a/addons/website/static/tests/tours/gray_color_palette.js b/addons/website/static/tests/tours/gray_color_palette.js index 19228c0c67d..cd0f0901585 100644 --- a/addons/website/static/tests/tours/gray_color_palette.js +++ b/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",