1492370 - "CSS Grid is not in use on this page" displayed even when it is

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Brian Birtles (:birtles)]

Attachment: Test

On the current Nightly (I just updated about ~1hr ago) with the attached file on Windows I am seeing "CSS Grid is not in use on this page" even when it clearly is.

Patrick tells me that with the same file on MacOS and Windows for him though. Weird.

STR:
1. Open file.
2. Open DevTools (F12)
3. Open the Inspector and expand the elements until the <form> element shows.
4. Click the <form> element.

I've tried closing and re-opening DevTools and serving the file from a local web server and it hasn't made a difference.

Comment 1

[Brian Birtles (:birtles)]

Attachment: Screenshot

Comment 2

[Brian Birtles (:birtles)]

Also, if I click the "grid" item on the left, the highlighting works, but the "Grid" section doesn't change.

Comment 3

[Brian Birtles (:birtles)]

I can repro this with my work profile but not my home profile. I'll try later to narrow down the difference although there's nothing obvious so far.

I can repro it using that same work profile on Windows and Linux so updating the platform to All.

Comment 4

[Brian Birtles (:birtles)]

I think I worked it out. My work profile had an empty string as the value for the devtools.inspector.activeSidebar pref.

I have no idea how that got set. But even if I set that now, I can reproduce the problem. If I reset the pref then the bug is fixed.

Comment 5

[Patrick Brosset <:pbro>]

We should make the code more resilient here to avoid this from happening again.
For instance, after this line: https://searchfox.org/mozilla-central/rev/94e37e71ffbfd39e6ad73ebcda5d77cce8d341ae/devtools/client/inspector/inspector.js#905
we should set a hard-coded default value for the default tab if the value is empty.

Comment 6

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 3 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.

Comment 7

[Ryan Sobol [:ryansobol]]

I know a ton of work has gone into the devtools' Grid viewer in the Layout tab, but this bug is still present (and annoying as hell) as of 2024-10-31 in Firefox 133.0b2 (64-bit) on macOS. I'd be happy to help others reproduce the issue on their machine, or at least help troubleshoot why this is happening on mine.

Comment 8

[Ryan Sobol [:ryansobol]]

Attachment: Screenshot 2024-10-31 at 11.46.01.png

Comment 9

[Ryan Sobol [:ryansobol]]

Attachment: Screenshot 2024-10-31 at 12.03.16.png

Also, the devtools.inspector.activeSidebar pref in my profile is set to layoutview, if this helps.

Comment 10

[Ryan Sobol [:ryansobol]]

Attachment: Screenshot 2024-10-31 at 13.24.54.png

Here are my profile's gridinspector prefs, if it helps.

Comment 11

[Ryan Sobol [:ryansobol]]

Attachment: Screenshot 2024-10-31 at 13.27.06.png

And here are my inspector prefs.

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Ryan Sobol [:ryansobol] from comment #7)

I know a ton of work has gone into the devtools' Grid viewer in the Layout tab, but this bug is still present (and annoying as hell) as of 2024-10-31 in Firefox 133.0b2 (64-bit) on macOS. I'd be happy to help others reproduce the issue on their machine, or at least help troubleshoot why this is happening on mine.

Hello Ryan, thanks for your report.
Can you share the page you're seeing this on?
Are you seeing this while doing a specific scenario (adding the display grid declaration from the inspector or the styleeditor, or triggering some other things), or is happen when the page loads? Any detailed step to reproduce would help us diagnose the issue.

Comment 13

[Ryan Sobol [:ryansobol]]

Hello Ryan, thanks for your report.

You're welcome! :)

Can you share the page you're seeing this on?

https://admin-platform-ryansobol.vercel.app/orders

Grid is being used on the <main> tag, as well as on a few tags nested within.

Are you seeing this while doing a specific scenario (adding the display grid declaration from the inspector or the styleeditor, or triggering some other things), or is happen when the page loads?

It's happening on page load.

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

Thanks Ryan, I think I found the culprit, the grid container has a display: contents ancestor which seems to cause our function to not detect the grid.
I can reproduce it on this simple page: data:text/html,<meta charset=utf8><style>span { display: grid; } .content { display: contents; } </style></div><div class="content"><span>grid inside a <code>display: contents</code></span></div>

Comment 15

[Nicolas Chevobbe [:nchevobbe]]

Ryan, since this is self contained, I filed Bug 1934619, so the discussion is easier to follow than in this bug

Comment 16

[Ryan Sobol [:ryansobol]]

Thanks Ryan, I think I found the culprit, the grid container has a display: contents ancestor which seems to cause our function to not detect the grid

Thanks for tackling this issue and sharing your discovery. Well done!

Comment 17

[Aredridel]

This is going to affect developers of every site using SvelteKit currently; that's what bit me today.