@theia/core 1.63.3 → 1.64.0-next.17

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

@@ -81,6 +81,8 @@ export interface TreeScrollEvent {
 export interface TreeScrollState {
     readonly scrollTop: number;
     readonly isAtBottom: boolean;
+    readonly scrollHeight?: number;
+    readonly clientHeight?: number;
 }
 
 export const TreeProps = Symbol('TreeProps');
@@ -1643,7 +1645,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 +1667,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={
                     () => {