1491278 - CSS rules section of developer tools appears empty

Status: NEW

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

Description

[massimo.cassandro]

Attachment: Schermata_2018-09-14_alle_14_08_41.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:62.0) Gecko/20100101 Firefox/62.0
Build ID: 20180830143136

Steps to reproduce:

Using Firefox Developer Edition 63.0b4, in some cases the css rules frame of developer tools appears empty (see screenshot).
The issue occurs only while in mobile view and after some page reloads


Actual results:

It's impossible to get css info of selected element


Expected results:

The css rules section should continue to be available

Comment 1

[Patrick Brosset <:pbro>]

Hi, thanks a lot for filing this. This looks really bad.
However we'd need some specific steps to reproduce this issue.
Does this happen on a given site? Do you need to do something special to get it?

Comment 2

[massimo.cassandro]

Hi,
the issue occurs with any site, but only while in mobile view.
I can't give you more details since I could not find a recurring cause.
I noticed it usually after some reloads

Let me know if I can help you in some way
Thank you

Comment 3

[Patrick Brosset <:pbro>]

(In reply to massimo.cassandro from comment #2)
Thanks for replying already!
> Let me know if I can help you in some way
Actually, one thing might help: when it happens to you again, can you open the browser console (ctrl+shift+J) and check if there are JavaScript errors in there. If so, please copy them here. That will be super useful to investigate.

Comment 4

[Patrick Brosset <:pbro>]

For info, I tried reproducing this locally but no luck so far. I tested on Windows 10 though, maybe that's the difference.
I open RDM and reloaded the page many times.

Comment 5

[:Harald Kirschner :digitarald]

Attachment: console.PNG

STR for me was:

1) Play in Fonts panel in 2 panel mode (saw that font scaling wasn't applied)
2) Enabled 3 pane mode, Rules view stayed empty
3) Enabled 2 pane mode again, Rules view stayed empty

Comment 6

[Patrick Brosset <:pbro>]

(In reply to :Harald Kirschner :digitarald from comment #5)
> 1) Play in Fonts panel in 2 panel mode (saw that font scaling wasn't applied)
> 2) Enabled 3 pane mode, Rules view stayed empty
> 3) Enabled 2 pane mode again, Rules view stayed empty
Thanks Harald. I have a feeling this might be a different issue here though. One where somehow the rule-view does not initialize correctly in the background when modifying styles through the font editor.

Comment 7

[Razvan Caliman [:rcaliman]]

(In reply to :Harald Kirschner :digitarald from comment #5)
> Created attachment 9013356 [details]
> console.PNG
> 
> STR for me was:
> 
> 1) Play in Fonts panel in 2 panel mode (saw that font scaling wasn't applied)
> 2) Enabled 3 pane mode, Rules view stayed empty
> 3) Enabled 2 pane mode again, Rules view stayed empty

Patrick is right, these are different issues. 
The issue with the Font Editor in 2-pane was fixed a while ago but it seems to have regressed. I'm on it: Bug 1497950

Comment 8

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

@Massimo: I am also having trouble reproducing this... are you still able to reproduce it?

Comment 9

[massimo.cassandro]

I've tried again many times, but it seems that the lastest releases of Developer Edition solves the issue.
Maybe?

Comment 10

[Gary]

I have the same issue. CSS doesn't appear. Every so often if I quit the browser it will come back, but I have tried this a couple of times and it doesn't work. It seems to get worse every new generation and update of Firefox.

Comment 11

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

@Gary I believe this is fixed... are you still able to reproduce the issue?

Comment 12

[Gary]

Haven't had any issues with it lately. Seems to be working now.

Comment 13

[massimo.cassandro]

Same for me

Comment 14

[Razvan Caliman [:rcaliman]]

Looking into fixing the intermittent for bug 1498336, which is suspiciously similar to the issue described in this one, I discovered there's is a stray window "resize" event which is fired during reload with RDM open. The Rules panel reacts to that event with trying to grab the latest applicable styles (for scenarios where a media query might begin to apply), but being in a state of flux during reload, the node front for the selected element doesn't seem to have a corresponding DOM node (aka rawNode); the Rules panel swallows the error and shows an empty panel.

The issue in bug 1498336 happens intermittently. The window "resize" event is fired prematurely sometimes. This is perhaps an indication as to why the issue described in this bug has been difficult to reproduce.

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Comment 16

[Razvan Caliman [:rcaliman]]

This is not a regression. It's a bug that occurred intermittently over the long term.