[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_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();
+            }
+        }, 500);
+    }
+
     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 {
@@ -350,3 +350,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);
+});