1854104 - Consider CSS attr() fallback

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Oliver Medhurst [:canadahonk]]

Support for CSS attr()'s fallback (eg attr(foo, "fallback")) is being implemented and shipped in Bug 1448248. It should display okay in DevTools currently but it could possibly be improved (needs investigation). No other browsers implement or ship it at this time.

Spec: https://drafts.csswg.org/css-values-5/#attr-notation

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

We could do what is done for var() and display the value not being used in a "disabled"-grey color
CanadaHonk, can we detect that in javascript that the fallback is used?

Comment 2

[Oliver Medhurst [:canadahonk]]

No unfortunately, the spec doesn't add anything to DOM/etc exposing any fallback info afaik. I would be happy to add it but would likely need an upstream spec issue deciding how best to do so.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Well, we can detect it using element.hasAttribute(...) right?

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1854104 - [devtools] Parse attr() function in OutputParser. r=#devtools.

This adds unmatched class to the attribute name or the fallback depending
on the existence of the attribute (provided via a getAttributeValue option.

In #parseMatchingParens, we know also return whitespace tokens so we can
reconstruct the authored value properly from it.

Test cases are added in browser_outputparser.js to cover this.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1854104 - [devtools] Strike through unused attr() parameter in Rules view. r=#devtools-reviewers

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d7d86bc85ab7
https://hg.mozilla.org/integration/autoland/rev/67683182d95c
[devtools] Parse attr() function in OutputParser. r=devtools-reviewers,jdescottes.
https://github.com/mozilla-firefox/firefox/commit/ea4858b781e0
https://hg.mozilla.org/integration/autoland/rev/e056a92f93f3
[devtools] Strike through unused attr() parameter in Rules view. r=devtools-reviewers,jdescottes

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/67683182d95c
https://hg.mozilla.org/mozilla-central/rev/e056a92f93f3

Comment 8

[Sebastian Zartner [:sebo]]

Similarily to bug 2011646, I believe this should be mentioned at least in the dev release notes for Firefox 149 and maybe even in the general release notes together with the addition in 2011646.

Sebastian

Comment 9

[Sebastian Zartner [:sebo]]

(In reply to Sebastian Zartner [:sebo] from comment #8)

Similarily to bug 2011646, I believe this should be mentioned at least in the dev release notes for Firefox 149 and maybe even in the general release notes together with the addition in 2011646.

A little late now, though I'll try it anyway.

[Why is this notable]: New DevTools feature
[Affects Firefox for Android]: no
[Suggested wording]: In the Rules view, the unused value within the attr() function is now crossed out and there's a tooltip shown displaying the referenced HTML attribute's value.
[Links (documentation, blog post, etc)]:
Bug 2011646

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

Thanks Sebo (and sorry for dropping the ball here)