[FIX] web_editor: remove custom gradient button from colors inventory

Since [1] when resetting the background color of the header, the footer
or the copyright, the 'menu-custom' property is saved as the 'false'
string.
There is no visual effect of this problem, but in case that property is
used in an SCSS `color-yiq` function call, it will trigger an error.

This commit solves this by removing the root cause of this 'false'
string: during the initialisation of color palettes a list of named
colors is built by browsing the color buttons and associating their
data-color attribute to their background-color, except for buttons
containing a gradient color.
Unfortunately this inventory also looked at the "Custom" gradient
button: this button has no background color (and was thus not detected
as being a gradient and therefore not excluded from the inventory) and
it has data-color="false". It therefore introduced a mapping between ""
and "false" - thus making the reset operation's empty string mapped to
the "false" string. This commit removes that button from the named
colors inventory.

Steps to reproduce:
- select the header
- open the "Colors" palette
- click on the None button (the trashcan icon)
=> the customization properties attachment contained a line
```
'menu-custom': 'false',
```

[1]: https://github.com/odoo/odoo/commit/a48a30f954afcb6ff3a59c4f32b05fd0c2cfcd2b

task-2633169

closes odoo/odoo#86548

X-original-commit: 2f28c37f2386ad7c1dcca79d9b516820f9607d8d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benoit Socias
2022-03-16 23:22:46 +01:00
parent 76b8d8f550
commit 3cf9416175
@@ -248,7 +248,7 @@ const ColorPaletteWidget = Widget.extend({
const compatibilityColorNames = ['primary', 'secondary', 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger'];
this.colorNames = [...compatibilityColorNames];
this.colorToColorNames = {};
this.el.querySelectorAll('button[data-color]').forEach(elem => {
this.el.querySelectorAll('button[data-color]:not(.o_custom_gradient_btn)').forEach(elem => {
const colorName = elem.dataset.color;
if (weUtils.isColorGradient(colorName)) {
return;