Closed Bug 1842314 Opened 1 year ago Closed 11 months ago

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

Categories

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

Firefox 117
defect

Tracking

(firefox117 fixed)

RESOLVED FIXED
117 Branch
Tracking Status
firefox117 --- fixed

People

(Reporter: chriskirknielsen, Assigned: nchevobbe)

References

Details

Attachments

(3 files)

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.

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

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.

Component: Untriaged → Layout: Text and Fonts
Product: Firefox → Core

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.

Component: Layout: Text and Fonts → Inspector: Rules
Product: Core → DevTools
Summary: Last item in custom property fallback list is hidden if used on font-family property → Last item in custom property fallback list is hidden [in DevTools Inspector] if used on font-family property

Thanks for reporting.
We can reproduce the issue.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2
See Also: → 1841502
Flags: needinfo?(nchevobbe)
Has STR: --- → yes

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

Flags: needinfo?(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

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Attachment #9343514 - Attachment description: Bug 1842314 - [devtools] Set expectFont option to false when parsing custom property content in OutputParser. r=#devtools-reviewers. → Bug 1842314 - [devtools] Consume `fontFamilyNameParts` outside of the loop going over tokens in. r=#devtools-reviewers.
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/438f5d514a4c
[devtools] Consume `fontFamilyNameParts` outside of the loop going over tokens in. r=devtools-reviewers,ochameau.
Status: ASSIGNED → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → 117 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: