Use CSS to control ViewContainerPart toolbar visibility

CHANGELOG.md

@@ -11,6 +11,7 @@
 - [core] registering toolbar items for commands that explicitly target a `ViewContainer` rather than a child widget may not behave as expected. Such registrations should be made in the `ViewContainer` by overriding the `updateToolbarItems` method and using the `registerToolbarItem` utility. See the modifications to the `scm` and `vsx-registry` packages in the PR for examples. [#9798](https://github.com/eclipse-theia/theia/pull/9798)
 - [vsx-registry] `VSXExtensionsContribution` no longer implements `TabBarToolbarContribution` and is not bound as such. Extensions of the class that expect such behavior should reimplement it with caution. See caveats in PR. [#9798](https://github.com/eclipse-theia/theia/pull/9798)
 - [core] `handleExpansionToggleDblClickEvent` in `TreeWidget` can no longer be overridden. Instead, `doHandleExpansionToggleDblClickEvent` can be overridden. [#9877](https://github.com/eclipse-theia/theia/pull/9877)
+- [core] `ViewContainerPart` methods and properties related to hiding and showing toolbar removed: `toHideToolbar`, `hideToolbar`, `showToolbar`, `toolbarHidden`. `ViewContainerPart` toolbars are now hidden or shown using CSS properties. [#9935](https://github.com/eclipse-theia/theia/pull/9935)
 
 ## v1.16.0 - 7/29/2021
 

packages/core/src/browser/shell/tab-bar-toolbar.tsx

@@ -417,6 +417,8 @@ export class TabBarToolbar extends ReactWidget {
     renderMoreContextMenu(anchor: Anchor): any {
         const menuPath = ['TAB_BAR_TOOLBAR_CONTEXT_MENU'];
         const toDisposeOnHide = new DisposableCollection();
+        this.addClass('menu-open');
+        toDisposeOnHide.push(Disposable.create(() => this.removeClass('menu-open')));
         for (const item of this.more.values()) {
             // Register a submenu for the item, if the group is in format `<submenu group>/<submenu name>/.../<item group>`
             if (item.group?.includes('/')) {

packages/core/src/browser/style/view-container.css

@@ -128,3 +128,13 @@
     background-size: var(--theia-icon-size);
     line-height: var(--theia-icon-size);
 }
+
+.theia-view-container-part-title {
+    display: none;
+}
+
+.theia-view-container-part-title.menu-open,
+.p-Widget.part:not(.collapsed):hover .header .theia-view-container-part-title,
+.p-Widget.part:not(.collapsed):focus-within .header .theia-view-container-part-title {
+    display: flex;
+}

packages/core/src/browser/view-container.ts

@@ -705,6 +705,8 @@ export class ViewContainerPart extends BaseWidget {
     protected readonly onDidFocusEmitter = new Emitter<this>();
     readonly onDidFocus = this.onDidFocusEmitter.event;
 
+    protected readonly toolbar: TabBarToolbar;
+
     protected _collapsed: boolean;
 
     uncollapsedSize: number | undefined;
@@ -735,8 +737,13 @@ export class ViewContainerPart extends BaseWidget {
         this.body = body;
 
         this.toNoDisposeWrapped = this.toDispose.push(wrapped);
+        this.toolbar = this.toolbarFactory();
+        this.toolbar.addClass('theia-view-container-part-title');
+
         this.toDispose.pushAll([
             disposable,
+            this.toolbar,
+            this.toolbarRegistry.onDidChange(() => this.toolbar.updateTarget(this.wrapped)),
             this.collapsedEmitter,
             this.contextMenuEmitter,
             this.onTitleChangedEmitter,
@@ -766,6 +773,7 @@ export class ViewContainerPart extends BaseWidget {
             return;
         }
         this._collapsed = collapsed;
+        this.node.classList.toggle('collapsed', collapsed);
         if (collapsed && this.wrapped.node.contains(document.activeElement)) {
             this.header.focus();
         }
@@ -899,36 +907,6 @@ export class ViewContainerPart extends BaseWidget {
         };
     }
 
-    protected toolbar: TabBarToolbar | undefined;
-
-    protected readonly toHideToolbar = new DisposableCollection();
-    hideToolbar(): void {
-        this.toHideToolbar.dispose();
-    }
-
-    showToolbar(): void {
-        if (this.toolbarHidden) {
-            return;
-        }
-        this.toDisposeOnDetach.push(this.toHideToolbar);
-
-        const toolbar = this.toolbarFactory();
-        toolbar.addClass('theia-view-container-part-title');
-        this.toHideToolbar.push(toolbar);
-
-        Widget.attach(toolbar, this.header);
-        this.toHideToolbar.push(Disposable.create(() => Widget.detach(toolbar)));
-
-        this.toolbar = toolbar;
-        this.toHideToolbar.push(Disposable.create(() => this.toolbar = undefined));
-
-        this.toolbar.updateTarget(this.wrapped);
-    }
-
-    get toolbarHidden(): boolean {
-        return !this.toHideToolbar.disposed || this.titleHidden;
-    }
-
     protected onResize(msg: Widget.ResizeMessage): void {
         if (this.wrapped.isAttached && !this.collapsed) {
             MessageLoop.sendMessage(this.wrapped, Widget.ResizeMessage.UnknownSize);
@@ -937,35 +915,26 @@ export class ViewContainerPart extends BaseWidget {
     }
 
     protected onUpdateRequest(msg: Message): void {
-        if (this.collapsed) {
-            this.hideToolbar();
-        } else if (this.node.matches(':hover')) {
-            this.showToolbar();
-        }
         if (this.wrapped.isAttached && !this.collapsed) {
             MessageLoop.sendMessage(this.wrapped, msg);
         }
         super.onUpdateRequest(msg);
     }
 
-    protected onBeforeAttach(msg: Message): void {
-        super.onBeforeAttach(msg);
-        this.addEventListener(this.node, 'mouseenter', () => this.showToolbar());
-        this.addEventListener(this.node, 'mouseleave', () => this.hideToolbar());
-    }
-
     protected onAfterAttach(msg: Message): void {
         if (!this.wrapped.isAttached) {
             MessageLoop.sendMessage(this.wrapped, Widget.Msg.BeforeAttach);
             // eslint-disable-next-line no-null/no-null
             this.body.insertBefore(this.wrapped.node, null);
             MessageLoop.sendMessage(this.wrapped, Widget.Msg.AfterAttach);
         }
+        Widget.attach(this.toolbar, this.header);
         super.onAfterAttach(msg);
     }
 
     protected onBeforeDetach(msg: Message): void {
         super.onBeforeDetach(msg);
+        Widget.detach(this.toolbar);
         if (this.wrapped.isAttached) {
             MessageLoop.sendMessage(this.wrapped, Widget.Msg.BeforeDetach);
             this.wrapped.node.parentNode!.removeChild(this.wrapped.node);