@theia/core 1.64.0-next.0 → 1.64.0-next.28

package/src/browser/style/index.css

@@ -123,8 +123,10 @@ blockquote {
     font-family: var(--theia-ui-font-family);
     font-size: var(--theia-ui-font-size1);
     line-height: var(--theia-content-line-height);
-    padding-left: 5px;
+    padding: 3px 0 3px 8px;
     border-radius: 2px;
+    min-height: 28px;
+    box-sizing: border-box;
 }
 
 .theia-input[type="text"] {
@@ -248,7 +250,7 @@ blockquote {
 
 .action-label {
     padding: 2px;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
 }
 
@@ -262,7 +264,7 @@ blockquote {
     min-width: 65px;
     outline: none;
     cursor: pointer;
-    padding: 4px 9px;
+    padding: 6px 9px;
     margin-left: calc(var(--theia-ui-padding) * 2);
     border-radius: 2px;
 }

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

@@ -15,6 +15,9 @@
  ********************************************************************************/
 
 .theia-progress-bar-container {
+  position: absolute;
+  top: -2px;
+  left: 0;
   width: 100%;
   height: 2px;
 }

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

@@ -43,10 +43,6 @@
   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);
@@ -57,6 +53,7 @@
   user-select: none;
   overflow: auto;
   border-radius: 2px;
+  margin-top: 2px;
 }
 
 .theia-select-component-dropdown .theia-select-component-option {

package/src/browser/style/sidepanel.css

@@ -35,7 +35,6 @@
 .lm-TabBar.theia-app-sides {
   display: block;
   color: var(--theia-activityBar-inactiveForeground);
-  background: var(--theia-activityBar-background);
   font-size: var(--theia-ui-font-size1);
   min-width: var(--theia-private-sidebar-tab-width);
   max-width: var(--theia-private-sidebar-tab-width);
@@ -52,7 +51,6 @@
 
 .lm-TabBar.theia-app-sides .lm-TabBar-tab {
   position: relative;
-  background: var(--theia-activityBar-background);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -146,6 +144,14 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
+#theia-left-content-panel.theia-mod-collapsed .theia-app-sidebar-container {
+  border-right: none;
+}
+
+#theia-right-content-panel.theia-mod-collapsed .theia-app-sidebar-container {
+  border-left: none;
+}
+
 #theia-left-content-panel > .lm-Panel {
   border-right: var(--theia-panel-border-width) solid
     var(--theia-activityBar-border);
@@ -326,13 +332,9 @@
 |----------------------------------------------------------------------------*/
 
 .theia-sidepanel-toolbar {
-  min-height: calc(
-    var(--theia-private-horizontal-tab-height) +
-      var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2
-  );
   display: flex;
-  padding-left: 5px;
   align-items: center;
+  min-height: var(--theia-horizontal-toolbar-height);
   background-color: var(--theia-sideBar-background);
   overflow: hidden;
 }
@@ -340,7 +342,7 @@
 .theia-sidepanel-toolbar .theia-sidepanel-title {
   color: var(--theia-settings-headerForeground);
   flex: 1;
-  margin-left: 14px;
+  margin-left: calc(var(--theia-ui-padding) * 3);
   text-transform: uppercase;
   font-size: var(--theia-ui-font-size0);
   min-width: 1rem;
@@ -350,12 +352,6 @@
   color: var(--theia-icon-foreground);
 }
 
-.theia-sidepanel-toolbar .lm-TabBar-toolbar .item > div {
-  height: 18px;
-  width: 18px;
-  background-repeat: no-repeat;
-}
-
 .noWrapInfo {
   white-space: nowrap;
   overflow: hidden;

package/src/browser/style/split-widget.css

@@ -25,6 +25,10 @@
   min-height: var(--theia-content-line-height);
 }
 
+.lm-SplitPanel-handle {
+  z-index: 6; /* Upper than the minimap */
+}
+
 .theia-split-widget > .lm-SplitPanel > .lm-SplitPanel-handle {
   box-sizing: border-box;
 }

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

@@ -37,60 +37,63 @@ body.theia-no-open-workspace #theia-statusBar {
   flex: 1;
   display: flex;
   align-items: stretch;
+  gap: var(--theia-ui-padding)
 }
 
 #theia-statusBar .area.left {
   justify-content: flex-start;
+  padding-left: var(--theia-ui-padding);
 }
 
 #theia-statusBar .area.right {
   justify-content: flex-end;
-  padding-right: calc(var(--theia-ui-padding) * 2);
+  padding-right: var(--theia-ui-padding);
 }
 
 #theia-statusBar .area .element {
   color: var(--theia-statusBar-foreground);
   display: flex;
   align-items: center;
+  justify-content: center;
   font-size: var(--theia-statusBar-font-size);
+  min-width: var(--theia-statusBar-height);
 }
 
 #theia-statusBar .area.left .element.has-background {
-  margin-left: 0px;
-  margin-right: 3px;
-  padding-left: 7px;
-  padding-right: 7px;
+  padding-inline: var(--theia-ui-padding);
 }
-#theia-statusBar .area .element>* {
-  margin-left: calc(var(--theia-ui-padding)/2);
+
+#theia-statusBar .area.left .element.has-background {
+  margin-left: calc(-1 * var(--theia-ui-padding));
 }
 
+/* Icons */
 #theia-statusBar .area .element .codicon {
   /* Scaling down codicons from 16 to 14 pixels */
   font-size: 14px;
+  margin: auto;
 }
 
-#theia-statusBar .area .element > *:last-child {
-  margin-right: calc(var(--theia-ui-padding) / 2);
+/* Icon with text */
+#theia-statusBar .area .element .codicon:has(+ span) {
+  margin-inline: calc(var(--theia-ui-padding) / 2);
 }
 
-.theia-mod-offline #theia-statusBar {
-  background-color: var(--theia-statusBar-offlineBackground) !important;
+/* Text labels */
+#theia-statusBar .area .element>span:not(.codicon) {
+  margin-inline: calc(var(--theia-ui-padding) / 2)
 }
 
-.theia-mod-offline #theia-statusBar .area .element {
-  color: var(--theia-statusBar-offlineForeground) !important;
+#theia-statusBar .area .element>span:not(.codicon):empty {
+  display: none;
 }
 
-#theia-statusBar .area.left .element:first-child:not(.has-background) {
-    margin-left: calc(var(--theia-ui-padding) * 3);
-}
-#theia-statusBar .area.left .element {
-  margin-right: var(--theia-ui-padding);
+.theia-mod-offline #theia-statusBar {
+  background-color: var(--theia-statusBar-offlineBackground) !important;
 }
 
-#theia-statusBar .area.right .element {
-  margin-left: var(--theia-ui-padding);
+.theia-mod-offline #theia-statusBar .area .element {
+  color: var(--theia-statusBar-offlineForeground) !important;
 }
 
 #theia-statusBar .area.right .element.compact-right,

package/src/browser/style/tabs.css

@@ -4,12 +4,12 @@
 
 :root {
   /* These need to be root because tabs get attached to the body during dragging. */
-  --theia-private-horizontal-tab-height: 28.5px;
+  --theia-private-horizontal-tab-height: 35px;
+  --theia-horizontal-toolbar-height: var(--theia-private-horizontal-tab-height);
   --theia-private-horizontal-tab-scrollbar-rail-height: 7px;
   --theia-private-horizontal-tab-scrollbar-height: 5px;
   --theia-tabbar-toolbar-z-index: 1001;
   --theia-toolbar-active-transform-scale: 1.272019649;
-  --theia-horizontal-toolbar-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
   --theia-dragover-tab-border-width: 2px;
 }
 
@@ -32,8 +32,8 @@
 .lm-TabBar[data-orientation="horizontal"] .lm-TabBar-tab {
   flex: none;
   height: var(--theia-horizontal-toolbar-height);
+  line-height: var(--theia-horizontal-toolbar-height);
   min-width: 35px;
-  line-height: var(--theia-private-horizontal-tab-height);
   padding: 0px 8px;
   align-items: center;
   overflow: hidden;
@@ -221,7 +221,6 @@
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon,
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.theia-mod-pinned>.lm-TabBar-tabCloseIcon {
   padding: 2px;
-  margin-top: 2px;
   margin-left: 4px;
   height: var(--theia-icon-size);
   width: var(--theia-icon-size);
@@ -328,7 +327,8 @@
 |----------------------------------------------------------------------------*/
 
 .lm-TabBar[data-orientation="horizontal"] .lm-TabBar-content-container>.ps__rail-x {
-  height: var(--theia-private-horizontal-tab-scrollbar-rail-height);
+  height: var(--theia-private-horizontal-tab-scrollbar-rail-height) !important;
+  background: transparent !important;
   z-index: 1000;
 }
 
@@ -384,9 +384,10 @@
   /* Due to the scrollbar (`z-index: 1000;`) it has a greater `z-index`. */
   display: flex;
   flex-direction: row-reverse;
-  padding: 4px;
-  padding-left: 0px;
-  margin-right: 4px;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--theia-ui-padding);
+  gap: 2px;
 }
 
 .lm-TabBar-content-container {
@@ -402,7 +403,7 @@
   display: flex;
   flex-direction: row;
   column-gap: 0px;
-  align-items: centery;
+  align-items: center;
 }
 
 .lm-TabBar-toolbar .item>div {
@@ -414,7 +415,7 @@
   cursor: pointer;
 }
 
-.lm-TabBar-toolbar :not(.item.enabled) .action-label {
+.lm-TabBar-toolbar > :not(.item.enabled) > .action-label {
   background: transparent;
   cursor: default;
 }
@@ -425,10 +426,10 @@
 }
 
 .lm-TabBar-toolbar .item>div {
-  line-height: calc(var(--theia-icon-size) + 2px);
-  height: calc(var(--theia-icon-size) + 2px);
+  min-width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  line-height: var(--theia-icon-size);
   background-repeat: no-repeat;
-  line-height: 18px;
 }
 
 .lm-TabBar-toolbar .item>div.no-icon {
@@ -492,6 +493,7 @@
 
 .lm-TabBar[data-orientation="horizontal"] .lm-TabBar-content {
   flex-direction: row;
+  min-height: var(--theia-horizontal-toolbar-height);
 }
 
 .lm-TabBar[data-orientation="vertical"] .lm-TabBar-content {

package/src/browser/style/tree.css

@@ -73,14 +73,16 @@
 .theia-TreeNodeContent {
   display: flex;
   align-items: center;
-  width: calc(100% - var(--theia-scrollbar-rail-width));
+  width: 100%;
+  padding-right: var(--theia-ui-padding);
+  box-sizing: border-box;
 }
 
 .theia-ExpansionToggle {
   display: flex;
   justify-content: center;
-  padding-left: calc(var(--theia-ui-padding) / 2);
-  padding-right: calc(var(--theia-ui-padding) / 2);
+  padding-left: calc(var(--theia-ui-padding) / 3);
+  padding-right: calc(var(--theia-ui-padding) / 3);
   min-width: var(--theia-icon-size);
   min-height: var(--theia-icon-size);
 }

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

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 :root {
-  --theia-view-container-title-height: var(--theia-content-line-height);
+  --theia-view-container-title-height: 24px;
   --theia-view-container-content-height: calc(100% - var(--theia-view-container-title-height));
 }
 
@@ -82,10 +82,6 @@
   box-shadow: none;
 }
 
-.theia-view-container-part-header .theia-ExpansionToggle {
-  padding-left: 4px;
-}
-
 .theia-view-container>.lm-SplitPanel[data-orientation="horizontal"] .part>.theia-header .theia-ExpansionToggle::before {
   display: none;
   padding-left: 0px;
@@ -114,7 +110,7 @@
 }
 
 .theia-view-container-part-header .notification-count-container {
-  margin-right: 12px;
+  margin-right: var(--theia-ui-padding);
 }
 
 .theia-view-container .part>.body {
@@ -156,7 +152,7 @@
 .lm-TabBar-toolbar.theia-view-container-part-title {
   overflow: visible !important;
   padding: 0px;
-  padding-right: calc(var(--theia-ui-padding) * 2 / 3);
+  padding-right: var(--theia-ui-padding);
 }
 
 .theia-view-container-part-title {

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

@@ -21,7 +21,8 @@ import { Key, KeyCode, KeyModifier } from '../keyboard/keys';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { StatefulWidget } from '../shell';
 import {
-    EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, BUSY_CLASS, CODICON_TREE_ITEM_CLASSES, CODICON_LOADING_CLASSES, Widget, UnsafeWidgetUtilities
+    EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, BUSY_CLASS, CODICON_TREE_ITEM_CLASSES, CODICON_LOADING_CLASSES, Widget, UnsafeWidgetUtilities,
+    addEventListener
 } from '../widgets';
 import { TreeNode, CompositeTreeNode } from './tree';
 import { TreeModel } from './tree-model';
@@ -81,6 +82,8 @@ export interface TreeScrollEvent {
 export interface TreeScrollState {
     readonly scrollTop: number;
     readonly isAtBottom: boolean;
+    readonly scrollHeight?: number;
+    readonly clientHeight?: number;
 }
 
 export const TreeProps = Symbol('TreeProps');
@@ -313,31 +316,9 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             this.updateDecorations();
         });
         if (this.props.globalSelection) {
-            this.toDispose.pushAll([
-                this.model.onSelectionChanged(() => {
-                    if (this.node.contains(document.activeElement)) {
-                        this.updateGlobalSelection();
-                    }
-                }),
-                this.focusService.onDidChangeFocus(focus => {
-                    if (focus && this.node.contains(document.activeElement) && this.model.selectedNodes[0] !== focus && this.model.selectedNodes.includes(focus)) {
-                        this.updateGlobalSelection();
-                    }
-                }),
-                Disposable.create(() => {
-                    const selection = this.selectionService.selection;
-                    if (TreeWidgetSelection.isSource(selection, this)) {
-                        this.selectionService.selection = undefined;
-                    }
-                })
-            ]);
-
-            this.node.addEventListener('focusin', e => {
-                if (this.model.selectedNodes.length && (!this.selectionService.selection || !TreeWidgetSelection.isSource(this.selectionService.selection, this))) {
-                    this.updateGlobalSelection();
-                }
-            });
+            this.registerGlobalSelectionHandlers();
         }
+
         this.toDispose.push(this.corePreferences.onPreferenceChanged(preference => {
             if (preference.preferenceName === 'workbench.tree.renderIndentGuides') {
                 this.update();
@@ -345,6 +326,41 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         }));
     }
 
+    protected registerGlobalSelectionHandlers(): void {
+        this.model.onSelectionChanged(this.handleGlobalSelectionOnModelSelectionChange, this, this.toDispose);
+        this.focusService.onDidChangeFocus(this.handleGlobalSelectionOnFocusServiceFocusChange, this, this.toDispose);
+        this.toDispose.push(addEventListener(this.node, 'focusin', this.handleGlobalSelectionOnFocusIn.bind(this)));
+        this.toDispose.push(Disposable.create(this.handleGlobalSelectionOnDisposal.bind(this)));
+    }
+
+    protected handleGlobalSelectionOnModelSelectionChange(): void {
+        if (this.shouldUpdateGlobalSelection()) {
+            this.updateGlobalSelection();
+        }
+    }
+
+    protected handleGlobalSelectionOnFocusServiceFocusChange(focus: SelectableTreeNode | undefined): void {
+        if (focus && this.shouldUpdateGlobalSelection() && this.model.selectedNodes[0] !== focus && this.model.selectedNodes.includes(focus)) {
+            this.updateGlobalSelection();
+        }
+    }
+
+    protected handleGlobalSelectionOnFocusIn(): void {
+        if (this.model.selectedNodes.length && (!this.selectionService.selection || !TreeWidgetSelection.isSource(this.selectionService.selection, this))) {
+            this.updateGlobalSelection();
+        }
+    }
+
+    protected handleGlobalSelectionOnDisposal(): void {
+        if (TreeWidgetSelection.isSource(this.selectionService.selection, this)) {
+            this.selectionService.selection = undefined;
+        }
+    }
+
+    protected shouldUpdateGlobalSelection(): boolean {
+        return this.node.contains(document.activeElement) || TreeWidgetSelection.isSource(this.selectionService.selection, this);
+    }
+
     /**
      * Update the global selection for the tree.
      */
@@ -1643,7 +1659,7 @@ export namespace TreeWidget {
     }
     export class View extends React.Component<ViewProps> {
         list: VirtuosoHandle | undefined;
-        private lastScrollState: TreeScrollState = { scrollTop: 0, isAtBottom: true };
+        private lastScrollState: TreeScrollState = { scrollTop: 0, isAtBottom: true, scrollHeight: 0, clientHeight: 0 };
 
         override render(): React.ReactNode {
             const { rows, width, height, scrollToRow, renderNodeRow, onScrollEmitter, ...other } = this.props;
@@ -1665,9 +1681,16 @@ export namespace TreeWidget {
                     const isAtBottom = scrollHeight - scrollTop - clientHeight <= SCROLL_BOTTOM_THRESHOLD;
 
                     // Store scroll state before firing the event to prevent jitter during inference and scrolling
-                    this.lastScrollState = { scrollTop, isAtBottom };
+                    this.lastScrollState = { scrollTop, isAtBottom, scrollHeight, clientHeight };
                     onScrollEmitter?.fire({ scrollTop, scrollLeft: e.target.scrollLeft || 0 });
                 }}
+                atBottomStateChange={(atBottom: boolean) => {
+                    this.lastScrollState = {
+                        ...this.lastScrollState,
+                        isAtBottom: atBottom
+                    };
+                }}
+                atBottomThreshold={SCROLL_BOTTOM_THRESHOLD}
                 totalCount={rows.length}
                 itemContent={index => renderNodeRow(rows[index])}
                 width={width}

package/src/browser/widgets/alert-message.tsx

@@ -43,9 +43,9 @@ export class AlertMessage extends React.Component<AlertMessageProps> {
 
     override render(): React.ReactNode {
         return <div className='theia-alert-message-container'>
-            <div className={`theia-${this.props.type.toLowerCase()}-alert`}>
+            <div className={`theia-alert theia-${this.props.type.toLowerCase()}-alert`}>
                 <div className='theia-message-header'>
-                    <i className={AlertMessageIcon[this.props.type]}></i>&nbsp;
+                    <i className={AlertMessageIcon[this.props.type]}></i>
                     {this.props.header}
                 </div>
                 <div className='theia-message-content'>{this.props.children}</div>

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

@@ -34,6 +34,8 @@ export interface SelectOption {
 }
 
 export interface SelectComponentProps {
+    id?: string
+    className?: string
     options: readonly SelectOption[]
     defaultValue?: string | number
     onChange?: (option: SelectOption, index: number) => void,
@@ -193,10 +195,11 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         const selectedItemLabel = options[selected]?.label ?? options[selected]?.value;
         return <>
             <div
+                id={this.props.id}
                 key="select-component"
                 ref={this.fieldRef}
                 tabIndex={0}
-                className="theia-select-component"
+                className={`theia-select-component${this.props.className ? ` ${this.props.className}` : ''}`}
                 onClick={e => this.handleClickEvent(e)}
                 onBlur={
                     () => {

package/src/electron-main/electron-main-application.ts

@@ -450,11 +450,17 @@ export class ElectronMainApplication {
         const windowState = previousWindowState?.screenLayout === this.getCurrentScreenLayout()
             ? previousWindowState
             : this.getDefaultTheiaWindowOptions();
-        return {
+        const result = {
             frame: this.useNativeWindowFrame,
             ...this.getDefaultOptions(),
             ...windowState
         };
+
+        result.webPreferences = {
+            ...result.webPreferences,
+            preload: path.resolve(this.globals.THEIA_APP_PROJECT_PATH, 'lib', 'frontend', 'preload.js').toString()
+        };
+        return result;
     }
 
     protected avoidOverlap(options: TheiaBrowserWindowOptions): TheiaBrowserWindowOptions {
@@ -489,7 +495,7 @@ export class ElectronMainApplication {
                 // Issue: https://github.com/eclipse-theia/theia/issues/8577
                 nodeIntegrationInWorker: false,
                 backgroundThrottling: false,
-                preload: path.resolve(this.globals.THEIA_APP_PROJECT_PATH, 'lib', 'frontend', 'preload.js').toString()
+                enableDeprecatedPaste: true
             },
             ...this.config.electron?.windowOptions || {},
         };
@@ -565,13 +571,18 @@ export class ElectronMainApplication {
     }
 
     protected getDefaultTheiaWindowOptions(): TheiaBrowserWindowOptions {
-        return {
+        const result = {
             frame: this.useNativeWindowFrame,
             isFullScreen: false,
             isMaximized: false,
             ...this.getDefaultTheiaWindowBounds(),
-            ...this.getDefaultOptions()
+            ...this.getDefaultOptions(),
+        };
+        result.webPreferences = {
+            ...result.webPreferences || {},
+            preload: path.resolve(this.globals.THEIA_APP_PROJECT_PATH, 'lib', 'frontend', 'preload.js').toString()
         };
+        return result;
     }
 
     protected getDefaultTheiaSecondaryWindowBounds(): TheiaBrowserWindowOptions {
@@ -780,16 +791,20 @@ export class ElectronMainApplication {
         webContents.setWindowOpenHandler(details => {
             // if it's a secondary window, allow it to open
             if (new URI(details.url).path.fsPath() === new Path(this.globals.THEIA_SECONDARY_WINDOW_HTML_PATH).fsPath()) {
-                const { minWidth, minHeight } = this.getDefaultOptions();
+                const defaultOptions = this.getDefaultOptions();
                 const options: BrowserWindowConstructorOptions = {
                     ...this.getDefaultTheiaSecondaryWindowBounds(),
                     // We always need the native window frame for now because the secondary window does not have Theia's title bar by default.
                     // In 'custom' title bar mode this would leave the window without any window controls (close, min, max)
                     // TODO set to this.useNativeWindowFrame when secondary windows support a custom title bar.
                     frame: true,
-                    minWidth,
-                    minHeight
+                    minWidth: defaultOptions.minWidth,
+                    minHeight: defaultOptions.minHeight,
+                    webPreferences: {
+                        enableDeprecatedPaste: defaultOptions.webPreferences?.enableDeprecatedPaste
+                    }
                 };
+
                 if (!this.useNativeWindowFrame) {
                     // If the main window does not have a native window frame, do not show  an icon in the secondary window's native title bar.
                     // The data url is a 1x1 transparent png