enhancement: have the vnc screen's canvas be the native resolution of the guest

[breadtf]

Having the canvas resolution be greater than that of the guest leads to the guest looking blurry. Removing the scaling (or at least adding the option to toggle it) makes the guest much sharper and clearer. It also allows the whole screen to be viewed on smaller devices.

Here is a before and after of the scaling off (using a css hack)

Before:

After:

The issue doesn't come across well on screenshots, but zooming in you can clearly see the pixels are way sharper.

Before:

And after:

[garrett]

I agree! Optimizing for native resolution would be a good idea, especially when the host's resolution is less than the available space.

[breadtf]

Had a look at react-console's source (which the vnc viewer uses) and saw this

This looks like what's causing this annoying scaling, and, sure enough, there it was
(in src/components/vm/consoles/vnc.jsx)

A quick and dirty fix could just be to remove this line, as by default it's set to false. I'll test this solution later today and I'll let you all know if it worked.

[garrett]

Thanks!

The details page for a VM does need scaling, as does any resolution that's larger than the viewport (so it'd need to be scaled down). So we cannot just change it to unscaled in these cases.

Would there be a way to scale down, but not scale up? That would probably handle most uses of the widget by default where it needs scaling and would probably sidestep the blurriness you're seeing.

[breadtf]

Oh yeah, you're right. Completely forgot about that (Probably because I haven't used it)

That would probably involve creating an issue on react-console's github, as I doubt it would be possible here.
I'm not going to, though, because I'm not up for a wild goose chase trying to fix some minor issue. I'll just have to live with it for now and maybe make an issue later if it becomes more of a problem in future.

[garrett]

I think this is a valuable point to consider, and if we leave the issue open, it could serve as a reminder when we're (eventually) working on implementing the redesign of the in-page VNC viewer.

And, besides, react-console was originally from Cockpit Machines, so we can (and should... and even plan to) change it.

Thanks again for pointing out this issue!