1034614 - Styles do not update when reloading a stylesheet

Status: NEW

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

Description

[Erwann Mest :kud]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:33.0) Gecko/20100101 Firefox/33.0 (Beta/Release)
Build ID: 20140704030208

Steps to reproduce:

If livereload refreshs the webpage, you can have a blank dom in Inspector view.

And if it's just a css (which won't refresh the webpage, only the styles), the "rules" css attributes won't modify anything on the page even if you change them.


Actual results:

16:08 _kud ➤ hmmm changing css properties in live in the devtools doesn't always work
16:08 _kud ➤ weird
16:10 pbrosset ➤ _kud: from the style-editor or rule-view ?
16:10 _kud ➤ "rules" view
16:10 pbrosset ➤ really, ok. What's your scenario exactly?
16:11 _kud ➤ nothing special
16:11 _kud ➤ BUT
16:11 _kud ➤ i use livereload
16:11 _kud ➤ and i wonder if sometimes livereload, when refreshing, doesn't break firefox
16:11 pbrosset ➤ ah, yeah, could be it
16:12 pbrosset ➤ does the toolbox stay open during the reload
16:12 _kud ➤ yepo
16:12 _kud ➤ exactly
16:12 _kud ➤ and that's it
16:12 _kud ➤ imagine livereload changes the css
16:12 pbrosset ➤ most probably
16:12 _kud ➤ you can't edit anymore the "rules" css properties
16:12 _kud ➤ I have to switch off and on the inspector
16:13 pbrosset ➤ yeah
16:13 pbrosset ➤ do you know where livereload's source code lives?
16:13 pbrosset ➤ I'd be interested to see how css gets reloaded
16:13 _kud ➤ i've got this one: https://github.com/vohof/gulp-livereload
16:13 pbrosset ➤ tx
16:14 _kud ➤ https://gist.github.com/kud/5b794956f750fd694b62 pbrosset
16:14 _kud ➤ this is the code added in my page
16:14 _kud ➤ so it comes from https://github.com/livereload/livereload-js
16:14 mrkz has joined ([e-mail])
16:15 pbrosset ➤ ok, so with the code here: https://gist.github.com/kud/5b794956f750fd694b62#file-livereload-js-L601 we should be able to extract a simple test scenario that fails
16:16 _kud ➤ Alright :)
16:16 _kud ➤ Do you want me to file a bug?
16:16 pbrosset ➤ please do

Comment 1

[Patrick Brosset <:pbro>]

Confirmed with the following test scenario:

- Have a page with <link> stylesheets (you can use http://jsbin.com/jamaqiya/1),
- Open the inspector,
- inspect a node that has styles from the <link> stylesheet applied to it (use the <p> node)
- test that modifying the styles work
- via javascript, remove the <link> tag, and re-append it again, adding a cache-busting part to the URL (i.e. ?random=sadlghalsdkgh). On the test page, you can click the button that does just that
- the styles you changed before are lost, which is expected because the stylesheet is gone and the new one is loaded
==> But the rule-view doesn't refresh so it still shows the old styles
==> And changing the styles has no effect

If you select an other node and then that node again, then it works normally.

Comment 2

[Patrick Brosset <:pbro>]

I believe the solution for this is bug 922146, which I started a long time ago and never got around to finishing.
I think we should add a StylesheetsObserver in toolkit/devtools/server/actor/layout.js much like the ReflowObserver class. This new observer would listen to the stylesheetadded/removed events and, in turn, emit events much like the ReflowObserver does.
It's then a case of either we create an actor that wraps it and sends events to the front-end to refresh the rule-view and style-editor, or just export the StylesheetsObserver class on the module and let the style-editor and style-inspector actors require it and use to handle refreshes.

Comment 3

[Julian Descottes [:jdescottes]]

Still occurring on Nightly. 

Inspector bug triage, filter on CLIMBING SHOES. 
Ruleview displays incorrect information -> P2.

Comment 4

[Erwann Mest :kud]

This bug is still occured.

I've got react + webpack + css modules + hot-reload. I modify my css in my code editor, it refreshes the render in firefox but not the node in devtools. I've got to select another node and come back on my node to see the change in devtools.

Comment 6

[Slim Lim]

This bug is still occurring. Moreover, when a new stylesheet is dynamically appended to the DOM, the Rules pane does not update to show newly-matched rules.

This is increasingly frustrating as UI frameworks such as Chakra begin to dynamically insert and remove <style> elements during state changes.