1333004 - Grabbing and scrolling the details panel of a request in the Netmonitor is jerky

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P1)

Description

[Loic]

Especially when the dev tools are dock-sided on the right.

Comment 1

[Loic]

It's clearly a recent regression in FF53 since some builds in January.
I cannot find a clear regression range due to bug 1331821, but after it landed, the jerkiness is present.

Comment 2

[Ricky Chien [:rickychien] (inactive)]

Thanks for reporting this!

I'd like to double confirms this. Could you reproduce the issue when only opening headers tab? 

STR:
1. Toggle first request item to open details panel.
2. Don't touch other tabs.
3. Select another request continuously to see if it's still jerky.

Comment 3

[Loic]

(In reply to Ricky Chien [:rickychien] from comment #2)
> Thanks for reporting this!
> 
> I'd like to double confirms this. Could you reproduce the issue when only
> opening headers tab? 
> 
> STR:
> 1. Toggle first request item to open details panel.
> 2. Don't touch other tabs.
> 3. Select another request continuously to see if it's still jerky.

Yes, same issue: it becomes unresponsive fastly after 4 or 5 request selections (panel stops displaying details), huge CPU use (one core at 25%) and moderate increase of memory use.

Comment 4

[Ricky Chien [:rickychien] (inactive)]

First step I'm going to disable syntax highlight as preview version when response body size < 100KB.
Second step I'm expecting that this patch will be included a fix for addressing the issue for tabs cache array a.k.a this.state.created in tabs.js

Comment 5

[Ricky Chien [:rickychien] (inactive)]

Attachment: Bug 1333004 - Selecting the details panel request is slow

Review commit: https://reviewboard.mozilla.org/r/107338/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/107338/

Comment 6

[Ricky Chien [:rickychien] (inactive)]

Honza, patch is testable but it has to apply on top of patch in bug 1333364.

I introduced a new prop "renderOnlySelected" for rendering selected panel on DOM but not for the other panels. It's opposite of the "created" array which memorizes panel indexes that have been selected. 

The mechanism of using "created" array is able to speed up in the most cases if panel content is unchangeable and predictable, but it's not in netmonitor. Browsing different request causes panel props updated accordingly which impacts on irrelevant panels update as well. For example, if we select all panels (headers, cookies, params, response...) first and then pick up other requests continuously, you might feel netmonitor jerky even if you only select the headers panel. The rest of panels will keep updating and rendering all the time when selected request changes.

Comment 7

[Ricky Chien [:rickychien] (inactive)]

CodeMirror is the slowest factor which I noticed. When response panel has been selected, recreating and reloading CodeMirror iframe is quite slow. So my solution is that not to create unselected panels if "renderOnlySelected" props is true.

Comment 8

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/107338/diff/1-2/

Comment 9

[Ricky Chien [:rickychien] (inactive)]

Updated and rebased the patch on top of bug 1333364.

Honza, jerky issue can be noticed easily by 

1. Select a request which is html or JS.
2. Click on response tab and then you will see the CodeMirror editor on the panel.
3. Click on timings tab to see timings result.
4. Switch to another request continuously to see timings panel's animation

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

https://reviewboard.mozilla.org/r/107338/#review108526

Thanks for the patch Ricky!

I was able to reproduce the issue using and this patch indeed fixes it.

R+ assuming try is green.

Honza

Comment 11

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/107338/diff/2-3/

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fc622c507405
Selecting the details panel request is slow r=Honza

Comment 13

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Had to back this out so bug 1333364 could be backed out:

https://hg.mozilla.org/integration/autoland/rev/9faa50118be5d6e54943c2cb4aa36e94ecd864ed

Comment 14

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/107338/diff/3-4/

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a3dc972fc515
Selecting the details panel request is slow r=Honza

Comment 16

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a3dc972fc515

Comment 17

[Ciprian Georgiu, Desktop QA]

I've managed to reproduce this issue with Nightly from 2017-01-23 following STR from comment 2.
Verified fixed on latest Nightly 54.0a1 (2017-02-02) across platforms:
- Windows 10 x64
- Mac OS 10.11.6
- Ubuntu 16.04 x64 LTS

Comment 18

[Loic]

I agree the STR in comment #2 are fixed, but not my primary issue. Grabbing and moving the detais panel of a request is still jerky, more than in FF51 e.g (ofc, I can live with that ;D )

About the CPU use, it's still climbing to 25%, but like in FF51 (surely not a recent issue).

Comment 19

[Ryan VanderMeulen [:RyanVM]]

Please request Aurora approval on this when you get a chance.

Comment 20

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Approval Request Comment
[Feature/Bug causing the regression]: bug 1317650
[User impact if declined]: noticeable performance impact
[Is this code covered by automated tests?]: no
[Has the fix been verified in Nightly?]: yes
[Needs manual test from QE? If yes, steps to reproduce]: yes, see https://bugzilla.mozilla.org/show_bug.cgi?id=1333004#c17
[List of other uplifts needed for the feature/fix]: no
[Is the change risky?]: no
[Why is the change risky/not risky?]: This is an edge case when user selects requests continuously
[String changes made/needed]: no

Comment 21

[Gerry Chang [:gchang]]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Fix a perf regression when selecting details panel. Aurora53+.

Comment 22

[Gerry Chang [:gchang]]

Track 53+ as this is a noticeable performance regression.

Comment 23

[Ryan VanderMeulen [:RyanVM]]

Needs a rebased patch for the uplift to Aurora.

Comment 24

[Ricky Chien [:rickychien] (inactive)]

Unfortunately, it's not that easy to uplift one patch to fix this issue on Aurora. I've done a substantial changes recently and the issue could be fixed by uplifting a series of patches but the chances are it will be a high risk and cause many regressions to Aurora. IMO, it's an edge case and it not that easy to notice in normal use cases.

Gerry, I'd like to drop the approval-mozilla-aurora for above reason. Please remove the flag. thanks!

Comment 25

[Gerry Chang [:gchang]]

Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Per comment #24, Aurora53-.