FlatLAF improvements and new configuration properties #4335

eirikbakke · 2022-07-05T22:03:52Z

This PR is a follow-up to #4286 , adding visual improvements and new configuration options for FlatLAF. Before/after screenshots (open in separate tabs at 1:1 device pixel scaling to see details):

FlatLAF Dark

FlatLAF Light

Annotated changes

This PR (along with Neil's PR earlier today) replaces #3115 , except for the improvements relating to vertical alignment of tab labels, which I will put into a separate PR later. Much of the code here is adapted from improvements that were first merged into the Windows LAF.

Visual improvements, annotated in the screenshot above:

Align and connect borders between tabs and the container panel below, including on fractional HiDPI scalings (e.g. 150%). Some visual artifacts still exist, e.g. on 125% scaling, but they are less common, and not very visible.
Remove an unnecessary border around the editor area.
Make sure the "X" in editor tabs are closer to the label than to the separator line.
Add some top/bottom margin in the toolbar
On FlatLAF Dark, make the tab background color connect with the background of the Project/Files/Services and Navigator panes.
Slightly decrease the height of regular tab components (only by two pixels this time).

Other visual improvements:

On FlatLAF Dark and Light, make the tab hover effect more subtle. Avoid showing a hover effect on the already-selected tab. Use the blueish active tab area background as a base for this color, rather than plain gray.
Fix positioning of "spinner" icon in sidebar tabs (see illustration in PR 2967, which did the same on the Windows LAF).
Properly clip editor tab borders when tab is partially invisible due to tab scrolling.

New configuration settings for FlatLAF.properties

EditorTab.selectedBackgroundBottomGradient (Not used in the current theme, but was tested.)
Add ViewTab/EditorTab.unscaledBorders (Not used in the current FlatLAF theme, but is used in the Windows LAF.)
EditorTab/ViewTab.unselectedHoverBackground/unselectedHoverForeground (Tweaks in this PR make use of unselectedHoverBackground.)
ViewTab/EditorTab.showSelectedTabBorder (Used to explicitly enable borders around the selected tab.)

mbien · 2022-07-06T02:22:48Z

I moved the x a little bit around in gimp and I think it would look better if it would be centered (using the text as baseline) like in firefox (tab width is also a little bit smaller). What do you think?

eirikbakke · 2022-07-06T04:31:11Z

@mbien Yes! I will fix vertical alignment of the label and the "X" icon in a separate PR, after this one is merged.

(The vertical alignment code was part of #3115 , the remnants of which I'm now splitting up into two PRs for ease of reviewing.)

neilcsmith-net

Few comments. Generally great improvement!

platform/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/FlatDarkLaf.properties

platform/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/FlatLaf.properties

...m/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/ui/FlatEditorTabCellRenderer.java

...form/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/ui/FlatViewTabDisplayerUI.java

DevCharly

Great improvements 👍

Maybe editor tab padding needs some tweaking: space on right side of tab (between "x" and right tab edge) is much larger than on left side (between left tab edge and icon/text).

View tabs look ok.

Chris2011 · 2022-07-06T19:49:55Z

I dunno whether this was intended to be or a Windows specific thing but when I Minimize NetBeans to a specific size the space above the menu is somehow the same as below the menu. It seems that the menu is somehow vertical alignment in the center. Also the quick search has some space above and below. When I maximize it to full window the space above is gone and it looks like the menu and quick search is stuck on the top of the screen.

Not fully maximized

Maximized

I post this here, because I think that this was part of FlatLaF afaik and could be improved even a bit more. What do you think?

eirikbakke · 2022-07-06T22:27:52Z

@DevCharly Sure, I'll adjust editor tab left/right padding.

@Chris2011 I think this is FlatLAF trying to copy the native behavior on Windows 11. The title bar "hugs" the edge of the screen when you maximize the window.

DevCharly · 2022-07-06T23:47:03Z

@Chris2011 and @eirikbakke yes, this is FlatLaf trying to behave similar to Windows system title bar. If you disable FlatLaf title bar (Options > Appearance > FlatLaf > Window decorations"), then you can see similar behavior: the title bar height is smaller if window is maximized, which gives the main content a little bit more space.

I think this is Win32 API specific behavior.
Newer WinUI API apps (e.g. Windows 11 Explorer, Paint, etc) do not make title bar height smaller when maximized.

This behavior can be disabled by adding TitlePane.buttonMaximizedHeight = 0 to FlatLaf.properties.
Default value is 22. Not maximized title bar height is 30.

From my side, I'm fine with disabling this in NB.
(I am considering disabling this in a future version of FlatLaf)

Chris2011 · 2022-07-07T07:14:41Z

Thx for the info :).

eirikbakke · 2022-07-07T13:08:19Z

I added a commit with revisions as suggested. The visual changes are (1) left/right margin in editor tabs and (2) not drawing the extra thick grey bar on top of inactive tabs. (I know Neil didn't like the latter in an earlier revision, but perhaps it works now? Alternatively, at least the grey bar should be the same grey as the border.)

This time I'll do the screenshots at 200% HiDPI scaling (the previous ones were at 150%):

mbien

good changes/fixes

...form/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/ui/FlatViewTabDisplayerUI.java

neilcsmith-net · 2022-07-07T15:00:52Z

I know Neil didn't like the latter in an earlier revision, but perhaps it works now? Alternatively, at least the grey bar should be the same grey as the border.

Didn't like it then. Definitely don't like it now. You can't tell which sub-tab in the output window is selected! Making it the border colour would make sense to me.

You'll at least need to change the colour for inactive normal tabs if you keep this. See https://github.com/apache/netbeans/pull/4298/files#diff-666e203e64060709072a6a16658c102327d90ec9d256a91cc8b38b773b7c78acR31

eirikbakke · 2022-07-07T16:22:34Z

You can't tell which sub-tab in the output window is selected! Making it the border colour would make sense to me.

Oh, I didn't see that the output window was affected by that. Fixed!

neilcsmith-net · 2022-07-07T16:30:28Z

Thanks! Personally I would still prefer we kept the top line. You then have a visual representation of the selected tab hierarchy - when focused and when unfocused. Don't think this works as well, but up to you. Rest looks great.

eirikbakke · 2022-07-07T16:39:16Z

I think you can better see whether a tab is focused or not when the thick line only appears for the focused tabs. Plus, when the line is grey, it looks like it's a continuation of the border, and then it looks odd that it's not the same width as the borders it connects to.

If anyone else wants to vote for one or the other, let me know... see comparison below.

neilcsmith-net · 2022-07-07T16:57:58Z

My comment was specifically about seeing the selected tab in an unfocused region - same point as #4286 (comment)

Let's get this merged anyway. As said before, images don't always tell enough of the story. eg. the unfocused tab colours in the options window is a bit odd at the moment. Let's let people work with it for a bit. I'm sure we'll end up with a few UI tweaks up until release.

eirikbakke · 2022-07-07T17:12:52Z

@neilcsmith-net OK, will merge this PR in a bit, and we can do more tweaks in the future.

See the Pull Request for screenshots and links to related discussion/PRs. Visual improvements, annotated in screenshot in Pull Request: 1) Align and connect borders between tabs and the container panel below, including on fractional HiDPI scalings (e.g. 150%). Some visual artifacts still exist, e.g. on 125% scaling, but they are less common, and not very visible. 2) Remove an unnecessary border around the editor area. 3) Make sure the "X" in editor tabs are closer to the label than to the separator line. 4) Add some top/bottom margin in the toolbar 5) On FlatLAF Dark, make the tab background color connect with the background of the Project/Files/Services and Navigator panes. 6) Slightly decrease the height of regular tab components. Other visual improvements: * On FlatLAF Dark and Light, make the tab hover effect more subtle. Avoid showing a hover effect on the already-selected tab. Use the blueish active tab area background as a base for this color, rather than plain gray. * Fix positioning of "spinner" icon in sidebar tabs (see illustration in PR 2967, which did the same on the Windows LAF). * Properly clip editor tab borders when tab is partially invisible due to tab scrolling. New configuration settings for FlatLAF.properties * EditorTab.selectedBackgroundBottomGradient (Not used in the current theme, but was tested.) * Add ViewTab/EditorTab.unscaledBorders (Not used in the current FlatLAF theme, but is used in the Windows LAF.) * EditorTab/ViewTab.selectedHoverBackground/selectedHoverForeground (Tweaks in these commits make use of selectedHoverBackground.) * ViewTab/EditorTab.showSelectedTabBorder (Used to explicitly enable borders around the selected tab.)

eirikbakke · 2022-07-08T06:17:54Z

And here's the next PR in the series, which fixes the alignment of the "X" button: #4349

eirikbakke requested review from DevCharly and neilcsmith-net July 5, 2022 22:06

eirikbakke mentioned this pull request Jul 5, 2022

[NETBEANS-5928] Proposed improvements to FlatLAF tab components+borders/margins #3115

Closed

eirikbakke requested review from Chris2011 and mbien July 5, 2022 22:16

eirikbakke added Look and Feel UI User Interface labels Jul 5, 2022

neilcsmith-net reviewed Jul 6, 2022

View reviewed changes

DevCharly reviewed Jul 6, 2022

View reviewed changes

eirikbakke force-pushed the pr-flatlafconfig branch from 29aa8a1 to b4d2188 Compare July 7, 2022 13:01

mbien approved these changes Jul 7, 2022

View reviewed changes

...form/o.n.swing.laf.flatlaf/src/org/netbeans/swing/laf/flatlaf/ui/FlatViewTabDisplayerUI.java Outdated Show resolved Hide resolved

eirikbakke force-pushed the pr-flatlafconfig branch from b4d2188 to fa3d8d2 Compare July 7, 2022 16:25

neilcsmith-net approved these changes Jul 7, 2022

View reviewed changes

eirikbakke force-pushed the pr-flatlafconfig branch from c6ddc5e to 3437078 Compare July 8, 2022 02:02

eirikbakke merged commit 1e920a3 into apache:master Jul 8, 2022

neilcsmith-net added this to the NB15 milestone Jul 11, 2022

eirikbakke deleted the pr-flatlafconfig branch October 5, 2022 13:26

eirikbakke mentioned this pull request Dec 29, 2022

enable "sort document list by project" by default. #4948

Draft

FlatLAF improvements and new configuration properties #4335

FlatLAF improvements and new configuration properties #4335

Uh oh!

Conversation

eirikbakke commented Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

FlatLAF Dark

FlatLAF Light

Annotated changes

Uh oh!

mbien commented Jul 6, 2022

Uh oh!

eirikbakke commented Jul 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

neilcsmith-net left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DevCharly left a comment

Choose a reason for hiding this comment

Uh oh!

Chris2011 commented Jul 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eirikbakke commented Jul 6, 2022

Uh oh!

DevCharly commented Jul 6, 2022

Uh oh!

Chris2011 commented Jul 7, 2022

Uh oh!

eirikbakke commented Jul 7, 2022

Uh oh!

mbien left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

neilcsmith-net commented Jul 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eirikbakke commented Jul 7, 2022

Uh oh!

neilcsmith-net commented Jul 7, 2022

Uh oh!

eirikbakke commented Jul 7, 2022

Uh oh!

neilcsmith-net commented Jul 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eirikbakke commented Jul 7, 2022

Uh oh!

eirikbakke commented Jul 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

eirikbakke commented Jul 5, 2022 •

edited

Loading

eirikbakke commented Jul 6, 2022 •

edited

Loading

Chris2011 commented Jul 6, 2022 •

edited

Loading

neilcsmith-net commented Jul 7, 2022 •

edited

Loading

neilcsmith-net commented Jul 7, 2022 •

edited

Loading