Add global toolbar 🛠

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"
     },

packages/core/src/browser/common-frontend-contribution.ts

@@ -1761,6 +1761,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: 'focusBorder'
                 }, description: "The color of the row's top and bottom border when the row is focused."
             },
+            // Toolbar Action colors should be aligned with https://code.visualstudio.com/api/references/theme-color#action-colors
+            {
+                id: 'toolbar.hoverBackground', defaults: {
+                    dark: '#5a5d5e50', light: '#b8b8b850', hc: undefined
+                }, description: 'Toolbar background when hovering over actions using the mouse.'
+            },
 
             // Theia Variable colors
             {
@@ -2042,7 +2048,23 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: 'editorWidget.background',
                 },
                 description: 'Background color of breadcrumb item picker'
-            }
+            },
+            {
+                id: 'mainToolbar.background',
+                defaults: {
+                    dark: Color.lighten('activityBar.background', 0.1),
+                    light: Color.darken('activityBar.background', 0.1),
+                    hc: Color.lighten('activityBar.background', 0.1),
+                },
+                description: 'Background color of shell\'s global toolbar'
+            },
+            {
+                id: 'mainToolbar.foreground', defaults: {
+                    dark: Color.darken('activityBar.foreground', 0.1),
+                    light: Color.lighten('activityBar.foreground', 0.1),
+                    hc: Color.lighten('activityBar.foreground', 0.1),
+                }, description: 'Foreground color of active toolbar item',
+            },
         );
     }
 }

packages/core/src/browser/quick-input/quick-command-service.ts

@@ -98,7 +98,7 @@ export class QuickCommandService implements QuickAccessContribution, QuickAccess
         return items;
     }
 
-    private toItem(command: Command): QuickPickItem {
+    toItem(command: Command): QuickPickItem {
         const label = (command.category) ? `${command.category}: ` + command.label! : command.label!;
         const iconClasses = this.getItemIconClasses(command);
         const activeElement = window.document.activeElement as HTMLElement;

packages/core/src/browser/shell/application-shell.ts

@@ -143,25 +143,25 @@ export class ApplicationShell extends Widget {
     /**
      * The dock panel in the main shell area. This is where editors usually go to.
      */
-    readonly mainPanel: TheiaDockPanel;
+    mainPanel: TheiaDockPanel;
 
     /**
      * The dock panel in the bottom shell area. In contrast to the main panel, the bottom panel
      * can be collapsed and expanded.
      */
-    readonly bottomPanel: TheiaDockPanel;
+    bottomPanel: TheiaDockPanel;
 
     /**
      * Handler for the left side panel. The primary application views go here, such as the
      * file explorer and the git view.
      */
-    readonly leftPanelHandler: SidePanelHandler;
+    leftPanelHandler: SidePanelHandler;
 
     /**
      * Handler for the right side panel. The secondary application views go here, such as the
      * outline view.
      */
-    readonly rightPanelHandler: SidePanelHandler;
+    rightPanelHandler: SidePanelHandler;
 
     /**
      * General options for the application shell.
@@ -171,7 +171,7 @@ export class ApplicationShell extends Widget {
     /**
      * The fixed-size panel shown on top. This one usually holds the main menu.
      */
-    readonly topPanel: Panel;
+    topPanel: Panel;
 
     /**
      * The current state of the bottom panel.
@@ -212,42 +212,62 @@ export class ApplicationShell extends Widget {
     constructor(
         @inject(DockPanelRendererFactory) protected dockPanelRendererFactory: () => DockPanelRenderer,
         @inject(StatusBarImpl) protected readonly statusBar: StatusBarImpl,
-        @inject(SidePanelHandlerFactory) sidePanelHandlerFactory: () => SidePanelHandler,
+        @inject(SidePanelHandlerFactory) protected readonly sidePanelHandlerFactory: () => SidePanelHandler,
         @inject(SplitPositionHandler) protected splitPositionHandler: SplitPositionHandler,
         @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService,
         @inject(ApplicationShellOptions) @optional() options: RecursivePartial<ApplicationShell.Options> = {},
         @inject(CorePreferences) protected readonly corePreferences: CorePreferences
     ) {
         super(options as Widget.IOptions);
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.initializeShell();
+        this.initSidebarVisibleKeyContext();
+        this.initFocusKeyContexts();
+
+        if (!environment.electron.is()) {
+            this.corePreferences.ready.then(() => {
+                this.setTopPanelVisibility(this.corePreferences['window.menuBarVisibility']);
+            });
+            this.corePreferences.onPreferenceChanged(preference => {
+                if (preference.preferenceName === 'window.menuBarVisibility') {
+                    this.setTopPanelVisibility(preference.newValue);
+                }
+            });
+        }
+    }
+
+    protected initializeShell(): void {
         this.addClass(APPLICATION_SHELL_CLASS);
         this.id = 'theia-app-shell';
-
         // Merge the user-defined application options with the default options
         this.options = {
             bottomPanel: {
                 ...ApplicationShell.DEFAULT_OPTIONS.bottomPanel,
-                ...options.bottomPanel || {}
+                ...this.options?.bottomPanel || {}
             },
             leftPanel: {
                 ...ApplicationShell.DEFAULT_OPTIONS.leftPanel,
-                ...options.leftPanel || {}
+                ...this.options?.leftPanel || {}
             },
             rightPanel: {
                 ...ApplicationShell.DEFAULT_OPTIONS.rightPanel,
-                ...options.rightPanel || {}
+                ...this.options?.rightPanel || {}
             }
         };
 
         this.mainPanel = this.createMainPanel();
         this.topPanel = this.createTopPanel();
         this.bottomPanel = this.createBottomPanel();
 
-        this.leftPanelHandler = sidePanelHandlerFactory();
+        this.leftPanelHandler = this.sidePanelHandlerFactory();
         this.leftPanelHandler.create('left', this.options.leftPanel);
         this.leftPanelHandler.dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
         this.leftPanelHandler.dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
 
-        this.rightPanelHandler = sidePanelHandlerFactory();
+        this.rightPanelHandler = this.sidePanelHandlerFactory();
         this.rightPanelHandler.create('right', this.options.rightPanel);
         this.rightPanelHandler.dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
         this.rightPanelHandler.dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
@@ -258,23 +278,6 @@ export class ApplicationShell extends Widget {
         this.tracker.activeChanged.connect(this.onActiveChanged, this);
     }
 
-    @postConstruct()
-    protected init(): void {
-        this.initSidebarVisibleKeyContext();
-        this.initFocusKeyContexts();
-
-        if (!environment.electron.is()) {
-            this.corePreferences.ready.then(() => {
-                this.setTopPanelVisibility(this.corePreferences['window.menuBarVisibility']);
-            });
-            this.corePreferences.onPreferenceChanged(preference => {
-                if (preference.preferenceName === 'window.menuBarVisibility') {
-                    this.setTopPanelVisibility(preference.newValue);
-                }
-            });
-        }
-    }
-
     protected initSidebarVisibleKeyContext(): void {
         const leftSideBarPanel = this.leftPanelHandler.dockPanel;
         const sidebarVisibleKey = this.contextKeyService.createKey('sidebarVisible', leftSideBarPanel.isVisible);

packages/core/src/browser/style/index.css

@@ -188,7 +188,7 @@ blockquote {
 }
 
 .action-item:hover {
-    background-color: rgba(50%, 50%, 50%, 0.2);
+    background-color: var(--theia-toolbar-hoverBackground);
 }
 
 button.theia-button, .theia-button {

packages/toolbar/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+    extends: [
+        '../../configs/build.eslintrc.json'
+    ],
+    parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: 'tsconfig.json'
+    }
+};

packages/toolbar/fetch-icons.js

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+const fs = require('fs');
+const path = require('path');
+
+// This script generates an JSON array of font-awesome classnames from the font-awesome.css files
+const fontAwesomeCSSPath = path.resolve(__dirname, '../../node_modules/font-awesome/css/font-awesome.css');
+const fontAwesomeDestination = path.resolve(__dirname, './src/browser/font-awesome.json');
+
+const codiconCSSPath = path.resolve(__dirname, '../../node_modules/@vscode/codicons/dist/codicon.css')
+const codiconDestination = path.resolve(__dirname, './src/browser/codicon.json')
+
+const faContent = fs.readFileSync(fontAwesomeCSSPath, 'utf-8');
+const regexp = /([\w,-]*):before/gm;
+let faArray;
+const faMatches = [];
+while (faArray = regexp.exec(faContent)) {
+    faMatches.push(faArray[1]);
+}
+fs.writeFileSync(fontAwesomeDestination, JSON.stringify(faMatches));
+
+const codiconContent = fs.readFileSync(codiconCSSPath, 'utf-8');
+let codiconArray;
+const codiconMatches = [];
+while (codiconArray = regexp.exec(codiconContent)) {
+    codiconMatches.push(codiconArray[1]);
+}
+fs.writeFileSync(codiconDestination, JSON.stringify(codiconMatches));

packages/toolbar/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@theia/toolbar",
+  "version": "1.22.1",
+  "description": "Theia - Toolbar",
+  "keywords": [
+    "theia-extension"
+  ],
+  "homepage": "https://github.com/eclipse-theia/theia",
+  "license": "EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-theia/theia.git"
+  },
+  "bugs": {
+    "url": "https://github.com/eclipse-theia/theia/issues"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "theiaext build",
+    "clean": "theiaext clean",
+    "compile": "theiaext compile",
+    "lint": "theiaext lint",
+    "test": "theiaext test",
+    "watch": "theiaext watch"
+  },
+  "dependencies": {
+    "@theia/core": "1.22.1",
+    "@theia/editor": "1.22.1",
+    "@theia/file-search": "1.22.1",
+    "@theia/filesystem": "1.22.1",
+    "@theia/monaco": "1.22.1",
+    "@theia/search-in-workspace": "1.22.1",
+    "@theia/userstorage": "1.22.1",
+    "@theia/workspace": "1.22.1",
+    "ajv": "^6.5.3",
+    "jsonc-parser": "^2.2.0",
+    "perfect-scrollbar": "^1.3.0"
+  },
+  "theiaExtensions": [
+    {
+      "frontend": "lib/browser/main-toolbar-frontend-module"
+    }
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/toolbar/src/browser/abstract-main-toolbar-contribution.tsx

@@ -0,0 +1,55 @@
+/********************************************************************************
+ * 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 * as React from '@theia/core/shared/react';
+import { CommandService, Emitter } from '@theia/core';
+import { injectable, inject } from '@theia/core/shared/inversify';
+import { ContextMenuRenderer, KeybindingRegistry } from '@theia/core/lib/browser';
+import { DeflatedContributedToolbarItem, MainToolbarContribution } from './main-toolbar-interfaces';
+
+// Toolbar Contribution should extend this class and bind to MainToolbarContribution.
+// The MainToolbarDefaultsFactory should be overridden to include new contributions
+@injectable()
+export abstract class AbstractMainToolbarContribution implements MainToolbarContribution {
+    @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
+    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
+    @inject(CommandService) protected readonly commandService: CommandService;
+
+    abstract id: string;
+
+    protected didChangeEmitter = new Emitter<void>();
+    readonly onDidChange = this.didChangeEmitter.event;
+
+    abstract render(): React.ReactNode;
+
+    toJSON(): DeflatedContributedToolbarItem {
+        return { id: this.id, group: 'contributed' };
+    }
+
+    protected resolveKeybindingForCommand(commandID: string | undefined): string {
+        if (!commandID) {
+            return '';
+        }
+        const keybindings = this.keybindingRegistry.getKeybindingsForCommand(commandID);
+        if (keybindings.length > 0) {
+            const binding = keybindings[0];
+            const bindingKeySequence = this.keybindingRegistry.resolveKeybinding(binding);
+            const keyCode = bindingKeySequence[0];
+            return ` (${this.keybindingRegistry.acceleratorForKeyCode(keyCode, '+')})`;
+        }
+        return '';
+    }
+}