[FIX] web, web_editor, *: review chess-like bg for transparency preview

*: website

The style to achieve the chess-like bg result was duplicated at many
places. The 'web' app was also actually using an image from the
'web_editor' app (we can live with it in stable as web_editor always
comes with web in auto_install but this was still a mistake).

closes odoo/odoo#54154

Also: fix some layout issue in the colorpicker widget.
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web/static/src/scss/colorpicker.scss

@@ -33,6 +33,7 @@
         }
     }
     .o_opacity_slider {
+        @extend %o-preview-alpha-background;
         position: relative;
         margin-left: 5%;
         width: 4%;
@@ -46,13 +47,6 @@
             border: 1px solid white;
             box-shadow: 0px 0px 2px 1px gray('600');
         }
-
-        &::before {
-            content: "";
-            @include o-position-absolute(0, 0, 0, 0);
-            z-index: -1;
-            background-image: url('/web_editor/static/src/img/transparent.png');
-        }
     }
 
     .o_color_picker_inputs {
@@ -60,25 +54,23 @@
         font-size: 12px;
         display: flex;
 
-        .o_color_preview_parent {
+        .o_color_preview {
+            @extend %o-preview-alpha-background;
             height: 20px;
             width: 30px;
-            background-image: url('/web_editor/static/src/img/transparent.png');
-            .o_color_preview {
-                height: inherit;
-                display: block;
-            }
+        }
+        > * {
+            display: flex;
+            align-items: baseline;
         }
         .o_hex_div {
             width: 38%;
-            display: flex;
-            border: 1px solid;
             margin-right: 2%;
+            border: 1px solid;
         }
         .o_rgba_div {
             width: 60%;
             border: 1px solid;
-            display: flex;
         }
         input {
             width: 100%;

addons/web/static/src/scss/utils.scss

@@ -98,6 +98,31 @@
     @return if($luma > $threshold, $-dark, $-light);
 }
 
+// Extend placeholder which adds a chess-like background below the color and
+// image of an element to preview the transparency of that color and image.
+// This is done thanks to both ::before and ::after elements so they must both
+// be available.
+%o-preview-alpha-background {
+    position: relative;
+    z-index: 0;
+
+    &::before {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background-image: url('/web/static/src/img/transparent.png');
+        background-size: 10px auto;
+        border-radius: inherit;
+    }
+    &::after {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background: inherit; // Inherit all background properties
+        border-radius: inherit;
+    }
+}
+
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------

addons/web/static/src/xml/colorpicker.xml

@@ -13,9 +13,7 @@
             <div class="o_opacity_pointer" tabindex="-1"/>
         </div>
         <div class="o_color_picker_inputs">
-            <div t-if="widget.options.colorPreview" class="o_color_preview_parent">
-                <span class="rounded-0 o_color_preview"/>
-            </div>
+            <div t-if="widget.options.colorPreview" class="o_color_preview"/>
             <div class="o_hex_div"><input type="text" class="o_hex_input" data-color-method="hex" size="1"/>hex</div>
             <div class="o_rgba_div">
                 <input type="text" class="o_red_input" data-color-method="rgb" size="1"/>

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -76,27 +76,6 @@ $o-we-toolbar-height: 32px;
     box-shadow: 0 0 15px 2px #000;
 }
 
-// Mixins for buttons with alpha bg-color
-@mixin o-alpha-button-preview {
-    position: relative;
-    z-index: 1;
-
-    // Place an overlay that inherit the button's bg-color.
-    &::before {
-        content: "";
-        @include o-position-absolute(0, 0, 0, 0);
-        background-color: inherit;
-    }
-
-    &::after {
-        content: "";
-        @include o-position-absolute(0, 0, 0, 0);
-        z-index: -1;
-        background-image: url('/web_editor/static/src/img/transparent.png');
-        background-size: 10px auto;
-    }
-}
-
 // ============    Preservation mixins    ===============
 // Used to preserve web_editor and website UI from themes customizations
 

addons/web_editor/static/src/scss/wysiwyg.scss

@@ -221,9 +221,12 @@ body .modal {
                 min-height: 300px;
             }
 
-            .o_we_images > .o_existing_attachment_cell img {
-                max-width: 100%;
-                background-image: url("/web_editor/static/src/img/transparent.png");
+            .o_we_images > .o_existing_attachment_cell .o_we_media_dialog_img_wrapper {
+                @extend %o-preview-alpha-background;
+
+                &, > img {
+                    max-width: 100%;
+                }
             }
 
             .o_existing_attachment_cell {

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -486,7 +486,7 @@ body.editor_enable.editor_has_snippets {
             flex: 0 0 auto;
 
             .o_we_color_preview {
-                @include o-alpha-button-preview;
+                @extend %o-preview-alpha-background;
                 display: block;
                 flex: 0 0 auto;
                 width: 1em;
@@ -676,9 +676,8 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
-.o_we_cc_preview_container {
-    background-color: white !important;
-    background-image: url("/web_editor/static/src/img/transparent.png") !important;
+.o_we_cc_preview_wrapper {
+    @extend %o-preview-alpha-background;
     font-family: sans-serif !important;
     font-size: 16px !important;
 }
@@ -790,7 +789,7 @@ body.editor_enable.editor_has_snippets {
 
             &[data-name="transparent_grayscale"], &[data-name="theme"], &[data-name="reset"] {
                 .o_we_color_btn {
-                    @include o-alpha-button-preview;
+                    @extend %o-preview-alpha-background;
 
                     &::before, &::after {
                         box-shadow: inherit;

addons/web_editor/static/src/xml/snippets.xml

@@ -62,7 +62,7 @@
         <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} p-1" data-color-tab="theme-colors"/>
     </div>
     <t t-name="web_editor.colorpalette.combination.btn">
-        <button type="button" class="o_we_color_btn o_we_color_combination_btn o_we_cc_preview_container"
+        <button type="button" class="o_we_color_btn o_we_color_combination_btn"
                 t-att-data-color="number" t-attf-title="Preset #{number}">
             <t t-call="web_editor.color.combination.preview"/>
         </button>

addons/web_editor/static/src/xml/wysiwyg.xml

@@ -306,9 +306,9 @@
 
     <t t-name="wysiwyg.widgets.image.existing.attachment">
         <t t-set="isOptimized" t-value="!!attachment.original_id"/>
-        <div t-attf-class="o_existing_attachment_cell position-relative bg-light #{isOptimized and 'o_we_attachment_optimized d-none'}" t-att-data-id="attachment.id">
+        <div t-attf-class="o_existing_attachment_cell position-relative bg-light #{isOptimized and 'o_we_attachment_optimized d-none' or ''} align-items-center justify-content-center" t-att-data-id="attachment.id">
             <t t-call="wysiwyg.widgets.file.existing.remove"/>
-            <div t-attf-class="d-flex align-items-center justify-content-center h-100 w-100">
+            <div class="o_we_media_dialog_img_wrapper">
                 <!-- 256 is 2 * ImageWidget.MIN_ROW_HEIGHT, hopefully the highest display width of any image -->
                 <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{attachment.image_src}?height=256" t-att-alt="attachment.name" t-att-title="attachment.name"/>
             </div>

addons/web_editor/static/tests/field_html_tests.js

@@ -284,7 +284,7 @@ QUnit.module('web_editor', {}, function () {
             await testUtils.dom.click($('.modal #editor-media-image .o_existing_attachment_cell:first').removeClass('d-none'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
-            assert.ok($editable.find('img')[0].dataset.src.includes('/web_editor/static/src/img/transparent.png'),
+            assert.ok($editable.find('img')[0].dataset.src.includes('/web/static/src/img/transparent.png'),
                 "should have the image in the dom");
 
             testUtils.mock.unpatch(MediaDialog);

addons/web_editor/static/tests/test_utils.js

@@ -271,13 +271,13 @@ function wysiwygData(data) {
                 description: '',
                 mimetype: 'image/png',
                 checksum: false,
-                url: '/web_editor/static/src/img/transparent.png',
+                url: '/web/static/src/img/transparent.png',
                 type: 'url',
                 res_id: 0,
                 res_model: false,
                 public: true,
                 access_token: false,
-                image_src: '/web_editor/static/src/img/transparent.png',
+                image_src: '/web/static/src/img/transparent.png',
                 image_width: 256,
                 image_height: 256,
             }],

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

@@ -860,7 +860,6 @@ options.registry.Theme = options.Class.extend({
             const togglerEl = document.createElement('we-toggler');
             togglerEl.classList.add('pt-0', 'pb-0', 'pl-0');
             const divEl = document.createElement('div');
-            divEl.classList.add('o_we_cc_preview_container');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
             ccPreviewEl.classList.add('p-1', 'text-center', `o_cc${i}`);
             divEl.appendChild(ccPreviewEl);