Broken image in browser support info for CSS features

[rviscomi]

Summary

The browser support info when hovering over a CSS property now includes a base64-encoded SVG image of the Baseline icon, which indicates how widely supported the feature is, but the alt text is appearing instead.

Steps to trigger the problem:

1. Open a CSS file, eg https://github.com/rviscomi/baseline-demos/blob/main/eslint/src/test.css
2. Hover over a CSS property, eg aspect-ratio

Actual Behavior:

The "Baseline icon" alt text shows instead of the icon itself

Expected Behavior:

The icon should be shown, consistent with the VS Code Insiders behavior.

For reference, here's the line in vscode-css-languageservice that sets the image:

https://github.com/microsoft/vscode-css-languageservice/blob/main/src/languageFacts/entry.ts#L180

Zed Version and System Specs

Zed: v0.180.3 (Zed) OS: macOS 14.7.4 Memory: 16 GiB Architecture: aarch64

[rviscomi]

After a quick look through the code and related issues, it seems like markdown.rs would need a new match arm to handle images.

This is somewhat related to #28300 as it also deals with unwanted content appearing in the markdown (cc @XDeme1)

[XDeme1]

Yes, we need to handle the image case in markdown.rs, the images will probably come in data url One more thing to change is probably the paint_svg function, because it only accepts a path to an svg right now.

[rviscomi]

In case it helps with prioritization, I wanted to mention that we're planning to give Zed a shoutout at Google I/O next month as being one of several IDEs that inherited support for this new Baseline feature. It'd be great to have the broken image fixed by then, but totally understand that there may be higher priority issues.

[rviscomi]

FYI that there was a similar change to the HTML language server recently, so this image bug applies to HTML elements and attributes now too:

[rviscomi]

Might be worth reopening this issue while https://github.com/zed-industries/zed/pull/30322#issuecomment-2880109462 is investigated

[notpeter]

I've edited your description to reflect the icons being the wrong color and fixed the sample repro repo link (thanks for providing that).

I was not able to reproduce the icon not showing at different zoom levels. If you have steps to trigger than (font size / font settings / etc) please include those here.

[github-actions[bot]]

Hi there! 👋 We're working to clean up our issue tracker by closing older bugs that might not be relevant anymore. If you are able to reproduce this issue in the latest version of Zed, please let us know by commenting on this issue, and it will be kept open. If you can't reproduce it, feel free to close the issue yourself. Otherwise, it will close automatically in 14 days. Thanks for your help!

[rviscomi]

I can confirm that there are still issues with the color/sizing of the icons as of Zed 0.212.7.

The size issue is apparent when the window size is small and the Baseline text gets cut off, even with default font settings.

Small window, text cut off, no icon:

Bigger window, text isn't cut off, icon squished to fit, icon is the wrong color (expected orange):

Gratuitously large window, text isn't cut off, icon appearing at the expected size, icon is the wrong color (expected orange):

Here's another example of an icon being the wrong color (expected blue):

[miguelraz]

Sorry for the noise, the bot got an issue upstream and went haywire: https://github.com/actions/stale/issues/1302.