Fix tab control flickering in dark theme #9049

NikolayXHD · 2021-04-04T21:41:13Z

Fixes

tab control flickering introduced by #8815

screenshot

Proposed change

as discussed #8841 (comment)

Revert Fix tab control border in high dpi #8815
Fix high DPI issues in the code which renders TabControl manually.

Screenshots

Test methodology

manually

Test environment(s)

Windows 10
UI scale 150%

✒️ I contribute this code under The Developer Certificate of Origin.

GitExtUtils/GitUI/Theming/TabControlPaintContext.cs

RussKie · 2021-04-05T13:33:28Z

GitExtUtils/GitUI/Theming/TabControlPaintContext.cs

+            var outerRect = GetOuterTabRect(index);
+            _graphics.FillRectangle(GetBackgroundBrush(index), outerRect);
+
+            var points = new List<Point>(4);


stackalloc Point[4]?

related, nit pick (generic)
We have used explicit types and C#9 new()
https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-9#fit-and-finish-features

List<Point> points = new(4);

stackalloc Point[4]

can't do, the actual size is 2-4 depending on index

List<Point> points = new(4);

ok

RussKie · 2021-04-05T13:37:13Z

/cc: @mdonatas

mdonatas · 2021-04-05T20:28:20Z

The flickering is gone 👍 but something felt wrong so I tried an older build.

This PR:

Some build from 3.3 days I had at hand:

In 3.3 days the top border would get the color of the active tab.. I think that's the reason something seemed of with tabs in this PR.
Alternatively in 3.3 there might've been no borders.. since their color is same as surrounding background it's hard to tell.

gerhardol

+1
Run fine with 150%, 200% (no restart though). I do not really see the problem also without this change though.
I normally only use 100% myself, so I do not encounter these issues in normal usage.
I tried to look at border values etc for a few situations, looked fine to me.

GitExtUtils/GitUI/Theming/TabControlPaintContext.cs

NikolayXHD · 2021-04-05T22:23:27Z

The flickering is gone but something felt wrong so I tried an older build.

This PR:

Some build from 3.3 days I had at hand:

changed hot tracked tab color in review commit

mdonatas · 2021-04-06T07:48:32Z

Watch the bottom border of the tab button, it changes color on/after mouse over so the buttons that had been mouse-overed have a different bottom border color than those that haven't.

See that the one that hasn't been hovered has a white bottom border.

NikolayXHD · 2021-04-06T21:07:55Z

Watch the bottom border of the tab button, it changes color on/after mouse over so the buttons that had been mouse-overed have a different bottom border color than those that haven't.

See that the one that hasn't been hovered has a white bottom border.

@mdonatas Looks to me the visual artifact happens with "Use system default visual style" flag enabled.
I can tell it from the shape of scrollbar arrow, which makes appearance in the gif for a brief moment.
Correct me if I am wrong about that.

With that flag it's the system drawing the tab control, our (my) code has nothing to do with this.

gitextensions/GitExtUtils/GitUI/Theming/ThemeFix.cs

Line 23 in dc4734a

if (ThemeSettings.UseSystemVisualStyle)

Also, I cannot reproduce it. Tried with 150%, 175% DPI, there was no gray 1px line below tabs. Probably it requires 200% DPI, which Windows display settings does not allow me to choose.

175% DPI, "Use system default visual style" flag off. No grey 1x line below tabs.

mdonatas · 2021-04-07T08:55:06Z

Edit: In both master and this PR builds I have "Use system default visual style" disabled.
Edit2: I have no idea why that chevron on a scrollbar looked like system painted it but I can repro all the same behavior in that gif with custom painted chevron (that is with this setting turned off).

In any case, I have three builds
Older 3.3 (the arrow is different here but there was no "Use system default visual style" setting back then)

Flickery master

This PR (notice scrollbar arrow/chevron)

And only in this PR is there an underline in places where it should not be... so maybe it's not your code but it's because of the changes made in this PR.

One other thing, Console tab is the only that doesn't change color when activated... weird

mdonatas · 2021-04-07T09:21:50Z

Hmm... ok, so there is something related to this Console tab as it the only one which gets different active color and paints the area beneath it with it. If I don't touch it then there are no artifacts.

Also same here with 175% DPI, couldn't reproduce this underline.

mdonatas · 2021-04-07T09:27:59Z

Uuuu.... thanks for showing me this Use system default visual style setting! GE looks better with it!
Look at the tabs! Console tab has correct color and no underline.

A blue hover color is back!

And this area in the toolbars looks way better!
This looked like a mess

This looks a little bit less like a mess :D

Update: To be fair, some things do look better with this setting turned off i.e. hover color of toolbar buttons and menu items.

Would it be wrong to argue that unless a user wants black theme color we should have this setting on by default?

NikolayXHD · 2021-04-07T11:37:23Z

Would it be wrong to argue that unless a user wants black theme color we should have this setting on by default?

Right, and it matches what current behavior does.

When user selects "default" theme from the list, "Use system defined visual style" checkbox is disabled, controls are rendered by operating system. If OS is dark, GE is dark and vice versa.

With non-default theme "Use system defined visual style" is unchecked and becomes editable. This is because we need to render colors different from current OS theme.

mdonatas · 2021-04-08T11:19:38Z

Right, and it matches what current behavior does.

Oh, sorry, I didn't notice that.

Can you reproduce Console tab being of a different color when active than any other tab? I think that might be a clue for why there is an underline when it's activated.

gerhardol · 2021-04-10T16:14:10Z

I suggest this is merged as is both in master and 3.5 and further discussions are handled separately.
The remaining visual glitches are minor (if I have to look this hard for them they I personally do not care at all, but others are welcome to have other opinions).
Open a new issue instead.

NikolayXHD · 2021-04-10T19:50:48Z

I plan to look at this tomorrow. If I can't fix it tomorrow, i'll do as @gerhardol suggests, merge this and separate the remnant to another issue.

RussKie · 2021-04-10T23:15:12Z

👍

NikolayXHD · 2021-04-12T23:47:01Z

Can you reproduce Console tab being of a different color when active than any other tab? I think that might be a clue for why there is an underline when it's activated.

@mdonatas what you said turns right, it was enough to make console tab render the same background color, to get rid of the artifact.

RussKie

Thank you

Squash and merge

mdonatas · 2021-04-13T04:30:07Z

Great! Thanks @NikolayXHD

NikolayXHD requested review from RussKie and gerhardol April 4, 2021 21:41

ghost assigned NikolayXHD Apr 4, 2021

RussKie reviewed Apr 5, 2021

View reviewed changes

GitExtUtils/GitUI/Theming/TabControlPaintContext.cs Show resolved Hide resolved

RussKie reviewed Apr 5, 2021

View reviewed changes

RussKie requested a review from a user April 5, 2021 13:36

RussKie added this to the 3.5 milestone Apr 5, 2021

gerhardol reviewed Apr 5, 2021

View reviewed changes

GitExtUtils/GitUI/Theming/TabControlPaintContext.cs Show resolved Hide resolved

NikolayXHD requested a review from RussKie April 5, 2021 22:25

NikolayXHD added 5 commits April 13, 2021 02:06

Revert "Fix tab control border in high dpi (#8815)"

b2fcc31

fix tab control rendering issues with high dpi

517b375

review

be90bd0

fix inconsistent tab / tab page background color

0c39463

fix inconsistent selected tab header size in 200% DPI

74cab7f

RussKie approved these changes Apr 13, 2021

View reviewed changes

NikolayXHD merged commit 1783b48 into gitextensions:master Apr 13, 2021

ghost modified the milestones: 3.5, 3.6 Apr 13, 2021

NikolayXHD mentioned this pull request Apr 13, 2021

Fix tab control flickering in dark theme #9067

Merged

NikolayXHD added a commit that referenced this pull request Apr 14, 2021

Fix tab control flickering in dark theme (#9049) (#9067)

41c3110

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix tab control flickering in dark theme #9049

Fix tab control flickering in dark theme #9049

NikolayXHD commented Apr 4, 2021

RussKie Apr 5, 2021

gerhardol Apr 5, 2021 •

edited

NikolayXHD Apr 5, 2021 •

edited

RussKie commented Apr 5, 2021

mdonatas commented Apr 5, 2021

gerhardol left a comment

NikolayXHD commented Apr 5, 2021 •

edited

mdonatas commented Apr 6, 2021

NikolayXHD commented Apr 6, 2021 •

edited

mdonatas commented Apr 7, 2021 •

edited

mdonatas commented Apr 7, 2021

mdonatas commented Apr 7, 2021 •

edited

NikolayXHD commented Apr 7, 2021

mdonatas commented Apr 8, 2021

gerhardol commented Apr 10, 2021

NikolayXHD commented Apr 10, 2021

RussKie commented Apr 10, 2021 via email •

edited by ghost

NikolayXHD commented Apr 12, 2021

RussKie left a comment

mdonatas commented Apr 13, 2021

Fix tab control flickering in dark theme #9049

Fix tab control flickering in dark theme #9049

Conversation

NikolayXHD commented Apr 4, 2021

Fixes

Proposed change

Screenshots

Test methodology

Test environment(s)

RussKie Apr 5, 2021

Choose a reason for hiding this comment

gerhardol Apr 5, 2021 • edited

Choose a reason for hiding this comment

NikolayXHD Apr 5, 2021 • edited

Choose a reason for hiding this comment

RussKie commented Apr 5, 2021

mdonatas commented Apr 5, 2021

gerhardol left a comment

Choose a reason for hiding this comment

NikolayXHD commented Apr 5, 2021 • edited

mdonatas commented Apr 6, 2021

NikolayXHD commented Apr 6, 2021 • edited

mdonatas commented Apr 7, 2021 • edited

mdonatas commented Apr 7, 2021

mdonatas commented Apr 7, 2021 • edited

NikolayXHD commented Apr 7, 2021

mdonatas commented Apr 8, 2021

gerhardol commented Apr 10, 2021

NikolayXHD commented Apr 10, 2021

RussKie commented Apr 10, 2021 via email • edited by ghost

NikolayXHD commented Apr 12, 2021

RussKie left a comment

Choose a reason for hiding this comment

mdonatas commented Apr 13, 2021

gerhardol Apr 5, 2021 •

edited

NikolayXHD Apr 5, 2021 •

edited

NikolayXHD commented Apr 5, 2021 •

edited

NikolayXHD commented Apr 6, 2021 •

edited

mdonatas commented Apr 7, 2021 •

edited

mdonatas commented Apr 7, 2021 •

edited

RussKie commented Apr 10, 2021 via email •

edited by ghost