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

RESOLVED FIXED in Firefox 29

Status

()

Firefox
Developer Tools: Style Editor
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: harth, Assigned: harth)

Tracking

(Depends on: 1 bug)

unspecified
Firefox 29
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Assignee)

Description

5 years ago
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.
(Assignee)

Updated

5 years ago
Assignee: nobody → fayearthur

Comment 1

5 years ago
>  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?
Flags: needinfo?(dteller)

Comment 3

5 years ago
We want to be able to watch directories as well.
I can take a look at it, but not before January.
Flags: needinfo?(dteller)
(Assignee)

Updated

4 years ago
Depends on: 958280
(Assignee)

Updated

4 years ago
Summary: Watch for changes to CSS files on disk for source mapped files from file:// → Watch for changes to CSS files on disk for source mapped files
(Assignee)

Comment 5

4 years ago
Created attachment 8361436 [details] [diff] [review]
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.
(Assignee)

Comment 6

4 years ago
Created attachment 8365334 [details] [diff] [review]
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.
Attachment #8361436 - Attachment is obsolete: true
Attachment #8365334 - Flags: review?(dcamp)

Comment 7

4 years ago
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?
Attachment #8365334 - Flags: review?(dcamp) → review+
(Assignee)

Comment 8

4 years ago
(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.
https://hg.mozilla.org/mozilla-central/rev/70c4ddda20ec
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 29
Depends on: 966805
You need to log in before you can comment on or make changes to this bug.