View Issue Details

Jump to Notes
IDProjectCategoryView StatusDate SubmittedLast Update
0020897MMW 5Skinning frameworkpublic2024-04-29 18:042024-07-24 18:28
Reporterzvezdan Assigned To 
PriorityurgentSeverityminorReproducibilityalways
Status assignedResolutionopen 
PlatformChromium 121-126 
Target Version5.1.1 
Summary0020897: Media forced-colors system changes is not working in realtime (Regression)
DescriptionThe main feature of my skin is to automatically change program colors based on the state of Windows Contrast themes. To detect if any Contrast theme is enabled, I am using this media query: @media (forced-colors: active) {}. This worked fine in MM build 3005 using Chromium 120 and all other builds since 5.0.2.2516 with Chromium 90 (the earliest version that I tested). However, it doesn't work in any of newer builds. Google Chrome 123, Edge 123+ works normally and immediately refresh UI and page rendering on Media forced-colors system change.

Actually, it works fine in b3018 on MM start while High contrast is enabled, when user already have set any contrast theme (1-st screenshot). It also works fine if user switch to non-contrast theme while the program is running (2). However, it doesn't work if I switch from non-contrast theme to any contrast theme (3).

It doesn't help if I choose Quick window reload using Refresh Skin Shortcut add-on, only restart of the program will make it fine.

As you could see from the screenshots, Inspect Element window has the same problem. However, Google Chrome 123 is working fine with the following html page.
Steps To ReproduceSave attached HTML from 0020897:0076365 to C:\MYTEMP\
1. Start MM
2. Add Web bookmark with URL "file:///C:/MYTEMP/colors.html"
3. Open Bookmark in MM it will Show Force colors not active
4. Enable High Contrast mode With shortcut LEFT ALT + LEFT SHIFT + PRINT SCREEN
5. Rendering of Web bookmark and MM UI is not correct and F5 do not make any changes
6. Restart MM
7. MM Loads in High contrast mode, but Selection is not visible and other UI parts are not correctly optimized for High Contrast mode (NOTE: some custom skins may be optimized according to Hogh contrast Behavior. @Zvezdan supply one privately if you have one sample that works/worked in preio MM versions)
8. Open Bookmark in MM it will Show Force colors is active
9. Disable High Contrast mode With shortcut LEFT ALT + LEFT SHIFT + PRINT SCREEN
10. Bookmark state shows force colors not active,
11. Enable High Contrast mode With shortcut LEFT ALT + LEFT SHIFT + PRINT SCREEN
12. Rendering of Web bookmark and MM UI is not correct and F5 do not make any changes MM RESTART is needed in order to put MM back to High Contrast state

TagsNo tags attached.
Attached Files
Media queries doesn't work correctly with b3018 - 1.png (22,474 bytes)   
Media queries doesn't work correctly with b3018 - 1.png (22,474 bytes)   
Media queries doesn't work correctly with b3018 - 2.png (31,678 bytes)   
Media queries doesn't work correctly with b3018 - 2.png (31,678 bytes)   
Media queries doesn't work correctly with b3018 - 3.png (20,871 bytes)   
Media queries doesn't work correctly with b3018 - 3.png (20,871 bytes)   
Fixed in build

Relationships

related to 0019959 assignedpeke None native skin is visualy acceptable with Windows 11 high Contrast themes 
related to 0021031 resolvedrusty Adding YouTube Music as Bookmark in Web node triggers 'browser deprecated' error in Title and login fails 

Activities

michal

2024-05-02 06:43

developer   ~0075319

It is something with new Chromium, if I switch to Chromium 120, the same sources work, but in Chromium 123 it does not work. Assigned to Petr to look at it.

zvezdan

2024-05-02 10:21

updater   ~0075320

I though at first that it has something with Chromium, which is why I tested the code with Google Chrome 123. It doesn't matter how many times I toggle the contrast mode, the mentioned html page always works fine, and you could see its Developer tools panel is changing its colors accordingly, unlike Inspect Element window in MM. It works fine with Chrome 124 as well.
Google Chrome 123 - Media query - Night Sky - 1.png (30,612 bytes)   
Google Chrome 123 - Media query - Night Sky - 1.png (30,612 bytes)   
Google Chrome 123 - Media query - None - 2.png (27,701 bytes)   
Google Chrome 123 - Media query - None - 2.png (27,701 bytes)   
Google Chrome 124 - Media query - Night Sky - 1.png (27,620 bytes)   
Google Chrome 124 - Media query - Night Sky - 1.png (27,620 bytes)   
Google Chrome 124 - Media query - None - 2.png (27,282 bytes)   
Google Chrome 124 - Media query - None - 2.png (27,282 bytes)   

michal

2024-05-02 10:23

developer   ~0075321

Yes, it works in Chrome, but not with Chromium 123 used in MM5.

zvezdan

2024-05-18 12:18

updater   ~0075455

I just wanted to say that it is not Chromium itself responsible for this issue, otherwise I would report it to its team. I tried the latest MS Edge 125 and Opera 109 (based on Chromium 123) and they don't have the problem with the mentioned media query.

The problem is even more serious to my skin because it appears even when changing contrast themes, not only when switching from non-contrast theme to contrast theme.

You know, I was always afraid whenever you updated your program if that will break compatibility with my scripts (which culminated with MM5), but I didn't expect that I will need to worry if my skins will work with new versions of the program.

peke

2024-07-22 15:01

developer   ~0076365

By reviewing this bug I have found out that MM do not correctly update skin based on High contrast mode.

Uploading HTML file from @Zvezdan sample above and updating steps to replicate.

Due the current state of MM 2024 release, I would suggest that fixing this bug is ASAP fixed along with update to Chromium at next release cycle if fix.

For short term fix MM should correctly update pages and UI in case High contrast is enabled/disabled while MM is started.
colors.html (602 bytes)    
	<html>
    <style>
        @media (forced-colors: none) {
            span {
                color: Highlight;
                background-color: HighlightText;
            }
            span:after {
                content: "None";
            }
        }
        @media (forced-colors: active) {
            span {
                color: HighlightText;
                background-color: Highlight;
            }
            span:after {
                content: "Active";
            }
        }
    </style>
    <body>
        <span>Forced colors: </span>
    </body>
</html>
colors.html (602 bytes)   

peke

2024-07-22 15:10

developer   ~0076366

Last edited: 2024-07-22 15:13

 Increasing Priority for triage if possible to make MM detect High Contrast Enable/disable while MM is started.

NOTE if MM is started when High contrast is ON then disabling High contrast correctly Update whole MM UI to use full skin colors.

rusty

2024-07-22 16:22

administrator   ~0076367

Last edited: 2024-07-22 21:35

 Resetting back to 'urgent'. As described by both Zvezdan and Peke, MMW doesn't work correctly for users with visual disabilities that require Windows' High Contrast Mode (ALT-LEFT + ALT-SHIFT + PrtScrn):
1) Starting MMW when Windows is already in high contrast mode cause MM skins to render incorrectly
2) Switching to high contrast mode with MMW already running doesn't switch the UI correctly to high contrast mode

Considering that behavior became worse as of build 3018, ideally this would be fixed for 5.1.

zvezdan

2024-07-22 16:52

updater   ~0076368

@Peke, thanks for trying to clarify my report with added steps to reproduce, but I am afraid that you made it even more confusing, I think you are complicating it too much trying to expand this issue to the other one mentioned in the 0019959. That another issue covers completely another problem with your native skins (and other existing skins by other authors) because of why they don't respond to changes in Windows themes.

I have found a solution for that other issue independently to my skin (and this issue), it could be implemented easily and will enable all existing skins to have their original look with all Windows themes. It is just one css line that could be added to the skin_base.less file of your basic skin, and it will affect all skins, i.e. the 0019959 issue will be resolved with it.

However, this particular issue affects only my skin (and any future skins using system colors) and it started with b3018 and Chromium 123, causing two mentioned things:
1. @media (forced-colors: active) {} doesn't work;
2. system colors are not respected anymore after changing themes, which I mentioned in my previous post (https://www.ventismedia.com/mantis/view.php?id=20897#c75455). For example, if I have:
backgroung-color: ButtonFace;

and if I have one Windows theme having red ButtonFace, and another theme having green ButtonFace, if I change a theme, its ButtonFace will not be updated in the program. You see, this thing is independent of the media queries, i.e. these colors are in less files outside of media queries.

But all of that worked fine in b3005 and earlier.

The attached video has the same mentioned html file opened in MM, Google Chrome 123 and MS Edge 126. These browsers works fine, unlike MM.
Media queries doesn't work correctly.mp4 (338,310 bytes)   
Media queries doesn't work correctly.mp4 (338,310 bytes)   

peke

2024-07-22 19:47

developer   ~0076369

@zvezdan this issue is completely unrelated to 0019959 (thx for that bug will follow up there) Problem here is that MM Chromium rendering engine do not react on Windows Event High Contrast theme Enable (which make "forced-colors: active") and as result WEB Page and complete MM SKIN do not render/correctly into High Contrast mode until MM restarts. Issues/bugs with how MM badly renders UI in High contrast mode is like you pointed in bug 0019959 and should be handled there.

As you pointed I tested same above steps in MM 3005 and MM reacted same as EDGE eg. normally. So the bug is actual Regression in MM versions using Chromium 123 as 3005 that uses 120 works as expected (excluding issues described at 0019959 where further conversation about how MM renders skins and what solution are available [be that per skin like you pointed you did for your skin or global one managed by MM implementation of chromium]) So I agree two complete separate things/bugs

THX for clarifying so this is clear case of Regression in MM builds 3005+ on global scale and not like it was initially thought that it was issue with your skin only.

That said this needs to be fixed immediately as an regression.

peke

2024-07-22 21:53

developer   ~0076373

As requested I conducted the tests in various Chromium SAMPLE Client builds.

Conclusion:
120 WORKS!!! https://cef-builds.spotifycdn.com/index.html#windows32:120
Last One That Works: 01/18/2024 - 120.2.7+g4bc6a59+chromium-120.0.6099.234 / Chromium 120.0.6099.234 STABLE https://cef-builds.spotifycdn.com/cef_binary_120.2.7%2Bg4bc6a59%2Bchromium-120.0.6099.234_windows32_client.tar.bz2

All 121-123 versions FAIL!!! https://cef-builds.spotifycdn.com/index.html#windows32:121 to https://cef-builds.spotifycdn.com/index.html#windows32:123
Even FIRST listed 121 Beta do not work 12/15/2023 - 121.0.1+g7a4b55f+chromium-121.0.6167.16 / Chromium 121.0.6167.16 BETA https://cef-builds.spotifycdn.com/cef_binary_121.0.1%2Bg7a4b55f%2Bchromium-121.0.6167.16_windows32_beta_client.tar.bz2

127 Beta build WORKS!!! https://cef-builds.spotifycdn.com/index.html#windows32:127
Current test beta build (at moment of testing) WORKS!!! 07/19/2024 - 127.0.20+g1567840+chromium-127.0.6533.57 / Chromium 127.0.6533.57 It also correctly detect changes from Dark/Light Theme in Windows personalize -> Colors (Attached test HTML file for that) https://cef-builds.spotifycdn.com/cef_binary_127.0.20%2Bg1567840%2Bchromium-127.0.6533.57_windows32_beta_client.tar.bz2

This is not MM issue, but actually Regression introduced in Chromium 121 and apparently fixed in latest 127 Beta.

Lowering priority till we upgrade to chromium 127+ for testing.
dark_light.html (377 bytes)    
<html>
   <style>
/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
    </style>
    <body>
        <span>Dark/Light</span>
    </body>
</html>
dark_light.html (377 bytes)   

zvezdan

2024-07-23 04:00

updater   ~0076380

Last edited: 2024-07-23 19:24

 I don't know who is the author of these "various Chromium SAMPLE Client builds". I am just wondering if it is the issue with Chromium itself, how do you explain that it works fine in three web browsers from three different authors using Chromium 123-126? I didn't try Vivaldi and other Chromium based browsers, but I am pretty sure they would work fine as well.

Edit: Tested the latest Vivaldi 6.8.3381.48 based on Chrome 126 and Brave 1.65.126 based on Chromium 124. Both work fine.

peke

2024-07-23 14:45

developer   ~0076381

To clarify bit more, Those sample compiled clients are Vanilla Chromium clients based on its source code and exactly the same code we use before we internally apply patches for MM usage.

What other browsers do and what internal patches they apply we do not influence. FYI as you already know not all browsers support all the features, some support them better some don't.

The cause of this bug is in Chromium source, so once we update to 127 it can be retested.