monaco: add support for inQuickOpen (#12427)

The commit adds support for the `inQuickOpen` when-clause context which is used to reflect whether there is a quick-open menu currently visible or not. Signed-off-by: FernandoAscencio <[email protected]> Co-authored-by: Marc Dumais <[email protected]>
eclipse-theia · Apr 25, 2023 · a0e45ce · a0e45ce
1 parent 17e5269
commit a0e45ce
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/examples/api-tests/src/monaco-api.spec.js b/examples/api-tests/src/monaco-api.spec.js
@@ -32,7 +32,8 @@ describe('Monaco API', async function () {
     const { TokenizationRegistry } = require('@theia/monaco-editor-core/esm/vs/editor/common/languages');
     const { MonacoContextKeyService } = require('@theia/monaco/lib/browser/monaco-context-key-service');
     const { URI } = require('@theia/monaco-editor-core/esm/vs/base/common/uri');
-
+    const { animationFrame } = require('@theia/core/lib/browser/browser');
+
     const container = window.theia.container;
     const editorManager = container.get(EditorManager);
     const workspaceService = container.get(WorkspaceService);
@@ -185,4 +186,20 @@ describe('Monaco API', async function () {
         assert.isTrue(contextKeys.match(`${key} == ${secondValue}`));
     });
 
+    it('Supports context key: inQuickOpen', async () => {
+        const inQuickOpenContextKey = 'inQuickOpen';
+        const quickOpenCommands = ['file-search.openFile', 'workbench.action.showCommands'];
+        const CommandThatChangesFocus = 'workbench.files.action.focusFilesExplorer';
+
+        for (const cmd of quickOpenCommands) {
+            assert.isFalse(contextKeys.match(inQuickOpenContextKey));
+            await commands.executeCommand(cmd);
+            assert.isTrue(contextKeys.match(inQuickOpenContextKey));
+
+            await commands.executeCommand(CommandThatChangesFocus);
+            await animationFrame();
+            assert.isFalse(contextKeys.match(inQuickOpenContextKey));
+        }
+    });
+
 });
diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts
@@ -30,6 +30,7 @@ import { MonacoResolvedKeybinding } from './monaco-resolved-keybinding';
 import { IQuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess';
 import { QuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickAccess';
 import { ContextKeyService as VSCodeContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/browser/contextKeyService';
+import { IContextKey } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
 import { IListOptions, List } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/list/listWidget';
 import * as monaco from '@theia/monaco-editor-core';
 import { ResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/base/common/keybindings';
@@ -80,6 +81,8 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     protected container: HTMLElement;
     private quickInputList: List<unknown>;
 
+    protected inQuickOpen: IContextKey<boolean>;
+
     get backButton(): IQuickInputButton { return this.controller.backButton; }
     get onShow(): monaco.IEvent<void> { return this.controller.onShow; }
     get onHide(): monaco.IEvent<void> { return this.controller.onHide; }
@@ -89,9 +92,13 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         this.initContainer();
         this.initController();
         this.quickAccess = new QuickAccessController(this, StandaloneServices.get(IInstantiationService));
+        this.inQuickOpen = this.contextKeyService.createKey<boolean>('inQuickOpen', false);
         this.controller.onShow(() => {
             this.container.style.top = this.shell.mainPanel.node.getBoundingClientRect().top + 'px';
+            this.inQuickOpen.set(true);
         });
+        this.controller.onHide(() => this.inQuickOpen.set(false));
+
         this.themeService.initialized.then(() => this.controller.applyStyles(this.getStyles()));
         // Hook into the theming service of Monaco to ensure that the updates are ready.
         StandaloneServices.get(IStandaloneThemeService).onDidColorThemeChange(() => this.controller.applyStyles(this.getStyles()));