[FIX] web_editor, *: fix wrong color retrieval in website color palettes

*: website

Commit [1] (and [2]) from the "website in backend" refactoring adapted
the colorpalette to read color information on the right document (as
the right document could now be the one of an iframe which is inside the
editor environment). Unfortunately, it did not do that correctly, making
an inconsistent API relying on the fact the colorpalette should receive
an "editable" param... while a jQuery version "$editable" param of the
same thing already existed. Doing so, it forgot to give that important
"editable" param in two cases:
- For editor toolbar colorpickers (text foreground/background edition)
- For colorpickers inside another UserValueWidget (like we-multi).

This commit solves the inconsistency by removing the need of that
"editable" params and relying on the previously existing "$editable". In
the future, this should be refactored anyway.

Steps to see the issue (A):
- Enter edit mode of one of your website page
- Select some text
- Hit the "reset" (trash button) of the text background colorpicker
=> The text becomes black for no apparent reason.

Steps to see the issue (B):
- Enter edit mode of one of your website page
- Choose a new main color for your website via the theme tab
- Select some text
- Open the colorpicker for the foreground color
- Go to the solid tab and input explicitly the main color of the website
=> The color is hardcoded on the selected text instead of using the
   text-o-color-1 class.
=> A test has been added to check this usecase. Making a test for (A)
   is less robust as it also requires the backend color names not being
   the same as the frontend ones to have the bug (otherwise it works by
   chance)... and that will be solved by the next commit of this PR
   (another test will be added by that commit too) **.

Note:
- After this commit, following (A), a bug remains: the text receives a
  strange padding (as a "inherit" background is actually applied).
  Another PR will be made to solve that (see task for more info).
- ** After this commit, (A) done in backend HTML fields instead of a
  website page leads to the same bug still. This is because of another
  problem that the following commit of this PR will solve.

[1]: https://github.com/odoo/odoo/commit/212a8bfdd21269b18054200b9e2585e1c95540d6
[2]: https://github.com/odoo/odoo/commit/03c552690b15cbf2e7d6b7812386ac64042219af

task-3237693

X-original-commit: a30206606423af9e6c8e0313c74fd6200247437e
Part-of: odoo/odoo#125131

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

@@ -1611,11 +1611,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         if (this.options.dataAttributes.selectedTab) {
             options.selectedTab = this.options.dataAttributes.selectedTab;
         }
-        const wysiwyg = this.getParent().options.wysiwyg;
-        if (wysiwyg) {
-            options.ownerDocument = wysiwyg.el.ownerDocument;
-            options.editable = wysiwyg.$editable[0];
-        }
+
         const oldColorPalette = this.colorPalette;
         this.colorPalette = new ColorPaletteWidget(this, options);
         if (oldColorPalette) {

addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js

@@ -47,8 +47,7 @@ const ColorPaletteWidget = Widget.extend({
      */
     init: function (parent, options) {
         this._super.apply(this, arguments);
-        const editableDocument = options.editable ? options.editable.ownerDocument : document;
-        this.style = editableDocument.defaultView.getComputedStyle(editableDocument.documentElement);
+
         this.options = Object.assign({
             selectedColor: false,
             resetButton: true,
@@ -65,7 +64,13 @@ const ColorPaletteWidget = Widget.extend({
         this.resetButton = this.options.resetButton;
         this.withCombinations = this.options.withCombinations;
 
+        // TODO do we really need a colorpalette in the editor working relying
+        // on the fact the editable is received from the caller and other ones
+        // that rely on the fact it is asked to the snippet menu?
         this.trigger_up('request_editable', {callback: val => this.options.$editable = val});
+        const ownerDocument = this.options.$editable[0] && this.options.$editable[0].ownerDocument;
+        const editableDocument = ownerDocument ? ownerDocument : document;
+        this.style = editableDocument.defaultView.getComputedStyle(editableDocument.documentElement);
 
         this.tabs = [{
             id: 'theme-colors',

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

@@ -0,0 +1,66 @@
+/** @odoo-module **/
+
+import wTourUtils from 'website.tour_utils';
+
+const WEBSITE_MAIN_COLOR = '#ABCDEF';
+
+wTourUtils.registerWebsitePreviewTour('website_text_edition', {
+    test: true,
+    url: '/',
+    edition: true,
+}, [
+    {
+        content: "Go to theme options",
+        trigger: '.o_we_customize_theme_btn',
+    },
+    {
+        content: "Open colorpicker to change website main color",
+        trigger: 'we-select[data-color="o-color-1"] .o_we_color_preview',
+    },
+    {
+        content: "Input the value for the new website main color (also make sure it is independent from the backend)",
+        trigger: '.o_hex_input',
+        run: `text_blur ${WEBSITE_MAIN_COLOR}`,
+    },
+    {
+        content: "Go to the blocks tab",
+        trigger: '.o_we_add_snippet_btn',
+    },
+    wTourUtils.dragNDrop({id: 's_text_block', name: 'Text'}),
+    {
+        content: "Click on the text block first paragraph (to auto select)",
+        trigger: 'iframe .s_text_block p',
+    },
+    {
+        content: "Open the foreground colorpicker",
+        trigger: '#oe-text-color',
+    },
+    {
+        content: "Go to the 'solid' tab",
+        trigger: '.o_we_colorpicker_switch_pane_btn[data-target="custom-colors"]',
+    },
+    {
+        content: "Input the website main color explicitly",
+        trigger: '.o_hex_input',
+        run: `text_blur ${WEBSITE_MAIN_COLOR}`,
+    },
+    {
+        content: "Check that paragraph now uses the main color *class*",
+        trigger: 'iframe .s_text_block p',
+        run: function (actions) {
+            const fontEl = this.$anchor[0].querySelector('font');
+            if (!fontEl) {
+                console.error("A background color should have been applied");
+                return;
+            }
+            if (fontEl.style.backgroundColor) {
+                console.error("The paragraph should not have an inline style background color");
+                return;
+            }
+            if (!fontEl.classList.contains('text-o-color-1')) {
+                console.error("The paragraph should have the right background color class");
+                return;
+            }
+        },
+    }
+]);

addons/website/tests/test_ui.py

@@ -432,3 +432,6 @@ class TestUi(odoo.tests.HttpCase):
             'channel_member_ids': [odoo.Command.create({'partner_id': partner_id.id, 'is_minimized': True})],
         })
         self.start_tour(f'/web#id={partner_id.id}&model=res.partner&view_type=form', 'test_hide_chat_window_on_preview', login='admin')
+
+    def test_29_website_text_edition(self):
+        self.start_tour('/@/', 'website_text_edition', login='admin')