Introduce Dynamic Tab Resizing Strategy #12360

tsmaeder · 2023-03-29T13:18:39Z

What it does

Introduces a new, optional tab layout strategy similar to Chrome tabs as described in #12328
This is part one, introducing only the dynamic tab resizing.

How to test

Turn on the preference "Workbench>Tab>DynamicTabs"
Open and close editors, observing the tab resizing behaviour
Make sure the tabs resizing works correctly when resizing
Make sure other tab usages (like the vertical tabs on the view dock panels) work fine and are unaffected by the dynamic tabs preference
Make sure the tab resizing works correctly when editors have different toolbar actions
Play with the "Workbench>Tab>Minimum Size | Preferred Size" settings and make sure the tab resizing works as expected

Review checklist

As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

As a reviewer, I agree to behave in accordance with the review guidelines

sdirix

Good work! I left some comments in the code.

The new behavior brings in some weirdness: When the tabs fill the whole width and we switch to a new tab which adds/removes decorations, the tab size then only changes once the mouse leaves the tab area. That behavior is as defined but it the sudden jump in tab width feels unintuitive and weird. Maybe we can find a better solution in the long run.

I found another ugly behavior where the close button is flickering. However I checked, this is already the case on master, so it was not introduced here:

packages/core/src/browser/core-preferences.ts

packages/core/src/browser/shell/tab-bars.ts

packages/core/src/browser/core-preferences.ts

packages/core/src/browser/style/tabs.css

sdirix

Works great for me. I have one small nitpick left (from my own suggestion)

packages/core/src/browser/style/tabs.css

tsmaeder · 2023-04-11T15:47:46Z

@msujew @vince-fugnitto unfortunately, @sdirix is not a committer. Maybe I could get a "Hallelujah" for one of you?

vince-fugnitto · 2023-04-11T18:26:20Z

packages/core/src/browser/core-preferences.ts

+        'workbench.tab.shrinkToFit.enabled': {
+            type: 'boolean',
+            default: false,
+            description: nls.localize('theia/core/tabShrinkToFit', 'Shrink tabs to fit available space')


minor: for consistency preferences usually include punctuation

Suggested change

description: nls.localize('theia/core/tabShrinkToFit', 'Shrink tabs to fit available space')

description: nls.localize('theia/core/tabShrinkToFit', 'Shrink tabs to fit available space.')

The same is true for other preferences introduced in the pr.

Other preferences also use whole sentences in the description, where a period at the end makes sense.

vince-fugnitto · 2023-04-11T18:41:00Z

packages/core/src/browser/shell/application-shell.ts

@@ -96,13 +96,25 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
        @inject(TabBarToolbarRegistry) protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
        @inject(TabBarToolbarFactory) protected readonly tabBarToolbarFactory: TabBarToolbarFactory,
        @inject(BreadcrumbsRendererFactory) protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
+        @inject(CorePreferences) protected readonly corePreferences: CorePreferences


We should document this as a breaking change:

https://github.com/eclipse-theia/theia/wiki/Coding-Guidelines#property-injection

vince-fugnitto · 2023-04-11T18:42:05Z

packages/core/src/browser/shell/tab-bars.ts

@@ -885,7 +956,7 @@ export class SideTabBar extends ScrollableTabBar {
     * Render the tab bar in the _hidden content node_ (see `hiddenContentNode` for explanation),
     * then gather size information for labels and render it again in the proper content node.
     */
-    protected renderTabBar(): void {
+    protected override updateTabs(): void {


Document as a breaking change?

vince-fugnitto · 2023-04-11T18:54:12Z

packages/core/src/browser/shell/tab-bars.ts

@@ -571,6 +602,14 @@ export class ScrollableTabBar extends TabBar<Widget> {
        if (!this.scrollBar) {
            this.scrollBar = this.scrollBarFactory();
        }
+        this.node.addEventListener('mouseenter', () => { this.isMouseOver = true; });
+        this.node.addEventListener('mouseleave', () => {


This gives a slightly odd behavior if tabs are closed but we remain in the tabbar, perhaps we should recompute when a tab is created/closed?

shrink-to-fit-listener.mov

The behavior is intentional in order to keep the position of the "close" icon stable as we repeatedly close tabs. It's inspired by what Chrome does. I would argue the utility in this case outweighs the visual oddity.

vince-fugnitto · 2023-04-11T19:22:28Z

packages/core/src/browser/style/tabs.css

+.p-TabBar-tab .theia-tab-icon-label {
+  flex: 1;
+}
+
+.p-TabBar-tab.p-mod-closable:hover .theia-tab-icon-label,
+.p-TabBar-tab.p-mod-current .theia-tab-icon-label {
+  overflow: hidden;
+}


It appears that this styling causes the following regression, and possibly others:

shrink-regression.mov

vince-fugnitto

The latest updates look good to me 👍

Part of eclipse-theia#12328 Contributed on behalf of STMicroelectronics Signed-off-by: Thomas Mäder <[email protected]>

Signed-off-by: Thomas Mäder <[email protected]>

tsmaeder requested review from msujew and colin-grant-work March 29, 2023 13:18

tsmaeder force-pushed the 12328_dynamic_tabs branch from 197b7c3 to bcb3ef1 Compare March 29, 2023 13:20

tsmaeder changed the title ~~First cut of dynamic tabs with tab width assignment~~ Introduce Dynamic Tab Resizing Strategy Mar 29, 2023

sdirix requested changes Mar 30, 2023

View reviewed changes

tsmaeder force-pushed the 12328_dynamic_tabs branch from e122b3e to 96040ae Compare April 3, 2023 12:53

tsmaeder requested a review from sdirix April 11, 2023 09:12

sdirix approved these changes Apr 11, 2023

View reviewed changes

packages/core/src/browser/style/tabs.css Outdated Show resolved Hide resolved

tsmaeder force-pushed the 12328_dynamic_tabs branch from 96040ae to 477d033 Compare April 11, 2023 15:29

vince-fugnitto reviewed Apr 11, 2023

View reviewed changes

vince-fugnitto added the ui/ux issues related to user interface / user experience label Apr 12, 2023

vince-fugnitto approved these changes Apr 12, 2023

View reviewed changes

tsmaeder added 4 commits April 13, 2023 11:14

Introduce dynamic tab resizing strategy

bfa3604

Part of eclipse-theia#12328 Contributed on behalf of STMicroelectronics Signed-off-by: Thomas Mäder <[email protected]>

Address review comments

a390a3f

Signed-off-by: Thomas Mäder <[email protected]>

Show close icon on active tab

7da5fdb

Signed-off-by: Thomas Mäder <[email protected]>

More review feedback

6fb11a5

Signed-off-by: Thomas Mäder <[email protected]>

tsmaeder force-pushed the 12328_dynamic_tabs branch from 8e0142a to 6fb11a5 Compare April 13, 2023 09:14

tsmaeder merged commit 4c8f76d into eclipse-theia:master Apr 13, 2023

tsmaeder mentioned this pull request Apr 13, 2023

Add "open tabs" drop down #12411

Merged

1 task

vince-fugnitto added this to the 1.37.0 milestone Apr 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce Dynamic Tab Resizing Strategy #12360

Introduce Dynamic Tab Resizing Strategy #12360

tsmaeder commented Mar 29, 2023

sdirix left a comment •

edited

Loading

sdirix left a comment

tsmaeder commented Apr 11, 2023

vince-fugnitto Apr 11, 2023

tsmaeder Apr 12, 2023

vince-fugnitto Apr 11, 2023

vince-fugnitto Apr 11, 2023

vince-fugnitto Apr 11, 2023

tsmaeder Apr 12, 2023

vince-fugnitto Apr 11, 2023

vince-fugnitto left a comment

	description: nls.localize('theia/core/tabShrinkToFit', 'Shrink tabs to fit available space')
	description: nls.localize('theia/core/tabShrinkToFit', 'Shrink tabs to fit available space.')

Introduce Dynamic Tab Resizing Strategy #12360

Introduce Dynamic Tab Resizing Strategy #12360

Conversation

tsmaeder commented Mar 29, 2023

What it does

How to test

Review checklist

Reminder for reviewers

sdirix left a comment • edited Loading

Choose a reason for hiding this comment

sdirix left a comment

Choose a reason for hiding this comment

tsmaeder commented Apr 11, 2023

vince-fugnitto Apr 11, 2023

Choose a reason for hiding this comment

tsmaeder Apr 12, 2023

Choose a reason for hiding this comment

vince-fugnitto Apr 11, 2023

Choose a reason for hiding this comment

vince-fugnitto Apr 11, 2023

Choose a reason for hiding this comment

vince-fugnitto Apr 11, 2023

Choose a reason for hiding this comment

tsmaeder Apr 12, 2023

Choose a reason for hiding this comment

vince-fugnitto Apr 11, 2023

Choose a reason for hiding this comment

vince-fugnitto left a comment

Choose a reason for hiding this comment

sdirix left a comment •

edited

Loading