Improve UI Indication for Unsaved Changes in Tabs

[schneidermic0]

Before this change: If a part is dirty (has unsaved changes), this will be indicated by an * in front of a tab's name.

With this change, the * is removed and dirty parts are indicated by a bullet at the location of closing a tab. As soon as, the bullet is hovered, the "button" to close the tab is shown.

Furthermore, the rendering of the close button of tabs is lightly changed.

Examples

Tabs unchanged:

Tabs unchanged (hovered):

Tab "Test.java" (dirty; selected):

Tab "Test.java" (dirty; not selected):

Tab "Test.java" (dirty; hovered)

Complete flow:

To enable this behavior, changes in PR https://github.com/eclipse-platform/eclipse.platform.ui/pull/2568 are required, too. However, this change can be merged first.

[schneidermic0]

Hi,

I have opened this PR as draft, because I want to get your opinion on this change. The code can be improved at several places and current implementation has some shortcomings that need to be improved as soon as this approach shall be taken up.

Existing gaps (as of now):

• [ ] Dirty indicator is not moved to not, yet opened tab (i.e, if there are two tabs of the same file)
• [ ] In the tab overview and editor selection (Ctrl+E), dirty editors are still marked with *

[vogella]

Looks awesome to me, thanks. The * is outside Eclipse not well understood as "I need saving". By modifying the close button in case of an editor which need saving we clearly indicate that close is not different. Other editors like VScode use the same approach.

[github-actions[bot]]

Test Results

80 files   -    403  80 suites   - 403   2s ⏱️ - 8m 37s 34 tests  -  4 061  34 ✅  -  4 051  0 💤  -  7  0 ❌  - 3  34 runs   - 16 139  34 ✅  - 16 046  0 💤  - 90  0 ❌  - 3 

Results for commit ff3d557d. ± Comparison against base commit 2ce8542b.

This pull request removes 4061 tests.

org.eclipse.swt.graphics.ImageWin32Tests ‑ testImageShouldHaveDimesionAsPerZoomLevel
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleDownFloat
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleDownFloatArray
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleDownInteger
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleDownPoint
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleDownRectangle
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleUpFloat
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleUpIntArray
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleUpInteger
org.eclipse.swt.tests.junit.DPIUtilTests ‑ scaleUpPoint
…

:recycle: This comment has been updated with latest results.

[iloveeclipse]

Other editors like VScode use the same approach

Could you attach some screenshots from "other" editors? I haven't seen yet something like proposed here.

[BeckerWdf]

Hi,

I have opened this PR as draft, because I want to get your opinion on this change. The code can be improved at several places and current implementation has some shortcomings that need to be improved as soon as this approach shall be taken up.

Existing gaps (as of now):

• [ ] Dirty indicator is not moved to not, yet opened tab (i.e, if there are two tabs of the same file)
• [ ] In the tab overview and editor selection (Ctrl+E), dirty editors are still marked with *

What about tabs of multi-page editors as e.g. the plugin.xml editor?

[vogella]

Other editors like VScode use the same approach

Could you attach some screenshots from "other" editors? I haven't seen yet something like proposed here.

[schneidermic0]

What about tabs of multi-page editors as e.g. the plugin.xml editor?

In my IDE, the tabs of multi-page editors (e.g. MANIFEST.MF) don't show an indicator.

@BeckerWdf I believe you know the *-indicators in tabs of multi-page editors in ABAP development tools. These need to be addressed separately.

[laeubi]

Looks awesome to me, thanks. The * is outside Eclipse not well understood as "I need saving".

I think this is maybe a biased opinion, at least on Debian / Gnome this is common and "well understood" (at least by me)

Notepad++ (windows) uses a red icon

So as always there is not the one-and-only truth ;-)

I personally would like to see dirty tabs in bold red font and I don't want to see close buttons at all to save space.

I think one should be able to change this via CSS styling.

[iloveeclipse]

Can't one change this via CSS styling.

Yes, but I don't also like native widgets to be additionally styled by e4 css for multiple reasons.

[laeubi]

Can't one change this via CSS styling.

Yes, but I don't also like native widgets to be additionally styled by e4 css for multiple reasons.

CTabFolder is not a native widget ;-)

[iloveeclipse]

CTabFolder is not a native widget ;-)

But the rest of the UI is, and you can't have only tabs styled as of today.

[BeckerWdf]

what I like with the proposed change is that the black circle is much bigger then the little tiny "*" we use today. And also the width of the tab is not changing when the editor is dirty so it does not "flicker".

[schneidermic0]

Thank you for the feedback so far. I've noticed some positive responses, but I’m uncertain about the rest. Should I proceed with improving this PR, or do we need more input from the community first?

I can work on it when I find some time alongside my other tasks.

[vogella]

@HannesWell and @akurtakov please bring this to the PMC and decide if this is desired

[HannesWell]

@HannesWell and @akurtakov please bring this to the PMC and decide if this is desired

We have discussed this topic in the open dev-call on Thursday: https://github.com/eclipse-platform/eclipse.platform.releng.aggregator/wiki/Eclipse-IDE-%E2%80%90-Developers-Community-Call#06th-december-2024

In general the feedback was that avoiding resizing is nice, but the exact 'dirty' symbol might not be liked by everyone and maybe alternatives could be considered. Furthermore the old and new behavior would ideally be configurable in a preference.

[mickaelistria]

what I like with the proposed change is that the black circle is much bigger then the little tiny "*" we use today.

For that particular part, just using another character such as ● or even ✏️ char instead of * could do the job; or maybe even keeping the * but making it bold. I personally like emojis as they are very expressive and are undertood more easily; the drawback is that there is a trend of color-less and fade icons while emojis tend to be the opposite.

And also the width of the tab is not changing when the editor is dirty so it does not "flicker".

I also find it interesting. However it is un

Another possibility that would fit both could be an overlay on the editor icon of the tab, but it might be more complex to implement.

[schneidermic0]

@HannesWell Thanks for the update. Next step: I will add a preference so that users can enable the new behavior.

[schneidermic0]

For that particular part, just using another character such as ● or even ✏️ char instead of * could do the job; or maybe even keeping the * but making it bold. I personally like emojis as they are very expressive and are undertood more easily; the drawback is that there is a trend of color-less and fade icons while emojis tend to be the opposite.

Actually, using an emoji was my first attempt. Unfortunately this changed the size of the tab much more than the *. Therefore, I tried it with the change I proposed with this PR.

[schneidermic0]

And also the width of the tab is not changing when the editor is dirty so it does not "flicker".

I also find it interesting. However it is un

@mickaelistria I guess there is something missing in your comment, isn't it?

[mickaelistria]

However it is un @mickaelistria I guess there is something missing in your comment, isn't it?

If I remember correctly, I had written something that I didn't find relevant and then tried to remove it. So it's more that that there is something too much in my former comment. You can ignore that.

[HeikoKlare]

I support the attempt of improving the indicator for unsaved documents. It is easy to miss the current indicator. So for me, it would be more about the goal of visibility than about tab header resizing, but it makes sense to combine the two of them, so any replacement should be one that does not change sizes.

I have no strong opinion on the actual solution to take. I would expect best visibility in a recolored icon (like the ones in Notepad++), but it will probably be hard to find a generic recoloring algorithm for any possible icon. Did you consider using some highlight indicator (like for the currently selected tab) to indicate unsaved tabs? Something like this:

[BeckerWdf]

Did you consider using some highlight indicator (like for the currently selected tab) to indicate unsaved tabs? Something like this:

I would not use the same indicator (location) for different stuff (active/inactive vs. saved/unsaved). Indicators that only differ in color would also be an issue for color blind people.

[HeikoKlare]

I would not use the same indicator (location) for different stuff (active/inactive vs. saved/unsaved). Indicators that only differ in color would also be an issue for color blind people.

Indeed, thank you for pointing that out. That also makes recoloring of icons an inappropriate solution.

[schneidermic0]

Just a heads-up for transparency: I haven't been finding time to work on this PR lately. I had hoped to continue working on it this afternoon, but other things popped up that needed my attention.

I still want to work on these changes, but I expect it will take a while until this PR is finished. Thanks for being patient with me.

[vogella]

@schneidermic0 any news?

[schneidermic0]

Sorry, no real progress here from my side. :(

I am afraid I don't expect to find time in the near future to continue. Shall I close this PR? Is there anybody who want to take this topic up?

[vogella]

Please let it open, the new indicator would be really nice. I might send Claude or Gemini to help with this PR in the future.