@theia/core 1.38.0-next.0 → 1.38.0-next.32

package/src/browser/style/tabs.css

@@ -22,8 +22,6 @@
 }
 
 .p-TabBar[data-orientation='horizontal'] {
-  overflow-x: hidden;
-  overflow-y: hidden;
   min-height: var(--theia-horizontal-toolbar-height);
 }
 
@@ -38,6 +36,7 @@
   line-height: var(--theia-private-horizontal-tab-height);
   padding: 0px 8px;
   align-items: center;
+  overflow: hidden;
 }
 
 .p-TabBar[data-orientation='vertical'] .p-TabBar-tab {
@@ -215,7 +214,19 @@
   -ms-user-select: none;
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
+.p-TabBar.theia-app-centers.dynamic-tabs .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon,
+.p-TabBar.theia-app-centers.dynamic-tabs .p-TabBar-tab.theia-mod-pinned > .p-TabBar-tabCloseIcon {
+  /* hide close icon for dynamic tabs strategy*/
+  display: none;
+}
+
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon,
+.p-TabBar.theia-app-centers .p-TabBar-tab:hover.p-mod-closable > .p-TabBar-tabCloseIcon,
+.p-TabBar.theia-app-centers .p-TabBar-tab:hover.theia-mod-pinned > .p-TabBar-tabCloseIcon {
+  display: inline-block;
+}
+
+.p-TabBar.theia-app-centers .p-TabBar-tab:hover.p-mod-closable > .p-TabBar-tabCloseIcon {
   border-radius: 5px;
   background-color: rgba(50%, 50%, 50%, 0.2);
 }
@@ -303,6 +314,15 @@
   bottom: calc((var(--theia-private-horizontal-tab-scrollbar-rail-height) - var(--theia-private-horizontal-tab-scrollbar-height)) / 2);
 }
 
+.p-TabBar[data-orientation='vertical'] .p-TabBar-content-container > .ps__rail-y {
+  width: var(--theia-private-horizontal-tab-scrollbar-rail-height);
+  z-index: 1000;
+}
+
+.p-TabBar[data-orientation='vertical'] .p-TabBar-content-container > .ps__rail-y  > .ps__thumb-y {
+  width: var(--theia-private-horizontal-tab-scrollbar-height) !important;
+  right: calc((var(--theia-private-horizontal-tab-scrollbar-rail-height) - var(--theia-private-horizontal-tab-scrollbar-height)) / 2);
+}
 
 /*-----------------------------------------------------------------------------
 | Dragged tabs
@@ -405,18 +425,36 @@
   flex-direction: column;
 }
 
-.theia-tabBar-tab-row {
+.p-TabBar[data-orientation='horizontal'] .theia-tabBar-tab-row {
   display: flex;
   flex-flow: row nowrap;
   min-width: 100%;
 }
 
-.p-TabBar-tab .theia-tab-icon-label {
+.p-TabBar[data-orientation='vertical'] .theia-tabBar-tab-row {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
+
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content {
+  flex-direction: row;
+}
+
+.p-TabBar[data-orientation='vertical'] .p-TabBar-content {
+  flex-direction: column;
+}
+
+.p-TabBar.theia-app-centers[data-orientation='horizontal'].dynamic-tabs .p-TabBar-tabLabel {
+  /* fade out text with dynamic tabs strategy */
+  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) 15px);
+  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) 15px);
   flex: 1;
 }
 
-.p-TabBar[data-orientation='horizontal'] .p-TabBar-tab.p-mod-closable:hover .theia-tab-icon-label,
-.p-TabBar[data-orientation='horizontal'] .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
+
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tab .theia-tab-icon-label {
+  flex: 1;
   overflow: hidden;
 }
 
@@ -435,3 +473,25 @@
   margin: 0px 0px;
   margin-top: 4px;
 }
+
+/*-----------------------------------------------------------------------------
+| Open tabs dropdown
+|----------------------------------------------------------------------------*/
+.theia-tabBar-open-tabs>.theia-select-component .theia-select-component-label {
+  display: none;
+}
+
+.theia-tabBar-open-tabs>.theia-select-component {
+  min-width: auto;
+  height: 100%;
+}
+
+.theia-tabBar-open-tabs {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.theia-tabBar-open-tabs.p-mod-hidden {
+  display: none
+}

package/src/browser/view-container.ts

@@ -76,6 +76,20 @@ export namespace BadgeWidget {
     }
 }
 
+/**
+ * A widget that may change it's internal structure dynamically. Current use is for
+ * updating the toolbar when a contributed view is contructed "lazily"
+ */
+export interface DynamicToolbarWidget {
+    onDidChangeToolbarItems: CommonEvent<void>;
+}
+
+export namespace DynamicToolbarWidget {
+    export function is(arg: unknown): arg is DynamicToolbarWidget {
+        return isObject(arg) && 'onDidChangeToolbarItems' in arg;
+    }
+}
+
 /**
  * A view container holds an arbitrary number of widgets inside a split panel.
  * Each widget is wrapped in a _part_ that displays the widget title and toolbar
@@ -970,6 +984,13 @@ export class ViewContainerPart extends BaseWidget {
             this.wrapped.onDidChangeBadgeTooltip(() => this.onDidChangeBadgeTooltipEmitter.fire(), undefined, this.toDispose);
         }
 
+        if (DynamicToolbarWidget.is(this.wrapped)) {
+            this.wrapped.onDidChangeToolbarItems(() => {
+                this.toolbar.updateTarget(this.wrapped);
+                this.viewContainer?.update();
+            });
+        }
+
         const { header, body, disposable } = this.createContent();
         this.header = header;
         this.body = body;

package/src/browser/widgets/select-component.tsx

@@ -34,11 +34,12 @@ export interface SelectOption {
 }
 
 export interface SelectComponentProps {
-    options: SelectOption[]
+    options: readonly SelectOption[]
     defaultValue?: string | number
     onChange?: (option: SelectOption, index: number) => void,
     onBlur?: () => void,
-    onFocus?: () => void
+    onFocus?: () => void,
+    alignment?: 'left' | 'right';
 }
 
 export interface SelectComponentState {
@@ -81,7 +82,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         this.dropdownElement = list;
     }
 
-    get options(): SelectOption[] {
+    get options(): readonly SelectOption[] {
         return this.props.options;
     }
 
@@ -105,6 +106,10 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         }
     }
 
+    protected get alignLeft(): boolean {
+        return this.props.alignment !== 'right';
+    }
+
     protected getOptimalWidth(): number {
         const textWidth = measureTextWidth(this.props.options.map(e => e.label || e.value || '' + (e.detail || '')));
         return Math.ceil(textWidth + 16);
@@ -168,7 +173,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         if (options[selected]?.separator) {
             selected = this.nextNotSeparator('forwards');
         }
-        const selectedItemLabel = options[selected].label ?? options[selected].value;
+        const selectedItemLabel = options[selected]?.label ?? options[selected]?.value;
         return <>
             <div
                 key="select-component"
@@ -279,6 +284,9 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         if (!this.state.dimensions) {
             return;
         }
+
+        const shellArea = document.getElementById('theia-app-shell')!.getBoundingClientRect();
+        const maxWidth = this.alignLeft ? shellArea.width - this.state.dimensions.left : this.state.dimensions.right;
         if (this.mountedListeners.size === 0) {
             // Only attach our listeners once we render our dropdown menu
             this.attachListeners();
@@ -286,11 +294,11 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             this.optimalWidth = this.getOptimalWidth();
             this.optimalHeight = this.getOptimalHeight(Math.max(this.state.dimensions.width, this.optimalWidth));
         }
-        const clientRect = document.getElementById('theia-app-shell')!.getBoundingClientRect();
-        const availableTop = this.state.dimensions.top - clientRect.top;
-        const availableBottom = clientRect.top + clientRect.height - this.state.dimensions.bottom;
+        const availableTop = this.state.dimensions.top - shellArea.top;
+        const availableBottom = shellArea.top + shellArea.height - this.state.dimensions.bottom;
         // prefer rendering to the bottom unless there is not enough space and more content can be shown to the top
         const invert = availableBottom < this.optimalHeight && (availableBottom - this.optimalHeight) < (availableTop - this.optimalHeight);
+
         const { options } = this.props;
         const { hover } = this.state;
         const description = options[hover].description;
@@ -313,14 +321,14 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
                 items.push(descriptionNode);
             }
         }
-        const calculatedWidth = Math.max(this.state.dimensions.width, this.optimalWidth);
-        const maxWidth = clientRect.width - this.state.dimensions.left;
+
         return <div key="dropdown" className="theia-select-component-dropdown" style={{
             top: invert ? 'none' : this.state.dimensions.bottom,
-            bottom: invert ? clientRect.top + clientRect.height - this.state.dimensions.top : 'none',
-            left: this.state.dimensions.left,
-            width: Math.min(calculatedWidth, maxWidth),
-            maxHeight: clientRect.height - (invert ? clientRect.height - this.state.dimensions.bottom : this.state.dimensions.top) - this.state.dimensions.height,
+            bottom: invert ? shellArea.top + shellArea.height - this.state.dimensions.top : 'none',
+            left: this.alignLeft ? this.state.dimensions.left : 'none',
+            right: this.alignLeft ? 'none' : shellArea.width - this.state.dimensions.right,
+            width: Math.min(Math.max(this.state.dimensions.width, this.optimalWidth), maxWidth),
+            maxHeight: shellArea.height - (invert ? shellArea.height - this.state.dimensions.bottom : this.state.dimensions.top) - this.state.dimensions.height,
             position: 'absolute'
         }} ref={this.dropdownRef}>
             {items}

package/src/common/command.ts

@@ -122,6 +122,7 @@ export interface CommandHandler {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     isEnabled?(...args: any[]): boolean;
+    onDidChangeEnabled?: Event<void>;
     /**
      * Test whether menu items for this handler should be visible.
      */

package/src/common/index.ts

@@ -46,4 +46,5 @@ export * from './strings';
 export * from './types';
 export { default as URI } from './uri';
 export * from './view-column';
+export * from './telemetry';
 

package/src/common/objects.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { isObject } from './types';
+import { isObject, isUndefined } from './types';
 
 export function deepClone<T>(obj: T): T {
     if (!isObject(obj)) {
@@ -70,3 +70,50 @@ export function notEmpty<T>(arg: T | undefined | null): arg is T {
 export function isEmpty(arg: Object): boolean {
     return Object.keys(arg).length === 0 && arg.constructor === Object;
 }
+
+// copied and modified from https://github.com/microsoft/vscode/blob/1.76.0/src/vs/base/common/objects.ts#L45-L83
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cloneAndChange(obj: any, changer: (orig: any) => any, seen: Set<any>): any {
+    // impossible to clone an undefined or null object
+    // eslint-disable-next-line no-null/no-null
+    if (isUndefined(obj) || obj === null) {
+        return obj;
+    }
+
+    const changed = changer(obj);
+    if (!isUndefined(changed)) {
+        return changed;
+    }
+
+    if (Array.isArray(obj)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const r1: any[] = [];
+        for (const e of obj) {
+            r1.push(cloneAndChange(e, changer, seen));
+        }
+        return r1;
+    }
+
+    if (isObject(obj)) {
+        if (seen.has(obj)) {
+            throw new Error('Cannot clone recursive data-structure');
+        }
+        seen.add(obj);
+        const r2 = {};
+        for (const i2 in obj) {
+            if (_hasOwnProperty.call(obj, i2)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (r2 as any)[i2] = cloneAndChange(obj[i2], changer, seen);
+            }
+        }
+        seen.delete(obj);
+        return r2;
+    }
+
+    return obj;
+}

package/src/common/telemetry.ts

@@ -0,0 +1,45 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics 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
+// *****************************************************************************
+
+export class TelemetryTrustedValue<T> {
+    readonly value: T;
+
+    constructor(value: T) {
+        this.value = value;
+    }
+}
+
+export interface TelemetryLogger {
+    readonly sender: TelemetrySender;
+    readonly options: TelemetryLoggerOptions | undefined;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    logUsage(eventName: string, data?: Record<string, any | TelemetryTrustedValue<any>>): void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    logError(eventNameOrException: string | Error, data?: Record<string, any | TelemetryTrustedValue<any>>): void;
+
+    dispose(): void;
+}
+
+interface TelemetrySender {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sendEventData(eventName: string, data?: Record<string, any>): void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sendErrorData(error: Error, data?: Record<string, any>): void;
+    flush?(): void | Thenable<void>;
+}
+
+interface TelemetryLoggerOptions {
+}

package/src/electron-browser/menu/electron-main-menu-factory.ts

@@ -35,6 +35,12 @@ export interface ElectronMenuOptions {
      * Defaults to `true`.
      */
     readonly showDisabled?: boolean;
+
+    /**
+     * Controls whether to render disabled items as disabled
+     * Defaults to `true`
+     */
+    readonly honorDisabled?: boolean;
     /**
      * A DOM context to use when evaluating any `when` clauses
      * of menu items registered for this item.
@@ -108,7 +114,7 @@ export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
         const maxWidget = document.getElementsByClassName(MAXIMIZED_CLASS);
         if (preference === 'visible' || (preference === 'classic' && maxWidget.length === 0)) {
             const menuModel = this.menuProvider.getMenu(MAIN_MENU_BAR);
-            this._menu = this.fillMenuTemplate([], menuModel, [], { rootMenuPath: MAIN_MENU_BAR });
+            this._menu = this.fillMenuTemplate([], menuModel, [], { honorDisabled: false, rootMenuPath: MAIN_MENU_BAR });
             if (isOSX) {
                 this._menu.unshift(this.createOSXMenu());
             }
@@ -121,7 +127,7 @@ export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
 
     createElectronContextMenu(menuPath: MenuPath, args?: any[], context?: HTMLElement, contextKeyService?: ContextMatcher): MenuDto[] {
         const menuModel = this.menuProvider.getMenu(menuPath);
-        return this.fillMenuTemplate([], menuModel, args, { showDisabled: false, context, rootMenuPath: menuPath, contextKeyService });
+        return this.fillMenuTemplate([], menuModel, args, { showDisabled: true, context, rootMenuPath: menuPath, contextKeyService });
     }
 
     protected fillMenuTemplate(parentItems: MenuDto[],
@@ -130,6 +136,7 @@ export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
         options: ElectronMenuOptions
     ): MenuDto[] {
         const showDisabled = options?.showDisabled !== false;
+        const honorDisabled = options?.honorDisabled !== false;
 
         if (CompoundMenuNode.is(menu) && menu.children.length && this.undefinedOrMatch(options.contextKeyService ?? this.contextKeyService, menu.when, options.context)) {
             const role = CompoundMenuNode.getRole(menu);
@@ -181,7 +188,7 @@ export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
                 label: node.label,
                 type: this.commandRegistry.getToggledHandler(commandId, ...args) ? 'checkbox' : 'normal',
                 checked: this.commandRegistry.isToggled(commandId, ...args),
-                enabled: true, // https://github.com/eclipse-theia/theia/issues/446
+                enabled: !honorDisabled || this.commandRegistry.isEnabled(commandId, ...args), // see https://github.com/eclipse-theia/theia/issues/446
                 visible: true,
                 accelerator,
                 execute: () => this.execute(commandId, args, options.rootMenuPath)