1841023 - Display registered property info for custom properties

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, task)

Description

[Sebastian Zartner [:sebo]]

As mentioned in bug 1841021, the CSS Properties and Values API gives custom properties semantic meaning by attaching additional information to them.
This information should be displayed within the Rules panel.

One way to do so is to extend the current tooltip showing the current value of the property by those pieces of information.
There might also be a link to the @property rule in the Style Editor when registered via CSS or to the registerProperty function call in the Debugger when registered via JS.

Sebastian

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Looks like Chrome DevTools are implementing something that looks like this: https://front-end.social/@bramus/110932815004882288

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Chrome DevTool rule view support for @property

Chrome DevTools

1. Has a "@property" section, listing all registered CSS properties (via @property or CSS.registerProperty). CSS declared @property property name and values can be updated directly there (but not for the ones created via Css.registerProperty).
2. Displays a tooltip when hovering a var(--xxx) value, with all registered @property rule properties (syntax, inherits and initial-value) + a link that highlights the matching property in the "@property" section.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

I filed Bug 1857526 which reflects an issue in the current state. We might keep this bug only for adding the @property section in the rules panel

Comment 4

[Frédéric Wang (:fredw)]

Making this depend on bug 1273706 as the bug 1684605 and bug 1821552 were closed as duplicate.

Comment 5

[Frédéric Wang (:fredw)]

(In reply to Frédéric Wang (:fredw) from comment #4)

Making this depend on bug 1273706 as the bug 1684605 and bug 1821552 were closed as duplicate.

Actually removing, : css-properties-values-api blocks bug 1841021 and bug 1841021 is used as a meta for devtools-related bugs IIUC.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1841023 - [devtools] Display registered properties in Rules view. r=#devtools-reviewers.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bc2038afa9d4
[devtools] Display registered properties in Rules view. r=devtools-reviewers,devtools-backward-compat-reviewers,bomsy.

Comment 8

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/bc2038afa9d4