Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic Editor Tab Sizing #12328

Closed
tsmaeder opened this issue Mar 21, 2023 · 3 comments
Closed

Dynamic Editor Tab Sizing #12328

tsmaeder opened this issue Mar 21, 2023 · 3 comments
Assignees
Labels
proposal feature proposals (potential future features)

Comments

@tsmaeder
Copy link
Contributor

Feature Description:

Currently, the editor tabs are always shown wide enough to show the full file name of the resource being shown. If there are more open tabs than can be shown in the available space, a scroll bar is shown to allow the user to scroll among the open editors.
We would like to offer the option to have an alternative tab layout based on variable width tabs inspired by how Chrome manages tabs. The tab behavior would be controlled by the following rules:

  1. All tabs always have the same width
  2. The user can set a maximum tab width. No tab will ever be larger than the maximum width.
  3. Tabs which are not wide enough to show the whole title will be shown as fading out towards the right (instead of ..., for example)
  4. The system defines a minimum width for tabs, typically enough to show the tab icon.
  5. If there is not enough room to show all open tabs at their minimum size, we fall back to a scroll bar to move among the available tabs. An affordance (drop-down) is shown in this case to choose an open editor to reveal and activate.

We'll have to recompute the size of the tabs any time one of the following happens:

  1. The minimum or maximum tab size changes
  2. The number of open tabs changes
  3. The width of the tab bar changes. In particular, this can happen when we activate and editor that contributes to the tab bar toolbar.

Special care will be taken to support closing multiple tabs in succession: in order to keep the close button under the mouse, tabs should not be resized nor scrolled in while the mouse hovers over a tab. Any scrolling or resizing will delayed until the mouse leaves the tab area.

Since we might not show the whole file name anymore in the title, we'll improve the title hover to allow the user to quickly identify tabs.

@vince-fugnitto
Copy link
Member

I believe the feature is similar to the proposal from #5085.

@vince-fugnitto vince-fugnitto added the proposal feature proposals (potential future features) label Mar 21, 2023
@tsmaeder
Copy link
Contributor Author

Thanks for the link, @vince-fugnitto I guess it's worth looking at the old behavior. I'll still keep this one open, though, as I think it's a more detailed request.

@tsmaeder
Copy link
Contributor Author

In order to keep the PR's simpler, I'll try to start with implementing the dynamic tabs and do the drop down and effects later.

tsmaeder added a commit to tsmaeder/theia that referenced this issue Mar 29, 2023
Part of eclipse-theia#12328

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue Apr 3, 2023
Part of eclipse-theia#12328

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue Apr 11, 2023
Part of eclipse-theia#12328

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue Apr 13, 2023
Part of eclipse-theia#12328

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
tsmaeder added a commit that referenced this issue Apr 13, 2023
* Introduce dynamic tab resizing strategy

Part of #12328

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue Apr 13, 2023
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 <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue Apr 14, 2023
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 <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue Apr 20, 2023
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 <t.s.maeder@gmail.com>
tsmaeder added a commit to tsmaeder/theia that referenced this issue May 1, 2023
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 <t.s.maeder@gmail.com>
tsmaeder added a commit that referenced this issue May 2, 2023
Adds a drop down allowing to chose among open editors when there is too
little space to show all open tabs.

Part of #12328

Contributed on behalf of STMicroelectronics
@tsmaeder tsmaeder closed this as completed May 4, 2023
tsmaeder added a commit to tsmaeder/theia that referenced this issue May 23, 2023
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
proposal feature proposals (potential future features)
Projects
None yet
Development

No branches or pull requests

2 participants