Fix toolbar open in extended mode

Upon opening, the toolbar should be displayed in its compact form.

Before this commmit, extending the toolbar followed by closing and
reopening it would (incorrectely) result in its extended form.

Author: cammarosano

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

@@ -134,7 +134,7 @@ export class ToolbarPlugin extends Plugin {
     static shared = ["getToolbarInfo"];
     resources = {
         selectionchange_handlers: this.handleSelectionChange.bind(this),
-        selection_leave_handlers: () => this.overlay.close(),
+        selection_leave_handlers: () => this.closeToolbar(),
         step_added_handlers: () => this.updateToolbar(),
         user_commands: {
             id: "expandToolbar",
@@ -210,7 +210,7 @@ export class ToolbarPlugin extends Plugin {
             // Mouse interaction behavior:
             // Close toolbar on mousedown and prevent it from opening until mouseup.
             this.addDomListener(this.editable, "mousedown", () => {
-                this.overlay.close();
+                this.closeToolbar();
                 this.debouncedUpdateToolbar.cancel();
                 this.onSelectionChangeActive = false;
             });
@@ -235,7 +235,7 @@ export class ToolbarPlugin extends Plugin {
             // sequential keystrokes.
             this.addDomListener(this.editable, "keydown", (ev) => {
                 if (ev.key.startsWith("Arrow")) {
-                    this.overlay.close();
+                    this.closeToolbar();
                     this.onSelectionChangeActive = false;
                 }
             });
@@ -303,10 +303,14 @@ export class ToolbarPlugin extends Plugin {
     }
 
     updateToolbar(selectionData = this.dependencies.selection.getSelectionData()) {
-        this.updateToolbarVisibility(selectionData);
-        if (this.overlay.isOpen || this.config.disableFloatingToolbar) {
-            this.updateButtonsStates(selectionData.editableSelection);
+        this.updateNamespace();
+        if (!this.config.disableFloatingToolbar) {
+            this.updateToolbarVisibility(selectionData);
+            if (!this.overlay.isOpen) {
+                return;
+            }
         }
+        this.updateButtonsStates(selectionData.editableSelection);
     }
 
     getFilterTraverseNodes() {
@@ -316,21 +320,12 @@ export class ToolbarPlugin extends Plugin {
     }
 
     updateToolbarVisibility(selectionData) {
-        this.updateNamespace();
-        if (this.config.disableFloatingToolbar) {
-            return;
-        }
-
         if (this.shouldBeVisible(selectionData)) {
             // Open toolbar or update its position
             const props = { toolbar: this.getToolbarInfo(), class: "shadow rounded my-2" };
-            if (!this.overlay.isOpen) {
-                // Open toolbar in compact mode
-                this.isToolbarExpanded = false;
-            }
             this.overlay.open({ props });
         } else if (this.overlay.isOpen && !this.shouldPreventClosing()) {
-            this.overlay.close();
+            this.closeToolbar();
         }
     }
 
@@ -406,6 +401,11 @@ export class ToolbarPlugin extends Plugin {
         }
         this.updateSelection = null;
     }
+
+    closeToolbar() {
+        this.overlay.close();
+        this.isToolbarExpanded = false;
+    }
 }
 
 class MobileToolbarOverlay {

addons/html_editor/static/tests/toolbar.test.js

@@ -667,6 +667,22 @@ test("toolbar opens in 'compact' namespace by default", async () => {
     expect(".o-we-toolbar").toHaveAttribute("data-namespace", "expanded");
 });
 
+test.tags("desktop");
+test("expanded toolbar reopens in 'compact' namespace by default after closing", async () => {
+    const { el } = await setupEditor("<p>[test]</p>");
+    await waitFor(".o-we-toolbar");
+    expect(".o-we-toolbar").toHaveAttribute("data-namespace", "compact");
+    await expandToolbar();
+    expect(".o-we-toolbar").toHaveAttribute("data-namespace", "expanded");
+    // Collapse selection
+    setContent(el, "<p>test[]</p>");
+    await waitForNone(".o-we-toolbar");
+    // Reopen toolbar
+    setContent(el, "<p>[test]</p>");
+    await waitFor(".o-we-toolbar");
+    expect(".o-we-toolbar").toHaveAttribute("data-namespace", "compact");
+});
+
 test("toolbar items without namespace default to 'expanded'", async () => {
     class TestPlugin extends Plugin {
         static id = "TestPlugin";