1832815 - Compatibility tooltip icon could be better

Status: NEW

(DevTools :: Inspector: Rules, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: baseline cross light

• it's using a default dark on light/light on dark color which doesn't really convey there might be issues in your code
• it's using a lightbulb icon, I guess to make a connection with the logo in https://webcompat.com/ , but I don't think it's very well known

Since Baseline was launched on MDN this week, I wonder if we could take some inspiration from it (or even use it directly)

• it's yellow/orange , better conveying a warning
• there's a variante for dark mode
• this would help link the idea of webcompat issue to something that might be more known by webdevelopers as they'll see this on MDN

One counter argument is that the display of the icon in the rule view wouldn't necessarily match how it would be displayed on MDN as we have different heuristicts (for us, the icon is displayed when one of the browser you chose in the compat panel settings is not supported, on MDN, the cross icon is displayed if one browser doesn't support it for current version - 1)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Simon, since you were involved in baseline, would you have an opinion on this?

Comment 2

[Simon Pieters [:zcorpan]]

I don't think it makes sense to use the Baseline icon for something that isn't using the baseline feature-set data.

Where is the icon shown?

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: compatibility tooltip

this is not enabled yet, but it will be displayed in the rule view

Comment 4

[Simon Pieters [:zcorpan]]

OK. Would it work to take the browser icon of the first unsupported browser (or a maybe generic browser icon) and have an "!" or diagonal line or cross over?