@theia/core 1.27.0-next.9 → 1.27.0

package/src/browser/source-tree/tree-source.ts

@@ -21,13 +21,14 @@ import { injectable, unmanaged } from 'inversify';
 import { Emitter, Event } from '../../common/event';
 import { MaybePromise } from '../../common/types';
 import { Disposable, DisposableCollection } from '../../common/disposable';
+import { TreeWidget } from '../tree';
 
 export interface TreeElement {
     /** default: parent id + position among siblings */
     readonly id?: number | string | undefined
     /** default: true */
     readonly visible?: boolean
-    render(): ReactNode
+    render(host: TreeWidget): ReactNode
     open?(): MaybePromise<any>
 }
 

package/src/browser/style/breadcrumbs.css

@@ -28,7 +28,6 @@
     justify-content: flex-start;
     align-items: center;
     outline-style: none;
-    margin: .5rem;
     list-style-type: none;
     overflow: hidden;
     padding: 0;

package/src/browser/style/index.css

@@ -21,6 +21,56 @@
 | General
 |----------------------------------------------------------------------------*/
 
+:root {
+
+  /* Borders: Width and color (dark to bright) */
+
+  --theia-border-width: 1px;
+  --theia-panel-border-width: 1px;
+
+
+  /* UI fonts: Family, size and color (bright to dark)
+     ---------------------------------------------------
+     The UI font CSS variables are used for the typography all of the Theia
+     user interface elements that are not directly user-generated content.
+   */
+
+  --theia-ui-font-scale-factor: 1.2;
+  --theia-ui-font-size0: calc(var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor));
+  --theia-ui-font-size1: 13px; /* Base font size */
+  --theia-ui-font-size2: calc(var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor));
+  --theia-ui-font-size3: calc(var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor));
+  --theia-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
+  --theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  /* Content fonts: Family, size and color (bright to dark)
+     Content font variables are used for typography of user-generated content.
+   */
+
+  --theia-content-font-size: 13px;
+  --theia-content-line-height: 22px;
+
+  --theia-code-font-size: 13px;
+  --theia-code-line-height: 17px;
+  --theia-code-padding: 5px;
+  --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
+  --theia-monospace-font-family: monospace;
+  --theia-ui-padding: 6px;
+
+  /* Icons */
+  --theia-icon-size: 16px;
+
+  /* Scrollbars */
+  --theia-scrollbar-width: 10px;
+  --theia-scrollbar-rail-width: 10px;
+
+  /* Statusbar */
+  --theia-statusBar-font-size: 12px;
+
+  /* Opacity for disabled mod  */
+  --theia-mod-disabled-opacity: 0.4;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -48,8 +98,10 @@ code {
 }
 
 blockquote {
-    background: var(--vscode-textBlockQuote-background);
-    border: var(--theia-border-width) solid var(--theia-textBlockQuote-border);
+    margin: 0 7px 0 5px;
+    padding: 0px 16px 0px 10px;
+    background: var(--theia-textBlockQuote-background);
+    border-left: 5px solid var(--theia-textBlockQuote-border);
 }
 
 .theia-input {
@@ -173,12 +225,7 @@ blockquote {
 }
 
 ::selection {
-    background: var(--theia-selection-background);
-}
-
-.p-Widget:focus {
-    border: none;
-    outline: none;
+  background: var(--theia-selection-background);
 }
 
 .action-label {
@@ -188,22 +235,17 @@ blockquote {
 }
 
 .action-label:hover {
-    background-color: var(--theia-toolbar-hoverBackground);
+  background-color: var(--theia-toolbar-hoverBackground);
 }
 
-button.theia-button, .theia-button {
-    border: none;
-    color: var(--theia-button-foreground);
-    background-color: var(--theia-button-background);
-    min-width: 65px;
-    outline: none;
-    cursor: pointer;
-    padding: 4px 9px;
-    margin-left: calc(var(--theia-ui-padding)*2);
-}
-
-.theia-button:hover {
-  background-color: var(--theia-button-hoverBackground);
+.theia-button {
+  border: none;
+  color: var(--theia-button-foreground);
+  min-width: 65px;
+  outline: none;
+  cursor: pointer;
+  padding: 4px 9px;
+  margin-left: calc(var(--theia-ui-padding)*2);
 }
 
 .theia-button:focus {
@@ -211,16 +253,11 @@ button.theia-button, .theia-button {
   outline-offset: 1px;
 }
 
-button.secondary, .theia-button.secondary {
+.theia-button.secondary {
   color: var(--theia-secondaryButton-foreground);
-  background-color: var(--theia-secondaryButton-background);
-}
-
-button.secondary:hover, .theia-button.secondary:hover {
-  background-color: var(--theia-secondaryButton-hoverBackground);
 }
 
-button.theia-button[disabled], .theia-button[disabled] {
+.theia-button[disabled] {
   opacity: 0.6;
   color: var(--theia-button-disabledForeground);
   background-color: var(--theia-button-disabledBackground);

package/src/browser/style/menus.css

@@ -44,8 +44,6 @@
 
 .p-MenuBar-item {
   padding: 0px 8px;
-  border-left: var(--theia-border-width) solid var(--theia-menu-border);
-  border-right: var(--theia-border-width) solid var(--theia-menu-border);
   line-height: var(--theia-private-menubar-height);
 }
 
@@ -115,6 +113,10 @@
   border: 1px solid var(--theia-menu-border);
 }
 
+.p-Menu:focus {
+  outline: none;
+}
+
 .p-Menu-item {
   min-height: var(--theia-private-menu-item-height);
   max-height: var(--theia-private-menu-item-height);

package/src/browser/style/select-component.css

@@ -16,6 +16,7 @@
 
 .theia-select-component {
     background-color: var(--theia-dropdown-background);
+    cursor: pointer;
     outline: var(--theia-dropdown-border) solid 1px;
     outline-offset: -1px;
     min-height: 23px;
@@ -83,6 +84,7 @@
 
 .theia-select-component-dropdown .theia-select-component-option.selected {
     color: var(--theia-list-activeSelectionForeground);
+    cursor: pointer;
     background: var(--theia-list-activeSelectionBackground);
     outline: var(--theia-focusBorder) solid 1px;
     outline-offset: -1px;

package/src/browser/style/sidepanel.css

@@ -51,29 +51,13 @@
 }
 
 .p-TabBar.theia-app-sides .p-TabBar-tab {
-  position: relative;
-  background: var(--theia-activityBar-background);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: var(--theia-private-sidebar-tab-height);
-  cursor: pointer;
-}
-
-.p-TabBar.theia-app-left .p-TabBar-tab {
-    border-left: var(--theia-panel-border-width) solid transparent;
-}
-
-.p-TabBar.theia-app-left.theia-app-sides {
-    border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
-}
-
-.p-TabBar.theia-app-right .p-TabBar-tab {
-    border-right: var(--theia-panel-border-width) solid transparent;
-}
-
-.p-Widget.p-TabBar.theia-app-right.theia-app-sides {
-    border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-border);
+    position: relative;
+    background: var(--theia-activityBar-background);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: var(--theia-private-sidebar-tab-height);
+    cursor: pointer;
 }
 
 .p-TabBar.theia-app-sides .p-TabBar-tab.p-mod-current,
@@ -86,13 +70,15 @@
 }
 
 .p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current {
-  border-left: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
   border-top-color: transparent;
+  box-shadow: 2px 0 0 var(--theia-activityBar-activeBorder) inset;
+
 }
 
 .p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
-    border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
     border-top-color: transparent;
+    box-shadow: -2px 0 0 var(--theia-activityBar-activeBorder) inset;
+
 }
 
 .p-TabBar.theia-app-sides .p-TabBar-tabLabel,

package/src/browser/style/status-bar.css

@@ -68,15 +68,6 @@ body.theia-no-open-workspace #theia-statusBar {
     margin-right: calc(var(--theia-ui-padding)/2);
 }
 
-#theia-statusBar .area .element.hasCommand:hover {
-    background-color: var(--theia-statusBarItem-hoverBackground);
-    cursor: pointer;
-}
-
-#theia-statusBar .area .element.hasCommand:active {
-    background-color: var(--theia-statusBarItem-activeBackground);
-}
-
 .theia-mod-offline #theia-statusBar {
     background-color: var(--theia-statusBar-offlineBackground) !important;
 }
@@ -85,14 +76,6 @@ body.theia-no-open-workspace #theia-statusBar {
     color: var(--theia-statusBar-offlineForeground) !important;
 }
 
-.theia-mod-offline #theia-statusBar .area .element.hasCommand:hover {
-    background-color: var(--theia-statusBarItem-offlineHoverBackground) !important;
-}
-
-.theia-mod-offline #theia-statusBar .area .element.hasCommand:active {
-    background-color: var(--theia-statusBarItem-offlineActiveBackground) !important;
-}
-
 #theia-statusBar .area.left .element {
     margin-right: var(--theia-ui-padding);
 }
@@ -114,6 +97,14 @@ body.theia-no-open-workspace #theia-statusBar {
     margin-left: calc(-1 * var(--theia-ui-padding));
 }
 
+#theia-statusBar .area .element.hasCommand:hover {
+    cursor: pointer;
+}
+
+#theia-statusBar .area .element.hasCommand:active {
+    cursor: pointer;
+}
+
 
 #theia-statusBar .element {
     /* https://css-tricks.com/os-specific-fonts-css/#article-header-id-0 */

package/src/browser/style/tabs.css

@@ -84,22 +84,6 @@
     color: var(--theia-tab-inactiveForeground);
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
-    background: var(--theia-tab-hoverBackground);
-    box-shadow: 0 1px 0 var(--theia-tab-hoverBorder) inset;
-}
-
-#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
-    background: var(--theia-tab-unfocusedHoverBackground);
-    box-shadow: 0 1px 0 var(--theia-tab-unfocusedHoverBorder) inset;
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
-    background: var(--theia-tab-activeBackground);
-    color: var(--theia-tab-activeForeground);
-    box-shadow: 0 1px 0 var(--theia-tab-activeBorderTop) inset, 0 -1px 0 var(--theia-tab-activeBorder) inset;
-}
-
 #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab {
     color: var(--theia-tab-unfocusedInactiveForeground);
 }

package/src/browser/style/tooltip.css

@@ -15,10 +15,10 @@
  ********************************************************************************/
 
 .theia-tooltip {
-    color: var(--theia-list-hoverForeground) !important;
-    background: var(--theia-list-hoverBackground) !important;
+    color: var(--theia-editorHoverWidget-foreground) !important;
+    background: var(--theia-editorHoverWidget-background) !important;
     border: 1px solid !important;
-    border-color: var(--theia-list-hoverForeground) !important;
+    border-color: var(--theia-editorHoverWidget-border) !important;
 }
 
 /* Hide tooltip arrow */

package/src/browser/style/tree.css

@@ -27,7 +27,16 @@
     position: relative;
 }
 
-.theia-Tree:focus .theia-TreeContainer.empty {
+.theia-Tree:focus .theia-TreeContainer.empty::before,
+.theia-Tree:focus .theia-TreeContainer.focused::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+    content: "";
     outline-width: 1px;
     outline-style: solid;
     outline-offset: -1px;
@@ -88,22 +97,26 @@
     transform: rotate(-90deg);
 }
 
-.theia-Tree:focus .theia-TreeNode.theia-mod-selected,
-.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
+.theia-Tree:focus-within .theia-TreeNode.theia-mod-selected {
     background: var(--theia-list-activeSelectionBackground);
     color: var(--theia-list-activeSelectionForeground) !important;
 }
 
-.theia-Tree:focus .theia-TreeNode.theia-mod-selected .theia-TreeNodeTail,
-.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected .theia-TreeNodeTail,
-.theia-Tree:focus .theia-TreeNode.theia-mod-selected .theia-caption-suffix,
-.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected .theia-caption-suffix,
-.theia-Tree:focus .theia-TreeNode.theia-mod-selected .theia-TreeNodeInfo,
-.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected .theia-TreeNodeInfo,
-.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected .theia-TreeNodeSegment {
+.theia-Tree:focus-within .theia-TreeNode.theia-mod-selected .theia-TreeNodeTail,
+.theia-Tree:focus-within .theia-TreeNode.theia-mod-selected .theia-caption-suffix,
+.theia-Tree:focus-within .theia-TreeNode.theia-mod-selected .theia-TreeNodeInfo,
+.theia-Tree:focus-within .theia-TreeNode.theia-mod-selected .theia-TreeNodeSegment {
     color: var(--theia-list-activeSelectionForeground) !important;
 }
 
+.theia-Tree:focus .theia-TreeNode.theia-mod-focus,
+.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-focus {
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+    outline-color: var(--theia-focusBorder);
+}
+
 .theia-TreeNodeInfo {
     color: var(--theia-foreground);
     opacity: 0.7;
@@ -124,13 +137,16 @@
 }
 
 .theia-TreeNodeSegment {
-    display: flex;
     align-items: center;
     flex-grow: 0;
     user-select: none;
     white-space: nowrap;
 }
 
+.theia-TreeNodeSegment.flex {
+    display: flex;
+}
+
 .theia-TreeNodeSegmentGrow {
     flex-grow: 1 !important;
     overflow: hidden;

package/src/browser/style/view-container.css

@@ -111,6 +111,10 @@
     opacity: 0.6;
 }
 
+.theia-view-container-part-header .notification-count-container {
+    margin-right: 12px;
+}
+
 .theia-view-container .part > .body {
     height: var(--theia-view-container-content-height);
     min-width: 50px;

package/src/browser/styling-service.ts

@@ -0,0 +1,76 @@
+// *****************************************************************************
+// Copyright (C) 2022 TypeFox 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, named } from 'inversify';
+import { ContributionProvider } from '../common/contribution-provider';
+import { Theme, ThemeType } from '../common/theme';
+import { ColorRegistry } from './color-registry';
+import { DecorationStyle } from './decoration-style';
+import { FrontendApplicationContribution } from './frontend-application';
+import { ThemeService } from './theming';
+
+export const StylingParticipant = Symbol('StylingParticipant');
+
+export interface StylingParticipant {
+    registerThemeStyle(theme: ColorTheme, collector: CssStyleCollector): void
+}
+
+export interface ColorTheme {
+    type: ThemeType
+    label: string
+    getColor(color: string): string | undefined;
+}
+
+export interface CssStyleCollector {
+    addRule(rule: string): void;
+}
+
+@injectable()
+export class StylingService implements FrontendApplicationContribution {
+
+    protected cssElement = DecorationStyle.createStyleElement('contributedColorTheme');
+
+    @inject(ThemeService)
+    protected readonly themeService: ThemeService;
+
+    @inject(ColorRegistry)
+    protected readonly colorRegistry: ColorRegistry;
+
+    @inject(ContributionProvider) @named(StylingParticipant)
+    protected readonly themingParticipants: ContributionProvider<StylingParticipant>;
+
+    onStart(): void {
+        this.applyStyling(this.themeService.getCurrentTheme());
+        this.themeService.onDidColorThemeChange(e => this.applyStyling(e.newTheme));
+    }
+
+    protected applyStyling(theme: Theme): void {
+        const rules: string[] = [];
+        const colorTheme: ColorTheme = {
+            type: theme.type,
+            label: theme.label,
+            getColor: color => this.colorRegistry.getCurrentColor(color)
+        };
+        const styleCollector: CssStyleCollector = {
+            addRule: rule => rules.push(rule)
+        };
+        for (const themingParticipant of this.themingParticipants.getContributions()) {
+            themingParticipant.registerThemeStyle(colorTheme, styleCollector);
+        }
+        const fullCss = rules.join('\n');
+        this.cssElement.innerText = fullCss;
+    }
+}

package/src/browser/theming.ts

@@ -19,31 +19,26 @@ import { Disposable } from '../common/disposable';
 import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 import { ApplicationProps } from '@theia/application-package/lib/application-props';
 import { Theme, ThemeChangeEvent } from '../common/theme';
+import { injectable, postConstruct } from 'inversify';
+import { Deferred } from '../common/promise-util';
 
-/**
- * @deprecated since 1.20.0. Import from `@theia/core/lib/common/theme` instead.
- */
-export * from '../common/theme';
-
-export const ThemeServiceSymbol = Symbol('ThemeService');
-
+@injectable()
 export class ThemeService {
 
     protected themes: { [id: string]: Theme } = {};
     protected activeTheme: Theme | undefined;
     protected readonly themeChange = new Emitter<ThemeChangeEvent>();
+    protected readonly deferredInitializer = new Deferred();
+    get initialized(): Promise<void> {
+        return this.deferredInitializer.promise;
+    }
 
     readonly onDidColorThemeChange: Event<ThemeChangeEvent> = this.themeChange.event;
 
-    static get(): ThemeService {
-        const global = window as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-        if (!global[ThemeServiceSymbol]) {
-            const themeService = new ThemeService();
-            themeService.register(...BuiltinThemeProvider.themes);
-            themeService.startupTheme();
-            global[ThemeServiceSymbol] = themeService;
-        }
-        return global[ThemeServiceSymbol];
+    @postConstruct()
+    protected init(): void {
+        this.register(...BuiltinThemeProvider.themes);
+        this.loadUserTheme();
     }
 
     register(...themes: Theme[]): Disposable {
@@ -88,12 +83,13 @@ export class ThemeService {
 
     startupTheme(): void {
         const theme = this.getCurrentTheme();
-        theme.activate();
+        theme.activate?.();
     }
 
     loadUserTheme(): void {
         const theme = this.getCurrentTheme();
         this.setCurrentTheme(theme.id);
+        this.deferredInitializer.resolve();
     }
 
     setCurrentTheme(themeId: string): void {
@@ -103,9 +99,9 @@ export class ThemeService {
             if (oldTheme.id === newTheme.id) {
                 return;
             }
-            oldTheme.deactivate();
+            oldTheme.deactivate?.();
         }
-        newTheme.activate();
+        newTheme.activate?.();
         this.activeTheme = newTheme;
         window.localStorage.setItem('theme', themeId);
         this.themeChange.fire({
@@ -131,52 +127,29 @@ export class ThemeService {
     reset(): void {
         this.setCurrentTheme(this.defaultTheme.id);
     }
-
 }
 
 export class BuiltinThemeProvider {
 
-    // Webpack converts these `require` in some Javascript object that wraps the `.css` files
-    static readonly darkCss = require('../../src/browser/style/variables-dark.useable.css');
-    static readonly lightCss = require('../../src/browser/style/variables-bright.useable.css');
-
     static readonly darkTheme: Theme = {
         id: 'dark',
         type: 'dark',
         label: 'Dark (Theia)',
-        editorTheme: 'dark-theia', // loaded in /packages/monaco/src/browser/textmate/monaco-theme-registry.ts
-        activate(): void {
-            BuiltinThemeProvider.darkCss.use();
-        },
-        deactivate(): void {
-            BuiltinThemeProvider.darkCss.unuse();
-        }
+        editorTheme: 'dark-theia' // loaded in /packages/monaco/src/browser/textmate/monaco-theme-registry.ts
     };
 
     static readonly lightTheme: Theme = {
         id: 'light',
         type: 'light',
         label: 'Light (Theia)',
-        editorTheme: 'light-theia', // loaded in /packages/monaco/src/browser/textmate/monaco-theme-registry.ts
-        activate(): void {
-            BuiltinThemeProvider.lightCss.use();
-        },
-        deactivate(): void {
-            BuiltinThemeProvider.lightCss.unuse();
-        }
+        editorTheme: 'light-theia' // loaded in /packages/monaco/src/browser/textmate/monaco-theme-registry.ts
     };
 
     static readonly hcTheme: Theme = {
         id: 'hc-theia',
         type: 'hc',
         label: 'High Contrast (Theia)',
-        editorTheme: 'hc-theia', // loaded in /packages/monaco/src/browser/textmate/monaco-theme-registry.ts
-        activate(): void {
-            BuiltinThemeProvider.darkCss.use();
-        },
-        deactivate(): void {
-            BuiltinThemeProvider.darkCss.unuse();
-        }
+        editorTheme: 'hc-theia' // loaded in /packages/monaco/src/browser/textmate/monaco-theme-registry.ts
     };
 
     static readonly themes = [

package/src/browser/tree/search-box.ts

@@ -18,6 +18,7 @@ import { SearchBoxDebounce, SearchBoxDebounceOptions } from '../tree/search-box-
 import { BaseWidget, Message } from '../widgets/widget';
 import { Emitter, Event } from '../../common/event';
 import { KeyCode, Key } from '../keyboard/keys';
+import { nls } from '../../common/nls';
 
 /**
  * Initializer properties for the search box widget.
@@ -253,7 +254,7 @@ export class SearchBox extends BaseWidget {
                 SearchBox.Styles.BUTTON,
                 ...SearchBox.Styles.FILTER,
             );
-            filter.title = 'Enable Filter on Type';
+            filter.title = nls.localizeByDefault('Enable Filter on Type');
             buttons.appendChild(filter);
             filter.onclick = this.fireFilterToggle.bind(this);
         }
@@ -268,7 +269,7 @@ export class SearchBox extends BaseWidget {
                 SearchBox.Styles.BUTTON,
                 SearchBox.Styles.BUTTON_PREVIOUS
             );
-            previous.title = 'Previous (Up)';
+            previous.title = nls.localize('theia/core/searchbox/previous', 'Previous (Up)');
             buttons.appendChild(previous);
             previous.onclick = () => this.firePrevious.bind(this)();
 
@@ -277,7 +278,7 @@ export class SearchBox extends BaseWidget {
                 SearchBox.Styles.BUTTON,
                 SearchBox.Styles.BUTTON_NEXT
             );
-            next.title = 'Next (Down)';
+            next.title = nls.localize('theia/core/searchbox/next', 'Next (Down)');
             buttons.appendChild(next);
             next.onclick = () => this.fireNext.bind(this)();
         }
@@ -288,7 +289,7 @@ export class SearchBox extends BaseWidget {
                 SearchBox.Styles.BUTTON,
                 SearchBox.Styles.BUTTON_CLOSE
             );
-            close.title = 'Close (Escape)';
+            close.title = nls.localize('theia/core/searchbox/close', 'Close (Escape)');
             buttons.appendChild(close);
             close.onclick = () => this.hide.bind(this)();
         }

package/src/browser/tree/test/tree-test-container.ts

@@ -26,6 +26,7 @@ import { FuzzySearch } from '../fuzzy-search';
 import { MockLogger } from '../../../common/test/mock-logger';
 import { ILogger, bindContributionProvider } from '../../../common';
 import { LabelProviderContribution, LabelProvider } from '../../label-provider';
+import { TreeFocusService, TreeFocusServiceImpl } from '../tree-focus-service';
 
 export function createTreeTestContainer(): Container {
     const container = new Container({ defaultScope: 'Singleton' });
@@ -41,6 +42,7 @@ export function createTreeTestContainer(): Container {
     container.bind(TreeSearch).toSelf();
     container.bind(FuzzySearch).toSelf();
     container.bind(MockLogger).toSelf();
+    container.bind(TreeFocusService).to(TreeFocusServiceImpl);
     container.bind(ILogger).to(MockLogger);
     bindContributionProvider(container, LabelProviderContribution);
     container.bind(LabelProvider).toSelf().inSingletonScope();