container query are not displayed properly in changes panel
Categories
(DevTools :: Inspector: Changes, defect, P2)
Tracking
(firefox111 fixed)
Tracking | Status | |
---|---|---|
firefox111 | --- | fixed |
People
(Reporter: nchevobbe, Assigned: nchevobbe)
Details
Attachments
(2 files)
48 bytes,
text/x-phabricator-request
|
dmeehan
:
approval-mozilla-beta-
|
Details | Review |
48 bytes,
text/x-phabricator-request
|
dmeehan
:
approval-mozilla-beta-
|
Details | Review |
Steps to reproduce
- Go to data:text/html,<meta charset=utf8><style>body {container-name: b; container-type: inline-size;} %40container b (width > 0) { h1{background: tomato}} </style><h1>hello</h1>
- Open the inspector and select the
<h1>
node - Change
background
value tocyan
- Open the Changes panel
Expected results
The rule text is displayed properly
Actual results
The container query text is missing: undefined b (width > 0px) {
Assignee | ||
Comment 1•1 year ago
|
||
CSSRule.type is deprecated (see https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/type)
and new type of rules added recently (CSSContainerRule, CSSLayerBlockRule, …) don't
have a dedicated type, which means we can't target them.
Instead of looking into the type property, we should check the name of the class
to properly classify the rule.
Assignee | ||
Comment 2•1 year ago
|
||
A test is added to make sure those are displayed properly and that the "Copy Rule"
button gives the expected result.
Depends on D168951
Updated•1 year ago
|
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/fc72b0fdcd23 [devtools] Use CSS rules classnames instead of CSSRule.type. r=jdescottes. https://hg.mozilla.org/integration/autoland/rev/8b4a8e5b7206 [devtools] Add support for @layer and @container rules in Changes panel. r=jdescottes
Comment 4•1 year ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/fc72b0fdcd23
https://hg.mozilla.org/mozilla-central/rev/8b4a8e5b7206
Updated•1 year ago
|
Assignee | ||
Comment 5•1 year ago
|
||
Comment on attachment 9316116 [details]
Bug 1815159 - [devtools] Add support for @layer and @container rules in Changes panel. r=jdescottes
Beta/Release Uplift Approval Request
- User impact if declined: Changing a value inside a container query in the inspector rule view will show incorrect information in the Changes panel
- Is this code covered by automated tests?: Yes
- Has the fix been verified in Nightly?: No
- Needs manual test from QE?: No
- If yes, steps to reproduce:
- List of other uplifts needed: None
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): small, devtools only patch, covered by test
- String changes made/needed:
- Is Android affected?: No
Assignee | ||
Updated•1 year ago
|
Comment 6•1 year ago
|
||
Comment on attachment 9316115 [details]
Bug 1815159 - [devtools] Use CSS rules classnames instead of CSSRule.type. r=jdescottes.
:nchevobbe these patches landed in central before the 111 merge day.
111 is now in beta and already contains these patches.
Adding a needinfo if there's anything else to be aware of?
Updated•1 year ago
|
Assignee | ||
Comment 7•1 year ago
|
||
oh sorry about the noise, I thought it missed 111
Description
•