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
Alter FlatLaf tab colouring to address focus visibility. #4286
Conversation
This is good! A few proposed adjustments:
|
Thanks for taking a look @eirikbakke I had already tried 1&3, but have revised.
|
Thanks for the latest tweaks!
|
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am happy that the line is on top so +1 from me.
pretty interesting that this all is done just by editing properties. Like CSS in a HashMap.
@Chris2011 thanks. Should be fixed, and work like before if a different selected background colour not set. Please try.
@mbien yes, there's a wealth of stuff that can be styled by properties in a CSS fashion, as well as useful style functions - see https://www.formdev.com/flatlaf/properties-files/ Next steps might be - open some of that up so users can easily configure / create themes, and possibly look at the additional properties that are available for tabs upstream that our displayers don't support. |
...form/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/ui/FlatViewTabDisplayerUI.java
Outdated
Show resolved
Hide resolved
I think this is strictly an improvement upon the status quo, so I'll say go ahead and merge once the index check is added if needed. I'll probably go back to #3115 and split out some smaller, uncontroversial PRs, to add the various configuration properties that were necessary to support bordered tabs (even if we don't use them in the default theme). |
Thanks @eirikbakke Options for border and sizing would be really good. There's also a bunch of other configuration options in upstream FlatTabbedPaneUI that might be worth considering? |
f12fa42
to
d6fde0c
Compare
@neilcsmith-net Initially I just want to make sure that all the different variations can be supported by setting keys in FlatLAF.properties, e.g. by adding the properties needed to support borders. Making it easier to override FlatLAF.properties (without having to compile anything) might be good, though. |
OK, squashed and updated. Will leave CI to do its thing. I'll merge in a couple of days if no-one gets there first or wants to add to conversation. |
as general note: (gh actions are configured to do this automatically, i just did this for this PR since travis is in slow mode again and a lot was in queue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like the light variant, but I'm not sure about the dark variant...
In the light theme, the color of the tab areas (red arrows in below screenshot) is clearly different to the background colors of surrounding components (green arrows), which makes the tab areas stand out. The selected tabs (blue arrows) are easy to recognize.
But in the dark theme, the inactive tab areas (red arrows in below screenshot) use background color that is very similar to surrounding components (green arrows), which makes the tab areas go under (e.g. on left side of below screenshot). The selected tabs (blue arrows) are not that easy to recognize as in the light theme IMHO. The active tabs area looks good.
I actually liked the darker "tab areas" on the screenshot in the first post better. Why did you switch to lighter tab areas?
BTW please also test the Multi-Tabs implementation (see PR #1865). |
i was using this with the dark theme a few hours, here some observations:
|
Yeah, tabs in tabs are also a pattern that I don't like and hard to achieve from a design perspective. Just wanted to ask, thx for the clarification :) |
Yes, I think this is good!
That's fine; the editor background is not adjacent to the tab background. As commented in-code, you can also drop the separator line after the last tab:
Wait, why did this grey line on top of the active-but-unfocused tab pop back in? See my earlier comment about blue and grey being indistinguishable in peripheral vision. |
@mbien I agree that this is a problem. Again, @neilcsmith-net it would be solved by making the split pane handles the same background color as the tab background. That's how it's done in both the Windows and the Aqua LAFs: Neil's objection was: "So having the dividers the same colour as the toolbar and status bar makes sense unless we add yet another colour." (EDIT:) I think this was a misunderstanding; I was not proposing to make it the same color as the toolbar, but the same color as inactive unfocused tabs, like this (Photoshop mockup): |
@eirikbakke yes, think you're right on the split pane handles. Sorry, wrong call! Aqua has different colour for view tabs background and split pane handles here though, which is what I was on about. This would also be helped by integrating your border fix, which would allow option of bringing borders back. Also agree on right tab separator. Still disagree on removing unfocused line, particularly with FlatLaf update allowing inner tabs to sync on focus. Also not sure about changing the line colour unless you're proposing changing the accent colour? |
Oh yeah, now I understand. That is indeed unnecessary!
OK, I will experiment in a later PR after this one is merged.
OK, as long as it's an intentional choice.
I guess, yes. It was just an opportunity to make the focus indication a little brighter. Not too important though. |
@eirikbakke not sure whether those thick borders look good. Especially the vertical ones. Maybe we should consider extending Some years ago I wrote an article on how to do this with Then it could look like this (red arrows mark thin dividers): |
Having now tried it, I agree with @DevCharly - the thick border appears too much. Pending a change like the above, I've reverted the border colours back to how they originally were, and added a fix to remove the extra top border from editor tab tabs. I've also added side borders when "underline" is at top. If border colours are set to Added code to remove last separator (which for editor tabs is from @eirikbakke ), and lowered the contrast of the unfocused tab underline a little, too. Possibly final images (again) 😆 - |
...m/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/ui/FlatEditorTabCellRenderer.java
Show resolved
Hide resolved
If we're going to start drawing borders around tabs, then we'll need the improvements from #3115 , to introduce configuration properties from these and to make sure the borders line up on HiDPI screens and so on. Perhaps this PR could be limited to things that can be improved with changes in FlatLAF.properties only, or changes compatible with #3115 ? This will be a big help when I later try to integrate the work from the latter. The latest screenshots once again has the problem of the split pane area not having the same background as the inactive tab background. Mocked-up fix:
Yes, this could be a good improvement! If we did this, we could also get rid of the 4px border at the edge of the window (which would fix e.g. the Fitt's law issue described at ultorg/public_issues#11 ). But that would be for a future PR. |
As I said, split pane colour not changed but border put back based on @DevCharly comment which I agree with having tried it. |
@neilcsmith-net Wait, you don't think the lower part of https://user-images.githubusercontent.com/886243/176727415-beb3faed-755d-4e33-93bc-8b36d61cfe48.png looks better? |
@eirikbakke honestly, no. Having tried it in its full context, I don't like the bleed of the tab background colour. And with the content borders going back to how they were it's not needed to differentiate regions either. |
Alright, you can leave it at whichever overall solution you find most harmonious. If we end up making thin draggable sliders later, it will require some of these things to be redesigned in any case. |
…sues. Improve colour contrast between tabs and background. Move accent colour (underline) to top of tabs and extend border up tab sides. Make view tabs active / selected behaviour same as editor tabs. Don't paint view tab separators around selected tab when different selected background colour set.
04e1563
to
d6dcd69
Compare
Squashed everything again. Ready to merge when green from my perspective. @eirikbakke thanks. The main reason it came up here at all was the need originally to hide the content borders to make overline and contiguous tab content work. Given other issues that raised and lack of consensus on how to fix, reverting to existing borders and limiting this PR solely to the tab regions (inc. minimal fixes to render correctly) made more sense. I also changed my mind working with it - things sometimes seem right in a static screenshot, but not in use. |
I did a build with this patch and #4298. Before/after screenshots on my Windows 11 laptop at 150% DPI scaling: I'm fine with merging this! |
ExperimentInspired by discussion in #3115 to see if concerns can be addressed (mostly) by colour changes rather than changing away from the existing flat design.Improve colour contrast between tabs and background.
Move accent colour (underline) to top of tabs.
Make view tabs active / selected behaviour same as editor tabs.
NB. Latest revised images at #4286 (comment)