Address feedback

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/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/src/browser/abstract-main-toolbar-contribution.tsx

@@ -18,10 +18,14 @@ 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 { ReactTabBarToolbarContribution, ToolbarAlignment } from './main-toolbar-interfaces';
+import { DeflatedContributedToolbarItem, ReactTabBarToolbarContribution, ToolbarAlignment } from './main-toolbar-interfaces';
 
 @injectable()
 export abstract class AbstractMainToolbarContribution implements ReactTabBarToolbarContribution {
+    @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
+    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
+    @inject(CommandService) protected readonly commandService: CommandService;
+
     abstract id: string;
     abstract column: ToolbarAlignment;
     abstract priority: number;
@@ -30,13 +34,9 @@ export abstract class AbstractMainToolbarContribution implements ReactTabBarTool
     protected didChangeEmitter = new Emitter<void>();
     readonly onDidChange = this.didChangeEmitter.event;
 
-    @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
-    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
-    @inject(CommandService) protected readonly commandService: CommandService;
-
     abstract render(): React.ReactNode;
 
-    toJSON(): { id: string; group: string } {
+    toJSON(): DeflatedContributedToolbarItem {
         return { id: this.id, group: 'contributed' };
     }
 

packages/toolbar/src/browser/application-shell-with-toolbar-override.ts

@@ -34,7 +34,7 @@ export class ApplicationShellWithToolbarOverride extends ApplicationShell {
     protected mainToolbar: MainToolbar;
 
     @postConstruct()
-    protected async init(): Promise<void> {
+    protected override async init(): Promise<void> {
         this.mainToolbar = this.mainToolbarFactory();
         this.mainToolbar.id = 'main-toolbar';
         super.init();
@@ -64,7 +64,7 @@ export class ApplicationShellWithToolbarOverride extends ApplicationShell {
         return false;
     }
 
-    protected createLayout(): Layout {
+    protected override createLayout(): Layout {
         const bottomSplitLayout = this.createSplitLayout(
             [this.mainPanel, this.bottomPanel],
             [1, 0],

packages/toolbar/src/browser/easy-search-toolbar-item.tsx

@@ -14,8 +14,8 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { CommandContribution, CommandRegistry, CommandService, MenuContribution, MenuModelRegistry } from '@theia/core';
-import { ContextMenuRenderer, quickCommand } from '@theia/core/lib/browser';
+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';
@@ -29,31 +29,22 @@ import {
     ToolbarAlignment,
 } from './main-toolbar-interfaces';
 
-export const SEARCH_FOR_FILE = {
-    id: 'main.toolbar.search.for.file',
-    category: 'Search',
-    label: 'Search for a File',
-};
-
-export const FIND_IN_WORKSPACE_ROOT = {
+export const FIND_IN_WORKSPACE_ROOT = Command.toLocalizedCommand({
     id: 'main.toolbar.find.in.workspace.root',
     category: 'Search',
     label: 'Search Workspace Root for Text',
-};
+}, 'theia/toolbar/searchWorkspaceRootForText', nls.getDefaultKey('Search'));
 
 @injectable()
 export class EasySearchToolbarItem extends AbstractMainToolbarContribution
     implements CommandContribution,
     MenuContribution {
+    @inject(SearchInWorkspaceQuickInputService) protected readonly searchPickService: SearchInWorkspaceQuickInputService;
+    @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
+
     id = 'easy-search-toolbar-widget';
     column = ToolbarAlignment.RIGHT;
     priority = 1;
-    newGroup = true;
-
-    @inject(CommandService) protected readonly commandService: CommandService;
-    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
-    @inject(SearchInWorkspaceQuickInputService) protected readonly searchPickService: SearchInWorkspaceQuickInputService;
-    @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
 
     protected handleOnClick = (e: ReactInteraction<HTMLSpanElement>): void => this.doHandleOnClick(e);
     protected doHandleOnClick(e: ReactInteraction<HTMLSpanElement>): void {
@@ -63,6 +54,7 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
             const { bottom } = toolbar.getBoundingClientRect();
             const { left } = e.currentTarget.getBoundingClientRect();
             this.contextMenuRenderer.render({
+                includeAnchorArg: false,
                 menuPath: MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU,
                 anchor: { x: left, y: bottom },
             });
@@ -74,9 +66,9 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
             <div
                 role='button'
                 tabIndex={0}
-                className='icon-wrapper'
+                className='icon-wrapper action-item item enabled'
                 onClick={this.handleOnClick}
-                title='Search for files, text, commands, and more... '
+                title={nls.localize('theia/toolbar/search/icon', 'Search for files, text, commands, and more...')}
             >
                 <div
                     className='codicon codicon-search'
@@ -103,37 +95,28 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
                 }
             },
         });
-        registry.registerCommand(SEARCH_FOR_FILE, {
-            execute: () => {
-                this.commandService.executeCommand(quickFileOpen.id);
-            },
-        });
     }
 
     registerMenus(registry: MenuModelRegistry): void {
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
             commandId: quickCommand.id,
-            label: 'Find a Command',
+            label: nls.localize('theia/toolbar/search/findACommand', 'Find a Command'),
             order: 'a',
         });
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
-            commandId: SEARCH_FOR_FILE.id,
+            commandId: quickFileOpen.id,
             order: 'b',
+            label: nls.localize('theia/toolbar/search/searchForAFile', 'Search for a file')
         });
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
             commandId: SearchInWorkspaceCommands.OPEN_SIW_WIDGET.id,
-            label: 'Search Entire Workspace For Text',
+            label: nls.localize('theia/toolbar/search/searchWorkspaceForText', 'Search Entire Workspace for Text'),
             order: 'c',
         });
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
             commandId: FIND_IN_WORKSPACE_ROOT.id,
             order: 'd',
         });
-        registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
-            commandId: 'languages.workspace.symbol',
-            label: 'Search for a Symbol',
-            order: 'e',
-        });
     }
 }
 

packages/toolbar/src/browser/main-toolbar-command-quick-input-service.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Command, CommandRegistry, CommandService } from '@theia/core';
+import { Command, CommandRegistry, CommandService, nls } from '@theia/core';
 import { QuickCommandService, QuickInputService, QuickPickItem } from '@theia/core/lib/browser';
 import { injectable, inject } from '@theia/core/shared/inversify';
 import { MainToolbarIconDialogFactory } from './main-toolbar-icon-selector-dialog';
@@ -35,22 +35,31 @@ export class MainToolbarCommandQuickInputService {
     protected iconClass: string | undefined;
     protected commandToAdd: Command | undefined;
 
-    protected columnQuickPickItems: QuickPickItem[] = [ToolbarAlignment.LEFT, ToolbarAlignment.CENTER, ToolbarAlignment.RIGHT]
-        .map(column => ({
-            label: `${column.toUpperCase()} Column`,
-            id: column,
-        }));
+    protected columnQuickPickItems: QuickPickItem[] = [
+        {
+            label: nls.localize('theia/toolbar/leftColumn', 'Left Column'),
+            id: ToolbarAlignment.LEFT,
+        },
+        {
+            label: nls.localize('theia/toolbar/centerColumn', 'Center Column'),
+            id: ToolbarAlignment.CENTER,
+        },
+        {
+            label: nls.localize('theia/toolbar/rightColumn', 'Right Column'),
+            id: ToolbarAlignment.RIGHT
+        },
+    ];
 
     openIconDialog(): void {
         this.quickPickItems = this.generateCommandsList();
         this.quickInputService.showQuickPick(this.quickPickItems, {
-            placeholder: 'Find a command to add to the toolbar',
+            placeholder: nls.localize('theia/toolbar/addCommandPlaceholder', 'Find a command to add to the toolbar'),
         });
     }
 
     protected openColumnQP(): Promise<QuickPickItem> {
         return this.quickInputService.showQuickPick(this.columnQuickPickItems, {
-            placeholder: 'Where would you like the command added?',
+            placeholder: nls.localize('theia/toolbar/toolbarLocationPlaceholder', 'Where would you like the command added?')
         });
     }
 

packages/toolbar/src/browser/main-toolbar-constants.ts

@@ -14,46 +14,53 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { MenuPath } from '@theia/core';
+import { Command, MenuPath, nls } from '@theia/core';
+import { CommonCommands } from '@theia/core/lib/browser';
 import URI from '@theia/core/lib/common/uri';
 import { UserStorageUri } from '@theia/userstorage/lib/browser';
 
 export namespace MainToolbarCommands {
-    export const TOGGLE_MAIN_TOOLBAR = {
+    export const TOGGLE_MAIN_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.view.toggle',
-        category: 'View',
+        category: CommonCommands.VIEW_CATEGORY,
         label: 'Toggle Main Toolbar',
-    };
-    export const REMOVE_COMMAND_FROM_TOOLBAR = {
+    }, 'theia/toolbar/toggleToolbar', nls.getDefaultKey(CommonCommands.VIEW_CATEGORY));
+
+    export const REMOVE_COMMAND_FROM_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.remove.command',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Remove Command From Toolbar',
-    };
-    export const INSERT_GROUP_LEFT = {
+    }, 'theia/toolbar/removeCommand');
+
+    export const INSERT_GROUP_LEFT = Command.toLocalizedCommand({
         id: 'main.toolbar.insert.group.left',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Insert Group Separator (Left)',
-    };
-    export const INSERT_GROUP_RIGHT = {
+    }, 'theia/toolbar/insertGroupLeft');
+
+    export const INSERT_GROUP_RIGHT = Command.toLocalizedCommand({
         id: 'main.toolbar.insert.group.right',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Insert Group Separator (Right)',
-    };
-    export const ADD_COMMAND_TO_TOOLBAR = {
+    }, 'theia/toolbar/insertGroupRight');
+
+    export const ADD_COMMAND_TO_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.add.command',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Add Command to Toolbar',
-    };
-    export const RESET_TOOLBAR = {
+    }, 'theia/toolbar/addCommand');
+
+    export const RESET_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.restore.defaults',
         category: 'Toolbar',
         label: 'Restore Toolbar Defaults',
-    };
-    export const CUSTOMIZE_TOOLBAR = {
+    }, 'theia/toolbar/restoreDefaults');
+
+    export const CUSTOMIZE_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.customize.toolbar',
         category: 'Toolbar',
         label: 'Customize Toolbar (Open JSON)',
-    };
+    }, 'theia/toolbar/openJSON');
 }
 
 export const UserToolbarURI = Symbol('UserToolbarURI');
@@ -66,8 +73,7 @@ export namespace MainToolbarMenus {
 
 export type ReactInteraction<T = Element, U = MouseEvent> = React.MouseEvent<T, U> | React.KeyboardEvent<T>;
 export namespace ReactKeyboardEvent {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    export function is(obj: any): obj is React.KeyboardEvent {
-        return typeof obj === 'object' && 'key' in obj;
+    export function is(obj: unknown): obj is React.KeyboardEvent {
+        return typeof obj === 'object' && !!obj && 'key' in obj;
     }
 }

packages/toolbar/src/browser/main-toolbar-controller.ts

@@ -182,7 +182,7 @@ export class MainToolbarController {
     }
 
     async clearAll(): Promise<boolean> {
-        return this.withBusy<boolean>(async () => this.storageProvider.clearAll());
+        return this.withBusy<boolean>(() => this.storageProvider.clearAll());
     }
 
     async openOrCreateJSONFile(doOpen = false): Promise<Widget | undefined> {

packages/toolbar/src/browser/main-toolbar-defaults.ts

@@ -14,11 +14,11 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { MainToolbarTreeSchema, ToolbarAlignment } from './main-toolbar-interfaces';
+import { DeflatedMainToolbarTreeSchema, ToolbarAlignment } from './main-toolbar-interfaces';
 
 /* eslint-disable max-lines-per-function */
 export const MainToolbarDefaultsFactory = Symbol('MainToolbarDefaultsFactory');
-export const MainToolbarDefaults: () => MainToolbarTreeSchema = () => ({
+export const MainToolbarDefaults: () => DeflatedMainToolbarTreeSchema = () => ({
     items: {
         [ToolbarAlignment.LEFT]: [
             [
@@ -47,7 +47,7 @@ export const MainToolbarDefaults: () => MainToolbarTreeSchema = () => ({
                     id: 'terminal:new',
                     command: 'terminal:new',
                     icon: 'codicon codicon-terminal',
-                },
+                }
             ],
         ],
         [ToolbarAlignment.RIGHT]: [],