[IMP] website, website_sale: open the highlight dropdown on click

Automatically open the dropdown to see the effects when the user selects
a highlight.

task-3285817

Part-of: odoo/odoo#142968

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

@@ -682,6 +682,11 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
      * @param {Event} ev
      */
     _onTextHighlightClick(ev) {
+        // To be able to open the highlights grid immediately, we need to
+        // prevent the `_onClick()` handler from closing the widget (using
+        // the `_closeWidgets()` method) right after opening it.
+        ev.stopPropagation();
+        this._closeWidgets();
         const target = ev.currentTarget;
         this.__handleTextOptionsPostActivate = ($snippet) => {
             // TODO should be reviewed

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

@@ -3754,9 +3754,11 @@ options.registry.TextHighlight = options.Class.extend({
     * @override
     */
     notify(name, data) {
-        // Apply the highlight effect DOM structure when added for the first time.
+        // Apply the highlight effect DOM structure when added for the first time
+        // and display the highlight effects grid immediately.
         if (name === "new_text_highlight") {
             this._autoAdaptHighlights();
+            this._requestUserValueWidgets("text_highlight_opt")[0]?.enable();
         }
         this._super(...arguments);
     },

addons/website/static/tests/tours/text_highlights.js

@@ -25,6 +25,11 @@ wTourUtils.registerWebsitePreviewTour("text_highlights", {
         trigger: "iframe .s_cover h1 span.o_text_highlight > .o_text_highlight_item > svg:has(.o_text_highlight_path_underline)",
         isCheck: true,
     },
+    {
+        content: "Check that the highlights grid was displayed",
+        trigger: "we-select[data-name=text_highlight_opt] we-toggler.active",
+        isCheck: true,
+    },
     {
         content: "Disable the highlight effect",
         trigger: "div.o_we_text_highlight",
@@ -63,7 +68,7 @@ wTourUtils.registerWebsitePreviewTour("text_highlights", {
         trigger: "iframe .s_cover span.o_text_highlight:has(.o_text_highlight_item:has(.o_text_highlight_path_underline) + br + .o_text_highlight_item:has(.o_text_highlight_path_underline))",
         isCheck: true,
     },
-    ...wTourUtils.selectElementInWeSelectWidget("text_highlight_opt", "Jagged"),
+    ...wTourUtils.selectElementInWeSelectWidget("text_highlight_opt", "Jagged").slice(1), // The select is already opened
     {
         content: "When changing the text highlight, we only replace the highlight SVG with a new drawn one",
         trigger: "iframe .s_cover span.o_text_highlight:has(.o_text_highlight_item:has(.o_text_highlight_path_jagged) + br + .o_text_highlight_item:has(.o_text_highlight_path_jagged))",