[IMP] website, *: hide overlay button when toolbar is active

`*=html_builder, html_editor`

- Hide overlay buttons when editor toolbar is active as this leads to
  a confusion for users.

task-4789254

Author: gppa-odoo

addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml

@@ -4,7 +4,6 @@
     <div t-att-class="{'d-none': !state.showUi or !state.isVisible}" class="o-we-toolbar o_overlay_options shadow rounded my-2">
         <t t-foreach="state.buttons" t-as="button" t-key="button_index">
             <!-- Disabled buttons do not display their title -->
-            <span class="o-we-toolbar-vertical-separator"></span>
             <span class="btn-group" t-att-title="button.disabledReason" t-att-aria-label="button.disabledReason">
                 <t t-if="button.Component" t-component="button.Component" t-props="button.props || {}"/>
                 <t t-else="">

addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js

@@ -8,14 +8,16 @@ import { withSequence } from "@html_editor/utils/resource";
 
 export class OverlayButtonsPlugin extends Plugin {
     static id = "overlayButtons";
-    static dependencies = ["selection", "overlay", "history", "operation"];
+    static dependencies = ["selection", "overlay", "history", "operation", "toolbar"];
     static shared = [
         "hideOverlayButtons",
         "showOverlayButtons",
         "hideOverlayButtonsUi",
         "showOverlayButtonsUi",
     ];
     resources = {
+        selectionchange_handlers: this.shouldShowToolbar.bind(this),
+        selection_leave_handlers: this.showOverlayButtonsUi.bind(this),
         step_added_handlers: this.refreshButtons.bind(this),
         change_current_options_containers_listeners: this.addOverlayButtons.bind(this),
         on_mobile_preview_clicked: withSequence(20, this.refreshButtons.bind(this)),
@@ -123,6 +125,17 @@ export class OverlayButtonsPlugin extends Plugin {
         this.overlay.updatePosition();
     }
 
+    shouldShowToolbar() {
+        clearTimeout(this.toolbarTimeout);
+        this.toolbarTimeout = setTimeout(() => {
+            if (this.dependencies.toolbar.getIsToolbarOpen()) {
+                this.hideOverlayButtonsUi();
+            } else {
+                this.showOverlayButtonsUi();
+            }
+        }, 300);
+    }
+
     hideOverlayButtons() {
         this.state.isVisible = false;
     }

addons/html_editor/static/src/main/toolbar/toolbar_plugin.js

@@ -143,7 +143,7 @@ const MIN_SIZE_FOR_COMPACT = 7;
 export class ToolbarPlugin extends Plugin {
     static id = "toolbar";
     static dependencies = ["overlay", "selection", "userCommand"];
-    static shared = ["getToolbarInfo"];
+    static shared = ["getToolbarInfo", "getIsToolbarOpen"];
     resources = {
         selectionchange_handlers: this.handleSelectionChange.bind(this),
         selection_leave_handlers: () => this.closeToolbar(),
@@ -328,6 +328,10 @@ export class ToolbarPlugin extends Plugin {
         };
     }
 
+    getIsToolbarOpen() {
+        return this.overlay.isOpen;
+    }
+
     handleSelectionChange(selectionData) {
         if (this.onSelectionChangeActive) {
             this.updateToolbar(selectionData);

addons/website/static/tests/builder/overlay_buttons.test.js

@@ -1,8 +1,8 @@
 import { undo } from "@html_editor/../tests/_helpers/user_actions";
 import { Plugin } from "@html_editor/plugin";
-import { setContent } from "@html_editor/../tests/_helpers/selection";
-import { expect, test } from "@odoo/hoot";
-import { Deferred, tick } from "@odoo/hoot-dom";
+import { setContent, setSelection } from "@html_editor/../tests/_helpers/selection";
+import { animationFrame, expect, test } from "@odoo/hoot";
+import { Deferred, tick, waitFor } from "@odoo/hoot-dom";
 import { xml } from "@odoo/owl";
 import { contains } from "@web/../tests/web_test_helpers";
 import {
@@ -352,3 +352,32 @@ test("An inner snippet alone in a column should not have overlay options", async
     expect(".oe_overlay").toHaveCount(3);
     expect(".oe_overlay.oe_active").toHaveCount(1);
 });
+
+test("The overlay buttons should be hidden when the toolbar is open", async () => {
+    const { getEditor } = await setupWebsiteBuilder(`
+        <section>
+            <div class="container">
+                <div class="test-options-target">test here</div>
+            </div>
+        </section>
+    `);
+    const editor = getEditor();
+    // Check that the overlay buttons are not hidden.
+    await contains(":iframe .test-options-target").click();
+    expect(".o-we-toolbar.o_overlay_options:not(.d-none)").toHaveCount(1);
+    const text = editor.editable.querySelector(".test-options-target");
+    const selection = {
+        anchorNode: text.childNodes[0],
+        anchorOffset: 2,
+        focusNode: text.childNodes[0],
+        focusOffset: 5,
+    };
+    setSelection(selection);
+    await animationFrame();
+    // Check that the toolbar buttons are shown.
+    await waitFor(".o-we-toolbar:not(.o_overlay_options)");
+    expect(".o-we-toolbar:not(.o_overlay_options)").toHaveCount(1);
+    // Check that the overlay buttons are hidden.
+    await waitFor(".o-we-toolbar.o_overlay_options.d-none", { timeout: 300 });
+    expect(".o-we-toolbar.o_overlay_options.d-none").toHaveCount(1);
+});