From ddf2e74b4cf503ba651174bc7f280bf2f31a215e Mon Sep 17 00:00:00 2001 From: "Arthur Detroux (ard)" Date: Wed, 29 Jun 2022 07:22:18 +0000 Subject: [PATCH] [FIX] website: fix gray color picker Commit [1] changed the way styles are handled. Now that the edition of website is done in an iframe, the styles are computed inside the iframe instead of the top window / global document element. But for computing the gray colors, a base style defined by `web_editor/color_palette.scss` is needed. This style is not part of the frontend assets, so using the iframe to fetch it creates bogus gray, which results in the feature not working. Steps to reproduce: - Go on the website editor - Select the THEME tab - At the bottom expand the gray color picker - Use the settings - The preview is not updated while sliding. - The colors are not updated in the page. This commit fixes the bug by fetching the base style from the top window (where backend assets are present). [1]: https://github.com/odoo/odoo/commit/212a8bfdd21269b18054200b9e2585e1c95540d6 task-2687506 Part-of: odoo/odoo#94564 --- .../static/src/js/editor/snippets.options.js | 7 ++- .../static/tests/tours/gray_color_palette.js | 62 +++++++++++++++++++ addons/website/tests/test_ui.py | 3 + 3 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 addons/website/static/tests/tours/gray_color_palette.js diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 6ff5c31bf9e..eb6296ce526 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -985,12 +985,13 @@ options.registry.OptionsTab = options.Class.extend({ const hues = []; const saturationDiffs = []; let oneHasNoSaturation = false; + const baseStyle = getComputedStyle(document.documentElement); for (let id = 100; id <= 900; id += 100) { const gray = weUtils.getCSSVariableValue(`${id}`, style); const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray); const grayHSL = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue); - const baseGray = weUtils.getCSSVariableValue(`base-${id}`, style); + const baseGray = weUtils.getCSSVariableValue(`base-${id}`, baseStyle); const baseGrayRGB = ColorpickerWidget.convertCSSColorToRgba(baseGray); const baseGrayHSL = ColorpickerWidget.convertRgbToHsl(baseGrayRGB.red, baseGrayRGB.green, baseGrayRGB.blue); @@ -1201,8 +1202,8 @@ options.registry.OptionsTab = options.Class.extend({ * @returns {String} the adjusted color of gray */ _buildGray(id) { - const ownerDocument = this.$target[0].ownerDocument; - const gray = weUtils.getCSSVariableValue(`base-${id}`, ownerDocument.defaultView.getComputedStyle(ownerDocument.documentElement)); + // Getting base grays defined in color_palette.scss + const gray = weUtils.getCSSVariableValue(`base-${id}`, getComputedStyle(document.documentElement)); const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray); const hsl = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue); const adjustedGrayRGB = ColorpickerWidget.convertHslToRgb(this.grayParams[this.GRAY_PARAMS.HUE], diff --git a/addons/website/static/tests/tours/gray_color_palette.js b/addons/website/static/tests/tours/gray_color_palette.js new file mode 100644 index 00000000000..fcd33c6afa2 --- /dev/null +++ b/addons/website/static/tests/tours/gray_color_palette.js @@ -0,0 +1,62 @@ +/** @odoo-module **/ +import wTourUtils from 'website.tour_utils'; + +wTourUtils.registerEditionTour('website_gray_color_palette', { + test: true, + url: '/', + edition: true, +}, [ + { + content: "Go to theme options", + trigger: '.o_we_customize_theme_btn', + extra_trigger: '#oe_snippets.o_loaded', + }, + { + content: "Toggle gray color palette", + trigger: '.o_we_gray_preview.o_we_collapse_toggler', + }, + { + content: "Drag the hue slider", + trigger: '.o_we_slider_tint[data-param="gray-hue"]', + run: () => { + const slider = document.querySelector('.o_we_slider_tint[data-param="gray-hue"] input'); + slider.value = 100; + slider.dispatchEvent(new InputEvent('change', {bubbles: true})); + }, + }, + { + // This step is here because the option is applied but triggers a reloading of the + // css value, so if the second value is sent too soon, it will be ignored. + // Clicking on the snippet tab and back will ensure that the mutex is cleared, + // and therefore we can apply the saturation step. + content: "Click on the blacks tab and back on theme to ensure the changes are applied", + trigger: '.o_we_add_snippet_btn', + }, + { + content: "Go back to theme options", + trigger: '.o_we_customize_theme_btn', + extra_trigger: '#o_scroll', + }, + { + content: "Drag the saturation slider", + trigger: '.o_we_user_value_widget[data-param="gray-extra-saturation"]', + extra_trigger: ':not(:has(.o_we_ui_loading))', + run: () => { + const slider = document.querySelector('.o_we_user_value_widget[data-param="gray-extra-saturation"] input'); + slider.value = 15; + slider.dispatchEvent(new InputEvent('change', {bubbles: true})); + } + }, + ...wTourUtils.clickOnSave(), + { + content: "Wait for the iframe to be loaded", + trigger: 'iframe body:not(.editor_enable)', + run: () => { + const iframeEl = document.querySelector('.o_website_preview .o_iframe'); + const styles = iframeEl.contentWindow.getComputedStyle(iframeEl.contentDocument.documentElement); + if (styles.getPropertyValue('--900').toString().replace(/ /g, '') !== '#222F1B') { + console.error('The value for the gray 900 is not right'); + } + } + }, +]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index e1a142046e8..4b64a63d71c 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -311,3 +311,6 @@ class TestUi(odoo.tests.HttpCase): def test_21_website_start_cloned_snippet(self): self.start_tour('/web', 'website_start_cloned_snippet', login='admin') + + def test_22_website_gray_color_palette(self): + self.start_tour('/web', 'website_gray_color_palette', login='admin')