Add "open tabs" drop down #12411

tsmaeder · 2023-04-13T14:42:58Z

What it does

Adds a drop down allowing to chose among open editors when there is too little space to show all open tabs. Also adds a fade-out effect for tab labels.

This is the second part of #12328

Contributed on behalf of STMicroelectronics

How to test

Make sure the scenarios from #12360 are still working O.K. Additionally, make sure the drop-down for the open editors appears and disappears in in the proper cases.

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

vince-fugnitto

@tsmaeder do you mind resolving the conflicts?

tsmaeder · 2023-04-13T15:27:46Z

Hmh....something is broken. Stand by...

tsmaeder · 2023-04-13T15:40:26Z

Apparently, some stuff was broken when rebasing on the changes in the previous "dynamic tabs" PR. I'll fix and reopen the PR.

tsmaeder · 2023-04-14T09:37:41Z

Now ready for review.

vince-fugnitto

Unfortunately this change seems to break the default tab behavior.
This is with workbench.tab.shrinkToFit.enabled set to false:

weird-tabs.mp4

In this case the dynamic tab styling should not be applied, and should behave like before.

vince-fugnitto · 2023-04-18T16:14:43Z

examples/playwright/src/tests/theia-terminal-view.test.ts

@@ -55,6 +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


minor: do we mean the close icon? I'm not aware of the "close box" which makes the documentation confusing.

I think the term "close box" is quite common for windows (at least Google thinks so). I had "close button" before, but the UI element is not really a button. An "Icon" feels more like describing the implementation, not the UI element, i.e. the "close icon" is the graphic element, whereas Windows used to have a minus-sign in its window close box.
If you still find it confusing, I can change it.

I believe we should stick with button (which I feel is more common) if we are to keep the comment else I'd remove it completely. I'm leaning towards removing the comment altogether, especially since theia-text-editor.test.ts which has a similar change to this one does not include one.

tsmaeder · 2023-04-19T07:38:17Z

Unfortunately this change seems to break the default tab behavior.

Thanks for catching this one: I am very bad at noticing visual details 🤷

vince-fugnitto

Unfortunately I've noticed a few regressions with this pull-request:

it is no longer possible to drag tabs and create split layouts
the bottom panel is incorrectly affected by the dynamic tab behaviour, is this intended?

vince-fugnitto · 2023-04-21T12:38:00Z

examples/playwright/src/tests/theia-terminal-view.test.ts

@@ -55,6 +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


I believe we should stick with button (which I feel is more common) if we are to keep the comment else I'd remove it completely. I'm leaning towards removing the comment altogether, especially since theia-text-editor.test.ts which has a similar change to this one does not include one.

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

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

tsmaeder · 2023-04-21T13:46:09Z

The tab behaviour in the lower pane is intended. Having a look at the drag behaviour.

Adds a drop down allowing to chose among open editors when there is too little space to show all open tabs. 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 · 2023-05-01T08:07:32Z

@vince-fugnitto I believe I got the scroll/resize behavior to be correct now and addressed your comments. Thanks for your patience with this PR.

fix: regression when dragging tabs has been fixed

vince-fugnitto

The changes look good to me 👍

the "open tabs" dropdown is correctly rendered, and displays the tabs for a given group
there are no regressions with the default behavior
there are no regressions with drag-and-drop to create special layouts

MatthewKhouzam · 2023-05-01T17:38:00Z

Could we have a video of the feature? It can help document it.

tsmaeder · 2023-05-02T09:16:36Z

@MatthewKhouzam yes we can!

ShirinkingTabs.mp4

tsmaeder · 2023-05-02T10:07:28Z

@vince-fugnitto I found another bug when making the video: #12477

Adds a drop down allowing to chose among open editors when there is too little space to show all open tabs. Part of eclipse-theia#12328 Contributed on behalf of STMicroelectronics

wpaul-samsung · 2023-10-16T13:17:06Z

What's the reason for only showing the open editors icon when shrink to fit is enabled and the window width is very narrow?

Shrink to fit enabled, small window, no icon.

A but smaller than the previous screen shot and now we get the icon.

Notice how the open settings icon is always there. Why don't we just always show the open editors icon to the left of the open settings icon? This is more of less what vscode does BTW.

Shrink to fit disabled - no way to see open editors.

msujew · 2023-10-16T13:55:08Z

@wpaul-samsung The reason probably was "it's out of scope of the PR". I would recommend you to open a new feature request to facillitate an actionable discussion.

wpaul-samsung · 2023-10-16T14:00:06Z

@wpaul-samsung The reason probably was "it's out of scope of the PR". I would recommend you to open a new feature request to facillitate an actionable discussion.

Fair enough.

tsmaeder · 2023-10-16T16:39:14Z

Not sure if I remember this correctly, but I think the "regular" case is also reusing the default tab behavior from PhosphorJS, so changing anything about that might have been hard. But also: "out of scope"

tsmaeder requested review from msujew, martin-fleck-at and vince-fugnitto April 13, 2023 14:42

vince-fugnitto reviewed Apr 13, 2023

View reviewed changes

tsmaeder marked this pull request as draft April 13, 2023 15:39

tsmaeder force-pushed the 12328_open_editor_menu2 branch from a309b28 to b699bf8 Compare April 14, 2023 09:37

tsmaeder marked this pull request as ready for review April 14, 2023 09:37

vince-fugnitto reviewed Apr 18, 2023

View reviewed changes

tsmaeder force-pushed the 12328_open_editor_menu2 branch from fe431d1 to c816556 Compare April 20, 2023 12:50

tsmaeder requested a review from vince-fugnitto April 21, 2023 09:36

vince-fugnitto previously requested changes Apr 21, 2023

View reviewed changes

vince-fugnitto modified the milestone: 1.37.0 Apr 27, 2023

tsmaeder added 5 commits April 30, 2023 15:24

Add "open tabs" drop down

d14a9f7

Adds a drop down allowing to chose among open editors when there is too little space to show all open tabs. Part of eclipse-theia#12328 Contributed on behalf of STMicroelectronics Signed-off-by: Thomas Mäder <[email protected]>

Fix page object model & tests to fit new tabs UI

676090c

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

Only apply close box styling in "dynamic" case.

00264d8

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

Fix tab detaching behaviour

33d4c68

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

Addressed non-functional comments & fixed scroll/resize behavior

d6f8c73

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

tsmaeder force-pushed the 12328_open_editor_menu2 branch from 62fc436 to d6f8c73 Compare May 1, 2023 08:01

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

vince-fugnitto approved these changes May 1, 2023

View reviewed changes

tsmaeder merged commit 53c4142 into eclipse-theia:master May 2, 2023

tsmaeder mentioned this pull request May 2, 2023

Backport issues to 1.37.1 #12479

Closed

1 task

tsmaeder mentioned this pull request May 11, 2023

Backport issues to 1.37.2 #12518

Closed

11 tasks

vince-fugnitto added this to the 1.38.0 milestone May 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "open tabs" drop down #12411

Add "open tabs" drop down #12411

tsmaeder commented Apr 13, 2023

vince-fugnitto left a comment

tsmaeder commented Apr 13, 2023

tsmaeder commented Apr 13, 2023

tsmaeder commented Apr 14, 2023

vince-fugnitto left a comment

vince-fugnitto Apr 18, 2023

tsmaeder Apr 20, 2023

vince-fugnitto Apr 21, 2023

tsmaeder commented Apr 19, 2023

vince-fugnitto left a comment

vince-fugnitto Apr 21, 2023

tsmaeder commented Apr 21, 2023

tsmaeder commented May 1, 2023

vince-fugnitto left a comment

MatthewKhouzam commented May 1, 2023

tsmaeder commented May 2, 2023

tsmaeder commented May 2, 2023

wpaul-samsung commented Oct 16, 2023

msujew commented Oct 16, 2023

wpaul-samsung commented Oct 16, 2023

tsmaeder commented Oct 16, 2023

Add "open tabs" drop down #12411

Add "open tabs" drop down #12411

Conversation

tsmaeder commented Apr 13, 2023

What it does

How to test

Review checklist

Reminder for reviewers

vince-fugnitto left a comment

Choose a reason for hiding this comment

tsmaeder commented Apr 13, 2023

tsmaeder commented Apr 13, 2023

tsmaeder commented Apr 14, 2023

vince-fugnitto left a comment

Choose a reason for hiding this comment

vince-fugnitto Apr 18, 2023

Choose a reason for hiding this comment

tsmaeder Apr 20, 2023

Choose a reason for hiding this comment

vince-fugnitto Apr 21, 2023

Choose a reason for hiding this comment

tsmaeder commented Apr 19, 2023

vince-fugnitto left a comment

Choose a reason for hiding this comment

vince-fugnitto Apr 21, 2023

Choose a reason for hiding this comment

tsmaeder commented Apr 21, 2023

tsmaeder commented May 1, 2023

vince-fugnitto left a comment

Choose a reason for hiding this comment

MatthewKhouzam commented May 1, 2023

tsmaeder commented May 2, 2023

tsmaeder commented May 2, 2023

wpaul-samsung commented Oct 16, 2023

msujew commented Oct 16, 2023

wpaul-samsung commented Oct 16, 2023

tsmaeder commented Oct 16, 2023