Addressed non-functional comments & fixed scroll/resize behavior

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
eclipse-theia · May 1, 2023 · d6f8c73 · d6f8c73
1 parent 33d4c68
commit d6f8c73
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,13 @@
 
 - [Previous Changelogs](https://github.com/eclipse-theia/theia/tree/master/doc/changelogs/)
 
+
+## v1.38.0 - 04/27/2023
+
+<a name="breaking_changes_1.38.0">[Breaking Changes:](#breaking_changes_1.38.0)</a>
+
+- [core] moved `ToolbarAwareTabBar.Styles` to `ScrollableTabBar.Styles` [12411](https://github.com/eclipse-theia/theia/pull/12411/)
+
 ## v1.37.0 - 04/27/2023
 
 - [application-package] bumped the default supported VS Code API from `1.72.2` to `1.74.2` [#12468](https://github.com/eclipse-theia/theia/pull/12468)

diff --git a/examples/playwright/src/tests/theia-terminal-view.test.ts b/examples/playwright/src/tests/theia-terminal-view.test.ts
@@ -55,7 +55,7 @@ test.describe('Theia Terminal View', () => {
 
         // close all terminals
         for (const terminal of allTerminals) {
-            await terminal.activate(); // close box is not visible when not active
+            await terminal.activate();
             await terminal.close();
         }
 

diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts
@@ -679,7 +679,6 @@ export class ScrollableTabBar extends TabBar<Widget> {
     }
 
     protected updateTabs(): void {
-
         const content = [];
         if (this.dynamicTabOptions) {
 
@@ -696,18 +695,19 @@ export class ScrollableTabBar extends TabBar<Widget> {
             } else {
                 this.needsRecompute = false;
                 if (this.orientation === 'horizontal') {
-                    this.tabSize = Math.max(Math.min(this.scrollbarHost.clientWidth / this.titles.length,
-                        this.dynamicTabOptions.defaultTabSize), this.dynamicTabOptions.minimumTabSize);
-
                     let availableWidth = this.scrollbarHost.clientWidth;
+                    let effectiveWidth = availableWidth;
                     if (!this.openTabsContainer.classList.contains('p-mod-hidden')) {
                         availableWidth += this.openTabsContainer.getBoundingClientRect().width;
                     }
                     if (this.dynamicTabOptions.minimumTabSize * this.titles.length <= availableWidth) {
+                        effectiveWidth += this.openTabsContainer.getBoundingClientRect().width;
                         this.openTabsContainer.classList.add('p-mod-hidden');
                     } else {
                         this.openTabsContainer.classList.remove('p-mod-hidden');
                     }
+                    this.tabSize = Math.max(Math.min(effectiveWidth / this.titles.length,
+                        this.dynamicTabOptions.defaultTabSize), this.dynamicTabOptions.minimumTabSize);
                 }
             }
             this.node.classList.add('dynamic-tabs');
@@ -726,7 +726,7 @@ export class ScrollableTabBar extends TabBar<Widget> {
             content[i] = this.renderer.renderTab(renderData);
         }
         VirtualDOM.render(content, this.contentNode);
-        if (this.scrollBar) {
+        if (this.dynamicTabOptions && !this.isMouseOver && this.scrollBar) {
             this.scrollBar.update();
         }
     }

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -195,7 +195,6 @@
     height: inherit;
 }
 
-
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab.theia-mod-pinned > .p-TabBar-tabCloseIcon {
   padding: 2px;
@@ -438,7 +437,6 @@
   height: 100%;
 }
 
-
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-content {
   flex-direction: row;
 }
@@ -448,7 +446,7 @@
 }
 
 .p-TabBar.theia-app-centers[data-orientation='horizontal'].dynamic-tabs .p-TabBar-tabLabel {
-  /* fade out text with dynamic tabs strategy*/
+  /* 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;