1796730 - Toolbox / window top border is a different version of the accent colour to the window side borders

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[alstjr7375]

Attachment: 2022-10-21 024326.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Steps to reproduce:

1. Goto Win10 settings > Personalization > Colors
2. Turn on two options

• Automatically pick an accent color from my background
• Show accent color on title bars and windows borders

3. Set Firefox app menu > More tools > Customize toolbar

• Turn off Titlebar

You can see that the color of Tabbar's top border is different.

Actual results:

Since then, it is not matched with the system color in Windows 10.

Expected results:

It should be the same color as the other borders.

Comment 1

[alstjr7375]

Attachment: firefox_accent_color_at_tabbar_border.png

Screenshots that look a little clearer.

As far as I know it has been a problem since v103.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Toolbars and Customization' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Hani Yacoub, Desktop QA]

Managed to reproduce the issue on Windows 10 x64.
I couldn't reproduce the issue using mozregression in order to provide a regression range.
The issue is not reproducible on Firefox 103.

Comment 4

[:Gijs (he/him)]

(In reply to Hani Yacoub from comment #3)

Managed to reproduce the issue on Windows 10 x64.
I couldn't reproduce the issue using mozregression in order to provide a regression range.

Can you elaborate? Did this not reproduce with mozregression builds?

Also, why did you set 108 as unaffected, but wrote that you can't repro with 103?

Reporter: what precise version of Windows 10 is this? Does this reproduce with any accent colour?

Comment 5

[Hani Yacoub, Desktop QA]

It's only reproducible on Firefox 108.0a1. (Please see the screenshot: https://imgur.com/a/s0smfs2)
On Firefox 106.0.2 and Firefox 107.0b6 borders aren't displayed.
The color of the top border is different than side and bottom borders after turning the 2 options mentioned in the bug description.

The borders aren't displayed while trying to reproduce the issue using mozregression.

Comment 6

[alstjr7375]

Attachment: ff106.PNG

It's a strange.
I can reproduce at v106

Comment 7

[slew]

I'm also experiencing this on Firefox 115.0 and 115.1 on Windows 10. Additionally, anything using the AccentColor variable in a userChrome.css file is similarly incorrectly coloured, so I would point at that as the cause.

Comment 8

[slew]

It seems that variable was changed here, there are a few lines where MozAccentColor has been changed to Accentcolor, lowercase. Could that be the cause?

https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31

Comment 9

[:Gijs (he/him)]

Can you be more precise about what the "right" and "wrong" colours are in the case where you see this bug, and check what happens if the accent colour is changed in the Windows settings (and Firefox is restarted)?

Comment 10

[alstjr7375]

Attachment: img-2023-07-10-10-19-46.png

It seems that variable was changed here, there are a few lines where MozAccentColor has been changed to Accentcolor, lowercase. Could that be the cause?

As far as I know, the commit is a case that changed its name for the CSS working group.

But at that time, I saw several reports that it was a new bug in v103 and I was able to reproduce it.

• https://github.com/black7375/Firefox-UI-Fix/issues/445
• https://www.reddit.com/r/FirefoxCSS/comments/w9t89v/tab_bar_windows_accent_color_in_firefox_103/

But it seems to have been fixed in the current Nightly.
This screenshot is an example of adjusting the size of the following code to make it look good.
https://github.com/mozilla/gecko-dev/blob/6220909421e5cdb2e706a87f77ba7c6f4f21e4d0/browser/themes/windows/browser-aero.css#L51

I usually use linux, so I don't know when it was fixed.

Comment 11

[:Gijs (he/him)]

It's possible that the default size of the border (0.5 CSS pixel) looks OK on some display density (Windows scale) settings, and gets anti-aliased to look "bad" on others? I don't see any changes to the code linked in comment #10, and the suggestion that the accent color is wrong everywhere in comment 7 would imply that it's not just about the size of the border...

But actually, the 103 timeframe would suggest that perhaps bug 1775310 broke this?

It's still unclear to me what colours are supposed to be "right" and "wrong" in the relevant screenshots, or what is "fixed" in nightly vs "broken" before.

Comment 12

[alstjr7375]

Ok, Let me explain it a little more specifically.
I was a theme author of connected above github issues and reddit post and investigated at that time.

The theme has an emulation of Windows title bar and is widely applied to the background.
https://github.com/black7375/Firefox-UI-Fix/blob/0aa6c683d17fde79b3154c5074d3905bc4494d6a/css/leptonChrome.css#L842-L856

@media (-moz-windows-accent-color-in-titlebar) {
  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
    color: AccentColorText;
    background-color: AccentColor;
  }
}

At the time, the color of the border was the same color as other windows, but the tab bar background color was brighter than other colors.
You can see the detailed screenshot through the link.

• https://www.reddit.com/r/FirefoxCSS/comments/w9t89v/tab_bar_windows_accent_color_in_firefox_103/
• https://github.com/black7375/Firefox-UI-Fix/issues/445

The problem appeared only when feature Automatically pick an accent color from my background was enabled, and it was not an anti-aliased problem.
When the Show accent color on title bars and windows borders option was activated without Automatically pick an accent color from my background, it was the same as the border color.
This was tested through two monitors.

• 1920x1080
• 3840x2160 HDR

Comment 13

[Emilio Cobos Álvarez (:emilio)]

(In reply to slew from comment #7)

I'm also experiencing this on Firefox 115.0 and 115.1 on Windows 10. Additionally, anything using the AccentColor variable in a userChrome.css file is similarly incorrectly coloured, so I would point at that as the cause.

I can't see any difference between the borders and the titlebar / top border. That is, the AccentColor is correct.

But I'm on Windows 11. What Windows 10 version are you using?

In https://hg.mozilla.org/mozilla-central/rev/0755f80b058e08ce1c6444be79cac76d653c81f9, we changed the AccentColor computation from reading the registry to use UISettings3, which is the "proper" API for doing this.

That should yield the same color, in theory. If you see a wrong accent color, can you provide:

• Windows 10 version.
• Whether you're using light or dark mode (just in case that happens to matter somehow).
• Value of your HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM\AccentColor registry key.
• Value of running InspectorUtils.colorToRGBA("AccentColor", document) in the browser console.

Thanks.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Ah, I can repro with the "Automatic" accent color thing! See incoming screenshot.

The issue is that the accent color from UWP (see the highlighted text in settings etc) is not the color used in the window border / titlebar...

So the AccentColor is correct insofar it matches UWP apps, but we shouldn't use that for the titlebar border, probably? Let me try to debug a bit more.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Attachment: Screenshot of the bug.

See how the accent color of the forms and text selection in Settings (and Firefox's AccentColor) is some light purple-ish, but the window border is dark blue.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

According to Chromium's source, the border color is a mix of the accent color on top of #d9d9d9. They use the accent color from the registry, too.

Comment 17

[slew]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #13)

(In reply to slew from comment #7)

I'm also experiencing this on Firefox 115.0 and 115.1 on Windows 10. Additionally, anything using the AccentColor variable in a userChrome.css file is similarly incorrectly coloured, so I would point at that as the cause.

I can't see any difference between the borders and the titlebar / top border. That is, the AccentColor is correct.

But I'm on Windows 11. What Windows 10 version are you using?

In https://hg.mozilla.org/mozilla-central/rev/0755f80b058e08ce1c6444be79cac76d653c81f9, we changed the AccentColor computation from reading the registry to use UISettings3, which is the "proper" API for doing this.

That should yield the same color, in theory. If you see a wrong accent color, can you provide:

• Windows 10 version.
• Whether you're using light or dark mode (just in case that happens to matter somehow).
• Value of your HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM\AccentColor registry key.
• Value of running InspectorUtils.colorToRGBA("AccentColor", document) in the browser console.

Thanks.

Windows 10 Enterprise LTSC 19044,
Dark mode (but I see it happen in light mode too),
Reg key: Accent Color: 0xff523323,
AccentColor output: Object { a: 1, b: 204, g: 96, r: 41 }

If you style large chunks of the ui (buttons, backgrounds) with the AccentColor variable using userChrome.css, you will see the mismatch happen too, so that should rule out aliasing errors.

Comment 18

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1796730 - Fix computation of Windows titlebar accent colors. r=Gijs!,handyman!

Since the DWM accent colors can be different from the UWP accent colors
(see comments in the bug), expose them as the proper ActiveBorder /
InactiveBorder / ActiveCaption / CaptionText / InactiveCaption /
InactiveCaptionText colors, which have that purpose.

Fix browser-aero.css to use the right color for the border
(ActiveBorder).

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7fc83606872c
Fix computation of Windows titlebar accent colors. r=handyman,desktop-theme-reviewers,dao

Comment 20

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/7fc83606872c

Comment 21

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-07-15 Nightly build on Windows 10.
Verified as fixed on Firefox 117.0b5(build ID: 20230808215502) and Nightly 118.0a1(build ID: 20230809213044) on Windows 10.