Closed Bug 1333004 Opened 7 years ago Closed 7 years ago

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

Categories

(DevTools :: Netmonitor, defect, P1)

53 Branch
x86_64
Windows 7
defect

Tracking

(firefox50 unaffected, firefox51 unaffected, firefox52 unaffected, firefox53+ wontfix, firefox54 verified)

VERIFIED FIXED
Firefox 54
Iteration:
54.1 - Feb 6
Tracking Status
firefox50 --- unaffected
firefox51 --- unaffected
firefox52 --- unaffected
firefox53 + wontfix
firefox54 --- verified

People

(Reporter: epinal99-bugzilla2, Assigned: rickychien)

References

(Blocks 1 open bug)

Details

(Keywords: regression, Whiteboard: [netmonitor])

Attachments

(1 file)

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

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.
Flags: needinfo?(rchien)
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.
Flags: needinfo?(rchien)
(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.
Whiteboard: [netmonitor][triage]
Flags: qe-verify+
Priority: -- → P1
QA Contact: ciprian.georgiu
Whiteboard: [netmonitor][triage] → [netmonitor]
Assignee: nobody → rchien
Status: NEW → ASSIGNED
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
Iteration: --- → 54.1 - Feb 6
Depends on: 1333364
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.
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.
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 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
Attachment #8830589 - Flags: review?(odvarko) → review+
Has STR: --- → yes
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/fc622c507405
Selecting the details panel request is slow r=Honza
Flags: needinfo?(rchien)
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a3dc972fc515
Selecting the details panel request is slow r=Honza
https://hg.mozilla.org/mozilla-central/rev/a3dc972fc515
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 54
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
Status: RESOLVED → VERIFIED
Flags: qe-verify+
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).
Please request Aurora approval on this when you get a chance.
Flags: needinfo?(rchien)
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
Flags: needinfo?(rchien)
Attachment #8830589 - Flags: approval-mozilla-aurora?
Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Fix a perf regression when selecting details panel. Aurora53+.
Attachment #8830589 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Track 53+ as this is a noticeable performance regression.
Needs a rebased patch for the uplift to Aurora.
Flags: needinfo?(rchien)
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!
Flags: needinfo?(rchien) → needinfo?(gchang)
Comment on attachment 8830589 [details]
Bug 1333004 - Selecting the details panel request is slow

Per comment #24, Aurora53-.
Flags: needinfo?(gchang)
Attachment #8830589 - Flags: approval-mozilla-aurora+ → approval-mozilla-aurora-
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: