Add global toolbar 🛠

examples/api-samples/package.json

@@ -5,8 +5,11 @@
   "description": "Theia - Example code to demonstrate Theia API",
   "dependencies": {
     "@theia/core": "1.22.1",
+    "@theia/file-search": "1.22.1",
     "@theia/filesystem": "1.22.1",
     "@theia/output": "1.22.1",
+    "@theia/search-in-workspace": "1.22.1",
+    "@theia/toolbar": "1.22.1",
     "@theia/vsx-registry": "1.22.1",
     "@theia/workspace": "1.22.1"
   },

examples/api-samples/src/browser/api-samples-frontend-module.ts

@@ -14,23 +14,30 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { ContainerModule } from '@theia/core/shared/inversify';
+import { ContainerModule, interfaces } from '@theia/core/shared/inversify';
 import { bindDynamicLabelProvider } from './label/sample-dynamic-label-provider-command-contribution';
 import { bindSampleFilteredCommandContribution } from './contribution-filter/sample-filtered-command-contribution';
 import { bindSampleUnclosableView } from './view/sample-unclosable-view-contribution';
 import { bindSampleOutputChannelWithSeverity } from './output/sample-output-channel-with-severity';
 import { bindSampleMenu } from './menu/sample-menu-contribution';
 import { bindSampleFileWatching } from './file-watching/sample-file-watching-contribution';
 import { bindVSXCommand } from './vsx/sample-vsx-command-contribution';
+import { bindSampleToolbarContribution } from './toolbar-contribution-example/easy-search-toolbar-item';
 
 import '../../src/browser/style/branding.css';
 
-export default new ContainerModule(bind => {
+export default new ContainerModule((
+    bind: interfaces.Bind,
+    unbind: interfaces.Unbind,
+    isBound: interfaces.IsBound,
+    rebind: interfaces.Rebind,
+) => {
     bindDynamicLabelProvider(bind);
     bindSampleUnclosableView(bind);
     bindSampleOutputChannelWithSeverity(bind);
     bindSampleMenu(bind);
     bindSampleFileWatching(bind);
     bindVSXCommand(bind);
     bindSampleFilteredCommandContribution(bind);
+    bindSampleToolbarContribution(bind, rebind);
 });

examples/api-samples/src/browser/toolbar-contribution-example/easy-search-style.css

@@ -0,0 +1,45 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+#theia-easy-search-toolbar-widget {
+    position: relative;
+}
+
+#theia-easy-search-toolbar-widget .icon-wrapper {
+    cursor: pointer;
+    margin-left: 0;
+}
+
+#theia-easy-search-toolbar-widget:focus,
+#theia-easy-search-toolbar-widget .icon-wrapper:focus,
+#theia-easy-search-toolbar-widget .codicon-search:focus {
+    outline: none;
+}
+
+#theia-easy-search-toolbar-widget  .icon-wrapper.action-item.item.enabled:hover {
+    background-color: var(--theia-toolbar-hoverBackground);
+}
+
+#theia-easy-search-toolbar-widget #easy-search-item-icon.codicon-search {
+    position: relative;
+}
+
+#theia-easy-search-toolbar-widget .icon-wrapper .codicon-triangle-down {
+    position: absolute;
+    font-size: 10px;
+    bottom: -7px;
+    right: -2px;
+}

examples/api-samples/src/browser/toolbar-contribution-example/easy-search-toolbar-item.tsx

@@ -0,0 +1,124 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Command, CommandContribution, CommandRegistry, MenuContribution, MenuModelRegistry, nls } from '@theia/core';
+import { quickCommand } from '@theia/core/lib/browser';
+import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { quickFileOpen } from '@theia/file-search/lib/browser/quick-file-open';
+import { SearchInWorkspaceCommands } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { AbstractToolbarContribution } from '@theia/toolbar/lib/browser/abstract-toolbar-contribution';
+import { ToolbarMenus, ReactInteraction } from '@theia/toolbar/lib/browser/toolbar-constants';
+import { ToolbarContribution } from '@theia/toolbar/lib/browser/toolbar-interfaces';
+import { ToolbarDefaultsFactory } from '@theia/toolbar/lib/browser/toolbar-defaults';
+import { SearchInWorkspaceQuickInputService } from './search-in-workspace-root-quick-input-service';
+import '../../../src/browser/toolbar-contribution-example/easy-search-style.css';
+import { ToolbarDefaultsOverride } from './toolbar-defaults-override';
+
+export const bindSampleToolbarContribution = (bind: interfaces.Bind, rebind: interfaces.Rebind) => {
+    bind(EasySearchToolbarItem).toSelf().inSingletonScope();
+    bind(ToolbarContribution).to(EasySearchToolbarItem);
+    bind(CommandContribution).to(EasySearchToolbarItem);
+    bind(MenuContribution).to(EasySearchToolbarItem);
+    bind(SearchInWorkspaceQuickInputService).toSelf().inSingletonScope();
+    rebind(ToolbarDefaultsFactory).toConstantValue(ToolbarDefaultsOverride);
+};
+
+export const FIND_IN_WORKSPACE_ROOT = Command.toLocalizedCommand({
+    id: 'easy.search.find.in.workspace.root',
+    category: 'Search',
+    label: 'Search Workspace Root for Text',
+}, 'theia/toolbar/searchWorkspaceRootForText', nls.getDefaultKey('Search'));
+
+@injectable()
+export class EasySearchToolbarItem extends AbstractToolbarContribution
+    implements CommandContribution,
+    MenuContribution {
+    @inject(SearchInWorkspaceQuickInputService) protected readonly searchPickService: SearchInWorkspaceQuickInputService;
+    @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
+
+    static ID = 'theia-easy-search-toolbar-widget';
+    id = EasySearchToolbarItem.ID;
+
+    protected handleOnClick = (e: ReactInteraction<HTMLSpanElement>): void => this.doHandleOnClick(e);
+    protected doHandleOnClick(e: ReactInteraction<HTMLSpanElement>): void {
+        e.stopPropagation();
+        const toolbar = document.querySelector<HTMLDivElement>('#main-toolbar');
+        if (toolbar) {
+            const { bottom } = toolbar.getBoundingClientRect();
+            const { left } = e.currentTarget.getBoundingClientRect();
+            this.contextMenuRenderer.render({
+                includeAnchorArg: false,
+                menuPath: ToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU,
+                anchor: { x: left, y: bottom },
+            });
+        }
+    }
+
+    render(): React.ReactNode {
+        return (
+            <div
+                role='button'
+                tabIndex={0}
+                className='icon-wrapper action-item item enabled codicon codicon-search'
+                id='easy-search-item-icon'
+                onClick={this.handleOnClick}
+                title={nls.localize('theia/toolbar/search/icon', 'Search for files, text, commands, and more...')}
+            >
+                <div className='codicon codicon-triangle-down' />
+            </div>);
+    }
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(FIND_IN_WORKSPACE_ROOT, {
+            execute: async () => {
+                const wsRoots = await this.workspaceService.roots;
+                if (!wsRoots.length) {
+                    await this.commandService.executeCommand(SearchInWorkspaceCommands.FIND_IN_FOLDER.id);
+                } else if (wsRoots.length === 1) {
+                    const { resource } = wsRoots[0];
+                    await this.commandService.executeCommand(SearchInWorkspaceCommands.FIND_IN_FOLDER.id, [resource]);
+                } else {
+                    this.searchPickService.open();
+                }
+            },
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
+            commandId: quickCommand.id,
+            label: nls.localize('theia/toolbar/search/findACommand', 'Find a Command'),
+            order: 'a',
+        });
+        registry.registerMenuAction(ToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
+            commandId: quickFileOpen.id,
+            order: 'b',
+            label: nls.localize('theia/toolbar/search/searchForAFile', 'Search for a file')
+        });
+        registry.registerMenuAction(ToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
+            commandId: SearchInWorkspaceCommands.OPEN_SIW_WIDGET.id,
+            label: nls.localize('theia/toolbar/search/searchWorkspaceForText', 'Search Entire Workspace for Text'),
+            order: 'c',
+        });
+        registry.registerMenuAction(ToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
+            commandId: FIND_IN_WORKSPACE_ROOT.id,
+            order: 'd',
+        });
+    }
+}
+

examples/api-samples/src/browser/toolbar-contribution-example/search-in-workspace-root-quick-input-service.ts

@@ -0,0 +1,48 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { LabelProvider, QuickInputService, QuickPickItem } from '@theia/core/lib/browser';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { CommandService } from '@theia/core';
+import { SearchInWorkspaceCommands } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
+
+@injectable()
+export class SearchInWorkspaceQuickInputService {
+    @inject(QuickInputService) protected readonly quickInputService: QuickInputService;
+    @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
+    @inject(LabelProvider) protected readonly labelProvider: LabelProvider;
+    @inject(CommandService) protected readonly commandService: CommandService;
+    protected quickPickItems: QuickPickItem[] = [];
+
+    open(): void {
+        this.quickPickItems = this.createWorkspaceList();
+        this.quickInputService.showQuickPick(this.quickPickItems, {
+            placeholder: 'Workspace root to search',
+        });
+    }
+
+    protected createWorkspaceList(): QuickPickItem[] {
+        const roots = this.workspaceService.tryGetRoots();
+        return roots.map(root => {
+            const uri = root.resource;
+            return {
+                label: this.labelProvider.getName(uri),
+                execute: (): Promise<void> => this.commandService.executeCommand(SearchInWorkspaceCommands.FIND_IN_FOLDER.id, [uri]),
+            };
+        });
+    }
+}

examples/api-samples/src/browser/toolbar-contribution-example/toolbar-defaults-override.ts

@@ -0,0 +1,61 @@
+/********************************************************************************
+ * Copyright (C) 2022 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { nls } from '@theia/core';
+import { DeflatedToolbarTree, ToolbarAlignment } from '@theia/toolbar/lib/browser/toolbar-interfaces';
+import { EasySearchToolbarItem } from './easy-search-toolbar-item';
+
+export const ToolbarDefaultsOverride: () => DeflatedToolbarTree = () => ({
+    items: {
+        [ToolbarAlignment.LEFT]: [
+            [
+                {
+                    id: 'textEditor.commands.go.back',
+                    command: 'textEditor.commands.go.back',
+                    icon: 'codicon codicon-arrow-left',
+                },
+                {
+                    id: 'textEditor.commands.go.forward',
+                    command: 'textEditor.commands.go.forward',
+                    icon: 'codicon codicon-arrow-right',
+                },
+            ],
+            [
+                {
+                    id: 'workbench.action.splitEditorRight',
+                    command: 'workbench.action.splitEditor',
+                    icon: 'codicon codicon-split-horizontal',
+                },
+            ],
+        ],
+        [ToolbarAlignment.CENTER]: [[
+            {
+                id: EasySearchToolbarItem.ID,
+                group: 'contributed'
+            }
+        ]],
+        [ToolbarAlignment.RIGHT]: [
+            [
+                {
+                    id: 'workbench.action.showCommands',
+                    command: 'workbench.action.showCommands',
+                    icon: 'codicon codicon-terminal',
+                    tooltip: nls.localizeByDefault('Command Palette'),
+                },
+            ]
+        ]
+    },
+});

examples/api-samples/tsconfig.json

@@ -12,12 +12,21 @@
     {
       "path": "../../packages/core"
     },
+    {
+      "path": "../../packages/file-search"
+    },
     {
       "path": "../../packages/filesystem"
     },
     {
       "path": "../../packages/output"
     },
+    {
+      "path": "../../packages/search-in-workspace"
+    },
+    {
+      "path": "../../packages/toolbar"
+    },
     {
       "path": "../../packages/vsx-registry"
     },

examples/browser/package.json

@@ -49,6 +49,7 @@
     "@theia/task": "1.22.1",
     "@theia/terminal": "1.22.1",
     "@theia/timeline": "1.22.1",
+    "@theia/toolbar": "1.22.1",
     "@theia/typehierarchy": "1.22.1",
     "@theia/userstorage": "1.22.1",
     "@theia/variable-resolver": "1.22.1",

examples/browser/tsconfig.json

@@ -110,6 +110,9 @@
     {
       "path": "../../packages/timeline"
     },
+    {
+      "path": "../../packages/toolbar"
+    },
     {
       "path": "../../packages/typehierarchy"
     },

examples/electron/package.json

@@ -50,6 +50,7 @@
     "@theia/task": "1.22.1",
     "@theia/terminal": "1.22.1",
     "@theia/timeline": "1.22.1",
+    "@theia/toolbar": "1.22.1",
     "@theia/typehierarchy": "1.22.1",
     "@theia/userstorage": "1.22.1",
     "@theia/variable-resolver": "1.22.1",

examples/electron/tsconfig.json

@@ -113,6 +113,9 @@
     {
       "path": "../../packages/timeline"
     },
+    {
+      "path": "../../packages/toolbar"
+    },
     {
       "path": "../../packages/typehierarchy"
     },