1649021 - [ruleview] Implement the inline CSS compatibility warning in ruleview

Status: RESOLVED FIXED

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

Description

[Kriyszig]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:79.0) Gecko/20100101 Firefox/79.0

Expected results:

This covers the implementation of the tooltip component for the inline CSS compatibility warning tooltip

Comment 1

[Kriyszig]

Attachment: Bug 1649021 - Add tooltip in rules panel to highlight CSS compatiblity issues for particular declaration r=mtigley,daisuke

Use CompatibilityActor to fetch the compatiblity information for
a particular CSS declaration and show a tooltip for the
incompatible CSS declaration that may cause issue on platform

Depends on D81473

Comment 2

[Kriyszig]

Attachment: Bug 1649021 - RFC: Use react-dom-server to render browserlist in tooltip

Given we need the template to be a string, we can use the
react-dom-server to render the UnsupportedBrowserList component
as a string thus reducing code duplication.

Note: This is an RFC and not a definite implementatio path.

Comment 3

[Micah [:mtigley] (she/her)]

Attachment: use_browserloader.diff

A small patch that reuses the existing UnsupportedBrowserList component by loading the module into the compatibility tooltip helper's own environment.

Comment 4

[Kriyszig]

Attachment: Bug 1649021 - Move shared component between compatibility panel and compatibility tooltip to shared folder r=mtigley,daisuke

This patch moves the UnsupportedBrowserList React component and it's dependencies
to devtools/client/shared/compatibility
All the paths linked to the moved components have been updated to
point to the components in shared folder

Depends on D81474

Comment 5

[Kriyszig]

Attachment: Bug 1649021 - Add tests for CSS Compatibility Tooltip r=mtigley,daisuke

The CSS Compatibility Tooltip tests cover the following cases:

• Check if the contents of the tooltip match the rendered template
• Check compatible rules aren't falsely marked incompatible
• Check incompatible rules are marked correct with icon appearing next to it
• Check toggling rule disable hides the icon
• Check adding rules updates the compatibilility status
• Check the compatibility icon disappears if a fix is added

Depends on D83909

Comment 6

[Kriyszig]

Attachment: Bug 1649021 - Move snapshot tests for shared components from inspector/compatibility to shared/compatibility r=ladybenko!,daisuke,mtigley

Based on implementation in D49256,this patch moves the snapshot
tests for the components shared between the compatibility panel and the
compatibility tooltip to shared/compatibility/test/node
The components UnsupportedBrowserList and UnsupportedBrowserItem
were moved to devtools/client/shared/compatibility in D83909.
The lock files and configs are copied from
devtools/client/inspector/compatibility/test/node and are exactly
identical except for the package name in package.json

Depends on D83909

Comment 7

[Micah [:mtigley] (she/her)]

Hi Martin! Was wondering if you had a chance to check Daisuke's question about the UTM parameters for the compatibility tooltip's "Learn more" link?

The original inline comment is at https://phabricator.services.mozilla.com/D81474#inline-484879

Comment 8

[Martin Balfanz [:mbalfanz]]

Thanks for the ping, Micah! I guess my email filter didn't work as intended...

Anyways, I commented in phabricator. The UTM parameters look good :+1:

Comment 9

[Micah [:mtigley] (she/her)]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=0fd2b83bfe078348123b38234424f1f36062e4f0

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dfce9d57a546
Add tooltip in rules panel to highlight CSS compatiblity issues for particular declaration r=mtigley,daisuke,flod,ckerschb DONTBUILD
https://hg.mozilla.org/integration/autoland/rev/d651a9a4ef5f
Add tests for CSS Compatibility Tooltip r=mtigley,daisuke DONTBUILD

Comment 11

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/dfce9d57a546
https://hg.mozilla.org/mozilla-central/rev/d651a9a4ef5f

Comment 12

[Hamish Willee]

Hi,
I'm trying to test this prior to updating the MDN docs/release notes. However on FF83 and FF81 I can't get tooltip to appear. I used a few examples from the linked issues - e.g in this exmaple -webkit-font-smoothing:antialiased; should have a tooltip, but when I try it does not.

Is there something I need to do special to get the tooltips to work? If not, is there a page I can try to test this.

One further question - what level of detail does this show? Is it just "the current release version of each of these things doesn't work" or does this show all browsers and versions that don't work?

Comment 13

[Kriyszig]

Have you toggled the flag devtools.inspector.ruleview.inline-compatibility-warning.enabled to true in about:config?
If it still doesn't appear then please file a bug with the steps to reproduce and I'll look into it asap!
Thank you

Comment 14

[Kriyszig]

The compatibility details come from the open source repository maintained by MDN here - https://github.com/mdn/browser-compat-data
Currently the tooltip shows why a particular rule is incompatible (deprected, experimental, not implemented on all platforms) and lets you know which platforms the particular rule is supported on including the version number.

There is also a compatibility panel that can be viewed by setting the pref devtools.inspector.compatibility.enabled in about:config to true where you can see the incompatible rules and where it exists for the entire web page.
If you have any more questions, feel free to ask an I'll answer it as soon as possible.

Thank you.

Comment 15

[Hamish Willee]

Kriyszig THANKS very much. The fact this was hidden behind the preference wasn't obvious to me!

Please ignore the "request info" tag (or clear it). That was just to make sure you got this "thankyou" message.

Comment 16

[Hamish Willee]

FYI Kriyszig, FYI devtools.inspector.compatibility.enabled seems to be ignored in FF83 (at least). i.e. the compatibility pane next to layout, computed, changes etc is always on

Comment 17

[Kriyszig]

Ah I see. Thanks for bringing it to my notice.
Thank you for using this experimental feature. If you face any problems, you can leave a comment here of file a bug yourself and we'll get on it asap.