bugzilla.mozilla.org has resumed normal operation. Attachments prior to 2014 will be unavailable for a few days. This is tracked in Bug 1475801.
Please report any other irregularities here.

Gutter in CodeMirror editor detaches from edge when APZ is enabled

NEW
Unassigned

Status

()

Core
Panning and Zooming
P3
normal
3 years ago
8 months ago

People

(Reporter: kats, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 1 bug)

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox45 affected)

Details

(Whiteboard: [apz-evangelism] [needsPR] [gfx-noted])

Attachments

(2 attachments)

Enable APZ on desktop (set layers.async-pan-zoom.enabled to true and restart). Then open WebIDE and debug something (in my case I'm inspecting a Fennec build on a device) so that you get a code listing that is horizontally scrollable. Scrolling horizontally using a trackpad (or anything that generates wheel events) will trigger async horizontal scrolling, and you will see the line number gutter detach from where it's supposed to be. Presumably the position of the gutter is updated on scroll events, which are delayed when APZ is enabled. The gutter should probably use something like position:sticky instead so that it can be moved in the compositor asynchronously.
Created attachment 8600408 [details]
Screenshot of displaced gutter
Is this specific to a particular OS?  I tried to reproduce after enabling APZ on Mac, but it appeared to work correctly.
Flags: needinfo?(bugmail.mozilla)
I'm seeing it on OS X nightly. Note that you might need to enable e10s also if you don't have it enabled already, since APZ only takes effect in e10s windows.
Flags: needinfo?(bugmail.mozilla)
(In reply to Kartikaya Gupta (email:kats@mozilla.com) from comment #3)
> I'm seeing it on OS X nightly. Note that you might need to enable e10s also
> if you don't have it enabled already, since APZ only takes effect in e10s
> windows.

Ah thanks, I see it now after enabling e10s.

Moving to Debugger, as I can also reproduce this with the debugger for local tabs, so it's not specific to WebIDE.
Component: Developer Tools: WebIDE → Developer Tools: Debugger
Summary: Gutter in code viewer panel in WebIDE debugger pane detach from edge when APZ is enabled → Gutter in code viewer panel in debugger pane detach from edge when APZ is enabled
See Also: → bug 1205459
Blocks: 1178298
No longer blocks: 1013364
I took a closer look at this, it seems like the debugger is using the CodeMirror source viewer, so presumably if we want to fix this, it should be done upstream in CodeMirror and then we should update our local version to include the fix.

I also took a brief look at the CodeMirror HTML structure, and it seems a little tricky to fix because the line numbers are stored in a per-line element rather than a separate vertical container like I had imagined they would be. I'll try a bit harder and if I get stuck will probably request help from the CodeMirror dev team.
Created attachment 8696571 [details]
Prototype of position:sticky code viewer

I spent some time today coming up with a version of the codemirror code viewer that uses position:sticky and works with APZ in firefox. It doesn't work in other browsers, and I haven't tried integrating it into the codemirror codebase yet.
status-firefox40: affected → ---
status-firefox45: --- → affected
We have patches in bug 1192919 and bug 1209970 that should reduce the lag; beyond that there's not much we can do here except try to get CodeMirror updated to use position:sticky. Dropping this from the APZ blocker list.
Blocks: 1013364
No longer blocks: 1178298
Whiteboard: [apz-evangelism]
See Also: → bug 1239615
If I understood this requires a PR on codeMirror.
Whiteboard: [apz-evangelism] → [apz-evangelism] [needsPR]
(Jryans said it's likely this bug I'm seeing, so posting here instead of filing a new bug.)

This makes WebIDE editor on Mac unusable when scrolling with the trackpad. Easy to reproduce by loading even a small JS file in the WebIDE editor and scrolling using two fingers on the trackpad.

Video where I am attempting to scroll for the entire duration: https://www.youtube.com/watch?v=z6d0402uWPU

If APZ breaks WebIDE this bad, it should be disabled there. We can't ship a perf regression of this magnitude.
From the video it looks like there is more going on than just this bug. This bug is about a transient gutter placement issue, but for you it looks like not only is the gutter permanently displaced, scrolling jumps rather than moving smoothly. Is that an accurate description of what you're seeing? If so, please file a new bug for it. I'll try to repro when I get a chance.
Actually, what you might be seeing is bug 1239615, which is specific to horizontal scrolling, also in CodeMirror.
Hi Kats, yes that is what is happening. Also, I disabled APZ and the bug still occurs. Filed bug 1243554 for it.
(In reply to Kartikaya Gupta (email:kats@mozilla.com) from comment #11)
> Actually, what you might be seeing is bug 1239615, which is specific to
> horizontal scrolling, also in CodeMirror.

I'm only scrolling vertically.
In theory bug 1250398 should have fixed this, although I can still repro it. Added a comment to that bug.
See Also: → bug 1250398
(In reply to Kartikaya Gupta (email:kats@mozilla.com) from comment #14)
> In theory bug 1250398 should have fixed this, although I can still repro it.
> Added a comment to that bug.

IIUC, the remaining issue there has been fixed by bug 1257641.

With that fix in place, can you reproduce any remaining misbehaviour in the debugger's code viewer?
Flags: needinfo?(bugmail.mozilla)
No, I can't repro any misbehaviours in Nightly. We can close this bug if the Devtools team is fine with having non-APZ scrolling in the debugger panes.
Flags: needinfo?(bugmail.mozilla)
Do we want to use this bug to track CodeMirror making their editor more APZ-friendly, or are we doing that elsewhere?
I don't think we're doing that anywhere else, we can use this bug for it.
(In reply to Kartikaya Gupta (email:kats@mozilla.com) from comment #18)
> I don't think we're doing that anywhere else, we can use this bug for it.

Updating bug description and component to reflect this. The bug is already marked [needsPR].
Component: Developer Tools: Debugger → Panning and Zooming
Product: Firefox → Core
Summary: Gutter in code viewer panel in debugger pane detach from edge when APZ is enabled → Gutter in CodeMirror editor detaches from edge when APZ is enabled

Updated

2 years ago
Whiteboard: [apz-evangelism] [needsPR] → [apz-evangelism] [needsPR] [gfx-noted]
Kats and I discussed this last week, and concluded that, in addition to the CodeMirror fix, it might make sense to wait until we have the displayport API being proposed in bug 1232491, before seeking to re-enable APZ in the devtools debugger, as otherwise the debugger pane would constantly checkerboard.
Depends on: 1232491
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.