[DevTools] Synchronize Scroll Position Between Suspense Tab and Main Document

[sebmarkbage]

It's annoying to have to try to find where it lines up with no hints.

This way when you hover over something it should be on screen.

The strategy I went with is that it scrolls to a percentage along the scrollable axis but the two might not be exactly the same. Partially because they have different aspect ratios but also because suspended boundaries can shrink the document while the suspense tab needs to still be able to show the boundaries that are currently invisible.

[eps1lon]

Can you describe the UX? Especially what the source of truth is. If I scroll the Suspense tab, does it scroll the main document?

My original idea was to add indicators if you're out of bounds which you can click to sync back up. Synchronizing would be an opt in. Doing that by default sounds frustrating.

Partially because they have different aspect ratios

I don't think so. The height is scaled based on the original width/height relation. Unless you mean that the measurement we do on boundaries may not include the document.

[sebmarkbage]

Neither is source of truth. The source of truth is the last thing that scrolled that wasn't scrolled due us scrolling it to synchronize. I.e. the last time the user scrolled something is syncs to that. So it works in cases like when the document isn't scrollable at all because you can still scroll the suspense one and vice versa.

I find it infuriating to look for a boundary even with arrows. I'd always want it in the same thing. It's just a different kind of xray glasses for the same thing you're looking at. I think maybe we should even make it have the same aspect ratio as the original viewport so that you can see where fold-the-fold is in the other view.

More than that I want it to also auto scroll when I step through the timeline so I don't have to scroll through the whole thing to guess where the next step is going to be appearing. I have a follow up for that.

The height is scaled based on the original width/height relation. Unless you mean that the measurement we do on boundaries may not include the document.

The measurements we do on the boundaries are not the same as the scrollable area of the document. For example, the root by itself isn't even enough because if you have a html tag with 100% height, but then the content overflows then the size of the root will be that but the scrollable area in the document is actually higher than that. We could maybe adjust the document.documentElement measurements to account for this. EDIT: #34651. However, we also include the rects recursively now and those rects might not actually expand the scrollable area of the document. E.g. if they're inside overflow hidden or nested scrolls.

[sebmarkbage]

To clarify. The aspect ratio of the document is the same. The aspect ratio of the viewport is currently not. So the top and bottom of each viewport won't match. However, I have considered that maybe we should make it match so that the viewport in suspense tab adds gray "black bars" (as in TV/movie aspect ratio) top or bottom so that the viewport can see the same thing. At the cost of less precision in the UI (more zoomed out).

In that case it might be better to synchronize on pixels (like I had in some previous commits in this PR) so that you see the same thing.

[eps1lon]

I don't think that's good UX but I also don't have a working example with indicators and ad-hoc scroll yet.

Used it a bit and I like the UX. It seemed foreign to me since I couldn't think of existing UIs that sync scroll. But minimaps do (e.g. VSCode code minimap) and there scroll-syncing makes sense. The Suspense tab is also a minimap so syncing scroll makes sense.

[sebmarkbage]

The way it currently works when you have content resuspended at the bottom of the page is not good. Because the suspense tab is taller than the real page and the percentage scrolling means you can't get the same thing into the viewport. That's really bad. I think I'll need to take another pass at it which goes by pixels like I had it earlier commits so that you can scroll deeper in one than the other but still can line up the same content on both.