Add pinned tab button (icon) control setting by n-gist · Pull Request #196896 · microsoft/vscode · GitHub
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

Add pinned tab button (icon) control setting #196896

Merged
merged 5 commits into from
Oct 31, 2023
Merged

Add pinned tab button (icon) control setting #196896

merged 5 commits into from
Oct 31, 2023

Conversation

n-gist
Copy link
Contributor

@n-gist n-gist commented Oct 28, 2023

Adds a setting to control pinned tab button:
workbench.editor.pinnedTabButton = 'left' | 'right' | 'off'
Which works the same way as workbench.editor.tabCloseButton = 'left' | 'right' | 'off' does

Current behavior

When the tab is pinned, its close button gets replaced with pin icon button, and workbench.editor.tabCloseButton partially loses its functionality over it (it still controls button left/right position, but 'off' option is not applied).

Why was this necessary

Since now we have ability to display pinned tabs on a separate row by using workbench.editor.pinnedTabsOnSeparateRow, I missed the opportunity to hide pin icon to make the tabs from both rows aligned to each other:
pinnedIcon

How it can be used

  1. Aligned tab widths especially useful when working on files with identical names, when workbench.editor.tabSizing = fixed is not as good due to various or short name lengths.
    a) In my case, the pinned files contain the code of the base classes, and on second row are the files from different folders, containing classes inherited from pinned ones. It’s very convenient if the corresponding tabs are located strictly above each other.
    b) You may be working on a set of a files with different versions.
  2. To conserve the space when a lot of tabs pinned.
  3. To remove visual clutter, since the icons doesn't give additional information when pinned tabs are on separate row.
  4. Someone may find suitable when pin and close buttons are on different sides:
    variants

Additional info for reviewing the change.

  1. I have removed some exceptions from styles, since sticky (pinned) tab button (icon) visibility is now controlled same way as visibility of close button, by its own setting. Without this, widths of pinned and regular tabs was not matching when some of settings combinations used. Pinned and regular tabs widths should be identical when workbench.editor.pinnedTabSizing = 'normal'. I think I have played enough with different setups, but may need fresh view.
    Settings combinations I have been testing are from:
    window.density.editorTabHeight
    workbench.editor.pinnedTabsOnSeparateRow
    workbench.editor.tabSizing
    workbench.editor.pinnedTabSizing
    workbench.editor.tabCloseButton
    workbench.editor.pinnedTabButton
    Any other settings I need to test on?
  2. Perhaps the setting needs a different name? Check the description for English also, but I just edited after copying it from workbench.editor.tabCloseButton.

@benibenj
Copy link
Contributor

Thanks for the PR, we were considering doing something in this direction so this helps a lot! There is one main thing missing. Some people don't want the pinned tab button on the top row but still want to have the close button. This is currently not possible with this change. I suggest when the user picks workbench.editor.pinnedTabButton: off to fall back to a close button in that case. I made some small fixes and changed the setting name to align with the naming of tabCloseButton

@benibenj
Copy link
Contributor

I suggest to change this a bit. I don't see the beneefit of having close action right and unpin action left. Introducing this will also break the current users settings when updating. I suggest to have the following settings:

  • tabActionLocation: ['left', 'right']
  • tabActionCloseVisibility: boolean
  • tabActionUnpinVisibility: boolean

tabActionLocation defines the location of the actions on the tabs. If a tab is pinned and tabActionUnpinVisibility is set to false, we show the close action as long as tabActionCloseVisibility is set to true, otherwise we don't show it. This will also allow the migration of the settings to be easier and not break the users logic.

What do you think @n-gist ? Are you up to makeing the change? I can give you some pointers if you need help, otherwise I can make the change if you wish.

@n-gist
Copy link
Contributor Author

n-gist commented Oct 30, 2023

@benibenj

However, removing the unpin action when the user only has one tab bar can become very confusing as there is no more indication that a tab is pinned.

Was thinking about that too, but since default options are 'right', I thought that the one who sets it to 'off' undestands that he hides pin icon even on combined bar. Also was thinking about making pin button 'off' not working on combined row by default, and adding a separate setting like 'hide pin icon if its option is set to off, even when pinned tabs are on one row with regular tabs'. But this would add disambiguity to tabUnpinButton option.

There is one main thing missing. Some people don't want the pinned tab button on the top row but still want to have the close button.

I have tested your change, I like how it works. Solves my issue, and adds even more flexibility.

I suggest to change this a bit. I don't see the beneefit of having close action right and unpin action left.

True, the number of people willing to use it is most likely too small.

I suggest to have the following settings:

  • tabActionLocation: ['left', 'right']
  • tabActionCloseVisibility: boolean
  • tabActionUnpinVisibility: boolean

Something like that I thought when saw the code to edit. There should be general functionality over both actions. But one of questions about that is, should the tab action be single? Will there be other actions for tabs in the future, where more than one should be displayed and controlled separately?

Yeah I can try to implement this.
I just checked some code about that, and I think we can make intermediate class between CloseOneEditorAction/UnpinEditorAction casses and Action class for tab actions, to add a visibility property inside it. Is it worth doing? Any other action classes should inherit form it also?

@n-gist
Copy link
Contributor Author

n-gist commented Oct 30, 2023

Made the changes. Second commit (Mount...) is about generalizing things for tab actions by making TabAction class for it. May need renaming etc. Maybe it is possible to get options object without passing it to Visibility method? I'm not familiar with the code to figure it out on my own. Can be reverted if not needed.

Another thing I thought is - what if someone wants to have close buttons on regular tabs, but no close buttons on pinned ones? Having no close button on them kinda protects them a bit from accident closing by missclicks. This may still force us to add another setting for that if there is no better ideas.

@n-gist n-gist requested a review from benibenj October 30, 2023 18:08
@n-gist
Copy link
Contributor Author

n-gist commented Oct 30, 2023

There is an idea to avoid adding a separate setting for this - make the visibility settings as follows, instead of boolean ones:
tabActionCloseVisibility = 'always' | 'unpinned' | 'pinned' | 'off'
tabActionUnpinVisibility = 'always' | 'unpinned' | 'pinned' | 'off'

@n-gist
Copy link
Contributor Author

n-gist commented Oct 31, 2023

To be more correct.

  1. There is no 'unpinned' state for unpin action, but it have a difference whether the pinned tabs are on separate row.
  2. I think intermediate class is now important, because if we go this way, the visibility code will be a little more complex. Good to have it not in the redrawTab function, but in a separate place.
    tabActionCloseVisibility = 'always' | 'unpinned' | 'pinned' | 'off'
    tabActionUnpinVisibility = 'always' | 'normalRow' | 'separateRow' | 'off'
  3. I also was thinking about that close button have additional state, when it is pinned AND on separate row. But still, it seems to me that the user wants to control its visibility only based on the pinned status, it makes no difference whether the row is separated for close button. This would also require making the visibility settings as flags rather than strings. I don't think this is necessary.

@benibenj
Copy link
Contributor

I did a bit of refactoring and added settings migration which makes sure that users which used the old setting get the correct new settings. Otherwise it looks great. I think the way it works now is simple enough for everyone to understand and solves all the problems that users want to fix. We have one month before this will be released to stable, giving us enough time to see what people think about it.

@benibenj benibenj enabled auto-merge (squash) October 31, 2023 08:01
@vscodenpa vscodenpa added this to the November 2023 milestone Oct 31, 2023
@benibenj benibenj merged commit 5240f72 into microsoft:main Oct 31, 2023
6 checks passed
@github-actions github-actions bot locked and limited conversation to collaborators Dec 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants