Showing Sass and other source mapped files in the Style Editor isn't very useful if we can't live edit them and see the changes in real time. We can watch for changes to the generated CSS and do the live update using its contents. This requires knowing the location on disk of the generated file. Right now we only know this location for sure if we're on a file:// url.

> Watch for changes to CSS files on disk If you manage to do that for CSS files, can you do it in a generic way? In the App Manager, we'd like to get notified when the user changes code (any files) on the disk too.

Yoric, I have a feeling that we're going to be using this quite a bit in the coming months and it would be *super* handy for us to have: OS.File.watch("file.txt", function(ev) { console.log("file.txt changed"); }); What do you think?

We want to be able to watch directories as well.

I can take a look at it, but not before January.

Here's a work in progress patch. After saving an original source to disk, this will wait 3 seconds before updating the page's live style sheet object to reflect the contents of the generated CSS file on disk. This means you have Sass, etc. watch for changes to your file and update the generated CSS file each time it changes. This patch hopes that it takes less than 3 seconds to do this. The 3 seconds is arbitrary, and we'd really need the file watching in bug 958280 to be correct.

At the suggestion of Joe, we can just stat the file periodically until we see that the last modification timestamp has changed. This patch implements that technique. There's a setTimeout in the test, but it will pass without it, it's just to hit the code that would be hit if there were a real user.

Comment on attachment 8365334 [details] [diff] [review] new-watching.patch Review of attachment 8365334 [details] [diff] [review]: ----------------------------------------------------------------- ::: browser/devtools/styleeditor/StyleSheetEditor.jsm @@ +452,5 @@ > + /** > + * Check to see if our linked CSS file has changed on disk, and > + * if so, update the live style sheet. > + */ > + checkLinkedFileForChanges: function() { Will this behave correctly if the style editor is torn down while the timeout is active?

(In reply to Dave Camp (:dcamp) from comment #7) > > + * Check to see if our linked CSS file has changed on disk, and > > + * if so, update the live style sheet. > > + */ > > + checkLinkedFileForChanges: function() { > > Will this behave correctly if the style editor is torn down while the > timeout is active? Yes, the timeout is set on the style editor's window, so it'll get cancelled with the teardown.