[IMP] web_editor: render inline svg icons, apply css style

Render inline SVG inside buttons in order to allow CSS styling.

Define SVG icons design for normal/hover status applying the same colors
as default text buttons.

In order to support multi-colors SVGs, this commits will affect inner
shapes in different ways:
- '.o_graphic' shapes: will gets the UI btns colors (default/hover)
- '.o_subdle' shapes: will gets a slightly reduced default text color

Shapes without '.o_graphic/.o_subdle' classes will be rendered normally,
as defined in the svg code.

Part of https://github.com/odoo/odoo/pull/54913
task-2157252

Co-authored-by: qsm-odoo <qsm@odoo.com>

3 files changed, 53 insertions, 7 deletions

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 1dfdc5be860..fca6f65f7b6 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -77,7 +77,14 @@ function _buildTitleElement(title) {
  * @param {string} src
  * @returns {HTMLElement}
  */
-function _buildImgElement(src) {
+async function _buildImgElement(src) {
+    if (src.split('.').pop() === 'svg') {
+        const response = await window.fetch(src);
+        const text = await response.text();
+        const parser = new window.DOMParser();
+        const xmlDoc = parser.parseFromString(text, 'text/xml');
+        return xmlDoc.getElementsByTagName('svg')[0];
+    }
     const imgEl = document.createElement('img');
     imgEl.src = src;
     return imgEl;
@@ -156,15 +163,23 @@ const UserValueWidget = Widget.extend({
     /**
      * @override
      */
+    async willStart() {
+        await this._super(...arguments);
+        if (this.options.dataAttributes.img) {
+            this.imgEl = await _buildImgElement(this.options.dataAttributes.img);
+        }
+    },
+    /**
+     * @override
+     */
     _makeDescriptive: function () {
         const $el = this._super(...arguments);
         const el = $el[0];
         _addTitleAndAllowedAttributes(el, this.title, this.options);
         this.containerEl = document.createElement('div');
 
-        if (el.dataset.img) {
-            const imgEl = _buildImgElement(el.dataset.img);
-            this.containerEl.appendChild(imgEl);
+        if (this.imgEl) {
+            this.containerEl.appendChild(this.imgEl);
         }
 
         el.appendChild(this.containerEl);
@@ -192,7 +207,13 @@ const UserValueWidget = Widget.extend({
      * @override
      */
     destroy() {
-        this.$el.off('.img_animate');
+        // Check if $el exists in case the widget is destroyed before it has
+        // been fully initialized.
+        // TODO there is probably better to do. This case was found only in
+        // tours, where the editor is left before the widget icon is loaded.
+        if (this.$el) {
+            this.$el.off('.img_animate');
+        }
         this._super(...arguments);
     },
 
@@ -2280,6 +2301,13 @@ const SnippetOptionWidget = Widget.extend({
         await this._renderXMLWidgets(uiFragment);
         await this._renderCustomWidgets(uiFragment);
 
+        if (this.isDestroyed()) {
+            // TODO there is probably better to do. This case was found only in
+            // tours, where the editor is left before the widget are fully
+            // loaded (loadMethodsData doesn't work if the widget is destroyed).
+            return uiFragment;
+        }
+
         const validMethodNames = [];
         for (const key in this) {
             validMethodNames.push(key);
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index cf4b8b3b7eb..f71d4d36184 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -54,7 +54,7 @@ $o-we-item-border-color: $o-we-bg-darkest !default;
 $o-we-item-border-radius: 1px !default;
 $o-we-item-clickable-bg: linear-gradient($o-we-bg-light, $o-we-bg-darker) !default;
 $o-we-item-pressed-bg: linear-gradient($o-we-bg-darkest, $o-we-bg-darker) !default;
-$o-we-item-pressed-color: $o-we-fg-light !default;
+$o-we-item-pressed-color: $o-we-fg-lighter !default;
 
 $o-we-dropdown-spacing: 5px !default;
 $o-we-dropdown-bg: $o-we-bg-darker !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 4250f8c97e5..a65d73f87c4 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -254,6 +254,20 @@ body.editor_enable.editor_has_snippets {
             width: $o-we-sidebar-width / 2; // TODO maybe there is a better way to implement this
         }
 
+        @mixin we-svg-icon(
+                $graphic: $o-we-sidebar-content-field-color,
+                $subdle: $o-we-sidebar-content-field-color,
+                $subdle-opacity: 0.5) {
+            svg {
+                .o_graphic {
+                    fill: $graphic;
+                }
+                .o_subdle {
+                    fill: rgba($subdle, $subdle-opacity);
+                }
+            }
+        }
+
         we-button, we-toggler {
             cursor: pointer;
             @include o-text-overflow(block);
@@ -264,10 +278,14 @@ body.editor_enable.editor_has_snippets {
             color: $o-we-sidebar-content-field-color;
             line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
             text-align: left;
+            @include we-svg-icon();
 
+            &.active, &:hover {
+                color: $o-we-sidebar-content-field-pressed-color;
+                @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
+            }
             &.active {
                 background: $o-we-sidebar-content-field-pressed-bg;
-                color: $o-we-sidebar-content-field-pressed-color;
             }
 
             &.fa {