[REF] web_editor, *: use the name of invisible snippets in the UI

* website, website_mass_mailing

Instead of a custom string, use the name of the snippet when displaying
an 'invisible' snippet in the 'invisible elements' section.

This commit also fixes a font-awesome bug introduced with the library
update revert.

Part of https://github.com/odoo/odoo/pull/41789

closes odoo/odoo#41789

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -209,6 +209,20 @@ var SnippetEditor = Widget.extend({
         this.$('.o_handles').css('height', this.$target.outerHeight());
         this.$el.toggleClass('o_top_cover', offset.top < this.$editable.offset().top);
     },
+    /**
+     * DOMElements have a default name which appears in the overlay when they
+     * are being edited. This method retrieves this name; it can be defined
+     * directly in the DOM thanks to the `data-name` attribute.
+     */
+    getName: function () {
+        if (this.$target.data('name') !== undefined) {
+            return this.$target.data('name');
+        }
+        if (this.$target.parent('.row').length) {
+            return _t("Column");
+        }
+        return _t("Block");
+    },
     /**
      * @return {boolean}
      */
@@ -394,22 +408,6 @@ var SnippetEditor = Widget.extend({
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * DOMElements have a default name which appears in the overlay when they
-     * are being edited. This method retrieves this name; it can be defined
-     * directly in the DOM thanks to the `data-name` attribute.
-     *
-     * @private
-     */
-    _getName: function () {
-        if (this.$target.data('name') !== undefined) {
-            return this.$target.data('name');
-        }
-        if (this.$target.parent('.row').length) {
-            return _t("Column");
-        }
-        return _t("Block");
-    },
     /**
      * Instantiates the snippet's options.
      *
@@ -433,7 +431,7 @@ var SnippetEditor = Widget.extend({
         }
 
         var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', {
-            name: this._getName(),
+            name: this.getName(),
         })).data('editor', this);
         const $optionsSectionBtnGroup = $optionsSection.find('we-button-group');
         $optionsSectionBtnGroup.contents().each((i, node) => {
@@ -472,7 +470,7 @@ var SnippetEditor = Widget.extend({
                 this.$el,
                 _.extend({
                     optionName: optionName,
-                    snippetName: this._getName(),
+                    snippetName: this.getName(),
                 }, val.data),
                 this.options
             );
@@ -872,7 +870,7 @@ var SnippetsMenu = Widget.extend({
             this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel');
             this.invisibleDOMPanelEl.appendChild(
                 $('<div/>', {
-                    text: _t('Invisible'),
+                    text: _t('Invisible Elements'),
                     class: 'o_panel_header',
                 }).prepend(
                     $('<i/>', {class: 'fa fa-eye-slash'})
@@ -1217,7 +1215,7 @@ var SnippetsMenu = Widget.extend({
                 const editor = await this._createSnippetEditor($(el));
                 const $invisEntry = $('<div/>', {
                     class: 'o_we_invisible_entry d-flex align-items-center justify-content-between',
-                    text: _t(el.getAttribute('string')),
+                    text: editor.getName(),
                 }).append($('<i/>', {class: `fa ${editor.isTargetVisible() ? 'fa-eye' : 'fa-eye-slash'} ml-2`}));
                 $invisibleDOMPanelEl.append($invisEntry);
                 this.invisibleDOMMap.set($invisEntry[0], el);

addons/website/views/snippets/s_countdown.xml

@@ -24,7 +24,7 @@
                     <we-button data-end-action="redirect" data-name="redirect_end_action_opt">Redirect</we-button>
                     <we-button data-end-action="message">Show Message</we-button>
                 </we-select>
-                <we-button class="far fa-edit fa-fw align-self-end toggle-edit-message" title="Edit Message"/>
+                <we-button class="fa fa-eye fa-fw align-self-end toggle-edit-message" title="Edit Message"/>
             </we-row>
             <we-checkbox string="Hide countdown at the end" data-dependencies="!no_end_action_opt"
                         data-select-class="hide-countdown"/>

addons/website_mass_mailing/views/snippets_templates.xml

@@ -51,7 +51,7 @@
 </template>
 
 <template id="s_newsletter_subscribe_popup" name="Newsletter Popup">
-    <div class="o_newsletter_popup o_snippet_invisible" data-list-id="0" string="A newsletter popup is active on this page."/>
+    <div class="o_newsletter_popup o_snippet_invisible" data-list-id="0"/>
 </template>
 
 <template id="newsletter_subscribe_options" name="Newsletter Subscribe Options" inherit_id="website.snippet_options">