Closed Bug 1649021 Opened 3 months ago Closed 2 months ago

[ruleview] Implement the inline CSS compatibility warning in ruleview


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

79 Branch


(firefox81 fixed)

81 Branch
Tracking Status
firefox81 --- fixed


(Reporter: lelouch.cpp, Assigned: lelouch.cpp)


(Blocks 1 open bug, Regressed 1 open bug)


(Keywords: dev-doc-needed)


(3 files, 3 obsolete files)

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

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

Assignee: nobody → lelouch.cpp
Blocks: 1636336
Severity: -- → S3
Ever confirmed: true
Priority: -- → P3
Depends on: 1649020

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.

Attachment #9163690 - Attachment is obsolete: true

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

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

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

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

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

Flags: needinfo?(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:

Flags: needinfo?(mbalfanz)
Attachment #9164273 - Attachment is obsolete: true
Attachment #9165121 - Attachment is obsolete: true
Pushed by
Add tooltip in rules panel to highlight CSS compatiblity issues for particular declaration r=mtigley,daisuke,flod,ckerschb DONTBUILD
Add tests for CSS Compatibility Tooltip r=mtigley,daisuke DONTBUILD
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 81 Branch
Regressions: 1658328
Regressions: 1660047
No longer regressions: 1660047
Regressions: 1659516
You need to log in before you can comment on or make changes to this bug.