1470052 - When setting the value of `display` with a custom property of `grid/inline-grid/etc` the icon to toggle the grid highlighter should show

Status: NEW

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

Description

[tobz.nz]

Attachment: Screenshot of the css rule with example value and missing grid icon

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180614135649

Steps to reproduce:

Set the `display` property of an element to something like `var(--display, grid)`.


Actual results:

No icon to toggle the grid highlighter is shown next to the `display` rule


Expected results:

the icon to toggle the grid highlighter should be shown next to the `display` rule.

Comment 1

[Patrick Brosset <:pbro>]

(In reply to tobz.nz from comment #0)
> Set the `display` property of an element to something like `var(--display,
> grid)`.
In this particular case, if --display is undefined, it actually works, because the property will be set to the fallback value of grid. So the toggle icon will be displayed next to that part of the property.

However in cases like var(--display) where that variable resolves to grid, then yes, I agree, the toggle icon will be missing.

Now, to work around this, you can head over to the Layout sidebar panel and find your grid under the Grids accordion section. It will be there and you will be able to toggle it from there.

So, thanks a lot for filing. I'm moving this to be an "enhancement" request.