@theia/core 1.76.0-next.7 → 1.76.0

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-menu-adapters.tsx

@@ -57,8 +57,8 @@ abstract class AbstractToolbarMenuWrapper {
         }
         return false;
     }
-    render(widget: Widget): React.ReactNode {
-        return this.renderMenuItem(widget);
+    render(widget: Widget, contextMatcher: ContextMatcher = this.contextKeyService): React.ReactNode {
+        return this.renderMenuItem(widget, contextMatcher);
     }
 
     abstract toMenuNode(): MenuNode | undefined;
@@ -90,14 +90,15 @@ abstract class AbstractToolbarMenuWrapper {
      * chevron decoration that pops up a floating menu when clicked.
      *
      * @param item a toolbar item that is a menu item
+     * @param contextMatcher evaluates `when` clauses with the values that describe `widget`, so that the
+     * chevron and its popup resolve the same keys as the visibility check.
      * @returns the rendered toolbar item
      */
-    protected renderMenuItem(widget: Widget): React.ReactNode {
+    protected renderMenuItem(widget: Widget, contextMatcher: ContextMatcher = this.contextKeyService): React.ReactNode {
         const icon = this.icon || 'ellipsis';
-        const contextMatcher: ContextMatcher = this.contextKeyService;
         const className = `${icon} ${ACTION_ITEM}`;
         const itemClassName = TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu' + (this.isToggled(widget) ? ' toggled' : '');
-        if (CompoundMenuNode.is(this.menuNode) && !this.menuNode.isEmpty(this.effectiveMenuPath, this.contextKeyService, widget.node, widget)) {
+        if (CompoundMenuNode.is(this.menuNode) && !this.menuNode.isEmpty(this.effectiveMenuPath, contextMatcher, widget.node, widget)) {
             return <div key={this.id} className={itemClassName}>
                 <div id={this.id} className={className}
                     title={this.tooltip || this.text}
@@ -137,8 +138,8 @@ export class SubmenuAsToolbarItemWrapper extends AbstractToolbarMenuWrapper impl
     executeCommand(widget: Widget, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
     }
 
-    isVisible(widget: Widget): boolean {
-        const menuNodeVisible = this.menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node, widget);
+    isVisible(widget: Widget, contextMatcher: ContextMatcher): boolean {
+        const menuNodeVisible = this.menuNode.isVisible(this.effectiveMenuPath, contextMatcher, widget.node, widget);
         return menuNodeVisible && !MenuModelRegistry.isEmpty(this.menuNode);
     }
 
@@ -173,8 +174,8 @@ export class CommandMenuAsToolbarItemWrapper extends AbstractToolbarMenuWrapper
         return this.menuNode.when;
     }
 
-    isVisible(widget: Widget): boolean {
-        return this.menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node, widget);
+    isVisible(widget: Widget, contextMatcher: ContextMatcher): boolean {
+        return this.menuNode.isVisible(this.effectiveMenuPath, contextMatcher, widget.node, widget);
     }
 
     executeCommand(widget: Widget, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
@@ -229,19 +230,19 @@ export class ToolbarActionWrapper extends AbstractToolbarMenuWrapper implements
         }
     };
 
-    isVisible(widget: Widget): boolean {
+    isVisible(widget: Widget, contextMatcher: ContextMatcher): boolean {
         const menuNode = this.menuNode;
         if (this.toolbarItem.isVisible && !this.toolbarItem.isVisible(widget)) {
             return false;
         }
-        if (!menuNode?.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node, widget)) {
+        if (!menuNode?.isVisible(this.effectiveMenuPath, contextMatcher, widget.node, widget)) {
             return false;
         }
         if (this.toolbarItem.command) {
             return true;
         }
         if (CompoundMenuNode.is(menuNode)) {
-            return !menuNode.isEmpty(this.effectiveMenuPath, this.contextKeyService, widget.node, widget);
+            return !menuNode.isEmpty(this.effectiveMenuPath, contextMatcher, widget.node, widget);
         }
         return true;
     }

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-registry.ts

@@ -18,9 +18,12 @@ import debounce = require('lodash.debounce');
 import { inject, injectable, named } from 'inversify';
 // eslint-disable-next-line max-len
 import { CommandRegistry, ContributionProvider, Disposable, DisposableCollection, Emitter, Event, MenuModelRegistry, MenuPath, ILogger } from '../../../common';
-import { ContextKeyService } from '../../context-key-service';
+import { ContextKeyService, ContextMatcher } from '../../context-key-service';
 import { FrontendApplicationContribution } from '../../frontend-application-contribution';
 import { Widget } from '../../widgets';
+import { Navigatable } from '../../navigatable-types';
+import { ResourceContextKey } from '../../resource-context-key';
+import { WidgetContextKeyContribution } from '../../widget-context-key-contribution';
 import { ReactTabBarToolbarAction, RenderedToolbarAction } from './tab-bar-toolbar-types';
 import { CommandMenuAsToolbarItemWrapper, SubmenuAsToolbarItemWrapper, ToolbarActionWrapper } from './tab-bar-toolbar-menu-adapters';
 import { KeybindingRegistry } from '../../keybinding';
@@ -65,9 +68,14 @@ export class TabBarToolbarRegistry implements FrontendApplicationContribution {
     @inject(LabelParser) protected readonly labelParser: LabelParser;
     @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
 
+    @inject(ResourceContextKey) protected readonly resourceContextKey: ResourceContextKey;
+
     @inject(ContributionProvider) @named(TabBarToolbarContribution)
     protected readonly contributionProvider: ContributionProvider<TabBarToolbarContribution>;
 
+    @inject(ContributionProvider) @named(WidgetContextKeyContribution)
+    protected readonly contextKeyContributionProvider: ContributionProvider<WidgetContextKeyContribution>;
+
     @inject(ILogger) @named('core:TabBarToolbarRegistry')
     protected readonly logger: ILogger;
 
@@ -133,8 +141,9 @@ export class TabBarToolbarRegistry implements FrontendApplicationContribution {
             return [];
         }
         const result: Array<TabBarToolbarItem> = [];
+        const contextMatcher = this.contextMatcherFor(widget);
         for (const item of this.items.values()) {
-            if (item.isVisible(widget)) {
+            if (item.isVisible(widget, contextMatcher)) {
                 result.push(item);
             }
         }
@@ -144,11 +153,11 @@ export class TabBarToolbarRegistry implements FrontendApplicationContribution {
                 const menu = this.menuRegistry.getMenu(delegate.menuPath);
                 if (menu) {
                     for (const child of menu.children) {
-                        if (child.isVisible([...delegate.menuPath, child.id], this.contextKeyService, widget.node, widget)) {
+                        if (child.isVisible([...delegate.menuPath, child.id], contextMatcher, widget.node, widget)) {
                             if (CompoundMenuNode.is(child)) {
                                 for (const grandchild of child.children) {
                                     if (grandchild.isVisible([...delegate.menuPath, child.id, grandchild.id],
-                                        this.contextKeyService, widget.node, widget) && RenderedMenuNode.is(grandchild)) {
+                                        contextMatcher, widget.node, widget) && RenderedMenuNode.is(grandchild)) {
                                         if (CommandMenu.is(grandchild)) {
                                             result.push(new CommandMenuAsToolbarItemWrapper([...delegate.menuPath, child.id, grandchild.id], this.commandRegistry,
                                                 this.menuRegistry, this.contextKeyService, this.contextMenuRenderer, grandchild, child.id));
@@ -171,6 +180,29 @@ export class TabBarToolbarRegistry implements FrontendApplicationContribution {
         return result;
     }
 
+    /**
+     * A matcher that evaluates `when` clauses against the given widget rather than against whichever widget
+     * currently holds the focus. Keys that describe no aspect of the widget keep their ambient value, and the
+     * context scoped to the widget's DOM node is still consulted for the keys the overlay does not define.
+     */
+    contextMatcherFor(widget: Widget): ContextMatcher {
+        const overlay = new Map<string, unknown>();
+        if (Navigatable.is(widget)) {
+            for (const [key, value] of Object.entries(this.resourceContextKey.toValues(widget.getResourceUri()))) {
+                overlay.set(key, value);
+            }
+        }
+        for (const contribution of this.contextKeyContributionProvider.getContributions()) {
+            const entries = contribution.getContextKeyValues(widget);
+            if (entries) {
+                for (const [key, value] of entries) {
+                    overlay.set(key, value);
+                }
+            }
+        }
+        return overlay.size ? this.contextKeyService.createOverlay(overlay) : this.contextKeyService;
+    }
+
     /**
      * Collects all context keys referenced by toolbar items and delegated menu nodes
      * that may participate in rendering for the given widget.

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.spec.ts

@@ -18,13 +18,18 @@ import { enableJSDOM } from '../../test/jsdom';
 
 let disableJSDOM = enableJSDOM();
 import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
 import {
     CommandMenu, CommandRegistry, CompoundMenuNode, Group, GroupImpl, MenuAction, MenuModelRegistry, MenuNode, MenuNodeFactory, MutableCompoundMenuNode,
     Submenu, SubmenuImpl, SubMenuLink
 } from '../../../common';
-import { ContextKeyServiceDummyImpl } from '../../context-key-service';
+import { ContextKeyServiceDummyImpl, ContextMatcher } from '../../context-key-service';
 import { ContextMenuRenderer } from '../../context-menu-renderer';
 import { Widget } from '../../widgets';
+import URI from '../../../common/uri';
+import { ResourceContextKey } from '../../resource-context-key';
+import { WidgetContextKeyContribution } from '../../widget-context-key-contribution';
+import { TabBarToolbar } from './tab-bar-toolbar';
 import { TOOLBAR_WRAPPER_ID_SUFFIX } from './tab-bar-toolbar-menu-adapters';
 import { TabBarToolbarRegistry } from './tab-bar-toolbar-registry';
 import { TAB_BAR_TOOLBAR_CONTEXT_MENU, TabBarToolbarAction } from './tab-bar-toolbar-types';
@@ -135,6 +140,106 @@ describe('tab-bar-toolbar', () => {
             testWidget.dispose();
         });
 
+        it('evaluates delegated items against the resource of the widget that owns the toolbar', () => {
+            const testWidget = new TestToolbarWidget(new URI('probe:/a.probe'));
+            const commands = createCommandRegistry();
+            commands.registerCommand({ id: TEST_COMMAND, label: 'Test Command' }, { execute: () => { } });
+            const menuRegistry = createMenuRegistry(commands);
+            menuRegistry.registerMenuAction([...TEST_MENU_PATH, 'other'], { commandId: TEST_COMMAND, when: 'resourceScheme == probe' });
+            const registry = createToolbarRegistry(commands, menuRegistry, new TestContextKeyService());
+            registry.registerMenuDelegate(TEST_MENU_PATH, TestToolbarWidget.is);
+
+            const commandItem = registry.visibleItems(testWidget).find(item => item.id === `${TEST_COMMAND}${TOOLBAR_WRAPPER_ID_SUFFIX}`);
+
+            const otherWidget = new TestToolbarWidget(new URI('file:/a.txt'));
+
+            expect(commandItem).to.exist;
+            expect(registry.visibleItems(otherWidget)).to.be.empty;
+            testWidget.dispose();
+            otherWidget.dispose();
+        });
+
+        it('evaluates registered items against the keys contributed for the widget that owns the toolbar', () => {
+            const testWidget = new TestToolbarWidget(new URI('probe:/a.probe'));
+            const otherWidget = new TestToolbarWidget(new URI('probe:/b.probe'));
+            const commands = createCommandRegistry();
+            commands.registerCommand({ id: TEST_COMMAND, label: 'Test Command' }, { execute: () => { } });
+            const menuRegistry = createMenuRegistry(commands);
+            const contribution: WidgetContextKeyContribution = {
+                getContextKeyValues: widget => [['activeCustomEditorId', widget === testWidget ? 'test.probeEditor' : '']]
+            };
+            const registry = createToolbarRegistry(commands, menuRegistry, new TestContextKeyService(), [contribution]);
+            registry.registerItem({ id: 'test-item', command: TEST_COMMAND, when: 'activeCustomEditorId == test.probeEditor' });
+
+            expect(registry.visibleItems(testWidget).map(item => item.id)).to.deep.equal(['test-item']);
+            expect(registry.visibleItems(otherWidget)).to.be.empty;
+            testWidget.dispose();
+            otherWidget.dispose();
+        });
+
+        it('renders the submenu chevron against the widget that owns the toolbar', () => {
+            const testWidget = new TestToolbarWidget();
+            const otherWidget = new TestToolbarWidget();
+            const commands = createCommandRegistry();
+            commands.registerCommand({ id: TEST_SUBMENU_COMMAND, label: 'Test Submenu Command' }, { execute: () => { } });
+            const menuRegistry = createMenuRegistry(commands);
+            menuRegistry.registerSubmenu([...TEST_MENU_PATH, 'other', 'test-submenu'], 'Test Submenu');
+            menuRegistry.registerMenuAction([...TEST_MENU_PATH, 'other', 'test-submenu'],
+                { commandId: TEST_SUBMENU_COMMAND, when: 'activeCustomEditorId == test.probeEditor' });
+            const contribution: WidgetContextKeyContribution = {
+                getContextKeyValues: widget => [['activeCustomEditorId', widget === testWidget ? 'test.probeEditor' : '']]
+            };
+            const registry = createToolbarRegistry(commands, menuRegistry, new TestContextKeyService(), [contribution]);
+            registry.registerMenuDelegate(TEST_MENU_PATH, TestToolbarWidget.is);
+            const submenuItem = registry.visibleItems(testWidget).find(item => item.id === `test-submenu${TOOLBAR_WRAPPER_ID_SUFFIX}`);
+
+            expect(submenuItem).to.exist;
+            expect(renderToStaticMarkup(submenuItem!.render(testWidget, registry.contextMatcherFor(testWidget)))).to.contain('chevron');
+            expect(renderToStaticMarkup(submenuItem!.render(testWidget, registry.contextMatcherFor(otherWidget)))).to.not.contain('chevron');
+            testWidget.dispose();
+            otherWidget.dispose();
+        });
+
+        it('opens the More Actions menu against the widget that owns the toolbar', () => {
+            const testWidget = new TestToolbarWidget();
+            const otherWidget = new TestToolbarWidget();
+            const commands = createCommandRegistry();
+            commands.registerCommand({ id: TEST_SUBMENU_COMMAND, label: 'Test Submenu Command' }, { execute: () => { } });
+            const menuRegistry = createMenuRegistry(commands);
+            menuRegistry.registerSubmenu([...TEST_MENU_PATH, 'other', 'test-submenu'], 'Test Submenu');
+            menuRegistry.registerMenuAction([...TEST_MENU_PATH, 'other', 'test-submenu'],
+                { commandId: TEST_SUBMENU_COMMAND, when: 'activeCustomEditorId == test.probeEditor' });
+            const contribution: WidgetContextKeyContribution = {
+                getContextKeyValues: widget => [['activeCustomEditorId', widget === testWidget ? 'test.probeEditor' : '']]
+            };
+            const ambient = new TestContextKeyService();
+            const registry = createToolbarRegistry(commands, menuRegistry, ambient, [contribution]);
+            registry.registerMenuDelegate(TEST_MENU_PATH, TestToolbarWidget.is);
+
+            let rendered: { contextKeyService?: ContextMatcher } | undefined;
+            const toolbar = new TabBarToolbar();
+            Reflect.set(toolbar, 'contextKeyService', ambient);
+            Reflect.set(toolbar, 'toolbarRegistry', registry);
+            Reflect.set(toolbar, 'contextMenuRenderer', {
+                render: (options: { contextKeyService?: ContextMatcher }) => {
+                    rendered = options;
+                    return { dispose: () => { } };
+                }
+            });
+            const setCurrent = Reflect.get(toolbar, 'setCurrent') as (widget: Widget) => void;
+
+            setCurrent.call(toolbar, testWidget);
+            toolbar.renderMoreContextMenu({ x: 0, y: 0 });
+            expect(rendered?.contextKeyService?.match('activeCustomEditorId == test.probeEditor')).to.be.true;
+
+            setCurrent.call(toolbar, otherWidget);
+            toolbar.renderMoreContextMenu({ x: 0, y: 0 });
+            expect(rendered?.contextKeyService?.match('activeCustomEditorId == test.probeEditor')).to.be.false;
+
+            testWidget.dispose();
+            otherWidget.dispose();
+        });
+
         it('preserves the widget for wrapped submenu emptiness checks', () => {
             const testWidget = new TestToolbarWidget();
             const commands = createCommandRegistry();
@@ -166,6 +271,38 @@ class TestToolbarWidget extends Widget {
     static is(candidate?: Widget): candidate is TestToolbarWidget {
         return candidate instanceof TestToolbarWidget;
     }
+
+    constructor(protected readonly resourceUri?: URI) {
+        super();
+    }
+
+    getResourceUri(): URI | undefined {
+        return this.resourceUri;
+    }
+
+    createMoveToUri(resourceUri: URI): URI | undefined {
+        return resourceUri;
+    }
+}
+
+/**
+ * Evaluates `key == value` clauses against the overlay alone, so that a visible item can only come from the
+ * values the registry attributed to the widget.
+ */
+class TestContextKeyService extends ContextKeyServiceDummyImpl {
+    override match(expression: string): boolean {
+        return false;
+    }
+
+    override createOverlay(overlay: Iterable<[string, unknown]>): ContextMatcher {
+        const values = new Map(overlay);
+        return {
+            match: (expression: string) => {
+                const [key, value] = expression.split(' == ');
+                return values.get(key) === value;
+            }
+        };
+    }
 }
 
 class TestMenuNodeFactory implements MenuNodeFactory {
@@ -187,7 +324,8 @@ class TestMenuNodeFactory implements MenuNodeFactory {
 
     createCommandMenu(item: MenuAction): CommandMenu {
         return {
-            isVisible: (_path, _contextMatcher, _context, ...args) => this.commands.isVisible(item.commandId, ...args),
+            isVisible: (_path, contextMatcher, context, ...args) =>
+                (!item.when || contextMatcher.match(item.when, context)) && this.commands.isVisible(item.commandId, ...args),
             isEnabled: (_path, ...args) => this.commands.isEnabled(item.commandId, ...args),
             isToggled: (_path, ...args) => this.commands.isToggled(item.commandId, ...args),
             id: item.commandId,
@@ -208,7 +346,12 @@ function createMenuRegistry(commands: CommandRegistry): MenuModelRegistry {
     return new MenuModelRegistry({ getContributions: () => [] }, commands, new TestMenuNodeFactory(commands));
 }
 
-function createToolbarRegistry(commands: CommandRegistry, menuRegistry: MenuModelRegistry, contextKeyService: ContextKeyServiceDummyImpl): TabBarToolbarRegistry {
+function createToolbarRegistry(
+    commands: CommandRegistry,
+    menuRegistry: MenuModelRegistry,
+    contextKeyService: ContextKeyServiceDummyImpl,
+    contextKeyContributions: WidgetContextKeyContribution[] = []
+): TabBarToolbarRegistry {
     const registry = new TabBarToolbarRegistry();
     Reflect.set(registry, 'commandRegistry', commands);
     Reflect.set(registry, 'contextKeyService', contextKeyService);
@@ -216,5 +359,9 @@ function createToolbarRegistry(commands: CommandRegistry, menuRegistry: MenuMode
     Reflect.set(registry, 'keybindingRegistry', {});
     Reflect.set(registry, 'labelParser', {});
     Reflect.set(registry, 'contextMenuRenderer', { render: () => undefined } as unknown as ContextMenuRenderer);
+    const resourceContextKey = new ResourceContextKey();
+    Reflect.set(resourceContextKey, 'languages', { languages: [] });
+    Reflect.set(registry, 'resourceContextKey', resourceContextKey);
+    Reflect.set(registry, 'contextKeyContributionProvider', { getContributions: () => contextKeyContributions });
     return registry;
 }

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx

@@ -17,7 +17,7 @@
 import { inject, injectable, postConstruct } from 'inversify';
 import * as React from 'react';
 import { buttonKeyboardProps, isActivationKey } from '../../keyboard/keyboard-utils';
-import { ContextKeyService } from '../../context-key-service';
+import { ContextKeyService, ContextMatcher } from '../../context-key-service';
 import { CommandRegistry, Disposable, DisposableCollection, nls } from '../../../common';
 import { Anchor, ContextMenuAccess, ContextMenuRenderer } from '../../context-menu-renderer';
 import { LabelParser } from '../../label-parser';
@@ -48,6 +48,7 @@ export function toAnchor(event: React.MouseEvent): Anchor {
 export class TabBarToolbar extends ReactWidget {
 
     protected current: Widget | undefined;
+    protected contextMatcher: ContextMatcher;
     protected inline = new Map<string, TabBarToolbarItem>();
     protected more = new Map<string, TabBarToolbarItem>();
 
@@ -73,6 +74,7 @@ export class TabBarToolbar extends ReactWidget {
 
     @postConstruct()
     protected init(): void {
+        this.contextMatcher = this.contextKeyService;
         this.toDispose.pushAll([
             this.keybindings.onKeybindingsChanged(() => this.maybeUpdate()),
             this.contextKeyService.onDidChange(e => {
@@ -129,6 +131,7 @@ export class TabBarToolbar extends ReactWidget {
         this.toDisposeOnSetCurrent.dispose();
         this.toDispose.push(this.toDisposeOnSetCurrent);
         this.current = current;
+        this.contextMatcher = current ? this.toolbarRegistry.contextMatcherFor(current) : this.contextKeyService;
         if (current) {
             const resetCurrent = () => {
                 this.setCurrent(undefined);
@@ -145,7 +148,7 @@ export class TabBarToolbar extends ReactWidget {
         this.keybindingContextKeys.clear();
         return <React.Fragment>
             {this.renderMore()}
-            {[...this.inline.values()].map(item => item.render(this.current))}
+            {[...this.inline.values()].map(item => item.render(this.current, this.contextMatcher))}
         </React.Fragment>;
     }
 
@@ -199,7 +202,7 @@ export class TabBarToolbar extends ReactWidget {
             args: [this.current],
             anchor,
             context: this.current?.node || this.node,
-            contextKeyService: this.contextKeyService,
+            contextKeyService: this.contextMatcher,
             includeAnchorArg: false,
             onHide: () => toDisposeOnHide.dispose()
         });

package/src/browser/shell/tab-bar-toolbar/tab-toolbar-item.tsx

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ContextKeyService } from '../../context-key-service';
+import { ContextKeyService, ContextMatcher } from '../../context-key-service';
 import { ReactTabBarToolbarAction, RenderedToolbarAction, TabBarToolbarActionBase } from './tab-bar-toolbar-types';
 import { Widget } from '@lumino/widgets';
 import { LabelIcon, LabelParser } from '../../label-parser';
@@ -29,10 +29,18 @@ import { ActionMenuNode, GroupImpl, MenuNode } from '../../../common/menu';
 export interface TabBarToolbarItem {
     id: string;
     when?: string;
-    isVisible(widget: Widget): boolean;
+    /**
+     * @param contextMatcher evaluates `when` clauses with the values that describe the given widget. Keys
+     * scoped to a DOM node keep resolving against the focused element, as no context node is passed here.
+     */
+    isVisible(widget: Widget, contextMatcher: ContextMatcher): boolean;
     isEnabled(widget: Widget): boolean;
     isToggled(widget: Widget): boolean;
-    render(widget?: Widget): React.ReactNode;
+    /**
+     * @param contextMatcher evaluates `when` clauses with the values that describe the given widget. Defaults
+     * to the ambient context, for toolbars that render items with no owning widget.
+     */
+    render(widget?: Widget, contextMatcher?: ContextMatcher): React.ReactNode;
     onDidChange?: Event<void>;
     group?: string;
     priority?: number;
@@ -68,12 +76,12 @@ class AbstractToolbarItemImpl<T extends TabBarToolbarActionBase> {
         return this.action.onDidChange;
     }
 
-    isVisible(widget: Widget): boolean {
+    isVisible(widget: Widget, contextMatcher: ContextMatcher): boolean {
         if (this.action.isVisible) {
             return this.action.isVisible(widget);
         }
         const actionVisible = !this.action.command || this.commandRegistry.isVisible(this.action.command, widget);
-        const contextMatches = !this.action.when || this.contextKeyService.match(this.action.when);
+        const contextMatches = !this.action.when || contextMatcher.match(this.action.when);
 
         return actionVisible && contextMatches;
     }

package/src/browser/style/tree.css

@@ -219,10 +219,17 @@
   padding: 0 var(--theia-ui-padding);
 }
 
+/* Centered as a flex line rather than by text alignment: a codicon is a 16px
+   inline-block on the same baseline as the 13px label, so in normal flow it
+   rides above the text and stretches the line box. */
 .theia-TreeContainer .theia-WelcomeView .theia-WelcomeViewButton {
   width: 100%;
   max-width: var(--theia-welcomeView-button-maxWidth);
   margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--theia-ui-padding) / 2);
 }
 
 .theia-TreeContainer .theia-WelcomeView .theia-WelcomeViewCommandLink {