1842314 - Last item in custom property fallback list is hidden [in DevTools Inspector] if used on font-family property

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Christopher Kirk-Nielsen]

Attachment: Screenshot 2023-07-07 at 20.18.01.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/114.0

Steps to reproduce:

TEST CASE: https://codepen.io/chriskirknielsen/pen/ExOwpdb

1. Create markup with a <p> and some text.
2. Style the paragraph using the font-family property in CSS with a custom property.
3. Give the var() a fallback value of a list of fonts, e.g.: var(--family, Georgia, serif).
4. Open Developer Tools panel and pick the <p> element.
5. In the Rules panel, look at the font-family value and notice the fallback list is missing the last item, showing: var(--family, Georgia,).

Notes:

• The custom property does not need to exist.
• If the fallback has a single value, it will show var(--family,).
• The correct styles appear in the Styles Editor panel.
• The expect style is correctly applied (you can test it with font-family: var(--_not_a_custom_property, NotARealFont, Georgia); and see the font is applied but you cannot see Georgia in the list with the underline as expected).
• If you edit the value in the Rules panel, it will remove the last item upon applying, e.g: editing var(--family, Georgia,) to var(--family, Arial, sans-serif) will result in a displayed value of var(--family, Arial,).

I tested the same case with a box-shadow and it did not exhibit the same problem, however it is possible it might affect other comma-separated properties that can be in a fallback, like backgrounds; I have not tested that.

Tested on stable Firefox v114 and Firefox Nightly v117, on macOS Ventura 13.4.1.

Actual results:

Developer Tools omits the last item in a custom property's fallback value if it is a comma-separated list when used on a font-family property.

Expected results:

The full list of fonts should appear in the Rules panel.

Comment 1

[Christopher Kirk-Nielsen]

Attachment: Editing the value in the Rules panel yields the same issue

Developer Tools bug also occurs when editing the fallback value in the Rules panel.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Jonathan Kew [:jfkthame]]

From the description, it sounds like the values are working correctly; it's just the display of the rule in DevTools that is wrong. So moving this to the DevTools component.

Comment 4

[Hubert Boma Manilla (:bomsy)]

Thanks for reporting.
We can reproduce the issue.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Doesn't look like this is the same issue as Bug 1841502 as this one can be reproduced on 115 and Bug 1841502 was introduced in 116

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Also, one thing I didn't notice at first: this is an invalid declaration. var() only takes a single fallback value, so that might be way we're missing any other param (we definitely shouldn't though).
Also, the value should be marked as invalid, not sure why it's not (there is a CSS warning in the console saying the the value can't be parsed and that the declaration is dropped)

erratum: it's not invalid

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1842314 - [devtools] Consume `fontFamilyNameParts` outside of the loop going over tokens in. r=#devtools-reviewers.

Depends on D183384

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/438f5d514a4c
[devtools] Consume `fontFamilyNameParts` outside of the loop going over tokens in. r=devtools-reviewers,ochameau.

Comment 9

[Sandor Molnar]

https://hg.mozilla.org/mozilla-central/rev/438f5d514a4c