@theia/core 1.25.0-next.7 → 1.25.0

package/src/browser/common-frontend-contribution.ts

@@ -1143,17 +1143,19 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
     protected async configureDisplayLanguage(): Promise<void> {
         const availableLanguages = await this.localizationProvider.getAvailableLanguages();
         const items: QuickPickItem[] = [];
-        for (const additionalLanguage of ['en', ...availableLanguages]) {
-            items.push({
-                label: additionalLanguage,
-                execute: async () => {
-                    if (additionalLanguage !== nls.locale && await this.confirmRestart()) {
-                        this.windowService.setSafeToShutDown();
-                        window.localStorage.setItem(nls.localeId, additionalLanguage);
-                        this.windowService.reload();
+        for (const languageId of ['en', ...availableLanguages.map(e => e.languageId)]) {
+            if (typeof languageId === 'string') {
+                items.push({
+                    label: languageId,
+                    execute: async () => {
+                        if (languageId !== nls.locale && await this.confirmRestart()) {
+                            this.windowService.setSafeToShutDown();
+                            window.localStorage.setItem(nls.localeId, languageId);
+                            this.windowService.reload();
+                        }
                     }
-                }
-            });
+                });
+            }
         }
         this.quickInputService?.showQuickPick(items,
             {
@@ -1589,6 +1591,34 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: Color.rgba(255, 255, 255, 0.12)
                 }, description: 'Status bar item background color when hovering. The status bar is shown in the bottom of the window.'
             },
+            {
+                id: 'statusBarItem.errorBackground', defaults: {
+                    dark: Color.darken('errorBackground', 0.4),
+                    light: Color.darken('errorBackground', 0.4),
+                    hc: undefined,
+                }, description: 'Status bar error items background color. Error items stand out from other status bar entries to indicate error conditions. The status bar is shown in the bottom of the window.'
+            },
+            {
+                id: 'statusBarItem.errorForeground', defaults: {
+                    dark: Color.white,
+                    light: Color.white,
+                    hc: Color.white
+                }, description: 'Status bar error items foreground color. Error items stand out from other status bar entries to indicate error conditions. The status bar is shown in the bottom of the window.'
+            },
+            {
+                id: 'statusBarItem.warningBackground', defaults: {
+                    dark: Color.darken('warningBackground', 0.4),
+                    light:  Color.darken('warningBackground', 0.4),
+                    hc: undefined
+                }, description: 'Status bar warning items background color. Warning items stand out from other status bar entries to indicate warning conditions. The status bar is shown in the bottom of the window.'
+            },
+            {
+                id: 'statusBarItem.warningForeground', defaults: {
+                    dark: Color.white,
+                    light: Color.white,
+                    hc: Color.white
+                }, description: 'Status bar warning items foreground color. Warning items stand out from other status bar entries to indicate warning conditions. The status bar is shown in the bottom of the window.'
+            },
 
             // Quickinput colors should be aligned with https://code.visualstudio.com/api/references/theme-color#quick-picker
             // if not yet contributed by Monaco, check runtime css variables to learn.
@@ -1765,6 +1795,34 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             { id: 'welcomePage.buttonHoverBackground', defaults: { dark: Color.rgba(200, 235, 255, .072), light: Color.rgba(0, 0, 0, .10) }, description: 'Hover background color for the buttons on the Welcome page.' },
             { id: 'walkThrough.embeddedEditorBackground', defaults: { dark: Color.rgba(0, 0, 0, .4), light: '#f4f4f4' }, description: 'Background color for the embedded editors on the Interactive Playground.' },
 
+            // Dropdown colors should be aligned with https://code.visualstudio.com/api/references/theme-color#dropdown-control
+
+            {
+                id: 'dropdown.background', defaults: {
+                    light: Color.white,
+                    dark: '#3C3C3C',
+                    hc: Color.black
+                }, description: 'Dropdown background.'
+            },
+            {
+                id: 'dropdown.listBackground', defaults: {
+                    hc: Color.black
+                }, description: 'Dropdown list background.'
+            },
+            {
+                id: 'dropdown.foreground', defaults: {
+                    dark: '#F0F0F0',
+                    hc: Color.white
+                }, description: 'Dropdown foreground.'
+            },
+            {
+                id: 'dropdown.border', defaults: {
+                    light: '#CECECE',
+                    dark: 'dropdown.background',
+                    hc: '#6FC3DF'
+                }, description: 'Dropdown border.'
+            },
+
             // Settings Editor colors should be aligned with https://code.visualstudio.com/api/references/theme-color#settings-editor-colors
             {
                 id: 'settings.headerForeground', defaults: {

package/src/browser/preferences/preference-validation-service.spec.ts

@@ -20,6 +20,7 @@ import { JsonType, PreferenceItem, PreferenceSchemaProvider } from './preference
 import { PreferenceLanguageOverrideService } from './preference-language-override-service';
 import * as assert from 'assert';
 import { JSONValue } from '@phosphor/coreutils';
+import { IJSONSchema } from 'src/common/json-schema';
 
 /* eslint-disable no-unused-expressions,no-null/no-null */
 
@@ -194,6 +195,39 @@ describe('Preference Validation Service', () => {
             assert.deepStrictEqual(actual, expected);
         });
     });
+    describe('should validate tuples', () => {
+        const schema: PreferenceItem & { items: IJSONSchema[] } = {
+            'type': 'array',
+            'items': [{
+                'type': 'number',
+            },
+            {
+                'type': 'string',
+            }],
+        };
+        it('good input -> returns same object', () => {
+            const expected = [1, 'two'];
+            assert.strictEqual(validateBySchema(expected, schema), expected);
+        });
+        it('bad input -> should use the default if supplied present and valid', () => {
+            const defaultValue = [8, 'three'];
+            const withDefault = { ...schema, default: defaultValue };
+            assert.strictEqual(validateBySchema('not even an array!', withDefault), defaultValue);
+            assert.strictEqual(validateBySchema(['first fails', 'second ok'], withDefault), defaultValue);
+            assert.strictEqual(validateBySchema([], withDefault), defaultValue);
+            assert.strictEqual(validateBySchema([2, ['second fails']], withDefault), defaultValue);
+        });
+        it('bad input -> in the absence of a default, it should return any good values or the default for each subschema', () => {
+            const withSubDefault: PreferenceItem = { ...schema, items: [{ type: 'string', default: 'cool' }, ...schema.items] };
+            assert.deepStrictEqual(validateBySchema('not an array', withSubDefault), ['cool', 0, '']);
+            assert.deepStrictEqual(validateBySchema([2, 8, null], withSubDefault), ['cool', 8, '']);
+        });
+        it("bad input -> uses the default, but fixes fields that don't match schema", () => {
+            const defaultValue = [8, 8];
+            const withDefault = { ...schema, default: defaultValue };
+            assert.deepStrictEqual(validateBySchema('something invalid', withDefault), [8, '']);
+        });
+    });
     describe('should validate type arrays', () => {
         const type: JsonType[] = ['boolean', 'string', 'number'];
         it('good input -> returns same value', () => {
@@ -232,6 +266,31 @@ describe('Preference Validation Service', () => {
             assert.strictEqual(validateBySchema({}, { ...schema, default: undefined }), 1);
         });
     });
+    describe('should validate oneOfs', () => {
+        // Between 4 and 6 should be rejected
+        const schema: PreferenceItem = { oneOf: [{ type: 'number', minimum: 1, maximum: 6 }, { type: 'number', minimum: 4, maximum: 10 }], default: 8 };
+        it('good input -> returns same value', () => {
+            assert.strictEqual(validateBySchema(2, schema), 2);
+            assert.strictEqual(validateBySchema(7, schema), 7);
+        });
+        it('bad input -> returns default if present and valid', () => {
+            assert.strictEqual(validateBySchema(5, schema), 8);
+        });
+        it('bad input -> returns value if default absent or invalid.', () => {
+            assert.strictEqual(validateBySchema(5, { ...schema, default: undefined }), 5);
+        });
+    });
+    describe('should validate consts', () => {
+        const schema: PreferenceItem = { const: { 'the only': 'possible value' }, default: 'ignore-the-default' };
+        const goodValue = { 'the only': 'possible value' };
+        it('good input -> returns same value', () => {
+            assert.strictEqual(validateBySchema(goodValue, schema), goodValue);
+        });
+        it('bad input -> returns the const value for any other value', () => {
+            assert.deepStrictEqual(validateBySchema('literally anything else', schema), goodValue);
+            assert.deepStrictEqual(validateBySchema('ignore-the-default', schema), goodValue);
+        });
+    });
     describe('should maintain triple equality for valid object types', () => {
         const arraySchema: PreferenceItem = { type: 'array', items: { type: 'string' } };
         it('maintains triple equality for arrays', () => {

package/src/browser/preferences/preference-validation-service.ts

@@ -37,6 +37,8 @@ export interface PreferenceValidationResult<T extends JSONValue> {
     messages: string[];
 }
 
+type ValidatablePreferenceTuple = ValidatablePreference & ({ items: ValidatablePreference[] } | { prefixItems: ValidatablePreference[] });
+
 @injectable()
 export class PreferenceValidationService {
     @inject(PreferenceSchemaProvider) protected readonly schemaProvider: PreferenceSchemaProvider;
@@ -75,12 +77,18 @@ export class PreferenceValidationService {
                 console.warn('Request to validate preference with no schema registered:', key);
                 return value;
             }
+            if (schema.const !== undefined) {
+                return this.validateConst(key, value, schema as ValidatablePreference & { const: JSONValue });
+            }
             if (Array.isArray(schema.enum)) {
                 return this.validateEnum(key, value, schema as ValidatablePreference & { enum: JSONValue[] });
             }
             if (Array.isArray(schema.anyOf)) {
                 return this.validateAnyOf(key, value, schema as ValidatablePreference & { anyOf: ValidatablePreference[] });
             }
+            if (Array.isArray(schema.oneOf)) {
+                return this.validateOneOf(key, value, schema as ValidatablePreference & { oneOf: ValidatablePreference[] });
+            }
             if (schema.type === undefined) {
                 console.warn('Request to validate preference with no type information:', key);
                 return value;
@@ -149,6 +157,28 @@ export class PreferenceValidationService {
         return candidate;
     }
 
+    protected validateOneOf(key: string, value: JSONValue, schema: ValidatablePreference & { oneOf: ValidatablePreference[] }): JSONValue {
+        let passed = false;
+        for (const subSchema of schema.oneOf) {
+            const validValue = this.validateBySchema(key, value, subSchema);
+            if (!passed && validValue === value) {
+                passed = true;
+            } else if (passed && validValue === value) {
+                passed = false;
+                break;
+            }
+        }
+        if (passed) {
+            return value;
+        }
+        if (schema.default !== undefined || schema.defaultValue !== undefined) {
+            const configuredDefault = this.getDefaultFromSchema(schema);
+            return this.validateOneOf(key, configuredDefault, { ...schema, default: undefined, defaultValue: undefined });
+        }
+        console.log(`While validating ${key}, failed to find a valid value or default value. Using configured value ${value}.`);
+        return value;
+    }
+
     protected mapValidators(key: string, value: JSONValue, validators: Iterable<(value: JSONValue) => JSONValue>): JSONValue {
         const candidates = [];
         for (const validator of validators) {
@@ -160,26 +190,73 @@ export class PreferenceValidationService {
         }
         return candidates[0];
     }
-
     protected validateArray(key: string, value: JSONValue, schema: ValidatablePreference): JSONValue[] {
         const candidate = Array.isArray(value) ? value : this.getDefaultFromSchema(schema);
         if (!Array.isArray(candidate)) {
             return [];
         }
-        if (!schema.items || Array.isArray(schema.items)) { // Arrays were allowed in some draft of JSON schema, but never officially supported.
+        if (!schema.items && !schema.prefixItems) {
             console.warn('Requested validation of array without item specification:', key);
             return candidate;
         }
-        const valid = [];
-        for (const item of candidate) {
-            const validated = this.validateBySchema(key, item, schema.items);
-            if (validated === item) {
-                valid.push(item);
-            }
+        if (Array.isArray(schema.items) || Array.isArray(schema.prefixItems)) {
+            return this.validateTuple(key, value, schema as ValidatablePreferenceTuple);
         }
+        const itemSchema = schema.items!;
+        const valid = candidate.filter(item => this.validateBySchema(key, item, itemSchema) === item);
         return valid.length === candidate.length ? candidate : valid;
     }
 
+    protected validateTuple(key: string, value: JSONValue, schema: ValidatablePreferenceTuple): JSONValue[] {
+        const defaultValue = this.getDefaultFromSchema(schema);
+        const maybeCandidate = Array.isArray(value) ? value : defaultValue;
+        // If we find that the provided value is not valid, we immediately bail and try the default value instead.
+        const shouldTryDefault = Array.isArray(schema.defaultValue ?? schema.default) && !PreferenceProvider.deepEqual(defaultValue, maybeCandidate);
+        const tryDefault = () => this.validateTuple(key, defaultValue, schema);
+        const candidate = Array.isArray(maybeCandidate) ? maybeCandidate : [];
+        // Only `prefixItems` is officially part of the JSON Schema spec, but `items` as array was part of a draft and was used by VSCode.
+        const tuple = (schema.prefixItems ?? schema.items) as Required<ValidatablePreference>['prefixItems'];
+        const lengthIsWrong = candidate.length < tuple.length || (candidate.length > tuple.length && !schema.additionalItems);
+        if (lengthIsWrong && shouldTryDefault) { return tryDefault(); }
+        let valid = true;
+        const validItems: JSONValue[] = [];
+        for (const [index, subschema] of tuple.entries()) {
+            const targetItem = candidate[index];
+            const validatedItem = targetItem === undefined ? this.getDefaultFromSchema(subschema) : this.validateBySchema(key, targetItem, subschema);
+            valid &&= validatedItem === targetItem;
+            if (!valid && shouldTryDefault) { return tryDefault(); }
+            validItems.push(validatedItem);
+        };
+        if (candidate.length > tuple.length) {
+            if (!schema.additionalItems) {
+                return validItems;
+            } else if (schema.additionalItems === true && !valid) {
+                validItems.push(...candidate.slice(tuple.length));
+                return validItems;
+            } else if (schema.additionalItems !== true) {
+                const applicableSchema = schema.additionalItems;
+                for (let i = tuple.length; i < candidate.length; i++) {
+                    const targetItem = candidate[i];
+                    const validatedItem = this.validateBySchema(key, targetItem, applicableSchema);
+                    if (validatedItem === targetItem) {
+                        validItems.push(targetItem);
+                    } else {
+                        valid = false;
+                        if (shouldTryDefault) { return tryDefault(); }
+                    }
+                }
+            }
+        }
+        return valid ? candidate : validItems;
+    }
+
+    protected validateConst(key: string, value: JSONValue, schema: ValidatablePreference & { const: JSONValue }): JSONValue {
+        if (PreferenceProvider.deepEqual(value, schema.const)) {
+            return value;
+        }
+        return schema.const;
+    }
+
     protected validateEnum(key: string, value: JSONValue, schema: ValidatablePreference & { enum: JSONValue[] }): JSONValue {
         const options = schema.enum;
         if (options.some(option => PreferenceProvider.deepEqual(option, value))) {

package/src/browser/{nls-loader.ts → preloader.ts}

@@ -1,5 +1,5 @@
 // *****************************************************************************
-// Copyright (C) 2021 TypeFox and others.
+// 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
@@ -16,9 +16,15 @@
 
 import { nls } from '../common/nls';
 import { Endpoint } from './endpoint';
+import { OS } from '../common/os';
 import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 
-export async function loadTranslations(): Promise<void> {
+function fetchFrom(path: string): Promise<Response> {
+    const endpoint = new Endpoint({ path }).getRestUrl().toString();
+    return fetch(endpoint);
+}
+
+async function loadTranslations(): Promise<void> {
     const defaultLocale = FrontendApplicationConfigProvider.get().defaultLocale;
     if (defaultLocale && !nls.locale) {
         Object.assign(nls, {
@@ -26,8 +32,24 @@ export async function loadTranslations(): Promise<void> {
         });
     }
     if (nls.locale) {
-        const endpoint = new Endpoint({ path: '/i18n/' + nls.locale }).getRestUrl().toString();
-        const response = await fetch(endpoint);
+        const response = await fetchFrom(`/i18n/${nls.locale}`);
         nls.localization = await response.json();
     }
 }
+
+async function loadBackendOS(): Promise<void> {
+    const response = await fetchFrom('/os');
+    const osType = await response.text() as OS.Type;
+    const isWindows = osType === 'Windows';
+    const isOSX = osType === 'OSX';
+    OS.backend.isOSX = isOSX;
+    OS.backend.isWindows = isWindows;
+    OS.backend.type = () => osType;
+}
+
+export async function preload(): Promise<void> {
+    await Promise.allSettled([
+        loadTranslations(),
+        loadBackendOS()
+    ]);
+}

package/src/browser/quick-input/quick-pick-service-impl.ts

@@ -46,7 +46,7 @@ export class QuickPickServiceImpl implements QuickPickService {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private items: Array<any> = [];
 
-    async show<T extends QuickPickItem>(items: Array<T | QuickPickSeparator>, options?: QuickPickOptions<T>): Promise<T> {
+    async show<T extends QuickPickItem>(items: Array<T | QuickPickSeparator>, options?: QuickPickOptions<T>): Promise<T | undefined> {
         this.items = items;
         const opts = Object.assign({}, options, {
             onDidAccept: () => this.onDidAcceptEmitter.fire(),
@@ -56,7 +56,7 @@ export class QuickPickServiceImpl implements QuickPickService {
             onDidHide: () => this.onDidHideEmitter.fire(),
             onDidTriggerButton: (btn: QuickInputButtonHandle) => this.onDidTriggerButtonEmitter.fire(btn),
         });
-        return this.quickInputService?.showQuickPick(this.items, opts);
+        return this.quickInputService?.showQuickPick<T>(this.items, opts);
     }
 
     hide(): void {

package/src/browser/resource-context-key.ts

@@ -59,8 +59,8 @@ export class ResourceContextKey {
         this.resourceFileName.set(resourceUri && resourceUri.path.base);
         this.resourceExtname.set(resourceUri && resourceUri.path.ext);
         this.resourceLangId.set(resourceUri && this.getLanguageId(resourceUri));
-        this.resourceDirName.set(resourceUri && Uri.parse(resourceUri.path.dir.toString()).fsPath);
-        this.resourcePath.set(resourceUri && resourceUri['codeUri'].fsPath);
+        this.resourceDirName.set(resourceUri && resourceUri.path.dir.fsPath());
+        this.resourcePath.set(resourceUri && resourceUri.path.fsPath());
     }
 
     protected getLanguageId(uri: URI | undefined): string | undefined {

package/src/browser/saveable.ts

@@ -37,7 +37,7 @@ export interface Saveable {
     /**
      * Creates a snapshot of the dirty state.
      */
-    createSnapshot?(): object;
+    createSnapshot?(): Saveable.Snapshot;
     /**
      * Applies the given snapshot to the dirty state.
      */
@@ -56,6 +56,8 @@ export namespace Saveable {
          */
         soft?: boolean
     }
+
+    export type Snapshot = { value: string } | { read(): string | null };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     export function isSource(arg: any): arg is SaveableSource {
         return !!arg && ('saveable' in arg) && is(arg.saveable);

package/src/browser/shell/application-shell.ts

@@ -1418,6 +1418,7 @@ export class ApplicationShell extends Widget {
             this.statusBar.removeElement(BOTTOM_PANEL_TOGGLE_ID);
         } else {
             const element: StatusBarEntry = {
+                name: 'Toggle Bottom Panel',
                 text: '$(codicon-window)',
                 alignment: StatusBarAlignment.RIGHT,
                 tooltip: 'Toggle Bottom Panel',

package/src/browser/status-bar/status-bar.tsx

@@ -38,7 +38,9 @@ export interface StatusBarEntry {
      */
     text: string;
     alignment: StatusBarAlignment;
+    name?: string;
     color?: string;
+    backgroundColor?: string;
     className?: string;
     tooltip?: string;
     command?: string;
@@ -195,7 +197,8 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         }
 
         attrs.style = {
-            color: entry.color || this.color
+            color: entry.color || this.color,
+            backgroundColor: entry.backgroundColor
         };
 
         return attrs;

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

@@ -0,0 +1,96 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+.theia-select-component {
+    background-color: var(--theia-dropdown-background);
+    outline: var(--theia-dropdown-border) solid 1px;
+    outline-offset: -1px;
+    min-height: 23px;
+    min-width: 90px;
+    padding: 0px 8px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.theia-select-component .theia-select-component-label {
+    width: 100%;
+    color: var(--theia-dropdown-foreground);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.theia-select-component:focus {
+    outline-color: var(--theia-focusBorder);
+}
+
+.theia-select-component-dropdown {
+    font-family: var(--theia-ui-font-family);
+    font-size: var(--theia-ui-font-size1);
+    color: var(--theia-foreground);
+    background-color: var(--theia-settings-dropdownBackground);
+    outline: var(--theia-focusBorder) solid 1px;
+    outline-offset: -1px;
+    user-select: none;
+}
+
+.theia-select-component-dropdown .theia-select-component-option {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    padding: 2px 5px;
+}
+
+.theia-select-component-dropdown .theia-select-component-description {
+    padding: 6px 5px;
+}
+
+.theia-select-component-dropdown .theia-select-component-description:first-child {
+    border-bottom: 1px solid var(--theia-editorWidget-border);
+    margin-bottom: 2px;
+}
+
+.theia-select-component-dropdown .theia-select-component-description:last-child {
+    border-top: 1px solid var(--theia-editorWidget-border);
+    margin-top: 2px;
+}
+
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-value {
+    width: 100%;
+}
+
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-detail {
+    padding-left: 4px;
+}
+
+.theia-select-component-dropdown .theia-select-component-option:not(.selected) .theia-select-component-option-detail {
+    color: var(--theia-textLink-foreground);
+}
+
+.theia-select-component-dropdown .theia-select-component-option.selected {
+    color: var(--theia-list-activeSelectionForeground);
+    background: var(--theia-list-activeSelectionBackground);
+    outline: var(--theia-focusBorder) solid 1px;
+    outline-offset: -1px;
+}
+
+.theia-select-component-dropdown .theia-select-component-separator {
+    width: 84px;
+    height: 1px;
+    margin: 3px 3px;
+    background: var(--theia-foreground);
+}

package/src/browser/style/tree.css

@@ -116,12 +116,15 @@
 .theia-TreeNode.theia-mod-not-selectable {
     color: var(--theia-descriptionForeground);
 }
+
 .theia-TreeNode.theia-mod-not-selectable:hover {
     background: none;
     cursor: default;
 }
 
 .theia-TreeNodeSegment {
+    display: flex;
+    align-items: center;
     flex-grow: 0;
     user-select: none;
     white-space: nowrap;
@@ -137,6 +140,7 @@
 .theia-TreeNodeTail {
     min-width: 1rem;
     text-align: center;
+    justify-content: center;
 }
 
 .theia-TreeNodeSegment mark {
@@ -159,10 +163,12 @@
     height: var(--theia-content-line-height);
     border-right: var(--theia-border-width) solid transparent;
 }
+
 .theia-tree-node-indent.always,
 .theia-TreeContainer:hover .theia-tree-node-indent.hover {
     border-color: var(--theia-tree-inactiveIndentGuidesStroke);
 }
+
 .theia-tree-node-indent.active {
     border-color: var(--theia-tree-indentGuidesStroke);
 }

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

@@ -75,11 +75,11 @@
 }
 
 .p-Widget > .theia-view-container-part-header {
-    border-top: 1px solid var(--theia-sideBarSectionHeader-border);
+    box-shadow: 0 1px 0 var(--theia-sideBarSectionHeader-border) inset;
 }
 
 .p-Widget.p-first-visible > .theia-view-container-part-header {
-    border-top: none;
+    box-shadow: none;
 }
 
 .theia-view-container-part-header .theia-ExpansionToggle {

package/src/browser/tree/tree-widget.tsx

@@ -806,19 +806,31 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.renderTailDecorationsForNode(node, props, tailDecorations);
     }
 
-    protected renderTailDecorationsForNode(node: TreeNode, props: NodeProps, tailDecorations:
-        (TreeDecoration.TailDecoration | TreeDecoration.TailDecorationIcon | TreeDecoration.TailDecorationIconClass)[]): React.ReactNode {
+    protected renderTailDecorationsForNode(node: TreeNode, props: NodeProps, tailDecorations: TreeDecoration.TailDecoration.AnyPartial[]): React.ReactNode {
+        let dotDecoration: TreeDecoration.TailDecoration.AnyPartial | undefined;
+        const otherDecorations: TreeDecoration.TailDecoration.AnyPartial[] = [];
+        tailDecorations.reverse().forEach(decoration => {
+            if (TreeDecoration.TailDecoration.isDotDecoration(decoration)) {
+                dotDecoration ||= decoration;
+            } else if (decoration.data || decoration.icon || decoration.iconClass) {
+                otherDecorations.push(decoration);
+            }
+        });
+        const decorationsToRender = dotDecoration ? [dotDecoration, ...otherDecorations] : otherDecorations;
         return <React.Fragment>
-            {tailDecorations.reverse().map((decoration, index) => {
-                const { tooltip } = decoration;
-                const { data, fontData } = decoration as TreeDecoration.TailDecoration;
-                const color = (decoration as TreeDecoration.TailDecorationIcon).color;
+            {decorationsToRender.map((decoration, index) => {
+                const { tooltip, data, fontData, color, icon, iconClass } = decoration;
+                const iconToRender = icon ?? iconClass;
                 const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS].join(' ');
                 const style = fontData ? this.applyFontStyles({}, fontData) : color ? { color } : undefined;
-                const icon = (decoration as TreeDecoration.TailDecorationIcon).icon || (decoration as TreeDecoration.TailDecorationIconClass).iconClass;
-                const content = data ? data : icon ? <span key={node.id + 'icon' + index} className={this.getIconClass(icon)}></span> : '';
+                const content = data ? data : iconToRender
+                    ? <span
+                        key={node.id + 'icon' + index}
+                        className={this.getIconClass(iconToRender, iconToRender === 'circle' ? [TreeDecoration.Styles.DECORATOR_SIZE_CLASS] : [])}
+                    ></span>
+                    : '';
                 return <div key={node.id + className + index} className={className} style={style} title={tooltip}>
-                    {content}{index !== tailDecorations.length - 1 ? ',' : ''}
+                    {content}{index !== decorationsToRender.length - 1 ? ',' : ''}
                 </div>;
             })}
         </React.Fragment>;

package/src/browser/widget-decoration.ts

@@ -97,6 +97,20 @@ export namespace WidgetDecoration {
          */
         readonly fontData?: FontData;
     }
+
+    export namespace TailDecoration {
+        /**
+         * Combines all fields of all `TailDecoration` variants
+         */
+        export type AnyPartial = Partial<TailDecoration & TailDecorationIcon & TailDecorationIconClass>;
+        /**
+         * Represents any permissible concrete `TailDecoration` variation.
+         */
+        export type AnyConcrete = TailDecoration | TailDecorationIcon | TailDecorationIconClass;
+        export function isDotDecoration(decoration: AnyPartial): decoration is TailDecorationIcon {
+            return decoration.icon === 'circle';
+        }
+    }
     export interface TailDecorationIcon extends BaseTailDecoration {
         /**
          * This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`.