Firefox devtools load CSS twice if you open the style editor at least once

RESOLVED FIXED in Firefox 59

Status

defect
P2
minor
RESOLVED FIXED
3 years ago
10 months ago

People

(Reporter: buggyz, Assigned: jryans)

Tracking

({regression})

49 Branch
Firefox 59
Unspecified
All
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr52 wontfix)

Details

(Whiteboard: [OA])

Attachments

(3 attachments)

Reporter

Description

3 years ago
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160920074044

Steps to reproduce:

I Firefox, press F12 to open the Devtools click on Network Monitor and surf to any website (for instance https://www.bonnieradvocaten.nl/)  to measure it's performance using the Network Monitor.




Actual results:

Firefox fetches / "loads"  CSS file(s) that are needed to correctly show the webpage.  those are correctly fetched usually as one of the first requests ( right after the HTML is downloaded). Then  right after the page is fully loaded it will fetch / load that same CSS file, the one that was fetched as one of the first requests, again.  

The HTML of the web-page (i mentioned) is not the source of this issue it only includes the CSS file once as the first element to be loaded after the HTML is parsed. 

I'm attaching a screen-shot of the Network Monitor that clearly shows the problem. 

The Network Monitor itself points to a bunch of java-script files that are part of the Devtools as the cause of the .CSS file being loaded for a second time as can be seen in the aforementioned attachment. 

The problem presents itself with many different website and AFAIK was introduced with Firefox 49.

Also the problem is not present 100% percent of the time.


Expected results:

The .CSS file should have only been loaded once per the HTML of the web-page that is being visited.
Reporter

Comment 1

3 years ago
I would like to add that this is probably not related to Bug 1071613, since setting "devtools.styleeditor.source-maps-enabled: false"  does not fix the problem.
Severity: normal → minor
Component: Untriaged → Developer Tools: Netmonitor
OS: Unspecified → All

Comment 2

3 years ago
@Reporter

This seems to be fixed in Firefox Beta and later.
Could you test this with Firefox Beta50b3 [1]?

[1] https://www.mozilla.org/en-US/firefox/channel/#beta
Flags: needinfo?(buggyz)

Comment 3

3 years ago
I can reproduce on Nightly52.0a1.
Once open "Style editor" then css load twice.

Steps to reproduce:
1. Open Style editor and then click on Network Monitor
2. Load the URL https://www.bonnieradvocaten.nl/
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(buggyz)
Summary: Firefox devtools load CSS twice → Firefox devtools load CSS twice if you open the style editor at least once

Updated

3 years ago
Flags: needinfo?(tihuang)
Reporter

Comment 5

3 years ago
(In reply to Alice0775 White from comment #2)
> @Reporter
> 
> This seems to be fixed in Firefox Beta and later.
> Could you test this with Firefox Beta50b3 [1]?
> 
> [1] https://www.mozilla.org/en-US/firefox/channel/#beta

Besides Firefox 49 i also Firefox Developer Edition 51.0a2.  With the latest build (2016-10-01) i'm seeing the same problem. So i don't think it's fixed in Beta and later.

Comment 6

3 years ago
(In reply to buggyz from comment #5)
> (In reply to Alice0775 White from comment #2)
> > @Reporter
> > 
> > This seems to be fixed in Firefox Beta and later.
> > Could you test this with Firefox Beta50b3 [1]?
> > 
> > [1] https://www.mozilla.org/en-US/firefox/channel/#beta
> 
> Besides Firefox 49 i also Firefox Developer Edition 51.0a2.  With the latest
> build (2016-10-01) i'm seeing the same problem. So i don't think it's fixed
> in Beta and later.


Yep, see comment #3.
To reproduce the problem, Style editor must open at least once.
Reporter

Comment 7

3 years ago
This problem also appears when the Style Editor is not opened in any way.

Actions:
Today i started Firefox after it being fully closed, I then pressed F12, the Network Monitor appeared, > I continued browsing to https://www.bonnieradvocaten.nl/ without clicking or otherwise opening the Style Editor. 

Result:
The CSS file of the website was loaded twice just like before. Note that i did not click on the Style Editor nor did the style editor appear. 


The same goes for Firefox 51.0as2, the problem also appeard without the Style Editor being opened.

Comment 8

3 years ago
(In reply to buggyz from comment #7)
> This problem also appears when the Style Editor is not opened in any way.
> 
> Actions:
> Today i started Firefox after it being fully closed, I then pressed F12, the
> Network Monitor appeared, > I continued browsing to
> https://www.bonnieradvocaten.nl/ without clicking or otherwise opening the
> Style Editor. 
> 
> Result:
> The CSS file of the website was loaded twice just like before. Note that i
> did not click on the Style Editor nor did the style editor appear. 
> 
> 
> The same goes for Firefox 51.0as2, the problem also appeard without the
> Style Editor being opened.

umm, I cannot reproduce the problem without open Style Editer.
Reporter

Comment 9

3 years ago
(In reply to Alice0775 White from comment #8)
> (In reply to buggyz from comment #7)
> > This problem also appears when the Style Editor is not opened in any way.
> > 
> > Actions:
> > Today i started Firefox after it being fully closed, I then pressed F12, the
> > Network Monitor appeared, > I continued browsing to
> > https://www.bonnieradvocaten.nl/ without clicking or otherwise opening the
> > Style Editor. 
> > 
> > Result:
> > The CSS file of the website was loaded twice just like before. Note that i
> > did not click on the Style Editor nor did the style editor appear. 
> > 
> > 
> > The same goes for Firefox 51.0as2, the problem also appeared without the
> > Style Editor being opened.
> 
> umm, I cannot reproduce the problem without open Style Editor.

Yeah, the problem (without opening the style editor) isn't happening all the time. When i tested it with Firefox 49 and then with Firefox 51.0a2 this afternoon, i took extra care not to open the Style Editor, yet it did happen again with both browsers.

I’m not sure what else is triggering it but there seems to be more than one trigger.....

Updated

3 years ago
Whiteboard: [OA]
Reporter

Comment 10

3 years ago
Okay so i just found another way to make the Network Monitor load CSS twice: opening the web inspector at least once.

When i open the Network Monitor F12>Devtools and it instantly opens the Network Monitor everything is fine CSS is only loaded once.

 But, when i open the Network Monitor then click on "Inspector" then click on "Network Monitor" and load the website's CSS is loaded twice.

So opening the Style Editor or Web Inspector at least once causes CSS to be loaded twice 

I've tested both  Firefox 49.0 and on 51.0a2 (build 2016-10-12) and they both exhibit this behavior.
(In reply to buggyz from comment #10)
> Okay so i just found another way to make the Network Monitor load CSS twice:
> opening the web inspector at least once.
> 
> When i open the Network Monitor F12>Devtools and it instantly opens the
> Network Monitor everything is fine CSS is only loaded once.
> 
>  But, when i open the Network Monitor then click on "Inspector" then click
> on "Network Monitor" and load the website's CSS is loaded twice.
> 
> So opening the Style Editor or Web Inspector at least once causes CSS to be
> loaded twice 
> 
> I've tested both  Firefox 49.0 and on 51.0a2 (build 2016-10-12) and they
> both exhibit this behavior.
Indeed, both the style editor and the inspector rely on the same back-end to get CSS style information. So opening any of these 2 panels before will have the same effect.
The back-end downloads the CSS file again to get the "authored" text to display in devtools. I don't remember if this is related to the devtools.styleeditor.source-maps-enabled setting or not. What I do remember is that if a stylesheet is set not to be cached, then the back-end has no other choices then to actually download it again from the server.

If this is the only problem you are seeing here, then this bug should be moved to the Style Editor bugzilla component and should block bug 1264624.

But comment 7 seems to say that this also happens without first opening the inspector or the style-editor.
Is this still the case? Or should we now consider this bug to only be a result of having opened those panels before?
Flags: needinfo?(buggyz)
Reporter

Comment 12

3 years ago
(In reply to Patrick Brosset <:pbro> from comment #11)
> (In reply to buggyz from comment #10)
> > Okay so i just found another way to make the Network Monitor load CSS twice:
> > opening the web inspector at least once.
> > 
> > When i open the Network Monitor F12>Devtools and it instantly opens the
> > Network Monitor everything is fine CSS is only loaded once.
> > 
> >  But, when i open the Network Monitor then click on "Inspector" then click
> > on "Network Monitor" and load the website's CSS is loaded twice.
> > 
> > So opening the Style Editor or Web Inspector at least once causes CSS to be
> > loaded twice 
> > 
> > I've tested both  Firefox 49.0 and on 51.0a2 (build 2016-10-12) and they
> > both exhibit this behavior.
> Indeed, both the style editor and the inspector rely on the same back-end to
> get CSS style information. So opening any of these 2 panels before will have
> the same effect.
> The back-end downloads the CSS file again to get the "authored" text to
> display in devtools. I don't remember if this is related to the
> devtools.styleeditor.source-maps-enabled setting or not. What I do remember
> is that if a stylesheet is set not to be cached, then the back-end has no
> other choices then to actually download it again from the server.
> 
> If this is the only problem you are seeing here, then this bug should be
> moved to the Style Editor bugzilla component and should block bug 1264624.
> 
> But comment 7 seems to say that this also happens without first opening the
> inspector or the style-editor.
> Is this still the case? Or should we now consider this bug to only be a
> result of having opened those panels before?

This should be considered to be only triggered by the the inspector and/or style-editor.
Blocks: top-inspector-bugs
No longer blocks: 1282660
Component: Developer Tools: Netmonitor → Developer Tools: Style Editor
Flags: needinfo?(buggyz)
Priority: -- → P2
Flags: needinfo?(tihuang)
Reporter

Comment 13

3 years ago
I've just tried Firefox 53 (Nightly - build of 2016-11-14) it's also affected but i can't (yet) edit the tracking flags.

Updated

2 years ago
Duplicate of this bug: 1339781
Reporter

Comment 15

2 years ago
[Tracking Requested - why for this release]:

Firefox 54.0a1 is also affected by this bug.

Updated

2 years ago
Duplicate of this bug: 1342294
This is not a recent regression. It's been there for a while. Track Aurora54-. Mark 54 fix-optional but still happy to have the fix in 54.

Comment 18

2 years ago
Using Firefox for Mac 52.0.2 is still doing this.

I don't know which conditions have to be met, but on "normal" debugging it seems to load the CSS files multiple times (three !)

Comment 19

2 years ago
For what it's worth, I observed this behaviour as well. However, the second time the CSS file was being loaded, the browser also loaded the main document a second time. Observe server logs while having browser cache switched off.

I kept the server waiting on a breakpoint in the main document, using Xdebug). During that time the browser showed on the network tab that it was waiting for de CSS file. The network tab did not show the second loading of the main document, but only the CSS file.

Using Firefox 53.0.3 (64-bit) for Ubuntu.

Comment 20

2 years ago
This is happening on Windows 10, Firefox 54.0.1 32-bit.
It looks like this bug still persists on Firefox 57. At first I thought the duplicate stylesheet request might be related to Webpack bundling, but alas it is this bug. The duplicate request disappears when opening the network panel directly and reloading the page. This stack overflow post saved me some time, https://stackoverflow.com/questions/41529386/multiple-get-requests-for-the-same-css-file-in-firefox-inspector.

Comment 22

2 years ago
This still occurs on both FirefoxDeveloperEdition 58.0b10 and Firefox Quantum 57.0.1.

Is there any possibility this could be bumped in priority, please?

Given the comments here and on StackOverflow, this is probably causing quite a bit of lost time. I think few people will suspect a very mature browser such as Firefox to be making this mistake.  Rather, they will be more likely to suspect increasingly complicated asset build tools and dive in there to debug.  I just spent an hour trying to debug just a very simple static site, and it wasn't until I decided to quit and restart Firefox that I discovered it was probably the browser!  (My hint was that Chrome loaded just fine, when I eventually turned to it for comparison.)
Assignee

Comment 23

2 years ago
Holding onto the sheet text would at least be a slight memory regression, but if that's a big deal, we could potentially do so only when the tools are open...

I was curious what Chrome does in this case... It appears they have a similar setup to us in that they don't appear to keep the sheet text in the platform, and they might fallback to fetch the text from the network just like we do. However, they do try one extra thing: they check if the tools have style text in memory[1] via the Resources tool. For us, I think the closest thing would be asking the Network Monitor if it saw the CSS request go by before we go to the last resort of fetching. If it does, then it can hand over the text as fetched.

I'll make an attempt at this.

[1]: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/inspector/InspectorStyleSheet.cpp?l=1825&rcl=c84e68d8561f2749b5b831aa57581349133f8800
Assignee: nobody → jryans
Status: NEW → ASSIGNED
Comment hidden (mozreview-request)

Comment 26

Last year
mozreview-review
Comment on attachment 8940381 [details]
Bug 1306892 - Fetch stylesheets from network monitor.

https://reviewboard.mozilla.org/r/210646/#review216726

Thanks for the patch.  This is very nice.
Attachment #8940381 - Flags: review?(ttromey) → review+

Comment 27

Last year
Pushed by jryans@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/e188cb9fe8f5
Fetch stylesheets from network monitor. r=tromey

Comment 28

Last year
mozreview-review
Comment on attachment 8940381 [details]
Bug 1306892 - Fetch stylesheets from network monitor.

https://reviewboard.mozilla.org/r/210646/#review216796

::: devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js:46
(Diff revision 1)
>        items.push(item);
>      }
>    }
>  
> -  is(items.length, 2,
> -     "Got two requests for doc_uncached.css after Style Editor was loaded.");
> +  is(items.length, 1,
> +     "Got one request for doc_uncached.css after Style Editor was loaded.");

Sorry about the flyby (really happy to see this getting fixed!), but I think this test might need updating. 

Initially this was opened for Bug 978688, because the StyleEditor was generating too much traffic. 

After this patch lands, if the netmonitor was opened, the style editor will not request the stylesheet a second time. 
But if the netmonitor was not opened, the style editor will still have to perform an additional call to request the stylesheet. 
In this second case, we should still verify that we use the cached version I guess?

The test now checks that we don't do extra requests if the netmonitor was opened, and consequently validates this bug. 
We need to update the name and jsdoc accordingly.

And we are now missing a test for Bug 978688. Which might be challenging to implement since we cannot use the netmonitor to inspect the requests.
Assignee

Comment 29

Last year
mozreview-review-reply
Comment on attachment 8940381 [details]
Bug 1306892 - Fetch stylesheets from network monitor.

https://reviewboard.mozilla.org/r/210646/#review216796

> Sorry about the flyby (really happy to see this getting fixed!), but I think this test might need updating. 
> 
> Initially this was opened for Bug 978688, because the StyleEditor was generating too much traffic. 
> 
> After this patch lands, if the netmonitor was opened, the style editor will not request the stylesheet a second time. 
> But if the netmonitor was not opened, the style editor will still have to perform an additional call to request the stylesheet. 
> In this second case, we should still verify that we use the cached version I guess?
> 
> The test now checks that we don't do extra requests if the netmonitor was opened, and consequently validates this bug. 
> We need to update the name and jsdoc accordingly.
> 
> And we are now missing a test for Bug 978688. Which might be challenging to implement since we cannot use the netmonitor to inspect the requests.

As discussed on IRC, the network monitor is always listening on toolbox open these days.  So, there isn't really a "network monitor was not listening" case if we are running a test with our tools already open.

Anyway, we decided we should at least rename / update comments in the test.
Comment hidden (mozreview-request)

Comment 31

Last year
mozreview-review
Comment on attachment 8940793 [details]
Bug 1306892 - Update style editor fetch test info.

https://reviewboard.mozilla.org/r/211062/#review216830

LGTM, thanks!

::: devtools/client/styleeditor/test/browser_styleeditor_fetch-from-netmonitor.js:13
(Diff revision 1)
>  
>  const TEST_URL = TEST_BASE_HTTP + "doc_uncached.html";
>  
>  add_task(function* () {
>    // Disable rcwn to make cache behavior deterministic.
>    yield pushPref("network.http.rcwn.enabled", false);

This could also be removed, it doesn't bring anything anything to this test.
Attachment #8940793 - Flags: review?(jdescottes) → review+
Comment hidden (mozreview-request)

Comment 33

Last year
Pushed by jryans@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/dfda2fbda09a
Update style editor fetch test info. r=jdescottes

Comment 34

Last year
bugherder
https://hg.mozilla.org/mozilla-central/rev/e188cb9fe8f5
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
We're about a week away from shipping DevEdition from Fx59, so calling this wontfix for Fx58 at this point. Feel free to set the status back to affected and nominate for uplift if you feel strongly otherwise.

Updated

Last year
Depends on: 1429254
No longer blocks: top-inspector-bugs

Updated

Last year
Product: Firefox → DevTools

Updated

10 months ago
Duplicate of this bug: 1071613
You need to log in before you can comment on or make changes to this bug.