Spurious Inspector styleSheetAdded/styleSheetRemoved events causes live preview to stop working

[MuhammadAliRashid]

UPDATE: @jasonsanjose
At some point, maybe due to the addition of styleSheetAdded and styleSheetRemoved http://src.chromium.org/viewvc/blink/trunk/Source/devtools/protocol.json?r1=148993&r2=148994&, the inspector protocol began to report a stylesheet as removed after we push our incremental changes from Brackets. The removal means that CSSDocument and CSSAgent holds on to invalid styleSheetId values. Once the styleSheetId is out of sync, updates fail with the following error:

No style sheet with given id found, code: -32000

Original:

Hi, I am using Linux Ubuntu 13.10 with Bracket sprint 36
this problem has occurred just recently,I dont know why ...

but I when edit my CSS the live preview stops.

is there any solution for this ??
a week ago it was working perfectly.
I have also disabled my all extension, but still the problem is not solved.

[marcelgerber]

Looks similar to #6906.
Does this match what you're seeing?
Could it be that it was introduced by installing Sprint 36?

[MuhammadAliRashid]

no before S-36, the same problem was there,
#6906 some what similar, but in my case live preview connects and when I edit the the CSS , LP's icon turns grey, and when I save my file it turns Orange again.
to see the results I have to refresh the browser.

[redmunds]

I have seen this problem, but have never been able to reproduce it reliably. It would be awesome if you could provide a (simple as possible) set of files with a set of steps that causes problem every time.

[MuhammadAliRashid]

images ?

[MuhammadAliRashid]

which files should I provide you ?

[redmunds]

Need the actual html file and all related files. Then a step-by-step recipe of each action to take, and which file to edit, which rule, etc.

[MuhammadAliRashid]

Sir can I upload it here ?
or can I mail you ?

[redmunds]

I'd prefer that link(s) was provided to file(s) or to a github gist(s) in case someone other than me wants to look at this, otherwise you can send them to me in a zip file at redmunds at adobe dot com.

[MuhammadAliRashid]

Sir, I have sent you the link at ur email address.

[redmunds]

I haven't received it. If it's a link then post it here.

[MuhammadAliRashid]

https://skydrive.live.com/redir?resid=77DA9C647A8DB1A3%212995

[redmunds]

@MuhammadAliRashid OK, I downloaded your files, opened index.html, started Live Preview, edited the color property on the body tag, and the page updated in Chrome as I typed.

Please provide the steps that I need to take to cause CSS updating to stop working. Thanks.

[MuhammadAliRashid]

When I edit any property of CSS the the Live Preview stops ...
may be I should remove and reinstall Brackets again.

[marcelgerber]

If you've got Brackets still installed:
Could you take a look into the Developer Tools Console (In the Brackets window: Debug > Show Developer Tools: Tab Console) if there are any (error) messages?

[redmunds]

What may seem like "any css property" may actually be a distinct pattern. Please give us a step by step list of changes that you are making. Which file? Which rule? What are the before and after values? Are you editing css style sheet directly or using inline editor?

[MuhammadAliRashid]

https://onedrive.live.com/redir?resid=77DA9C647A8DB1A3%212996

plz watch this video

[redmunds]

What app should I use for .ogv files? Can you post a video on youtube or vimeo?

[marcelgerber]

@redmunds I can watch it on Win using VLC Media Player.
@MuhammadAliRashid I can repro this error on Win with the exact same behaviour and extensions disabled, official Sprint 36 on Windows 7.

In the console I'm getting No style sheet with given id found, code: -32000, so it looks like another case of [#6363, #5774, #6830].

[redmunds]

The No style sheet with given id found, code: -32000 message seems to be a red herring.

I've been working on some Live Preview fixes in pull request #6889 - anyone who's having problems and can try out that branch please let me know your results (good, bad, or indifferent).

[marcelgerber]

It has something to do with the many images used in that project - as soon as I rename the folder into images_, it's UTR.
With a bit more testing, I saw it only happening when there are at least 5 different images used - in this case they are all loaded through the style.css.

Unfortunately I can't try the PR branch until I'm home again, which will take a few hours from now.
I'm gonna try to setup a good, easy repro case then.

[marcelgerber]

@redmunds Just tried your PR #6889 - same problem, same console error: nothing changed.

[marcelgerber]

Ah, finally found the reason:
It is the @import url(http://fonts.googleapis.com/css?family=Flamenco); on top of the styles.css. Without it, everything works fine.

[MuhammadAliRashid]

My Linux crashed yesterday night :/
showing initrams busybox
a bigger issue then brackets ...

@SAplayer if I remove this import, everything will work fine ?

[marcelgerber]

It should, yes. But that's no solution. I meant this as a hint to the team what's going wrong/causing the issue.

[MuhammadAliRashid]

these imports are google fonts used in my project

[redmunds]

Is there an actual problem, or just a nasty sounding message in the console log (which is what I meant by "red herring") ?

[marcelgerber]

The problem is, it's no real live preview at all, the changes are only pushed on save never pushed (not even on save!).

[redmunds]

I would love to be able to reproduce this problem. Please provide a recipe that I can use with the provided files. I really don't want to install an app just to watch 1 video.

[marcelgerber]

I'll try.

1. Start Live Preview on index.html
2. In index.html, go to line 75 and open an Inline Editor on tile_center_content (you should see an Inline Editor styles.css : 140-145)
3. In that Inline Editor, change width to 100px
4. Look at the thunderbolt and into the browser
5. Now select p#tile_para in the editor (a few lines below)

Result:
The thunderbolt is getting gray (not always!), the page was not refreshed. But notice that the (blue) live preview highlight is still updated in step 5, so live preview is not completely broken.

We were able to repro this on both Linux and Windows.

[jasonsanjose]

Interesting. @MuhammadAliRashid @SAplayer what versions of chrome are you using?

[marcelgerber]

I'm using Chrome Stable 33.0.1750.117 m
But it's not this change, all other live dev sessions are still working fine without #7008 (like the Getting Started project)

[jasonsanjose]

FYI based on what I saw in the video, the only relevant change I made for this bug (assuming they're not using Chrome 34) was this line https://github.com/adobe/brackets/pull/7008/files#diff-02116cf32f6e9db7008084a51a35dea8L477.

This is pretty old code, but basically we always show the disconnected icon whenever we get ANY error message from the Inspector protocol. To be clear, it's just a visual status, nothing around live preview state actually changes and it's still effectively ACTIVE.

The existing behavior is way too aggressive. Also, since our callbacks should be handling errors directly (via callback(res, err) or promise.fail()), we can now be more precise about when to use the error status. I've only made the edit to remove the status change to fix the Chrome 34 bug #6830 so that we don't show the disconnected icon when the getAllStyleSheets API is missing.

I haven't been able to reproduce the reported behavior in master yet given the "Final year project" that was linked above. So at this point it's my best guess.

[jasonsanjose]

Nevermind. Just got it to reproduce on master. When typing in a live CSS file, each time edits are sent over the Inspector protocol, the styleSheetId changes. Oops. Looking at a fix now.

[marcelgerber]

@jasonsanjose I can repro the issue again when adding this line back in your fix, but it does more than just changing a visual status. The changes aren't pushed any more.

[jasonsanjose]

@SAplayer yep, you're right. My mistake.

[jasonsanjose]

Updated the description of this issue to indicate the root cause of the "No style sheet with given id found, code: -32000" error message.

[MuhammadAliRashid]

I have downloaded new brackets but the problem remains same.

[marcelgerber]

The fix is not yet in the build available for download.

[MuhammadAliRashid]

Its really disturbing while working.

[MuhammadAliRashid]

when it will be available ?

[redmunds]

@MuhammadAliRashid You can try the proposed fix in the branch in pull request #7008.

[MuhammadAliRashid]

ok, since 3 hours I am working on my final year project and the brackets seems to work fine.
live preview is working fine, all the changes are visible as the code changes.

I deleted all .js files and restarted the brackets, after 1 hour I noticed it was working fine.
still I am working on my project and its working fine :)

[jasonsanjose]

@MuhammadAliRashid if you're comfortable hacking your Brackets install, you can test this fix using the instructions here https://github.com/adobe/brackets/wiki/How-to-Hack-on-Brackets.

@SAplayer would you like to verify and close this issue as well?

[redmunds]

Closing. Let us know if anyone is still seeing htis.