Display view transition dynamic rules in the inspector view
Categories
(DevTools :: Inspector: Rules, enhancement, P2)
Tracking
(firefox147 fixed)
| Tracking | Status | |
|---|---|---|
| firefox147 | --- | fixed |
People
(Reporter: emilio, Assigned: nchevobbe)
References
(Blocks 2 open bugs)
Details
Attachments
(2 files)
Much like pres hints (bug 1212289), view transition dynamic rules (https://drafts.csswg.org/css-view-transitions-1/#document-dynamic-view-transition-style-sheet, implemented in bug 1947746) work in a similar way (not with a full cssRule but with a UA-origin declaration block).
After bug 1919853, we return CSSNestedDeclarations in getMatchingCSSRules. We could also return declaration blocks for pres hints and these, so it'd be a matter of exposing them.
|
Assignee | |
Updated•1 year ago
|
|
|
Assignee | |
Comment 1•1 year ago
|
||
Emilio, does this need work on the platform side or is everything doable directly from DevTools?
Also, do you have a link to a demo page that would show this ? Thanks
|
Reporter | |
Comment 2•1 year ago
|
||
So this needs some platform side work in InspectorUtils at least, to expose the declaration blocks that are not rules around here. That work is the same that would be needed for presentational hints (bug 1212289).
As for pages that trigger this, the view-transitions devtools integration is none right now, but with devtools.inspector.showAllAnonymousContent and such you can inspect a long-running animation like:
<!doctype html>
<style>
@keyframes blink {
from { opacity: 0 }
to { opacity: 1 }
}
:root::view-transition-new(foo) {
animation: blink 1s infinite alternate;
}
#target {
view-transition-name: foo;
width: 100px;
height: 100px;
background-color: green;
contain: paint;
}
</style>
<div id="target"></div>
<script>
target.addEventListener("click", function() {
document.startViewTransition(() => {
target.style.translate = "300px 0";
});
});
</script>
And you will see <div type=":view-transition-root"> etc. Some of those elements have these declarations applied.
Note the animation still doesn't quite work, but I'm working on that :)
My recommendation would be to get pres hints working first, it's a long-standing request and 99% of the work here :)
|
||
Comment 3•6 months ago
|
||
It looks like we could start accepting view transition pseudo elements from this server logic and then display these elements nicely in the markup view. Notably hidding the intermediate <div type=":-moz-snapshot-containing-block"> wrapping element?
|
|
||
Comment 4•6 months ago
|
||
Comment 3's link would be about showing rules in the rule view.
For the markup view, it may be about tweak this walker actor logic.
|
|
Assignee | |
Comment 5•5 months ago
|
||
We only had to handle the label on the inherited section for view transition
pseudo element.
A test is added to check that the rules are properly displayed when a view transition
pseudo element is selected in the markup view, and that the inherited properties
are visible and that the expected declarations are overridden (acts as a client
test for Bug 1997145)
|
||
Updated•5 months ago
|
|
|
Assignee | |
Comment 6•5 months ago
|
||
This will allow to check if a given declaration is considered as inactive (this
is used by the next patch in the queue).
The helper function is refactored a bit so we don't trigger the eslint complexity warning
|
||
Comment 8•5 months ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/4f30ae724651
https://hg.mozilla.org/mozilla-central/rev/91eee76f31df
|
||
Updated•4 months ago
|
Description
•