Closed Bug 1701266 Opened 4 years ago Closed 4 years ago

Proton TitleBar color - Default Theme doesn't match to Windows accent color

Categories

(Firefox :: Toolbars and Customization, defect)

Firefox 89
x86_64
Windows 10
defect

Tracking

()

RESOLVED WONTFIX

People

(Reporter: acid.crash.lv, Unassigned)

References

Details

Attachments

(32 files)

(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
(deleted), image/png
Details
Attached image Theme.png (deleted) —

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

Steps to reproduce:

EnableProtonUI
browser.proton.contextmenus.enabled
browser.proton.enabled
browser.proton.tabs.enabled
browser.proton.toolbar.enabled
browser.proton.urlbar.enabled

Go to Win10 settings>Personalization>Colors>select from Windows colors

Observe the color of the Firefox titlebar color

Actual results:

On Nigthly TitleBar color (with the default theme selected) doesn't match accent color selected by the Windows

Expected results:

Firefox should use Windows system accent color (When Firefox window is active).
This is true for the Release but not on Latest Nightly

Component: Untriaged → Toolbars and Customization
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → WONTFIX

This seems to be unexpected
Could you please double-check if this is the right decision?
Almost every well programmed application on Windows platform tolerates OS accent color.
This as also true for the competitor browsers.
What kind of profit of improvement to user experience this change will give?

Hi here,
Not sure if you are the right persons to ask (if not please hint who can give some more details).
Could you please give some more details on the background behind the decision of removing support for Windows accent color

The accent color itself is one of the most recognizable/visible customization features on Windows 10.
The majority of Software developers utilize it (at least as the default theme choice)
Other Browser competitors are also using it.
Accent color support was present at some point with Proton (when it received its new tabs style).

Color vise Proton is almost identical to the current Light theme.
This fact also puts a question why accent color support should be dropped from the Default Theme.

Maybe there was some misunderstanding with the decision of its removal was made.

Flags: needinfo?(rtestard)
Flags: needinfo?(mak)
Regressed by: 1686529

I'm not the right person, I'm sorry. I don't think that technically there's reasons or requirements (like Microsoft guidelines) to use the accent color, especially when the app is setup to draw in the titlebar. There are a lot of apps on Windows that don't use it, just to make a few examples: Steam, Visual Studio Code, OneNote. Some of these are also made by Microsoft.

Flags: needinfo?(mak)

Not all examples provided are a not 100% relevant...
Steam - uses its separate skin system that doesn't have any connection with the OS accent at all
One Note - exclusively uses Purple as its accent color (like the mayorify of Office apps)
VS code - agree, it is hard to tell why is doesn't tolerate the accent color.

The key point is that Proton did support accent at some point, and it coexisted with remaining built-in themes.

The Titlebar Background color is one of the first things that is visible to user once the Browser starts.
This means that virtually every Windows 10 user that is aware of/uses the OS accent color and Default Firefox theme is affected by the change.
Ant if it worked before and stopped working now, in terms of user experience this is a drawback.
Are there any metrics that show the amount of users that potentially will be affected by this change (usage of accent color in Firefox)?

With all respect this does looks and sound like a Regression:

  • the feature was present before and worked without any visual bugs
  • after the bug 1686529 default theme is virtually the same as Light theme
  • the feature was not interfering with either Light or Dart theme.

If the whole change was dictated by the new Design choice, then the more logical way would be to change the Light theme coloring, and leaving the existing Default theme as it is.
If there is an additional need to force users for the New Light Colors, then force enabling Light theme for them (still not the best solution)

I know this is already marked as WONTFIX but I do want to provide some feedback here after seeing this land in my nightly install.
Like quite a few people out there I use a light application theme with a dark accent color. Firefox now ignores the accent color and gives me a dark grey text on grey default, made worse by fading titles in the tabs buttons that has a severe lack of contrast in comparison as well as totally breaking with my O.S. UI.
IMHO this is a severe usability and UX regression that should be addressed.

Making a "theme" to work around it won't help if you regularly change the accent color (e.g. based on automatic color selection from the desktop background). You can't expect people to make a theme every time they change their color or desktop.

Active window title bar compared to inactive title bar.
The only difference is a hardly distinguishable change in tab text color!
I don't really understand the rationale beneath this choice. Why?!
I think that this is an usability and UX regression that should be addressed.

(In reply to Tim Nguyen :ntim from comment #6)

You could just make a Firefox theme if you don't like it: https://color.firefox.com/?theme=XQAAAAJyAQAAAAAAAABBKYhm849SCia6aSqEGccwS-xMDPsqvMQuvAF6DfFcVnIO2RlYPn7K96jxJl9euVMPIG3hXZanKHmO0SR6HAFypXPQodXI0IApXyo0vUL2bJ6TKo55agaySyLYVycfJRH5JWbW5mhasxmWu8vufdYBik_o42A2KoDCzaT56Bd6rOBwJgRAvXB0fdFkbgIbV8iw1NjTyaQNPYTpc0jo_tHq-a2R9pExRHQqLOaMwjpL_48SQ-GIQr_P35VJTKhJVPIbWMj_TJ1fJmfWYQlu9aX_6rYvZA

Can I make a custom theme that changes title bar color when window is not active?
Can I make a custom theme that uses Windows 10 accent color (that changes according to desktop background color)?

(In reply to Filippo from comment #9)

(In reply to Tim Nguyen :ntim from comment #6)

You could just make a Firefox theme if you don't like it: https://color.firefox.com/?theme=XQAAAAJyAQAAAAAAAABBKYhm849SCia6aSqEGccwS-xMDPsqvMQuvAF6DfFcVnIO2RlYPn7K96jxJl9euVMPIG3hXZanKHmO0SR6HAFypXPQodXI0IApXyo0vUL2bJ6TKo55agaySyLYVycfJRH5JWbW5mhasxmWu8vufdYBik_o42A2KoDCzaT56Bd6rOBwJgRAvXB0fdFkbgIbV8iw1NjTyaQNPYTpc0jo_tHq-a2R9pExRHQqLOaMwjpL_48SQ-GIQr_P35VJTKhJVPIbWMj_TJ1fJmfWYQlu9aX_6rYvZA

Can I make a custom theme that changes title bar color when window is not active?

Yes. There's a frame inactive property in the "Advanced colors" section of the editor in the link above.

Can I make a custom theme that uses Windows 10 accent color (that changes according to desktop background color)?

There might be an possible extension/dynamic theme based solution, but good question. This is a valid use case.

The decision of this kind of confuses me, mainly because it is inconsistent across systems.

On Linux, the accent color is still supported on the latest Nightly, and the GTK theme support is wonderful. If anything, I'd expect this support to be even better on Windows, but the decision here is to remove it?

I'm certainly not suggesting to remove this System Theme support on Linux, as I love it and think it works great, but I am wondering why this feature is well supported on Linux, yet purposely removed on Windows.

I just got this update, and I'm also seeing this bug. I have custom higher contrast title bar colors for active/inactive windows configured in Windows, and Firefox 89 is not respecting those colors even though the "System Theme" is enabled which says it "follows the operating system settings for buttons, menus, and windows." This is an accessibility concern and I should not be required to set up a custom theme to handle this when I have already set it up in Windows.

Can this be reopened, or should I create a clone?

The major problem with this ignoring of the Windows theme/accent color is mainly a functional one. Because with Firefox 89 both the light and dark theme (and in the Alpenglow theme as well) show the same title bar/ tab bar color wether the window is active or inactive. This way it's impossible for the user to see if the Firefox window is the active one or not, especially when multiple Firefox windows are open. Not knowing which window is the active windows is a major flaw, because users can't see which windows receives keybord or mouse input commands (like text input or shortcut commands STRG+V for example.

Attached image FF-88.0.1-Active.png (deleted) —

This is an active Firefox 88.0.1 window with Windows accent color. You can tell that it is active by the dark window title/tab bar color.

Comment on attachment 9224565 [details] FF-88.0.1-Active.png This is an active Firefox 88.0.1 window with Windows accent color. You can tell that it is active by the dark window title/tab bar color.
Attached image FF-88.0.1-Inactive.png (deleted) —

This is an inactive Firefox 88.0.1 window with Windows accent color. You can tell that it is inactive by the almost white window title/tab bar color.

Attached image FF-89-Active.png (deleted) —

This is an active Firefox 89.0 window with Windows accent color. You can NOT tell that it is active, beause the title bar / tab bar color is white.

Attached image FF-89-Inactive.png (deleted) —

This is an inactive Firefox 89.0 window with Windows accent color. You can NOT tell that it is inactive, beause the title bar / tab bar color is white, the same color as the active window.

Those four screenshot show that ignoring the Windows accent color is a major flaw, because it ignores an inportant usabiluty function of the Windows operating system (and other operating systems as well): Different window title bar colors indicate with a lot of visual clarity if a window is active (receives keyboard and mouse commands) or inactive (does not receive keyboard and mouse commands).

Firefox 89.0 with the Proton design ignores that important activity indicator. Firefox 88.0.1 was the last version to respect that activity indicator.

This can lead to a lot of unwanted user interaction:

  • closing the wrong windows by hitting ALT+F4 (or other unwanted actions with other keyboard shortcuts)
  • pasting in the wrong window by hitting STRG+V
  • typing some (private or important) in the wrong window
  • and many more unwanted things

A workaround would be to edit userChrome.css for the following design elements:

Active Firefox window:

  • active tab font color
  • active tab background color
  • inactive tab font color
  • inactive tab background color (i.e. tab bar background color) <- in our case here the active windows accent color
  • color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Inactive Firefox window:

  • active tab font color
  • active tab background color
  • inactive tab font color
  • inactive tab background color (i.e. tab bar background color) <- in our case here the inactive windows accent color
  • color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

(In reply to Riban from comment #33)

A workaround would be to edit userChrome.css for the following design elements:

Active Firefox window:

  • active tab font color
  • active tab background color
  • inactive tab font color
  • inactive tab background color (i.e. tab bar background color) <- in our case here the active windows accent color
  • color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

Inactive Firefox window:

  • active tab font color
  • active tab background color
  • inactive tab font color
  • inactive tab background color (i.e. tab bar background color) <- in our case here the inactive windows accent color
  • color of other design elements in the tab bar like "New Tab Button", "Right/Left scroll arrow", Windows buttons (minimize, close, maximise)

would you mind sharing the css code? Thank you very much!

(In reply to Riban from comment #29)

Those four screenshot show that ignoring the Windows accent color is a major flaw, because it ignores an inportant usabiluty function of the Windows operating system (and other operating systems as well): Different window title bar colors indicate with a lot of visual clarity if a window is active (receives keyboard and mouse commands) or inactive (does not receive keyboard and mouse commands).

FYI, this issue is filed as bug 1704131.

I managed to get part of the solution.

I have created a theme (see code below) with the Mozilla theme generator (https://color.firefox.com). In this theme I have set the alpha value of the "frame_inactive" color to "0" which equals complete transparency. The result of that code below is that active windows have the custom color that I have set in the "frame" variable, inactive windows get the standard white. So this mimics the good old active/inactive behavior of Firefox 88.0.1 (see my 4 screenshots above).

The only problem left that needs to be resolved is that the tab bar buttons are also white in the white inactive window and therefore impossible to see. Does someone know a trick to color the buttons in the tab bar when the window is inactive?

Theme Code

{
"manifest_version": 2,
"version": "1.0",
"name": "Test",
"theme": {
"images": {},
"properties": {},
"colors": {
"toolbar": "rgb(249, 249, 250)",
"toolbar_text": "rgb(0, 0, 0)",
"frame": "rgb(89, 92, 103)",
"tab_background_text": "rgb(255, 255, 255)",
"toolbar_field": "rgb(255, 255, 255)",
"toolbar_field_text": "rgb(0, 0, 0)",
"tab_line": "rgb(127, 127, 127)",
"popup": "rgb(255, 255, 255)",
"popup_text": "rgb(0, 0, 0)",
"frame_inactive": "rgba(34, 25, 77, 0)",
"tab_loading": "rgb(127, 127, 127)"
}
}
}

Addition to my previous comment:
The tab title text of inactive windows needs to be colored too, because it is also white on white.

Tab bar buttons and tab titles of inactive windows are still white and therefore impossible to see.

Another bug report has been opened for this issue, please go and vote on it to show your support: https://bugzilla.mozilla.org/show_bug.cgi?id=1707669

To vote, click Edit Bug (top right) > click Vote (in the details panel) > check the box on the highlighted line > click Change My Votes

In defence of Mozilla, though, I have to say that many Microsoft apps that ship out of the box with Windows 10 don't respect accent color either: Weather, Microsoft Store and many others, especially the so called "Modern" or "UWP" apps, just to name a few. Other browsers like Opera, Brave and even Microsoft's own Edge come with their own themes that don't respect Windows accent color. No matter whether they are based on Chromium or other codebases. Mozilla now is in line with those other browsers. So complaints about this need to hit all those browsers and apps from other categories.
In my eyes this somehow indicates that Window accent color is not a main functionality / priority any more in Microsoft's own opinion specifically and in app development in general, otherwise they would maintain more consistency. So maybe users have to go with the flow (whether they like it or not) or pressure Microsoft to focus more on UI consistency (like Apple does it with their strict UI design guidelines).

So how about this, Mozilla: If you abandon the Windows accent color and go with your own themes, fine. But please please please improve your Firefox dark and light themes in such a way that active windows can clearly be distinguished from inactive windows. This helps to avoid unwanted inputs into the wrong browser windows.

(In reply to Klaus Reinfeld from comment #60)
As this has been done on purpose, any advocacy to reopen this bug will be marked as such (and then ignored). Any comment here (including this one, sorry!) will just eat up valuable time of people that otherwise does a great job fixing Firefox.

Rather than commenting here, use this link: https://mozilla.crowdicity.com/post/719939 to raise awareness.

I was trying to change the layout of the tool bar/navigation bar and went to:

View->Toolbars->Customize Toolbar...

This brought up a new window to customize firefox and at the bottom left there is a checkbox that says "Title Bar". I checked that to see what it did and the accent color came back for the title bar. Active and inactive windows seem to be working as before too.

(In reply to copperlynx from comment #63)

This brought up a new window to customize firefox and at the bottom left there is a checkbox that says "Title Bar". I checked that to see what it did and the accent color came back for the title bar. Active and inactive windows seem to be working as before too.

No, that adds a conventional title bar on top, stealing yet more precious vertical space than the Proton design already does. If you simply set "browser.proton.enabled" to false in about:config, without an extra title bar, you will see that you a) have the least vertical space taken up, and b) have proper indication of active/inactive window.

I believe some of you might be interested in a userChrome based solution. Unfortunately you have to hardcode your accent color, since the -moz-win-accentcolor value does not seem to be supported any more.

@-moz-document url(chrome://browser/content/browser.xhtml) {
    #TabsToolbar {
	    background: #ffb900;
    }

    #TabsToolbar:-moz-window-inactive {
	    background: inherit;
    }
}

Unfortunately you have to hardcode your accent color, since the -moz-win-accentcolor value does not seem to be supported any more

It's -moz-accent-color now.

I have tried it using the code that Sören Hentzschel mentioned and it works:

#TabsToolbar {
	background: -moz-accent-color !important;
}
#TabsToolbar:-moz-window-inactive {
	background: inherit !important;
}

In addition to that code above I need to inherit the Windows Accent Text color for active and inactive Windows.
Is there something like -moz-accent-color-text ?

And I also need to change the button's colors in the active and inactive tab bar (like the New Tab "+" button and the Windows buttons "close", "minimize" and "maximize").

Is there something like -moz-accent-color-text ?

You could try -moz-accent-color-foreground (I don't have Windows so I can't test if it behaves like expected).

#TabsToolbar:-moz-window-inactive {
	background: inherit !important; }

For this piece of code however I need to grab the Inactive Windows Accent Color.
So inherit needs to be replaced with something like -moz-accent-color-inactive. Is there such a thing?

Hi here,
so could someone please post the full set of CSS to restore accent color for the tabbar?

userChrome.css code that already works for the custom Windows Accent color theme

Tab bar background color of active Firefox window is taken from the active Windows Accent color:

#TabsToolbar {
	background: -moz-accent-color !important; }

Title/Text color of inactive tabs in active Firefox window is taken from the Windows Title/Text color of active windows:

.tabbrowser-tab:not([selected]) {
	color: -moz-accent-color-foreground !important; }

Missing userChrome.css code to complete the custom Windows Accent color theme

  • Color of the buttons in the Tab Bar of active Firefox window that is taken from the active Windows Button color
  • Tab Bar background color of inactive Firefox window that is taken from the inactive Windows Accent color
  • Color of the buttons in the Tab Bar of inactive Firefox window that is taken from the inactive Windows Button color
  • Title/Text color of inactive tabs in inactive Firefox window that is taken from the Windows Title/Text color of inactive windows

Attention
Be careful to pay close attention to active and inactive elements in the four missing bullet points I wrote in my comment 74 above. It's confusing, I know.

Attached image Mozilla Firefox With Menu Bar Fixes (deleted) —

If you're weird like me, you have Tree Style Tab and disable the horizontal tabs. I end up enabling the menu bar which looks terrible and is confusing in the new Firefox as people have mentioned.

Attached screenshot is what Firefox looks like with these userChrome.css fixes:

/* Show active colors on main menu bar */
#toolbar-menubar {
	background: -moz-accent-color !important;
	color: white;
}
#toolbar-menubar:-moz-window-inactive {
	background: -moz-accent-color-foreground !important;
}

/* Fix weird menu bar positioning */
#main-menubar {
	margin-top: 4px !important;
}

(In reply to insider32 from comment #76)

/* Fix weird menu bar positioning */
#main-menubar {
	margin-top: 4px !important;
}

Great improvement. Just a quick addition to it:
If a user enables the menu bar only temporarily/occasionally by pressing "ALT" on the keyboard, then the appropriate margin-top is 8px.

So, assembled here is a huge portion of the userChrome.css code for the Menubar and Tabbar color that adapt to custom/user set Windows Accent color. Please note the discription of the particular code segments, because there are some minor things missing for which I need your help. Further below are comments about some code for other elements that are still missing.

  1. Menubar background color of active Firefox windows with Windows Accent color of active windows:
#toolbar-menubar {
	background: -moz-accent-color !important; }
  1. Menubar background color of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-inactive which would dynamically pull the Windows Accent color of inactive windows?
#toolbar-menubar:-moz-window-inactive {
	background: #c7c7c7 !important; }
  1. Menubar text color of active Firefox windows with Windows Accent color of active windows:
#toolbar-menubar {
	color: -moz-accent-color-foreground !important; }
  1. Menubar text color of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-foreground-inactive which would dynamically pull the Windows text color of inactive windows?
#toolbar-menubar:-moz-window-inactive {
	color: #000000 !important; }
  1. Tabbar background color of active Firefox windows with Windows Accent color of active windows:
#TabsToolbar {
	background: -moz-accent-color !important; }
  1. Tabbar background color of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-inactive which would dynamically pull the Windows Accent color of inactive windows?
#TabsToolbar:-moz-window-inactive {
	background: #c7c7c7 !important; }
  1. Color of the window buttons (minimize, maximize, close) (not the tab text color) in the Tabbar of active Firefox windows with Windows Accent color of active windows:
#TabsToolbar {
	color: -moz-accent-color-foreground !important; }
  1. Color of the window buttons (minimize, maximize, close) (not the tab text color) in the Tabbar of inactive Firefox windows with Windows Accent color of inactive windows. The problem here is that the color is hard coded. Is there something like -moz-accent-color-foreground-inactive which would dynamically pull the Windows Accent color of inactive windows?
#TabsToolbar:-moz-window-inactive {
	color: #000000 !important; }
Attached image Missing code (deleted) —

Elements for which the userChrome code is still missing:

  • Color for the buttons and their background (normal and mouseover/hover) marked red in the picture in active and inactive Firefox windows.

Also missing

  • Color of the text of inactive tabs in inactive Firefox windows taken from the Windows inactive window title text color.

Every comment in this ticket causes e-mails to a lot of people who want to get notificated if / once there is progress or an important update to share. So please don't add more comments about your customizations, there are other platforms for that, like https://www.reddit.com/r/FirefoxCSS/. Thanks.

Sorry to notify then a lot of people here, but since many expressed concerns, here is a complement to what Riban has collected in Comment 79, replacing some of it, to help for matching again Windows colors (it does for me), and to keep all in one place

https://discourse.mozilla.org/t/so-now-we-can-not-even-turn-off-proton/83108/28?u=aafn

(In reply to :Gijs (back Sept 20; he/him) from comment #1)

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

So how we should distinguish between active and inactive Firefox window without accent color? Current defaults are horrible, because colors are almost the same.

Flags: needinfo?(gijskruitbosch+bugs)

The code from aafn's post https://bugzilla.mozilla.org/show_bug.cgi?id=1701266#c85 still works for me in FF 92.

See my following posts with screenshots of different browsers and some native Windows 10 apps in active and inactive window states. They all look more or less indistinguishable in active and inactive state regarding their accent color. This is even worse with Windows 11 where even the Explorer and "traditional" native included Win32-Apps are not really distinguishable by their accent colors any more. Same with macOS these days. So Mozilla's FF is in very good company and should not be the only app to receive all the negative feedback.
Maybe this is the general direction of todays "modern" user interfaces...

Attached image Brave bright active (deleted) —

Brave bright active

Attached image Brave bright inactive (deleted) —

Brave bright inactive

Attached image Brave dark active (deleted) —

Brave dark active

Attached image Brave dark inactive (deleted) —

Brave dark inactive

Attached image Calc active (deleted) —

Calc active

Attached image Calc inactive (deleted) —

Calc inactive

Attached image Edge active (deleted) —

Edge active

Attached image Edge inactive (deleted) —

Edge inactive

Attached image Opera bright active (deleted) —

Opera bright active

Attached image Opera bright inactive (deleted) —

Opera bright inactive

Attached image Opera dark active (deleted) —

Opera dark active

Attached image Opera dark inactive (deleted) —

Opera dark inactive

Attached image Weather active (deleted) —

Weather active

Attached image Weather inactive (deleted) —

Weather inactive

@Riban The fact, that others make stupid mistakes, does not mean, that Mozilla should repeat them.
At least the design guidelines for Windows are written with usability in mind:

Do make it obvious when your window is active or inactive. At a minimum, change the color of the text, icons, and buttons in your title bar.
Source: https://docs.microsoft.com/en-us/windows/uwp/design/shell/title-bar
Apple guidelines have similar statement.

Riban, I believe (some, but not all of?) your screenshots were taken with the setting "Show accent color on the following surfaces: Title bars and window borders" turned off in Settings -> Personalization -> Colors. When that's disabled, applications have little contrast between their focused and unfocused windows.

The problem here is that Firefox disregards that setting while other applications (Edge for example) follow it. Many UWP applications don't have strong enough visual cues to distinguish focused and unfocused windows, but are still better than Firefox, in that they have elements that become translucent when focused (in your screenshot, Calc is shown against a gray background, so that might not be very noticeable).

For a fair comparison, since this issue is about usability and ability to distinguish focused windows, a comparison should be done with that setting enabled, since it's fair to assume that anyone that is bothered by this on Windows has that turned on.

Luckily, it's still currently possible to enable the native titlebar in Firefox, and when it's enabled, it becomes distinguishable. Else it'd be really difficult to use.

So I activated "Show accent color on the following surfaces: Title bars and window borders" in "Settings -> Personalization -> Colors" for a more fair comparison, as suggested. The following screenshots show the results:

  • Edge indeed is now distinguishable just like Windows Explorer and other non-themed Win 32 apps.
  • Themed Win 32 apps like Firefox, Opera, Brave etc. are still almost undistinguishable (just like in my screenshots above, therefore no repetitive/redundant screenshots of this in the following posts).
  • UWP apps like Weather and Calc are almost undistinguishable, too.
  • Calc (and some other UWP apps) is a little bit more distinguishable when transparency in "Settings -> Personalization -> Colors" is activated.

But still it is bad UI design when applications depend on transparency to be distinguishable between active and inactive state. And it is even worse (aka unacceptable) when the distinguishability of transparent apps depends on the contrast of the desktop background or the contrast of the application windows and their content behind the foreground app (like a browser with a dark or white website behind the transparent app in the foreground).

This totally different behaviour of apps still a mess that confuses users. A lot of unification of this is needed.

Attached image Calc active transparency off (deleted) —

Calc active transparency off

Attached image Calc active transparency on (deleted) —

Calc active transparency on

Attached image Calc inactive transparency off (deleted) —

Calc inactive transparency off

Attached image Calc inactive transparency on (deleted) —

Calc inactive transparency on

Attached image Edge active (deleted) —

Edge active

Attached image Edge inactive (deleted) —

Edge inactive

Attached image Weather active (deleted) —

Weather active

Attached image Weather inactive (deleted) —

Weather inactive

(In reply to Mykola from comment #90)

(In reply to :Gijs (back Sept 20; he/him) from comment #1)

With Proton, the Default theme switches between Light and Dark based on the system settings. We've removed support for showing the Windows accent color.

So how we should distinguish between active and inactive Firefox window without accent color? Current defaults are horrible, because colors are almost the same.

Fixing this is tracked in bug 1704131 which is still open.

I'm restricting further comments here to protect the inboxes of everyone here, as no progress is being made and the majority of comments are advocacy.

If you have aesthetic concerns (ie you want a specific colour that you've set as your windows titlebar colour), they have been covered in earlier comments: you can configure a custom theme, either one made by others or a custom one from e.g. https://color.firefox.com/ . If you have functional concerns around distinguishing the active an inactive windows/titlebars of the default theme, as noted that is bug 1704131.

Flags: needinfo?(gijskruitbosch+bugs)
Restrict Comments: true
Flags: needinfo?(rtestard)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: