Depends on D84973
This was highlighted by browser_grids_grid-list-on-iframe-reloaded.js which fails without this fix.
Differential Revision: https://phabricator.services.mozilla.com/D84974
Depends on D85599
The WalkerActor is currently responsible for watching navigations and exposes them to the client.
However, this is communicated to the client differently depending on what kind of frame navigates.
If the top frame of the target navigates, this will be exposed via the watchRootNode API (onDestroyed/onAvailable callbacks will be triggered)
If an inner frame navigates, mutations will be emitted: "frameLoad"/"documentUnload" + a fake "childList" mutation.
On the client side, we have to handle both very similarly which leads to some duplication.
Also "frameLoad"/"documentUnload" are one of the last "immediateMutations" which usually means they should not have been mutations in the first place.
The goal here is to use the watchRootNode API for all frames.
Differential Revision: https://phabricator.services.mozilla.com/D84973
The backwards compatibility checks existed to support devtools
backend for version older than FF79. Now that FF79 has hit the
release channel, these tests for older backend can be removed.
Differential Revision: https://phabricator.services.mozilla.com/D86142
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
Differential Revision: https://phabricator.services.mozilla.com/D84218
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
Differential Revision: https://phabricator.services.mozilla.com/D81474
Using allowMatchingRejectionsGlobally in a test will leak to all the tests running after it in the same suite. We should avoid using it as much as possible.
Differential Revision: https://phabricator.services.mozilla.com/D84963
This patch is borrowing a change that's coming with D85239 to fix the issue that the Changes panel shows as empty when it should show changes tracked in the background (before the Changes panel is opened).
The reason, as identified in D85239, is that the Changes panel reacts to `DOCUMENT_EVENT` resources which are cached in the resource watcher. The Changes panel thinks that the document is reloading so it clears all the changes that were collected. The result in an empty Changes panel.
The screenshot below shows the resource types and the order in which they arrive:
{F2382929}
Differential Revision: https://phabricator.services.mozilla.com/D85603
This test is highly intermittent locally, and it seems to be spiking on try since bug 1633727.
The issue is that we try to click on the "flex" badge too quickly after selecting the node, before the flexbox store has had time to update.
Differential Revision: https://phabricator.services.mozilla.com/D85403
The test is currently a permafail with fission enabled.
TestActor gets destroyed when navigating from about:blank to the test page and can be replaced by SpecialPowers calls.
Differential Revision: https://phabricator.services.mozilla.com/D84478
Depends on D83194
Those test helpers were introduced to easily assert the markup view, when working on the webcomponents support in the inspector.
They use rather high level APIs and are quite close to what would be triggered by real user actions.
Roughly the helper expands nodes from the markupview recursively and checks that the tree matches the expected tree.
This "expected tree" should be provided via a simplistic DSL:
```
root
child1
subchild1
subchild2
child2
subchild3!slotted
child3!ignore-children
```
Differential Revision: https://phabricator.services.mozilla.com/D79674
This patch migrates to using the Resource Watcher API to handle Network events, it adds a legacy listeners for the network events
Differential Revision: https://phabricator.services.mozilla.com/D71543
This patch migrates to using the Resource Watcher API to handle Network events, it adds a legacy listeners for the network events
Differential Revision: https://phabricator.services.mozilla.com/D71543
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
Differential Revision: https://phabricator.services.mozilla.com/D82057
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
Differential Revision: https://phabricator.services.mozilla.com/D81443
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.
Differential Revision: https://phabricator.services.mozilla.com/D80170
Compatibility panel doesn't react to programmatic attribute changes
caused as a result of JavaScript execution.
This patch uses inspector's `markupmutation` event to listen to
markup mutations and react to attribute changes dynamically.
Whenever a node undergoes a programmatic inline attribute change
that is not monitored by Resource Watcher currently, the issues
linked to the node is revaluated and updated.
Differential Revision: https://phabricator.services.mozilla.com/D79333
Added nodes of type DOCUMENT_NODE to the excluded types for deletion.
In order to test the context menu options for document nodes a new helper function getFrameDocument() got introduced that returns the document node of an iFrame.
Differential Revision: https://phabricator.services.mozilla.com/D81241
We can't create a Redux store without reducers. Redux throws an error.
It's benign and doesn't impact anything (panels load reducers on-demand before accessing them), but it's annoying to see the error in the console and in tests.
Differential Revision: https://phabricator.services.mozilla.com/D81047
This patch does the following:
1. Adds a semantic document role to the computed styles pane. This causes screen readers to treat it as something they can use their reading commands on for better navigation and efficiency.
2. Gives the expansion twisties a button role and a label. I am reusing the labels introduced in an earlier patch.
3. Turns the name portion of each property into a heading so screen reader users can quickly skip between them, regardless of their expanded status or not.
4. Explicitly displays the status for each rule match with visually hidden text because screen readers do not pick up text from titles on simple span elements.
5. Adjusts the visually-hidden class to be more modern and less intrusive.
Differential Revision: https://phabricator.services.mozilla.com/D79673
This patch adds a `CompatibilityActor` that calls the MDNCompatibility
library from the devtool server.
This patch exposes `_declarations` from the `StyleRuleActor` and the
a new function `formDeclaration` responsible for populating the
declarations property.
As a check for correctness, the patch replaces the `pageStyle.getApplied`
call in the Compatibility Panel on the client with `compatibility.getNodeCssIssues`
fetching the array of compatibility issues directly and removing the
dependency on MDNCompatibility library for client side computation of
compatibility issues.
Differential Revision: https://phabricator.services.mozilla.com/D77060
While cleaning up and restructuring client-side code to manage highlighters, I discovered that FlexItemHighlighter is not implemented / landed ([Bug 1477614](https://bugzilla.mozilla.org/show_bug.cgi?id=1477614)).
To ease clean-up and review of incoming changes, I am removing this orphaned code. It will be available with this revision if we need to revert it later.
Differential Revision: https://phabricator.services.mozilla.com/D79517
This patch does the following:
1. Adds a semantic document role to the computed styles pane. This causes screen readers to treat it as something they can use their reading commands on for better navigation and efficiency.
2. Gives the expansion twisties a button role and a label. I am reusing the labels introduced in an earlier patch.
3. Turns the name portion of each property into a heading so screen reader users can quickly skip between them, regardless of their expanded status or not.
4. Explicitly displays the status for each rule match with visually hidden text because screen readers do not pick up text from titles on simple span elements.
Differential Revision: https://phabricator.services.mozilla.com/D79673
This patch does the following:
1. Both the flex-direction and flex-wrap badges are being treated as illustrations, not generic containers, so screen readers immediately pick up the full meaning from the title.
2. Turns the flex item list sub heading into an actual heading for screen readers. It is level 3 because the accordeon headings are all level 2.
Differential Revision: https://phabricator.services.mozilla.com/D79129
This patch adds IDs to all the box divs so they can be referenced by ARIA attributes. The actual legend spans also act as region landmarks with an associated level so the nesting is relayed.
In addition, each of those boxes gets the buttons for its dimensions rendered in-place so for assistive technologies, this all follows a logical flow. aria-owns changes the accessibility tree so the nesting and associated properties are grouped together.
The actual buttons also receive a localizable aria-label that is a combination of the button text and title, so screen reader users not only hear "0 button" without knowing immediately what that button actually belongs to. Title is secondary information.
Differential Revision: https://phabricator.services.mozilla.com/D78953
This patch turns the info that holds the dimensions and position info into a region. Because the visual representation is without explanatory text, an aria-label is constructed for that region to hold a more explicit version of the displayed information.
Differential Revision: https://phabricator.services.mozilla.com/D78952
1. Fix the twisty so it has a role and name that reflects the action the button will take when clicked (show or hide).
2. Give the section itself a heading so it can easily be found. Make it a level 3 so it is clear that this is a sub section of the box model view.
3. Order the properties themselves in a table with rows for each property, and cells for the name and value.
4. Make the property names and values, which are not editable, not clickable.
Differential Revision: https://phabricator.services.mozilla.com/D78951