[FIX] web_editor: reduce clickable area of checkboxes in editor panel

Before this commit the clickable zone of a checkbox in the editor was
all the width of the panel.

After this commit, the clickable zone is only the label width + the
checkbox width. Also, the active and hover states of the label have been
removed to not confuse the user.

task-2312878

closes odoo/odoo#59240

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

3 files changed, 26 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 d8887d67095..14bc101290f 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -705,6 +705,21 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({
 
         return this._super(...arguments);
     },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _onButtonClick(ev) {
+        if (!ev.target.closest('we-title, we-checkbox')) {
+            // Only consider clicks on the label and the checkbox control itself
+            return;
+        }
+        return this._super(...arguments);
+    },
 });
 
 const BaseSelectionUserValueWidget = UserValueWidget.extend({
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index ef54977e7da..b7e598c6662 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -671,13 +671,16 @@ body.editor_enable.editor_has_snippets {
             padding: 0;
             border: none;
             background: none;
+            cursor: default;
 
+            > we-title {
+                cursor: pointer;
+            }
             > div {
                 display: flex;
                 min-height: $o-we-sidebar-content-field-height;
                 line-height: $o-we-sidebar-content-field-height;
             }
-
             we-checkbox {
                 flex: 0 0 auto;
                 display: flex;
@@ -686,6 +689,7 @@ body.editor_enable.editor_has_snippets {
                 height: $o-we-sidebar-content-field-toggle-height;
                 background-color: $o-we-sidebar-content-field-toggle-bg;
                 border-radius: 10rem;
+                cursor: pointer;
 
                 &::after {
                     content: "";
@@ -697,11 +701,13 @@ body.editor_enable.editor_has_snippets {
                     box-shadow: $o-we-sidebar-content-field-toggle-control-shadow;
                 }
             }
-
             &.active we-checkbox {
                 background-color: $o-we-sidebar-content-field-toggle-active-bg;
                 justify-content: flex-end;
             }
+            &.active, &:hover {
+                color: $o-we-sidebar-content-field-clickable-color;
+            }
         }
 
         // Selection (select and button groups)
diff --git a/addons/website_form/static/tests/tours/website_form_editor.js b/addons/website_form/static/tests/tours/website_form_editor.js
index 9431307688a..a50afdf1e7b 100644
--- a/addons/website_form/static/tests/tours/website_form_editor.js
+++ b/addons/website_form/static/tests/tours/website_form_editor.js
@@ -43,14 +43,14 @@ odoo.define('website_form_editor.tour', function (require) {
             testText += '.s_website_form_required';
             ret.push({
                 content: "Mark the field as required",
-                trigger: 'we-button[data-name="required_opt"]',
+                trigger: 'we-button[data-name="required_opt"] we-checkbox',
             });
         }
         if (hidden) {
             testText += '.s_website_form_field_hidden';
             ret.push({
                 content: "Mark the field as hidden",
-                trigger: 'we-button[data-name="hidden_opt"]',
+                trigger: 'we-button[data-name="hidden_opt"] we-checkbox',
             });
         }
         if (label) {
@@ -176,7 +176,7 @@ odoo.define('website_form_editor.tour', function (require) {
             run: 'text Management Service',
         }, {
             content: "Mark the field as not required",
-            trigger: 'we-button[data-name="required_opt"]',
+            trigger: 'we-button[data-name="required_opt"] we-checkbox',
         }, {
             content: "Check the resulting field",
             trigger: ".s_website_form_field.s_website_form_custom:not(.s_website_form_required)" +