Godot-proposals: In the `Filesystem` panel, when mousing over an image, show the image in the tooltip

[define-private-public]

Describe the project you are working on:
I'm currently running through the docs to learn how to use Godot. I'm planning on doing some Game Jams with it, and resurrecting some older projects.

Describe the problem or limitation you are having in your project:
Not a limitation, but a usability enhancement for Godot. Right now when trying to identify images in the FileSystem panel, all you can rely on is the name of the file, or the tiny preview icon.

Describe how this feature / enhancement will help you overcome this problem or limitation:
Right now when mousing over an image in the FileSystem panel, it will only show the filename in the tooltip. I think it would be more useful if the actual image (or a preview of it) showed up in the tooltip. I've seen this done in all sorts of applications.

Show a mock up screenshots/video or a flow diagram explaining how your proposal will work:
I think this is simple enough to not need a mockup creation, but I can provide one if requested.

Describe implementation detail for your proposal (in code), if possible:
Pseudocode provided by @Jummit:

if file is Image then
   set_custom_tooltip(new ImageTexture().from_data(file.data))
else
   set_tooltip(file.name)
end

I do think that there should be a hard limit on the tooltip size. e.g. 256x256 pixels max. Anything larger should be scaled down.

If this enhancement will not be used often, can it be worked around with a few lines of script?:
N/A

Is there a reason why this should be core and not an add-on in the asset library?:
Very nice (and hopefully simple) usability enhancement.

[Calinou]

This will require implementing a custom tooltip system, as the built-in tooltip can only display simple unformatted text. EditorHelpBit can embed a RichTextLabel (which can technically embed an [img] tag), but using it for this purpose would be pretty hacky.

This tooltip could also display the image size and format (compression mode) below the image preview.

[KoBeWi]

This will require implementing a custom tooltip system

We have one actually. _make_custom_tooltip is for that. It can take any Control.

[Jummit]

Here is the code that needs modifying:
https://github.com/godotengine/godot/blob/a2871cc06b4acaf9b0f4a5e4cd4c99bc826ab059/editor/filesystem_dock.cpp#L213-L231
Pseudocode:

if file is Image then
   set_custom_tooltip(new ImageTexture().from_data(file.data))
else
   set_tooltip(file.name)
end

@define-private-public feel free to put that in OP.

[Calinou]

@Jummit One will most likely have to embed the image in a TextureRect node, which will require a bit of additional setup.

[Jummit]

Pseudocode

[define-private-public]

Two other things I'd like to propose:

1. People tend to like to use pixel art, which can be very low resolution (e.g. 16x16). For image sizes under a certain threshold (such as below 32x32) should the images be scaled up (without interpolation) to meet the threshold?
2. Right now I think it would be best to keep this to the scope of images only. But in the future, would previewing 3D models and animated GIFs seem useful as well? My only concern is if the file sizes are very large, and it takes a long while to load them in the tooltip; though this could be resolved by doing a load n' preview render in the background and saving it to a cache.

[Jummit]

Should the images be scaled up?

Use import options for that. You can set a default when importing loads of small files.
EDIT: Sorry, this only works for SVG files. Maybe it could be supported for bitmaps as well.

1. But in the future, would previewing 3D models and animated GIFs seem useful as well?

This is all already implemented, just not as a tooltip.

All that cache stuff you are talking about, it's already there.

[KoBeWi]

Related to https://github.com/godotengine/godot/issues/30171 btw

EDIT:
My original proposal is being closed, so I'm hijacking this one xd

IMO this could be expanded to other information too, like file size or image size. So you can e.g. easily check image dimensions without needing to open it in the inspector. Here's a mockup stolen from Windows Explorer: