1644428 - Compatibility Panel should react to DOM manipulation while listing all compatibility issues

Status: RESOLVED FIXED

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

Description

[Kriyszig]

Attachment: index.html

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

Steps to reproduce:

• Open the attached index.html in Firefox
• Open DevTools and navigate to Inspector and open the compatibility panel
• Wait for 5 seconds for JavaScript to trigger a style change and append an element to body with incompatible CSS via a setTimeout

Actual results:

The All Issues section of Compatibility Panel is empty

Expected results:

The incompatible CSS for body and the incompatible CSS of the newly added element appears in the All Issues section of the Compatibility Panel

Comment 1

[Kriyszig]

Attachment: Compatibility issues on normal internet speed

Comment 2

[Kriyszig]

Attachment: on-normal-3g.png

Comment 3

[Kriyszig]

To reproduce the above case:

• Go to http://twitter.com
• Open DevTools
• Go to Network Monitor and throttle to Regular 2G
• Go to the inspector and open the compatibility panel
• Reload the page

What happens?
Lot less issues appear because compatibility panel computes the compatibility issues for the initial loading screen

What should have happened?
All the issues should be listed

Comment 4

[Kriyszig]

Attachment: Bug 1644428 - Enable Compatibility Panel to react to attribute Mutations r=daisuke,mtigley

Note: This is a request for comments for the approach to solution.
By no means is this the final solution.

Use WalkerEventListener to react to display changes, attribute
mutation and childList changes
The implementation is not polished and reuses the components defined
already. On a DOM change, the same function used to append to the
list of all issues is reused to append the changes to the list.
The reducer is modified to check for existance of node and append
to the list only if it previously doesn't exist.

Possible changes to polish implementation:

• Extract thhe logic into seperate internal functions
• Add sperate reducer for appending issue

Comment 5

[Kriyszig]

Attachment: Bug 1644428 - Enable Compatibility Panel to react to dynamic DOM node insertion and deletion r=daisuke,mtigley

Currently the Compatibility Panel doesn't react to dynamic DOM
node addition and removal which poses a problem for websites that
depend on client side rendering using the modern framework and
render contents based on dynamic API calls. The updation fails
when switching between routes on a single page application.
In this patch, we use inspector's markupmutation event to listen
to childList and customElementDefined events which cover these
DOM mutations.
Whenever we find a node being added or removed, we compute compatibility
issues for the newly added nodes and remove references to the removed
nodes in the compatibility panel.

Depends on D79333

Comment 6

[Kriyszig]

Attachment: Bug 1644428 - Added tests to verify Compatiblity Panel reacting to DOM mutations r=daisuke,mtigley

The tests cover the following test cases:

• Dynamic addition of inline style
• Dynamic change of classlist - addition and removal of class
• Inline style change via the rule-view
• Dynamic addition of nodes with issues
• Dynamic addition of nodes whose children have issues
• Dynamic removal of node with issue
• Dynamic removal of node whose children have issue

Depends on D80170

Comment 7

[Kriyszig]

Attachment: Bug 1644428 - Cleanup: Arrange actions, reducers, imports and function in alphabetical order r=daisuke,mtigley

This patch does the following cleanup:

• Arrange actions in alphabetical order
• Arrange reducers in alphabetical order
• Arrange imports in alphabetical order
• Arrange functions in alphabetical order

This keeps it consistent with the code style in the compatiblity directory

Depends on D81443

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/de628ed7e4c0
Enable Compatibility Panel to react to attribute Mutations r=daisuke,mtigley
https://hg.mozilla.org/integration/autoland/rev/3a206857b1da
Enable Compatibility Panel to react to dynamic DOM node insertion and deletion  r=daisuke,mtigley
https://hg.mozilla.org/integration/autoland/rev/2100b866fe5c
Added tests to verify Compatiblity Panel reacting to DOM mutations r=daisuke,mtigley
https://hg.mozilla.org/integration/autoland/rev/81c4780511c2
Cleanup: Arrange actions, reducers, imports and function in alphabetical order r=daisuke,mtigley

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/de628ed7e4c0
https://hg.mozilla.org/mozilla-central/rev/3a206857b1da
https://hg.mozilla.org/mozilla-central/rev/2100b866fe5c
https://hg.mozilla.org/mozilla-central/rev/81c4780511c2