Settting Hover Media Query

[GrabzIt]

Is there anyway to force cefsharp to force the hover media query?

@media (hover: hover) {
  body{
  background:red;
  }
}

I have been trying to set it using the devtools but I think I may have missed something.

[amaitland]

Is there anyway to force cefsharp to force the hover media query?

Can you please clarify what you mean by force the hover media query?

I have been trying to set it using the devtools but I think I may have missed something.

What does your code look like?

[GrabzIt]

When called from a server without accessing via RDP, the hover value is not set. From what I have uncovered this is due to the mouse not being available. So I have been searching for a solution I thought the emulator might help.

I have tried:

public void OnAfterCreated(IWebBrowser chromiumWebBrowser, IBrowser browser)
{
            using (var client = chromiumWebBrowser.GetDevToolsClient())
            {
                _ = client.Emulation.SetEmulatedMediaAsync("hover", new List<MediaFeature>() { new MediaFeature() { Name="hover",Value="hover" } });
            }
}

I have also tried:

public void OnAfterCreated(IWebBrowser chromiumWebBrowser, IBrowser browser)
{
            using (var client = chromiumWebBrowser.GetDevToolsClient())
            {
                _ = client.Emulation.SetEmulatedMediaAsync(null, new List<MediaFeature>() { new MediaFeature() { Name="hover",Value="hover" } });
            }
}

[amaitland]

When called from a server without accessing via RDP, the hover value is not set. From what I have uncovered this is due to the mouse not being available.

How are you triggering the hover state currently? SendMouseMoveEvent?

Are you generating a PDF, taking a screenshot?

Little more information about what's going on would be helpful, thanks.

A quick look at the puppeteer source for SetEmulatedMedia and the accepted values would appear to be prefers-color-scheme, prefers-reduced-motion, prefers-color-gamut. Not clear if those would be useful in this context.

https://github.com/puppeteer/puppeteer/blob/8ff9d598bf4afd10cbc61ca9579b7bd38edb8026/src/common/Page.ts#L2307

[GrabzIt]

The CSS media query hover @media (hover: hover) basically says is the browser cable of hovering. If it is show x. Without a mouse connected this is set to none. Using SendMouseMoveEvent method doesn't trigger the CSS, from what I can see as this is CSS this is used by the browser before any mouse events.

I am using this to create PDF's and screenshots.

I guess none of the client.CSS methods would be of any use? I have looked through them but can't find anything obvious.

[amaitland]

Your original example if I'm reading it correctly should set the body background to red on hover. How is this being used in the context of your PDF/screenshot generation?

How are you emulating the mouse?

I'm still unclear on how to reproduce the problem. Need a little more information so I can investigate.

[GrabzIt]

Not quite. That CSS will make the background red in a browser that supports hover. So if you view it in a normal browser it will work.

However if you run it from a server without a mouse connected, so not via RDP, it won't work.

Another way of testing this is to run a simple windows service calling one of the examples exes that create a screenshot on the above code. As this is running in isolation mode, i.e session 0 it won't have access to the mouse on your PC and therefore the above code doesn't work.

From what I have managed to find out this is a chrome thing media queries uses MediaValues::CalculateAvailableHoverTypes() which calls in ui::GetAvailableHoverTypes(), which calls IsMouseOrTouchpadPresent(), which calls DeviceDataManager::GetTouchpadDevices() and checks for presence of an active touchpad or a mouse.

Which was why I thought there might be a way to set hover media query with emulation. But maybe there isn't.

[amaitland]

The Puppeteer issue tracker has an open issue for adding support puppeteer/puppeteer#4820 (and also puppeteer/puppeteer#5096). So it doesn't look like this will be possible using DevTools currently.

Chromium Issue 1058326 suggests the proposal was made to allow emulation via devtools, they don't have any plan to implement currently.

From what I have managed to find out this is a chrome thing media queries uses MediaValues::CalculateAvailableHoverTypes() which calls in ui::GetAvailableHoverTypes(), which calls IsMouseOrTouchpadPresent(), which calls DeviceDataManager::GetTouchpadDevices() and checks for presence of an active touchpad or a mouse

I had a dig through the Chromium code and haven't yet found a configuration option or command line arg that would achieve the desired behaviour.

The two workarounds I can think of are:

• modify the rules using javascript (haven't tested)
• Rewrite the css before it's rendered (probably the less desirable option).

[amaitland]

Third possible workaround: modify the media query rules through DevTools Protocol. The DevTools interface in Chrome allows for modifying rules on the fly, so should be possible to workout the commands it uses and replicate them.

[GrabzIt]

Thanks for your investigation you have come up with the some interesting conclusions. I think you are right the DevTools Protocol is probably the most reliable way to do this, as it is not an issue for one website but many.

Reading this: https://chromedevtools.github.io/devtools-protocol/ It seems like the protocol mimics what you have in the DevTools API in CefSharp.

I have tried calling this after a page has loaded as well as in the OnAfterCreated event and it hangs at EnableAsync when trying to use the CSS properties it seems to work fine for Emulation. Is there a working example of this anywhere?

            using (DevToolsClient client = chromiumWebBrowser.GetDevToolsClient())
            {
                Console.WriteLine("here");
                await client.CSS.EnableAsync();
                Console.WriteLine("done");
                GetMediaQueriesResponse response = await client.CSS.GetMediaQueriesAsync();
                Console.WriteLine("got");
                if (response != null)
                {
                    foreach (CSSMedia media in response.Medias)
                    {
                        Console.WriteLine(media.Text);
                        if (media.Source == CSSMediaSource.MediaRule && !string.IsNullOrEmpty(media.Text) && media.Text.Contains("hover"))
                        {
                            Console.WriteLine(media.Text);
                        }
                    }
                }
            }

[amaitland]

Reading this: https://chromedevtools.github.io/devtools-protocol/ It seems like the protocol mimics what you have in the DevTools API in CefSharp.

The CefSharp API is generated from the browser at runtime by enabling settings.RemoteDebuggingPort = 9222 and loading the url in the browser e.g. http://localhost:9222/json/protocol

It might differ slightly as the online protocol viewer might haver never methods/events etc. I update the DevTools protocol in CefSharp for every version so it's version specific.

hangs at EnableAsync when trying to use the CSS properties it seems to work fine for Emulation. Is there a working example of this anywhere?

Quick check and when I call EnableAsync it throws an exception saying to enable DOM first. The following works for me.

[Fact]
public async Task CanGetMediaQueries()
{
	using (var browser = new ChromiumWebBrowser("https://cefsharp.github.io/demo/mediaqueryhover.html"))
	{
		await browser.WaitForInitialLoadAsync();

		using (var devToolsClient = browser.GetDevToolsClient())
		{
			await devToolsClient.DOM.EnableAsync();
			await devToolsClient.CSS.EnableAsync();

			var mediaQueries = await devToolsClient.CSS.GetMediaQueriesAsync();

			Assert.True(mediaQueries.Medias.Count > 0);
		}
	}
}

According to Add support for direct DevTools protocol messaging it's possible to use the --devtools-protocol-log-file=<path> command line arg in CEF (should also work in CefSharp) and get a lot of all calls made from within devtools. So we should be able to see what happens when modifying a media query style in the DevTools UI. This appears to be a CEF specific command line arg, not one that can be used in Chrome for instance. Have yet to test.

Will have a look when time permits.

[GrabzIt]

I didn't release a exception was being thrown!. I have used this to successfully change the media queries using: client.CSS.SetMediaTextAsync

Thanks for all your help, its been invaluable!