1636274 - Clarify issue of entry shown in Compatibility panel

Status: NEW

(DevTools :: Inspector: Compatibility, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

From looking at the entries in the Compatibility panel it is sometimes unclear to the user what the actual issue is.

Examples:

• For font-smooth there should be a hint that it is a non-standard property.
• For hyphens/appearance there should be a hint that (some) browsers only implement a prefixed version. If a browser supports a prefixed version or has experimental support behind a flag, an individual hint should be shown for each browser. MDN's compatibility data already provides that information.
• For column-gap/row-gap/gap a hint should clarify that it is not supported in flex layout by most of the browsers. Again, that's something MDN's compatibility data has, though it's spread across different data sets.
• For cursor I don't really know what the issue is but I assume the underlying compatibility data for Chrome and Firefox for Android is wrong (cursor probably is still supported, I suppose, it's just not visible on touch devices)

Sebastian

Comment 1

[Daisuke Akatsuka (:daisuke)]

Thank you very much for the suggestoin, Sebastian!
Yeah, it would be helpful for the users.

I think, if we support such the hint, need additional knowledges similer to inactive css.
https://searchfox.org/mozilla-central/source/devtools/server/actors/utils/inactive-property-helper.js
So, for now, this may be fit to Inactive CSS framework.
In fact, we have a plan to show the compatibility issues in RuleView using Inactive CSS framework.
https://bugzilla.mozilla.org/show_bug.cgi?id=1636336
We may be able to consider above in that project first, then may be able to re-use the mechanism into this panel as well.

What do you think, Martin, Victoria?

Comment 2

[Sebastian Zartner [:sebo]]

I like the idea of showing the compatibility issues within the Rule View like it's done for inactive CSS.

Though this makes the separate Compatibility panel redundant and it might be removed as a side panel. But see bug 1636612.

Sebastian

Comment 3

[Sebastian Zartner [:sebo]]

Part of this issue (and bug 1636336) should also be an extended hint for the non-supporting browsers. Currently there are just the browser logos with the respective versions in a tooltip, though it is not obvious to the user what that means. Therefore the hint should be vastly extended saying something like this, for example:

The following browsers do not support this feature:
Firefox 76 (current), Firefox 77 (beta), Firefox 78 (nightly)
Safari 13.1 (current), Safari 14 (beta)

The following browsers only have partial support for this feature:
Chrome 81 (current), Chrome 82 (beta), Chrome 83 (developer)

The following browsers have experimental support for this feature:
Chrome 84 (nightly)

See the related MDN page for more information.

with "related MDN page" being linked to the browser compatibility information on MDN.
Sebastian

Comment 4

[Martin Balfanz [:mbalfanz]]

Thanks for the suggestions, Sebastian!

I think you have very valid points, and we need to investigate them. As Daisuke mentioned, we currently rely entirely on the data that MDN provides us. We need to evaluate how far we can go without rolling our own dataset.

Comment 5

[Victoria Wang [:victoria]]

I like the idea of showing the compatibility issues within the Rule View like it's done for inactive CSS.

Though this makes the separate Compatibility panel redundant and it might be removed as a side panel.

In our research, we found that people were very interested in both inline warnings and a list of all warnings (with the latter actually being more important to folks) so I think the redundancy is worthwhile.

Comment 6

[Victoria Wang [:victoria]]

It could be great to identify the most common issues and start with providing extra info on those.