[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>

1 files changed, 33 insertions, 5 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);