Use CSS to control ViewContainerPart toolbar visibility

Signed-off-by: Colin Grant <[email protected]>
eclipse-theia · Aug 20, 2021 · be4cbc0 · be4cbc0
1 parent 299643b
commit be4cbc0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 41 deletions.
diff --git a/packages/core/src/browser/shell/tab-bar-toolbar.tsx b/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('/')) {

diff --git a/packages/core/src/browser/style/view-container.css b/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:hover .header .theia-view-container-part-title,
+.p-Widget.part:focus-within .header .theia-view-container-part-title {
+    display: flex;
+}
diff --git a/packages/core/src/browser/view-container.ts b/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,
@@ -899,36 +906,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 +914,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);