950915 - Watch for changes to CSS files on disk for source mapped files

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect)

Description

[Heather Arthur [:harth]]

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.

Comment 1

[Paul Rouget [:paul]]

>  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.

Comment 2

[Joe Walker [:jwalker]]

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?

Comment 3

[Paul Rouget [:paul]]

We want to be able to watch directories as well.

Comment 4

[David Teller [:Yoric] - still alive but not very active]

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

Comment 5

[Heather Arthur [:harth]]

Attachment: WIP - Update style sheet a few seconds after saving the original source

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.

Comment 6

[Heather Arthur [:harth]]

Attachment: new-watching.patch

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 7

[Dave Camp (:dcamp)]

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?

Comment 8

[Heather Arthur [:harth]]

(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.

Comment 9

[Heather Arthur [:harth]]

https://hg.mozilla.org/integration/fx-team/rev/70c4ddda20ec

Comment 10

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/70c4ddda20ec