Improve UI Indication for Unsaved Changes in Tabs #1632

schneidermic0 · 2024-12-02T19:54:06Z

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 eclipse-platform/eclipse.platform.ui#2568 are required, too. However, this change can be merged first.

Tabs render dirty parts by showing a `*` in front of the tab name (e.g., in front of the file name. This information is hard to see by developers. This change introduces a graphical indicator on the close button to highlight dirty (unsaved) changes.

schneidermic0 · 2024-12-02T19:59:29Z

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 · 2024-12-02T20:13:10Z

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 · 2024-12-02T20:27:24Z

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 ff3d557. ± Comparison against base commit 2ce8542.

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
…

♻️ This comment has been updated with latest results.

iloveeclipse · 2024-12-02T20:45:32Z

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.

iloveeclipse · 2024-12-02T21:21:45Z

...eclipse.swt/Eclipse SWT Custom Widgets/common/org/eclipse/swt/custom/CTabFolderRenderer.java

@@ -877,44 +877,58 @@ void drawBody(GC gc, Rectangle bounds, int state) {
 		}
 	}

-	void drawClose(GC gc, Rectangle closeRect, int closeImageState) {
+	void drawClose(GC gc, Rectangle closeRect, int closeImageState, boolean showDirtyIndicator) {


I wonder if this code, and, in general, tab presentation (font style, color, text decoration, borders, close icon) could be delegated to a new callback interface that, if the callback is not set, would by default use current SWT implementation, and if set, would give the callback full control of the tab visuals.
This way SWT could keep its code independent of the application needs and application (like workbench renderers) could implement whatever possible.

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've had that in my Extended VS Presentation plugin for Eclipse 3.x many years ago before e4 killed Presentation API.
That's of course much more as proposal here, but it shouldbe doable and it would allow 3rd parties to decide whether they want close buttons turned into circles or disappear completely or just stay "old good" black crosses etc.

See https://web.archive.org/web/20170702182707/http://andrei.gmxhome.de/skins/examples.html

BeckerWdf · 2024-12-03T08:01:34Z

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 · 2024-12-03T09:14:15Z

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 · 2024-12-03T12:59:09Z

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 · 2024-12-03T13:01:41Z

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 · 2024-12-03T13:05:02Z

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 · 2024-12-03T13:06:16Z

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 · 2024-12-03T13:08:56Z

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 · 2024-12-03T13:14:08Z

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 · 2024-12-04T16:53:42Z

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 · 2024-12-04T18:20:17Z

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

HannesWell · 2024-12-07T00:15:39Z

@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 · 2024-12-07T09:33:10Z

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 · 2024-12-09T07:39:39Z

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

schneidermic0 · 2024-12-09T07:44:49Z

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 · 2024-12-09T07:48:31Z

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?

schneidermic0 added 2 commits December 2, 2024 18:21

Change rendering of dirty indicator in tabs - using a square on close

cf16e80

schneidermic0 changed the title ~~Feature/new dirty indicator bullet~~ Improve UI Indication for Unsaved Changes in Tabs Dec 2, 2024

schneidermic0 mentioned this pull request Dec 2, 2024

Improve UI Indication for Unsaved Changes in Tabs eclipse-platform/eclipse.platform.ui#2568

Draft

1 task

Add javadoc (including @SInCE tag) to new API methods

8c45f7c

Add javadoc (including @SInCE tag) to new API methods

ff3d557

iloveeclipse reviewed Dec 2, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve UI Indication for Unsaved Changes in Tabs #1632

Improve UI Indication for Unsaved Changes in Tabs #1632

schneidermic0 commented Dec 2, 2024 •

edited

Loading

schneidermic0 commented Dec 2, 2024

vogella commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

iloveeclipse commented Dec 2, 2024

iloveeclipse Dec 2, 2024

iloveeclipse Dec 2, 2024

BeckerWdf commented Dec 3, 2024

vogella commented Dec 3, 2024

schneidermic0 commented Dec 3, 2024

laeubi commented Dec 3, 2024 •

edited

Loading

iloveeclipse commented Dec 3, 2024

laeubi commented Dec 3, 2024

iloveeclipse commented Dec 3, 2024

BeckerWdf commented Dec 3, 2024

schneidermic0 commented Dec 4, 2024

vogella commented Dec 4, 2024

HannesWell commented Dec 7, 2024

mickaelistria commented Dec 7, 2024

schneidermic0 commented Dec 9, 2024

schneidermic0 commented Dec 9, 2024

schneidermic0 commented Dec 9, 2024

Improve UI Indication for Unsaved Changes in Tabs #1632

Are you sure you want to change the base?

Improve UI Indication for Unsaved Changes in Tabs #1632

Conversation

schneidermic0 commented Dec 2, 2024 • edited Loading

schneidermic0 commented Dec 2, 2024

vogella commented Dec 2, 2024 • edited Loading

github-actions bot commented Dec 2, 2024 • edited Loading

Test Results

iloveeclipse commented Dec 2, 2024

iloveeclipse Dec 2, 2024

Choose a reason for hiding this comment

iloveeclipse Dec 2, 2024

Choose a reason for hiding this comment

BeckerWdf commented Dec 3, 2024

vogella commented Dec 3, 2024

schneidermic0 commented Dec 3, 2024

laeubi commented Dec 3, 2024 • edited Loading

iloveeclipse commented Dec 3, 2024

laeubi commented Dec 3, 2024

iloveeclipse commented Dec 3, 2024

BeckerWdf commented Dec 3, 2024

schneidermic0 commented Dec 4, 2024

vogella commented Dec 4, 2024

HannesWell commented Dec 7, 2024

mickaelistria commented Dec 7, 2024

schneidermic0 commented Dec 9, 2024

schneidermic0 commented Dec 9, 2024

schneidermic0 commented Dec 9, 2024

schneidermic0 commented Dec 2, 2024 •

edited

Loading

vogella commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

laeubi commented Dec 3, 2024 •

edited

Loading