Inspector’s CSS rule display broken with shorthand and custom property fallback
Categories
(DevTools :: Inspector: Rules, defect, P2)
Tracking
(firefox-esr102 unaffected, firefox-esr115 unaffected, firefox115 unaffected, firefox116 verified, firefox117 verified)
| Tracking | Status | |
|---|---|---|
| firefox-esr102 | --- | unaffected |
| firefox-esr115 | --- | unaffected |
| firefox115 | --- | unaffected |
| firefox116 | --- | verified |
| firefox117 | --- | verified |
People
(Reporter: robin, Assigned: nchevobbe)
References
(Regression)
Details
(Keywords: regression)
Attachments
(2 files)
|
165 bytes,
text/html
|
Details | |
|
48 bytes,
text/x-phabricator-request
|
diannaS
:
approval-mozilla-beta+
|
Details | Review |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0
Steps to reproduce:
Load a page with a rule that has a custom property and a fallback inside shorthand, for example:
body { border: 1px solid var(--test, red); }
Actual results:
CSS rule is display in devtools as:
var(--test,1px solid red)
That is, the initial part of the shorthand is pulled inside the fallback section of the custom property.
Expected results:
The rule should have been displayed as written:
1px solid var(--test, red)
|
Reporter | |
Comment 1•2 years ago
|
||
Minimised test case attached. Load this into Firefox, open dev tools, and inspect body.
|
||
Comment 2•2 years ago
|
||
|
|
||
Comment 3•2 years ago
|
||
Thanks for the report and test case. Need to check if this is a recent regression or not.
|
||
Updated•2 years ago
|
|
Assignee | |
Comment 4•2 years ago
|
||
It looks like we have an issue with the parser.
In https://searchfox.org/mozilla-central/rev/a3852ea8db25c759bc8b108aeec870d66c95452c/devtools/client/shared/output-parser.js#318-321
const saveParsed = this.#parsed;
this.parsed = [];
const rest = this.#doParse(text, subOptions, tokenStream, true);
this.parsed = saveParsed;
so, reading from this.#parsed but setting this.parsed. This was regressed in Bug 1836704
|
|
Assignee | |
Comment 5•2 years ago
|
||
|
||
Updated•2 years ago
|
|
||
Comment 6•2 years ago
|
||
Set release status flags based on info from the regressing bug 1836704
|
||
Comment 8•2 years ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 9•2 years ago
|
||
Comment on attachment 9343495 [details]
Bug 1841502 - [devtools] Fix erroneous use of this.parsed in OutputParser. r=#devtools-reviewers.
Beta/Release Uplift Approval Request
- User impact if declined: erroneous information is displayed in DevTools inspector rules view when using css custom properties
- Is this code covered by automated tests?: Yes
- Has the fix been verified in Nightly?: No
- Needs manual test from QE?: Yes
- If yes, steps to reproduce: 1. Open https://bugzilla.mozilla.org/attachment.cgi?id=9342089
- Open the inspector
- Select the
<body>in the markup view
In the rule view, the border property should be 1px solid var(--test, red)
- 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 automated test
- String changes made/needed:
- Is Android affected?: No
|
|
Assignee | |
Updated•2 years ago
|
|
||
Updated•2 years ago
|
|
||
Comment 10•2 years ago
|
||
Reproduced this issue on an affected Nightly build from 2023-07-03, on Ubuntu 22.
Verified as fixed on Firefox 117.0a1 (2023-07-13) across the following platforms: Ubuntu 22, macOS 10.15 and Windows 11.
|
||
Comment 11•2 years ago
|
||
Comment on attachment 9343495 [details]
Bug 1841502 - [devtools] Fix erroneous use of this.parsed in OutputParser. r=#devtools-reviewers.
Approved for 116.0b6
|
||
Comment 12•2 years ago
|
||
|
|
||
Updated•2 years ago
|
|
||
Comment 13•2 years ago
|
||
Verified as fixed with 116.0b6 on: Ubuntu 22, macOS 13 and Windows 10.
Description
•